yootd 0.2.11 → 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/with-search-form/types/type.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yootd",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "基于 Antd 二次开发的组件库",
   "license": "MIT",
   "module": "dist/index.js",