@pisell/materials 2.2.6 → 2.2.7

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

@@ -0,0 +1,114 @@
+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, tabKey, onChange } = props;
+  const [items, setItems] = (0, import_react.useState)(value || []);
+  const [activeId, setActiveId] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    setItems(value || []);
+  }, [tabKey]);
+  const sensors = (0, import_core.useSensors)(
+    (0, import_core.useSensor)(import_core.PointerSensor, {
+      activationConstraint: {
+        distance: 5
+      }
+    })
+  );
+  const handleDragStart = (event) => {
+    const { active } = event;
+    setActiveId(active == null ? void 0 : active.id);
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    setActiveId(null);
+    if (!over || !active)
+      return;
+    try {
+      const activeId2 = active.id;
+      const overId = over.id;
+      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,20 @@
+/// <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;
+    tabKey?: string;
+    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/components/drawer/index.d.ts

@@ -1,3 +1,3 @@
-import "./index.less";
+import './index.less';
 declare const Drawer: any;
 export default Drawer;

package/lib/components/drawer/index.js

@@ -126,7 +126,10 @@ var Drawer = (props) => {
         )
       };
     }
-    return headerStyle;
+    return {
+      closeIcon: /* @__PURE__ */ import_react.default.createElement(import_XClose.default, { className: `${prefix}drawer-header-close-icon` }),
+      ...headerStyle
+    };
   }, [operateMode, placement, onClose, persistentState, setPersistentState]);
   return /* @__PURE__ */ import_react.default.createElement(
     import_antd.Drawer,

package/lib/components/drawer/index.less

@@ -1,6 +1,24 @@
 @pisell-prefix: pisell-lowcode;
 
 .@{pisell-prefix} {
+  &-drawer-header {
+    position: relative;
+  }
+
+  &-drawer-header-close-icon {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 50px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    z-index: 1;
+  }
+
   &-drawer-outside-wrap {
     position: absolute;
     padding: 10px;
@@ -8,9 +26,11 @@
     display: flex;
     flex-direction: column;
   }
+
   &-drawer-outside-wrap-right {
     left: -82px;
   }
+
   &-drawer-outside-action-wrap {
     width: 56px;
     height: 56px;
@@ -24,17 +44,21 @@
     justify-content: center;
     margin-bottom: 20px;
     cursor: pointer;
+
     &:hover {
       background: #e8e8ee;
     }
+
     .anticon {
       font-size: 20px;
     }
   }
+
   &-drawer-outside-action-wrap:last-child {
     margin-bottom: 0;
   }
+
   &-drawer-outside-action-active {
     background: var(--Primary-200, #E9D7FE) !important;
   }
-}
+}

package/lib/components/table/Actions/component/ColumnsSetting/PopoverContent.less

@@ -22,7 +22,7 @@
   }
   &-table-action-column-drag-item {
     display: flex;
-    height: 36px;
+    min-height: 36px;
     border-radius: 4px;
     align-items: center;
     &:hover {
@@ -39,6 +39,7 @@
     padding-right: 6px;
     display: flex;
     justify-content: space-between;
+    align-items: center;
     flex: 1;
   }
   &-table-action-column-drag-item-right-text {

package/lib/components/table/BasicTable/index.js

@@ -45,7 +45,7 @@ var BasicTable = (props) => {
   const [filter, setFilter] = (0, import_react.useState)();
   const [sort, setSort] = (0, import_react.useState)();
   const form = import_antd.Form.useFormInstance();
-  const formPagination = import_antd.Form.useWatch("pagination", form) || {
+  const formPagination = import_antd.Form.useWatch("pagination", { form, preserve: true }) || {
     page: 1,
     size: 10
   };
@@ -144,7 +144,7 @@ var BasicTable = (props) => {
         defaultExpandAllRows: true
       }
     }
-  ), total > (((_a = pagination == null ? void 0 : pagination.pageSizeOptions) == null ? void 0 : _a[0]) || 10) ? /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "pagination" }, /* @__PURE__ */ import_react.default.createElement(
+  ), total > ((pagination == null ? void 0 : pagination.pageSize) || ((_a = pagination == null ? void 0 : pagination.pageSizeOptions) == null ? void 0 : _a[0]) || 10) ? /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "pagination" }, /* @__PURE__ */ import_react.default.createElement(
     import_Pagination.FormPagination,
     {
       ...pagination,

package/lib/components/tabs/index.d.ts

@@ -1,6 +1,6 @@
-import React, { Component } from "react";
-import { TabsProps } from "antd";
-import "./index.less";
+import React, { Component } from 'react';
+import { TabsProps } from 'antd';
+import './index.less';
 declare class Tabs extends Component<any> {
     state: {
         activeKey: any;
@@ -8,7 +8,7 @@ declare class Tabs extends Component<any> {
     private _handleChange;
     setActiveKey: (key: string) => void;
     getActiveKey: () => any;
-    renderIconLabelTabBar: TabsProps["renderTabBar"];
+    renderIconLabelTabBar: TabsProps['renderTabBar'];
     filterHiddenTabs: (tabs: any[]) => any[];
     render(): React.JSX.Element;
 }

package/lib/components/tabs/index.js

@@ -59,6 +59,7 @@ var Tabs = class extends import_react.Component {
       return this.state.activeKey;
     };
     this.renderIconLabelTabBar = (props, DefaultTabBar) => {
+      var _a;
       const { items, sidebarWidth } = this.props;
       let wrapStyle = {
         gap: props.tabBarGutter
@@ -75,7 +76,8 @@ var Tabs = class extends import_react.Component {
           className: (0, import_classnames.default)(
             "pisell-lowcode-tabs-nav",
             `${prefix}tab-bar-wrap`,
-            `${prefix}tab-bar-wrap-${props.tabPosition}`
+            `${prefix}tab-bar-wrap-${props.tabPosition}`,
+            (_a = this.props) == null ? void 0 : _a.className
           ),
           style: wrapStyle
         },

package/lib/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/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,
@@ -191,6 +192,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,
@@ -217,6 +219,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,108 @@
+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: "tabKey",
+      title: { label: 'tabKey', tip: 'tabKey | 标识当前选中的tab' },
+      propType: 'string',
+    },
+    {
+      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
+          }]
+        }]
+      },
+    },
+  }
+];