@aloudata/aloudata-design 1.10.0 → 1.10.1
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/dist/Tree/Tree.js +3 -2
- package/dist/Tree/demo/drag/index.d.ts +2 -2
- package/dist/Tree/demo/drag/index.js +123 -51
- package/dist/Tree/style/directory.less +1 -1
- package/dist/Tree/style/index.less +6 -0
- package/dist/Tree/style/mixin.less +3 -3
- package/dist/Tree/style/rtl.less +2 -2
- package/dist/Tree/style/var.less +1 -1
- package/dist/style/core/motion/fade.less +1 -1
- package/dist/style/core/motion/move.less +1 -1
- package/dist/style/core/motion/other.less +3 -3
- package/dist/style/core/motion/slide.less +1 -1
- package/dist/style/core/motion/zoom.less +1 -1
- package/dist/style/index.less +1 -1
- package/package.json +1 -2
package/dist/Tree/Tree.js
CHANGED
|
@@ -96,8 +96,9 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
96
96
|
keyEntities = nodeProps.context.keyEntities,
|
|
97
97
|
isLeaf = nodeProps.isLeaf;
|
|
98
98
|
var level = ((_keyEntities = keyEntities[eventKey]) === null || _keyEntities === void 0 ? void 0 : _keyEntities.level) || 0;
|
|
99
|
-
var
|
|
100
|
-
indentWidth
|
|
99
|
+
var iconSize = size === 'small' ? TREE_SWITCH_CION_SIZE : TREE_SWITCH_LARGE_ICON_SIZE;
|
|
100
|
+
var indentWidth = isLeaf ? iconSize : 0;
|
|
101
|
+
indentWidth += level * (iconSize / 2);
|
|
101
102
|
return /*#__PURE__*/React.createElement("span", {
|
|
102
103
|
style: {
|
|
103
104
|
width: indentWidth
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare const
|
|
3
|
-
export default
|
|
2
|
+
declare const App: React.FC;
|
|
3
|
+
export default App;
|
|
@@ -1,52 +1,124 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
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); }
|
|
5
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
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."); }
|
|
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); }
|
|
8
|
+
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; }
|
|
9
|
+
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; } }
|
|
10
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
11
|
+
import { Tree } from "../../..";
|
|
12
|
+
import React, { useState } from 'react';
|
|
13
|
+
var x = 3;
|
|
14
|
+
var y = 2;
|
|
15
|
+
var z = 1;
|
|
16
|
+
var defaultData = [];
|
|
17
|
+
var generateData = function generateData(_level, _preKey, _tns) {
|
|
18
|
+
var preKey = _preKey || '0';
|
|
19
|
+
var tns = _tns || defaultData;
|
|
20
|
+
var children = [];
|
|
21
|
+
for (var _i = 0; _i < x; _i++) {
|
|
22
|
+
var key = "".concat(preKey, "-").concat(_i);
|
|
23
|
+
tns.push({
|
|
24
|
+
title: key,
|
|
25
|
+
key: key
|
|
26
|
+
});
|
|
27
|
+
if (_i < y) {
|
|
28
|
+
children.push(key);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
if (_level < 0) {
|
|
32
|
+
return tns;
|
|
33
|
+
}
|
|
34
|
+
var level = _level - 1;
|
|
35
|
+
children.forEach(function (key, index) {
|
|
36
|
+
tns[index].children = [];
|
|
37
|
+
return generateData(level, key, tns[index].children);
|
|
38
|
+
});
|
|
39
|
+
};
|
|
40
|
+
generateData(z);
|
|
41
|
+
var App = function App() {
|
|
42
|
+
var _useState = useState(defaultData),
|
|
43
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
44
|
+
gData = _useState2[0],
|
|
45
|
+
setGData = _useState2[1];
|
|
46
|
+
var _useState3 = useState(['0-0', '0-0-0', '0-0-0-0']),
|
|
47
|
+
_useState4 = _slicedToArray(_useState3, 1),
|
|
48
|
+
expandedKeys = _useState4[0];
|
|
49
|
+
var onDragEnter = function onDragEnter(info) {
|
|
50
|
+
console.log(info);
|
|
51
|
+
// expandedKeys, set it when controlled is needed
|
|
52
|
+
// setExpandedKeys(info.expandedKeys)
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
var onDrop = function onDrop(info) {
|
|
56
|
+
console.log(info);
|
|
57
|
+
var dropKey = info.node.key;
|
|
58
|
+
var dragKey = info.dragNode.key;
|
|
59
|
+
var dropPos = info.node.pos.split('-');
|
|
60
|
+
var dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
|
|
61
|
+
var loop = function loop(data, key, callback) {
|
|
62
|
+
for (var _i2 = 0; _i2 < data.length; _i2++) {
|
|
63
|
+
if (data[_i2].key === key) {
|
|
64
|
+
return callback(data[_i2], _i2, data);
|
|
65
|
+
}
|
|
66
|
+
if (data[_i2].children) {
|
|
67
|
+
loop(data[_i2].children, key, callback);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
var data = _toConsumableArray(gData);
|
|
72
|
+
|
|
73
|
+
// Find dragObject
|
|
74
|
+
var dragObj;
|
|
75
|
+
loop(data, dragKey, function (item, index, arr) {
|
|
76
|
+
arr.splice(index, 1);
|
|
77
|
+
dragObj = item;
|
|
78
|
+
});
|
|
79
|
+
if (!info.dropToGap) {
|
|
80
|
+
// Drop on the content
|
|
81
|
+
loop(data, dropKey, function (item) {
|
|
82
|
+
item.children = item.children || [];
|
|
83
|
+
// where to insert. New item was inserted to the start of the array in this example, but can be anywhere
|
|
84
|
+
item.children.unshift(dragObj);
|
|
85
|
+
});
|
|
86
|
+
} else if ((info.node.props.children || []).length > 0 &&
|
|
87
|
+
// Has children
|
|
88
|
+
info.node.props.expanded &&
|
|
89
|
+
// Is expanded
|
|
90
|
+
dropPosition === 1 // On the bottom gap
|
|
91
|
+
) {
|
|
92
|
+
loop(data, dropKey, function (item) {
|
|
93
|
+
item.children = item.children || [];
|
|
94
|
+
// where to insert. New item was inserted to the start of the array in this example, but can be anywhere
|
|
95
|
+
item.children.unshift(dragObj);
|
|
96
|
+
// in previous version, we use item.children.push(dragObj) to insert the
|
|
97
|
+
// item to the tail of the children
|
|
98
|
+
});
|
|
99
|
+
} else {
|
|
100
|
+
var ar = [];
|
|
101
|
+
var _i3;
|
|
102
|
+
loop(data, dropKey, function (_item, index, arr) {
|
|
103
|
+
ar = arr;
|
|
104
|
+
_i3 = index;
|
|
105
|
+
});
|
|
106
|
+
if (dropPosition === -1) {
|
|
107
|
+
ar.splice(_i3, 0, dragObj);
|
|
108
|
+
} else {
|
|
109
|
+
ar.splice(_i3 + 1, 0, dragObj);
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
setGData(data);
|
|
113
|
+
};
|
|
114
|
+
return /*#__PURE__*/React.createElement(Tree, {
|
|
115
|
+
className: "draggable-tree",
|
|
116
|
+
defaultExpandedKeys: expandedKeys,
|
|
5
117
|
draggable: true,
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
},
|
|
14
|
-
titleRender: function titleRender(node) {
|
|
15
|
-
return /*#__PURE__*/React.createElement("span", null, node.title);
|
|
16
|
-
},
|
|
17
|
-
treeData: [{
|
|
18
|
-
title: 'Parent 1',
|
|
19
|
-
key: '0-0',
|
|
20
|
-
checkable: true,
|
|
21
|
-
children: [{
|
|
22
|
-
title: 'parent 1-0',
|
|
23
|
-
key: '0-0-0',
|
|
24
|
-
selectable: true,
|
|
25
|
-
children: [{
|
|
26
|
-
title: 'leaf',
|
|
27
|
-
selectable: true,
|
|
28
|
-
key: '0-0-0-0',
|
|
29
|
-
isLeaf: true
|
|
30
|
-
}, {
|
|
31
|
-
title: 'leaf',
|
|
32
|
-
key: '0-0-0-1',
|
|
33
|
-
isLeaf: true
|
|
34
|
-
}]
|
|
35
|
-
}, {
|
|
36
|
-
title: 'parent 1-1',
|
|
37
|
-
key: '0-0-1',
|
|
38
|
-
disabled: true,
|
|
39
|
-
selectable: true,
|
|
40
|
-
children: [{
|
|
41
|
-
title: /*#__PURE__*/React.createElement("span", {
|
|
42
|
-
style: {
|
|
43
|
-
color: '#1890ff'
|
|
44
|
-
}
|
|
45
|
-
}, "sss"),
|
|
46
|
-
key: '0-0-1-0',
|
|
47
|
-
disabled: true
|
|
48
|
-
}]
|
|
49
|
-
}]
|
|
50
|
-
}]
|
|
51
|
-
}));
|
|
52
|
-
});
|
|
118
|
+
blockNode: true,
|
|
119
|
+
onDragEnter: onDragEnter,
|
|
120
|
+
onDrop: onDrop,
|
|
121
|
+
treeData: gData
|
|
122
|
+
});
|
|
123
|
+
};
|
|
124
|
+
export default App;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
@import '../../style/index.less';
|
|
2
2
|
@import '../../Checkbox/style/index.less';
|
|
3
3
|
@import './var.less';
|
|
4
|
+
@import './rtl.less';
|
|
5
|
+
@import './mixin.less';
|
|
4
6
|
@import './reset.less';
|
|
5
7
|
@import './checkbox.less';
|
|
6
8
|
|
|
@@ -13,6 +15,10 @@
|
|
|
13
15
|
@tree-line-height-default: 16px;
|
|
14
16
|
.aldCheckboxFn();
|
|
15
17
|
|
|
18
|
+
.@{tree-prefix-cls} {
|
|
19
|
+
.antTreeFn(@tree-prefix-cls);
|
|
20
|
+
}
|
|
21
|
+
|
|
16
22
|
.ald-tree-treenode {
|
|
17
23
|
display: flex;
|
|
18
24
|
align-items: center;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
@tree-prefix-cls: ~'@{
|
|
2
|
-
@select-tree-prefix-cls: ~'@{
|
|
3
|
-
@tree-motion: ~'@{
|
|
1
|
+
@tree-prefix-cls: ~'@{ald-prefix}-tree';
|
|
2
|
+
@select-tree-prefix-cls: ~'@{ald-prefix}-select-tree';
|
|
3
|
+
@tree-motion: ~'@{ald-prefix}-motion-collapse';
|
|
4
4
|
@tree-node-padding: (@padding-xs / 2);
|
|
5
5
|
// @deprecated: kept for customization usages, recommend using @tree-node-highlight-color instead.
|
|
6
6
|
@tree-node-hightlight-color: inherit;
|
package/dist/Tree/style/rtl.less
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
@tree-prefix-cls: ~'@{
|
|
2
|
-
@select-tree-prefix-cls: ~'@{
|
|
1
|
+
@tree-prefix-cls: ~'@{ald-prefix}-tree';
|
|
2
|
+
@select-tree-prefix-cls: ~'@{ald-prefix}-select-tree';
|
|
3
3
|
@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
|
|
4
4
|
|
|
5
5
|
.@{tree-prefix-cls} {
|
package/dist/Tree/style/var.less
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
}
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
@click-animating-true: ~"[@{
|
|
8
|
-
@click-animating-with-extra-node-true: ~"[@{
|
|
7
|
+
@click-animating-true: ~"[@{ald-prefix}-click-animating='true']";
|
|
8
|
+
@click-animating-with-extra-node-true: ~"[@{ald-prefix}-click-animating-without-extra-node='true']";
|
|
9
9
|
|
|
10
10
|
@{click-animating-true},
|
|
11
11
|
@{click-animating-with-extra-node-true} {
|
|
@@ -20,7 +20,7 @@ html {
|
|
|
20
20
|
@click-animating-with-extra-node-true-after: ~'@{click-animating-with-extra-node-true}::after';
|
|
21
21
|
|
|
22
22
|
@{click-animating-with-extra-node-true-after},
|
|
23
|
-
.@{
|
|
23
|
+
.@{ald-prefix}-click-animating-node {
|
|
24
24
|
position: absolute;
|
|
25
25
|
inset: 0;
|
|
26
26
|
display: block;
|
package/dist/style/index.less
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aloudata/aloudata-design",
|
|
3
|
-
"version": "1.10.
|
|
3
|
+
"version": "1.10.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -65,7 +65,6 @@
|
|
|
65
65
|
"compare-func": "^2.0.0",
|
|
66
66
|
"memoize-one": "^6.0.0",
|
|
67
67
|
"rc-menu": "^9.8.0",
|
|
68
|
-
"react-table": "^7.8.0",
|
|
69
68
|
"umi-request": "^1.4.0",
|
|
70
69
|
"zx": "^7.1.1"
|
|
71
70
|
},
|