@uifabric/utilities
Version:
Fluent UI React utilities for building components.
59 lines • 4.11 kB
JavaScript
define(["require", "exports", "tslib", "react", "./Customizations", "../hoistStatics", "./CustomizerContext", "@uifabric/merge-styles"], function (require, exports, tslib_1, React, Customizations_1, hoistStatics_1, CustomizerContext_1, merge_styles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function customizable(scope, fields, concatStyles) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return function customizableFactory(ComposedComponent) {
var _a;
var resultClass = (_a = /** @class */ (function (_super) {
tslib_1.__extends(ComponentWithInjectedProps, _super);
function ComponentWithInjectedProps(props) {
var _this = _super.call(this, props) || this;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
_this._styleCache = {};
_this._onSettingChanged = _this._onSettingChanged.bind(_this);
return _this;
}
ComponentWithInjectedProps.prototype.componentDidMount = function () {
Customizations_1.Customizations.observe(this._onSettingChanged);
};
ComponentWithInjectedProps.prototype.componentWillUnmount = function () {
Customizations_1.Customizations.unobserve(this._onSettingChanged);
};
ComponentWithInjectedProps.prototype.render = function () {
var _this = this;
return (React.createElement(CustomizerContext_1.CustomizerContext.Consumer, null, function (context) {
var defaultProps = Customizations_1.Customizations.getSettings(fields, scope, context.customizations);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var componentProps = _this.props;
// If defaultProps.styles is a function, evaluate it before calling concatStyleSets
if (defaultProps.styles && typeof defaultProps.styles === 'function') {
defaultProps.styles = defaultProps.styles(tslib_1.__assign(tslib_1.__assign({}, defaultProps), componentProps));
}
// If concatStyles is true and custom styles have been defined compute those styles
if (concatStyles && defaultProps.styles) {
if (_this._styleCache.default !== defaultProps.styles ||
_this._styleCache.component !== componentProps.styles) {
var mergedStyles = merge_styles_1.concatStyleSets(defaultProps.styles, componentProps.styles);
_this._styleCache.default = defaultProps.styles;
_this._styleCache.component = componentProps.styles;
_this._styleCache.merged = mergedStyles;
}
return React.createElement(ComposedComponent, tslib_1.__assign({}, defaultProps, componentProps, { styles: _this._styleCache.merged }));
}
return React.createElement(ComposedComponent, tslib_1.__assign({}, defaultProps, componentProps));
}));
};
ComponentWithInjectedProps.prototype._onSettingChanged = function () {
this.forceUpdate();
};
return ComponentWithInjectedProps;
}(React.Component)),
_a.displayName = 'Customized' + scope,
_a);
return hoistStatics_1.hoistStatics(ComposedComponent, resultClass);
};
}
exports.customizable = customizable;
});
//# sourceMappingURL=customizable.js.map