forked from cssinjs/jss
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
(split)[react-jss] Big Refactor (cssinjs#949)
* [WIP] Update to new react context for the jss context (cssinjs#924) * Update to new react context for the jss context * Fixed types * Fix some tests * Remove unnecessary cloning * Fix JssProvider * Update logic of merging context * Fix a few issues and tests * Make getTheme non public * Update warning inside JssProvider * Remove duplicate beforeEach * Update size-snapshot * Fix a few bugs * Created a Managers type * Create sheetOptions prop type definition * Removed meta property from sheet options shape * Fix creating a new generateId for every render * Move media into it's own prop * Added changelog * Rename to JssContextSubscriber * Moved context to jssContext prop instead of spreading it * [react-jss] Remove inject option (cssinjs#934) * Update to new react context for the jss context * Fixed types * Fix some tests * Remove unnecessary cloning * Fix JssProvider * Update logic of merging context * Fix a few issues and tests * Make getTheme non public * Update warning inside JssProvider * Remove duplicate beforeEach * Update size-snapshot * Fix a few bugs * Remove inject option * Fix * Always inject the theme * Only inject theme when injectTheme is true * Upgrade theming package (cssinjs#942) * Add forwardRef support (cssinjs#943) * [react-jss] Merge classes instead of overwriting (cssinjs#946) * Add forwardRef support * Add support for merging the classes * Fix path of test file * Remove jsdoc comment * Implement custom memoize-one * Convert function to arrow function * Fix * Update some of the tests * Update dynamic styles tests * Fix SSR tests * Add theme inject tests * Add merge classes tests * Remove dependency of react-dom * Fix an issue with memoizing and memoize the context * Remove createHoC file and remove injectSheet to withStyles * Update TS types * Update TS types * Fix flow types * Fix react-jss types * Rename injectSheet to withStyles in docs * Fix react-jss types * Update changelog.md * Rename class and * Fix tests * Fix a few typos in docs * Fix changelog * Use javascript for codeblocks instead of js * Upgrade theming * Fix type import * Update size-snapshot * Fix docs * Update size-snapshot * Upgrade theming to v3.0.2 * Use travis_wait for test command * Remove travis_wait command * Update docs
- Loading branch information
Showing
23 changed files
with
1,175 additions
and
1,683 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| // @flow | ||
| import React, {type Context} from 'react' | ||
| import type {Context as JssContextValue} from './types' | ||
|
|
||
| const JssContext: Context<JssContextValue> = React.createContext({ | ||
| sheetOptions: {}, | ||
| disableStylesGeneration: false | ||
| }) | ||
|
|
||
| export default JssContext |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,104 +1,100 @@ | ||
| // @flow | ||
| import {Component, type Node} from 'react' | ||
| import React, {Component, type Node} from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import { | ||
| createGenerateId as createGenerateIdDefault, | ||
| type Jss, | ||
| type GenerateId, | ||
| type SheetsRegistry | ||
| } from 'jss' | ||
| import * as ns from './ns' | ||
| import contextTypes from './contextTypes' | ||
| import propTypes from './propTypes' | ||
| import type {Context} from './types' | ||
|
|
||
| /* eslint-disable react/require-default-props */ | ||
| import defaultJss, {createGenerateId, type Jss, type GenerateId, SheetsRegistry} from 'jss' | ||
| import type {Context, Managers} from './types' | ||
| import JssContext from './JssContext' | ||
| import memoize from './memoize-one' | ||
|
|
||
| /* eslint-disable react/require-default-props, react/no-unused-prop-types */ | ||
|
|
||
| type Props = { | ||
| jss?: Jss, | ||
| registry?: SheetsRegistry, | ||
| generateId?: GenerateId, | ||
| classNamePrefix?: string, | ||
| disableStylesGeneration?: boolean, | ||
| media?: string, | ||
| children: Node | ||
| } | ||
|
|
||
| export default class JssProvider extends Component<Props> { | ||
| static propTypes = { | ||
| ...propTypes, | ||
| registry: PropTypes.instanceOf(SheetsRegistry), | ||
| jss: PropTypes.instanceOf(defaultJss.constructor), | ||
| generateId: PropTypes.func, | ||
| classNamePrefix: PropTypes.string, | ||
| disableStylesGeneration: PropTypes.bool, | ||
| children: PropTypes.node.isRequired | ||
| children: PropTypes.node.isRequired, | ||
| media: PropTypes.string | ||
| } | ||
|
|
||
| static childContextTypes = contextTypes | ||
|
|
||
| static contextTypes = contextTypes | ||
|
|
||
| // JssProvider can be nested. We allow to overwrite any context prop at any level. | ||
| // 1. Check if there is a value passed over props. | ||
| // 2. If value was passed, we set it on the child context. | ||
| // 3. If value was not passed, we proxy parent context (default context behaviour). | ||
| getChildContext(): Context { | ||
| const { | ||
| registry, | ||
| classNamePrefix, | ||
| jss: localJss, | ||
| generateId, | ||
| disableStylesGeneration | ||
| } = this.props | ||
| // eslint-disable-next-line react/react/destructuring-assignment | ||
| const sheetOptions = this.context[ns.sheetOptions] || {} | ||
| const context: Context = {[ns.sheetOptions]: sheetOptions} | ||
|
|
||
| if (registry) { | ||
| context[ns.sheetsRegistry] = registry | ||
| // This way we identify a new request on the server, because user will create | ||
| // a new Registry instance for each. | ||
| if (registry !== this.registry) { | ||
| // We reset managers because we have to regenerate all sheets for the new request. | ||
| this.managers = {} | ||
| this.registry = registry | ||
| managers: Managers = {} | ||
|
|
||
| createContext = memoize( | ||
| (outerContext: Context, props: Props): Context => { | ||
| const {registry, classNamePrefix, jss, generateId, disableStylesGeneration, media} = props | ||
| // Clone the outer context | ||
| const context = {...outerContext} | ||
|
|
||
| if (registry) { | ||
| context.registry = registry | ||
|
|
||
| // This way we identify a new request on the server, because user will create | ||
| // a new Registry instance for each. | ||
| if (registry !== this.registry) { | ||
| // We reset managers because we have to regenerate all sheets for the new request. | ||
| this.managers = {} | ||
| this.registry = registry | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Make sure we don't loose managers when JssProvider is used inside of a stateful | ||
| // component which decides to rerender. | ||
| context[ns.managers] = this.managers | ||
|
|
||
| if (generateId) { | ||
| sheetOptions.generateId = generateId | ||
| } else if (!sheetOptions.generateId) { | ||
| if (!this.generateId) { | ||
| let createGenerateId = createGenerateIdDefault | ||
| if (localJss && localJss.options.createGenerateId) { | ||
| createGenerateId = localJss.options.createGenerateId | ||
| context.managers = this.managers | ||
|
|
||
| if (generateId) { | ||
| context.sheetOptions.generateId = generateId | ||
| } else if (!context.sheetOptions.generateId) { | ||
| if (!this.generateId) { | ||
| this.generateId = createGenerateId() | ||
| } | ||
| // Make sure we don't loose the generator when JssProvider is used inside of a stateful | ||
| // component which decides to rerender. | ||
| this.generateId = createGenerateId() | ||
| context.sheetOptions.generateId = this.generateId | ||
| } | ||
|
|
||
| sheetOptions.generateId = this.generateId | ||
| } | ||
| // Merge the classname prefix | ||
| if (classNamePrefix) { | ||
| context.sheetOptions.classNamePrefix = | ||
| (context.sheetOptions.classNamePrefix || '') + classNamePrefix | ||
| } | ||
|
|
||
| if (classNamePrefix) sheetOptions.classNamePrefix = classNamePrefix | ||
| if (localJss) context[ns.jss] = localJss | ||
| if (disableStylesGeneration !== undefined) { | ||
| sheetOptions.disableStylesGeneration = disableStylesGeneration | ||
| if (media !== undefined) { | ||
| context.sheetOptions.media = media | ||
| } | ||
|
|
||
| if (jss) { | ||
| context.jss = jss | ||
| } | ||
|
|
||
| if (disableStylesGeneration !== undefined) { | ||
| context.disableStylesGeneration = disableStylesGeneration | ||
| } | ||
|
|
||
| return context | ||
| } | ||
| ) | ||
|
|
||
| return context | ||
| } | ||
| generateId: ?GenerateId | ||
|
|
||
| registry: SheetsRegistry | ||
| registry: ?SheetsRegistry | ||
|
|
||
| managers: {} | ||
| renderProvider = (outerContext: Context) => { | ||
| const {children} = this.props | ||
| // $FlowFixMe | ||
| const context: Context = this.createContext(outerContext, this.props) | ||
|
|
||
| generateId: GenerateId | ||
| return <JssContext.Provider value={context}>{children}</JssContext.Provider> | ||
| } | ||
|
|
||
| render() { | ||
| return this.props.children | ||
| return <JssContext.Consumer>{this.renderProvider}</JssContext.Consumer> | ||
| } | ||
| } |
Oops, something went wrong.