zp-bee/es/bee-layout/index.js

zp-bee，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
import { useRect } from '../bee-rect';

var BeeLayout = function BeeLayout(_ref) {
  var children = _ref.children,
      btnChildren = _ref.btnChildren,
      _ref$hiddenHeight = _ref.hiddenHeight,
      hiddenHeight = _ref$hiddenHeight === void 0 ? 26 : _ref$hiddenHeight,
      _ref$showHidden = _ref.showHidden,
      showHidden = _ref$showHidden === void 0 ? false : _ref$showHidden,
      _ref$showTime = _ref.showTime,
      showTime = _ref$showTime === void 0 ? true : _ref$showTime,
      _ref$fixCount = _ref.fixCount,
      fixCount = _ref$fixCount === void 0 ? 1 : _ref$fixCount;

  var _useState = useState(showHidden),
      _useState2 = _slicedToArray(_useState, 2),
      expanded = _useState2[0],
      setExpanded = _useState2[1];

  var contentWrapper = useRef();
  var contentRect = useRect(contentWrapper);
  var childrenArray = useMemo(function () {
    return React.Children.toArray(children);
  }, [children]);
  var renderedItemsCount = useRef(childrenArray.length);

  var _useState3 = useState({}),
      _useState4 = _slicedToArray(_useState3, 2),
      forceUpdate = _useState4[1];

  var minWidth = useMemo(function () {
    var timeWidth = showTime ? 320 : 0;
    return fixCount * 230 + timeWidth;
  }, [showTime, fixCount]);
  useEffect(function () {
    if (contentRect) {
      var width = contentRect.width,
          height = contentRect.height;

      if (width && height) {
        var renderCount = renderedItemsCount.current;

        if (height > hiddenHeight + 16) {
          renderCount = childrenArray.length;
        } else {
          var timeWidth = showTime ? 320 : 0;
          renderCount = Math.floor((width - timeWidth) / 230);
          if (renderCount < fixCount) renderCount = fixCount;
        }

        if (renderCount !== renderedItemsCount.current) {
          renderedItemsCount.current = renderCount;
          forceUpdate({});
        }
      }
    }
  }, [contentRect, hiddenHeight, childrenArray.length, showTime, fixCount]);
  var onExpand = useCallback(function () {
    setExpanded(function (c) {
      return !c;
    });
  }, []);
  return /*#__PURE__*/React.createElement("div", {
    className: "bee-layout-container"
  }, /*#__PURE__*/React.createElement("div", {
    ref: contentWrapper,
    className: "bee-content-wrap",
    style: expanded ? {} : {
      height: "".concat(hiddenHeight, "px"),
      minWidth: "".concat(minWidth, "px")
    }
  }, childrenArray.slice(0, renderedItemsCount.current), /*#__PURE__*/React.createElement("div", {
    className: "bee-btn-wrap",
    style: expanded ? {} : {
      display: 'none'
    }
  }, !showHidden && /*#__PURE__*/React.createElement("div", {
    className: "bee-toggle-expand",
    onClick: onExpand
  }, /*#__PURE__*/React.createElement("a", {
    className: "bee-toggle-label"
  }, "\u70B9\u51FB\u6536\u8D77"), /*#__PURE__*/React.createElement("svg", {
    viewBox: "0 0 1024 1024",
    width: "1em",
    height: "1em"
  }, /*#__PURE__*/React.createElement("path", {
    d: "M512 483.84a28.16 28.16 0 0 0-20.48 8.32l-226.56 228.48a28.16 28.16 0 0 0 0 39.68 27.52 27.52 0 0 0 40.32 0L512 552.32l208 206.72a28.16 28.16 0 0 0 39.68 0 28.8 28.8 0 0 0 8.32-20.48 26.88 26.88 0 0 0-8.32-19.84L532.48 491.52A27.52 27.52 0 0 0 512 483.84z",
    fill: "#44507E"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M491.52 264.32L264.32 492.8a28.8 28.8 0 0 0 40.32 40.32L512 324.48l207.36 206.72a28.8 28.8 0 0 0 40.32 0A28.16 28.16 0 0 0 768 512a27.52 27.52 0 0 0-8.32-19.84L531.84 264.32a28.8 28.8 0 0 0-40.32 0z",
    fill: "#44507E"
  }))), /*#__PURE__*/React.createElement("div", {
    className: "bee-btn-action"
  }, btnChildren))), /*#__PURE__*/React.createElement("div", {
    className: "bee-btn-wrap",
    style: expanded ? {
      display: 'none'
    } : {}
  }, /*#__PURE__*/React.createElement("div", {
    className: "bee-toggle-expand",
    onClick: onExpand
  }, /*#__PURE__*/React.createElement("a", {
    className: "bee-toggle-label"
  }, "\u66F4\u591A\u9009\u9879"), /*#__PURE__*/React.createElement("svg", {
    viewBox: "0 0 1024 1024",
    width: "1em",
    height: "1em"
  }, /*#__PURE__*/React.createElement("path", {
    d: "M512 540.16a25.6 25.6 0 0 0 19.84-8.32l228.48-227.2a28.8 28.8 0 0 0-40.32-40.32L512 471.68 304.64 264.32a28.8 28.8 0 0 0-40.32 0 27.52 27.52 0 0 0-8.32 19.84 28.16 28.16 0 0 0 8.32 20.48l227.2 227.2a25.6 25.6 0 0 0 20.48 8.32z",
    fill: "#44507E"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M531.2 759.68l228.48-227.84a28.16 28.16 0 0 0 0-39.68 27.52 27.52 0 0 0-40.32 0L512 699.52 304.64 492.16a27.52 27.52 0 0 0-40.32 0 27.52 27.52 0 0 0 0 39.68l227.2 227.84a28.16 28.16 0 0 0 39.68 0z",
    fill: "#44507E"
  }))), /*#__PURE__*/React.createElement("div", {
    className: "bee-btn-action"
  }, btnChildren)));
};

export default BeeLayout;