@chaoswise/ui 3.1.14 → 3.1.15
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.
|
@@ -11,9 +11,11 @@ export var genDirectoryStyle = function genDirectoryStyle(_ref) {
|
|
|
11
11
|
motionDurationMid = _ref.motionDurationMid,
|
|
12
12
|
borderRadius = _ref.borderRadius,
|
|
13
13
|
controlItemBgHover = _ref.controlItemBgHover;
|
|
14
|
-
return _defineProperty({}, "".concat(treeCls).concat(treeCls, "-directory ").concat(treeNodeCls), _defineProperty(_defineProperty(_defineProperty({}, "".concat(treeCls, "-node-content-wrapper"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
|
|
14
|
+
return _defineProperty({}, "".concat(treeCls).concat(treeCls, "-directory ").concat(treeNodeCls), _defineProperty(_defineProperty(_defineProperty({}, "".concat(treeCls, "-node-content-wrapper"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
|
|
15
15
|
position: 'static'
|
|
16
|
-
}, "
|
|
16
|
+
}, "&:has(".concat(treeCls, "-drop-indicator)"), {
|
|
17
|
+
position: 'relative'
|
|
18
|
+
}), "> *:not(".concat(treeCls, "-drop-indicator)"), {
|
|
17
19
|
position: 'relative'
|
|
18
20
|
}), '&:hover', {
|
|
19
21
|
background: 'transparent'
|
|
@@ -27,11 +29,17 @@ export var genDirectoryStyle = function genDirectoryStyle(_ref) {
|
|
|
27
29
|
background: controlItemBgHover
|
|
28
30
|
})), "".concat(treeCls, "-switcher, ").concat(treeCls, "-checkbox, ").concat(treeCls, "-draggable-icon"), {
|
|
29
31
|
zIndex: 1
|
|
30
|
-
}), '&-selected', _defineProperty(_defineProperty({
|
|
32
|
+
}), '&-selected', _defineProperty(_defineProperty({
|
|
33
|
+
background: directoryNodeSelectedBg,
|
|
34
|
+
borderRadius: borderRadius
|
|
35
|
+
}, "".concat(treeCls, "-switcher, ").concat(treeCls, "-draggable-icon"), {
|
|
31
36
|
color: directoryNodeSelectedColor
|
|
32
37
|
}), "".concat(treeCls, "-node-content-wrapper"), {
|
|
33
38
|
color: directoryNodeSelectedColor,
|
|
34
39
|
background: 'transparent',
|
|
40
|
+
'&, &:hover': {
|
|
41
|
+
color: directoryNodeSelectedColor
|
|
42
|
+
},
|
|
35
43
|
'&:before, &:hover:before': {
|
|
36
44
|
background: directoryNodeSelectedBg
|
|
37
45
|
}
|
|
@@ -64,16 +64,11 @@ export var genBaseStyle = function genBaseStyle(prefixCls, token) {
|
|
|
64
64
|
nodeHoverBg = token.nodeHoverBg,
|
|
65
65
|
colorTextQuaternary = token.colorTextQuaternary,
|
|
66
66
|
controlItemBgActiveDisabled = token.controlItemBgActiveDisabled;
|
|
67
|
-
return _defineProperty({}, treeCls, _objectSpread(_objectSpread({}, resetComponent(token)), {}, (_objectSpread4 = {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
transition: "background-color ".concat(token.motionDurationSlow),
|
|
71
|
-
'&-rtl': {
|
|
72
|
-
direction: 'rtl'
|
|
73
|
-
}
|
|
74
|
-
}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_objectSpread4, "&".concat(treeCls, "-rtl ").concat(treeCls, "-switcher_close ").concat(treeCls, "-switcher-icon svg"), {
|
|
67
|
+
return _defineProperty({}, treeCls, _objectSpread(_objectSpread({}, resetComponent(token)), {}, (_objectSpread4 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_objectSpread4, '--rc-virtual-list-scrollbar-bg', token.colorSplit), "background", token.colorBgContainer), "borderRadius", token.borderRadius), "transition", "background-color ".concat(token.motionDurationSlow)), '&-rtl', {
|
|
68
|
+
direction: 'rtl'
|
|
69
|
+
}), "&".concat(treeCls, "-rtl ").concat(treeCls, "-switcher_close ").concat(treeCls, "-switcher-icon svg"), {
|
|
75
70
|
transform: 'rotate(90deg)'
|
|
76
|
-
}), "&-focused:not(:hover):not(".concat(treeCls, "-active-focused)"),
|
|
71
|
+
}), "&-focused:not(:hover):not(".concat(treeCls, "-active-focused)"), genFocusOutline(token)), "".concat(treeCls, "-list-holder-inner"), {
|
|
77
72
|
alignItems: 'flex-start'
|
|
78
73
|
}), "&".concat(treeCls, "-block-node"), _defineProperty({}, "".concat(treeCls, "-list-holder-inner"), _defineProperty(_defineProperty({
|
|
79
74
|
alignItems: 'stretch'
|
|
@@ -125,7 +120,7 @@ export var genBaseStyle = function genBaseStyle(prefixCls, token) {
|
|
|
125
120
|
background: token.controlItemBgHover
|
|
126
121
|
}), "&:not(".concat(treeNodeCls, "-disabled).filter-node ").concat(treeCls, "-title"), {
|
|
127
122
|
color: token.colorPrimary,
|
|
128
|
-
fontWeight:
|
|
123
|
+
fontWeight: token.fontWeightStrong
|
|
129
124
|
}), '&-draggable', _defineProperty(_defineProperty({
|
|
130
125
|
cursor: 'grab'
|
|
131
126
|
}, "".concat(treeCls, "-draggable-icon"), {
|
|
@@ -137,7 +132,7 @@ export var genBaseStyle = function genBaseStyle(prefixCls, token) {
|
|
|
137
132
|
color: colorTextQuaternary
|
|
138
133
|
}), "&".concat(treeNodeCls, "-disabled ").concat(treeCls, "-draggable-icon"), {
|
|
139
134
|
visibility: 'hidden'
|
|
140
|
-
}))), "".concat(treeCls, "-indent"), {
|
|
135
|
+
}))), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_objectSpread4, "".concat(treeCls, "-indent"), {
|
|
141
136
|
alignSelf: 'stretch',
|
|
142
137
|
whiteSpace: 'nowrap',
|
|
143
138
|
userSelect: 'none',
|
|
@@ -229,7 +224,7 @@ export var genBaseStyle = function genBaseStyle(prefixCls, token) {
|
|
|
229
224
|
'&:empty': {
|
|
230
225
|
display: 'none'
|
|
231
226
|
}
|
|
232
|
-
}))),
|
|
227
|
+
}))), "".concat(treeCls, "-unselectable ").concat(treeCls, "-node-content-wrapper:hover"), {
|
|
233
228
|
backgroundColor: 'transparent'
|
|
234
229
|
}), "".concat(treeNodeCls, ".drop-container > [draggable]"), {
|
|
235
230
|
boxShadow: "0 0 0 2px ".concat(token.colorPrimary)
|
|
@@ -37,8 +37,9 @@ var SwitcherIconCom = function SwitcherIconCom(props) {
|
|
|
37
37
|
var leafIcon = typeof showLeafIcon === 'function' ? showLeafIcon(treeNodeProps) : showLeafIcon;
|
|
38
38
|
var leafCls = "".concat(prefixCls, "-switcher-line-custom-icon");
|
|
39
39
|
if (/*#__PURE__*/React.isValidElement(leafIcon)) {
|
|
40
|
+
var _leafIcon$props;
|
|
40
41
|
return cloneElement(leafIcon, {
|
|
41
|
-
className: classNames(leafIcon.props
|
|
42
|
+
className: classNames((_leafIcon$props = leafIcon.props) === null || _leafIcon$props === void 0 ? void 0 : _leafIcon$props.className, leafCls)
|
|
42
43
|
});
|
|
43
44
|
}
|
|
44
45
|
return leafIcon;
|
|
@@ -52,8 +53,9 @@ var SwitcherIconCom = function SwitcherIconCom(props) {
|
|
|
52
53
|
var switcherCls = "".concat(prefixCls, "-switcher-icon");
|
|
53
54
|
var switcher = typeof switcherIcon === 'function' ? switcherIcon(treeNodeProps) : switcherIcon;
|
|
54
55
|
if (/*#__PURE__*/React.isValidElement(switcher)) {
|
|
56
|
+
var _switcher$props;
|
|
55
57
|
return cloneElement(switcher, {
|
|
56
|
-
className: classNames(switcher.props
|
|
58
|
+
className: classNames((_switcher$props = switcher.props) === null || _switcher$props === void 0 ? void 0 : _switcher$props.className, switcherCls)
|
|
57
59
|
});
|
|
58
60
|
}
|
|
59
61
|
if (switcher !== undefined) {
|
package/lib/CWSelect/index.js
CHANGED
|
@@ -314,17 +314,15 @@ var CWSelect = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
314
314
|
}, [allowDrag, maxTagCount, renderTag, moveNode, tagDropdownOverlay, prefixCls, rest.disabled, handlePreventMouseDown, activeKey, allOptions, handleChange, onDeselect, maxTagTextLength, tagLabelRender]);
|
|
315
315
|
|
|
316
316
|
/**
|
|
317
|
-
* 计算最终的 value 值
|
|
318
317
|
* 受控模式:使用传入的 value
|
|
319
|
-
*
|
|
318
|
+
* 非受控模式:根据是否允许拖拽或者是否限制最大标签显示数量来决定使用 activeKey 还是 value
|
|
320
319
|
*/
|
|
321
320
|
var finalValue = useMemo(function () {
|
|
322
321
|
if ("value" in props) {
|
|
323
322
|
return value;
|
|
324
323
|
}
|
|
325
|
-
return allowDrag ? activeKey : value;
|
|
326
|
-
}, [
|
|
327
|
-
|
|
324
|
+
return allowDrag || maxTagCount ? activeKey : value;
|
|
325
|
+
}, [value, allowDrag, activeKey, maxTagCount]);
|
|
328
326
|
// 渲染组件
|
|
329
327
|
return wrapCSSVar(/*#__PURE__*/React.createElement(DndProvider, {
|
|
330
328
|
backend: HTML5Backend
|
package/lib/CWTree/index.js
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
1
|
import _Dropdown from "@chaoswise/ui/lib/Dropdown";
|
|
3
|
-
import _Tooltip from "@chaoswise/ui/lib/Tooltip";
|
|
4
2
|
import _TooltipText from "@chaoswise/ui/lib/TooltipText";
|
|
5
3
|
import _Menu from "@chaoswise/ui/lib/Menu";
|
|
6
4
|
import _Tree from "@chaoswise/ui/lib/Tree";
|
|
@@ -12,6 +10,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
12
10
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
13
11
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
14
12
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
13
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
15
14
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
16
15
|
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
17
16
|
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."); }
|
|
@@ -29,7 +28,6 @@ import DragSvg from "./assets/Drag";
|
|
|
29
28
|
import { createTitle, processTreeData } from "./utils";
|
|
30
29
|
import useConfigContext from "../useConfigContext";
|
|
31
30
|
import useStyle from "./index.style";
|
|
32
|
-
import { useIntl } from "../locales";
|
|
33
31
|
var TreeNode = _Tree.TreeNode,
|
|
34
32
|
DirectoryTree = _Tree.DirectoryTree;
|
|
35
33
|
var SubMenu = _Menu.SubMenu;
|
|
@@ -98,7 +96,6 @@ function CWTree(_ref) {
|
|
|
98
96
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
99
97
|
selfSelectedKeys = _useState6[0],
|
|
100
98
|
setSelfSelectedKeys = _useState6[1];
|
|
101
|
-
var intl = useIntl();
|
|
102
99
|
var memoizedSearchHighlightStyle = useMemo(function () {
|
|
103
100
|
return searchHighlightStyle;
|
|
104
101
|
}, [searchHighlightStyle]);
|
|
@@ -187,14 +184,6 @@ function CWTree(_ref) {
|
|
|
187
184
|
placement: placement
|
|
188
185
|
}, title) : title;
|
|
189
186
|
}, [useTooltipText]);
|
|
190
|
-
var renderDragIcon = useMemo(function () {
|
|
191
|
-
if (!draggable) return null;
|
|
192
|
-
return /*#__PURE__*/React.createElement("span", {
|
|
193
|
-
className: "cw-tree-treenode-drag-icon"
|
|
194
|
-
}, /*#__PURE__*/React.createElement(_Tooltip, {
|
|
195
|
-
title: intl.get("5fe60774-0f08-450f-a9d9-998996485fec").d("拖拽移动")
|
|
196
|
-
}, /*#__PURE__*/React.createElement(DragSvg, null)));
|
|
197
|
-
}, [draggable, intl]);
|
|
198
187
|
|
|
199
188
|
// 创建标题
|
|
200
189
|
var createTitleComponent = useCallback(function (icon, title, key, props) {
|
|
@@ -214,13 +203,13 @@ function CWTree(_ref) {
|
|
|
214
203
|
className: "cw-tree-treenode-content"
|
|
215
204
|
}, /*#__PURE__*/React.createElement("span", {
|
|
216
205
|
className: "cw-tree-treenode-title"
|
|
217
|
-
}, renderTooltipTitle(title, tooltipPlacement))
|
|
206
|
+
}, renderTooltipTitle(title, tooltipPlacement))), /*#__PURE__*/React.createElement("span", {
|
|
218
207
|
className: classnames("cw-tree-treenode-extend", {
|
|
219
208
|
"cw-tree-treenode-extend-show": isExtendVisible
|
|
220
209
|
})
|
|
221
210
|
}, menuRender ? /*#__PURE__*/React.createElement(Fragment, null, menuRender(title, key, props), menuData(title, key, props) && menuDom) : extendType === "menu" ? menuDom : createButton(icon, title, key, props)));
|
|
222
211
|
return titleDom;
|
|
223
|
-
}, [createMenu, menuData, extendType, showExtendKey, menuRender, createButton, renderTooltipTitle,
|
|
212
|
+
}, [createMenu, menuData, extendType, showExtendKey, menuRender, createButton, renderTooltipTitle, tooltipPlacement]);
|
|
224
213
|
|
|
225
214
|
// 搜索高亮逻辑
|
|
226
215
|
var renderHighlightedTitle = useCallback(function (title) {
|
|
@@ -310,12 +299,23 @@ function CWTree(_ref) {
|
|
|
310
299
|
|
|
311
300
|
// 拖拽配置优化
|
|
312
301
|
var draggableConfig = useMemo(function () {
|
|
313
|
-
|
|
314
|
-
|
|
302
|
+
if (!draggable) return false;
|
|
303
|
+
|
|
304
|
+
// 默认内部配置
|
|
305
|
+
var defaultDraggableConfig = {
|
|
306
|
+
icon: /*#__PURE__*/React.createElement(DragSvg, null),
|
|
315
307
|
nodeDraggable: function nodeDraggable() {
|
|
316
308
|
return true;
|
|
317
309
|
}
|
|
318
|
-
}
|
|
310
|
+
};
|
|
311
|
+
|
|
312
|
+
// 如果draggable是对象,则合并外部配置和默认配置
|
|
313
|
+
if (_typeof(draggable) === 'object') {
|
|
314
|
+
return _objectSpread(_objectSpread({}, defaultDraggableConfig), draggable);
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
// 如果draggable是true,使用默认配置
|
|
318
|
+
return defaultDraggableConfig;
|
|
319
319
|
}, [draggable]);
|
|
320
320
|
|
|
321
321
|
// 样式类名配置
|
|
@@ -440,8 +440,12 @@ CWTree.propTypes = {
|
|
|
440
440
|
searchHighlightStyle: PropTypes.object,
|
|
441
441
|
/**
|
|
442
442
|
* 是否可拖拽 开启后使用新UE规范
|
|
443
|
+
* 可以传入布尔值或对象配置:
|
|
444
|
+
* - true: 使用默认拖拽配置
|
|
445
|
+
* - false: 禁用拖拽
|
|
446
|
+
* - object: 自定义拖拽配置,会与默认配置合并
|
|
443
447
|
*/
|
|
444
|
-
draggable: PropTypes.bool,
|
|
448
|
+
draggable: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
|
|
445
449
|
/**
|
|
446
450
|
* 拖拽回调
|
|
447
451
|
*/
|
|
@@ -23,15 +23,21 @@ var genCustomCWTreeStyle = function genCustomCWTreeStyle(token) {
|
|
|
23
23
|
overflowY: "auto",
|
|
24
24
|
".cw-tree": _defineProperty({
|
|
25
25
|
width: "100%",
|
|
26
|
-
".cw-tree-treenode": _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
|
|
26
|
+
".cw-tree-treenode": _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
|
|
27
27
|
lineHeight: "32px",
|
|
28
28
|
padding: "0 16px",
|
|
29
29
|
whiteSpace: "nowrap",
|
|
30
|
-
marginBottom: 0
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
30
|
+
marginBottom: 0
|
|
31
|
+
}, "".concat(treePrefix, "-draggable-icon"), {
|
|
32
|
+
position: "absolute",
|
|
33
|
+
left: "8px",
|
|
34
|
+
transform: "translateY(1.2px)",
|
|
35
|
+
visibility: "hidden",
|
|
36
|
+
width: "2px",
|
|
37
|
+
color: token.colorText
|
|
38
|
+
}), "&::before", {
|
|
39
|
+
bottom: 0
|
|
40
|
+
}), "".concat(treePrefix, "-switcher, ").concat(treePrefix, "-iconEle"), {
|
|
35
41
|
width: "12px",
|
|
36
42
|
height: "32px",
|
|
37
43
|
lineHeight: "32px",
|
|
@@ -44,7 +50,6 @@ var genCustomCWTreeStyle = function genCustomCWTreeStyle(token) {
|
|
|
44
50
|
paddingRight: 0,
|
|
45
51
|
minHeight: "32px",
|
|
46
52
|
color: token.colorText,
|
|
47
|
-
position: "static",
|
|
48
53
|
height: "100%"
|
|
49
54
|
}, "".concat(treePrefix, "-title"), {
|
|
50
55
|
height: "32px",
|
|
@@ -66,12 +71,6 @@ var genCustomCWTreeStyle = function genCustomCWTreeStyle(token) {
|
|
|
66
71
|
whiteSpace: "nowrap",
|
|
67
72
|
width: "100%",
|
|
68
73
|
display: "inline-block"
|
|
69
|
-
},
|
|
70
|
-
".cw-tree-treenode-drag-icon": {
|
|
71
|
-
position: "absolute",
|
|
72
|
-
left: "8px",
|
|
73
|
-
transform: "translateY(1.2px)",
|
|
74
|
-
visibility: "hidden"
|
|
75
74
|
}
|
|
76
75
|
},
|
|
77
76
|
".cw-tree-treenode-extend": {
|
|
@@ -114,13 +113,9 @@ var genCustomCWTreeStyle = function genCustomCWTreeStyle(token) {
|
|
|
114
113
|
height: "32px",
|
|
115
114
|
lineHeight: "32px",
|
|
116
115
|
marginTop: 0
|
|
117
|
-
}), "&:hover", _defineProperty({}, "".concat(
|
|
118
|
-
"
|
|
119
|
-
|
|
120
|
-
visibility: "visible"
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
})))
|
|
116
|
+
}), "&:hover", _defineProperty({}, "".concat(treePrefix, "-draggable-icon"), {
|
|
117
|
+
visibility: "visible"
|
|
118
|
+
}))
|
|
124
119
|
}, "&".concat(treePrefix, "-directory"), _defineProperty({}, "".concat(treePrefix, "-child-tree"), {
|
|
125
120
|
height: "100% !important"
|
|
126
121
|
}))
|