@pisell/layout/es/grid.js

基于 Fusion 设计系统的自然布局体系

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["className", "children", "style", "align", "verAlign", "rowGap", "colGap", "renderItem", "rows", "cols", "width", "minWidth", "maxWidth"];
import React, { forwardRef, useContext, useMemo } from 'react';
import classNames from 'classnames';
import Context from "./common/context";
import { getGapVal, wrapUnit } from "./utils";
import useFlexClassNames from "./hooks/use-flex-class-names";
/**
 * 网格布局
 * @param props
 * @param ref
 */
var Grid = function Grid(props, ref) {
  var _classNames;
  var className = props.className,
    children = props.children,
    style = props.style,
    align = props.align,
    verAlign = props.verAlign,
    rowGapProp = props.rowGap,
    colGapProp = props.colGap,
    renderItem = props.renderItem,
    rows = props.rows,
    cols = props.cols,
    width = props.width,
    minWidth = props.minWidth,
    maxWidth = props.maxWidth,
    others = _objectWithoutPropertiesLoose(props, _excluded);
  var _useContext = useContext(Context),
    prefix = _useContext.prefix,
    gridGap = _useContext.gridGap;
  var clsPrefix = prefix + "grid";
  var rowGap = getGapVal(gridGap, rowGapProp);
  var colGap = getGapVal(gridGap, colGapProp);
  var validWidth = width || (style === null || style === void 0 ? void 0 : style.width) || minWidth;
  var memorizedNewStyle = useMemo(function () {
    var gtc = "repeat(" + cols + ", 1fr)";
    if (cols && cols > 1) {
      gtc = "repeat(" + cols + ", calc( (100% - " + (colGap || "var(--page-grid-gap)") + " * " + (cols - 1) + ")/" + cols + "))";
    } else if (minWidth && maxWidth) {
      gtc = "repeat(auto-fill, minmax(" + wrapUnit(minWidth) + ", " + wrapUnit(maxWidth) + "))";
    } else if (minWidth && !maxWidth) {
      gtc = "repeat(auto-fit, minmax(" + wrapUnit(minWidth) + ", auto))";
    } else if (!minWidth && maxWidth) {
      gtc = "repeat(auto-fill, minmax(auto, " + wrapUnit(maxWidth) + "))";
    }
    return _extends({
      display: 'grid',
      gridTemplateColumns: gtc,
      gridTemplateRows: "repeat(" + rows + ", 1fr)"
    }, rowGap ? {
      gridRowGap: wrapUnit(rowGap)
    } : null, colGap ? {
      gridColumnGap: wrapUnit(colGap)
    } : null, validWidth ? {
      flexBasis: wrapUnit(validWidth)
    } : null, style);
  }, [cols, colGap, minWidth, maxWidth, rows, rowGap, style, validWidth]);

  // 优先行渲染
  var renderChildren = function renderChildren() {
    return Array.from(new Array(rows)).map(function (_, row) {
      return Array.from(new Array(cols)).map(function (__, col) {
        return renderItem ? renderItem(row, col) : null;
      });
    });
  };
  var flexClassNames = useFlexClassNames(props);
  return /*#__PURE__*/React.createElement("div", _extends({}, others, {
    ref: ref,
    className: classNames(className, clsPrefix, flexClassNames, (_classNames = {}, _classNames[clsPrefix + "-align--" + align] = align, _classNames[clsPrefix + "-valign--" + verAlign] = verAlign, _classNames)),
    style: memorizedNewStyle
  }), renderItem ? renderChildren() : children);
};
var RefGrid = /*#__PURE__*/forwardRef(Grid);
RefGrid.displayName = 'Grid';
RefGrid.typeMark = 'Grid';
RefGrid.defaultProps = {
  rows: 1,
  cols: 1
};
export default RefGrid;