treehouse
/
emoji-mart-lazyload
19
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Don’t use `getDerivedStateFromProps` 

This is pretty much considered an anti-pattern (https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html), especially for a PureComponent.
release
Etienne Lemay 2020-03-16 14:33:16 -04:00
parent b548c38624
commit 2dacd30dc8
No known key found for this signature in database
GPG Key ID: EE7CF89146BB28E9
1 changed files with 36 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/components/picker/nimble-picker.js
View File

@ -64,10 +64,7 @@ export default class NimblePicker extends React.PureComponent {
this.data = props.data this.data = props.data
this.i18n = deepMerge(I18N, props.i18n) this.i18n = deepMerge(I18N, props.i18n)
this.icons = deepMerge(icons, props.icons) this.icons = deepMerge(icons, props.icons)
this.state = { this.state = { firstRender: true }
skin: props.skin || store.get('skin') || props.defaultSkin,
firstRender: true,
}
this.categories = [] this.categories = []
let allCategories = [].concat(this.data.categories) let allCategories = [].concat(this.data.categories)
@ -197,23 +194,6 @@ export default class NimblePicker extends React.PureComponent {
this.handleSkinChange = this.handleSkinChange.bind(this) this.handleSkinChange = this.handleSkinChange.bind(this)
this.handleKeyDown = this.handleKeyDown.bind(this) this.handleKeyDown = this.handleKeyDown.bind(this)
this.handleDarkMatchMediaChange = this.handleDarkMatchMediaChange.bind(this) this.handleDarkMatchMediaChange = this.handleDarkMatchMediaChange.bind(this)
this.state.theme = this.getPreferredTheme()
}
static getDerivedStateFromProps(props, state) {
if (props.skin) {
return {
...state,
skin: props.skin,
}
} else if (props.defaultSkin && !store.get('skin')) {
return {
...state,
skin: props.defaultSkin,
}
}
return state
} }
componentDidMount() { componentDidMount() {
@ -255,6 +235,7 @@ export default class NimblePicker extends React.PureComponent {
getPreferredTheme() { getPreferredTheme() {
if (this.props.theme != 'auto') return this.props.theme if (this.props.theme != 'auto') return this.props.theme
if (this.state.theme) return this.state.theme
if (typeof matchMedia !== 'function') return PickerDefaultProps.theme if (typeof matchMedia !== 'function') return PickerDefaultProps.theme
if (!this.darkMatchMedia) { if (!this.darkMatchMedia) {
@ -267,7 +248,7 @@ export default class NimblePicker extends React.PureComponent {
} }
handleDarkMatchMediaChange() { handleDarkMatchMediaChange() {
this.setState({ theme: this.getPreferredTheme() }) this.setState({ theme: this.darkMatchMedia.matches ? 'dark' : 'light' })
} }
handleEmojiOver(emoji) { handleEmojiOver(emoji) {
@ -529,33 +510,39 @@ export default class NimblePicker extends React.PureComponent {
render() { render() {
var { var {
perLine, perLine,
emojiSize, emojiSize,
set, set,
sheetSize, sheetSize,
sheetColumns, sheetColumns,
sheetRows, sheetRows,
style, style,
title, title,
emoji, emoji,
color, color,
native, native,
backgroundImageFn, backgroundImageFn,
emojisToShowFilter, emojisToShowFilter,
showPreview, showPreview,
showSkinTones, showSkinTones,
emojiTooltip, emojiTooltip,
useButton, useButton,
include, include,
exclude, exclude,
recent, recent,
autoFocus, autoFocus,
skinEmoji, skinEmoji,
notFound, notFound,
notFoundEmoji, notFoundEmoji,
} = this.props, } = this.props
{ skin, theme } = this.state,
width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar() var width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar()
var theme = this.getPreferredTheme()
var skin =
this.props.skin ||
this.state.skin ||
store.get('skin') ||
this.props.defaultSkin
return ( return (
<section <section