@wix/design-system/dist/esm/AnalyticsLayout/AnalyticsLayout.js

@wix/design-system

import * as React from 'react';
import PropTypes from 'prop-types';
import chunk from 'lodash/chunk';
import { st, classes } from './AnalyticsLayout.st.css.js';
import Cell from './Cell/Cell';
import deprecationLog from '../utils/deprecationLog';
const MIN_ITEMS_PER_ROW = 2;
const MAX_ITEMS_PER_ROW = 3;
function _splitItemsToRows(items, min, max) {
    const mod = items.length % max;
    if (mod < min && mod !== 0) {
        const numberOfItemsForFillsMaxRows = max * (Math.floor(items.length / max) - 1);
        const ItemsForFillsMaxRows = items.splice(0, numberOfItemsForFillsMaxRows);
        return [...chunk(ItemsForFillsMaxRows, max), ...chunk(items, min)];
    }
    else {
        return chunk(items, max);
    }
}
/** AnalyticsLayout */
class AnalyticsLayout extends React.PureComponent {
    render() {
        const { dataHook, items, minItemsPerRow, maxItemsPerRow, divider, className, children, } = this.props;
        const itemsSplitToRows = _splitItemsToRows(items, minItemsPerRow, maxItemsPerRow);
        const showDivider = this.props.showDivider ?? divider;
        if (divider) {
            deprecationLog('<AnalyticsLayout/> - prop "divider" is deprecated and will be removed in next major release, please use "showDivider" property instead.');
        }
        return (React.createElement("div", { className: st(classes.root, className), "data-hook": dataHook }, itemsSplitToRows.map((row, indexKey) => {
            return (React.createElement("div", { key: indexKey, className: st(classes.row, { showDivider }), style: { gridTemplateColumns: `repeat(${row.length}, 1fr)` } }, row.map((item, index) => {
                return children(item, index, row.length);
            })));
        })));
    }
}
AnalyticsLayout.displayName = 'AnalyticsLayout';
AnalyticsLayout.defaultProps = {
    items: [],
    minItemsPerRow: MIN_ITEMS_PER_ROW,
    maxItemsPerRow: MAX_ITEMS_PER_ROW,
    divider: true, // TODO: add default value to showDivider once divider is removed
};
AnalyticsLayout.Cell = Cell;
AnalyticsLayout.propTypes = {
    dataHook: PropTypes.string,
    className: PropTypes.string,
    items: PropTypes.any.isRequired,
    divider: PropTypes.bool,
    showDivider: PropTypes.bool,
    minItemsPerRow: PropTypes.number,
    maxItemsPerRow: PropTypes.number,
    children: PropTypes.func.isRequired,
};
export default AnalyticsLayout;
//# sourceMappingURL=AnalyticsLayout.js.map