@pisell/materials 1.0.337 → 1.0.339

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

@@ -0,0 +1,111 @@
+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/index.tsx
+var drag_sort_tree_exports = {};
+__export(drag_sort_tree_exports, {
+  default: () => drag_sort_tree_default
+});
+module.exports = __toCommonJS(drag_sort_tree_exports);
+var import_react = __toESM(require("react"));
+var import_core = require("@dnd-kit/core");
+var import_sortable = require("@dnd-kit/sortable");
+var import_TreeItem = __toESM(require("./TreeItem"));
+var import_modifiers = require("@dnd-kit/modifiers");
+var DragSortTree = (props) => {
+  const { value, rowKey, onChange } = props;
+  const [items, setItems] = (0, import_react.useState)(value || []);
+  const [activeId, setActiveId] = (0, import_react.useState)(null);
+  const sensors = (0, import_core.useSensors)(
+    (0, import_core.useSensor)(import_core.PointerSensor, {
+      activationConstraint: {
+        distance: 5
+      }
+    })
+  );
+  const handleDragStart = (event) => {
+    const { active } = event;
+    setActiveId(active[rowKey]);
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    setActiveId(null);
+    if (!over || !active)
+      return;
+    try {
+      const activeId2 = active[rowKey];
+      const overId = over[rowKey];
+      if (activeId2 !== overId) {
+        const activeIndex = items.findIndex(
+          (item) => item[rowKey] === activeId2
+        );
+        const overIndex = items.findIndex(
+          (item) => item[rowKey] === overId
+        );
+        const _lists = (0, import_sortable.arrayMove)(items, activeIndex, overIndex);
+        handleChange(_lists);
+      }
+    } catch (error) {
+    }
+  };
+  const handleChange = (value2) => {
+    setItems(value2);
+    onChange && onChange(value2);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_core.DndContext,
+    {
+      sensors,
+      onDragEnd: handleDragEnd,
+      onDragStart: handleDragStart,
+      modifiers: [import_modifiers.restrictToVerticalAxis, import_modifiers.restrictToParentElement]
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_sortable.SortableContext,
+      {
+        items: items.map((item) => item[rowKey]),
+        strategy: import_sortable.verticalListSortingStrategy
+      },
+      items.map((item) => /* @__PURE__ */ import_react.default.createElement(
+        import_TreeItem.default,
+        {
+          key: item[rowKey],
+          id: item[rowKey],
+          item,
+          depth: 0,
+          sensors,
+          activeId,
+          childrenProps: props,
+          lists: items,
+          onChange: handleChange
+        }
+      ))
+    )
+  );
+};
+var drag_sort_tree_default = DragSortTree;

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export declare type ValueProps = {
+    id: number | string;
+    title: string;
+    show?: boolean;
+    is_available?: boolean;
+    type_id?: number;
+    children?: ValueProps[];
+};
+export declare type SortType = {
+    value: ValueProps[];
+    rowKey: string;
+    className?: string | Function;
+    titleRender?: string | React.ReactElement;
+    hiddenDraggableIcon?: boolean;
+    hiddenRightIcon?: boolean;
+    hiddenWarningIcon?: boolean;
+    onChange?: (value: ValueProps[]) => void;
+};

package/lib/components/drag-sort-tree/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/drag-sort-tree/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/index.d.ts

@@ -79,3 +79,4 @@ export { default as VirtualKeyboardTime } from './components/virtual-keyboard/Ti
 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/lib/index.js

