Skip to content
Permalink
5 contributors

Users who have contributed to this file

@giuseppeg @nkzawa @shYkiSto @Rowno @ericf
57 lines (48 sloc) 1.43 KB
import { Component } from 'react'
import StyleSheetRegistry from './stylesheet-registry'
const styleSheetRegistry = new StyleSheetRegistry()
export default class JSXStyle extends Component {
constructor(props) {
super(props)
this.prevProps = {}
}
static dynamic(info) {
return info
.map(tagInfo => {
const baseId = tagInfo[0]
const props = tagInfo[1]
return styleSheetRegistry.computeId(baseId, props)
})
.join(' ')
}
// probably faster than PureComponent (shallowEqual)
shouldComponentUpdate(otherProps) {
return (
this.props.id !== otherProps.id ||
// We do this check because `dynamic` is an array of strings or undefined.
// These are the computed values for dynamic styles.
String(this.props.dynamic) !== String(otherProps.dynamic)
)
}
componentWillUnmount() {
styleSheetRegistry.remove(this.props)
}
render() {
// This is a workaround to make the side effect async safe in the "render" phase.
// See https://github.com/zeit/styled-jsx/pull/484
if (this.shouldComponentUpdate(this.prevProps)) {
// Updates
if (this.prevProps.id) {
styleSheetRegistry.remove(this.prevProps)
}
styleSheetRegistry.add(this.props)
this.prevProps = this.props
}
return null
}
}
export function flush() {
const cssRules = styleSheetRegistry.cssRules()
styleSheetRegistry.flush()
return cssRules
}
You can’t perform that action at this time.