yootd 0.2.10 → 0.2.11

package/dist/index.d.ts

@@ -171,6 +171,8 @@ export { UserDropdown } from './user-dropdown';
 export type { UserDropdownProps } from './user-dropdown/types/types';
 export { ConfigProvider } from './config-provider';
 export type { ConfigProviderProps } from './config-provider';
+export { WithSearchForm } from './with-search-form';
+export type { WithSearchFormProps } from './with-search-form/types/type';
 export { Zone } from './zones';
 export { GoBack } from './go-back';
 export type { GoBackProps } from './go-back';

package/dist/index.js

@@ -92,6 +92,7 @@ export { DatePicker } from "./date-picker";
 export { Teacher } from "./teacher";
 export { UserDropdown } from "./user-dropdown";
 export { ConfigProvider } from "./config-provider";
+export { WithSearchForm } from "./with-search-form";
 export { Zone } from "./zones";
 export { GoBack } from "./go-back";
 export { VideoPlayer } from "./video-player";

package/dist/with-search-form/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.scss';
+import { WithSearchFormProps } from './types/type';
+export declare const WithSearchForm: ({ children }: WithSearchFormProps) => React.JSX.Element;

package/dist/with-search-form/index.js

@@ -0,0 +1,135 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { DownOutlined } from '@ant-design/icons';
+import React, { useEffect, useRef, useState } from 'react';
+import { Button, Form, Space } from "./..";
+import { useBem } from "../hooks/useBem";
+import "./index.scss";
+export var WithSearchForm = function WithSearchForm(_ref) {
+  var children = _ref.children;
+  var mb = useBem('WithSearchForm');
+  // 外层dom实例
+  var formRef = useRef(null);
+  // 最后面的按钮组实例
+  var btnRef = useRef(null);
+  // 传进来的children  dom数组实例
+  var childRefs = useRef([]);
+  var _useState = useState(children.length),
+    _useState2 = _slicedToArray(_useState, 2),
+    visibleCount = _useState2[0],
+    setVisibleCount = _useState2[1];
+  // 展开收起（true：收起,false:展开）
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isExpanded = _useState4[0],
+    setIsExpanded = _useState4[1];
+  // 计算出应该显示的children数量
+  var _useState5 = useState(children.length),
+    _useState6 = _slicedToArray(_useState5, 2),
+    calculatedCount = _useState6[0],
+    setCalculatedCount = _useState6[1];
+  // 获取元素实际占用的总宽度（包括外边距）
+  var getElementTotalWidth = function getElementTotalWidth(element) {
+    var computedStyle = window.getComputedStyle(element);
+    var marginLeft = parseInt(computedStyle.marginLeft, 10) || 0;
+    var marginRight = parseInt(computedStyle.marginRight, 10) || 0;
+    return element.offsetWidth + marginLeft + marginRight;
+  };
+  // 计算每行可以放置的元素
+  var calculateVisibleItems = function calculateVisibleItems() {
+    if (!formRef.current || !btnRef.current) return;
+    // 获取容器宽度
+    var containerWidth = formRef.current.offsetWidth;
+    // 每行累计的宽度
+    var currentRowWidth = 0;
+    // 第几行
+    var currentRow = 1;
+    var itemCount = 0;
+    // 遍历所有子元素
+    for (var i = 0; i < (childRefs === null || childRefs === void 0 ? void 0 : childRefs.current.length); i++) {
+      var childRef = childRefs.current[i];
+      if (!childRef) continue;
+      // 获取子元素的宽度
+      var childWidth = getElementTotalWidth(childRef);
+      // 检查是否需要换行
+      // 第一行使用完整宽度，第二行需要减去按钮组宽度
+      var availableWidth = currentRow === 1 ? containerWidth : containerWidth - getElementTotalWidth(btnRef.current);
+      if (currentRowWidth + childWidth > availableWidth) {
+        currentRow++;
+        currentRowWidth = childWidth;
+
+        // 如果超过两行，就停止计算
+        if (currentRow > 2) {
+          break;
+        }
+      } else {
+        currentRowWidth += childWidth;
+      }
+      itemCount = i + 1;
+    }
+
+    // 保存计算出的数量
+    setCalculatedCount(itemCount);
+    // 根据展开状态设置可见数量
+    setVisibleCount(isExpanded ? children.length : itemCount);
+  };
+  useEffect(function () {
+    // 创建 ResizeObserver 实例
+    var resizeObserver = new ResizeObserver(function () {
+      calculateVisibleItems();
+    });
+    // 观察表单容器元素
+    if (formRef.current) {
+      resizeObserver.observe(formRef.current);
+    }
+    // 清理函数
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, [children, isExpanded]);
+
+  // 处理展开/收起的点击事件
+  var handleExpandClick = function handleExpandClick() {
+    setIsExpanded(!isExpanded);
+    setVisibleCount(!isExpanded ? children.length : calculatedCount);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: formRef,
+    className: "".concat(mb.b('container'))
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      visibility: 'hidden',
+      display: 'flex',
+      flexWrap: 'wrap',
+      width: '100%'
+    }
+  }, children === null || children === void 0 ? void 0 : children.map(function (child, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "measure-".concat(index),
+      ref: function ref(el) {
+        return childRefs.current[index] = el;
+      },
+      style: {
+        display: 'inline-block'
+      }
+    }, child);
+  })), children === null || children === void 0 ? void 0 : children.slice(0, visibleCount), /*#__PURE__*/React.createElement("div", {
+    ref: btnRef
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    className: "mb-4"
+  }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    htmlType: "submit"
+  }, "\u67E5\u8BE2"), /*#__PURE__*/React.createElement(Button, {
+    type: "default",
+    htmlType: "reset"
+  }, "\u91CD\u7F6E"), (children === null || children === void 0 ? void 0 : children.length) > calculatedCount ? /*#__PURE__*/React.createElement("span", {
+    className: "".concat(mb.e('expanded')),
+    onClick: handleExpandClick
+  }, isExpanded ? '收起' : '展开', ' ', /*#__PURE__*/React.createElement(DownOutlined, {
+    style: {
+      transform: isExpanded ? 'rotate(180deg)' : 'none',
+      transition: 'transform 0.3s'
+    }
+  })) : null))));
+};

package/dist/with-search-form/index.scss

@@ -0,0 +1,11 @@
+.yot-WithSearchForm {
+  &-container {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  &__expanded {
+    color: #4d8de2;
+    font-size: 14px;
+    cursor: pointer;
+  }
+}

package/dist/with-search-form/types/type.d.ts

@@ -0,0 +1,3 @@
+export interface WithSearchFormProps {
+  children: ReactNode[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yootd",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "基于 Antd 二次开发的组件库",
   "license": "MIT",
   "module": "dist/index.js",
@@ -45,6 +45,7 @@
     ]
   },
   "dependencies": {
+    "@ant-design/icons": "^6.0.0",
     "@babel/runtime": "^7.26.9"
   },
   "devDependencies": {