wix-style-react/dist/es/src/Tabs/core/withItemMaxWidth/index.js

wix-style-react

import React from 'react';
import { getWidth } from '../utils';
import * as TabPropTypes from '../constants/tab-prop-types';
const withMaxWidth = WrappedComponent => {
    var _a;
    const getMaxWidth = (items, containerWidth) => {
        const COMPACT_SIDE_MARGIN = 18;
        const marginsBetweenItems = COMPACT_SIDE_MARGIN * 2 * (items.length - 1);
        return (containerWidth - marginsBetweenItems) / items.length;
    };
    return _a = class Wrapper extends React.Component {
            constructor() {
                super(...arguments);
                this.state = {
                    itemMaxWidth: undefined,
                };
            }
            initMaxWidth(itemsContainer) {
                const { type, items } = this.props;
                if (!itemsContainer || type !== 'compactSide') {
                    return;
                }
                const itemMaxWidth = getMaxWidth(items, getWidth(itemsContainer));
                if (this.state.itemMaxWidth !== itemMaxWidth) {
                    this.setState({ itemMaxWidth });
                }
            }
            render() {
                return (React.createElement("div", { ref: el => this.initMaxWidth(el), style: { width: '100%' } },
                    React.createElement(WrappedComponent, { ...this.props, itemMaxWidth: this.state.itemMaxWidth })));
            }
        },
        _a.propTypes = {
            type: TabPropTypes.type,
            items: TabPropTypes.items.isRequired,
        },
        _a;
};
export default withMaxWidth;
//# sourceMappingURL=index.js.map