zmp-react/esm/zalo-ui-kits/grid.js

Build full featured iOS & Android apps using ZMP & React

import _extends from "@babel/runtime/helpers/extends";
import React, { useRef, forwardRef, useImperativeHandle } from 'react';
import { classNames } from '../shared/utils';
import GridItem from './grid-item';
import { MAX_GRID_COLUMNS, MIN_GRID_COLUMNS } from '../../common/constants';
/* dts-props
  id?: string | number;
  className?: string;
  style?: React.CSSProperties;
  itemClassName?: string;
  noBorder?: boolean;
  data?: Array<any>;
  columns?: number;
  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
  CHILDREN_PROP
*/

var Grid = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var id = _ref.id,
      className = _ref.className,
      style = _ref.style,
      _ref$data = _ref.data,
      data = _ref$data === void 0 ? [] : _ref$data,
      noBorder = _ref.noBorder,
      children = _ref.children,
      columns = _ref.columns;
  var elRef = useRef(null);
  var gridColumns = 3;

  if (columns && typeof columns === 'number' && columns > MIN_GRID_COLUMNS && columns < MAX_GRID_COLUMNS) {
    gridColumns = columns;
  }

  useImperativeHandle(ref, function () {
    return {
      el: elRef.current
    };
  });
  var classes = classNames('grid', "grid-" + gridColumns, {
    'grid-no-border': noBorder
  }, className);

  var renderItem = function renderItem(item, index) {
    return /*#__PURE__*/React.createElement(GridItem, _extends({
      key: item.key || "grid-item-" + index
    }, item, {
      icon: item.icon,
      label: item.label
    }));
  };

  return /*#__PURE__*/React.createElement("div", {
    id: id,
    className: classes,
    style: style,
    ref: elRef
  }, data.length > 0 ? data.map(function (item, index) {
    return renderItem(item, index);
  }) : children);
});
Grid.displayName = 'zmp-grid';
export default Grid;