@chaoswise/ui 3.1.8 → 3.1.10
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/lib/AbreastLayout/index.js +1 -7
- package/lib/Antd5/splitter/SplitBar.js +7 -56
- package/lib/Antd5/splitter/Splitter.js +17 -27
- package/lib/Antd5/splitter/hooks/useResizable.js +3 -3
- package/lib/Antd5/splitter/hooks/useResize.js +6 -17
- package/lib/Antd5/splitter/style/index.js +6 -32
- package/lib/Button/index.style.js +4 -2
- package/lib/CWSelect/index.js +8 -235
- package/lib/Collapse/index.js +1 -2
- package/lib/Header/index.js +1 -3
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
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
|
-
var _excluded = ["children", "type", "Siderbar", "SiderWidth", "
|
|
2
|
+
var _excluded = ["children", "type", "Siderbar", "SiderWidth", "resizeBarColor", "showCollapsedBtn", "onCollapse", "contentStyle", "siderStyle"];
|
|
3
3
|
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); }
|
|
4
4
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
5
5
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
@@ -34,7 +34,6 @@ function AbreastLayout(_ref) {
|
|
|
34
34
|
type = _ref.type,
|
|
35
35
|
Siderbar = _ref.Siderbar,
|
|
36
36
|
SiderWidth = _ref.SiderWidth,
|
|
37
|
-
ResizeBarWidth = _ref.ResizeBarWidth,
|
|
38
37
|
resizeBarColor = _ref.resizeBarColor,
|
|
39
38
|
showCollapsedBtn = _ref.showCollapsedBtn,
|
|
40
39
|
_onCollapse = _ref.onCollapse,
|
|
@@ -152,7 +151,6 @@ function AbreastLayout(_ref) {
|
|
|
152
151
|
AbreastLayout.defaultProps = {
|
|
153
152
|
SiderWidth: 232,
|
|
154
153
|
// 侧边栏默认宽度
|
|
155
|
-
ResizeBarWidth: 5,
|
|
156
154
|
resizeBarColor: "#40A9FF",
|
|
157
155
|
minWidth: 208,
|
|
158
156
|
// 侧边栏拖拽最小宽度
|
|
@@ -182,10 +180,6 @@ AbreastLayout.propTypes = {
|
|
|
182
180
|
* 侧边栏拖拽最大宽度,适用于可拖拽布局
|
|
183
181
|
*/
|
|
184
182
|
maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
185
|
-
/**
|
|
186
|
-
* 侧边栏拖拽条的宽度
|
|
187
|
-
*/
|
|
188
|
-
ResizeBarWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
189
183
|
/**
|
|
190
184
|
* 侧边栏拖拽条的颜色
|
|
191
185
|
*/
|
|
@@ -15,7 +15,6 @@ import LeftOutlined from '@ant-design/icons/LeftOutlined';
|
|
|
15
15
|
import RightOutlined from '@ant-design/icons/RightOutlined';
|
|
16
16
|
import UpOutlined from '@ant-design/icons/UpOutlined';
|
|
17
17
|
import classNames from 'classnames';
|
|
18
|
-
import useEvent from 'rc-util/lib/hooks/useEvent';
|
|
19
18
|
function getValidNumber(num) {
|
|
20
19
|
return typeof num === 'number' && !Number.isNaN(num) ? Math.round(num) : 0;
|
|
21
20
|
}
|
|
@@ -33,21 +32,13 @@ var SplitBar = function SplitBar(props) {
|
|
|
33
32
|
onOffsetStart = props.onOffsetStart,
|
|
34
33
|
onOffsetUpdate = props.onOffsetUpdate,
|
|
35
34
|
onOffsetEnd = props.onOffsetEnd,
|
|
36
|
-
onCollapse = props.onCollapse
|
|
37
|
-
lazy = props.lazy,
|
|
38
|
-
containerSize = props.containerSize;
|
|
35
|
+
onCollapse = props.onCollapse;
|
|
39
36
|
var splitBarPrefixCls = "".concat(prefixCls, "-bar");
|
|
40
37
|
// ======================== Resize ========================
|
|
41
38
|
var _useState = useState(null),
|
|
42
39
|
_useState2 = _slicedToArray(_useState, 2),
|
|
43
40
|
startPos = _useState2[0],
|
|
44
41
|
setStartPos = _useState2[1];
|
|
45
|
-
var _useState3 = useState(0),
|
|
46
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
47
|
-
constrainedOffset = _useState4[0],
|
|
48
|
-
setConstrainedOffset = _useState4[1];
|
|
49
|
-
var constrainedOffsetX = vertical ? 0 : constrainedOffset;
|
|
50
|
-
var constrainedOffsetY = vertical ? constrainedOffset : 0;
|
|
51
42
|
var onMouseDown = function onMouseDown(e) {
|
|
52
43
|
if (resizable && e.currentTarget) {
|
|
53
44
|
setStartPos([e.pageX, e.pageY]);
|
|
@@ -61,26 +52,6 @@ var SplitBar = function SplitBar(props) {
|
|
|
61
52
|
onOffsetStart(index);
|
|
62
53
|
}
|
|
63
54
|
};
|
|
64
|
-
// Updated constraint calculation
|
|
65
|
-
var getConstrainedOffset = function getConstrainedOffset(rawOffset) {
|
|
66
|
-
var currentPos = containerSize * ariaNow / 100;
|
|
67
|
-
var newPos = currentPos + rawOffset;
|
|
68
|
-
// Calculate available space
|
|
69
|
-
var minAllowed = Math.max(0, containerSize * ariaMin / 100);
|
|
70
|
-
var maxAllowed = Math.min(containerSize, containerSize * ariaMax / 100);
|
|
71
|
-
// Constrain new position within bounds
|
|
72
|
-
var clampedPos = Math.max(minAllowed, Math.min(maxAllowed, newPos));
|
|
73
|
-
return clampedPos - currentPos;
|
|
74
|
-
};
|
|
75
|
-
var handleLazyMove = useEvent(function (offsetX, offsetY) {
|
|
76
|
-
var constrainedOffsetValue = getConstrainedOffset(vertical ? offsetY : offsetX);
|
|
77
|
-
setConstrainedOffset(constrainedOffsetValue);
|
|
78
|
-
});
|
|
79
|
-
var handleLazyEnd = useEvent(function () {
|
|
80
|
-
onOffsetUpdate(index, constrainedOffsetX, constrainedOffsetY, true);
|
|
81
|
-
setConstrainedOffset(0);
|
|
82
|
-
onOffsetEnd(true);
|
|
83
|
-
});
|
|
84
55
|
React.useEffect(function () {
|
|
85
56
|
if (startPos) {
|
|
86
57
|
var onMouseMove = function onMouseMove(e) {
|
|
@@ -88,39 +59,23 @@ var SplitBar = function SplitBar(props) {
|
|
|
88
59
|
pageY = e.pageY;
|
|
89
60
|
var offsetX = pageX - startPos[0];
|
|
90
61
|
var offsetY = pageY - startPos[1];
|
|
91
|
-
|
|
92
|
-
handleLazyMove(offsetX, offsetY);
|
|
93
|
-
} else {
|
|
94
|
-
onOffsetUpdate(index, offsetX, offsetY);
|
|
95
|
-
}
|
|
62
|
+
onOffsetUpdate(index, offsetX, offsetY);
|
|
96
63
|
};
|
|
97
64
|
var onMouseUp = function onMouseUp() {
|
|
98
|
-
if (lazy) {
|
|
99
|
-
handleLazyEnd();
|
|
100
|
-
} else {
|
|
101
|
-
onOffsetEnd();
|
|
102
|
-
}
|
|
103
65
|
setStartPos(null);
|
|
66
|
+
onOffsetEnd();
|
|
104
67
|
};
|
|
105
68
|
var handleTouchMove = function handleTouchMove(e) {
|
|
106
69
|
if (e.touches.length === 1) {
|
|
107
70
|
var touch = e.touches[0];
|
|
108
71
|
var offsetX = touch.pageX - startPos[0];
|
|
109
72
|
var offsetY = touch.pageY - startPos[1];
|
|
110
|
-
|
|
111
|
-
handleLazyMove(offsetX, offsetY);
|
|
112
|
-
} else {
|
|
113
|
-
onOffsetUpdate(index, offsetX, offsetY);
|
|
114
|
-
}
|
|
73
|
+
onOffsetUpdate(index, offsetX, offsetY);
|
|
115
74
|
}
|
|
116
75
|
};
|
|
117
76
|
var handleTouchEnd = function handleTouchEnd() {
|
|
118
|
-
if (lazy) {
|
|
119
|
-
handleLazyEnd();
|
|
120
|
-
} else {
|
|
121
|
-
onOffsetEnd();
|
|
122
|
-
}
|
|
123
77
|
setStartPos(null);
|
|
78
|
+
onOffsetEnd();
|
|
124
79
|
};
|
|
125
80
|
window.addEventListener('touchmove', handleTouchMove);
|
|
126
81
|
window.addEventListener('touchend', handleTouchEnd);
|
|
@@ -133,8 +88,7 @@ var SplitBar = function SplitBar(props) {
|
|
|
133
88
|
window.removeEventListener('touchend', handleTouchEnd);
|
|
134
89
|
};
|
|
135
90
|
}
|
|
136
|
-
}, [startPos
|
|
137
|
-
var transformStyle = _defineProperty({}, "--".concat(splitBarPrefixCls, "-preview-offset"), "".concat(constrainedOffset, "px"));
|
|
91
|
+
}, [startPos]);
|
|
138
92
|
// ======================== Render ========================
|
|
139
93
|
var StartIcon = vertical ? UpOutlined : LeftOutlined;
|
|
140
94
|
var EndIcon = vertical ? DownOutlined : RightOutlined;
|
|
@@ -144,10 +98,7 @@ var SplitBar = function SplitBar(props) {
|
|
|
144
98
|
"aria-valuenow": getValidNumber(ariaNow),
|
|
145
99
|
"aria-valuemin": getValidNumber(ariaMin),
|
|
146
100
|
"aria-valuemax": getValidNumber(ariaMax),
|
|
147
|
-
children: [
|
|
148
|
-
className: classNames("".concat(splitBarPrefixCls, "-preview"), _defineProperty({}, "".concat(splitBarPrefixCls, "-preview-active"), !!constrainedOffset)),
|
|
149
|
-
style: transformStyle
|
|
150
|
-
}), _jsx("div", {
|
|
101
|
+
children: [_jsx("div", {
|
|
151
102
|
className: classNames("".concat(splitBarPrefixCls, "-dragger"), _defineProperty(_defineProperty({}, "".concat(splitBarPrefixCls, "-dragger-disabled"), !resizable), "".concat(splitBarPrefixCls, "-dragger-active"), active)),
|
|
152
103
|
onMouseDown: onMouseDown,
|
|
153
104
|
onTouchStart: onTouchStart
|
|
@@ -17,7 +17,7 @@ import classNames from 'classnames';
|
|
|
17
17
|
import ResizeObserver from 'rc-resize-observer';
|
|
18
18
|
import useEvent from 'rc-util/lib/hooks/useEvent';
|
|
19
19
|
import { devUseWarning } from '../_util/warning';
|
|
20
|
-
import {
|
|
20
|
+
import { ConfigContext } from '../config-provider';
|
|
21
21
|
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
|
|
22
22
|
import useItems from './hooks/useItems';
|
|
23
23
|
import useResizable from './hooks/useResizable';
|
|
@@ -36,13 +36,11 @@ var Splitter = function Splitter(props) {
|
|
|
36
36
|
rootClassName = props.rootClassName,
|
|
37
37
|
onResizeStart = props.onResizeStart,
|
|
38
38
|
onResize = props.onResize,
|
|
39
|
-
onResizeEnd = props.onResizeEnd
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
contextClassName = _useComponentConfig.className,
|
|
45
|
-
contextStyle = _useComponentConfig.style;
|
|
39
|
+
onResizeEnd = props.onResizeEnd;
|
|
40
|
+
var _React$useContext = React.useContext(ConfigContext),
|
|
41
|
+
getPrefixCls = _React$useContext.getPrefixCls,
|
|
42
|
+
direction = _React$useContext.direction,
|
|
43
|
+
splitter = _React$useContext.splitter;
|
|
46
44
|
var prefixCls = getPrefixCls('splitter', customizePrefixCls);
|
|
47
45
|
var rootCls = useCSSVarCls(prefixCls);
|
|
48
46
|
var _useStyle = useStyle(prefixCls, rootCls),
|
|
@@ -98,8 +96,8 @@ var Splitter = function Splitter(props) {
|
|
|
98
96
|
itemPtgMaxSizes = _useSizes2[4],
|
|
99
97
|
updateSizes = _useSizes2[5];
|
|
100
98
|
// ====================== Resizable =======================
|
|
101
|
-
var resizableInfos = useResizable(items, itemPxSizes
|
|
102
|
-
var _useResize = useResize(items, resizableInfos, itemPtgSizes, containerSize, updateSizes
|
|
99
|
+
var resizableInfos = useResizable(items, itemPxSizes);
|
|
100
|
+
var _useResize = useResize(items, resizableInfos, itemPtgSizes, containerSize, updateSizes),
|
|
103
101
|
_useResize2 = _slicedToArray(_useResize, 5),
|
|
104
102
|
onOffsetStart = _useResize2[0],
|
|
105
103
|
onOffsetUpdate = _useResize2[1],
|
|
@@ -111,19 +109,13 @@ var Splitter = function Splitter(props) {
|
|
|
111
109
|
onOffsetStart(index);
|
|
112
110
|
onResizeStart === null || onResizeStart === void 0 || onResizeStart(itemPxSizes);
|
|
113
111
|
});
|
|
114
|
-
var onInternalResizeUpdate = useEvent(function (index, offset
|
|
112
|
+
var onInternalResizeUpdate = useEvent(function (index, offset) {
|
|
115
113
|
var nextSizes = onOffsetUpdate(index, offset);
|
|
116
|
-
|
|
117
|
-
onResizeEnd === null || onResizeEnd === void 0 || onResizeEnd(nextSizes);
|
|
118
|
-
} else {
|
|
119
|
-
onResize === null || onResize === void 0 || onResize(nextSizes);
|
|
120
|
-
}
|
|
114
|
+
onResize === null || onResize === void 0 || onResize(nextSizes);
|
|
121
115
|
});
|
|
122
|
-
var onInternalResizeEnd = useEvent(function (
|
|
116
|
+
var onInternalResizeEnd = useEvent(function () {
|
|
123
117
|
onOffsetEnd();
|
|
124
|
-
|
|
125
|
-
onResizeEnd === null || onResizeEnd === void 0 || onResizeEnd(itemPxSizes);
|
|
126
|
-
}
|
|
118
|
+
onResizeEnd === null || onResizeEnd === void 0 || onResizeEnd(itemPxSizes);
|
|
127
119
|
});
|
|
128
120
|
var onInternalCollapse = useEvent(function (index, type) {
|
|
129
121
|
var nextSizes = onCollapse(index, type);
|
|
@@ -131,7 +123,7 @@ var Splitter = function Splitter(props) {
|
|
|
131
123
|
onResizeEnd === null || onResizeEnd === void 0 || onResizeEnd(nextSizes);
|
|
132
124
|
});
|
|
133
125
|
// ======================== Styles ========================
|
|
134
|
-
var containerClassName = classNames(prefixCls, className, "".concat(prefixCls, "-").concat(layout), _defineProperty({}, "".concat(prefixCls, "-rtl"), isRTL), rootClassName,
|
|
126
|
+
var containerClassName = classNames(prefixCls, className, "".concat(prefixCls, "-").concat(layout), _defineProperty({}, "".concat(prefixCls, "-rtl"), isRTL), rootClassName, splitter === null || splitter === void 0 ? void 0 : splitter.className, cssVarCls, rootCls, hashId);
|
|
135
127
|
// ======================== Render ========================
|
|
136
128
|
var maskCls = "".concat(prefixCls, "-mask");
|
|
137
129
|
var stackSizes = React.useMemo(function () {
|
|
@@ -143,7 +135,7 @@ var Splitter = function Splitter(props) {
|
|
|
143
135
|
}
|
|
144
136
|
return mergedSizes;
|
|
145
137
|
}, [itemPtgSizes]);
|
|
146
|
-
var mergedStyle = _objectSpread(_objectSpread({},
|
|
138
|
+
var mergedStyle = _objectSpread(_objectSpread({}, splitter === null || splitter === void 0 ? void 0 : splitter.style), style);
|
|
147
139
|
return wrapCSSVar(_jsx(ResizeObserver, {
|
|
148
140
|
onResize: onContainerResize,
|
|
149
141
|
children: _jsxs("div", {
|
|
@@ -164,7 +156,6 @@ var Splitter = function Splitter(props) {
|
|
|
164
156
|
var ariaMaxStart = (stackSizes[idx - 1] || 0) + itemPtgMaxSizes[idx];
|
|
165
157
|
var ariaMaxEnd = (stackSizes[idx + 1] || 100) - itemPtgMinSizes[idx + 1];
|
|
166
158
|
splitBar = _jsx(SplitBar, {
|
|
167
|
-
lazy: lazy,
|
|
168
159
|
index: idx,
|
|
169
160
|
active: movingIndex === idx,
|
|
170
161
|
prefixCls: prefixCls,
|
|
@@ -176,16 +167,15 @@ var Splitter = function Splitter(props) {
|
|
|
176
167
|
startCollapsible: resizableInfo.startCollapsible,
|
|
177
168
|
endCollapsible: resizableInfo.endCollapsible,
|
|
178
169
|
onOffsetStart: onInternalResizeStart,
|
|
179
|
-
onOffsetUpdate: function onOffsetUpdate(index, offsetX, offsetY
|
|
170
|
+
onOffsetUpdate: function onOffsetUpdate(index, offsetX, offsetY) {
|
|
180
171
|
var offset = isVertical ? offsetY : offsetX;
|
|
181
172
|
if (reverse) {
|
|
182
173
|
offset = -offset;
|
|
183
174
|
}
|
|
184
|
-
onInternalResizeUpdate(index, offset
|
|
175
|
+
onInternalResizeUpdate(index, offset);
|
|
185
176
|
},
|
|
186
177
|
onOffsetEnd: onInternalResizeEnd,
|
|
187
|
-
onCollapse: onInternalCollapse
|
|
188
|
-
containerSize: containerSize || 0
|
|
178
|
+
onCollapse: onInternalCollapse
|
|
189
179
|
});
|
|
190
180
|
}
|
|
191
181
|
return _jsxs(React.Fragment, {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
export default function useResizable(items, pxSizes
|
|
2
|
+
export default function useResizable(items, pxSizes) {
|
|
3
3
|
return React.useMemo(function () {
|
|
4
4
|
var resizeInfos = [];
|
|
5
5
|
for (var i = 0; i < items.length - 1; i += 1) {
|
|
@@ -34,8 +34,8 @@ export default function useResizable(items, pxSizes, isRTL) {
|
|
|
34
34
|
prevCollapsible.end && prevSize === 0 && nextSize > 0;
|
|
35
35
|
resizeInfos[i] = {
|
|
36
36
|
resizable: mergedResizable,
|
|
37
|
-
startCollapsible: !!
|
|
38
|
-
endCollapsible: !!
|
|
37
|
+
startCollapsible: !!startCollapsible,
|
|
38
|
+
endCollapsible: !!endCollapsible
|
|
39
39
|
};
|
|
40
40
|
}
|
|
41
41
|
return resizeInfos;
|
|
@@ -13,7 +13,7 @@ import { getPtg } from './useSizes';
|
|
|
13
13
|
/**
|
|
14
14
|
* Handle user drag resize logic.
|
|
15
15
|
*/
|
|
16
|
-
export default function useResize(items, resizableInfos, percentSizes, containerSize, updateSizes
|
|
16
|
+
export default function useResize(items, resizableInfos, percentSizes, containerSize, updateSizes) {
|
|
17
17
|
var limitSizes = items.map(function (item) {
|
|
18
18
|
return [item.min, item.max];
|
|
19
19
|
});
|
|
@@ -33,7 +33,6 @@ export default function useResize(items, resizableInfos, percentSizes, container
|
|
|
33
33
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
34
34
|
cacheSizes = _React$useState2[0],
|
|
35
35
|
setCacheSizes = _React$useState2[1];
|
|
36
|
-
var cacheCollapsedSize = React.useRef([]);
|
|
37
36
|
/**
|
|
38
37
|
* When start drag, check the direct is `start` or `end`.
|
|
39
38
|
* This will handle when 2 splitter bar are in the same position.
|
|
@@ -112,16 +111,14 @@ export default function useResize(items, resizableInfos, percentSizes, container
|
|
|
112
111
|
// ======================= Collapse =======================
|
|
113
112
|
var onCollapse = function onCollapse(index, type) {
|
|
114
113
|
var currentSizes = getPxSizes();
|
|
115
|
-
var
|
|
116
|
-
var
|
|
117
|
-
var targetIndex = adjustedType === 'start' ? index + 1 : index;
|
|
114
|
+
var currentIndex = type === 'start' ? index : index + 1;
|
|
115
|
+
var targetIndex = type === 'start' ? index + 1 : index;
|
|
118
116
|
var currentSize = currentSizes[currentIndex];
|
|
119
117
|
var targetSize = currentSizes[targetIndex];
|
|
120
118
|
if (currentSize !== 0 && targetSize !== 0) {
|
|
121
119
|
// Collapse directly
|
|
122
120
|
currentSizes[currentIndex] = 0;
|
|
123
121
|
currentSizes[targetIndex] += currentSize;
|
|
124
|
-
cacheCollapsedSize.current[index] = currentSize;
|
|
125
122
|
} else {
|
|
126
123
|
var totalSize = currentSize + targetSize;
|
|
127
124
|
var currentSizeMin = getLimitSize(limitSizes[currentIndex][0], 0);
|
|
@@ -130,17 +127,9 @@ export default function useResize(items, resizableInfos, percentSizes, container
|
|
|
130
127
|
var targetSizeMax = getLimitSize(limitSizes[targetIndex][1], mergedContainerSize);
|
|
131
128
|
var limitStart = Math.max(currentSizeMin, totalSize - targetSizeMax);
|
|
132
129
|
var limitEnd = Math.min(currentSizeMax, totalSize - targetSizeMin);
|
|
133
|
-
var halfOffset =
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
var shouldUseCache = targetCacheCollapsedSize && targetCacheCollapsedSize <= targetSizeMax && targetCacheCollapsedSize >= targetSizeMin && currentCacheCollapsedSize <= currentSizeMax && currentCacheCollapsedSize >= currentSizeMin;
|
|
137
|
-
if (shouldUseCache) {
|
|
138
|
-
currentSizes[targetIndex] = targetCacheCollapsedSize;
|
|
139
|
-
currentSizes[currentIndex] = currentCacheCollapsedSize;
|
|
140
|
-
} else {
|
|
141
|
-
currentSizes[currentIndex] -= halfOffset;
|
|
142
|
-
currentSizes[targetIndex] += halfOffset;
|
|
143
|
-
}
|
|
130
|
+
var halfOffset = (limitEnd - limitStart) / 2;
|
|
131
|
+
currentSizes[currentIndex] -= halfOffset;
|
|
132
|
+
currentSizes[targetIndex] += halfOffset;
|
|
144
133
|
}
|
|
145
134
|
updateSizes(currentSizes);
|
|
146
135
|
return currentSizes;
|
|
@@ -39,22 +39,11 @@ var genSplitterStyle = function genSplitterStyle(token) {
|
|
|
39
39
|
splitTriggerSize = token.splitTriggerSize,
|
|
40
40
|
controlItemBgHover = token.controlItemBgHover,
|
|
41
41
|
controlItemBgActive = token.controlItemBgActive,
|
|
42
|
-
controlItemBgActiveHover = token.controlItemBgActiveHover
|
|
43
|
-
prefixCls = token.prefixCls;
|
|
42
|
+
controlItemBgActiveHover = token.controlItemBgActiveHover;
|
|
44
43
|
var splitBarCls = "".concat(componentCls, "-bar");
|
|
45
44
|
var splitMaskCls = "".concat(componentCls, "-mask");
|
|
46
45
|
var splitPanelCls = "".concat(componentCls, "-panel");
|
|
47
46
|
var halfTriggerSize = token.calc(splitTriggerSize).div(2).equal();
|
|
48
|
-
var splitterBarPreviewOffsetVar = "".concat(prefixCls, "-bar-preview-offset");
|
|
49
|
-
var splitterBarPreviewStyle = {
|
|
50
|
-
position: 'absolute',
|
|
51
|
-
background: token.colorPrimary,
|
|
52
|
-
opacity: 0.2,
|
|
53
|
-
pointerEvents: 'none',
|
|
54
|
-
transition: 'none',
|
|
55
|
-
zIndex: 1,
|
|
56
|
-
display: 'none'
|
|
57
|
-
};
|
|
58
47
|
return _defineProperty({}, componentCls, _objectSpread(_objectSpread({}, resetComponent(token)), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
|
|
59
48
|
display: 'flex',
|
|
60
49
|
width: '100%',
|
|
@@ -97,7 +86,7 @@ var genSplitterStyle = function genSplitterStyle(token) {
|
|
|
97
86
|
display: 'none'
|
|
98
87
|
}
|
|
99
88
|
}))), "".concat(splitBarCls, "-collapse-bar"), _objectSpread(_objectSpread({}, centerStyle), {}, {
|
|
100
|
-
zIndex:
|
|
89
|
+
zIndex: 1,
|
|
101
90
|
background: controlItemBgHover,
|
|
102
91
|
fontSize: token.fontSizeSM,
|
|
103
92
|
borderRadius: token.borderRadiusXS,
|
|
@@ -107,9 +96,6 @@ var genSplitterStyle = function genSplitterStyle(token) {
|
|
|
107
96
|
display: 'flex',
|
|
108
97
|
alignItems: 'center',
|
|
109
98
|
justifyContent: 'center',
|
|
110
|
-
'@media(hover:none)': {
|
|
111
|
-
opacity: 1
|
|
112
|
-
},
|
|
113
99
|
// Hover
|
|
114
100
|
'&:hover': {
|
|
115
101
|
background: controlItemBgActive
|
|
@@ -132,15 +118,9 @@ var genSplitterStyle = function genSplitterStyle(token) {
|
|
|
132
118
|
}
|
|
133
119
|
}), '&-horizontal', _defineProperty({
|
|
134
120
|
flexDirection: 'row'
|
|
135
|
-
}, "> ".concat(splitBarCls), _defineProperty(_defineProperty(
|
|
121
|
+
}, "> ".concat(splitBarCls), _defineProperty(_defineProperty({
|
|
136
122
|
width: 0
|
|
137
|
-
}, "".concat(splitBarCls, "-
|
|
138
|
-
height: '100%',
|
|
139
|
-
width: splitBarSize
|
|
140
|
-
}, splitterBarPreviewStyle), {}, _defineProperty({}, "&".concat(splitBarCls, "-preview-active"), {
|
|
141
|
-
display: 'block',
|
|
142
|
-
transform: "translateX(var(--".concat(splitterBarPreviewOffsetVar, "))")
|
|
143
|
-
}))), "".concat(splitBarCls, "-dragger"), {
|
|
123
|
+
}, "".concat(splitBarCls, "-dragger"), {
|
|
144
124
|
cursor: 'col-resize',
|
|
145
125
|
height: '100%',
|
|
146
126
|
width: splitTriggerSize,
|
|
@@ -179,15 +159,9 @@ var genSplitterStyle = function genSplitterStyle(token) {
|
|
|
179
159
|
}
|
|
180
160
|
}))), '&-vertical', _defineProperty({
|
|
181
161
|
flexDirection: 'column'
|
|
182
|
-
}, "> ".concat(splitBarCls), _defineProperty(_defineProperty(
|
|
162
|
+
}, "> ".concat(splitBarCls), _defineProperty(_defineProperty({
|
|
183
163
|
height: 0
|
|
184
|
-
}, "".concat(splitBarCls, "-
|
|
185
|
-
height: splitBarSize,
|
|
186
|
-
width: '100%'
|
|
187
|
-
}, splitterBarPreviewStyle), {}, _defineProperty({}, "&".concat(splitBarCls, "-preview-active"), {
|
|
188
|
-
display: 'block',
|
|
189
|
-
transform: "translateY(var(--".concat(splitterBarPreviewOffsetVar, "))")
|
|
190
|
-
}))), "".concat(splitBarCls, "-dragger"), {
|
|
164
|
+
}, "".concat(splitBarCls, "-dragger"), {
|
|
191
165
|
cursor: 'row-resize',
|
|
192
166
|
width: '100%',
|
|
193
167
|
height: splitTriggerSize,
|
|
@@ -11,11 +11,13 @@ var prepareComponentToken = function prepareComponentToken(token) {
|
|
|
11
11
|
var genCustomButtonStyle = function genCustomButtonStyle(token) {
|
|
12
12
|
var prefixCls = token.antCls;
|
|
13
13
|
var componentCls = "".concat(prefixCls, "-btn");
|
|
14
|
-
return _defineProperty({}, "".concat(componentCls).concat(componentCls, "-wrapper"), _defineProperty(_defineProperty(_defineProperty({
|
|
14
|
+
return _defineProperty({}, "".concat(componentCls).concat(componentCls, "-wrapper"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
|
|
15
15
|
display: "inline-flex !important",
|
|
16
16
|
alignItems: "center",
|
|
17
17
|
justifyContent: "center"
|
|
18
|
-
}, "
|
|
18
|
+
}, "".concat(componentCls, "-icon"), {
|
|
19
|
+
display: "inline-flex"
|
|
20
|
+
}), "&".concat(componentCls, "-text,&").concat(componentCls, "-link"), {
|
|
19
21
|
padding: "0 !important",
|
|
20
22
|
border: "none !important",
|
|
21
23
|
height: "20px",
|
package/lib/CWSelect/index.js
CHANGED
|
@@ -1,13 +1,8 @@
|
|
|
1
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
|
-
import _Checkbox from "@chaoswise/ui/lib/Checkbox";
|
|
3
2
|
import _Tooltip from "@chaoswise/ui/lib/Tooltip";
|
|
4
3
|
import _Tag from "@chaoswise/ui/lib/Tag";
|
|
5
|
-
var _excluded = ["selectLabel", "label", "prefix", "defaultValue", "mode", "value", "labelInValue", "onChange", "onSelect", "onDeselect", "onDragEnd", "tagRender", "allowDrag", "maxTagCount", "
|
|
4
|
+
var _excluded = ["selectLabel", "label", "prefix", "defaultValue", "mode", "value", "labelInValue", "onChange", "onSelect", "onDeselect", "onDragEnd", "tagRender", "allowDrag", "maxTagCount", "tagLabelRender", "maxTagTextLength", "dropdownRender", "children", "maxCount"];
|
|
6
5
|
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); }
|
|
7
|
-
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
|
|
8
|
-
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."); }
|
|
9
|
-
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
|
|
10
|
-
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
|
|
11
6
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
12
7
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
13
8
|
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; }
|
|
@@ -31,41 +26,8 @@ import { DndProvider } from "react-dnd";
|
|
|
31
26
|
import { cloneComProps } from "../utils";
|
|
32
27
|
import update from "immutability-helper";
|
|
33
28
|
import PropTypes from "prop-types";
|
|
34
|
-
import { useIntl } from "../locales";
|
|
35
29
|
import useStyle from "./index.style";
|
|
36
30
|
|
|
37
|
-
/**
|
|
38
|
-
* 多选模式的默认配置选项
|
|
39
|
-
* @type {Object}
|
|
40
|
-
* @property {boolean} showCheckbox - 是否显示复选框
|
|
41
|
-
* @property {boolean} showSelectAll - 是否显示全选选项
|
|
42
|
-
* @property {boolean} isCheckboxMultipleHasSelectAll - 复选框多选模式是否包含全选功能
|
|
43
|
-
*/
|
|
44
|
-
var DEFAULT_MULTIPLE_OPTIONS = {
|
|
45
|
-
showCheckbox: false,
|
|
46
|
-
showSelectAll: true,
|
|
47
|
-
isCheckboxMultipleHasSelectAll: true
|
|
48
|
-
};
|
|
49
|
-
|
|
50
|
-
/**
|
|
51
|
-
* 安全获取嵌套对象属性值的辅助函数
|
|
52
|
-
* @param {Object} obj - 目标对象
|
|
53
|
-
* @param {Array} path - 属性路径数组
|
|
54
|
-
* @param {*} defaultValue - 默认值
|
|
55
|
-
* @returns {*} 获取到的值或默认值
|
|
56
|
-
*/
|
|
57
|
-
var getNestedValue = function getNestedValue(obj, path) {
|
|
58
|
-
var defaultValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
|
|
59
|
-
try {
|
|
60
|
-
var _path$reduce;
|
|
61
|
-
return (_path$reduce = path.reduce(function (current, key) {
|
|
62
|
-
return current === null || current === void 0 ? void 0 : current[key];
|
|
63
|
-
}, obj)) !== null && _path$reduce !== void 0 ? _path$reduce : defaultValue;
|
|
64
|
-
} catch (_unused) {
|
|
65
|
-
return defaultValue;
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
|
|
69
31
|
/**
|
|
70
32
|
* 检查是否为有效数组(非空数组)的辅助函数
|
|
71
33
|
* @param {*} arr - 待检查的值
|
|
@@ -77,7 +39,7 @@ var isValidArray = function isValidArray(arr) {
|
|
|
77
39
|
|
|
78
40
|
/**
|
|
79
41
|
* CWSelect 组件 - 增强版的 Select 选择器
|
|
80
|
-
*
|
|
42
|
+
* 支持多选、拖拽排序、标签自定义等功能
|
|
81
43
|
*
|
|
82
44
|
* @param {Object} props - 组件属性
|
|
83
45
|
* @param {React.Ref} ref - 组件引用
|
|
@@ -104,19 +66,12 @@ var CWSelect = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
104
66
|
_props$allowDrag = props.allowDrag,
|
|
105
67
|
allowDrag = _props$allowDrag === void 0 ? false : _props$allowDrag,
|
|
106
68
|
maxTagCount = props.maxTagCount,
|
|
107
|
-
_props$showCheckbox = props.showCheckbox,
|
|
108
|
-
showCheckbox = _props$showCheckbox === void 0 ? false : _props$showCheckbox,
|
|
109
69
|
tagLabelRender = props.tagLabelRender,
|
|
110
70
|
maxTagTextLength = props.maxTagTextLength,
|
|
111
71
|
dropdownRender = props.dropdownRender,
|
|
112
|
-
_props$multipleOption = props.multipleOptions,
|
|
113
|
-
multipleOptions = _props$multipleOption === void 0 ? DEFAULT_MULTIPLE_OPTIONS : _props$multipleOption,
|
|
114
72
|
children = props.children,
|
|
115
73
|
maxCount = props.maxCount,
|
|
116
74
|
rest = _objectWithoutProperties(props, _excluded);
|
|
117
|
-
|
|
118
|
-
// 获取国际化和样式相关的 hooks
|
|
119
|
-
var intl = useIntl();
|
|
120
75
|
var _useConfigContext = useConfigContext(),
|
|
121
76
|
getPrefixCls = _useConfigContext.getPrefixCls;
|
|
122
77
|
var prefixCls = getPrefixCls("select");
|
|
@@ -148,22 +103,6 @@ var CWSelect = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
148
103
|
return prefix || label || selectLabel;
|
|
149
104
|
}, [prefix, label, selectLabel]);
|
|
150
105
|
|
|
151
|
-
/**
|
|
152
|
-
* 判断是否应该显示复选框
|
|
153
|
-
* 条件:多选模式 && (showCheckbox 为 true 或 multipleOptions.showCheckbox 为 true)
|
|
154
|
-
*/
|
|
155
|
-
var shouldShowCheckbox = useMemo(function () {
|
|
156
|
-
return mode === "multiple" && (showCheckbox || multipleOptions.showCheckbox);
|
|
157
|
-
}, [mode, showCheckbox, multipleOptions.showCheckbox]);
|
|
158
|
-
|
|
159
|
-
/**
|
|
160
|
-
* 判断是否应该显示全选功能
|
|
161
|
-
* 条件:配置允许全选 && 没有设置最大选择数量 && 显示复选框
|
|
162
|
-
*/
|
|
163
|
-
var shouldShowCheckAll = useMemo(function () {
|
|
164
|
-
return multipleOptions.isCheckboxMultipleHasSelectAll && !("maxCount" in props) && shouldShowCheckbox;
|
|
165
|
-
}, [multipleOptions.isCheckboxMultipleHasSelectAll, props, shouldShowCheckbox]);
|
|
166
|
-
|
|
167
106
|
/**
|
|
168
107
|
* 从数组值构建键值索引映射的函数
|
|
169
108
|
* @param {Array|*} _value - 输入值
|
|
@@ -196,7 +135,7 @@ var CWSelect = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
196
135
|
return key !== undefined && key !== null;
|
|
197
136
|
});
|
|
198
137
|
keyIndexMapRef.current = newKeyIndexMap;
|
|
199
|
-
//
|
|
138
|
+
// fixed 节点详情拿不到
|
|
200
139
|
setTimeout(function () {
|
|
201
140
|
return setAllInstance(allKeys);
|
|
202
141
|
}, 0);
|
|
@@ -374,161 +313,6 @@ var CWSelect = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
374
313
|
return null;
|
|
375
314
|
}, [allowDrag, maxTagCount, renderTag, moveNode, tagDropdownOverlay, prefixCls, rest.disabled, handlePreventMouseDown, activeKey, allOptions, handleChange, onDeselect, maxTagTextLength, tagLabelRender]);
|
|
376
315
|
|
|
377
|
-
/**
|
|
378
|
-
* 处理全选/取消全选的回调函数
|
|
379
|
-
* @param {Event} e - 复选框事件
|
|
380
|
-
* @param {Array} currentDataSource - 当前数据源
|
|
381
|
-
* @param {Array} originDataSource - 原始数据源
|
|
382
|
-
*/
|
|
383
|
-
var handleCheckAllChange = useCallback(function (e, currentDataSource, originDataSource) {
|
|
384
|
-
if (!isValidArray(currentDataSource)) return;
|
|
385
|
-
var isChecked = e.target.checked;
|
|
386
|
-
|
|
387
|
-
// 获取原始激活的数据源
|
|
388
|
-
var originActiveDataSource = originDataSource.filter(function (item) {
|
|
389
|
-
return activeKey.some(function (activeItem) {
|
|
390
|
-
return labelInValue ? (activeItem === null || activeItem === void 0 ? void 0 : activeItem.value) === (item === null || item === void 0 ? void 0 : item.value) : activeItem === (item === null || item === void 0 ? void 0 : item.value);
|
|
391
|
-
});
|
|
392
|
-
});
|
|
393
|
-
|
|
394
|
-
// 转换当前数据源为键值格式
|
|
395
|
-
var currentDataSourceKeys = currentDataSource.map(function (item) {
|
|
396
|
-
return labelInValue ? {
|
|
397
|
-
value: item === null || item === void 0 ? void 0 : item.value,
|
|
398
|
-
label: item === null || item === void 0 ? void 0 : item.children
|
|
399
|
-
} : item === null || item === void 0 ? void 0 : item.value;
|
|
400
|
-
}).filter(Boolean);
|
|
401
|
-
var newActiveKey = [];
|
|
402
|
-
var newActiveDataSource = [];
|
|
403
|
-
if (isChecked) {
|
|
404
|
-
// 全选:合并原有选中项和当前数据源
|
|
405
|
-
newActiveDataSource = Array.from(new Set([].concat(_toConsumableArray(originActiveDataSource), _toConsumableArray(currentDataSource))));
|
|
406
|
-
newActiveKey = Array.from(new Set([].concat(_toConsumableArray(activeKey), _toConsumableArray(currentDataSourceKeys))));
|
|
407
|
-
onSelect(currentDataSourceKeys, currentDataSource);
|
|
408
|
-
} else {
|
|
409
|
-
// 取消全选:从原有选中项中移除当前数据源
|
|
410
|
-
newActiveDataSource = originActiveDataSource.filter(function (item) {
|
|
411
|
-
return !currentDataSource.some(function (current) {
|
|
412
|
-
return (current === null || current === void 0 ? void 0 : current.value) === (item === null || item === void 0 ? void 0 : item.value);
|
|
413
|
-
});
|
|
414
|
-
});
|
|
415
|
-
newActiveKey = activeKey.filter(function (item) {
|
|
416
|
-
return !currentDataSourceKeys.some(function (current) {
|
|
417
|
-
return labelInValue ? (item === null || item === void 0 ? void 0 : item.value) === (current === null || current === void 0 ? void 0 : current.value) : item === current;
|
|
418
|
-
});
|
|
419
|
-
});
|
|
420
|
-
onDeselect(currentDataSourceKeys, currentDataSource);
|
|
421
|
-
}
|
|
422
|
-
handleChange(newActiveKey, newActiveDataSource);
|
|
423
|
-
}, [activeKey, labelInValue, onSelect, onDeselect, handleChange]);
|
|
424
|
-
|
|
425
|
-
/**
|
|
426
|
-
* 自定义下拉框渲染函数
|
|
427
|
-
* 处理复选框模式下的全选功能和空状态显示
|
|
428
|
-
* @param {React.ReactNode} originNode - 原始下拉框节点
|
|
429
|
-
* @returns {React.ReactNode} 自定义渲染的下拉框内容
|
|
430
|
-
*/
|
|
431
|
-
var customDropdownRender = useCallback(function (originNode) {
|
|
432
|
-
// 从 React 内部属性中获取下拉框的状态数据
|
|
433
|
-
var memoizedProps = getNestedValue(originNode, ["_owner", "return", "memoizedProps", "value"], {});
|
|
434
|
-
var flattenOptions = memoizedProps.flattenOptions || [];
|
|
435
|
-
var originDataSource = memoizedProps.options || [];
|
|
436
|
-
var activeValues = Array.from(memoizedProps.rawValues || []);
|
|
437
|
-
|
|
438
|
-
// 提取有效的数据源(过滤掉分组选项)
|
|
439
|
-
var dataSource = flattenOptions.filter(function (item) {
|
|
440
|
-
return item && Object.prototype.hasOwnProperty.call(item, "groupOption");
|
|
441
|
-
}).map(function (item) {
|
|
442
|
-
return item.data;
|
|
443
|
-
}).filter(Boolean);
|
|
444
|
-
|
|
445
|
-
// 空状态处理:没有数据时显示空状态提示
|
|
446
|
-
if (!isValidArray(dataSource)) {
|
|
447
|
-
var emptyContent = rest.notFoundContent || /*#__PURE__*/React.createElement("div", {
|
|
448
|
-
className: "".concat(prefixCls, "-show-checkbox-empty")
|
|
449
|
-
}, intl.get("812f44fc-ed3c-4bd3-8ad5-35cd2996c5ae").d("未查找到任何结果"));
|
|
450
|
-
return emptyContent;
|
|
451
|
-
}
|
|
452
|
-
|
|
453
|
-
// 计算全选状态
|
|
454
|
-
var dataSourceValues = dataSource.map(function (item) {
|
|
455
|
-
return item === null || item === void 0 ? void 0 : item.value;
|
|
456
|
-
}).filter(Boolean);
|
|
457
|
-
var filterActiveValues = dataSourceValues.filter(function (value) {
|
|
458
|
-
return activeValues.includes(value);
|
|
459
|
-
});
|
|
460
|
-
var isAllSelected = filterActiveValues.length === dataSource.length && dataSource.length > 0;
|
|
461
|
-
var isIndeterminate = filterActiveValues.length > 0 && !isAllSelected;
|
|
462
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, shouldShowCheckAll && /*#__PURE__*/React.createElement("div", {
|
|
463
|
-
className: "".concat(prefixCls, "-check-all"),
|
|
464
|
-
onMouseDown: handlePreventMouseDown
|
|
465
|
-
}, /*#__PURE__*/React.createElement(_Checkbox, {
|
|
466
|
-
indeterminate: isIndeterminate // 半选状态
|
|
467
|
-
,
|
|
468
|
-
checked: isAllSelected // 全选状态
|
|
469
|
-
,
|
|
470
|
-
onChange: function onChange(e) {
|
|
471
|
-
return handleCheckAllChange(e, dataSource, originDataSource);
|
|
472
|
-
},
|
|
473
|
-
style: {
|
|
474
|
-
width: "100%"
|
|
475
|
-
}
|
|
476
|
-
}, intl.get("3991a1d0-65a8-45ca-94a4-f89fbd9f8555").d("全选"), "\uFF08", filterActiveValues.length, "/", dataSource.length, "\uFF09")), originNode);
|
|
477
|
-
}, [shouldShowCheckAll, prefixCls, handlePreventMouseDown, handleCheckAllChange, intl, rest.notFoundContent]);
|
|
478
|
-
|
|
479
|
-
/**
|
|
480
|
-
* 渲染复选框选项的函数
|
|
481
|
-
* @param {React.ReactElement} child - 子选项元素
|
|
482
|
-
* @returns {React.ReactElement|null} 渲染的复选框选项
|
|
483
|
-
*/
|
|
484
|
-
var renderCheckboxItem = useCallback(function (child) {
|
|
485
|
-
if (!(child !== null && child !== void 0 && child.props)) return null;
|
|
486
|
-
var childValue = child.props.value;
|
|
487
|
-
// 判断当前选项是否被选中
|
|
488
|
-
var isChecked = labelInValue ? activeKey.some(function (item) {
|
|
489
|
-
return (item === null || item === void 0 ? void 0 : item.value) === childValue;
|
|
490
|
-
}) : activeKey.includes(childValue);
|
|
491
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
492
|
-
key: child.key || childValue,
|
|
493
|
-
className: "".concat(prefixCls, "-checkbox-item")
|
|
494
|
-
}, /*#__PURE__*/React.createElement(_Checkbox, {
|
|
495
|
-
disabled: child.props.disabled,
|
|
496
|
-
checked: isChecked
|
|
497
|
-
}), /*#__PURE__*/React.createElement("span", {
|
|
498
|
-
className: "".concat(prefixCls, "-item-children")
|
|
499
|
-
}, child.props.children));
|
|
500
|
-
}, [activeKey, labelInValue, prefixCls]);
|
|
501
|
-
|
|
502
|
-
/**
|
|
503
|
-
* 处理子元素,在复选框模式下为每个选项添加复选框
|
|
504
|
-
*/
|
|
505
|
-
var processedChildren = useMemo(function () {
|
|
506
|
-
if (!shouldShowCheckbox || !children) return children;
|
|
507
|
-
return React.Children.map(children, function (child) {
|
|
508
|
-
var _child$props, _child$props2;
|
|
509
|
-
if (!child) return null;
|
|
510
|
-
|
|
511
|
-
// 处理选项组(OptGroup)
|
|
512
|
-
if (Array.isArray((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children)) {
|
|
513
|
-
var groupChildren = React.Children.map(child.props.children, function (optGroupChild) {
|
|
514
|
-
var _optGroupChild$props;
|
|
515
|
-
if (!optGroupChild) return null;
|
|
516
|
-
return /*#__PURE__*/React.cloneElement(optGroupChild, {
|
|
517
|
-
key: optGroupChild.key || ((_optGroupChild$props = optGroupChild.props) === null || _optGroupChild$props === void 0 ? void 0 : _optGroupChild$props.value)
|
|
518
|
-
}, renderCheckboxItem(optGroupChild));
|
|
519
|
-
}).filter(Boolean);
|
|
520
|
-
return /*#__PURE__*/React.cloneElement(child, {
|
|
521
|
-
key: child.key
|
|
522
|
-
}, groupChildren);
|
|
523
|
-
}
|
|
524
|
-
|
|
525
|
-
// 处理普通选项
|
|
526
|
-
return /*#__PURE__*/React.cloneElement(child, {
|
|
527
|
-
key: child.key || ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.value)
|
|
528
|
-
}, renderCheckboxItem(child));
|
|
529
|
-
}).filter(Boolean);
|
|
530
|
-
}, [shouldShowCheckbox, children, renderCheckboxItem]);
|
|
531
|
-
|
|
532
316
|
/**
|
|
533
317
|
* 计算最终的 value 值
|
|
534
318
|
* 受控模式:使用传入的 value
|
|
@@ -538,8 +322,8 @@ var CWSelect = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
538
322
|
if ("value" in props) {
|
|
539
323
|
return value;
|
|
540
324
|
}
|
|
541
|
-
return
|
|
542
|
-
}, [props, value,
|
|
325
|
+
return allowDrag ? activeKey : value;
|
|
326
|
+
}, [props, value, allowDrag, activeKey]);
|
|
543
327
|
|
|
544
328
|
// 渲染组件
|
|
545
329
|
return wrapCSSVar(/*#__PURE__*/React.createElement(DndProvider, {
|
|
@@ -555,10 +339,10 @@ var CWSelect = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
555
339
|
menuItemSelectedIcon: null,
|
|
556
340
|
onSelect: onSelect,
|
|
557
341
|
onDeselect: onDeselect,
|
|
558
|
-
dropdownRender: dropdownRender
|
|
342
|
+
dropdownRender: dropdownRender,
|
|
559
343
|
labelInValue: labelInValue,
|
|
560
344
|
maxCount: maxCount
|
|
561
|
-
}, rest),
|
|
345
|
+
}, rest), children)));
|
|
562
346
|
});
|
|
563
347
|
|
|
564
348
|
// PropTypes 类型定义
|
|
@@ -601,22 +385,11 @@ CWSelect.propTypes = {
|
|
|
601
385
|
// 是否允许拖拽
|
|
602
386
|
onDragEnd: PropTypes.func,
|
|
603
387
|
// 拖拽结束回调
|
|
604
|
-
showCheckbox: PropTypes.bool,
|
|
605
|
-
// 是否显示复选框
|
|
606
388
|
listHeight: PropTypes.number,
|
|
607
389
|
// 列表高度
|
|
608
390
|
selectLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
609
391
|
// 选择器标签
|
|
610
|
-
label: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
|
|
611
|
-
// 标签
|
|
612
|
-
multipleOptions: PropTypes.shape({
|
|
613
|
-
// 多选配置选项
|
|
614
|
-
showCheckbox: PropTypes.bool,
|
|
615
|
-
// 是否显示复选框
|
|
616
|
-
showSelectAll: PropTypes.bool,
|
|
617
|
-
// 是否显示全选
|
|
618
|
-
isCheckboxMultipleHasSelectAll: PropTypes.bool // 复选框多选是否包含全选
|
|
619
|
-
})
|
|
392
|
+
label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]) // 标签
|
|
620
393
|
};
|
|
621
394
|
|
|
622
395
|
// 设置组件显示名称
|
package/lib/Collapse/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
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
|
-
var _excluded = ["size", "expandIcon", "
|
|
2
|
+
var _excluded = ["size", "expandIcon", "className", "expandIconPosition", "ghost", "isHasBackground"];
|
|
3
3
|
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); }
|
|
4
4
|
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; }
|
|
5
5
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
@@ -23,7 +23,6 @@ import useStyle from "./index.style";
|
|
|
23
23
|
var CWCollapse = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
24
24
|
var size = props.size,
|
|
25
25
|
expandIcon = props.expandIcon,
|
|
26
|
-
bordered = props.bordered,
|
|
27
26
|
className = props.className,
|
|
28
27
|
expandIconPosition = props.expandIconPosition,
|
|
29
28
|
ghost = props.ghost,
|
package/lib/Header/index.js
CHANGED
|
@@ -220,9 +220,7 @@ function CWHeader(_ref) {
|
|
|
220
220
|
component: homeIconSvg
|
|
221
221
|
})) : null, showTopNavigation && (topNavigationType === "fold" ? /*#__PURE__*/React.createElement(_Dropdown, {
|
|
222
222
|
trigger: topNavigationTrigger,
|
|
223
|
-
overlayClassName: classnames("".concat(prefixCls, "-cw-header-dropdown-out-wrapper"),
|
|
224
|
-
topNavigationClassName: topNavigationClassName
|
|
225
|
-
}),
|
|
223
|
+
overlayClassName: classnames("".concat(prefixCls, "-cw-header-dropdown-out-wrapper"), topNavigationClassName),
|
|
226
224
|
overlay: renderTopNavigationMenu(),
|
|
227
225
|
open: visible,
|
|
228
226
|
onOpenChange: function onOpenChange(pre) {
|