wix-storybook-utils
Version:
Utilities for automated component documentation within Storybook
46 lines • 2.02 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var TabPropTypes = tslib_1.__importStar(require("../constants/tab-prop-types"));
var utils_1 = require("../utils");
var withMaxWidth = function (WrappedComponent) {
var getMaxWidth = function (items, containerWidth) {
var COMPACT_SIDE_MARGIN = 18;
var marginsBetweenItems = COMPACT_SIDE_MARGIN * 2 * (items.length - 1);
return (containerWidth - marginsBetweenItems) / items.length;
};
var Wrapper = /** @class */ (function (_super) {
tslib_1.__extends(Wrapper, _super);
function Wrapper() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
itemMaxWidth: undefined,
};
return _this;
}
Wrapper.prototype.initMaxWidth = function (itemsContainer) {
var _a = this.props, type = _a.type, items = _a.items;
if (!itemsContainer || type !== 'compactSide') {
return;
}
var itemMaxWidth = getMaxWidth(items, (0, utils_1.getWidth)(itemsContainer));
if (this.state.itemMaxWidth !== itemMaxWidth) {
this.setState({ itemMaxWidth: itemMaxWidth });
}
};
Wrapper.prototype.render = function () {
var _this = this;
return (react_1.default.createElement("div", { ref: function (el) { return _this.initMaxWidth(el); }, style: { width: '100%' } },
react_1.default.createElement(WrappedComponent, tslib_1.__assign({}, this.props, { itemMaxWidth: this.state.itemMaxWidth }))));
};
return Wrapper;
}(react_1.default.Component));
Wrapper.propTypes = {
type: TabPropTypes.type,
items: TabPropTypes.items.isRequired,
};
return Wrapper;
};
exports.default = withMaxWidth;
//# sourceMappingURL=index.js.map