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

122 lines
3.4 KiB
JavaScript

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import {
FONT_SIZES,
THEMES,
DEFAULT_THEME,
DEFAULT_FONT_SIZE,
} from '../constants'
class Display extends React.PureComponent {
state = {
theme: this.props.theme,
radiusSmallDisabled: this.props.radiusSmallDisabled,
radiusCircleDisabled: this.props.radiusCircleDisabled,
fontSize: this.props.fontSize,
}
componentDidMount() {
this.updateTheme(this.state.theme)
this.updateRadiusSmallDisabled(this.state.radiusSmallDisabled)
this.updateRadiusCircleDisabled(this.state.radiusCircleDisabled)
this.updateFontSizes(this.state.fontSize)
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.theme !== prevState.theme ||
nextProps.radiusSmallDisabled !== prevState.radiusSmallDisabled ||
nextProps.radiusCircleDisabled !== prevState.radiusCircleDisabled ||
nextProps.fontSize !== prevState.fontSize) {
return {
theme: nextProps.theme,
radiusSmallDisabled: nextProps.radiusSmallDisabled,
radiusCircleDisabled: nextProps.radiusCircleDisabled,
fontSize: nextProps.fontSize,
}
}
return null
}
componentDidUpdate(prevProps, prevState) {
if (prevState.theme !== this.state.theme) {
this.updateTheme(this.state.theme)
}
if (prevState.radiusSmallDisabled !== this.state.radiusSmallDisabled) {
this.updateRadiusSmallDisabled(this.state.radiusSmallDisabled)
}
if (prevState.radiusCircleDisabled !== this.state.radiusCircleDisabled) {
this.updateRadiusCircleDisabled(this.state.radiusCircleDisabled)
}
if (prevState.fontSize !== this.state.fontSize) {
this.updateFontSizes(this.state.fontSize)
}
}
updateRadiusSmallDisabled(disabled) {
if (disabled) {
document.documentElement.setAttribute('no-radius', '');
} else {
document.documentElement.removeAttribute('no-radius')
}
}
updateRadiusCircleDisabled(disabled) {
if (disabled) {
document.documentElement.setAttribute('no-circle', '');
} else {
document.documentElement.removeAttribute('no-circle')
}
}
updateFontSizes(fontSize) {
let correctedFontSize = fontSize.toLowerCase()
if (!FONT_SIZES.hasOwnProperty(correctedFontSize)) {
correctedFontSize = DEFAULT_FONT_SIZE
}
document.documentElement.style.setProperty('font-size', FONT_SIZES[correctedFontSize]);
}
updateTheme(theme) {
let correctedTheme = theme.toLowerCase()
if (THEMES.indexOf(correctedTheme) < 0) {
correctedTheme = DEFAULT_THEME
}
document.documentElement.setAttribute('theme', correctedTheme);
}
render() {
return this.props.children
}
}
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']),
})
Display.propTypes = {
fontSize: PropTypes.string.isRequired,
radiusSmallDisabled: PropTypes.bool.isRequired,
radiusCircleDisabled: PropTypes.bool.isRequired,
theme: PropTypes.string.isRequired,
}
Display.defaultProps = {
theme: 'white',
radiusSmallDisabled: true,
radiusCircleDisabled: true,
fontSize: 'normal',
}
export default connect(mapStateToProps)(Display)