@kirz/react-native-toolkit/lib/module/components/Grid.js

Toolkit to speed up React Native development

import React, { Children } from 'react';
import { View } from './View';
export function Grid(_ref) {
  let {
    columns,
    spacing = 0,
    children,
    style,
    rowStyle
  } = _ref;
  const childrenNodes = Children.toArray(children);
  const numberOfRows = Math.ceil(childrenNodes.length / columns);
  const restCells = childrenNodes.length % columns;
  if (!numberOfRows) {
    return null;
  }
  return /*#__PURE__*/React.createElement(View, {
    style: style
  }, [...new Array(numberOfRows).keys()].map(rowId => /*#__PURE__*/React.createElement(View, {
    key: rowId,
    style: [rowStyle, {
      flexDirection: 'row',
      marginBottom: rowId < numberOfRows - 1 ? spacing : 0,
      marginHorizontal: -spacing / 2
    }]
  }, childrenNodes.filter((_, nodeIdx) => nodeIdx >= rowId * columns && nodeIdx < (rowId + 1) * columns).map((node, nodeIdx) => /*#__PURE__*/React.createElement(View, {
    key: nodeIdx,
    style: {
      flex: 1,
      marginHorizontal: spacing / 2
    }
  }, node)), rowId === numberOfRows - 1 && [...new Array(restCells > 0 ? columns - restCells : 0).keys()].map(cellIdx => /*#__PURE__*/React.createElement(View, {
    key: cellIdx,
    style: {
      flex: 1,
      marginHorizontal: spacing / 2
    }
  })))));
}
//# sourceMappingURL=Grid.js.map