p5.js-web-editor/client/modules/Mobile/MobilePreferences.jsx

93 lines
3.2 KiB
React
Raw Normal View History

import React from 'react';
2020-06-23 00:06:40 +00:00
import { bindActionCreators } from 'redux';
import { connect, useSelector, useDispatch } from 'react-redux';
import { withRouter } from 'react-router';
2020-06-23 00:06:40 +00:00
import PropTypes from 'prop-types';
import styled from 'styled-components';
import * as PreferencesActions from '../IDE/actions/preferences';
import * as IdeActions from '../IDE/actions/ide';
import IconButton from '../../components/mobile/IconButton';
2020-06-23 00:06:40 +00:00
import Screen from '../../components/mobile/MobileScreen';
import Header from '../../components/mobile/Header';
import PreferencePicker from '../../components/mobile/PreferencePicker';
2020-06-23 00:06:40 +00:00
import { ExitIcon } from '../../common/icons';
import { remSize, prop } from '../../theme';
import { optionsOnOff, optionsPickOne, preferenceOnOff } from '../IDE/components/Preferences/PreferenceCreators';
2020-06-23 00:06:40 +00:00
const Content = styled.div`
z-index: 0;
margin-top: ${remSize(68)};
`;
const SectionHeader = styled.h2`
color: ${prop('primaryTextColor')};
padding-top: ${remSize(32)};
`;
const SectionSubeader = styled.h3`
color: ${prop('primaryTextColor')};
`;
2020-06-23 00:06:40 +00:00
const MobilePreferences = () => {
// Props
const {
theme, autosave, linewrap, textOutput, gridOutput, soundOutput, lineNumbers, lintWarning
} = useSelector(state => state.preferences);
// Actions
const {
setTheme, setAutosave, setLinewrap, setTextOutput, setGridOutput, setSoundOutput, setLineNumbers, setLintWarning,
} = bindActionCreators({ ...PreferencesActions, ...IdeActions }, useDispatch());
const generalSettings = [
2020-06-23 00:06:40 +00:00
{
title: 'Theme',
value: theme,
options: optionsPickOne('theme', 'light', 'dark', 'contrast'),
onSelect: x => setTheme(x) // setTheme
2020-06-23 00:06:40 +00:00
},
preferenceOnOff('Autosave', autosave, setAutosave, 'autosave'),
preferenceOnOff('Word Wrap', linewrap, setLinewrap, 'linewrap')
2020-06-23 00:06:40 +00:00
];
2020-06-23 20:27:43 +00:00
const outputSettings = [
preferenceOnOff('Plain-text', textOutput, setTextOutput, 'text output'),
preferenceOnOff('Table-text', gridOutput, setGridOutput, 'table output'),
preferenceOnOff('Lint Warning Sound', soundOutput, setSoundOutput, 'sound output')
];
2020-06-23 20:27:43 +00:00
const accessibilitySettings = [
preferenceOnOff('Line Numbers', lineNumbers, setLineNumbers),
preferenceOnOff('Lint Warning Sound', lintWarning, setLintWarning)
2020-06-23 20:27:43 +00:00
];
2020-06-23 00:06:40 +00:00
return (
2020-06-23 19:18:34 +00:00
<Screen fullscreen>
<section>
<Header transparent title="Preferences">
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
</Header>
2020-06-23 19:18:34 +00:00
<section className="preferences">
<Content>
<SectionHeader>General Settings</SectionHeader>
{ generalSettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
<SectionHeader>Accessibility</SectionHeader>
{ accessibilitySettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
2020-06-23 20:27:43 +00:00
<SectionHeader>Accessible Output</SectionHeader>
<SectionSubeader>Used with screen reader</SectionSubeader>
{ outputSettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
2020-06-23 20:27:43 +00:00
2020-06-23 19:18:34 +00:00
</Content>
</section>
2020-06-23 00:06:40 +00:00
</section>
</Screen>);
};
export default withRouter(MobilePreferences);