197 lines
7.0 KiB
JavaScript
197 lines
7.0 KiB
JavaScript
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _extends2 = require('babel-runtime/helpers/extends');
|
|
|
|
var _extends3 = _interopRequireDefault(_extends2);
|
|
|
|
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
|
|
|
|
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
|
|
|
|
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
|
|
|
|
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
|
|
|
|
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
|
|
|
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
|
|
|
var _createClass2 = require('babel-runtime/helpers/createClass');
|
|
|
|
var _createClass3 = _interopRequireDefault(_createClass2);
|
|
|
|
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
|
|
|
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
|
|
|
var _inherits2 = require('babel-runtime/helpers/inherits');
|
|
|
|
var _inherits3 = _interopRequireDefault(_inherits2);
|
|
|
|
var _react = require('react');
|
|
|
|
var _react2 = _interopRequireDefault(_react);
|
|
|
|
var _propTypes = require('prop-types');
|
|
|
|
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
|
|
var _warning = require('warning');
|
|
|
|
var _warning2 = _interopRequireDefault(_warning);
|
|
|
|
var _brcast = require('brcast');
|
|
|
|
var _brcast2 = _interopRequireDefault(_brcast);
|
|
|
|
var _themeListener = require('./themeListener');
|
|
|
|
var _themeListener2 = _interopRequireDefault(_themeListener);
|
|
|
|
var _exactProp = require('../utils/exactProp');
|
|
|
|
var _exactProp2 = _interopRequireDefault(_exactProp);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
/**
|
|
* This component takes a `theme` property.
|
|
* It makes the `theme` available down the React tree thanks to React context.
|
|
* This component should preferably be used at **the root of your component tree**.
|
|
*/
|
|
var MuiThemeProvider = function (_React$Component) {
|
|
(0, _inherits3.default)(MuiThemeProvider, _React$Component);
|
|
|
|
function MuiThemeProvider(props, context) {
|
|
(0, _classCallCheck3.default)(this, MuiThemeProvider);
|
|
|
|
// Get the outer theme from the context, can be null
|
|
var _this = (0, _possibleConstructorReturn3.default)(this, (MuiThemeProvider.__proto__ || (0, _getPrototypeOf2.default)(MuiThemeProvider)).call(this, props, context));
|
|
|
|
_this.broadcast = (0, _brcast2.default)();
|
|
_this.unsubscribeId = null;
|
|
_this.outerTheme = null;
|
|
_this.outerTheme = _themeListener2.default.initial(context);
|
|
// Propagate the theme so it can be accessed by the children
|
|
_this.broadcast.setState(_this.mergeOuterLocalTheme(_this.props.theme));
|
|
return _this;
|
|
}
|
|
|
|
(0, _createClass3.default)(MuiThemeProvider, [{
|
|
key: 'getChildContext',
|
|
value: function getChildContext() {
|
|
var _ref;
|
|
|
|
var _props = this.props,
|
|
sheetsManager = _props.sheetsManager,
|
|
disableStylesGeneration = _props.disableStylesGeneration;
|
|
|
|
var muiThemeProviderOptions = this.context.muiThemeProviderOptions || {};
|
|
|
|
if (sheetsManager !== undefined) {
|
|
muiThemeProviderOptions.sheetsManager = sheetsManager;
|
|
}
|
|
|
|
if (disableStylesGeneration !== undefined) {
|
|
muiThemeProviderOptions.disableStylesGeneration = disableStylesGeneration;
|
|
}
|
|
|
|
return _ref = {}, (0, _defineProperty3.default)(_ref, _themeListener.CHANNEL, this.broadcast), (0, _defineProperty3.default)(_ref, 'muiThemeProviderOptions', muiThemeProviderOptions), _ref;
|
|
}
|
|
}, {
|
|
key: 'componentDidMount',
|
|
value: function componentDidMount() {
|
|
var _this2 = this;
|
|
|
|
// Subscribe on the outer theme, if present
|
|
this.unsubscribeId = _themeListener2.default.subscribe(this.context, function (outerTheme) {
|
|
_this2.outerTheme = outerTheme;
|
|
// Forward the parent theme update to the children
|
|
_this2.broadcast.setState(_this2.mergeOuterLocalTheme(_this2.props.theme));
|
|
});
|
|
}
|
|
}, {
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(nextProps) {
|
|
// Propagate a local theme update
|
|
if (this.props.theme !== nextProps.theme) {
|
|
this.broadcast.setState(this.mergeOuterLocalTheme(nextProps.theme));
|
|
}
|
|
}
|
|
}, {
|
|
key: 'componentWillUnmount',
|
|
value: function componentWillUnmount() {
|
|
if (this.unsubscribeId !== null) {
|
|
_themeListener2.default.unsubscribe(this.context, this.unsubscribeId);
|
|
}
|
|
}
|
|
// We are not using the React state in order to avoid unnecessary rerender.
|
|
|
|
}, {
|
|
key: 'mergeOuterLocalTheme',
|
|
|
|
|
|
// Simple merge between the outer theme and the local theme
|
|
value: function mergeOuterLocalTheme(localTheme) {
|
|
// To support composition of theme.
|
|
if (typeof localTheme === 'function') {
|
|
process.env.NODE_ENV !== "production" ? (0, _warning2.default)(this.outerTheme, ['Material-UI: you are providing a theme function property ' + 'to the MuiThemeProvider component:', '<MuiThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n')) : void 0;
|
|
return localTheme(this.outerTheme);
|
|
}
|
|
|
|
if (!this.outerTheme) {
|
|
return localTheme;
|
|
}
|
|
|
|
return (0, _extends3.default)({}, this.outerTheme, localTheme);
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
return this.props.children;
|
|
}
|
|
}]);
|
|
return MuiThemeProvider;
|
|
}(_react2.default.Component);
|
|
|
|
MuiThemeProvider.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
/**
|
|
* You can only provide a single element with react@15, a node with react@16.
|
|
*/
|
|
children: _propTypes2.default.node.isRequired,
|
|
/**
|
|
* You can disable the generation of the styles with this option.
|
|
* It can be useful when traversing the React tree outside of the HTML
|
|
* rendering step on the server.
|
|
* Let's say you are using react-apollo to extract all
|
|
* the queries made by the interface server side.
|
|
* You can significantly speed up the traversal with this property.
|
|
*/
|
|
disableStylesGeneration: _propTypes2.default.bool,
|
|
/**
|
|
* The sheetsManager is used to deduplicate style sheet injection in the page.
|
|
* It's deduplicating using the (theme, styles) couple.
|
|
* On the server, you should provide a new instance for each request.
|
|
*/
|
|
sheetsManager: _propTypes2.default.object,
|
|
/**
|
|
* A theme object.
|
|
*/
|
|
theme: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.func]).isRequired
|
|
} : {};
|
|
|
|
MuiThemeProvider.propTypes = process.env.NODE_ENV !== "production" ? (0, _exactProp2.default)(MuiThemeProvider.propTypes, 'MuiThemeProvider') : {};
|
|
|
|
MuiThemeProvider.childContextTypes = (0, _extends3.default)({}, _themeListener2.default.contextTypes, {
|
|
muiThemeProviderOptions: _propTypes2.default.object
|
|
});
|
|
|
|
MuiThemeProvider.contextTypes = (0, _extends3.default)({}, _themeListener2.default.contextTypes, {
|
|
muiThemeProviderOptions: _propTypes2.default.object
|
|
});
|
|
|
|
exports.default = MuiThemeProvider; |