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

128 lines
3.7 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { me } from '../initial_state'
2020-04-30 05:34:50 +01:00
import {
FONT_SIZES,
THEMES,
DEFAULT_THEME,
DEFAULT_FONT_SIZE,
} from '../constants'
class Display extends React.PureComponent {
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,
}
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)
// If no user logged in and dark mode enabled, set to muted
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && !me) {
this.updateTheme('muted')
}
2020-04-30 05:34:50 +01:00
}
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
}
}
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)