yootd 0.2.10 → 0.2.12

package/dist/aside/components/SortableItem.js

@@ -30,7 +30,11 @@ var SortableItem = function SortableItem(_ref) {
     _onClick = _ref.onClick,
     onEdit = _ref.onEdit,
     onDel = _ref.onDel,
-    onSwitch = _ref.onSwitch;
+    onSwitch = _ref.onSwitch,
+    subId = _ref.subId,
+    isSubNode = _ref.isSubNode,
+    subNode = _ref.subNode,
+    onSubClick = _ref.onSubClick;
   var _useSortable = useSortable({
       id: id
     }),
@@ -49,12 +53,13 @@ var SortableItem = function SortableItem(_ref) {
     zIndex: 9999
   } : {});
   var mb = useBem('SortableItem');
-  var top = mb.b('content').b('top');
+  var top = isSubNode === true ? mb.b('content-no-bg').b('top') : mb.b('content').b('top');
+  var subTop = mb.b('sub-content').b('top');
   return /*#__PURE__*/React.createElement("div", {
     style: style,
     className: "".concat(mb)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(mb.b('content'), " ").concat(id === activeKey ? "".concat(mb.e('content-active')) : '', " ").concat(mb.b(statusColor[status !== null && status !== void 0 ? status : ''])),
+    className: "".concat(isSubNode === true ? "".concat(mb.b('content-no-bg')) : "".concat(mb.b('content')), " ").concat(id === activeKey && isSubNode === false ? "".concat(mb.e('content-active')) : '', " ").concat(mb.b(statusColor[status !== null && status !== void 0 ? status : ''])),
     key: id,
     onClick: function onClick() {
       _onClick === null || _onClick === void 0 || _onClick(id, {
@@ -80,7 +85,7 @@ var SortableItem = function SortableItem(_ref) {
   })), /*#__PURE__*/React.createElement("div", {
     className: "".concat(top.b('top-left').b('top-title-wrap'))
   }, /*#__PURE__*/React.createElement("span", {
-    className: "".concat(top.b('top-left').b('top-title-wrap').e('top-title')),
+    className: "".concat(top.b('top-left').b('top-title-wrap').e('top-title'), " ").concat(id === activeKey ? "".concat(top.b('top-left').b('top-title-wrap').e('top-title-active')) : ''),
     style: {
       marginRight: editBtnIcon || delBtnIcon ? '12px' : '0',
       marginLeft: dragBtnIcon ? '6px' : '0'
@@ -150,6 +155,35 @@ var SortableItem = function SortableItem(_ref) {
     }
   }, /*#__PURE__*/React.createElement("span", {
     className: "".concat(mb.b('content').b('bottom').e('extra'))
-  }, extra))));
+  }, extra))), subNode === null || subNode === void 0 ? void 0 : subNode.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "".concat(mb.b('sub-content'), " ").concat(id === activeKey && subId === item.key ? "".concat(mb.e('sub-content-active')) : '', " ").concat(mb.b(statusColor[status !== null && status !== void 0 ? status : ''])),
+      onClick: function onClick() {
+        console.log(id, item.key, _objectSpread({}, item));
+        onSubClick === null || onSubClick === void 0 || onSubClick(id, item.key, _objectSpread({}, item));
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(subTop)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(subTop.b('top-left'))
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(subTop.b('top-left').b('top-title-wrap'))
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(subTop.b('top-left').b('top-title-wrap').e('top-title'), " ").concat(subId === item.key ? "".concat(subTop.b('top-left').b('top-title-wrap').e('top-title-active')) : ''),
+      style: {
+        marginRight: editBtnIcon || delBtnIcon ? '12px' : '0',
+        marginLeft: dragBtnIcon ? '6px' : '0'
+      }
+    }, item.title)))), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(mb.b('content').b('bottom')),
+      style: {
+        marginLeft: dragBtnIcon ? '22px' : '0'
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(mb.b('content').b('bottom').e('extra'))
+    }, item.extra)));
+  }));
 };
-export default SortableItem;
+export default SortableItem;
+/*#__PURE__*/React.createElement("div", null);

package/dist/aside/components/SortableItem.scss

@@ -66,6 +66,76 @@
       }
     }
   }
