Refactor ThemeToggle, SettingToggle for performance

actually-fix-tabs-bar
Alex Gleason 2021-07-01 16:43:28 -05:00
rodzic 968c7332f0
commit 74e6d8ce81
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
3 zmienionych plików z 32 dodań i 24 usunięć

Wyświetl plik

@ -1,9 +1,10 @@
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Toggle from 'react-toggle';
export default class SettingToggle extends React.PureComponent {
export default class SettingToggle extends ImmutablePureComponent {
static propTypes = {
prefix: PropTypes.string,
@ -15,7 +16,6 @@ export default class SettingToggle extends React.PureComponent {
PropTypes.bool,
PropTypes.object,
]),
condition: PropTypes.string,
ariaLabel: PropTypes.string,
}
@ -24,12 +24,18 @@ export default class SettingToggle extends React.PureComponent {
}
render() {
const { prefix, settings, settingPath, label, icons, condition, ariaLabel } = this.props;
const { prefix, settings, settingPath, label, icons, ariaLabel } = this.props;
const id = ['setting-toggle', prefix, ...settingPath].filter(Boolean).join('-');
return (
<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} />
<Toggle
id={id}
checked={settings.getIn(settingPath)}
onChange={this.onChange}
icons={icons}
onKeyDown={this.onKeyDown}
/>
{label && (<label htmlFor={id} className='setting-toggle__label'>{label}</label>)}
</div>
);

Wyświetl plik

@ -1,44 +1,45 @@
import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl, defineMessages } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Icon from '../../../components/icon';
import SettingToggle from '../../notifications/components/setting_toggle';
import Toggle from 'react-toggle';
const messages = defineMessages({
switchToLight: { id: 'tabs_bar.theme_toggle_light', defaultMessage: 'Switch to light theme' },
switchToDark: { id: 'tabs_bar.theme_toggle_dark', defaultMessage: 'Switch to dark theme' },
});
export default @injectIntl
class ThemeToggle extends React.PureComponent {
export default class ThemeToggle extends ImmutablePureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
settings: ImmutablePropTypes.map.isRequired,
themeMode: PropTypes.string.isRequired,
onToggle: PropTypes.func.isRequired,
showLabel: PropTypes.bool,
};
handleToggleTheme = () => {
this.props.onToggle(this.props.settings.get('themeMode') === 'light' ? 'dark' : 'light');
this.props.onToggle(this.props.themeMode === 'light' ? 'dark' : 'light');
}
render() {
const { intl, settings, showLabel } = this.props;
let toggle = (
<SettingToggle settings={settings} settingPath={['themeMode']} condition={'light'} onChange={this.handleToggleTheme} icons={{ checked: <Icon id='sun' />, unchecked: <Icon id='moon' /> }} ariaLabel={settings.get('themeMode') === 'light' ? intl.formatMessage(messages.switchToDark) : intl.formatMessage(messages.switchToLight)} />
);
if (showLabel) {
toggle = (
<SettingToggle settings={settings} settingPath={['themeMode']} condition={'light'} onChange={this.handleToggleTheme} icons={{ checked: <Icon id='sun' />, unchecked: <Icon id='moon' /> }} label={settings.get('themeMode') === 'light' ? intl.formatMessage(messages.switchToDark) : intl.formatMessage(messages.switchToLight)} />
);
}
const { intl, themeMode, showLabel } = this.props;
const id ='theme-toggle';
const label = intl.formatMessage(themeMode === 'light' ? messages.switchToDark : messages.switchToLight);
return (
<div className='theme-toggle'>
{toggle}
<div className='setting-toggle' aria-label={label}>
<Toggle
id={id}
checked={themeMode === 'light'}
onChange={this.handleToggleTheme}
icons={{ checked: <Icon id='sun' />, unchecked: <Icon id='moon' /> }}
onKeyDown={this.onKeyDown}
/>
{showLabel && (<label htmlFor={id} className='setting-toggle__label'>{label}</label>)}
</div>
</div>
);
}

Wyświetl plik

@ -1,10 +1,11 @@
import { connect } from 'react-redux';
import { changeSetting, getSettings } from 'soapbox/actions/settings';
import { injectIntl } from 'react-intl';
import ThemeToggle from './theme_toggle';
const mapStateToProps = state => {
return {
settings: getSettings(state),
themeMode: getSettings(state).get('themeMode'),
};
};
@ -14,4 +15,4 @@ const mapDispatchToProps = (dispatch) => ({
},
});
export default connect(mapStateToProps, mapDispatchToProps)(ThemeToggle);
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ThemeToggle));