@pisell/layout/es/section.js

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

import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/extends";
var _excluded = ["className", "children", "title", "titleAlign", "extra", "gap", "noPadding"];
import React, { useContext, Children, forwardRef, cloneElement, useMemo } from 'react';
import { isString, isNil } from 'lodash-es';
import classNames from 'classnames';
import Context from "./common/context";
import { wrapUnit, getGapVal, isValidGap } from "./utils";
import Block from "./block";
import Row from "./row";
import Col from "./col";
import Cell from "./cell";
import P from "./p";
/**
 * 获取计算后的子节点
 * @param children
 * @param numberOfColumns
 * @param maxNumberOfColumns
 */
function getValidChildren(children, numberOfColumns, maxNumberOfColumns) {
  var newChildren = wrapBlock(children, maxNumberOfColumns);
  return calBlockSpan(newChildren, numberOfColumns);
}

/**
 * 为非 Block 节点，包裹 Block 子元素
 * @param children
 * @param maxNumberOfColumns
 * @return ReactNode[]
 */
function wrapBlock(children, maxNumberOfColumns) {
  var tmp = [];
  var ret = [];
  var validChildList = Children.toArray(children).filter(function (child) {
    return !isNil(child);
  });
  validChildList.forEach(function (child, index) {
    var _child$type;
    if ((child === null || child === void 0 ? void 0 : child.type) === Block || (child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.typeMark) === 'Block') {
      if (tmp.length > 0) {
        ret.push( /*#__PURE__*/React.createElement(Block, {
          key: "cs-" + index,
          span: maxNumberOfColumns
        }, tmp));
        tmp = [];
      }
      ret.push(child);
      if (tmp.length > 0) {
        ret.push( /*#__PURE__*/React.createElement(Block, {
          key: "cs-" + index,
          span: maxNumberOfColumns
        }, [].concat(tmp)));
        tmp = [];
      }
    } else {
      tmp.push(child);
    }
    if (index === validChildList.length - 1 && tmp.length > 0) {
      ret.push( /*#__PURE__*/React.createElement(Block, {
        key: "cs-" + index,
        span: maxNumberOfColumns
      }, [].concat(tmp)));
      tmp = [];
    }
  });
  return ret;
}

/**
 * 为 Block 自动调整列宽
 * @param children
 * @param numberOfColumns
 */
function calBlockSpan(children, numberOfColumns) {
  var ret = [];
  var stack = [];
  var counter = 0;
  var len = children.length;
  for (var i = 0; i < len; i++) {
    var child = children[i];
    var span = +child.props.span;
    if (span < numberOfColumns) {
      if (span + counter <= numberOfColumns) {
        stack.push(child);
        counter += span;
      } else {
        ret = [].concat(ret, adjustColWidth(stack, counter, numberOfColumns));
        stack = [child];
        counter = span;
      }
    } else {
      if (stack.length > 0) {
        ret = [].concat(ret, adjustColWidth(stack, counter, numberOfColumns));
        stack = [];
        counter = 0;
      }
      ret = [].concat(ret, adjustColWidth([child], numberOfColumns, numberOfColumns));
    }
    if (i === len - 1 && stack.length > 0) {
      ret = [].concat(ret, adjustColWidth(stack, counter, numberOfColumns));
    }
  }
  return ret;
}

/**
 * 重算列宽
 * @param blockNodes
 * @param totalSpan
 * @param maxColNum
 */
function adjustColWidth(blockNodes, totalSpan, maxColNum) {
  return blockNodes.map(function (item) {
    var span = item.props.span;
    return /*#__PURE__*/cloneElement(item, _extends({}, item.props, {
      span: Math.round(span / totalSpan * maxColNum)
    }));
  });
}

/**
 * 章节
 * @param props
 * @param ref
 */
var Section = function Section(props, ref) {
  var _classNames;
  var className = props.className,
    children = props.children,
    title = props.title,
    titleAlign = props.titleAlign,
    extra = props.extra,
    blockGapProp = props.gap,
    noPadding = props.noPadding,
    others = _objectWithoutPropertiesLoose(props, _excluded);
  var _useContext = useContext(Context),
    prefix = _useContext.prefix,
    blockGapContext = _useContext.blockGap,
    numberOfColumns = _useContext.breakPoint.numberOfColumns,
    maxNumberOfColumns = _useContext.maxNumberOfColumns;
  var clsPrefix = prefix + "section";
  var hasHead = title || extra;
  // classNames
  var sectionCls = classNames(clsPrefix, className);
  var blockWrapperCls = clsPrefix + "-block-wrapper";
  var innerContainerWithHead = classNames(clsPrefix + "-inner--with-head", (_classNames = {}, _classNames[clsPrefix + "-no-padding"] = noPadding, _classNames));
  var innerContainerWithoutHead = classNames(clsPrefix + "-inner-without-head");

  // 此处定义的是 blockGap
  var gap = getGapVal(blockGapContext, blockGapProp);
  var blockWrapperStyle = useMemo(function () {
    return _extends({}, isValidGap(gap) ? {
      gridColumnGap: wrapUnit(gap),
      gridRowGap: wrapUnit(gap)
    } : null);
  }, [gap]);
  var newChildren = useMemo(function () {
    return getValidChildren(children, numberOfColumns, maxNumberOfColumns);
  }, [children, numberOfColumns, maxNumberOfColumns]);

  // 带有 title&extra
  if (hasHead) {
    return /*#__PURE__*/React.createElement("div", _extends({}, others, {
      className: classNames(clsPrefix, className),
      ref: ref
    }), /*#__PURE__*/React.createElement("div", {
      className: innerContainerWithHead
    }, /*#__PURE__*/React.createElement(Col, {
      align: "stretch"
    }, /*#__PURE__*/React.createElement(Row, {
      autoFit: true,
      className: clsPrefix + "-head",
      verAlign: "middle"
    }, /*#__PURE__*/React.createElement(Cell, {
      className: clsPrefix + "-title",
      align: titleAlign
    }, isString(title) ? /*#__PURE__*/React.createElement(P, {
      type: "h5"
    }, title) : title), extra ? /*#__PURE__*/React.createElement(Cell, {
      align: "right",
      autoFit: true,
      className: clsPrefix + "-extra"
    }, isString(extra) ? /*#__PURE__*/React.createElement(P, {
      align: "right",
      type: "body2"
    }, extra) : extra) : null), /*#__PURE__*/React.createElement(Cell, null, /*#__PURE__*/React.createElement("div", {
      className: blockWrapperCls,
      style: blockWrapperStyle
    }, newChildren)))));
  }
  return /*#__PURE__*/React.createElement("div", _extends({}, others, {
    className: sectionCls,
    ref: ref
  }), /*#__PURE__*/React.createElement("div", {
    className: classNames(innerContainerWithoutHead, blockWrapperCls),
    style: blockWrapperStyle
  }, newChildren));
};
var RefSection = /*#__PURE__*/forwardRef(Section);
RefSection.displayName = 'Section';
RefSection.typeMark = 'Section';
export default RefSection;