Files
standardnotes-app-web/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx
Aman Harwara b4fcc993aa feat(preferences): Defaults segment
feat: Dropdown component
2021-09-30 20:50:44 +05:30

60 lines
1.5 KiB
TypeScript

import { Dropdown, DropdownItem } from '@/components/Dropdown';
import {
PreferencesGroup,
PreferencesSegment,
Subtitle,
Text,
Title,
} from '@/preferences/components';
import { WebApplication } from '@/ui_models/application';
import { ComponentArea } from '@standardnotes/snjs';
import { FunctionComponent } from 'preact';
import { useEffect, useState } from 'preact/hooks';
type Props = {
application: WebApplication;
};
export const Defaults: FunctionComponent<Props> = ({ application }) => {
const [editorItems, setEditorItems] = useState<DropdownItem[]>([]);
useEffect(() => {
const editors = application.componentManager
.componentsForArea(ComponentArea.Editor)
.map((editor) => {
return {
label: editor.name,
value: editor.package_info.identifier,
};
});
setEditorItems([
{
label: 'Plain Editor',
value: 'plain-editor',
},
...editors,
]);
}, [application]);
return (
<PreferencesGroup>
<PreferencesSegment>
<Title>Defaults</Title>
<div className="mt-2">
<Subtitle>Default Editor</Subtitle>
<Text>New notes will be created using this editor.</Text>
<div className="mt-2">
<Dropdown
id="def-editor-dropdown"
srLabel="Select the default editor"
items={editorItems}
defaultValue="plain-editor"
/>
</div>
</div>
</PreferencesSegment>
</PreferencesGroup>
);
};