wix-storybook-utils/dist/es/src/ui/Tabs/core/withItemMaxWidth/index.js

Utilities for automated component documentation within Storybook

import { __assign, __extends } from "tslib";
import React from 'react';
import * as TabPropTypes from '../constants/tab-prop-types';
import { getWidth } from '../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) {
        __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, getWidth(itemsContainer));
            if (this.state.itemMaxWidth !== itemMaxWidth) {
                this.setState({ itemMaxWidth: itemMaxWidth });
            }
        };
        Wrapper.prototype.render = function () {
            var _this = this;
            return (React.createElement("div", { ref: function (el) { return _this.initMaxWidth(el); }, style: { width: '100%' } },
                React.createElement(WrappedComponent, __assign({}, this.props, { itemMaxWidth: this.state.itemMaxWidth }))));
        };
        return Wrapper;
    }(React.Component));
    Wrapper.propTypes = {
        type: TabPropTypes.type,
        items: TabPropTypes.items.isRequired,
    };
    return Wrapper;
};
export default withMaxWidth;
//# sourceMappingURL=index.js.map