@pisell/materials 1.0.346 → 1.0.348

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/build/lowcode/assets-daily.json +11 -11
  2. package/build/lowcode/assets-dev.json +2 -2
  3. package/build/lowcode/assets-prod.json +11 -11
  4. package/build/lowcode/index.js +1 -1
  5. package/build/lowcode/meta.js +1 -1
  6. package/build/lowcode/preview.js +4 -4
  7. package/build/lowcode/render/default/view.css +1 -1
  8. package/build/lowcode/render/default/view.js +9 -9
  9. package/build/lowcode/view.css +1 -1
  10. package/build/lowcode/view.js +8 -8
  11. package/es/components/Pagination/index.d.ts +1 -1
  12. package/es/components/drag-sort-tree/TreeItem/index.d.ts +4 -1
  13. package/es/components/drag-sort-tree/TreeItem/index.js +34 -31
  14. package/es/components/drag-sort-tree/TreeItem/index.less +36 -11
  15. package/es/components/drag-sort-tree/index.js +40 -16
  16. package/es/components/drag-sort-tree/types.d.ts +5 -1
  17. package/es/locales/en-US.d.ts +1 -0
  18. package/es/locales/en-US.js +2 -1
  19. package/es/locales/zh-CN.d.ts +1 -0
  20. package/es/locales/zh-CN.js +2 -1
  21. package/es/locales/zh-TW.d.ts +1 -0
  22. package/es/locales/zh-TW.js +2 -1
  23. package/lib/components/Pagination/index.d.ts +1 -1
  24. package/lib/components/drag-sort-tree/TreeItem/index.d.ts +4 -1
  25. package/lib/components/drag-sort-tree/TreeItem/index.js +51 -22
  26. package/lib/components/drag-sort-tree/TreeItem/index.less +36 -11
  27. package/lib/components/drag-sort-tree/index.js +28 -13
  28. package/lib/components/drag-sort-tree/types.d.ts +5 -1
  29. package/lib/locales/en-US.d.ts +1 -0
  30. package/lib/locales/en-US.js +2 -1
  31. package/lib/locales/zh-CN.d.ts +1 -0
  32. package/lib/locales/zh-CN.js +2 -1
  33. package/lib/locales/zh-TW.d.ts +1 -0
  34. package/lib/locales/zh-TW.js +2 -1
  35. package/lowcode/drag-sort-tree/meta.ts +9 -0
  36. package/package.json +3 -3
