424 lines
16 KiB
JavaScript
424 lines
16 KiB
JavaScript
"use strict";
|
|
|
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = exports.sheetsManager = void 0;
|
|
|
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
|
|
var _keys = _interopRequireDefault(require("@babel/runtime/core-js/object/keys"));
|
|
|
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
|
|
|
|
var _getPrototypeOf = _interopRequireDefault(require("@babel/runtime/core-js/object/get-prototype-of"));
|
|
|
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
|
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
|
|
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
|
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
|
|
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
|
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
|
|
var _map = _interopRequireDefault(require("@babel/runtime/core-js/map"));
|
|
|
|
var _minSafeInteger = _interopRequireDefault(require("@babel/runtime/core-js/number/min-safe-integer"));
|
|
|
|
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 = _minSafeInteger.default;
|
|
var sheetsManager = new _map.default(); // 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__ || (0, _getPrototypeOf.default)(WithStyles)).call(this, props, context));
|
|
Object.defineProperty((0, _assertThisInitialized2.default)(_this), "state", {
|
|
configurable: true,
|
|
enumerable: true,
|
|
writable: true,
|
|
value: {}
|
|
});
|
|
Object.defineProperty((0, _assertThisInitialized2.default)(_this), "disableStylesGeneration", {
|
|
configurable: true,
|
|
enumerable: true,
|
|
writable: true,
|
|
value: false
|
|
});
|
|
Object.defineProperty((0, _assertThisInitialized2.default)(_this), "jss", {
|
|
configurable: true,
|
|
enumerable: true,
|
|
writable: true,
|
|
value: null
|
|
});
|
|
Object.defineProperty((0, _assertThisInitialized2.default)(_this), "sheetOptions", {
|
|
configurable: true,
|
|
enumerable: true,
|
|
writable: true,
|
|
value: null
|
|
});
|
|
Object.defineProperty((0, _assertThisInitialized2.default)(_this), "sheetsManager", {
|
|
configurable: true,
|
|
enumerable: true,
|
|
writable: true,
|
|
value: sheetsManager
|
|
});
|
|
Object.defineProperty((0, _assertThisInitialized2.default)(_this), "stylesCreatorSaved", {
|
|
configurable: true,
|
|
enumerable: true,
|
|
writable: true,
|
|
value: null
|
|
});
|
|
Object.defineProperty((0, _assertThisInitialized2.default)(_this), "theme", {
|
|
configurable: true,
|
|
enumerable: true,
|
|
writable: true,
|
|
value: null
|
|
});
|
|
Object.defineProperty((0, _assertThisInitialized2.default)(_this), "unsubscribeId", {
|
|
configurable: true,
|
|
enumerable: true,
|
|
writable: true,
|
|
value: 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, (0, _keys.default)(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((0, _keys.default)(_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.default();
|
|
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" ? {
|
|
/**
|
|
* Useful to extend the style applied to components.
|
|
*/
|
|
classes: _propTypes.default.object,
|
|
|
|
/**
|
|
* Use that property to pass a ref callback to the decorated component.
|
|
*/
|
|
innerRef: _propTypes.default.func
|
|
} : {};
|
|
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; |