diff --git a/client/common/helpers/PreferenceCreators.jsx b/client/common/helpers/PreferenceCreators.jsx new file mode 100644 index 00000000..9b977e09 --- /dev/null +++ b/client/common/helpers/PreferenceCreators.jsx @@ -0,0 +1,26 @@ +export const optionsOnOff = (name, onLabel = 'On', offLabel = 'Off') => [ + { + value: true, label: onLabel, ariaLabel: `${name} on`, name: `${name}`, id: `${name}-on`.replace(' ', '-') + }, + { + value: false, label: offLabel, ariaLabel: `${name} off`, name: `${name}`, id: `${name}-off`.replace(' ', '-') + }, +]; + +export const optionsPickOne = (name, ...options) => options.map(option => ({ + value: option, + label: option, + ariaLabel: `${option} ${name} on`, + name: `${option} ${name}`, + id: `${option}-${name}-on`.replace(' ', '-') +})); + +const nameToValueName = x => (x && x.toLowerCase().replace(/#|_|-/g, ' ')); + +// preferenceOnOff: name, value and onSelect are mandatory. propname is optional +export const preferenceOnOff = (name, value, onSelect, propname) => ({ + title: name, + value, + options: optionsOnOff(propname || nameToValueName(name)), + onSelect +}); diff --git a/client/modules/Mobile/MobilePreferences.jsx b/client/modules/Mobile/MobilePreferences.jsx index 9ebb219c..07a1337c 100644 --- a/client/modules/Mobile/MobilePreferences.jsx +++ b/client/modules/Mobile/MobilePreferences.jsx @@ -14,6 +14,7 @@ import Header from '../../components/mobile/Header'; import PreferencePicker from '../../components/mobile/PreferencePicker'; import { ExitIcon } from '../../common/icons'; import { remSize, prop } from '../../theme'; +import { optionsOnOff, optionsPickOne, preferenceOnOff } from '../../common/helpers/PreferenceCreators'; const Content = styled.div` z-index: 0; @@ -29,23 +30,6 @@ const SectionSubeader = styled.h3` color: ${prop('primaryTextColor')}; `; -const optionsOnOff = (name, onLabel = 'On', offLabel = 'Off') => [ - { - value: true, label: onLabel, ariaLabel: `${name} on`, name: `${name}`, id: `${name}-on`.replace(' ', '-') - }, - { - value: false, label: offLabel, ariaLabel: `${name} off`, name: `${name}`, id: `${name}-off`.replace(' ', '-') - }, -]; - -const optionsPickOne = (name, ...options) => options.map(option => ({ - value: option, - label: option, - ariaLabel: `${option} ${name} on`, - name: `${option} ${name}`, - id: `${option}-${name}-on`.replace(' ', '-') -})); - const MobilePreferences = (props) => { const { @@ -62,56 +46,19 @@ const MobilePreferences = (props) => { options: optionsPickOne('theme', 'light', 'dark', 'contrast'), onSelect: x => setTheme(x) // setTheme }, - - { - title: 'Autosave', - value: autosave, - options: optionsOnOff('autosave'), - onSelect: x => setAutosave(x) // setAutosave - }, - - { - title: 'Word Wrap', - value: linewrap, - options: optionsOnOff('linewrap'), - onSelect: x => setLinewrap(x) - } + preferenceOnOff('Autosave', autosave, setAutosave, 'autosave'), + preferenceOnOff('Word Wrap', linewrap, setLinewrap, 'linewrap') ]; const outputSettings = [ - { - title: 'Plain-text', - value: textOutput, - options: optionsOnOff('text output'), - onSelect: x => setTextOutput(x) - }, - { - title: 'Table-text', - value: gridOutput, - options: optionsOnOff('table output'), - onSelect: x => setGridOutput(x) - }, - { - title: 'Sound', - value: soundOutput, - options: optionsOnOff('sound output'), - onSelect: x => setSoundOutput(x) - }, + preferenceOnOff('Plain-text', textOutput, setTextOutput, 'text output'), + preferenceOnOff('Table-text', gridOutput, setGridOutput, 'table output'), + preferenceOnOff('Lint Warning Sound', soundOutput, setSoundOutput, 'sound output') ]; const accessibilitySettings = [ - { - title: 'Line Numbers', - value: lineNumbers, - options: optionsOnOff('line numbers'), - onSelect: x => setLineNumbers(x) - }, - { - title: 'Lint Warning Sound', - value: lintWarning, - options: optionsOnOff('lint warning'), - onSelect: x => setLintWarning(x) - }, + preferenceOnOff('Line Numbers', lineNumbers, setLineNumbers), + preferenceOnOff('Lint Warning Sound', lintWarning, setLintWarning) ]; return (