@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.
- package/build/lowcode/assets-daily.json +11 -11
- package/build/lowcode/assets-dev.json +2 -2
- package/build/lowcode/assets-prod.json +11 -11
- package/build/lowcode/index.js +1 -1
- package/build/lowcode/meta.js +1 -1
- package/build/lowcode/preview.js +4 -4
- package/build/lowcode/render/default/view.css +1 -1
- package/build/lowcode/render/default/view.js +9 -9
- package/build/lowcode/view.css +1 -1
- package/build/lowcode/view.js +8 -8
- package/es/components/Pagination/index.d.ts +1 -1
- package/es/components/drag-sort-tree/TreeItem/index.d.ts +4 -1
- package/es/components/drag-sort-tree/TreeItem/index.js +34 -31
- package/es/components/drag-sort-tree/TreeItem/index.less +36 -11
- package/es/components/drag-sort-tree/index.js +40 -16
- package/es/components/drag-sort-tree/types.d.ts +5 -1
- package/es/locales/en-US.d.ts +1 -0
- package/es/locales/en-US.js +2 -1
- package/es/locales/zh-CN.d.ts +1 -0
- package/es/locales/zh-CN.js +2 -1
- package/es/locales/zh-TW.d.ts +1 -0
- package/es/locales/zh-TW.js +2 -1
- package/lib/components/Pagination/index.d.ts +1 -1
- package/lib/components/drag-sort-tree/TreeItem/index.d.ts +4 -1
- package/lib/components/drag-sort-tree/TreeItem/index.js +51 -22
- package/lib/components/drag-sort-tree/TreeItem/index.less +36 -11
- package/lib/components/drag-sort-tree/index.js +28 -13
- package/lib/components/drag-sort-tree/types.d.ts +5 -1
- package/lib/locales/en-US.d.ts +1 -0
- package/lib/locales/en-US.js +2 -1
- package/lib/locales/zh-CN.d.ts +1 -0
- package/lib/locales/zh-CN.js +2 -1
- package/lib/locales/zh-TW.d.ts +1 -0
- package/lib/locales/zh-TW.js +2 -1
- package/lowcode/drag-sort-tree/meta.ts +9 -0
- 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: "
|
|
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, {
|
|
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 {
|
|
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
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
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
|
-
|
|
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 (
|
|
80
|
+
if (activeId !== overId && activeParentId === overParentId && parentIndex !== -1) {
|
|
82
81
|
var activeIndex = item.children.findIndex(function (item) {
|
|
83
|
-
return item[rowKey] ==
|
|
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
|
-
|
|
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: '
|
|
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 ? '
|
|
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(
|
|
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:
|
|
9
|
-
cursor: pointer;
|
|
8
|
+
font-size: 14px;
|
|
10
9
|
touch-action: none !important;
|
|
11
10
|
width: 100%;
|
|
12
11
|
color: #101828;
|
|
13
|
-
|
|
14
|
-
|
|
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
|
|
18
|
-
|
|
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
|
-
|
|
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(
|
|
28
|
+
var _useState3 = useState([]),
|
|
24
29
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
25
|
-
|
|
26
|
-
|
|
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
|
-
|
|
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
|
|
49
|
-
var
|
|
50
|
-
|
|
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]
|
|
75
|
+
return item[rowKey] == activeId;
|
|
53
76
|
});
|
|
54
77
|
var overIndex = items.findIndex(function (item) {
|
|
55
|
-
return item[rowKey]
|
|
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:
|
|
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 {};
|
package/es/locales/en-US.d.ts
CHANGED
|
@@ -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;
|
package/es/locales/en-US.js
CHANGED
|
@@ -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
|
};
|
package/es/locales/zh-CN.d.ts
CHANGED
|
@@ -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;
|
package/es/locales/zh-CN.js
CHANGED
|
@@ -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
|
};
|
package/es/locales/zh-TW.d.ts
CHANGED
|
@@ -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;
|
package/es/locales/zh-TW.js
CHANGED
|
@@ -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: "
|
|
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 {
|
|
47
|
-
|
|
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.
|
|
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
|
-
|
|
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 (
|
|
81
|
+
if (activeId !== overId && activeParentId === overParentId && parentIndex !== -1) {
|
|
73
82
|
const activeIndex = item.children.findIndex(
|
|
74
|
-
(item2) => item2[rowKey] ==
|
|
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
|
-
|
|
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
|
-
}, [
|
|
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(
|
|
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: {
|
|
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(
|
|
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
|
);
|