@material-ui/core
Version:
React components that implement Google's Material Design.
375 lines (293 loc) • 14.8 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/builtin/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/builtin/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.sheetsManager = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/builtin/extends"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/builtin/objectSpread"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/builtin/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/builtin/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/builtin/possibleConstructorReturn"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/builtin/inherits"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/builtin/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _warning = _interopRequireDefault(require("warning"));
var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
var _getDisplayName = _interopRequireDefault(require("recompose/getDisplayName"));
var _wrapDisplayName = _interopRequireDefault(require("recompose/wrapDisplayName"));
var _contextTypes = _interopRequireDefault(require("react-jss/lib/contextTypes"));
var _jss = require("jss");
var ns = _interopRequireWildcard(require("react-jss/lib/ns"));
var _jssPreset = _interopRequireDefault(require("./jssPreset"));
var _createMuiTheme = _interopRequireDefault(require("./createMuiTheme"));
var _themeListener = _interopRequireDefault(require("./themeListener"));
var _createGenerateClassName = _interopRequireDefault(require("./createGenerateClassName"));
var _getStylesCreator = _interopRequireDefault(require("./getStylesCreator"));
var _getThemeProps = _interopRequireDefault(require("./getThemeProps"));
// Default JSS instance.
var jss = (0, _jss.create)((0, _jssPreset.default)()); // Use a singleton or the provided one by the context.
var generateClassName = (0, _createGenerateClassName.default)(); // Global index counter to preserve source order.
// We create the style sheet during at the creation of the component,
// 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.
var indexCounter = -10e10; // Exported for test purposes
var sheetsManager = new Map(); // We use the same empty object to ref count the styles that don't need a theme object.
exports.sheetsManager = sheetsManager;
var noopTheme = {}; // In order to have self-supporting components, we rely on default theme when not provided.
var defaultTheme;
function getDefaultTheme() {
if (defaultTheme) {
return defaultTheme;
}
defaultTheme = (0, _createMuiTheme.default)();
return defaultTheme;
} // 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.
var withStyles = function withStyles(stylesOrCreator) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
return function (Component) {
var _options$withTheme = options.withTheme,
withTheme = _options$withTheme === void 0 ? false : _options$withTheme,
_options$flip = options.flip,
flip = _options$flip === void 0 ? null : _options$flip,
name = options.name,
styleSheetOptions = (0, _objectWithoutProperties2.default)(options, ["withTheme", "flip", "name"]);
var stylesCreator = (0, _getStylesCreator.default)(stylesOrCreator);
var listenToTheme = stylesCreator.themingEnabled || withTheme || typeof name === 'string';
indexCounter += 1;
stylesCreator.options.index = indexCounter;
process.env.NODE_ENV !== "production" ? (0, _warning.default)(indexCounter < 0, ['Material-UI: you might have a memory leak.', 'The indexCounter is not supposed to grow that much.'].join(' ')) : void 0;
var WithStyles =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2.default)(WithStyles, _React$Component);
function WithStyles(props, context) {
var _this;
(0, _classCallCheck2.default)(this, WithStyles);
_this = (0, _possibleConstructorReturn2.default)(this, (WithStyles.__proto__ || Object.getPrototypeOf(WithStyles)).call(this, props, context));
_this.state = {};
_this.disableStylesGeneration = false;
_this.jss = null;
_this.sheetOptions = null;
_this.sheetsManager = sheetsManager;
_this.stylesCreatorSaved = null;
_this.theme = null;
_this.unsubscribeId = null;
_this.jss = _this.context[ns.jss] || jss;
var muiThemeProviderOptions = _this.context.muiThemeProviderOptions;
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 = (0, _objectSpread2.default)({
generateClassName: generateClassName
}, _this.context[ns.sheetOptions]); // We use || as the function call is lazy evaluated.
_this.theme = listenToTheme ? _themeListener.default.initial(context) || getDefaultTheme() : noopTheme;
_this.attach(_this.theme);
_this.cacheClasses = {
// Cache for the finalized classes value.
value: null,
// Cache for the last used classes prop pointer.
lastProp: null,
// Cache for the last used rendered classes pointer.
lastJSS: {}
};
return _this;
}
(0, _createClass2.default)(WithStyles, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
if (!listenToTheme) {
return;
}
this.unsubscribeId = _themeListener.default.subscribe(this.context, function (theme) {
var oldTheme = _this2.theme;
_this2.theme = theme;
_this2.attach(_this2.theme); // Rerender the component so the underlying component gets the theme update.
// By theme update we mean receiving and applying the new class names.
_this2.setState({}, function () {
_this2.detach(oldTheme);
});
});
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
// 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);
this.forceUpdate();
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.detach(this.theme);
if (this.unsubscribeId !== null) {
_themeListener.default.unsubscribe(this.context, this.unsubscribeId);
}
}
}, {
key: "getClasses",
value: function getClasses() {
var _this3 = this;
// Tracks if either the rendered classes or classes prop has changed,
// requiring the generation of a new finalized classes object.
var generate = false;
if (!this.disableStylesGeneration) {
var sheetManager = this.sheetsManager.get(this.stylesCreatorSaved);
var sheetsManagerTheme = sheetManager.get(this.theme);
if (sheetsManagerTheme.sheet.classes !== this.cacheClasses.lastJSS) {
this.cacheClasses.lastJSS = sheetsManagerTheme.sheet.classes;
generate = true;
}
}
if (this.props.classes !== this.cacheClasses.lastProp) {
this.cacheClasses.lastProp = this.props.classes;
generate = true;
}
if (generate) {
if (this.props.classes) {
this.cacheClasses.value = (0, _objectSpread2.default)({}, this.cacheClasses.lastJSS, Object.keys(this.props.classes).reduce(function (accumulator, key) {
process.env.NODE_ENV !== "production" ? (0, _warning.default)(_this3.cacheClasses.lastJSS[key] || _this3.disableStylesGeneration, ["Material-UI: the key `".concat(key, "` ") + "provided to the classes property is not implemented in ".concat((0, _getDisplayName.default)(Component), "."), "You can only override one of the following: ".concat(Object.keys(_this3.cacheClasses.lastJSS).join(','))].join('\n')) : void 0;
process.env.NODE_ENV !== "production" ? (0, _warning.default)(!_this3.props.classes[key] || typeof _this3.props.classes[key] === 'string', ["Material-UI: the key `".concat(key, "` ") + "provided to the classes property is not valid for ".concat((0, _getDisplayName.default)(Component), "."), "You need to provide a non empty string instead of: ".concat(_this3.props.classes[key], ".")].join('\n')) : void 0;
if (_this3.props.classes[key]) {
accumulator[key] = "".concat(_this3.cacheClasses.lastJSS[key], " ").concat(_this3.props.classes[key]);
}
return accumulator;
}, {}));
} else {
this.cacheClasses.value = this.cacheClasses.lastJSS;
}
}
return this.cacheClasses.value;
}
}, {
key: "attach",
value: function attach(theme) {
if (this.disableStylesGeneration) {
return;
}
var stylesCreatorSaved = this.stylesCreatorSaved;
var sheetManager = this.sheetsManager.get(stylesCreatorSaved);
if (!sheetManager) {
sheetManager = new Map();
this.sheetsManager.set(stylesCreatorSaved, sheetManager);
}
var sheetManagerTheme = sheetManager.get(theme);
if (!sheetManagerTheme) {
sheetManagerTheme = {
refs: 0,
sheet: null
};
sheetManager.set(theme, sheetManagerTheme);
}
if (sheetManagerTheme.refs === 0) {
var styles = stylesCreatorSaved.create(theme, name);
var meta = name;
if (process.env.NODE_ENV !== 'production' && !meta) {
meta = (0, _getDisplayName.default)(Component);
}
var sheet = this.jss.createStyleSheet(styles, (0, _objectSpread2.default)({
meta: meta,
classNamePrefix: meta,
flip: typeof flip === 'boolean' ? flip : theme.direction === 'rtl',
link: false
}, this.sheetOptions, stylesCreatorSaved.options, {
name: name
}, styleSheetOptions));
sheetManagerTheme.sheet = sheet;
sheet.attach();
var sheetsRegistry = this.context[ns.sheetsRegistry];
if (sheetsRegistry) {
sheetsRegistry.add(sheet);
}
}
sheetManagerTheme.refs += 1;
}
}, {
key: "detach",
value: function detach(theme) {
if (this.disableStylesGeneration) {
return;
}
var stylesCreatorSaved = this.stylesCreatorSaved;
var sheetManager = this.sheetsManager.get(stylesCreatorSaved);
var sheetManagerTheme = sheetManager.get(theme);
sheetManagerTheme.refs -= 1;
if (sheetManagerTheme.refs === 0) {
sheetManager.delete(theme);
this.jss.removeStyleSheet(sheetManagerTheme.sheet);
var sheetsRegistry = this.context[ns.sheetsRegistry];
if (sheetsRegistry) {
sheetsRegistry.remove(sheetManagerTheme.sheet);
}
}
}
}, {
key: "render",
value: function render() {
var _props = this.props,
classes = _props.classes,
innerRef = _props.innerRef,
other = (0, _objectWithoutProperties2.default)(_props, ["classes", "innerRef"]);
var more = (0, _getThemeProps.default)({
theme: this.theme,
name: name
}); // 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 _react.default.createElement(Component, (0, _extends2.default)({}, more, {
classes: this.getClasses(),
ref: innerRef
}, other));
}
}]);
return WithStyles;
}(_react.default.Component);
WithStyles.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Override or extend the styles applied to the component.
*/
classes: _propTypes.default.object,
/**
* Use that property to pass a ref callback to the decorated component.
*/
innerRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
} : {};
WithStyles.contextTypes = (0, _objectSpread2.default)({
muiThemeProviderOptions: _propTypes.default.object
}, _contextTypes.default, listenToTheme ? _themeListener.default.contextTypes : {});
if (process.env.NODE_ENV !== 'production') {
WithStyles.displayName = (0, _wrapDisplayName.default)(Component, 'WithStyles');
}
(0, _hoistNonReactStatics.default)(WithStyles, Component);
if (process.env.NODE_ENV !== 'production') {
// Exposed for test purposes.
WithStyles.Naked = Component;
WithStyles.options = options;
}
return WithStyles;
};
};
var _default = withStyles;
exports.default = _default;