bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Chats: refactor AudioToggle for performance

Browse source
This commit is contained in:
Alex Gleason 2021-07-01 18:50:18 -05:00
parent 9cbd7b88c7
commit 1b92ce0d4a
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 19 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
app/soapbox/features/chats/components/audio_toggle.js
View file

@ -2,19 +2,18 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { injectIntl, defineMessages } from 'react-intl'; import { injectIntl, defineMessages } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import { changeSetting, getSettings } from 'soapbox/actions/settings'; import { changeSetting, getSettings } from 'soapbox/actions/settings';
import SettingToggle from 'soapbox/features/notifications/components/setting_toggle'; import Toggle from 'react-toggle';
const messages = defineMessages({ const messages = defineMessages({
switchToOn: { id: 'chats.audio_toggle_on', defaultMessage: 'Audio notification on' }, switchOn: { id: 'chats.audio_toggle_on', defaultMessage: 'Audio notification on' },
switchToOff: { id: 'chats.audio_toggle_off', defaultMessage: 'Audio notification off' }, switchOff: { id: 'chats.audio_toggle_off', defaultMessage: 'Audio notification off' },
}); });
const mapStateToProps = state => { const mapStateToProps = state => {
return { return {
settings: getSettings(state), checked: getSettings(state).getIn(['chats', 'sound'], false),
}; };
}; };
@ -30,30 +29,32 @@ class AudioToggle extends React.PureComponent {
static propTypes = { static propTypes = {
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
settings: ImmutablePropTypes.map.isRequired, checked: PropTypes.bool.isRequired,
toggleAudio: PropTypes.func, toggleAudio: PropTypes.func,
showLabel: PropTypes.bool, showLabel: PropTypes.bool,
}; };
handleToggleAudio = () => { handleToggleAudio = () => {
this.props.toggleAudio(this.props.settings.getIn(['chats', 'sound']) === true ? false : true); this.props.toggleAudio(!this.props.checked);
} }
render() { render() {
const { intl, settings, showLabel } = this.props; const { intl, checked, showLabel } = this.props;
let toggle = ( const id ='chats-audio-toggle';
<SettingToggle settings={settings} settingPath={['chats', 'sound']} onChange={this.handleToggleAudio} icons={{ checked: <Icon id='volume-up' />, unchecked: <Icon id='volume-off' /> }} ariaLabel={settings.get('chats', 'sound') === true ? intl.formatMessage(messages.switchToOff) : intl.formatMessage(messages.switchToOn)} /> const label = intl.formatMessage(checked ? messages.switchOff : messages.switchOn);
);
if (showLabel) {
toggle = (
<SettingToggle settings={settings} settingPath={['chats', 'sound']} onChange={this.handleToggleAudio} icons={{ checked: <Icon id='volume-up' />, unchecked: <Icon id='volume-off' /> }} label={settings.get('chats', 'sound') === true ? intl.formatMessage(messages.switchToOff) : intl.formatMessage(messages.switchToOn)} />
);
}
return ( return (
<div className='audio-toggle react-toggle--mini'> <div className='audio-toggle react-toggle--mini'>
{toggle} <div className='setting-toggle' aria-label={label}>
<Toggle
id={id}
checked={checked}
onChange={this.handleToggleAudio}
icons={{ checked: <Icon id='volume-up' />, unchecked: <Icon id='volume-off' /> }}
onKeyDown={this.onKeyDown}
/>
{showLabel && (<label htmlFor={id} className='setting-toggle__label'>{label}</label>)}
</div>
</div> </div>
); );
} }