matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Change design of toggle button

Browse Source
This commit is contained in:
Sean King
2020-07-19 15:50:16 -06:00
parent 03e33df86b
commit 796bf9c844
3 changed files with 36 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/soapbox/features/notifications/components/setting_toggle.js
View File

@@ -9,8 +9,14 @@ export default class SettingToggle extends React.PureComponent {
prefix: PropTypes.string,
settings: ImmutablePropTypes.map.isRequired,
settingPath: PropTypes.array.isRequired,
label: PropTypes.node.isRequired,
label: PropTypes.node,
onChange: PropTypes.func.isRequired,
icons: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.object,
]),
condition: PropTypes.string,
ariaLabel: PropTypes.string,
}
onChange = ({ target }) => {
@@ -18,13 +24,13 @@ export default class SettingToggle extends React.PureComponent {
}
render() {
const { prefix, settings, settingPath, label } = this.props;
const { prefix, settings, settingPath, label, icons, condition, ariaLabel } = this.props;
const id = ['setting-toggle', prefix, ...settingPath].filter(Boolean).join('-');
return (
<div className='setting-toggle'>
<Toggle id={id} checked={settings.getIn(settingPath)} onChange={this.onChange} onKeyDown={this.onKeyDown} />
<label htmlFor={id} className='setting-toggle__label'>{label}</label>
<div className='setting-toggle' aria-label={ariaLabel}>
<Toggle id={id} checked={condition ? settings.getIn(settingPath) === condition : settings.getIn(settingPath)} onChange={this.onChange} icons={icons} onKeyDown={this.onKeyDown} />
{label && (<label htmlFor={id} className='setting-toggle__label'>{label}</label>)}
</div>
);
}