@@ -53,6 +53,7 @@ __export(src_exports, {
   Descriptions: () => import_antd11.Descriptions,
   Div: () => import_div.default,
   Divider: () => import_antd12.Divider,
+  DragSortTree: () => import_drag_sort_tree.default,
   Drawer: () => import_drawer.default,
   Dropdown: () => import_dropdown.default,
   Empty: () => import_antd13.Empty,
@@ -193,6 +194,7 @@ var import_Time = __toESM(require("./components/virtual-keyboard/Time"));
 var import_select_time = __toESM(require("./components/select-time"));
 var import_auto_complete_number = __toESM(require("./components/auto-complete-number"));
 var import_batch_editor = __toESM(require("./components/batch-editor"));
+var import_drag_sort_tree = __toESM(require("./components/drag-sort-tree"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Affix,
@@ -219,6 +221,7 @@ var import_batch_editor = __toESM(require("./components/batch-editor"));
   Descriptions,
   Div,
   Divider,
+  DragSortTree,
   Drawer,
   Dropdown,
   Empty,

package/lowcode/drag-sort-tree/meta.ts

@@ -0,0 +1,103 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: "DragSortTree",
+  title: "拖拽排序",
+  category: "数据展示",
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "DragSortTree",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      title: '数据源',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'value',
+          title: '列表数据源',
+          propType: { type: 'arrayOf', value: 'any' },
+          setter: ['JsonSetter', 'VariableSetter'],
+        },
+        {
+          name: 'rowKey',
+          title: {
+            label: '行Key',
+            tip: 'rowKey | 当 renderItem 自定义渲染列表项有效时，自定义每一行的 key 的获取方式',
+          },
+          propType: {
+            type: 'oneOfType',
+            value: ['string', 'function'],
+          },
+          defaultValue: 'id',
+          setter: [
+            'StringSetter',
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template:
+                  'rowKey(item,${extParams}){\n// 自定义每一行的 key\nreturn `${item.id}`;\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+        {
+          name: 'className',
+          title: {
+            label: '样式类名',
+            tip: 'className | 样式类名',
+          },
+          propType: 'string',
+          setter: 'StringSetter',
+        },
+      ]
+    },
+    {
+      name: "titleRender",
+      title: { label: '标题', tip: '是否自定义标题内容 | node/func' },
+      propType: { type: 'oneOfType', value: ['node', 'func'] },
+    },
+    {
+      name: "hiddenDraggableIcon",
+      title: { label: "隐藏拖拽图标", tip: "是否隐藏拖拽图标" },
+      propType: "bool",
+      defaultValue: false,
+    },
+    {
+      name: "hiddenRightIcon",
+      title: { label: "右侧图标", tip: "是否隐藏右侧图标" },
+      propType: "bool",
+      defaultValue: false,
+    },
+    {
+      name: "hiddenWarningIcon",
+      title: { label: "警告图标", tip: "子元素是否隐藏警告图标" },
+      propType: "bool",
+      defaultValue: false,
+    },
+  ],
+  configure: {
+    component: {
+      isContainer: true,
+    },
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template: 'onChange(value,${extParams}){\n// 排序 改变的回调\n}',
+        },
+      ]
+    },
+  },
+};

package/lowcode/drag-sort-tree/snippets.ts

@@ -0,0 +1,57 @@
+export default [
+  {
+    title: '拖拽排序',
+    screenshot: require('./__screenshots__/drag-sort-tree.png'),
+    schema: {
+      componentName: 'DragSortTree',
+      props: {
+        value: [{
+          "id": 1,
+          "title": "资源1",
+          "show": true,
+          "children": [{
+            "id": 11,
+            "title": "资源1-1",
+            "is_available": 1,
+            "type_id": 1
+          }, {
+            "id": 12,
+            "title": "资源1-2",
+            "is_available": 1,
+            "type_id": 1
+          }]
+        }, {
+          "id": 2,
+          "title": "资源2",
+          "show": false,
+          "children": [{
+            "id": 21,
+            "title": "资源2-1",
+            "is_available": 0,
+            "type_id": 2
+          }, {
+            "id": 22,
+            "title": "资源2-2",
+            "is_available": 1,
+            "type_id": 2
+          }]
+        }, {
+          "id": 3,
+          "title": "资源3",
+          "show": true,
+          "children": [{
+            "id": 31,
+            "title": "资源3-1",
+            "is_available": 1,
+            "type_id": 3
+          }, {
+            "id": 32,
+            "title": "资源3-2",
+            "is_available": 0,
+            "type_id": 3
+          }]
+        }]
+      },
+    },
+  }
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "1.0.337",
+  "version": "1.0.339",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",