linkmore-design/lib/form/WrapperItem.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _lodash = require("lodash");
var _react = _interopRequireWildcard(require("react"));
var _col = _interopRequireDefault(require("../col"));
var _iconFont = _interopRequireDefault(require("../icon-font"));
var _row = _interopRequireDefault(require("../row"));
// 行个数 => 在24份中占用的分数
const rowMap = new Map([[5, [4, 1]], [4, [5, 1]], [3, [7, 1]]]);
const Title = props => {
  const {
    title,
    onToggle
  } = props;
  const [visible, setVisible] = (0, _react.useState)(true);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "form_responsive_group_title"
  }, /*#__PURE__*/_react.default.createElement("h3", null, title), /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    type: "lm-icon-xiajiantou",
    className: !visible ? 'open' : '',
    onClick: () => {
      setVisible(!visible);
      onToggle && onToggle(!visible);
    }
  }));
};
const List = props => {
  const {
    children: customizeChildren,
    countPerRow,
    title,
    user
  } = props;
  const [colSpan, colSpace] = rowMap.get(countPerRow);
  const [visible, setVisible] = (0, _react.useState)(true);

  // 最终的结果
  const rowlist = (0, _react.useMemo)(() => {
    let children = [];
    // 收集(满了就重置)
    const collection = [];
    const result = [];
    if (!Array.isArray(customizeChildren)) {
      children = [customizeChildren];
    }
    children = Array.prototype.slice.call(customizeChildren).flat();
    if (user) {
      result.push( /*#__PURE__*/_react.default.createElement(Title, {
        title: title,
        onToggle: value => {
          setVisible(value);
        }
      }));
    }

    // 一行
    function generatorRow() {
      const node = /*#__PURE__*/_react.default.createElement(_row.default, null, collection.map((child, index) => {
        if (index !== collection.length - 1) {
          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
            key: index
          }, /*#__PURE__*/_react.default.createElement(_col.default, {
            span: colSpan
          }, child), /*#__PURE__*/_react.default.createElement(_col.default, {
            span: colSpace
          }));
        }
        return /*#__PURE__*/_react.default.createElement(_col.default, {
          span: colSpan,
          key: index
        }, child);
      }));
      result.push(node);
      collection.length = 0;
    }
    for (let i = 0; i < children.length; i += 1) {
      let child = children[i];
      // 过滤掉React.Fragment
      while (child.type === Symbol.for('react.fragment')) {
        if (Array.isArray(child.props.children)) {
          children.splice(i, 1, ...child.props.children);
          child = children[i];
        } else {
          child = child.props.children;
        }
      }
      if (child) {
        if (child?.props?.responsive) {
          collection.push(child);
          if (collection.length && collection.length === countPerRow) {
            generatorRow();
          }
        } else if (collection.length) {
          generatorRow();
          result.push(child);
        } else {
          result.push(child);
        }
      }
    }
    if (collection.length) {
      generatorRow();
    }
    return result;
  }, [customizeChildren, countPerRow, user, title]);
  let needRenderList = rowlist;
  if (!visible && needRenderList.length) {
    needRenderList = [needRenderList[0]];
  }
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, needRenderList.map((child, index) => {
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
      key: index
    }, child);
  }));
};
const WrapperItem = props => {
  const {
    user
  } = props;
  const targetRef = (0, _react.useRef)(null);
  const [containerSize, setContainerSize] = (0, _react.useState)({
    width: '100%',
    height: '100%'
  });
  // 每行的个数
  const [countPerRow, setCountPerRow] = (0, _react.useState)(5);
  const changeSize = () => {
    const maxWidth = 1824;
    let {
      width = '100%'
    } = targetRef.current?.getBoundingClientRect() || {};
    if (width < 990) {
      setCountPerRow(3);
    } else if (width < 1390) {
      setCountPerRow(4);
    } else {
      setCountPerRow(5);
    }
    if (width !== '100%') {
      width -= 32;
      if (width > maxWidth) {
        if (user) {
          width = maxWidth - 64;
        }
      }
    }
    setContainerSize({
      width
    });
  };
  const handResize = (0, _lodash.throttle)(changeSize, 600);
  (0, _react.useEffect)(() => {
    changeSize();
    window.addEventListener('resize', handResize);
    return () => {
      window.removeEventListener('resize', handResize);
    };
  }, []);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_container_wrapper",
    ref: targetRef
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      ...containerSize,
      margin: '0 auto'
    }
  }, /*#__PURE__*/_react.default.createElement(List, (0, _extends2.default)({}, props, {
    countPerRow: countPerRow
  })))));
};
var _default = WrapperItem;
exports.default = _default;