wix-style-react/dist/es/src/AnalyticsLayout/AnalyticsLayout.js

wix-style-react

import * as React from 'react';
import PropTypes from 'prop-types';
import chunk from 'lodash/chunk';
import { st, classes } from './AnalyticsLayout.st.css';
import Cell from './Cell/Cell';
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, className, children } = this.props;
        const itemsSplitToRows = _splitItemsToRows(items, MIN_ITEMS_PER_ROW, MAX_ITEMS_PER_ROW);
        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), style: { gridTemplateColumns: `repeat(${row.length}, 1fr)` } }, row.map((item, index) => {
                // @ts-ignore
                return children(item, index, row.length);
            })));
        })));
    }
}
AnalyticsLayout.displayName = 'AnalyticsLayout';
AnalyticsLayout.defaultProps = {
    items: [],
};
AnalyticsLayout.Cell = Cell;
AnalyticsLayout.propTypes = {
    dataHook: PropTypes.string,
    className: PropTypes.string,
    items: PropTypes.any.isRequired,
    children: PropTypes.func.isRequired,
};
export default AnalyticsLayout;
//# sourceMappingURL=AnalyticsLayout.js.map