+  &-content-no-bg {
+    position: relative;
+    padding: 12px 16px;
+    box-sizing: border-box;
+    cursor: pointer;
+    background-color: #fff;
+    &-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: start;
+      &-top-left {
+        display: flex;
+        align-items: start;
+        &-top-drag-btn-icon {
+          cursor: move;
+          &__drag-btn-icon-svg {
+            display: inline-block;
+            vertical-align: middle;
+          }
+        }
+        &-top-title-wrap {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          &__top-title {
+            font-size: 16px;
+            font-weight: 400;
+            line-height: 1.5em;
+            overflow: hidden;
+            display: -webkit-box; //将元素设为盒子伸缩模型显示
+            -webkit-box-orient: vertical; //伸缩方向设为垂直方向
+            -webkit-line-clamp: 2; //超出2行隐藏，并显示省略号
+            line-clamp: 2;
+          }
+          &__top-title-active{
+            font-weight: bold;
+          }
+        }
+      }
+      &-top-middle {
+        display: flex;
+        align-items: center;
+        &-top-edit-btn-icon {
+          cursor: pointer;
+          &__edit-btn-icon-svg {
+            display: inline-block;
+            vertical-align: middle;
+          }
+        }
+        &-top-del-btn-icon {
+          cursor: pointer;
+          margin-left: 12px;
+          &__del-btn-icon-svg {
+            display: inline-block;
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+    &-bottom {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      &__extra {
+        font-size: 12px;
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.45);
+      }
+    }
+  }
   &-content:hover {
     background-color: var(--ant-color-primary-border);
     transition: all 0.05s ease;
@@ -108,4 +178,98 @@
     border: 4px solid var(--ant-color-error);
     z-index: 999;
   }
+  &-sub-content {
+    position: relative;
+    padding: 12px 16px 12px 32px;
+    box-sizing: border-box;
+    cursor: pointer;
+    background-color: #fff;
+    border-bottom:1 px solid ;
+    &-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: start;
+      &-top-left {
+        display: flex;
+        align-items: start;
+        &-top-drag-btn-icon {
+          cursor: move;
+          &__drag-btn-icon-svg {
+            display: inline-block;
+            vertical-align: middle;
+          }
+        }
+        &-top-title-wrap {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          &__top-title {
+            font-size: 16px;
+            font-weight: 400;
+            line-height: 1.5em;
+            overflow: hidden;
+            display: -webkit-box; //将元素设为盒子伸缩模型显示
+            -webkit-box-orient: vertical; //伸缩方向设为垂直方向
+            -webkit-line-clamp: 2; //超出2行隐藏，并显示省略号
+            line-clamp: 2;
+          }
+        }
+      }
+      &-top-middle {
+        display: flex;
+        align-items: center;
+        &-top-edit-btn-icon {
+          cursor: pointer;
+          &__edit-btn-icon-svg {
+            display: inline-block;
+            vertical-align: middle;
+          }
+        }
+        &-top-del-btn-icon {
+          cursor: pointer;
+          margin-left: 12px;
+          &__del-btn-icon-svg {
+            display: inline-block;
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+    &-bottom {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      &__extra {
+        font-size: 12px;
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.45);
+      }
+    }
+  }
+  &-sub-content:hover {
+    background-color: var(--ant-color-primary-border);
+    transition: all 0.05s ease;
+  }
+  &-sub-content::before {
+    content: '';
+    position: absolute;
+    bottom: -0.5px;
+    left: 16px;
+    right: 16px;
+    height: 1px;
+    background-color: #e5e5e5;
+    z-index: 100;
+  }
+  &__sub-content-active {
+    background-color: var(--ant-color-primary-border);
+  }
+  &__sub-content-active::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background-color: var(--ant-color-primary);
+  }
 }

package/dist/aside/index.js

@@ -38,7 +38,10 @@ export var Aside = function Aside(_ref) {
     onDragEnd = _ref.onDragEnd,
     onScrollBottom = _ref.onScrollBottom,
     _ref$bottomThreshold = _ref.bottomThreshold,
-    bottomThreshold = _ref$bottomThreshold === void 0 ? 50 : _ref$bottomThreshold;
+    bottomThreshold = _ref$bottomThreshold === void 0 ? 50 : _ref$bottomThreshold,
+    _ref$isSubNode = _ref.isSubNode,
+    isSubNode = _ref$isSubNode === void 0 ? false : _ref$isSubNode,
+    onSubClick = _ref.onSubClick;
   var mb = useBem('aside');
   var asideRef = useRef(null);
   // 当前选择的key
@@ -46,11 +49,16 @@ export var Aside = function Aside(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     key = _useState2[0],
     setKey = _useState2[1];
-  // 缓存传入的数据
-  var _useState3 = useState([]),
+  // 当前选择的key
+  var _useState3 = useState(),
     _useState4 = _slicedToArray(_useState3, 2),
-    dataValue = _useState4[0],
-    setDataValue = _useState4[1];
+    subKey = _useState4[0],
+    setSubKey = _useState4[1];
+  // 缓存传入的数据
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dataValue = _useState6[0],
+    setDataValue = _useState6[1];
   var sensors = useSensors(useSensor(PointerSensor, {
     activationConstraint: {
       delay: 50,
@@ -62,10 +70,22 @@ export var Aside = function Aside(_ref) {
   // 切换选中项
   var handleClick = function handleClick(key, e) {
     if (key != null) {
+      var _e$children$0$key, _e$children;
       setKey(key);
+      setSubKey((_e$children$0$key = e === null || e === void 0 || (_e$children = e.children) === null || _e$children === void 0 || (_e$children = _e$children[0]) === null || _e$children === void 0 ? void 0 : _e$children.key) !== null && _e$children$0$key !== void 0 ? _e$children$0$key : '');
       onClick === null || onClick === void 0 || onClick(key, e);
     }
   };
+  // 切换选中项
+  var handleSubClick = function handleSubClick(key, subKey, e) {
+    if (key != null) {
+      setKey(key);
+      if (subKey != null) {
+        setSubKey(subKey);
+        onSubClick === null || onSubClick === void 0 || onSubClick(key, subKey, e);
+      }
+    }
+  };
   // 添加
   var handleAdd = function handleAdd() {
     onAdd === null || onAdd === void 0 || onAdd();
@@ -188,7 +208,7 @@ export var Aside = function Aside(_ref) {
     }),
     strategy: verticalListSortingStrategy
   }, dataValue === null || dataValue === void 0 ? void 0 : dataValue.map(function (item) {
-    var _dataValue$;
+    var _dataValue$, _item$children;
     return /*#__PURE__*/React.createElement(SortableItem, {
       key: item.key,
       activeKey: key !== null && key !== void 0 ? key : dataValue === null || dataValue === void 0 || (_dataValue$ = dataValue[0]) === null || _dataValue$ === void 0 ? void 0 : _dataValue$.key,
@@ -204,8 +224,12 @@ export var Aside = function Aside(_ref) {
       onEdit: handleEdit,
       onDel: handleDel,
       onSwitch: handleSwitch,
+      onSubClick: handleSubClick,
       data: item.data,
-      status: item.status
+      status: item.status,
+      subId: subKey !== null && subKey !== void 0 ? subKey : (_item$children = item.children) === null || _item$children === void 0 || (_item$children = _item$children[0]) === null || _item$children === void 0 ? void 0 : _item$children.key,
+      isSubNode: isSubNode,
+      subNode: item.children
     });
   })))));
 };

package/dist/aside/types/types.d.ts

@@ -5,6 +5,14 @@ type IdataItem = {
   checked?: boolean;
   status?: string;
   data?: any;
+  children?: Array<{
+    key: string;
+    title: string;
+    extra?: string;
+    checked?: boolean;
+    status?: string;
+    data?: any;
+  }>;
 };
 export type AsideProps = {
   width?: number;
@@ -31,6 +39,8 @@ export type AsideProps = {
   onDragEnd?: (data: IdataItem[]) => void;
   onScrollBottom?: () => void;
   bottomThreshold?: number;
+  isSubNode: boolean;
+  onSubClick?: (key: string, subKey: string, e: IdataItem) => void;
 };
 export type AsideItemProps = {
   activeKey: string;
@@ -44,8 +54,19 @@ export type AsideItemProps = {
   extra?: string;
   status?: string;
   data?: any;
-  onClick?: (key: string, e: IdataItem) => void;
+  onClick?: (key: string | undefined, e: IdataItem) => void;
   onEdit?: (key: string, e: IdataItem) => void;
   onDel?: (key: string, e: IdataItem) => void;
   onSwitch?: (key: string, e: boolean) => void;
+  subId?: string;
+  isSubNode?: boolean;
+  subNode?: Array<{
+    key: string;
+    title: string;
+    extra?: string;
+    checked?: boolean;
+    status?: string;
+    data?: any;
+  }>;
+  onSubClick?: (key, subKey: string | undefined, e: IdataItem) => void;
 };

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.12",
   "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": {