rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(preferences): Defaults segment

Browse Source 
feat: Dropdown component
This commit is contained in:
Aman Harwara
2021-09-30 20:50:44 +05:30
parent 0a3521a25c
commit b4fcc993aa
6 changed files with 188 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
app/assets/javascripts/components/Dropdown.tsx Normal file
View File

@@ -0,0 +1,45 @@
import { Listbox, ListboxOption } from '@reach/listbox';
import VisuallyHidden from '@reach/visually-hidden';
import { FunctionComponent } from 'preact';
import { IconType } from './Icon';
import '@reach/listbox/styles.css';
import { useState } from 'preact/hooks';
export type DropdownItem = {
icon?: IconType;
label: string;
value: string;
};
type Props = {
id: string;
srLabel: string;
items: DropdownItem[];
defaultValue: string;
};
export const Dropdown: FunctionComponent<Props> = ({
id,
srLabel,
items,
defaultValue,
}) => {
const [value, setValue] = useState(defaultValue);
const labelId = `${id}-label`;
return (
<>
<VisuallyHidden id={labelId}>{srLabel}</VisuallyHidden>
<Listbox
value={value}
onChange={(value) => setValue(value)}
aria-labelledby={labelId}
>
{items.map((item) => (
<ListboxOption value={item.value}>{item.label}</ListboxOption>
))}
</Listbox>
</>
);
};

4
app/assets/javascripts/preferences/panes/General.tsx
View File

@@ -2,8 +2,7 @@ import { WebApplication } from '@/ui_models/application';
import { AppState } from '@/ui_models/app_state';
import { FunctionComponent } from 'preact';
import { PreferencesPane } from '../components';
import { ErrorReporting } from './general-segments';
import { Tools } from './general-segments/Tools';
import { ErrorReporting, Tools, Defaults } from './general-segments';
interface GeneralProps {
appState: AppState;
@@ -13,6 +12,7 @@ interface GeneralProps {
export const General: FunctionComponent<GeneralProps> = (props) => (
<PreferencesPane>
<Tools application={props.application} />
<Defaults application={props.application} />
<ErrorReporting appState={props.appState} />
</PreferencesPane>
);

59
app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx Normal file
View File

@@ -0,0 +1,59 @@
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>
);
};

1
app/assets/javascripts/preferences/panes/general-segments/index.ts
View File

@@ -1,2 +1,3 @@
export * from './ErrorReporting';
export * from './Tools';
export * from './Defaults';

3
package.json
View File

@@ -70,8 +70,9 @@
"@reach/alert-dialog": "^0.13.0",
"@reach/checkbox": "^0.13.2",
"@reach/dialog": "^0.13.0",
"@standardnotes/sncrypto-web": "1.5.2",
"@reach/listbox": "^0.16.1",
"@standardnotes/features": "1.6.1",
"@standardnotes/sncrypto-web": "1.5.2",
"@standardnotes/snjs": "2.14.8",
"mobx": "^6.3.2",
"mobx-react-lite": "^3.2.0",

83
yarn.lock
View File

