@aloudata/aloudata-design 2.19.0 → 2.19.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/MemberPicker/components/MemberSelection.d.ts +6 -0
- package/dist/MemberPicker/components/MemberSelection.js +37 -13
- package/dist/MemberPicker/components/Panel.d.ts +8 -0
- package/dist/MemberPicker/components/Panel.js +14 -7
- package/dist/MemberPicker/components/PanelWrapper.d.ts +9 -1
- package/dist/MemberPicker/components/PanelWrapper.js +6 -2
- package/dist/MemberPicker/components/SelectedMemberTags.d.ts +2 -1
- package/dist/MemberPicker/components/SelectedMemberTags.js +7 -2
- package/dist/MemberPicker/components/UserGroupSelection.d.ts +8 -1
- package/dist/MemberPicker/components/UserGroupSelection.js +32 -20
- package/dist/MemberPicker/index.js +6 -2
- package/dist/MemberPicker/interface.d.ts +8 -0
- package/dist/Table/components/DndWrapper.d.ts +10 -0
- package/dist/Table/components/DndWrapper.js +38 -0
- package/dist/Table/hooks/useRowDnd.js +12 -3
- package/dist/Table/index.js +2 -5
- package/dist/Tabs/style/index.less +1 -0
- package/dist/ald.min.css +1 -1
- package/dist/notification/index.js +1 -1
- package/package.json +1 -1
|
@@ -11,6 +11,12 @@ interface IMemberSelectionProps {
|
|
|
11
11
|
width: number;
|
|
12
12
|
filterItem?: (item: IUser) => boolean;
|
|
13
13
|
lockedIds: Array<TUserValue | TUserGroupValue>;
|
|
14
|
+
renderItem?: (item: IUser, context: {
|
|
15
|
+
isSelected: boolean;
|
|
16
|
+
disabled: boolean;
|
|
17
|
+
onClick: () => void;
|
|
18
|
+
originNode: React.ReactNode;
|
|
19
|
+
}) => React.ReactNode;
|
|
14
20
|
}
|
|
15
21
|
export declare const OPTION_HEIGHT = 36;
|
|
16
22
|
export declare const WRAPPER_HEIGHT = 300;
|
|
@@ -31,7 +31,8 @@ export default function MemberSelection(props) {
|
|
|
31
31
|
loading = props.loading,
|
|
32
32
|
width = props.width,
|
|
33
33
|
lockedIds = props.lockedIds,
|
|
34
|
-
filterItem = props.filterItem
|
|
34
|
+
filterItem = props.filterItem,
|
|
35
|
+
renderItem = props.renderItem;
|
|
35
36
|
var filteredList = useMemo(function () {
|
|
36
37
|
return userList.filter(function (item) {
|
|
37
38
|
if (filterItem) {
|
|
@@ -114,17 +115,7 @@ export default function MemberSelection(props) {
|
|
|
114
115
|
type: user.type
|
|
115
116
|
});
|
|
116
117
|
var disabled = index !== -1;
|
|
117
|
-
|
|
118
|
-
key: virtualItem.key,
|
|
119
|
-
style: {
|
|
120
|
-
position: 'absolute',
|
|
121
|
-
top: 0,
|
|
122
|
-
left: 0,
|
|
123
|
-
width: '100%',
|
|
124
|
-
height: "".concat(virtualItem.size, "px"),
|
|
125
|
-
transform: "translateY(".concat(virtualItem.start, "px)")
|
|
126
|
-
}
|
|
127
|
-
}, multiple ? /*#__PURE__*/React.createElement(MultipleOption, {
|
|
118
|
+
var originNode = multiple ? /*#__PURE__*/React.createElement(MultipleOption, {
|
|
128
119
|
key: user.userId,
|
|
129
120
|
user: user,
|
|
130
121
|
disabled: disabled,
|
|
@@ -141,6 +132,39 @@ export default function MemberSelection(props) {
|
|
|
141
132
|
onChange: function onChange(selected, user) {
|
|
142
133
|
if (isUser(user)) _onChange(selected, user);
|
|
143
134
|
}
|
|
144
|
-
})
|
|
135
|
+
});
|
|
136
|
+
if (renderItem) {
|
|
137
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
138
|
+
key: virtualItem.key,
|
|
139
|
+
style: {
|
|
140
|
+
position: 'absolute',
|
|
141
|
+
top: 0,
|
|
142
|
+
left: 0,
|
|
143
|
+
width: '100%',
|
|
144
|
+
height: "".concat(virtualItem.size, "px"),
|
|
145
|
+
transform: "translateY(".concat(virtualItem.start, "px)")
|
|
146
|
+
}
|
|
147
|
+
}, renderItem(user, {
|
|
148
|
+
isSelected: isSelected,
|
|
149
|
+
disabled: disabled,
|
|
150
|
+
onClick: function onClick() {
|
|
151
|
+
if (!disabled) {
|
|
152
|
+
_onChange(!isSelected, user);
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
originNode: originNode
|
|
156
|
+
}));
|
|
157
|
+
}
|
|
158
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
159
|
+
key: virtualItem.key,
|
|
160
|
+
style: {
|
|
161
|
+
position: 'absolute',
|
|
162
|
+
top: 0,
|
|
163
|
+
left: 0,
|
|
164
|
+
width: '100%',
|
|
165
|
+
height: "".concat(virtualItem.size, "px"),
|
|
166
|
+
transform: "translateY(".concat(virtualItem.start, "px)")
|
|
167
|
+
}
|
|
168
|
+
}, originNode);
|
|
145
169
|
})))));
|
|
146
170
|
}
|
|
@@ -14,6 +14,14 @@ interface IPanelProps {
|
|
|
14
14
|
className?: string;
|
|
15
15
|
lockedIds: Array<TUserValue | TUserGroupValue>;
|
|
16
16
|
footer?: ReactNode;
|
|
17
|
+
renderItem?: (item: IUser | IUserGroup, context: {
|
|
18
|
+
isSelected: boolean;
|
|
19
|
+
disabled: boolean;
|
|
20
|
+
onClick: () => void;
|
|
21
|
+
onNextLevel?: () => void;
|
|
22
|
+
originNode: ReactNode;
|
|
23
|
+
}) => ReactNode;
|
|
24
|
+
renderSelectedTag?: (user: IUser | IUserGroup, originNode: ReactNode) => ReactNode;
|
|
17
25
|
}
|
|
18
26
|
export declare const userDisplayNameIsRepeated: (userList: TUser, displayName?: string) => boolean;
|
|
19
27
|
export default function Panel(props: IPanelProps): React.JSX.Element;
|
|
@@ -44,7 +44,9 @@ export default function Panel(props) {
|
|
|
44
44
|
className = props.className,
|
|
45
45
|
lockedIds = props.lockedIds,
|
|
46
46
|
footer = props.footer,
|
|
47
|
-
onCancel = props.onCancel
|
|
47
|
+
onCancel = props.onCancel,
|
|
48
|
+
renderItem = props.renderItem,
|
|
49
|
+
renderSelectedTag = props.renderSelectedTag;
|
|
48
50
|
var _useState = useState([]),
|
|
49
51
|
_useState2 = _slicedToArray(_useState, 2),
|
|
50
52
|
selectedUsers = _useState2[0],
|
|
@@ -101,7 +103,8 @@ export default function Panel(props) {
|
|
|
101
103
|
onSearchValueChange: onSearchValueChange,
|
|
102
104
|
multiple: true,
|
|
103
105
|
lockedIds: lockedIds,
|
|
104
|
-
loading: props.loading
|
|
106
|
+
loading: props.loading,
|
|
107
|
+
renderItem: renderItem
|
|
105
108
|
});
|
|
106
109
|
var userGroupSelection = /*#__PURE__*/React.createElement(UserGroupSelection, {
|
|
107
110
|
className: 'ald-member-picker-member-selection-multiple',
|
|
@@ -112,7 +115,8 @@ export default function Panel(props) {
|
|
|
112
115
|
onSearchValueChange: onSearchValueChange,
|
|
113
116
|
multiple: true,
|
|
114
117
|
lockedIds: lockedIds,
|
|
115
|
-
loading: props.loading
|
|
118
|
+
loading: props.loading,
|
|
119
|
+
renderItem: renderItem
|
|
116
120
|
});
|
|
117
121
|
if (type === EMemberPicker.USER) {
|
|
118
122
|
return userSelection;
|
|
@@ -136,7 +140,7 @@ export default function Panel(props) {
|
|
|
136
140
|
className: "ald-member-tabs"
|
|
137
141
|
});
|
|
138
142
|
}
|
|
139
|
-
}, [t, dataList, panelwidth, selectedUsers, onSelectionChange, onSearchValueChange, lockedIds, props.loading, type]);
|
|
143
|
+
}, [t, dataList, panelwidth, selectedUsers, onSelectionChange, onSearchValueChange, lockedIds, props.loading, type, renderItem]);
|
|
140
144
|
return /*#__PURE__*/React.createElement("div", {
|
|
141
145
|
className: classNames(className, 'ald-member-picker-wrapper', (_classNames = {}, _defineProperty(_classNames, 'ald-member-picker-multiple', multiple), _defineProperty(_classNames, 'ald-member-picker-single', !multiple), _classNames)),
|
|
142
146
|
style: {
|
|
@@ -150,7 +154,8 @@ export default function Panel(props) {
|
|
|
150
154
|
width: (panelwidth - 3) / 2,
|
|
151
155
|
onRemove: onRemove,
|
|
152
156
|
lockedIds: lockedIds,
|
|
153
|
-
userList: dataList
|
|
157
|
+
userList: dataList,
|
|
158
|
+
renderSelectedTag: renderSelectedTag
|
|
154
159
|
}), /*#__PURE__*/React.createElement(SelectorFooter, {
|
|
155
160
|
className: 'ald-member-picker-selector-footer',
|
|
156
161
|
onCancel: onCancel,
|
|
@@ -167,7 +172,8 @@ export default function Panel(props) {
|
|
|
167
172
|
onSearchValueChange: onSearchValueChange,
|
|
168
173
|
multiple: false && multiple,
|
|
169
174
|
lockedIds: lockedIds,
|
|
170
|
-
loading: props.loading
|
|
175
|
+
loading: props.loading,
|
|
176
|
+
renderItem: renderItem
|
|
171
177
|
}), type === EMemberPicker.GROUP && /*#__PURE__*/React.createElement(UserGroupSelection, {
|
|
172
178
|
className: 'ald-member-picker-member-selection-multiple',
|
|
173
179
|
userGroupList: dataList.filter(isUserGroup),
|
|
@@ -177,6 +183,7 @@ export default function Panel(props) {
|
|
|
177
183
|
onSearchValueChange: onSearchValueChange,
|
|
178
184
|
multiple: false,
|
|
179
185
|
lockedIds: lockedIds,
|
|
180
|
-
loading: props.loading
|
|
186
|
+
loading: props.loading,
|
|
187
|
+
renderItem: renderItem
|
|
181
188
|
})));
|
|
182
189
|
}
|
|
@@ -12,6 +12,14 @@ interface IProps {
|
|
|
12
12
|
lockedIds?: Array<TUserValue | TUserGroupValue>;
|
|
13
13
|
showUserId?: boolean;
|
|
14
14
|
footer?: ReactNode;
|
|
15
|
+
renderItem?: (item: IUser | IUserGroup, context: {
|
|
16
|
+
isSelected: boolean;
|
|
17
|
+
disabled: boolean;
|
|
18
|
+
onClick: () => void;
|
|
19
|
+
onNextLevel?: () => void;
|
|
20
|
+
originNode: ReactNode;
|
|
21
|
+
}) => ReactNode;
|
|
22
|
+
renderSelectedTag?: (user: IUser | IUserGroup, originNode: ReactNode) => ReactNode;
|
|
15
23
|
}
|
|
16
|
-
export declare const PanelWrapper: ({ type, value, multiple, dropdownWidth, onChange, onCancel, className, footer, lockedIds, }: IProps) => React.JSX.Element;
|
|
24
|
+
export declare const PanelWrapper: ({ type, value, multiple, dropdownWidth, onChange, onCancel, className, footer, lockedIds, renderItem, renderSelectedTag, }: IProps) => React.JSX.Element;
|
|
17
25
|
export default PanelWrapper;
|
|
@@ -24,7 +24,9 @@ export var PanelWrapper = function PanelWrapper(_ref) {
|
|
|
24
24
|
className = _ref.className,
|
|
25
25
|
footer = _ref.footer,
|
|
26
26
|
_ref$lockedIds = _ref.lockedIds,
|
|
27
|
-
lockedIds = _ref$lockedIds === void 0 ? [] : _ref$lockedIds
|
|
27
|
+
lockedIds = _ref$lockedIds === void 0 ? [] : _ref$lockedIds,
|
|
28
|
+
renderItem = _ref.renderItem,
|
|
29
|
+
renderSelectedTag = _ref.renderSelectedTag;
|
|
28
30
|
var _useContext = useContext(LocaleContext),
|
|
29
31
|
locale = _useContext.locale;
|
|
30
32
|
var t = getTranslator(locale);
|
|
@@ -136,7 +138,9 @@ export var PanelWrapper = function PanelWrapper(_ref) {
|
|
|
136
138
|
className: className,
|
|
137
139
|
onCancel: onCancel,
|
|
138
140
|
lockedIds: lockedIds,
|
|
139
|
-
footer: footer
|
|
141
|
+
footer: footer,
|
|
142
|
+
renderItem: renderItem,
|
|
143
|
+
renderSelectedTag: renderSelectedTag
|
|
140
144
|
});
|
|
141
145
|
};
|
|
142
146
|
export default PanelWrapper;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
2
|
import { IUserGroup, TUser, TUserGroupValue, TUserValue } from '../../ConfigProvider/getUserList';
|
|
3
3
|
import { IUser } from '../interface';
|
|
4
4
|
interface ISelectedMemberTagsProps {
|
|
@@ -8,6 +8,7 @@ interface ISelectedMemberTagsProps {
|
|
|
8
8
|
width: number;
|
|
9
9
|
lockedIds: Array<TUserValue | TUserGroupValue>;
|
|
10
10
|
userList: TUser;
|
|
11
|
+
renderSelectedTag?: (user: IUser | IUserGroup, originNode: ReactNode) => ReactNode;
|
|
11
12
|
}
|
|
12
13
|
export default function SelectedMemberTags(props: ISelectedMemberTagsProps): React.JSX.Element;
|
|
13
14
|
export {};
|
|
@@ -14,7 +14,8 @@ export default function SelectedMemberTags(props) {
|
|
|
14
14
|
selectedUsers = props.selectedUsers,
|
|
15
15
|
width = props.width,
|
|
16
16
|
_props$lockedIds = props.lockedIds,
|
|
17
|
-
lockedIds = _props$lockedIds === void 0 ? [] : _props$lockedIds
|
|
17
|
+
lockedIds = _props$lockedIds === void 0 ? [] : _props$lockedIds,
|
|
18
|
+
renderSelectedTag = props.renderSelectedTag;
|
|
18
19
|
var _ConfigProvider$useGe = ConfigProvider.useGetUserList(),
|
|
19
20
|
getMemberPickerItemMoreInfoKey = _ConfigProvider$useGe.getMemberPickerItemMoreInfoKey;
|
|
20
21
|
var _useContext = useContext(LocaleContext),
|
|
@@ -46,7 +47,7 @@ export default function SelectedMemberTags(props) {
|
|
|
46
47
|
});
|
|
47
48
|
hasLocked = _index !== -1;
|
|
48
49
|
}
|
|
49
|
-
|
|
50
|
+
var originNode = /*#__PURE__*/React.createElement("div", {
|
|
50
51
|
className: 'ald-member-picker-selected-member-tag',
|
|
51
52
|
key: getId(user)
|
|
52
53
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -73,5 +74,9 @@ export default function SelectedMemberTags(props) {
|
|
|
73
74
|
(_props$onRemove = props.onRemove) === null || _props$onRemove === void 0 ? void 0 : _props$onRemove.call(props, user);
|
|
74
75
|
}
|
|
75
76
|
}));
|
|
77
|
+
if (renderSelectedTag) {
|
|
78
|
+
return renderSelectedTag(user, originNode);
|
|
79
|
+
}
|
|
80
|
+
return originNode;
|
|
76
81
|
}))));
|
|
77
82
|
}
|
|
@@ -11,6 +11,13 @@ interface IProps {
|
|
|
11
11
|
width: number;
|
|
12
12
|
lockedIds: Array<TUserValue | TUserGroupValue>;
|
|
13
13
|
filterItem?: (item: IUserGroup) => boolean;
|
|
14
|
+
renderItem?: (item: IUserGroup, context: {
|
|
15
|
+
isSelected: boolean;
|
|
16
|
+
disabled: boolean;
|
|
17
|
+
onClick: () => void;
|
|
18
|
+
onNextLevel?: () => void;
|
|
19
|
+
originNode: React.ReactNode;
|
|
20
|
+
}) => React.ReactNode;
|
|
14
21
|
}
|
|
15
|
-
declare const UserGroupSelection: ({ className, userGroupList, multiple, onChange, selectedUsersGroup: selectedUsersGroups, loading, width, lockedIds, filterItem, }: IProps) => React.JSX.Element;
|
|
22
|
+
declare const UserGroupSelection: ({ className, userGroupList, multiple, onChange, selectedUsersGroup: selectedUsersGroups, loading, width, lockedIds, filterItem, renderItem, }: IProps) => React.JSX.Element;
|
|
16
23
|
export default UserGroupSelection;
|
|
@@ -35,7 +35,8 @@ var UserGroupSelection = function UserGroupSelection(_ref) {
|
|
|
35
35
|
loading = _ref.loading,
|
|
36
36
|
width = _ref.width,
|
|
37
37
|
lockedIds = _ref.lockedIds,
|
|
38
|
-
filterItem = _ref.filterItem
|
|
38
|
+
filterItem = _ref.filterItem,
|
|
39
|
+
renderItem = _ref.renderItem;
|
|
39
40
|
var _useContext = useContext(LocaleContext),
|
|
40
41
|
locale = _useContext.locale;
|
|
41
42
|
var t = getTranslator(locale);
|
|
@@ -174,7 +175,16 @@ var UserGroupSelection = function UserGroupSelection(_ref) {
|
|
|
174
175
|
type: userGroup.type
|
|
175
176
|
});
|
|
176
177
|
var disabled = index !== -1;
|
|
177
|
-
|
|
178
|
+
var hasNextLevel = userGroupList.some(function (group) {
|
|
179
|
+
return group.parentId === userGroup.groupId;
|
|
180
|
+
}) || isAsync;
|
|
181
|
+
var onNextLevel = function onNextLevel() {
|
|
182
|
+
setGroupPath(function (prev) {
|
|
183
|
+
return [].concat(_toConsumableArray(prev), [userGroup]);
|
|
184
|
+
});
|
|
185
|
+
setSearchKey('');
|
|
186
|
+
};
|
|
187
|
+
var originNode = multiple ? /*#__PURE__*/React.createElement(MultipleOption, {
|
|
178
188
|
key: userGroup.groupId,
|
|
179
189
|
user: userGroup,
|
|
180
190
|
disabled: disabled,
|
|
@@ -184,15 +194,8 @@ var UserGroupSelection = function UserGroupSelection(_ref) {
|
|
|
184
194
|
_onChange(selected, userGroup);
|
|
185
195
|
}
|
|
186
196
|
},
|
|
187
|
-
hasNextLevel:
|
|
188
|
-
|
|
189
|
-
}) || isAsync,
|
|
190
|
-
onNextLevel: function onNextLevel(userGroup) {
|
|
191
|
-
setGroupPath(function (prev) {
|
|
192
|
-
return [].concat(_toConsumableArray(prev), [userGroup]);
|
|
193
|
-
});
|
|
194
|
-
setSearchKey('');
|
|
195
|
-
}
|
|
197
|
+
hasNextLevel: hasNextLevel,
|
|
198
|
+
onNextLevel: onNextLevel
|
|
196
199
|
}) : /*#__PURE__*/React.createElement(SingleOption, {
|
|
197
200
|
key: userGroup.groupId,
|
|
198
201
|
user: userGroup,
|
|
@@ -203,16 +206,25 @@ var UserGroupSelection = function UserGroupSelection(_ref) {
|
|
|
203
206
|
_onChange(selected, userGroup);
|
|
204
207
|
}
|
|
205
208
|
},
|
|
206
|
-
hasNextLevel:
|
|
207
|
-
|
|
208
|
-
}) || isAsync,
|
|
209
|
-
onNextLevel: function onNextLevel(userGroup) {
|
|
210
|
-
setGroupPath(function (prev) {
|
|
211
|
-
return [].concat(_toConsumableArray(prev), [userGroup]);
|
|
212
|
-
});
|
|
213
|
-
setSearchKey('');
|
|
214
|
-
}
|
|
209
|
+
hasNextLevel: hasNextLevel,
|
|
210
|
+
onNextLevel: onNextLevel
|
|
215
211
|
});
|
|
212
|
+
if (renderItem) {
|
|
213
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
214
|
+
key: userGroup.groupId
|
|
215
|
+
}, renderItem(userGroup, {
|
|
216
|
+
isSelected: isSelected,
|
|
217
|
+
disabled: disabled,
|
|
218
|
+
onClick: function onClick() {
|
|
219
|
+
if (isUserGroup(userGroup) && !disabled) {
|
|
220
|
+
_onChange(!isSelected, userGroup);
|
|
221
|
+
}
|
|
222
|
+
},
|
|
223
|
+
onNextLevel: hasNextLevel ? onNextLevel : undefined,
|
|
224
|
+
originNode: originNode
|
|
225
|
+
}));
|
|
226
|
+
}
|
|
227
|
+
return originNode;
|
|
216
228
|
})))));
|
|
217
229
|
};
|
|
218
230
|
export default UserGroupSelection;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _excluded = ["value", "type", "onChange", "multiple", "dropdownWidth", "open", "onOpenChange", "placeholder", "className", "allowClear", "disabled", "onClear", "size", "prefix", "lockedIds", "footer", "onCancel", "filterItem", "mode"];
|
|
1
|
+
var _excluded = ["value", "type", "onChange", "multiple", "dropdownWidth", "open", "onOpenChange", "placeholder", "className", "allowClear", "disabled", "onClear", "size", "prefix", "lockedIds", "footer", "onCancel", "filterItem", "mode", "renderItem", "renderSelectedTag"];
|
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
3
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
4
4
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
@@ -60,6 +60,8 @@ var Component = function Component(props) {
|
|
|
60
60
|
_onCancel = props.onCancel,
|
|
61
61
|
filterItem = props.filterItem,
|
|
62
62
|
propsMode = props.mode,
|
|
63
|
+
renderItem = props.renderItem,
|
|
64
|
+
renderSelectedTag = props.renderSelectedTag,
|
|
63
65
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
64
66
|
var _ConfigProvider$useGe = ConfigProvider.useGetUserList(),
|
|
65
67
|
getUsersByIds = _ConfigProvider$useGe.getUsersByIds,
|
|
@@ -368,7 +370,9 @@ var Component = function Component(props) {
|
|
|
368
370
|
onCancel: function onCancel() {
|
|
369
371
|
_onCancel === null || _onCancel === void 0 ? void 0 : _onCancel();
|
|
370
372
|
setDropdownOpen(false);
|
|
371
|
-
}
|
|
373
|
+
},
|
|
374
|
+
renderItem: renderItem,
|
|
375
|
+
renderSelectedTag: renderSelectedTag
|
|
372
376
|
}));
|
|
373
377
|
}
|
|
374
378
|
}));
|
|
@@ -21,6 +21,14 @@ export interface IBaseMemberSelectorProps extends Omit<ISelectProps, 'type'> {
|
|
|
21
21
|
footer?: ReactNode;
|
|
22
22
|
onCancel?: () => void;
|
|
23
23
|
filterItem?: (item: IUser | IUserGroup) => boolean;
|
|
24
|
+
renderItem?: (item: IUser | IUserGroup, context: {
|
|
25
|
+
isSelected: boolean;
|
|
26
|
+
disabled: boolean;
|
|
27
|
+
onClick: () => void;
|
|
28
|
+
onNextLevel?: () => void;
|
|
29
|
+
originNode: ReactNode;
|
|
30
|
+
}) => ReactNode;
|
|
31
|
+
renderSelectedTag?: (user: IUser | IUserGroup, originNode: ReactNode) => ReactNode;
|
|
24
32
|
}
|
|
25
33
|
export interface IMultipleMemberSelectorProps extends IBaseMemberSelectorProps {
|
|
26
34
|
multiple: true | Mode;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { DndProvider, useDragDropManager } from 'react-dnd';
|
|
3
|
+
import { HTML5Backend } from 'react-dnd-html5-backend';
|
|
4
|
+
|
|
5
|
+
// 内部组件用于检测 DndProvider
|
|
6
|
+
var DndContextDetector = function DndContextDetector(_ref) {
|
|
7
|
+
var children = _ref.children;
|
|
8
|
+
// 使用 useDragDropManager 检测是否已有 DndProvider
|
|
9
|
+
var hasContext = false;
|
|
10
|
+
try {
|
|
11
|
+
var manager = useDragDropManager();
|
|
12
|
+
hasContext = !!manager;
|
|
13
|
+
} catch (error) {
|
|
14
|
+
// 如果抛出错误,说明外部没有 DndProvider
|
|
15
|
+
hasContext = false;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// 如果已有上下文,直接返回 children
|
|
19
|
+
if (hasContext) {
|
|
20
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, children);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// 否则创建新的 DndProvider
|
|
24
|
+
return /*#__PURE__*/React.createElement(DndProvider, {
|
|
25
|
+
backend: HTML5Backend
|
|
26
|
+
}, children);
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* DndWrapper 组件:智能检测并处理 DndProvider
|
|
31
|
+
* 如果外部已存在 DndProvider,则直接复用,避免嵌套冲突
|
|
32
|
+
* 如果外部不存在 DndProvider,则创建新的
|
|
33
|
+
*/
|
|
34
|
+
var DndWrapper = function DndWrapper(_ref2) {
|
|
35
|
+
var children = _ref2.children;
|
|
36
|
+
return /*#__PURE__*/React.createElement(DndContextDetector, null, children);
|
|
37
|
+
};
|
|
38
|
+
export default DndWrapper;
|
|
@@ -13,6 +13,8 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
|
|
|
13
13
|
import { useDrag, useDrop } from 'react-dnd';
|
|
14
14
|
import { getEmptyImage } from 'react-dnd-html5-backend';
|
|
15
15
|
import { getRowKey, hasFixedLeftColumn, prefixCls } from "../helper";
|
|
16
|
+
import _ from 'lodash';
|
|
17
|
+
|
|
16
18
|
// 定义拖拽项类型
|
|
17
19
|
var ROW_DND_TYPE = 'ALD_TABLE_ROW_DND_TYPE';
|
|
18
20
|
// 拖拽手柄组件
|
|
@@ -136,7 +138,7 @@ export default function useRowDnd(props) {
|
|
|
136
138
|
}, []);
|
|
137
139
|
|
|
138
140
|
// 当拖拽过程中,临时存储数据
|
|
139
|
-
var _useState3 = useState(
|
|
141
|
+
var _useState3 = useState([]),
|
|
140
142
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
141
143
|
draggingTempData = _useState4[0],
|
|
142
144
|
setDraggingTempData = _useState4[1];
|
|
@@ -210,20 +212,27 @@ export default function useRowDnd(props) {
|
|
|
210
212
|
// 记录拖动开始
|
|
211
213
|
var handleDragStart = function handleDragStart(id) {
|
|
212
214
|
setDraggingRowId(id);
|
|
215
|
+
setDraggingTempData(_.cloneDeep(data));
|
|
213
216
|
};
|
|
214
217
|
|
|
215
218
|
// 记录拖动结束
|
|
216
219
|
var handleDragComplete = function handleDragComplete() {
|
|
220
|
+
// 必须在清空 draggingRowId 之前先找到 draggingRow
|
|
221
|
+
// 因为 tableData 依赖 draggingRowId,清空后 tableData 会切换回原始 data
|
|
217
222
|
var draggingRow = tableData.find(function (item) {
|
|
218
223
|
return getRowKey(item, rowKey) === draggingRowId;
|
|
219
224
|
});
|
|
220
|
-
setDraggingRowId(null);
|
|
221
225
|
if (!draggingRow) {
|
|
222
226
|
// 不应该出现这种情况
|
|
223
227
|
console.error('draggingRow is not found');
|
|
228
|
+
setDraggingRowId(null);
|
|
224
229
|
return;
|
|
225
230
|
}
|
|
226
|
-
|
|
231
|
+
// 保存当前的 tableData,因为清空 draggingRowId 后 tableData 会变化
|
|
232
|
+
var finalData = tableData;
|
|
233
|
+
setDraggingRowId(null);
|
|
234
|
+
setDraggingTempData([]);
|
|
235
|
+
onChange(finalData, draggingRow);
|
|
227
236
|
};
|
|
228
237
|
var dndColumn = {
|
|
229
238
|
dataIndex: '',
|
package/dist/Table/index.js
CHANGED
|
@@ -17,10 +17,9 @@ import _ from 'lodash';
|
|
|
17
17
|
import ResizeObserver from 'rc-resize-observer';
|
|
18
18
|
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
|
|
19
19
|
import { Empty, Spin } from '..';
|
|
20
|
-
import { DndProvider } from 'react-dnd';
|
|
21
|
-
import { HTML5Backend } from 'react-dnd-html5-backend';
|
|
22
20
|
import ExpandCell from "./components/ExpandCell";
|
|
23
21
|
import Footer from "./components/Footer";
|
|
22
|
+
import DndWrapper from "./components/DndWrapper";
|
|
24
23
|
import { getRowKey, getTableColumns, prefixCls } from "./helper";
|
|
25
24
|
import useExpandable, { getExpandableConfig } from "./hooks/useExpandable";
|
|
26
25
|
import useFixed from "./hooks/useFixed";
|
|
@@ -513,8 +512,6 @@ function Table(props, ref) {
|
|
|
513
512
|
}
|
|
514
513
|
}, /*#__PURE__*/React.createElement("div", {
|
|
515
514
|
className: classnames(prefixCls('main'), (_classnames8 = {}, _defineProperty(_classnames8, prefixCls('overflow-hidden'), !!y), _defineProperty(_classnames8, prefixCls('ping-left'), isPingLeft), _defineProperty(_classnames8, prefixCls('ping-right'), isPingRight), _classnames8))
|
|
516
|
-
}, rowDnd ? /*#__PURE__*/React.createElement(
|
|
517
|
-
backend: HTML5Backend
|
|
518
|
-
}, tableContent) : tableContent)));
|
|
515
|
+
}, rowDnd ? /*#__PURE__*/React.createElement(DndWrapper, null, tableContent) : tableContent)));
|
|
519
516
|
}
|
|
520
517
|
export default /*#__PURE__*/forwardRef(Table);
|