@wix/design-system
Version:
@wix/design-system
63 lines (62 loc) • 2.04 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _getWidth = require("../../utils/getWidth");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Tabs/components/WithMaxWidth/WithMaxWidth.tsx";
var WithMaxWidth = WrappedComponent => {
var getMaxWidth = (items, containerWidth) => {
var COMPACT_SIDE_MARGIN = 18;
var marginsBetweenItems = COMPACT_SIDE_MARGIN * 2 * (items.length - 1);
return (containerWidth - marginsBetweenItems) / items.length;
};
return class Wrapper extends _react.default.Component {
constructor() {
super(...arguments);
this.state = {
itemMaxWidth: undefined
};
}
initMaxWidth(itemsContainer) {
var {
type,
items
} = this.props;
if (!itemsContainer || type !== 'compactSide') {
return;
}
var itemMaxWidth = getMaxWidth(items, (0, _getWidth.getWidth)(itemsContainer));
if (this.state.itemMaxWidth !== itemMaxWidth) {
this.setState({
itemMaxWidth
});
}
}
render() {
return /*#__PURE__*/_react.default.createElement("div", {
ref: el => this.initMaxWidth(el),
style: {
width: '100%'
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(WrappedComponent, (0, _extends2.default)({}, this.props, {
itemMaxWidth: this.state.itemMaxWidth,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 11
}
})));
}
};
};
var _default = exports.default = WithMaxWidth;
//# sourceMappingURL=WithMaxWidth.js.map