linkmore-design/es/form/WrapperItem.js

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { throttle } from 'lodash';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import Col from "../col";
import IconFont from "../icon-font";
import Row from "../row";
// 行个数 => 在24份中占用的分数
var rowMap = new Map([[5, [4, 1]], [4, [5, 1]], [3, [7, 1]]]);
var Title = function Title(props) {
  var title = props.title,
    onToggle = props.onToggle;
  var _useState = useState(true),
    _useState2 = _slicedToArray(_useState, 2),
    visible = _useState2[0],
    setVisible = _useState2[1];
  return /*#__PURE__*/React.createElement("div", {
    className: "form_responsive_group_title"
  }, /*#__PURE__*/React.createElement("h3", null, title), /*#__PURE__*/React.createElement(IconFont, {
    type: "icon-xiajiantou",
    className: !visible ? 'open' : '',
    onClick: function onClick() {
      setVisible(!visible);
      onToggle && onToggle(!visible);
    }
  }));
};
var List = function List(props) {
  var customizeChildren = props.children,
    countPerRow = props.countPerRow,
    title = props.title,
    user = props.user;
  var _rowMap$get = rowMap.get(countPerRow),
    _rowMap$get2 = _slicedToArray(_rowMap$get, 2),
    colSpan = _rowMap$get2[0],
    colSpace = _rowMap$get2[1];
  var _useState3 = useState(true),
    _useState4 = _slicedToArray(_useState3, 2),
    visible = _useState4[0],
    setVisible = _useState4[1];

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

    // 一行
    function generatorRow() {
      var node = /*#__PURE__*/React.createElement(Row, null, collection.map(function (child, index) {
        if (index !== collection.length - 1) {
          return /*#__PURE__*/React.createElement(React.Fragment, {
            key: index
          }, /*#__PURE__*/React.createElement(Col, {
            span: colSpan
          }, child), /*#__PURE__*/React.createElement(Col, {
            span: colSpace
          }));
        }
        return /*#__PURE__*/React.createElement(Col, {
          span: colSpan,
          key: index
        }, child);
      }));
      result.push(node);
      collection.length = 0;
    }
    for (var i = 0; i < children.length; i += 1) {
      var child = children[i];
      // 过滤掉React.Fragment
      while (child.type === Symbol.for('react.fragment')) {
        if (Array.isArray(child.props.children)) {
          var _children;
          (_children = children).splice.apply(_children, [i, 1].concat(_toConsumableArray(child.props.children)));
          child = children[i];
        } else {
          child = child.props.children;
        }
      }
      if (child) {
        var _child, _child$props;
        if ((_child = child) !== null && _child !== void 0 && (_child$props = _child.props) !== null && _child$props !== void 0 && _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]);
  var needRenderList = rowlist;
  if (!visible && needRenderList.length) {
    needRenderList = [needRenderList[0]];
  }
  return /*#__PURE__*/React.createElement(React.Fragment, null, needRenderList.map(function (child, index) {
    return /*#__PURE__*/React.createElement(React.Fragment, {
      key: index
    }, child);
  }));
};
var WrapperItem = function WrapperItem(props) {
  var user = props.user;
  var targetRef = useRef(null);
  var _useState5 = useState({
      width: '100%',
      height: '100%'
    }),
    _useState6 = _slicedToArray(_useState5, 2),
    containerSize = _useState6[0],
    setContainerSize = _useState6[1];
  // 每行的个数
  var _useState7 = useState(5),
    _useState8 = _slicedToArray(_useState7, 2),
    countPerRow = _useState8[0],
    setCountPerRow = _useState8[1];
  var changeSize = function changeSize() {
    var _targetRef$current;
    var maxWidth = 1824;
    var _ref = ((_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.getBoundingClientRect()) || {},
      _ref$width = _ref.width,
      width = _ref$width === void 0 ? '100%' : _ref$width;
    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: width
    });
  };
  var handResize = throttle(changeSize, 600);
  useEffect(function () {
    changeSize();
    window.addEventListener('resize', handResize);
    return function () {
      window.removeEventListener('resize', handResize);
    };
  }, []);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "lm_container_wrapper",
    ref: targetRef
  }, /*#__PURE__*/React.createElement("div", {
    style: _objectSpread(_objectSpread({}, containerSize), {}, {
      margin: '0 auto'
    })
  }, /*#__PURE__*/React.createElement(List, _extends({}, props, {
    countPerRow: countPerRow
  })))));
};
export default WrapperItem;