@pisell/materials 2.2.6 → 2.2.8

package/es/components/tabs/index.js

@@ -18,12 +18,12 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 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; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-import React, { Component } from "react";
-import { Badge, Tabs as OriginalTabs } from "antd";
+import React, { Component } from 'react';
+import { Badge, Tabs as OriginalTabs } from 'antd';
 import { warning } from "../../utils/warning";
-import classNames from "classnames";
+import classNames from 'classnames';
 import "./index.less";
-var prefix = "pisell-lowcode-";
+var prefix = 'pisell-lowcode-';
 var Tabs = /*#__PURE__*/function (_Component) {
   _inherits(Tabs, _Component);
   var _super = _createSuper(Tabs);
@@ -53,19 +53,20 @@ var Tabs = /*#__PURE__*/function (_Component) {
       return _this.state.activeKey;
     });
     _defineProperty(_assertThisInitialized(_this), "renderIconLabelTabBar", function (props, DefaultTabBar) {
+      var _this$props2;
       var _this$props = _this.props,
         items = _this$props.items,
         sidebarWidth = _this$props.sidebarWidth;
       var wrapStyle = {
         gap: props.tabBarGutter
       };
-      if (["left", "right"].includes(props.tabPosition)) {
+      if (['left', 'right'].includes(props.tabPosition)) {
         wrapStyle = _objectSpread(_objectSpread({}, wrapStyle), {}, {
           width: sidebarWidth || 130
         });
       }
       return /*#__PURE__*/React.createElement("div", {
-        className: classNames("pisell-lowcode-tabs-nav", "".concat(prefix, "tab-bar-wrap"), "".concat(prefix, "tab-bar-wrap-").concat(props.tabPosition)),
+        className: classNames('pisell-lowcode-tabs-nav', "".concat(prefix, "tab-bar-wrap"), "".concat(prefix, "tab-bar-wrap-").concat(props.tabPosition), (_this$props2 = _this.props) === null || _this$props2 === void 0 ? void 0 : _this$props2.className),
         style: wrapStyle
       }, _this.filterHiddenTabs(items).map(function (item) {
         return /*#__PURE__*/React.createElement("div", {
@@ -104,7 +105,7 @@ var Tabs = /*#__PURE__*/function (_Component) {
       // props.items 存在，只认 props.items
       // 兼容代码：props.children 反推 props.items
       if (!props.items && Array.isArray(children) && children.length > 0) {
-        warning("Tabs.TabPane is deprecated. Please use `items` directly.");
+        warning('Tabs.TabPane is deprecated. Please use `items` directly.');
         items = children.map(function (node) {
           if ( /*#__PURE__*/React.isValidElement(node)) {
             var key = node.key,
@@ -123,10 +124,10 @@ var Tabs = /*#__PURE__*/function (_Component) {
         }).filter(Boolean);
       }
       items = this.filterHiddenTabs(items);
-      if (type === "icon-label") {
+      if (type === 'icon-label') {
         otherProps = {
           renderTabBar: this.renderIconLabelTabBar,
-          type: "line"
+          type: 'line'
         };
       }
       return /*#__PURE__*/React.createElement(OriginalTabs, _extends({}, props, otherProps, {

package/es/index.d.ts

@@ -1,80 +1,81 @@
-export { Affix } from "antd";
-export { Anchor } from "antd";
-export { Alert } from "antd";
-export { Avatar } from "antd";
-export { Badge } from "antd";
-export { Breadcrumb } from "antd";
-export { Card } from "antd";
-export { Collapse } from "antd";
-export { Carousel } from "antd";
-export { Col } from "antd";
-export { Descriptions } from "antd";
-export { Divider } from "antd";
-export { Empty } from "antd";
-export { Grid } from "antd";
-export { Image } from "antd";
-export { InputNumber } from "antd";
-export { message } from "antd";
-export { Menu } from "antd";
-export { Mentions } from "antd";
-export { Statistic } from "antd";
-export { notification } from "antd";
-export { Pagination } from "antd";
-export { Popconfirm } from "antd";
-export { Popover } from "antd";
-export { Progress } from "antd";
-export { Rate } from "antd";
-export { Result } from "antd";
-export { Row } from "antd";
-export { Space } from "antd";
-export { Spin } from "antd";
-export { Steps } from "antd";
-export { Switch } from "antd";
-export { Transfer } from "antd";
-export { Tree } from "antd";
-export { Tag } from "antd";
-export { Timeline } from "antd";
-export { Tooltip } from "antd";
-export { version } from "antd";
-export { default as Typography } from "./components/typography";
-export { default as Skeleton } from "./components/skeleton";
-export { default as Checkbox } from "./components/checkbox";
-export { default as Button } from "./components/button";
-export { default as Radio } from "./components/radio";
-export { default as Upload } from "./components/upload";
-export { default as Icon } from "./components/icon";
-export { default as Form } from "./components/form";
-export { default as Dropdown } from "./components/dropdown";
-export { default as Calendar } from "./components/calendar";
-export { default as ConfigProvider } from "./components/config-provider";
-export { default as DatePicker } from "./components/date-picker";
-export { default as Tabs } from "./components/tabs";
-export { default as TimePicker } from "./components/time-picker";
-export { default as Slider } from "./components/slider";
-export { default as Table } from "./components/table";
-export { default as Modal } from "./components/modal";
-export { default as Drawer } from "./components/drawer";
-export { default as TreeSelect } from "./components/tree-select";
-export { default as Input } from "./components/input";
-export { default as Select } from "./components/select";
-export { default as Cascader } from "./components/cascader";
-export { default as AutoComplete } from "./components/auto-complete";
-export { default as Div } from "./components/div";
-export { default as Page } from "./components/page";
-export { default as Component } from "./components/component";
-export { default as Filter } from "./components/filter";
-export { default as Translation } from "./components/translation";
-export { default as SortableList } from "./components/sortableList";
-export { default as RecordView } from "./components/record-view";
-export { default as QRCode } from "./components/qrcode";
-export { default as ClassicLayout } from "./components/classicLayout";
-export { default as List } from "./components/list";
-export { default as Sort } from "./components/sort";
-export { default as InputNumberRange } from "./components/input-number-range";
-export { default as LowCodePage } from "./components/lowCodePage";
-export { default as Segmented } from "./components/segmented";
-export { default as VirtualKeyboard } from "./components/virtual-keyboard";
-export { default as VirtualKeyboardTime } from "./components/virtual-keyboard/Time";
-export { default as SelectTime } from "./components/select-time";
-export { default as AutoCompleteNumber } from "./components/auto-complete-number";
-export { default as BatchEditor } from "./components/batch-editor";
+export { Affix } from 'antd';
+export { Anchor } from 'antd';
+export { Alert } from 'antd';
+export { Avatar } from 'antd';
+export { Badge } from 'antd';
+export { Breadcrumb } from 'antd';
+export { Card } from 'antd';
+export { Collapse } from 'antd';
+export { Carousel } from 'antd';
+export { Col } from 'antd';
+export { Descriptions } from 'antd';
+export { Divider } from 'antd';
+export { Empty } from 'antd';
+export { Grid } from 'antd';
+export { Image } from 'antd';
+export { InputNumber } from 'antd';
+export { message } from 'antd';
+export { Menu } from 'antd';
+export { Mentions } from 'antd';
+export { Statistic } from 'antd';
+export { notification } from 'antd';
+export { Pagination } from 'antd';
+export { Popconfirm } from 'antd';
+export { Popover } from 'antd';
+export { Progress } from 'antd';
+export { Rate } from 'antd';
+export { Result } from 'antd';
+export { Row } from 'antd';
+export { Space } from 'antd';
+export { Spin } from 'antd';
+export { Steps } from 'antd';
+export { Switch } from 'antd';
+export { Transfer } from 'antd';
+export { Tree } from 'antd';
+export { Tag } from 'antd';
+export { Timeline } from 'antd';
+export { Tooltip } from 'antd';
+export { version } from 'antd';
+export { default as Typography } from './components/typography';
+export { default as Skeleton } from './components/skeleton';
+export { default as Checkbox } from './components/checkbox';
+export { default as Button } from './components/button';
+export { default as Radio } from './components/radio';
+export { default as Upload } from './components/upload';
+export { default as Icon } from './components/icon';
+export { default as Form } from './components/form';
+export { default as Dropdown } from './components/dropdown';
+export { default as Calendar } from './components/calendar';
+export { default as ConfigProvider } from './components/config-provider';
+export { default as DatePicker } from './components/date-picker';
+export { default as Tabs } from './components/tabs';
+export { default as TimePicker } from './components/time-picker';
+export { default as Slider } from './components/slider';
+export { default as Table } from './components/table';
+export { default as Modal } from './components/modal';
+export { default as Drawer } from './components/drawer';
+export { default as TreeSelect } from './components/tree-select';
+export { default as Input } from './components/input';
+export { default as Select } from './components/select';
+export { default as Cascader } from './components/cascader';
+export { default as AutoComplete } from './components/auto-complete';
+export { default as Div } from './components/div';
+export { default as Page } from './components/page';
+export { default as Component } from './components/component';
+export { default as Filter } from './components/filter';
+export { default as Translation } from './components/translation';
+export { default as SortableList } from './components/sortableList';
+export { default as RecordView } from './components/record-view';
+export { default as QRCode } from './components/qrcode';
+export { default as ClassicLayout } from './components/classicLayout';
+export { default as List } from './components/list';
+export { default as Sort } from './components/sort';
+export { default as InputNumberRange } from './components/input-number-range';
+export { default as LowCodePage } from './components/lowCodePage';
+export { default as Segmented } from './components/segmented';
+export { default as VirtualKeyboard } from './components/virtual-keyboard';
+export { default as VirtualKeyboardTime } from './components/virtual-keyboard/Time';
+export { default as SelectTime } from './components/select-time';
+export { default as AutoCompleteNumber } from './components/auto-complete-number';
+export { default as BatchEditor } from './components/batch-editor';
+export { default as DragSortTree } from './components/drag-sort-tree';

package/es/index.js

@@ -1,61 +1,61 @@
-export { Affix } from "antd";
-export { Anchor } from "antd";
-export { Alert } from "antd";
-export { Avatar } from "antd";
-export { Badge } from "antd";
-export { Breadcrumb } from "antd";
-export { Card } from "antd";
-export { Collapse } from "antd";
-export { Carousel } from "antd";
+export { Affix } from 'antd';
+export { Anchor } from 'antd';
+export { Alert } from 'antd';
+export { Avatar } from 'antd';
+export { Badge } from 'antd';
+export { Breadcrumb } from 'antd';
+export { Card } from 'antd';
+export { Collapse } from 'antd';
+export { Carousel } from 'antd';
 
 // export { Cascader } from 'antd';
 
-export { Col } from "antd";
-export { Descriptions } from "antd";
-export { Divider } from "antd";
+export { Col } from 'antd';
+export { Descriptions } from 'antd';
+export { Divider } from 'antd';
 
 // export { Drawer } from 'antd';
 
-export { Empty } from "antd";
-export { Grid } from "antd";
+export { Empty } from 'antd';
+export { Grid } from 'antd';
 
 // export { Input } from 'antd';
 
-export { Image } from "antd";
-export { InputNumber } from "antd";
-export { message } from "antd";
-export { Menu } from "antd";
-export { Mentions } from "antd";
-export { Statistic } from "antd";
-export { notification } from "antd";
+export { Image } from 'antd';
+export { InputNumber } from 'antd';
+export { message } from 'antd';
+export { Menu } from 'antd';
+export { Mentions } from 'antd';
+export { Statistic } from 'antd';
+export { notification } from 'antd';
 
 // export { PageHeader } from 'antd';
 
-export { Pagination } from "antd";
-export { Popconfirm } from "antd";
-export { Popover } from "antd";
-export { Progress } from "antd";
-export { Rate } from "antd";
-export { Result } from "antd";
-export { Row } from "antd";
+export { Pagination } from 'antd';
+export { Popconfirm } from 'antd';
+export { Popover } from 'antd';
+export { Progress } from 'antd';
+export { Rate } from 'antd';
+export { Result } from 'antd';
+export { Row } from 'antd';
 
 // export { Skeleton } from 'antd';
 
-export { Space } from "antd";
-export { Spin } from "antd";
-export { Steps } from "antd";
-export { Switch } from "antd";
-export { Transfer } from "antd";
-export { Tree } from "antd";
+export { Space } from 'antd';
+export { Spin } from 'antd';
+export { Steps } from 'antd';
+export { Switch } from 'antd';
+export { Transfer } from 'antd';
+export { Tree } from 'antd';
 
 // export { TreeSelect } from 'antd';
 
 // export { Tabs } from 'antd';
 
-export { Tag } from "antd";
-export { Timeline } from "antd";
-export { Tooltip } from "antd";
-export { version } from "antd";
+export { Tag } from 'antd';
+export { Timeline } from 'antd';
+export { Tooltip } from 'antd';
+export { version } from 'antd';
 export { default as Typography } from "./components/typography";
 export { default as Skeleton } from "./components/skeleton";
 export { default as Checkbox } from "./components/checkbox";
@@ -97,4 +97,5 @@ export { default as VirtualKeyboard } from "./components/virtual-keyboard";
 export { default as VirtualKeyboardTime } from "./components/virtual-keyboard/Time";
 export { default as SelectTime } from "./components/select-time";
 export { default as AutoCompleteNumber } from "./components/auto-complete-number";
-export { default as BatchEditor } from "./components/batch-editor";
+export { default as BatchEditor } from "./components/batch-editor";
+export { default as DragSortTree } from "./components/drag-sort-tree";

package/lib/components/drag-sort-tree/TreeItem/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import './index.less';
+import { ValueProps, SortType } from '../types';
+declare type TreeItemProps = {
+    id: string | number;
+    key: string | number;
+    item: ValueProps | any;
+    depth: number;
+    lists: any[];
+    activeId?: string | null;
+    childrenProps?: SortType;
+    sensors?: any;
+    onChange?: (value: any[]) => void;
+};
+declare const TreeItem: (props: TreeItemProps) => React.JSX.Element;
+export default TreeItem;

package/lib/components/drag-sort-tree/TreeItem/index.js

@@ -0,0 +1,183 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/drag-sort-tree/TreeItem/index.tsx
+var TreeItem_exports = {};
+__export(TreeItem_exports, {
+  default: () => TreeItem_default
+});
+module.exports = __toCommonJS(TreeItem_exports);
+var import_react = __toESM(require("react"));
+var import_sortable = require("@dnd-kit/sortable");
+var import_core = require("@dnd-kit/core");
+var import_utilities = require("@dnd-kit/utilities");
+var import_icons = require("@ant-design/icons");
+var import_sortable2 = require("@dnd-kit/sortable");
+var import_modifiers = require("@dnd-kit/modifiers");
+var import_classnames = __toESM(require("classnames"));
+var import_index = require("./index.less");
+var prefix = "pisell-lowcode";
+var TreeItem = (props) => {
+  const { id, item, depth, activeId, sensors, childrenProps, lists, onChange } = props;
+  const [expandedKeys, setExpandedKeys] = (0, import_react.useState)([]);
+  const { attributes, listeners, setNodeRef, transform, transition } = (0, import_sortable.useSortable)({ id });
+  (0, import_react.useEffect)(() => {
+    if (activeId) {
+      setExpandedKeys([]);
+    }
+  }, [activeId]);
+  const style = {
+    transform: import_utilities.CSS.Transform.toString(transform && { ...transform, scaleY: 1 }),
+    transition
+  };
+  const rowKey = (0, import_react.useMemo)(() => {
+    return (childrenProps == null ? void 0 : childrenProps.rowKey) || "id";
+  }, [childrenProps == null ? void 0 : childrenProps.rowKey]);
+  const handleDragEnd = (event) => {
+    var _a, _b, _c;
+    const { active, over } = event;
+    if (!over || !active || !lists.length)
+      return;
+    try {
+      let [activeParentId, activeId2] = (_a = active == null ? void 0 : active.id) == null ? void 0 : _a.split("-");
+      let [overParentId, overId] = (_b = over == null ? void 0 : over.id) == null ? void 0 : _b.split("-");
+      const parentIndex = lists.findIndex(
+        (item2) => item2[rowKey] == activeParentId
+      );
+      if (activeId2 !== overId && activeParentId === overParentId && parentIndex !== -1) {
+        const activeIndex = item.children.findIndex(
+          (item2) => item2[rowKey] == activeId2
+        );
+        const overIndex = item.children.findIndex(
+          (item2) => item2[rowKey] == overId
+        );
+        if (activeIndex !== -1 && overIndex !== -1) {
+          const newChildren = (0, import_sortable2.arrayMove)(
+            (_c = lists[parentIndex]) == null ? void 0 : _c.children,
+            activeIndex,
+            overIndex
+          );
+          const _lists = [
+            ...lists.slice(0, parentIndex),
+            { ...lists == null ? void 0 : lists[parentIndex], children: newChildren },
+            ...lists.slice(parentIndex + 1)
+          ];
+          onChange && onChange([..._lists]);
+        }
+      }
+    } catch (error) {
+    }
+  };
+  const handleShow = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    const index = lists == null ? void 0 : lists.findIndex(
+      (node) => node[rowKey] === item[rowKey]
+    );
+    if (index !== -1) {
+      lists[index].show = !lists[index].show;
+      onChange == null ? void 0 : onChange([...lists]);
+    }
+  };
+  const onSelect = () => {
+    var _a;
+    if (depth === 0 && ((_a = item.children) == null ? void 0 : _a.length)) {
+      const key = item[rowKey];
+      if (expandedKeys.includes(key)) {
+        const _ids = expandedKeys.filter((id2) => id2 !== key);
+        setExpandedKeys(_ids);
+      } else {
+        setExpandedKeys([...expandedKeys, key]);
+      }
+    }
+  };
+  const renderChildren = (0, import_react.useMemo)(() => {
+    var _a;
+    const showChildren = ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) > 0 && (expandedKeys == null ? void 0 : expandedKeys.includes(item[rowKey]));
+    const _isAvailableTab = (childrenProps == null ? void 0 : childrenProps.tabKey) === "available";
+    return showChildren && /* @__PURE__ */ import_react.default.createElement(
+      import_sortable2.SortableContext,
+      {
+        items: item.children.map(
+          (child) => `${item[rowKey]}-${child[rowKey]}`
+        ),
+        strategy: import_sortable2.verticalListSortingStrategy
+      },
+      item.children.map(
+        (child) => _isAvailableTab && (child == null ? void 0 : child.is_available) || !_isAvailableTab ? /* @__PURE__ */ import_react.default.createElement(
+          TreeItem,
+          {
+            id: `${item[rowKey]}-${child[rowKey]}`,
+            key: `${item[rowKey]}-${child[rowKey]}`,
+            item: child,
+            lists,
+            depth: depth + 1,
+            childrenProps
+          }
+        ) : null
+      )
+    );
+  }, [item.children, expandedKeys, rowKey, lists, childrenProps == null ? void 0 : childrenProps.tabKey]);
+  const rightIcon = (0, import_react.useMemo)(() => {
+    const hiddenRightIcon = childrenProps == null ? void 0 : childrenProps.hiddenRightIcon;
+    return !hiddenRightIcon ? /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)(`${prefix}-drag-sort-tree-icon`),
+        onClick: handleShow
+      },
+      item.show ? /* @__PURE__ */ import_react.default.createElement(import_icons.EyeOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.EyeInvisibleOutlined, null)
+    ) : null;
+  }, [childrenProps == null ? void 0 : childrenProps.hiddenRightIcon, item == null ? void 0 : item.show, lists]);
+  const warningIcon = (0, import_react.useMemo)(() => {
+    const hiddenWarningIcon = childrenProps == null ? void 0 : childrenProps.hiddenWarningIcon;
+    return !hiddenWarningIcon && !(item == null ? void 0 : item.is_available) ? /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${prefix}-drag-sort-tree-item-icon`) }, /* @__PURE__ */ import_react.default.createElement(import_icons.WarningOutlined, { style: { color: "red" } })) : null;
+  }, [childrenProps == null ? void 0 : childrenProps.hiddenWarningIcon, item == null ? void 0 : item.is_available]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_core.DndContext,
+    {
+      sensors,
+      modifiers: [import_modifiers.restrictToVerticalAxis, import_modifiers.restrictToParentElement],
+      onDragEnd: handleDragEnd
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { ref: setNodeRef, style, ...attributes, ...listeners }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: { paddingLeft: !depth ? "8px" : `${depth * 20}px` },
+        className: (0, import_classnames.default)(
+          `${prefix}-drag-sort-tree`,
+          childrenProps == null ? void 0 : childrenProps.className
+        ),
+        onClick: onSelect
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${prefix}-drag-sort-tree-item`) }, !(childrenProps == null ? void 0 : childrenProps.hiddenDraggableIcon) ? /* @__PURE__ */ import_react.default.createElement(import_icons.HolderOutlined, null) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-drag-sort-tree-title` }, (childrenProps == null ? void 0 : childrenProps.titleRender) || (item == null ? void 0 : item.title))),
+      !depth ? rightIcon : warningIcon
+    ), renderChildren)
+  );
+};
+var TreeItem_default = TreeItem;

package/lib/components/drag-sort-tree/TreeItem/index.less

@@ -0,0 +1,41 @@
+@pisell-prefix: pisell-lowcode;
+
+.@{pisell-prefix} {
+  &-drag-sort-tree{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 16px;
+    cursor: pointer;
+    touch-action: none !important;
+    width: 100%;
+    color: #101828;
+    height: 40px;
+    line-height: 40px;
+  }
+
+  &-drag-sort-tree:hover {
+    background: rgb(237, 238, 238);
+  }
+
+  &-drag-sort-tree-item {
+    display: flex;
+    align-items: center;
+  }
+
+  &-drag-sort-tree &-drag-sort-tree-title {
+    margin-left: 10px;
+    font-size: 14px;
+  }
+
+  &-drag-sort-tree-icon,
+  &-drag-sort-tree-item-icon {
+    height: 30px;
+    width: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+  

package/lib/components/drag-sort-tree/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './index.less';
+import { SortType } from './types';
+declare const DragSortTree: (props: SortType) => React.JSX.Element;
+export default DragSortTree;