@@ -1834,6 +1834,14 @@
"@reach/utils" "0.15.2"
tslib "^2.3.0"
"@reach/auto-id@0.16.0":
version "0.16.0"
resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.16.0.tgz#dfabc3227844e8c04f8e6e45203a8e14a8edbaed"
integrity sha512-5ssbeP5bCkM39uVsfQCwBBL+KT8YColdnMN5/Eto6Rj7929ql95R3HZUOkKIvj7mgPtEb60BLQxd1P3o6cjbmg==
dependencies:
"@reach/utils" "0.16.0"
tslib "^2.3.0"
"@reach/checkbox@^0.13.2":
version "0.13.2"
resolved "https://registry.yarnpkg.com/@reach/checkbox/-/checkbox-0.13.2.tgz#b972b922cf6cea0c2bbabca0129c58307b566a4e"
@@ -1853,6 +1861,14 @@
"@reach/utils" "0.15.2"
tslib "^2.3.0"
"@reach/descendants@0.16.1":
version "0.16.1"
resolved "https://registry.yarnpkg.com/@reach/descendants/-/descendants-0.16.1.tgz#fa3d89c0503565369707f32985d87eef61985d9f"
integrity sha512-3WZgRnD9O4EORKE31rrduJDiPFNMOjUkATx0zl192ZxMq3qITe4tUj70pS5IbJl/+v9zk78JwyQLvA1pL7XAPA==
dependencies:
"@reach/utils" "0.16.0"
tslib "^2.3.0"
"@reach/dialog@0.13.0", "@reach/dialog@^0.13.0":
version "0.13.0"
resolved "https://registry.yarnpkg.com/@reach/dialog/-/dialog-0.13.0.tgz#2110725c3b8a3c64685834cdc9f3ce5c15617809"
@@ -1887,6 +1903,18 @@
"@reach/utils" "0.15.2"
prop-types "^15.7.2"
"@reach/listbox@^0.16.1":
version "0.16.1"
resolved "https://registry.yarnpkg.com/@reach/listbox/-/listbox-0.16.1.tgz#8a4a13cf171e9ba3118d2e6e72f3e7f17f4c2f80"
integrity sha512-2KQTYmxKvZW0XdBWGoV7E2gUWWBINJmfj2MDRmWbRNdTjsF9w3mTb09buTWQ2sznzF7DrLrwiBFv4b2egMfKOw==
dependencies:
"@reach/auto-id" "0.16.0"
"@reach/descendants" "0.16.1"
"@reach/machine" "0.16.0"
"@reach/popover" "0.16.0"
"@reach/utils" "0.16.0"
prop-types "^15.7.2"
"@reach/machine@0.13.2":
version "0.13.2"
resolved "https://registry.yarnpkg.com/@reach/machine/-/machine-0.13.2.tgz#744302f5ce2d4e5fd0527ae0baa60d325b2325d8"
@@ -1905,6 +1933,15 @@
"@xstate/fsm" "1.4.0"
tslib "^2.3.0"
"@reach/machine@0.16.0":
version "0.16.0"
resolved "https://registry.yarnpkg.com/@reach/machine/-/machine-0.16.0.tgz#0504ba47ac09ed495bd341bf5fdd6625bcade0e3"
integrity sha512-c8SRQz2xGtg5M9aXuuM5pFgaV1ZW5/nyMIYpZzBwHUlNFKGO+VBhwedbnqUxO0yLcbgl3wPvjPh740O3YjqiHg==
dependencies:
"@reach/utils" "0.16.0"
"@xstate/fsm" "1.4.0"
tslib "^2.3.0"
"@reach/menu-button@^0.15.1":
version "0.15.2"
resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.15.2.tgz#00f91402be3ff23d3b4cfe377529f4f9e82a78fe"
@@ -1934,6 +1971,17 @@
tabbable "^4.0.0"
tslib "^2.3.0"
"@reach/popover@0.16.0":
version "0.16.0"
resolved "https://registry.yarnpkg.com/@reach/popover/-/popover-0.16.0.tgz#82c5ab96a88c49e2451a9c04b2d4392a9055f623"
integrity sha512-xmgiSyQwfshMkMNu6URbGrjjDTD3dnAITojvgEqfEtV1chDYqktKdDbIPrq+UGI54ey/IxbRpVzKcIjXiKoMmA==
dependencies:
"@reach/portal" "0.16.0"
"@reach/rect" "0.16.0"
"@reach/utils" "0.16.0"
tabbable "^4.0.0"
tslib "^2.3.0"
"@reach/portal@0.13.0":
version "0.13.0"
resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.13.0.tgz#bed220d41097deb1454a7928b22529ba10d3ea2b"
@@ -1950,6 +1998,14 @@
"@reach/utils" "0.15.2"
tslib "^2.3.0"
"@reach/portal@0.16.0":
version "0.16.0"
resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.16.0.tgz#1544531d978b770770b718b2872b35652a11e7e3"
integrity sha512-vXJ0O9T+72HiSEWHPs2cx7YbSO7pQsTMhgqPc5aaddIYpo2clJx1PnYuS0lSNlVaDO0IxQhwYq43evXaXnmviw==
dependencies:
"@reach/utils" "0.16.0"
tslib "^2.3.0"
"@reach/rect@0.15.2":
version "0.15.2"
resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.15.2.tgz#734e3f17a499d6e22bd2ea95856c801c41ed66fd"
@@ -1961,6 +2017,17 @@
tiny-warning "^1.0.3"
tslib "^2.3.0"
"@reach/rect@0.16.0":
version "0.16.0"
resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.16.0.tgz#78cf6acefe2e83d3957fa84f938f6e1fc5700f16"
integrity sha512-/qO9jQDzpOCdrSxVPR6l674mRHNTqfEjkaxZHluwJ/2qGUtYsA0GSZiF/+wX/yOWeBif1ycxJDa6HusAMJZC5Q==
dependencies:
"@reach/observe-rect" "1.2.0"
"@reach/utils" "0.16.0"
prop-types "^15.7.2"
tiny-warning "^1.0.3"
tslib "^2.3.0"
"@reach/utils@0.13.0":
version "0.13.0"
resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.13.0.tgz#2da775a910d8894bb34e1e94fe95842674f71844"
@@ -1996,6 +2063,14 @@
tiny-warning "^1.0.3"
tslib "^2.3.0"
"@reach/utils@0.16.0":
version "0.16.0"
resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.16.0.tgz#5b0777cf16a7cab1ddd4728d5d02762df0ba84ce"
integrity sha512-PCggBet3qaQmwFNcmQ/GqHSefadAFyNCUekq9RrWoaU9hh/S4iaFgf2MBMdM47eQj5i/Bk0Mm07cP/XPFlkN+Q==
dependencies:
tiny-warning "^1.0.3"
tslib "^2.3.0"
"@reach/visually-hidden@0.13.0":
version "0.13.0"
resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.13.0.tgz#cace36d9bb80ffb797374fcaea989391b881038f"
@@ -2069,10 +2144,10 @@
"@standardnotes/sncrypto-common" "^1.5.2"
libsodium-wrappers "^0.7.8"
"@standardnotes/snjs@2.14.6":
version "2.14.6"
resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.14.6.tgz#fb3f625ec6f22bbee543ccb6fc69e177311c1a4b"
integrity sha512-/PfuyOv2u4Km29yQi2JXYYUteFmHmLYnbQhk96wYHbCwBiNmIyVdSp0VaA4XgVIuZq32QyhhTayjkexq5Huw/Q==
"@standardnotes/snjs@2.14.8":
version "2.14.8"
resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.14.8.tgz#ebd89734d7e846ade96b7d0d81a465418147337d"
integrity sha512-+nfo1civqJlHfrcDeKNJfp2t6o4gs1pkDbjPzT3vULhZUWbOwCeuF1jXHosCxpjnhd+5Wa/oG2KcbKKsqlrrfw==
dependencies:
"@standardnotes/auth" "3.7.2"
"@standardnotes/common" "1.1.0"