@uifabric/utilities
Version:
Fluent UI React utilities for building components.
49 lines • 2.27 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Customizations_1 = require("./Customizations");
var CustomizerContext_1 = require("./CustomizerContext");
var mergeCustomizations_1 = require("./mergeCustomizations");
/**
* The Customizer component allows for default props to be mixed into components which
* are decorated with the customizable() decorator, or use the styled HOC. This enables
* injection scenarios like:
*
* 1. render svg icons instead of the icon font within all buttons
* 2. inject a custom theme object into a component
*
* Props are provided via the settings prop which should be one of the following:
* - A json map which contains 1 or more name/value pairs representing injectable props.
* - A function that receives the current settings and returns the new ones that apply to the scope
*
* @public
*/
var Customizer = /** @class */ (function (_super) {
tslib_1.__extends(Customizer, _super);
function Customizer() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._onCustomizationChange = function () { return _this.forceUpdate(); };
return _this;
}
Customizer.prototype.componentDidMount = function () {
Customizations_1.Customizations.observe(this._onCustomizationChange);
};
Customizer.prototype.componentWillUnmount = function () {
Customizations_1.Customizations.unobserve(this._onCustomizationChange);
};
Customizer.prototype.render = function () {
var _this = this;
var contextTransform = this.props.contextTransform;
return (React.createElement(CustomizerContext_1.CustomizerContext.Consumer, null, function (parentContext) {
var newContext = mergeCustomizations_1.mergeCustomizations(_this.props, parentContext);
if (contextTransform) {
newContext = contextTransform(newContext);
}
return React.createElement(CustomizerContext_1.CustomizerContext.Provider, { value: newContext }, _this.props.children);
}));
};
return Customizer;
}(React.Component));
exports.Customizer = Customizer;
//# sourceMappingURL=Customizer.js.map