ebaoferc 0.1.9 → 0.1.10

package/dist/components/FlexRowCol/index.d.ts

@@ -1,7 +1,7 @@
 import { ColProps, RowProps } from 'antd';
 import { PropsWithChildren } from 'react';
 export declare const Gutter: [number, number];
-export default function (props: PropsWithChildren<{
+export default function FlexRowCol(props: PropsWithChildren<{
     colProps?: ColProps;
     width?: number;
     maxColCount?: number;

package/dist/components/FlexRowCol/index.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["colProps", "width", "maxColCount", "gutter", "collapsedLineCount", "collapsed", "lineCountChange"];
+var _excluded = ["colProps", "width", "maxColCount", "gutter", "collapsedLineCount", "collapsed", "lineCountChange", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -9,11 +9,12 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { useSize } from 'ahooks';
 import { Col, Row } from 'antd';
-import React, { Children, isValidElement, useEffect, useRef } from 'react';
+import React, { Children, isValidElement, useEffect, useMemo, useRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var Gutter = [24, 0];
-export default function (props) {
-  var _Children$map;
+
+// FlexRowCol 组件用于创建一个灵活的行列布局
+export default function FlexRowCol(props) {
   var _props$colProps = props.colProps,
     colProps = _props$colProps === void 0 ? {
       span: 12
@@ -26,61 +27,68 @@ export default function (props) {
     _props$collapsedLineC = props.collapsedLineCount,
     collapsedLineCount = _props$collapsedLineC === void 0 ? Number.POSITIVE_INFINITY : _props$collapsedLineC,
     _props$collapsed = props.collapsed,
-    collapsed = _props$collapsed === void 0 ? false : _props$collapsed,
+    collapsed = _props$collapsed === void 0 ? true : _props$collapsed,
     lineCountChange = props.lineCountChange,
+    children = props.children,
     rest = _objectWithoutProperties(props, _excluded);
+
+  // 使用 ref 和 useSize 钩子获取容器宽度
   var ref = useRef(null);
   var size = useSize(ref);
 
-  // 横向间隔
-  var gapX = (gutter === null || gutter === void 0 ? void 0 : gutter[0]) || 0;
+  // 使用 useMemo 计算布局，避免不必要的重复计算
+  var _useMemo = useMemo(function () {
+      var gapX = (gutter === null || gutter === void 0 ? void 0 : gutter[0]) || 0;
+      var itemWidth = width + gapX;
+      var containerWidth = (size === null || size === void 0 ? void 0 : size.width) || 0;
 
-  // 包含间隔的宽度
-  var itemWidth = width + gapX;
+      // 计算每行可容纳的列数
+      var preColCount = Math.floor(containerWidth / itemWidth);
+      var colCount = maxColCount && preColCount > maxColCount ? maxColCount : preColCount;
 
-  // 预估一行能放下的列数
-  var preColCount = Math.floor(((size === null || size === void 0 ? void 0 : size.width) || 0) / itemWidth);
-  // 实际一行放的列数
-  var colCount = maxColCount && preColCount > maxColCount ? maxColCount : preColCount;
+      // 计算每列的 span 值
+      var span = Math.floor(24 / colCount);
+      var _colProps = _objectSpread(_objectSpread({}, colProps), {}, {
+        span: span > 24 ? 24 : span
+      });
+      var count = 0;
+      // 处理子元素，计算 hidden 属性
+      var processedChildren = Children.toArray(children).filter(function (child) {
+        return /*#__PURE__*/isValidElement(child) && !child.props.hidden;
+      }).map(function (child, index) {
+        if (! /*#__PURE__*/isValidElement(child)) return child;
+        count++;
+        var childColProps = child.props.colProps || _colProps;
+        var hidden = collapsed && index >= colCount * collapsedLineCount;
+        return /*#__PURE__*/_jsx(Col, _objectSpread(_objectSpread({}, childColProps), {}, {
+          children: /*#__PURE__*/React.cloneElement(child, {
+            hidden: hidden
+          })
+        }), child.key || count);
+      });
 
-  // 展示的个数
-  var renderItemCount = ((_Children$map = Children.map(props.children, function (child) {
-    if ( /*#__PURE__*/isValidElement(child) && !child.props.hidden) {
-      return child;
-    }
-  })) === null || _Children$map === void 0 ? void 0 : _Children$map.length) || 0;
+      // 计算行数
+      var lineCount = Math.ceil(count / (colCount || 1));
+      return {
+        lineCount: lineCount,
+        processedChildren: processedChildren
+      };
+    }, [size, width, maxColCount, gutter, collapsedLineCount, collapsed, colProps, children]),
+    lineCount = _useMemo.lineCount,
+    processedChildren = _useMemo.processedChildren;
 
-  // 行数
-  var lineCount = colCount && Math.ceil(renderItemCount / colCount);
-
-  // 根据一行能放下的个数，计算每个子元素的宽度
-  var span = Math.floor(24 / colCount);
-  var count = 0;
-  var _colProps = _objectSpread(_objectSpread({}, colProps), {}, {
-    span: span > 24 ? 24 : span
-  });
+  // 当行数变化时，调用 lineCountChange 回调
   useEffect(function () {
-    lineCountChange === null || lineCountChange === void 0 || lineCountChange(lineCount);
-  }, [lineCount]);
+    if (size !== null && size !== void 0 && size.width) {
+      lineCountChange === null || lineCountChange === void 0 || lineCountChange(lineCount);
+    }
+  }, [lineCount, lineCountChange, size === null || size === void 0 ? void 0 : size.width]);
+  // console.log(lineCount);
+  // 渲染行列布局
   return /*#__PURE__*/_jsx(Row, _objectSpread(_objectSpread({
     gutter: gutter
   }, rest), {}, {
     ref: ref,
-    children: Children.map(props.children, function (child) {
-      if (! /*#__PURE__*/isValidElement(child)) {
-        return child;
-      }
-      if (child.props.hidden) {
-        return child;
-      }
-      var childColProps = child.props.colProps || _colProps;
-      count++;
-      var hidden = count > colCount * collapsedLineCount && collapsed;
-      return /*#__PURE__*/_jsx(Col, _objectSpread(_objectSpread({}, childColProps), {}, {
-        children: /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
-          hidden: hidden
-        }))
-      }));
-    })
+    children: size !== null && size !== void 0 && size.width ? processedChildren : null
   }));
 }

package/dist/components/QueryProCard/index.less

@@ -1,9 +1,9 @@
-.custom-filter-card-container-wrapper {
-  .ant-pro-card-body {
-    padding-bottom: 0 !important;
-  }
-
-  .ant-form-item {
-    margin-bottom: 16px;
-  }
-}
+.custom-filter-card-container-wrapper {
+  .ant-pro-card-body {
+    padding-bottom: 0 !important;
+  }
+
+  .ant-form-item {
+    margin-bottom: 16px;
+  }
+}

package/dist/components/StyledQueryFilter/index.js

@@ -17,7 +17,7 @@ import { DownOutlined } from '@ant-design/icons';
 import { ProForm } from '@ant-design/pro-components';
 import { Button, Form } from 'antd';
 import classNames from 'classnames';
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import FlexRowCol from "../FlexRowCol";
 import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -35,25 +35,28 @@ export default function StyledQueryFilter(props) {
   var _Form$useForm = Form.useForm(form),
     _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
     _form = _Form$useForm2[0];
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    collapsed = _React$useState2[0],
-    setCollapsed = _React$useState2[1];
-  var _React$useState3 = React.useState(1),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    lineCount = _React$useState4[0],
-    setLineCount = _React$useState4[1];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    collapsed = _useState2[0],
+    setCollapsed = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showExpandButton = _useState4[0],
+    setShowExpandButton = _useState4[1];
   if (labelWidth) {
     rest.labelCol = {
       flex: "0 0 ".concat(labelWidth, "px")
     };
   }
-  function reset(e) {
+  var reset = function reset(e) {
     _form.resetFields();
     if (onReset) {
-      onReset(e);
+      onReset(e); // 类型断言，因为 onReset 可能期望 FormEvent
     }
-  }
+  };
+  var handleLineCountChange = useCallback(function (count) {
+    setShowExpandButton(count > collapsedLineCount);
+  }, [collapsedLineCount]);
   return /*#__PURE__*/_jsxs("div", {
     className: "custom-styled-query-filter",
     children: [/*#__PURE__*/_jsx(ProForm, _objectSpread(_objectSpread({
@@ -66,14 +69,7 @@ export default function StyledQueryFilter(props) {
       children: /*#__PURE__*/_jsx(FlexRowCol, {
         collapsed: collapsed,
         collapsedLineCount: collapsedLineCount,
-        lineCountChange: function lineCountChange(lineCount) {
-          setLineCount(lineCount);
-          if (lineCount > collapsedLineCount) {
-            setCollapsed(true);
-          } else {
-            setCollapsed(false);
-          }
-        },
+        lineCountChange: handleLineCountChange,
         width: itemWith,
         children: children
       })
@@ -91,25 +87,13 @@ export default function StyledQueryFilter(props) {
           },
           children: "\u67E5\u8BE2"
         })]
-      }), lineCount > collapsedLineCount && /*#__PURE__*/_jsx("div", {
-        children: collapsed ? /*#__PURE__*/_jsxs(Button, {
-          type: "link",
-          onClick: function onClick() {
-            return setCollapsed(false);
-          },
-          children: ["\u5C55\u5F00", /*#__PURE__*/_jsx(DownOutlined, {
-            style: {
-              marginInlineStart: '0.5em',
-              transition: '0.3s all',
-              transform: "rotate(".concat(collapsed ? 0 : 0.5, "turn)")
-            }
-          })]
-        }) : /*#__PURE__*/_jsxs(Button, {
+      }), showExpandButton && /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsxs(Button, {
           type: "link",
           onClick: function onClick() {
-            return setCollapsed(true);
+            return setCollapsed(!collapsed);
           },
-          children: ["\u6536\u8D77", /*#__PURE__*/_jsx(DownOutlined, {
+          children: [collapsed ? '展开' : '收起', /*#__PURE__*/_jsx(DownOutlined, {
             style: {
               marginInlineStart: '0.5em',
               transition: '0.3s all',

package/dist/components/StyledQueryFilter/index.less

@@ -1,34 +1,34 @@
-.custom-styled-query-filter {
-  display: flex;
-  justify-content: space-between;
-  column-gap: 16px;
-
-  &__form {
-    flex: 1;
-  }
-
-  &__right {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: flex-end;
-
-    .ant-btn-link {
-      padding-right: 0;
-      margin-bottom: 28px;
-    }
-  }
-
-  &__submitter {
-    display: flex;
-    column-gap: 8px;
-  }
-
-  .ant-form-item-no-colon {
-    margin-right: 10px;
-
-    &::after {
-      display: none;
-    }
-  }
-}
+.custom-styled-query-filter {
+  display: flex;
+  justify-content: space-between;
+  column-gap: 16px;
+
+  &__form {
+    flex: 1;
+  }
+
+  &__right {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-end;
+
+    .ant-btn-link {
+      padding-right: 0;
+      margin-bottom: 28px;
+    }
+  }
+
+  &__submitter {
+    display: flex;
+    column-gap: 8px;
+  }
+
+  .ant-form-item-no-colon {
+    margin-right: 10px;
+
+    &::after {
+      display: none;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ebaoferc",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",