gab-social/app/javascript/gabsocial/containers/display.js

119 lines
3.3 KiB
JavaScript
Raw Normal View History

2020-04-30 05:34:50 +01:00
import {
FONT_SIZES,
THEMES,
DEFAULT_THEME,
DEFAULT_FONT_SIZE,
} from '../constants'
2020-05-03 06:22:49 +01:00
const mapStateToProps = (state) => ({
fontSize: state.getIn(['settings', 'displayOptions', 'fontSize']),
radiusSmallDisabled: state.getIn(['settings', 'displayOptions', 'radiusSmallDisabled']),
radiusCircleDisabled: state.getIn(['settings', 'displayOptions', 'radiusCircleDisabled']),
theme: state.getIn(['settings', 'displayOptions', 'theme']),
})
export default
@connect(mapStateToProps)
class Display extends PureComponent {
2020-04-30 05:34:50 +01:00
static propTypes = {
fontSize: PropTypes.string.isRequired,
2020-05-03 06:22:49 +01:00
radiusSmallDisabled: PropTypes.bool.isRequired,
radiusCircleDisabled: PropTypes.bool.isRequired,
theme: PropTypes.string.isRequired,
2020-04-30 05:34:50 +01:00
}
state = {
theme: this.props.theme,
2020-05-03 06:22:49 +01:00
radiusSmallDisabled: this.props.radiusSmallDisabled,
radiusCircleDisabled: this.props.radiusCircleDisabled,
2020-04-30 05:34:50 +01:00
fontSize: this.props.fontSize,
}
static defaultProps = {
2020-05-03 06:22:49 +01:00
theme: 'light',
radiusSmallDisabled: true,
radiusCircleDisabled: true,
2020-04-30 05:34:50 +01:00
fontSize: 'normal',
}
componentDidMount() {
this.updateTheme(this.state.theme)
2020-05-03 06:22:49 +01:00
this.updateRadiusSmallDisabled(this.state.radiusSmallDisabled)
this.updateRadiusCircleDisabled(this.state.radiusCircleDisabled)
2020-04-30 05:34:50 +01:00
this.updateFontSizes(this.state.fontSize)
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.theme !== prevState.theme ||
2020-05-03 06:22:49 +01:00
nextProps.radiusSmallDisabled !== prevState.radiusSmallDisabled ||
nextProps.radiusCircleDisabled !== prevState.radiusCircleDisabled ||
2020-04-30 05:34:50 +01:00
nextProps.fontSize !== prevState.fontSize) {
return {
theme: nextProps.theme,
2020-05-03 06:22:49 +01:00
radiusSmallDisabled: nextProps.radiusSmallDisabled,
radiusCircleDisabled: nextProps.radiusCircleDisabled,
2020-04-30 05:34:50 +01:00
fontSize: nextProps.fontSize,
}
}
return null
}
componentDidUpdate(prevProps, prevState) {
if (prevState.theme !== this.state.theme) {
this.updateTheme(this.state.theme)
}
2020-05-03 06:22:49 +01:00
if (prevState.radiusSmallDisabled !== this.state.radiusSmallDisabled) {
this.updateRadiusSmallDisabled(this.state.radiusSmallDisabled)
}
if (prevState.radiusCircleDisabled !== this.state.radiusCircleDisabled) {
this.updateRadiusCircleDisabled(this.state.radiusCircleDisabled)
2020-04-30 05:34:50 +01:00
}
if (prevState.fontSize !== this.state.fontSize) {
this.updateFontSizes(this.state.fontSize)
}
}
2020-05-03 06:22:49 +01:00
updateRadiusSmallDisabled(disabled) {
if (disabled) {
document.documentElement.setAttribute('no-radius', '');
} else {
document.documentElement.removeAttribute('no-radius')
}
}
updateRadiusCircleDisabled(disabled) {
if (disabled) {
document.documentElement.setAttribute('no-circle', '');
2020-04-30 05:34:50 +01:00
} else {
2020-05-03 06:22:49 +01:00
document.documentElement.removeAttribute('no-circle')
2020-04-30 05:34:50 +01:00
}
}
updateFontSizes(fontSize) {
2020-05-03 06:22:49 +01:00
let correctedFontSize = fontSize.toLowerCase()
2020-04-30 05:34:50 +01:00
if (!FONT_SIZES.hasOwnProperty(correctedFontSize)) {
correctedFontSize = DEFAULT_FONT_SIZE
}
document.documentElement.style.setProperty('font-size', FONT_SIZES[correctedFontSize]);
}
updateTheme(theme) {
let correctedTheme = theme.toLowerCase()
2020-05-03 06:22:49 +01:00
if (THEMES.indexOf(correctedTheme) < 0) {
2020-04-30 05:34:50 +01:00
correctedTheme = DEFAULT_THEME
}
document.documentElement.setAttribute('theme', correctedTheme);
}
render() {
return this.props.children
}
}