@@ -5,7 +5,7 @@ export declare const paginationConfig: {
5
5
  className: string;
6
6
  defaultCurrent: number;
7
7
  showTotal: (total: number, range: [number, number]) => string;
8
- itemRender: (page: number, type: "page" | "next" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
8
+ itemRender: (page: number, type: "next" | "page" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
9
9
  responsive: boolean;
10
10
  size: string;
11
11
  };
@@ -1,15 +1,18 @@
1
1
  import React from 'react';
2
2
  import './index.less';
3
3
  import { ValueProps, SortType } from '../types';
4
+ declare type IdType = string | number;
4
5
  declare type TreeItemProps = {
5
6
  id: string | number;
6
7
  key: string | number;
7
8
  item: ValueProps | any;
8
9
  depth: number;
9
10
  lists: any[];
10
- activeId?: string | null;
11
11
  childrenProps?: SortType;
12
12
  sensors?: any;
13
+ expandedKeys?: IdType[];
14
+ setExpandedKeys?: any;
15
+ onSelectKeys?: (ids: IdType) => void;
13
16
  onChange?: (value: any[]) => void;
14
17
  };
15
18
  declare const TreeItem: (props: TreeItemProps) => React.JSX.Element;
@@ -15,11 +15,14 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
15
15
  function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
16
16
  function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
17
17
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
18
- import React, { useEffect, useMemo, useState } from 'react';
18
+ import React, { useMemo, useState } from 'react';
19
19
  import { useSortable } from '@dnd-kit/sortable';
20
20
  import { DndContext } from '@dnd-kit/core';
21
+ import { Tooltip } from 'antd';
22
+ import DotsSix from '@pisell/icon/es/DotsSix';
23
+ import { getText } from "../../../locales";
21
24
  import { CSS } from '@dnd-kit/utilities';
22
- import { HolderOutlined, EyeOutlined, EyeInvisibleOutlined, WarningOutlined } from '@ant-design/icons';
25
+ import { EyeOutlined, EyeInvisibleOutlined, WarningOutlined } from '@ant-design/icons';
23
26
  import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
24
27
  import { restrictToVerticalAxis, restrictToParentElement } from '@dnd-kit/modifiers';
25
28
  import classNames from 'classnames';
@@ -29,15 +32,11 @@ var TreeItem = function TreeItem(props) {
29
32
  var id = props.id,
30
33
  item = props.item,
31
34
  depth = props.depth,
32
- activeId = props.activeId,
33
35
  sensors = props.sensors,
34
36
  childrenProps = props.childrenProps,
35
37
  lists = props.lists,
38
+ expandedKeys = props.expandedKeys,
36
39
  onChange = props.onChange;
37
- var _useState = useState([]),
38
- _useState2 = _slicedToArray(_useState, 2),
39
- expandedKeys = _useState2[0],
40
- setExpandedKeys = _useState2[1];
41
40
  var _useSortable = useSortable({
42
41
  id: id
43
42
  }),
@@ -46,17 +45,16 @@ var TreeItem = function TreeItem(props) {
46
45
  setNodeRef = _useSortable.setNodeRef,
47
46
  transform = _useSortable.transform,
48
47
  transition = _useSortable.transition;
49
- useEffect(function () {
50
- // 拖拽的时候将节点收起
51
- if (activeId) {
52
- setExpandedKeys([]);
53
- }
54
- }, [activeId]);
48
+ var _useState = useState(false),
49
+ _useState2 = _slicedToArray(_useState, 2),
50
+ isDragging = _useState2[0],
51
+ setIsDragging = _useState2[1];
55
52
  var style = {
56
53
  transform: CSS.Transform.toString(transform && _objectSpread(_objectSpread({}, transform), {}, {
57
54
  scaleY: 1
58
55
  })),
59
- transition: transition
56
+ transition: transition,
57
+ cursor: isDragging ? 'grabbing' : 'grab'
60
58
  };
61
59
  var rowKey = useMemo(function () {
62
60
  return (childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.rowKey) || 'id';
@@ -67,10 +65,11 @@ var TreeItem = function TreeItem(props) {
67
65
  if (!over || !active || !lists.length) return;
68
66
  try {
69
67
  var _active$id, _over$id;
68
+ setIsDragging(false);
70
69
  var _active$id$split = active === null || active === void 0 ? void 0 : (_active$id = active.id) === null || _active$id === void 0 ? void 0 : _active$id.split('-'),
71
70
  _active$id$split2 = _slicedToArray(_active$id$split, 2),
72
71
  activeParentId = _active$id$split2[0],
73
- _activeId = _active$id$split2[1];
72
+ activeId = _active$id$split2[1];
74
73
  var _over$id$split = over === null || over === void 0 ? void 0 : (_over$id = over.id) === null || _over$id === void 0 ? void 0 : _over$id.split('-'),
75
74
  _over$id$split2 = _slicedToArray(_over$id$split, 2),
76
75
  overParentId = _over$id$split2[0],
@@ -78,9 +77,9 @@ var TreeItem = function TreeItem(props) {
78
77
  var parentIndex = lists.findIndex(function (item) {
79
78
  return item[rowKey] == activeParentId;
80
79
  });
81
- if (_activeId !== overId && activeParentId === overParentId && parentIndex !== -1) {
80
+ if (activeId !== overId && activeParentId === overParentId && parentIndex !== -1) {
82
81
  var activeIndex = item.children.findIndex(function (item) {
83
- return item[rowKey] == _activeId;
82
+ return item[rowKey] == activeId;
84
83
  });
85
84
  var overIndex = item.children.findIndex(function (item) {
86
85
  return item[rowKey] == overId;
@@ -122,14 +121,7 @@ var TreeItem = function TreeItem(props) {
122
121
  var _item$children;
123
122
  if (depth === 0 && (_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length) {
124
123
  var key = item[rowKey];
125
- if (expandedKeys.includes(key)) {
126
- var _ids = expandedKeys.filter(function (id) {
127
- return id !== key;
128
- });
129
- setExpandedKeys(_ids);
130
- } else {
131
- setExpandedKeys([].concat(_toConsumableArray(expandedKeys), [key]));
132
- }
124
+ (childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.onHiddenChange) && (childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.onHiddenChange(key));
133
125
  }
134
126
  };
135
127
  var renderChildren = useMemo(function () {
@@ -151,7 +143,7 @@ var TreeItem = function TreeItem(props) {
151
143
  childrenProps: childrenProps
152
144
  }) : null;
153
145
  }));
154
- }, [item.children, expandedKeys, rowKey, lists, childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.tabKey]);
146
+ }, [item.children, expandedKeys, rowKey, lists, childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.tabKey, isDragging]);
155
147
 
156
148
  // 右侧图标
157
149
  var rightIcon = useMemo(function () {
@@ -168,28 +160,39 @@ var TreeItem = function TreeItem(props) {
168
160
  var hiddenWarningIcon = childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.hiddenWarningIcon;
169
161
  return !hiddenWarningIcon && !(item !== null && item !== void 0 && item.is_available) ? /*#__PURE__*/React.createElement("div", {
170
162
  className: classNames("".concat(prefix, "-drag-sort-tree-item-icon"))
163
+ }, /*#__PURE__*/React.createElement(Tooltip, {
164
+ title: getText('drag-sort-tree-unavailable-today-tip'),
165
+ color: "#ffffff",
166
+ overlayInnerStyle: {
167
+ color: '#344054'
168
+ }
171
169
  }, /*#__PURE__*/React.createElement(WarningOutlined, {
172
170
  style: {
173
- color: 'red'
171
+ color: '#FF2020'
174
172
  }
175
- })) : null;
173
+ }))) : null;
176
174
  }, [childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.hiddenWarningIcon, item === null || item === void 0 ? void 0 : item.is_available]);
177
175
  return /*#__PURE__*/React.createElement(DndContext, {
178
176
  sensors: sensors,
179
177
  modifiers: [restrictToVerticalAxis, restrictToParentElement],
180
- onDragEnd: handleDragEnd
178
+ onDragEnd: handleDragEnd,
179
+ onDragStart: function onDragStart() {
180
+ setIsDragging(true);
181
+ }
181
182
  }, /*#__PURE__*/React.createElement("div", _extends({
182
183
  ref: setNodeRef,
183
184
  style: style
184
185
  }, attributes, listeners), /*#__PURE__*/React.createElement("div", {
185
186
  style: {
186
- paddingLeft: !depth ? '8px' : "".concat(depth * 20, "px")
187
+ paddingLeft: !depth ? '10px' : "".concat(depth * 40, "px")
187
188
  },
188
189
  className: classNames("".concat(prefix, "-drag-sort-tree"), childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.className),
189
190
  onClick: onSelect
190
191
  }, /*#__PURE__*/React.createElement("div", {
191
192
  className: classNames("".concat(prefix, "-drag-sort-tree-item"))
192
- }, !(childrenProps !== null && childrenProps !== void 0 && childrenProps.hiddenDraggableIcon) ? /*#__PURE__*/React.createElement(HolderOutlined, null) : null, /*#__PURE__*/React.createElement("div", {
193
+ }, !(childrenProps !== null && childrenProps !== void 0 && childrenProps.hiddenDraggableIcon) ? /*#__PURE__*/React.createElement(DotsSix, {
194
+ className: classNames("".concat(prefix, "-drag-sort-tree-item-dot-icon"))
195
+ }) : null, /*#__PURE__*/React.createElement("div", {
193
196
  className: "".concat(prefix, "-drag-sort-tree-title")
194
197
  }, (childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.titleRender) || (item === null || item === void 0 ? void 0 : item.title))), !depth ? rightIcon : warningIcon), renderChildren));
195
198
  };
@@ -5,38 +5,63 @@
5
5
  display: flex;
6
6
  align-items: center;
7
7
  justify-content: space-between;
8
- font-size: 16px;
9
- cursor: pointer;
8
+ font-size: 14px;
10
9
  touch-action: none !important;
11
10
  width: 100%;
12
11
  color: #101828;
13
- height: 38px;
14
- line-height: 38px;
12
+ padding: 9px 10px;
13
+ height: auto;
14
+ position: relative;
15
+ display: flex;
16
+ &:hover {
17
+ background: #F9FAFB;
18
+ border-radius: 6px;
19
+ cursor: grab;
20
+ }
15
21
  }
16
22
 
17
- &-drag-sort-tree:hover {
18
- background: #F9FAFB;
19
- border-radius: 6px;
23
+ &-drag-sort-tree-item{
24
+ flex: 1;
20
25
  }
21
26
 
22
27
  &-drag-sort-tree-item {
23
28
  display: flex;
24
29
  align-items: center;
25
30
  }
26
-
31
+
27
32
  &-drag-sort-tree &-drag-sort-tree-title {
28
33
  margin-left: 10px;
29
34
  font-size: 14px;
35
+ line-height: 20px;
36
+ margin-right: 30px;
30
37
  }
31
38
 
32
39
  &-drag-sort-tree-icon,
33
- &-drag-sort-tree-item-icon {
34
- height: 30px;
35
- width: 30px;
40
+ &-drag-sort-tree-item-icon,
41
+ &-drag-sort-tree-item-dot-icon {
36
42
  display: flex;
37
43
  align-items: center;
38
44
  justify-content: center;
39
45
  }
46
+
47
+ &-drag-sort-tree-icon,
48
+ &-drag-sort-tree-item-icon{
49
+ height: 40px;
50
+ width: 40px;
51
+ position: absolute;
52
+ right: 0;
53
+ cursor: pointer;
54
+ }
55
+
56
+ &-drag-sort-tree-icon{
57
+ cursor: pointer;
58
+ }
59
+
60
+ &-drag-sort-tree-item-dot-icon{
61
+ height: 20px;
62
+ width: 20px;
63
+ color: #344054;
64
+ }
40
65
  }
41
66
 
42
67
 
@@ -1,3 +1,7 @@
1
+ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
2
+ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
+ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
4
+ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
1
5
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
6
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
7
  function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -15,15 +19,26 @@ var DragSortTree = function DragSortTree(props) {
15
19
  var value = props.value,
16
20
  rowKey = props.rowKey,
17
21
  tabKey = props.tabKey,
22
+ hiddenKeys = props.hiddenKeys,
18
23
  onChange = props.onChange;
19
24
  var _useState = useState(value || []),
20
25
  _useState2 = _slicedToArray(_useState, 2),
21
26
  items = _useState2[0],
22
27
  setItems = _useState2[1];
23
- var _useState3 = useState(null),
28
+ var _useState3 = useState([]),
24
29
  _useState4 = _slicedToArray(_useState3, 2),
25
- activeId = _useState4[0],
26
- setActiveId = _useState4[1];
30
+ expandedKeys = _useState4[0],
31
+ setExpandedKeys = _useState4[1];
32
+ useEffect(function () {
33
+ var keys = value === null || value === void 0 ? void 0 : value.map(function (item) {
34
+ return item[rowKey];
35
+ });
36
+ // 过滤需要折叠起来的key
37
+ keys = keys.filter(function (key) {
38
+ return hiddenKeys !== null && hiddenKeys !== void 0 && hiddenKeys.length ? !hiddenKeys.includes(key) : key;
39
+ });
40
+ setExpandedKeys(_toConsumableArray(keys));
41
+ }, [hiddenKeys]);
27
42
  useEffect(function () {
28
43
  // 防止切换的时候数据不更新,拖拽之后,如果切换tab,需要用更新之后的数据
29
44
  setItems(value || []);
@@ -34,25 +49,33 @@ var DragSortTree = function DragSortTree(props) {
34
49
  }
35
50
  }));
36
51
  var handleDragStart = function handleDragStart(event) {
52
+ var _active$id, _active$id$split;
37
53
  var active = event.active;
38
- setActiveId(active === null || active === void 0 ? void 0 : active.id);
54
+ var activeId = active === null || active === void 0 ? void 0 : (_active$id = active.id) === null || _active$id === void 0 ? void 0 : (_active$id$split = _active$id.split('-')) === null || _active$id$split === void 0 ? void 0 : _active$id$split[1];
55
+ var _keys = expandedKeys === null || expandedKeys === void 0 ? void 0 : expandedKeys.filter(function (key) {
56
+ return key != activeId;
57
+ });
58
+ setExpandedKeys(_toConsumableArray(_keys));
39
59
  };
40
60
  var handleDragEnd = function handleDragEnd(event) {
41
61
  var active = event.active,
42
62
  over = event.over;
43
-
44
- // 拖拽结束将这个值设置为空,防止第二次拖拽同一个节点,监听不到这个变化
45
- setActiveId(null);
46
63
  if (!over || !active) return;
47
64
  try {
48
- var _activeId = active.id;
49
- var overId = over.id;
50
- if (_activeId !== overId) {
65
+ var _active$id2, _active$id2$split, _over$id, _over$id$split;
66
+ var activeId = active === null || active === void 0 ? void 0 : (_active$id2 = active.id) === null || _active$id2 === void 0 ? void 0 : (_active$id2$split = _active$id2.split('-')) === null || _active$id2$split === void 0 ? void 0 : _active$id2$split[1];
67
+ var overId = over === null || over === void 0 ? void 0 : (_over$id = over.id) === null || _over$id === void 0 ? void 0 : (_over$id$split = _over$id.split('-')) === null || _over$id$split === void 0 ? void 0 : _over$id$split[1];
68
+ if (activeId !== overId) {
69
+ // 如果没有自动点击折叠则拖动结束再次打开
70
+ if (!(hiddenKeys !== null && hiddenKeys !== void 0 && hiddenKeys.includes(Number(activeId)))) {
71
+ var _keys = [].concat(_toConsumableArray(expandedKeys), [Number(activeId)]);
72
+ setExpandedKeys(_toConsumableArray(_keys));
73
+ }
51
74
  var activeIndex = items.findIndex(function (item) {
52
- return item[rowKey] === _activeId;
75
+ return item[rowKey] == activeId;
53
76
  });
54
77
  var overIndex = items.findIndex(function (item) {
55
- return item[rowKey] === overId;
78
+ return item[rowKey] == overId;
56
79
  });
57
80
  var _lists = arrayMove(items, activeIndex, overIndex);
58
81
  handleChange(_lists);
@@ -72,19 +95,20 @@ var DragSortTree = function DragSortTree(props) {
72
95
  modifiers: [restrictToVerticalAxis, restrictToParentElement]
73
96
  }, /*#__PURE__*/React.createElement(SortableContext, {
74
97
  items: items.map(function (item) {
75
- return item[rowKey];
98
+ return "0-".concat(item[rowKey]);
76
99
  }),
77
100
  strategy: verticalListSortingStrategy
78
101
  }, items.map(function (item) {
79
102
  return /*#__PURE__*/React.createElement(TreeItem, {
80
- key: item[rowKey],
81
- id: item[rowKey],
103
+ key: "0-".concat(item[rowKey]),
104
+ id: "0-".concat(item[rowKey]),
82
105
  item: item,
83
106
  depth: 0,
84
107
  sensors: sensors,
85
- activeId: activeId,
86
108
  childrenProps: props,
87
109
  lists: items,
110
+ expandedKeys: expandedKeys,
111
+ setExpandedKeys: setExpandedKeys,
88
112
  onChange: handleChange
89
113
  });
90
114
  }))));
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
+ declare type IdType = string | number;
2
3
  export declare type ValueProps = {
3
- id: number | string;
4
+ id: IdType;
4
5
  title: string;
5
6
  show?: boolean;
6
7
  is_available?: boolean;
@@ -16,5 +17,8 @@ export declare type SortType = {
16
17
  hiddenRightIcon?: boolean;
17
18
  hiddenWarningIcon?: boolean;
18
19
  tabKey?: string;
20
+ hiddenKeys?: IdType[];
21
+ onHiddenChange?: (value: IdType[]) => void;
19
22
  onChange?: (value: ValueProps[]) => void;
20
23
  };
24
+ export {};
@@ -96,5 +96,6 @@ declare const _default: {
96
96
  'table-action-export-import-log-err-log': string;
97
97
  'table-action-export-import-log-copy': string;
98
98
  'table-action-export-import-table-success-copy': string;
99
+ 'drag-sort-tree-unavailable-today-tip': string;
99
100
  };
100
101
  export default _default;
@@ -117,5 +117,6 @@ export default {
117
117
  'table-action-export-import-log-detail-title': 'Import Details',
118
118
  'table-action-export-import-log-err-log': 'Failure Log',
119
119
  'table-action-export-import-log-copy': 'Copy',
120
- 'table-action-export-import-table-success-copy': 'Copy Success'
120
+ 'table-action-export-import-table-success-copy': 'Copy Success',
121
+ 'drag-sort-tree-unavailable-today-tip': 'Unavailable today'
121
122
  };
@@ -96,5 +96,6 @@ declare const _default: {
96
96
  'table-action-export-import-log-err-log': string;
97
97
  'table-action-export-import-log-copy': string;
98
98
  'table-action-export-import-table-success-copy': string;
99
+ 'drag-sort-tree-unavailable-today-tip': string;
99
100
  };
100
101
  export default _default;
@@ -117,5 +117,6 @@ export default {
117
117
  'table-action-export-import-log-detail-title': '导入详情',
118
118
  'table-action-export-import-log-err-log': '失败日志',
119
119
  'table-action-export-import-log-copy': '复制',
120
- 'table-action-export-import-table-success-copy': '复制成功'
120
+ 'table-action-export-import-table-success-copy': '复制成功',
121
+ 'drag-sort-tree-unavailable-today-tip': '今日不可用'
121
122
  };
@@ -96,5 +96,6 @@ declare const _default: {
96
96
  'table-action-export-import-log-err-log': string;
97
97
  'table-action-export-import-log-copy': string;
98
98
  'table-action-export-import-table-success-copy': string;
99
+ 'drag-sort-tree-unavailable-today-tip': string;
99
100
  };
100
101
  export default _default;
@@ -117,5 +117,6 @@ export default {
117
117
  'table-action-export-import-log-detail-title': '導入詳情',
118
118
  'table-action-export-import-log-err-log': '失敗日誌',
119
119
  'table-action-export-import-log-copy': '復製',
120
- 'table-action-export-import-table-success-copy': '復製成功'
120
+ 'table-action-export-import-table-success-copy': '復製成功',
121
+ 'drag-sort-tree-unavailable-today-tip': '今日不可用'
121
122
  };
@@ -5,7 +5,7 @@ export declare const paginationConfig: {
5
5
  className: string;
6
6
  defaultCurrent: number;
7
7
  showTotal: (total: number, range: [number, number]) => string;
8
- itemRender: (page: number, type: "page" | "next" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
8
+ itemRender: (page: number, type: "next" | "page" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
9
9
  responsive: boolean;
10
10
  size: string;
11
11
  };
@@ -1,15 +1,18 @@
1
1
  import React from 'react';
2
2
  import './index.less';
3
3
  import { ValueProps, SortType } from '../types';
4
+ declare type IdType = string | number;
4
5
  declare type TreeItemProps = {
5
6
  id: string | number;
6
7
  key: string | number;
7
8
  item: ValueProps | any;
8
9
  depth: number;
9
10
  lists: any[];
10
- activeId?: string | null;
11
11
  childrenProps?: SortType;
12
12
  sensors?: any;
13
+ expandedKeys?: IdType[];
14
+ setExpandedKeys?: any;
15
+ onSelectKeys?: (ids: IdType) => void;
13
16
  onChange?: (value: any[]) => void;
14
17
  };
15
18
  declare const TreeItem: (props: TreeItemProps) => React.JSX.Element;
@@ -35,6 +35,9 @@ module.exports = __toCommonJS(TreeItem_exports);
35
35
  var import_react = __toESM(require("react"));
36
36
  var import_sortable = require("@dnd-kit/sortable");
37
37
  var import_core = require("@dnd-kit/core");
38
+ var import_antd = require("antd");
39
+ var import_DotsSix = __toESM(require("@pisell/icon/es/DotsSix"));
40
+ var import_locales = require("../../../locales");
38
41
  var import_utilities = require("@dnd-kit/utilities");
39
42
  var import_icons = require("@ant-design/icons");
40
43
  var import_sortable2 = require("@dnd-kit/sortable");
@@ -43,17 +46,22 @@ var import_classnames = __toESM(require("classnames"));
43
46
  var import_index = require("./index.less");
44
47
  var prefix = "pisell-lowcode";
45
48
  var TreeItem = (props) => {
46
- const { id, item, depth, activeId, sensors, childrenProps, lists, onChange } = props;
47
- const [expandedKeys, setExpandedKeys] = (0, import_react.useState)([]);
49
+ const {
50
+ id,
51
+ item,
52
+ depth,
53
+ sensors,
54
+ childrenProps,
55
+ lists,
56
+ expandedKeys,
57
+ onChange
58
+ } = props;
48
59
  const { attributes, listeners, setNodeRef, transform, transition } = (0, import_sortable.useSortable)({ id });
49
- (0, import_react.useEffect)(() => {
50
- if (activeId) {
51
- setExpandedKeys([]);
52
- }
53
- }, [activeId]);
60
+ const [isDragging, setIsDragging] = (0, import_react.useState)(false);
54
61
  const style = {
55
62
  transform: import_utilities.CSS.Transform.toString(transform && { ...transform, scaleY: 1 }),
56
- transition
63
+ transition,
64
+ cursor: isDragging ? "grabbing" : "grab"
57
65
  };
58
66
  const rowKey = (0, import_react.useMemo)(() => {
59
67
  return (childrenProps == null ? void 0 : childrenProps.rowKey) || "id";
@@ -64,14 +72,15 @@ var TreeItem = (props) => {
64
72
  if (!over || !active || !lists.length)
65
73
  return;
66
74
  try {
67
- let [activeParentId, activeId2] = (_a = active == null ? void 0 : active.id) == null ? void 0 : _a.split("-");
75
+ setIsDragging(false);
76
+ let [activeParentId, activeId] = (_a = active == null ? void 0 : active.id) == null ? void 0 : _a.split("-");
68
77
  let [overParentId, overId] = (_b = over == null ? void 0 : over.id) == null ? void 0 : _b.split("-");
69
78
  const parentIndex = lists.findIndex(
70
79
  (item2) => item2[rowKey] == activeParentId
71
80
  );
72
- if (activeId2 !== overId && activeParentId === overParentId && parentIndex !== -1) {
81
+ if (activeId !== overId && activeParentId === overParentId && parentIndex !== -1) {
73
82
  const activeIndex = item.children.findIndex(
74
- (item2) => item2[rowKey] == activeId2
83
+ (item2) => item2[rowKey] == activeId
75
84
  );
76
85
  const overIndex = item.children.findIndex(
77
86
  (item2) => item2[rowKey] == overId
@@ -108,12 +117,7 @@ var TreeItem = (props) => {
108
117
  var _a;
109
118
  if (depth === 0 && ((_a = item.children) == null ? void 0 : _a.length)) {
110
119
  const key = item[rowKey];
111
- if (expandedKeys.includes(key)) {
112
- const _ids = expandedKeys.filter((id2) => id2 !== key);
113
- setExpandedKeys(_ids);
114
- } else {
115
- setExpandedKeys([...expandedKeys, key]);
116
- }
120
+ (childrenProps == null ? void 0 : childrenProps.onHiddenChange) && (childrenProps == null ? void 0 : childrenProps.onHiddenChange(key));
117
121
  }
118
122
  };
119
123
  const renderChildren = (0, import_react.useMemo)(() => {
@@ -142,7 +146,14 @@ var TreeItem = (props) => {
142
146
  ) : null
143
147
  )
144
148
  );
145
- }, [item.children, expandedKeys, rowKey, lists, childrenProps == null ? void 0 : childrenProps.tabKey]);
149
+ }, [
150
+ item.children,
151
+ expandedKeys,
152
+ rowKey,
153
+ lists,
154
+ childrenProps == null ? void 0 : childrenProps.tabKey,
155
+ isDragging
156
+ ]);
146
157
  const rightIcon = (0, import_react.useMemo)(() => {
147
158
  const hiddenRightIcon = childrenProps == null ? void 0 : childrenProps.hiddenRightIcon;
148
159
  return !hiddenRightIcon ? /* @__PURE__ */ import_react.default.createElement(
@@ -156,26 +167,44 @@ var TreeItem = (props) => {
156
167
  }, [childrenProps == null ? void 0 : childrenProps.hiddenRightIcon, item == null ? void 0 : item.show, lists]);
157
168
  const warningIcon = (0, import_react.useMemo)(() => {
158
169
  const hiddenWarningIcon = childrenProps == null ? void 0 : childrenProps.hiddenWarningIcon;
159
- 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;
170
+ 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(
171
+ import_antd.Tooltip,
172
+ {
173
+ title: (0, import_locales.getText)("drag-sort-tree-unavailable-today-tip"),
174
+ color: "#ffffff",
175
+ overlayInnerStyle: { color: "#344054" }
176
+ },
177
+ /* @__PURE__ */ import_react.default.createElement(import_icons.WarningOutlined, { style: { color: "#FF2020" } })
178
+ )) : null;
160
179
  }, [childrenProps == null ? void 0 : childrenProps.hiddenWarningIcon, item == null ? void 0 : item.is_available]);
161
180
  return /* @__PURE__ */ import_react.default.createElement(
162
181
  import_core.DndContext,
163
182
  {
164
183
  sensors,
165
184
  modifiers: [import_modifiers.restrictToVerticalAxis, import_modifiers.restrictToParentElement],
166
- onDragEnd: handleDragEnd
185
+ onDragEnd: handleDragEnd,
186
+ onDragStart: () => {
187
+ setIsDragging(true);
188
+ }
167
189
  },
168
190
  /* @__PURE__ */ import_react.default.createElement("div", { ref: setNodeRef, style, ...attributes, ...listeners }, /* @__PURE__ */ import_react.default.createElement(
169
191
  "div",
170
192
  {
171
- style: { paddingLeft: !depth ? "8px" : `${depth * 20}px` },
193
+ style: {
194
+ paddingLeft: !depth ? "10px" : `${depth * 40}px`
195
+ },
172
196
  className: (0, import_classnames.default)(
173
197
  `${prefix}-drag-sort-tree`,
174
198
  childrenProps == null ? void 0 : childrenProps.className
175
199
  ),
176
200
  onClick: onSelect
177
201
  },
178
- /* @__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))),
202
+ /* @__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(
203
+ import_DotsSix.default,
204
+ {
205
+ className: (0, import_classnames.default)(`${prefix}-drag-sort-tree-item-dot-icon`)
206
+ }
207
+ ) : 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))),
179
208
  !depth ? rightIcon : warningIcon
180
209
  ), renderChildren)
181
210
  );