Skip to content

Commit 06a36bd

Browse files
KomediruzeckiKomediruzecki
committed
Deprecate show contents of subfolders option
Update archived at in PouchDB as well Implement batch export in new sidebar Add batch export options in modal dialog Refactor some components (folder select form item) Expand FormSelect item with labels Refactor preference pages (discard deprecated ones) Refactor EditorTab Replace editor tab preference components with shared ones
1 parent 2b41464 commit 06a36bd

24 files changed

+658
-1169
lines changed

‎src/components/PreferencesModal/AboutTab.tsx

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -72,21 +72,19 @@ const AboutContents = styled.div`
7272
}
7373
}
7474
}
75-
`
76-
77-
interface PrimaryLinkProps {
78-
href: string
79-
children: string
80-
}
8175
82-
const PrimaryLinkContainer = styled.div`
8376
.about__tab__primary__link {
8477
:hover {
8578
text-decoration: underline;
8679
}
8780
}
8881
`
8982

83+
interface PrimaryLinkProps {
84+
href: string
85+
children: string
86+
}
87+
9088
const PrimaryLink = ({ href, children }: PrimaryLinkProps) => {
9189
const handleClick = useCallback(
9290
(event: React.MouseEvent) => {
@@ -97,15 +95,13 @@ const PrimaryLink = ({ href, children }: PrimaryLinkProps) => {
9795
)
9896

9997
return (
100-
<PrimaryLinkContainer>
101-
<Link
102-
className={cc(['about__tab__primary__link'])}
103-
href={href}
104-
onClick={handleClick}
105-
>
106-
{children}
107-
</Link>
108-
</PrimaryLinkContainer>
98+
<Link
99+
className={cc(['about__tab__primary__link'])}
100+
href={href}
101+
onClick={handleClick}
102+
>
103+
{children}
104+
</Link>
109105
)
110106
}
111107

‎src/components/PreferencesModal/EditorTab.tsx

Lines changed: 123 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,18 @@ import React, {
22
useCallback,
33
useState,
44
useMemo,
5-
ChangeEventHandler,
65
KeyboardEventHandler,
6+
ChangeEventHandler,
77
} from 'react'
8-
import {
9-
Section,
10-
SectionHeader,
11-
SectionControl,
12-
SectionSelect,
13-
SectionInput,
14-
} from './styled'
8+
import { SectionControl } from './styled'
159
import { useTranslation } from 'react-i18next'
16-
import {
17-
usePreferences,
18-
EditorIndentTypeOptions,
19-
EditorIndentSizeOptions,
20-
EditorKeyMapOptions,
21-
} from '../../lib/preferences'
22-
import { SelectChangeEventHandler } from '../../lib/events'
10+
import { usePreferences, EditorIndentSizeOptions } from '../../lib/preferences'
2311
import { themes } from '../../lib/CodeMirror'
24-
import { capitalize } from '../../lib/string'
2512
import CustomizedCodeEditor from '../atoms/CustomizedCodeEditor'
2613
import { useDebounce } from 'react-use'
2714
import { useAnalytics, analyticsEvents } from '../../lib/analytics'
15+
import Form from '../../shared/components/molecules/Form'
16+
import { SimpleFormSelect } from '../../shared/components/molecules/Form/atoms/FormSelect'
2817

2918
const defaultPreviewContent = `# hello-world.js
3019
@@ -39,10 +28,10 @@ const EditorTab = () => {
3928
const { preferences, setPreferences } = usePreferences()
4029
const { report } = useAnalytics()
4130

42-
const selectEditorTheme: SelectChangeEventHandler = useCallback(
43-
(event) => {
31+
const selectEditorTheme = useCallback(
32+
(value) => {
4433
setPreferences({
45-
'editor.theme': event.target.value,
34+
'editor.theme': value,
4635
})
4736
report(analyticsEvents.updateEditorTheme)
4837
},
@@ -88,31 +77,28 @@ const EditorTab = () => {
8877
[fontFamily, setPreferences]
8978
)
9079

91-
const selectEditorIndentType: SelectChangeEventHandler = useCallback(
92-
(event) => {
80+
const selectEditorIndentType = useCallback(
81+
(value) => {
9382
setPreferences({
94-
'editor.indentType': event.target.value as EditorIndentTypeOptions,
83+
'editor.indentType': value,
9584
})
9685
},
9786
[setPreferences]
9887
)
9988

100-
const selectEditorIndentSize: SelectChangeEventHandler = useCallback(
101-
(event) => {
89+
const selectEditorIndentSize = useCallback(
90+
(value) => {
10291
setPreferences({
103-
'editor.indentSize': parseInt(
104-
event.target.value,
105-
10
106-
) as EditorIndentSizeOptions,
92+
'editor.indentSize': parseInt(value, 10) as EditorIndentSizeOptions,
10793
})
10894
},
10995
[setPreferences]
11096
)
11197

112-
const selectEditorKeyMap: SelectChangeEventHandler = useCallback(
113-
(event) => {
98+
const selectEditorKeyMap = useCallback(
99+
(value) => {
114100
setPreferences({
115-
'editor.keyMap': event.target.value as EditorKeyMapOptions,
101+
'editor.keyMap': value,
116102
})
117103
},
118104
[setPreferences]
@@ -131,90 +117,112 @@ const EditorTab = () => {
131117
const { t } = useTranslation()
132118
return (
133119
<div>
134-
<Section>
135-
<SectionHeader>{t('preferences.editorTheme')}</SectionHeader>
136-
<SectionControl>
137-
<SectionSelect
138-
value={preferences['editor.theme']}
139-
onChange={selectEditorTheme}
140-
>
141-
<option value='default'>Default</option>
142-
{themes.map((theme) => (
143-
<option value={theme} key={theme}>
144-
{capitalize(theme)}
145-
</option>
146-
))}
147-
</SectionSelect>
148-
</SectionControl>
149-
</Section>
150-
<Section>
151-
<SectionHeader>{t('preferences.editorFontSize')}</SectionHeader>
152-
<SectionControl>
153-
<SectionInput
154-
type='number'
155-
value={fontSize}
156-
onChange={updateFontSize}
157-
/>{' '}
158-
&emsp;px
159-
</SectionControl>
160-
</Section>
161-
<Section>
162-
<SectionHeader>{t('preferences.editorFontFamily')}</SectionHeader>
163-
<SectionControl>
164-
<SectionInput
165-
type='value'
166-
value={fontFamily}
167-
onChange={updateFontFamily}
168-
/>
169-
</SectionControl>
170-
</Section>
171-
<Section>
172-
<SectionHeader>{t('preferences.editorIndentType')}</SectionHeader>
173-
<SectionControl>
174-
<SectionSelect
175-
value={preferences['editor.indentType']}
176-
onChange={selectEditorIndentType}
177-
>
178-
<option value='spaces'>{t('preferences.spaces')}</option>
179-
<option value='tab'>{t('preferences.tab')}</option>
180-
</SectionSelect>
181-
</SectionControl>
182-
</Section>
183-
<Section>
184-
<SectionHeader>{t('preferences.editorIndentSize')}</SectionHeader>
185-
<SectionControl>
186-
<SectionSelect
187-
value={preferences['editor.indentSize']}
188-
onChange={selectEditorIndentSize}
189-
>
190-
<option value={2}>2</option>
191-
<option value={4}>4</option>
192-
<option value={8}>8</option>
193-
</SectionSelect>
194-
</SectionControl>
195-
</Section>
196-
<Section>
197-
<SectionHeader>{t('preferences.editorKeymap')}</SectionHeader>
198-
<SectionControl>
199-
<SectionSelect
200-
value={preferences['editor.keyMap']}
201-
onChange={selectEditorKeyMap}
202-
>
203-
<option value='default'>Default</option>
204-
<option value='vim'>vim</option>
205-
<option value='emacs'>emacs</option>
206-
</SectionSelect>
207-
</SectionControl>
208-
</Section>
209-
<Section>
210-
<SectionHeader>{t('preferences.editorPreview')}</SectionHeader>
211-
<SectionControl onKeyDown={codeEditorKeydownInterceptor}>
212-
<CustomizedCodeEditor
213-
value={previewContent}
214-
onChange={(newValue) => setPreviewContent(newValue)}
215-
/>
216-
</SectionControl>
217-
</Section>
120+
<Form
121+
rows={[
122+
{
123+
title: t('preferences.editorTheme'),
124+
items: [
125+
{
126+
type: 'node',
127+
element: (
128+
<SimpleFormSelect
129+
value={preferences['editor.theme']}
130+
onChange={selectEditorTheme}
131+
options={themes}
132+
/>
133+
),
134+
},
135+
],
136+
},
137+
{
138+
title: t('preferences.editorFontSize'),
139+
items: [
140+
{
141+
type: 'input',
142+
props: {
143+
type: 'number',
144+
value: fontSize,
145+
onChange: updateFontSize,
146+
},
147+
},
148+
],
149+
},
150+
{
151+
title: t('preferences.editorFontFamily'),
152+
items: [
153+
{
154+
type: 'input',
155+
props: {
156+
type: 'text',
157+
value: fontFamily,
158+
onChange: updateFontFamily,
159+
},
160+
},
161+
],
162+
},
163+
{
164+
title: t('preferences.editorIndentType'),
165+
items: [
166+
{
167+
type: 'node',
168+
element: (
169+
<SimpleFormSelect
170+
value={preferences['editor.indentType']}
171+
onChange={selectEditorIndentType}
172+
options={['spaces', 'tabs']}
173+
/>
174+
),
175+
},
176+
],
177+
},
178+
{
179+
title: t('preferences.editorIndentSize'),
180+
items: [
181+
{
182+
type: 'node',
183+
element: (
184+
<SimpleFormSelect
185+
value={preferences['editor.indentSize'] + ''}
186+
onChange={selectEditorIndentSize}
187+
options={['2', '4', '8']}
188+
/>
189+
),
190+
},
191+
],
192+
},
193+
{
194+
title: t('preferences.editorKeymap'),
195+
items: [
196+
{
197+
type: 'node',
198+
element: (
199+
<SimpleFormSelect
200+
value={preferences['editor.keyMap'] + ''}
201+
onChange={selectEditorKeyMap}
202+
options={['default', 'vim', 'emacs']}
203+
/>
204+
),
205+
},
206+
],
207+
},
208+
{
209+
title: t('preferences.editorPreview'),
210+
items: [
211+
{
212+
type: 'node',
213+
element: (
214+
<SectionControl onKeyDown={codeEditorKeydownInterceptor}>
215+
<CustomizedCodeEditor
216+
value={previewContent}
217+
onChange={(newValue) => setPreviewContent(newValue)}
218+
/>
219+
</SectionControl>
220+
),
221+
},
222+
],
223+
},
224+
]}
225+
/>
218226
</div>
219227
)
220228
}

0 commit comments

Comments
 (0)