348 lines
10 KiB
Plaintext
348 lines
10 KiB
Plaintext
// @flow weak
|
|
|
|
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import warning from 'warning';
|
|
import type { HigherOrderComponent } from 'react-flow-types';
|
|
import hoistNonReactStatics from 'hoist-non-react-statics';
|
|
import wrapDisplayName from 'recompose/wrapDisplayName';
|
|
import getDisplayName from 'recompose/getDisplayName';
|
|
import contextTypes from 'react-jss/lib/contextTypes';
|
|
import { create } from 'jss';
|
|
import preset from 'jss-preset-default';
|
|
import * as ns from 'react-jss/lib/ns';
|
|
import createMuiTheme from './createMuiTheme';
|
|
import themeListener from './themeListener';
|
|
import createGenerateClassName from './createGenerateClassName';
|
|
import getStylesCreator from './getStylesCreator';
|
|
|
|
// New JSS instance.
|
|
const jss = create(preset());
|
|
|
|
// Use a singleton or the provided one by the context.
|
|
const generateClassName = createGenerateClassName();
|
|
|
|
// Global index counter to preserve source order.
|
|
// As we create the style sheet during componentWillMount lifecycle,
|
|
// children are handled after the parents, so the order of style elements would
|
|
// be parent->child. It is a problem though when a parent passes a className
|
|
// which needs to override any childs styles. StyleSheet of the child has a higher
|
|
// specificity, because of the source order.
|
|
// So our solution is to render sheets them in the reverse order child->sheet, so
|
|
// that parent has a higher specificity.
|
|
let indexCounter = Number.MIN_SAFE_INTEGER;
|
|
|
|
export const sheetsManager: Map<*, *> = new Map();
|
|
|
|
// We use the same empty object to ref count the styles that don't need a theme object.
|
|
const noopTheme = {};
|
|
|
|
// In order to have self-supporting components, we rely on default theme when not provided.
|
|
let defaultTheme;
|
|
|
|
function getDefaultTheme() {
|
|
if (defaultTheme) {
|
|
return defaultTheme;
|
|
}
|
|
|
|
defaultTheme = createMuiTheme();
|
|
return defaultTheme;
|
|
}
|
|
|
|
type Options = {
|
|
flip?: boolean,
|
|
withTheme?: boolean,
|
|
name?: string,
|
|
|
|
// Problem: https://github.com/brigand/babel-plugin-flow-react-proptypes/issues/127
|
|
// import type { StyleSheetFactoryOptions } from 'jss/lib/types';
|
|
// ...StyleSheetFactoryOptions,
|
|
// and the fact that we currently cannot import/spread types with
|
|
// https://github.com/brigand/babel-plugin-flow-react-proptypes/issues/106
|
|
media?: string,
|
|
meta?: string,
|
|
index?: number,
|
|
link?: boolean,
|
|
element?: HTMLStyleElement,
|
|
generateClassName?: Function, // generateClassName - use generic to stop the bleeding.
|
|
};
|
|
|
|
export type RequiredProps = {
|
|
/**
|
|
* Useful to extend the style applied to components.
|
|
*/
|
|
classes?: Object,
|
|
/**
|
|
* Use that property to pass a ref callback to the decorated component.
|
|
*/
|
|
innerRef?: Function,
|
|
};
|
|
|
|
// Note, theme is conditionally injected, but flow is static analysis so we need to include it.
|
|
export type InjectedProps = { classes: Object, theme: Object };
|
|
|
|
// Link a style sheet with a component.
|
|
// It does not modify the component passed to it;
|
|
// instead, it returns a new component, with a `classes` property.
|
|
const withStyles = (
|
|
stylesOrCreator: Object,
|
|
options?: Options = {},
|
|
): HigherOrderComponent<RequiredProps, InjectedProps> => (Component: any): any => {
|
|
const { withTheme = false, flip, name, ...styleSheetOptions } = options;
|
|
const stylesCreator = getStylesCreator(stylesOrCreator);
|
|
const listenToTheme = stylesCreator.themingEnabled || withTheme || typeof name === 'string';
|
|
|
|
if (stylesCreator.options.index === undefined) {
|
|
indexCounter += 1;
|
|
stylesCreator.options.index = indexCounter;
|
|
}
|
|
|
|
warning(
|
|
indexCounter < 0,
|
|
[
|
|
'Material-UI: you might have a memory leak.',
|
|
'The indexCounter is not supposed to grow that much.',
|
|
].join(' '),
|
|
);
|
|
|
|
class Style extends React.Component<RequiredProps> {
|
|
static contextTypes = {
|
|
muiThemeProviderOptions: PropTypes.object,
|
|
...contextTypes,
|
|
...(listenToTheme ? themeListener.contextTypes : {}),
|
|
};
|
|
|
|
// Exposed for tests purposes
|
|
static options: ?Options;
|
|
|
|
// Exposed for test purposes.
|
|
static Naked = Component;
|
|
|
|
constructor(props, context: Object) {
|
|
super(props, context);
|
|
|
|
const { muiThemeProviderOptions } = this.context;
|
|
|
|
this.jss = this.context[ns.jss] || jss;
|
|
|
|
if (muiThemeProviderOptions) {
|
|
if (muiThemeProviderOptions.sheetsManager) {
|
|
this.sheetsManager = muiThemeProviderOptions.sheetsManager;
|
|
}
|
|
|
|
this.disableStylesGeneration = muiThemeProviderOptions.disableStylesGeneration;
|
|
}
|
|
|
|
// Attach the stylesCreator to the instance of the component as in the context
|
|
// of react-hot-loader the hooks can be executed in a different closure context:
|
|
// https://github.com/gaearon/react-hot-loader/blob/master/src/patch.dev.js#L107
|
|
this.stylesCreatorSaved = stylesCreator;
|
|
this.sheetOptions = {
|
|
generateClassName,
|
|
...this.context[ns.sheetOptions],
|
|
};
|
|
// We use || as it's lazy evaluated.
|
|
this.theme = listenToTheme ? themeListener.initial(context) || getDefaultTheme() : noopTheme;
|
|
}
|
|
|
|
state = {};
|
|
|
|
componentWillMount() {
|
|
this.attach(this.theme);
|
|
}
|
|
|
|
componentDidMount() {
|
|
if (!listenToTheme) {
|
|
return;
|
|
}
|
|
|
|
this.unsubscribeId = themeListener.subscribe(this.context, theme => {
|
|
const oldTheme = this.theme;
|
|
this.theme = theme;
|
|
this.attach(this.theme);
|
|
|
|
// Rerender the component so the underlying component gets the theme update.
|
|
// By theme update we mean receiving and applying the new class names.
|
|
this.setState({}, () => {
|
|
this.detach(oldTheme);
|
|
});
|
|
});
|
|
}
|
|
|
|
componentWillReceiveProps() {
|
|
// react-hot-loader specific logic
|
|
if (this.stylesCreatorSaved === stylesCreator || process.env.NODE_ENV === 'production') {
|
|
return;
|
|
}
|
|
|
|
this.detach(this.theme);
|
|
this.stylesCreatorSaved = stylesCreator;
|
|
this.attach(this.theme);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.detach(this.theme);
|
|
|
|
if (this.unsubscribeId !== null) {
|
|
themeListener.unsubscribe(this.context, this.unsubscribeId);
|
|
}
|
|
}
|
|
|
|
attach(theme: Object) {
|
|
if (this.disableStylesGeneration) {
|
|
return;
|
|
}
|
|
|
|
const stylesCreatorSaved = this.stylesCreatorSaved;
|
|
let sheetManager = this.sheetsManager.get(stylesCreatorSaved);
|
|
|
|
if (!sheetManager) {
|
|
sheetManager = new Map();
|
|
this.sheetsManager.set(stylesCreatorSaved, sheetManager);
|
|
}
|
|
|
|
let sheetManagerTheme = sheetManager.get(theme);
|
|
|
|
if (!sheetManagerTheme) {
|
|
sheetManagerTheme = {
|
|
refs: 0,
|
|
sheet: null,
|
|
};
|
|
sheetManager.set(theme, sheetManagerTheme);
|
|
}
|
|
|
|
if (sheetManagerTheme.refs === 0) {
|
|
const styles = stylesCreatorSaved.create(theme, name);
|
|
let meta;
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
meta = name || getDisplayName(Component);
|
|
}
|
|
|
|
const sheet = this.jss.createStyleSheet(styles, {
|
|
meta,
|
|
flip: typeof flip === 'boolean' ? flip : theme.direction === 'rtl',
|
|
link: false,
|
|
...this.sheetOptions,
|
|
...stylesCreatorSaved.options,
|
|
name,
|
|
...styleSheetOptions,
|
|
});
|
|
|
|
sheetManagerTheme.sheet = sheet;
|
|
sheet.attach();
|
|
|
|
const sheetsRegistry = this.context[ns.sheetsRegistry];
|
|
if (sheetsRegistry) {
|
|
sheetsRegistry.add(sheet);
|
|
}
|
|
}
|
|
|
|
sheetManagerTheme.refs += 1;
|
|
}
|
|
|
|
detach(theme: Object) {
|
|
if (this.disableStylesGeneration) {
|
|
return;
|
|
}
|
|
|
|
const stylesCreatorSaved = this.stylesCreatorSaved;
|
|
const sheetManager = this.sheetsManager.get(stylesCreatorSaved);
|
|
const sheetManagerTheme = sheetManager.get(theme);
|
|
|
|
sheetManagerTheme.refs -= 1;
|
|
|
|
if (sheetManagerTheme.refs === 0) {
|
|
sheetManager.delete(theme);
|
|
this.jss.removeStyleSheet(sheetManagerTheme.sheet);
|
|
const sheetsRegistry = this.context[ns.sheetsRegistry];
|
|
if (sheetsRegistry) {
|
|
sheetsRegistry.remove(sheetManagerTheme.sheet);
|
|
}
|
|
}
|
|
}
|
|
|
|
unsubscribeId = null;
|
|
jss = null;
|
|
sheetsManager = sheetsManager;
|
|
disableStylesGeneration = false;
|
|
stylesCreatorSaved = null;
|
|
theme = null;
|
|
sheetOptions = null;
|
|
theme = null;
|
|
|
|
render() {
|
|
const { classes: classesProp, innerRef, ...other } = this.props;
|
|
|
|
let classes;
|
|
let renderedClasses = {};
|
|
|
|
if (!this.disableStylesGeneration) {
|
|
const sheetManager = this.sheetsManager.get(this.stylesCreatorSaved);
|
|
const sheetsManagerTheme = sheetManager.get(this.theme);
|
|
renderedClasses = sheetsManagerTheme.sheet.classes;
|
|
}
|
|
|
|
if (classesProp) {
|
|
classes = {
|
|
...renderedClasses,
|
|
...Object.keys(classesProp).reduce((accumulator, key) => {
|
|
warning(
|
|
renderedClasses[key] || this.disableStylesGeneration,
|
|
[
|
|
`Material-UI: the key \`${key}\` ` +
|
|
`provided to the classes property is not implemented in ${getDisplayName(
|
|
Component,
|
|
)}.`,
|
|
`You can only override one of the following: ${Object.keys(renderedClasses).join(
|
|
',',
|
|
)}`,
|
|
].join('\n'),
|
|
);
|
|
|
|
warning(
|
|
!classesProp[key] || typeof classesProp[key] === 'string',
|
|
[
|
|
`Material-UI: the key \`${key}\` ` +
|
|
`provided to the classes property is not valid for ${getDisplayName(Component)}.`,
|
|
`You need to provide a non empty string instead of: ${classesProp[key]}.`,
|
|
].join('\n'),
|
|
);
|
|
|
|
if (classesProp[key]) {
|
|
accumulator[key] = `${renderedClasses[key]} ${classesProp[key]}`;
|
|
}
|
|
|
|
return accumulator;
|
|
}, {}),
|
|
};
|
|
} else {
|
|
classes = renderedClasses;
|
|
}
|
|
|
|
const more = {};
|
|
|
|
// Provide the theme to the wrapped component.
|
|
// So we don't have to use the `withTheme()` Higher-order Component.
|
|
if (withTheme) {
|
|
more.theme = this.theme;
|
|
}
|
|
|
|
return <Component classes={classes} {...more} {...other} ref={innerRef} />;
|
|
}
|
|
}
|
|
|
|
hoistNonReactStatics(Style, Component);
|
|
|
|
// Higher specificity
|
|
Style.options = options;
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
Style.displayName = wrapDisplayName(Component, 'withStyles');
|
|
}
|
|
|
|
return Style;
|
|
};
|
|
|
|
export default withStyles;
|