@wix/design-system
Version:
@wix/design-system
33 lines • 1.31 kB
JavaScript
import React from 'react';
import { getWidth } from '../../utils/getWidth';
const WithMaxWidth = (WrappedComponent) => {
const getMaxWidth = (items, containerWidth) => {
const COMPACT_SIDE_MARGIN = 18;
const marginsBetweenItems = COMPACT_SIDE_MARGIN * 2 * (items.length - 1);
return (containerWidth - marginsBetweenItems) / items.length;
};
return 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 })));
}
};
};
export default WithMaxWidth;
//# sourceMappingURL=WithMaxWidth.js.map