@ccs-ui/rc-pro 2.3.6-alpha-2 → 2.3.6-alpha-3
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/es/dialog/button.d.ts +1 -1
- package/es/hooks/use-selection.d.ts +13 -22
- package/es/hooks/use-selection.js +37 -20
- package/es/select/ modal.d.ts +4 -8
- package/es/select/ modal.js +65 -21
- package/es/select/customize.d.ts +4 -14
- package/es/select/customize.js +37 -41
- package/package.json +1 -1
package/es/dialog/button.d.ts
CHANGED
|
@@ -16,7 +16,7 @@ export type DialogButtonsProps<T> = Pick<CcsDialogModalProps, 'okText' | 'onClos
|
|
|
16
16
|
export type DialogButtonRef = {
|
|
17
17
|
onSetButtons: (e: React.ReactElement) => void;
|
|
18
18
|
};
|
|
19
|
-
export declare const DialogButtonHolder: <TParams, TData>({ auth, extraBtn, formRef, request, onOk, onClose, buttonRef, requestFieldNames, formInitialValues, preventRequestHandle, }: Pick<CcsDialogModalProps<TParams, TData>, "
|
|
19
|
+
export declare const DialogButtonHolder: <TParams, TData>({ auth, extraBtn, formRef, request, onOk, onClose, buttonRef, requestFieldNames, formInitialValues, preventRequestHandle, }: Pick<CcsDialogModalProps<TParams, TData>, "auth" | "request" | "onClose" | "onOk" | "extraBtn" | "requestFieldNames" | "preventRequestHandle"> & {
|
|
20
20
|
formRef: React.RefObject<DialogFormRef<TParams>>;
|
|
21
21
|
formInitialValues: FormProps['initialValues'];
|
|
22
22
|
buttonRef: RefObject<DialogButtonRef>;
|
|
@@ -1,28 +1,19 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SelectProps } from 'antd';
|
|
2
|
+
import { RowSelectionType, TableRowSelection } from 'antd/es/table/interface';
|
|
2
3
|
import React from 'react';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
|
|
4
|
+
type PropsType<T> = Pick<SelectProps, 'value' | 'onChange'> & {
|
|
5
|
+
/** rowKey 字段,选中key值 */
|
|
6
|
+
keyField: string;
|
|
6
7
|
/** 默认选择行数据,一般用于回显数据 */
|
|
7
8
|
defaultRows?: T[];
|
|
8
|
-
/**
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
keyField: string;
|
|
12
|
-
/** 表单受控 onChange*/
|
|
13
|
-
onChange?: (value: any) => void;
|
|
14
|
-
/** 设置选项 */
|
|
9
|
+
/** 是否多选,默认多选 checkbox 模式 */
|
|
10
|
+
type?: RowSelectionType;
|
|
11
|
+
/** 选中行数据回调 */
|
|
15
12
|
onChangeRows?: (options: any[]) => void;
|
|
16
|
-
}
|
|
17
|
-
export default function useTableSelection<T = any>(props: PropsType<T>): {
|
|
18
|
-
onChange: (keys: React.Key[], rows: T[], info: {
|
|
19
|
-
type: RowSelectMethod;
|
|
20
|
-
}) => void;
|
|
21
|
-
onClear: (key?: React.Key) => void;
|
|
22
|
-
selectedRowKeys?: React.Key[] | undefined;
|
|
23
|
-
selectedRows?: T[] | undefined;
|
|
24
|
-
info: {
|
|
25
|
-
type: RowSelectMethod;
|
|
26
|
-
};
|
|
27
13
|
};
|
|
14
|
+
interface ReturnType<T> extends TableRowSelection<T> {
|
|
15
|
+
selectedRows?: T[];
|
|
16
|
+
onClear: (key?: React.Key) => void;
|
|
17
|
+
}
|
|
18
|
+
export default function useTableSelection<T = any>(props: PropsType<T>): ReturnType<T>;
|
|
28
19
|
export {};
|
|
@@ -3,13 +3,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
3
3
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
4
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
5
5
|
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); }
|
|
6
|
-
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); }
|
|
7
6
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
8
7
|
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."); }
|
|
9
8
|
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); }
|
|
10
9
|
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; }
|
|
11
10
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
12
11
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
+
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); }
|
|
13
13
|
import { useMemoizedFn, useUpdateEffect } from 'ahooks';
|
|
14
14
|
import { useEffect, useRef, useState } from 'react';
|
|
15
15
|
// 判断相对
|
|
@@ -21,35 +21,50 @@ function isEq(obj1, obj2) {
|
|
|
21
21
|
}
|
|
22
22
|
return JSON.stringify(o1) !== JSON.stringify(o2);
|
|
23
23
|
}
|
|
24
|
+
function onGetKeys(value, keyField) {
|
|
25
|
+
if (value === undefined) return value;
|
|
26
|
+
if (Array.isArray(value)) {
|
|
27
|
+
return value.map(function (item) {
|
|
28
|
+
return _typeof(item) === 'object' ? item[keyField] : item;
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
if (_typeof(value) === 'object') {
|
|
32
|
+
return value[keyField];
|
|
33
|
+
}
|
|
34
|
+
return [value];
|
|
35
|
+
}
|
|
24
36
|
export default function useTableSelection(props) {
|
|
25
37
|
var _ref = props || {},
|
|
26
38
|
value = _ref.value,
|
|
39
|
+
_ref$type = _ref.type,
|
|
40
|
+
type = _ref$type === void 0 ? 'checkbox' : _ref$type,
|
|
27
41
|
defaultRows = _ref.defaultRows,
|
|
28
42
|
_ref$keyField = _ref.keyField,
|
|
29
43
|
keyField = _ref$keyField === void 0 ? 'key' : _ref$keyField,
|
|
30
|
-
|
|
31
|
-
onChangeValue = _ref.onChange
|
|
32
|
-
onChangeRows = _ref.onChangeRows;
|
|
44
|
+
onChangeRows = _ref.onChangeRows,
|
|
45
|
+
onChangeValue = _ref.onChange;
|
|
33
46
|
var _useState = useState({}),
|
|
34
47
|
_useState2 = _slicedToArray(_useState, 2),
|
|
35
48
|
setUpdate = _useState2[1];
|
|
36
49
|
var selectionRef = useRef({
|
|
37
|
-
selectedRowKeys:
|
|
50
|
+
selectedRowKeys: onGetKeys(value, keyField),
|
|
38
51
|
selectedRows: defaultRows,
|
|
39
52
|
info: {
|
|
40
53
|
type: 'none'
|
|
41
54
|
}
|
|
42
55
|
});
|
|
56
|
+
var isMultiple = type === 'checkbox';
|
|
43
57
|
var handleOnChange = useMemoizedFn(function () {
|
|
44
58
|
var _selectionRef$current = selectionRef.current,
|
|
45
59
|
_selectionRef$current2 = _selectionRef$current.selectedRowKeys,
|
|
46
60
|
selectedRowKeys = _selectionRef$current2 === void 0 ? [] : _selectionRef$current2,
|
|
47
|
-
|
|
48
|
-
|
|
61
|
+
_selectionRef$current3 = _selectionRef$current.selectedRows,
|
|
62
|
+
selectedRows = _selectionRef$current3 === void 0 ? [] : _selectionRef$current3;
|
|
63
|
+
if (isMultiple) {
|
|
49
64
|
// 受控调用onChange
|
|
50
|
-
onChangeValue === null || onChangeValue === void 0 || onChangeValue(selectedRowKeys);
|
|
65
|
+
onChangeValue === null || onChangeValue === void 0 || onChangeValue(selectedRowKeys, selectedRows);
|
|
51
66
|
} else {
|
|
52
|
-
onChangeValue === null || onChangeValue === void 0 || onChangeValue(selectedRowKeys[0]);
|
|
67
|
+
onChangeValue === null || onChangeValue === void 0 || onChangeValue(selectedRowKeys[0], selectedRows[0]);
|
|
53
68
|
}
|
|
54
69
|
onChangeRows === null || onChangeRows === void 0 || onChangeRows(selectedRows || []);
|
|
55
70
|
if (!onChangeValue) setUpdate({});
|
|
@@ -68,15 +83,16 @@ export default function useTableSelection(props) {
|
|
|
68
83
|
|
|
69
84
|
// value 变更,与当前选中数据不匹配
|
|
70
85
|
useUpdateEffect(function () {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
var
|
|
86
|
+
var newValue = onGetKeys(value, keyField);
|
|
87
|
+
if (isEq(newValue, selectionRef.current.selectedRowKeys)) {
|
|
88
|
+
var _selectionRef$current4;
|
|
89
|
+
var rows = (_selectionRef$current4 = selectionRef.current.selectedRows) === null || _selectionRef$current4 === void 0 ? void 0 : _selectionRef$current4.filter(function () {
|
|
74
90
|
var _ref2;
|
|
75
91
|
var row = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
76
|
-
return (_ref2 =
|
|
92
|
+
return (_ref2 = newValue || []) === null || _ref2 === void 0 ? void 0 : _ref2.includes(row[keyField]);
|
|
77
93
|
});
|
|
78
94
|
selectionRef.current = {
|
|
79
|
-
selectedRowKeys:
|
|
95
|
+
selectedRowKeys: newValue,
|
|
80
96
|
selectedRows: rows,
|
|
81
97
|
info: {
|
|
82
98
|
type: 'none'
|
|
@@ -119,11 +135,11 @@ export default function useTableSelection(props) {
|
|
|
119
135
|
}
|
|
120
136
|
};
|
|
121
137
|
} else {
|
|
122
|
-
var _selectionRef$
|
|
123
|
-
_selectionRef$
|
|
124
|
-
selectedRowKeys = _selectionRef$
|
|
125
|
-
_selectionRef$
|
|
126
|
-
selectedRows = _selectionRef$
|
|
138
|
+
var _selectionRef$current5 = selectionRef.current,
|
|
139
|
+
_selectionRef$current6 = _selectionRef$current5.selectedRowKeys,
|
|
140
|
+
selectedRowKeys = _selectionRef$current6 === void 0 ? [] : _selectionRef$current6,
|
|
141
|
+
_selectionRef$current7 = _selectionRef$current5.selectedRows,
|
|
142
|
+
selectedRows = _selectionRef$current7 === void 0 ? [] : _selectionRef$current7;
|
|
127
143
|
var newRows = selectedRows.filter(function () {
|
|
128
144
|
var r = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
129
145
|
return r[keyField] !== key;
|
|
@@ -143,6 +159,7 @@ export default function useTableSelection(props) {
|
|
|
143
159
|
});
|
|
144
160
|
return _objectSpread(_objectSpread({}, selectionRef.current), {}, {
|
|
145
161
|
onChange: onChange,
|
|
146
|
-
onClear: onClear
|
|
162
|
+
onClear: onClear,
|
|
163
|
+
type: type
|
|
147
164
|
});
|
|
148
165
|
}
|
package/es/select/ modal.d.ts
CHANGED
|
@@ -1,16 +1,12 @@
|
|
|
1
1
|
import { ModalProps, SelectProps } from 'antd';
|
|
2
2
|
import { ReactElement, ReactNode } from 'react';
|
|
3
3
|
import { SelectChildrenProps } from './customize';
|
|
4
|
-
export interface ModalSelectProps {
|
|
4
|
+
export interface ModalSelectProps extends Omit<SelectProps, 'children' | 'title'> {
|
|
5
|
+
/** 选择触发器宽度 */
|
|
6
|
+
width?: number;
|
|
5
7
|
/** modal props */
|
|
6
8
|
modal?: ModalProps;
|
|
7
|
-
/** select props */
|
|
8
|
-
select?: SelectProps;
|
|
9
9
|
/** 自定义内容 */
|
|
10
10
|
children: ReactElement | ((props: SelectChildrenProps) => ReactNode);
|
|
11
|
-
/** form item value */
|
|
12
|
-
value?: any;
|
|
13
|
-
/** form item onChange */
|
|
14
|
-
onChange?: (e: any) => void;
|
|
15
11
|
}
|
|
16
|
-
export default function ModalSelect({
|
|
12
|
+
export default function ModalSelect({ width, style, mode, modal, value, children, labelInValue, onChange: onOkChange, ...otherProps }: ModalSelectProps): import("react/jsx-runtime").JSX.Element;
|
package/es/select/ modal.js
CHANGED
|
@@ -1,27 +1,34 @@
|
|
|
1
|
-
|
|
1
|
+
var _excluded = ["width", "style", "mode", "modal", "value", "children", "labelInValue", "onChange"];
|
|
2
2
|
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; }
|
|
3
3
|
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; }
|
|
4
4
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
5
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
6
|
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); }
|
|
7
|
+
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); }
|
|
7
8
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
8
9
|
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."); }
|
|
9
10
|
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); }
|
|
10
11
|
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; }
|
|
11
12
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
12
13
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
13
|
-
|
|
14
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
15
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
16
|
+
import { LoadingOutlined, SelectOutlined } from '@ant-design/icons';
|
|
14
17
|
import { Modal, Select } from 'antd';
|
|
15
18
|
import React, { useState } from 'react';
|
|
16
19
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
17
20
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
18
21
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
19
22
|
export default function ModalSelect(_ref) {
|
|
20
|
-
var
|
|
21
|
-
|
|
23
|
+
var width = _ref.width,
|
|
24
|
+
style = _ref.style,
|
|
25
|
+
mode = _ref.mode,
|
|
26
|
+
modal = _ref.modal,
|
|
22
27
|
value = _ref.value,
|
|
23
28
|
children = _ref.children,
|
|
24
|
-
|
|
29
|
+
labelInValue = _ref.labelInValue,
|
|
30
|
+
onOkChange = _ref.onChange,
|
|
31
|
+
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
25
32
|
var _useState = useState(false),
|
|
26
33
|
_useState2 = _slicedToArray(_useState, 2),
|
|
27
34
|
open = _useState2[0],
|
|
@@ -29,14 +36,22 @@ export default function ModalSelect(_ref) {
|
|
|
29
36
|
var onClick = function onClick() {
|
|
30
37
|
setOpen(true);
|
|
31
38
|
};
|
|
32
|
-
var _useState3 = useState(
|
|
39
|
+
var _useState3 = useState(undefined),
|
|
33
40
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
var _useState5 = useState(
|
|
41
|
+
labelText = _useState4[0],
|
|
42
|
+
setLabelText = _useState4[1];
|
|
43
|
+
var _useState5 = useState(false),
|
|
37
44
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
38
|
-
|
|
39
|
-
|
|
45
|
+
loading = _useState6[0],
|
|
46
|
+
setLoading = _useState6[1];
|
|
47
|
+
var _useState7 = useState(value),
|
|
48
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
49
|
+
valueState = _useState8[0],
|
|
50
|
+
setValueState = _useState8[1];
|
|
51
|
+
var _useState9 = useState(undefined),
|
|
52
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
53
|
+
options = _useState10[0],
|
|
54
|
+
setOptions = _useState10[1];
|
|
40
55
|
|
|
41
56
|
// 确定按钮
|
|
42
57
|
var onClose = function onClose(e) {
|
|
@@ -44,15 +59,16 @@ export default function ModalSelect(_ref) {
|
|
|
44
59
|
setOpen(false);
|
|
45
60
|
};
|
|
46
61
|
|
|
47
|
-
// 多选
|
|
48
|
-
var isMulti = (select === null || select === void 0 ? void 0 : select.mode) === 'multiple';
|
|
49
|
-
|
|
50
62
|
// children 参数
|
|
51
63
|
var childrenProps = {
|
|
52
64
|
value: valueState,
|
|
53
|
-
|
|
65
|
+
mode: mode,
|
|
54
66
|
onClose: onClose,
|
|
55
|
-
|
|
67
|
+
onLoading: setLoading,
|
|
68
|
+
onChangeLabel: setLabelText,
|
|
69
|
+
onChange: function onChange(v, option) {
|
|
70
|
+
setValueState(labelInValue ? option : v);
|
|
71
|
+
},
|
|
56
72
|
onChangeOptions: setOptions
|
|
57
73
|
};
|
|
58
74
|
|
|
@@ -67,23 +83,51 @@ export default function ModalSelect(_ref) {
|
|
|
67
83
|
setValueState(value);
|
|
68
84
|
setOpen(false);
|
|
69
85
|
};
|
|
86
|
+
var renderValueText = function renderValueText() {
|
|
87
|
+
if (value === undefined || Array.isArray(value) && value.length === 0) {
|
|
88
|
+
return undefined;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// 优先显示 labelText
|
|
92
|
+
if (!!labelText) return labelText;
|
|
93
|
+
|
|
94
|
+
// 如果value是数组对象,则获取value对象
|
|
95
|
+
if (Array.isArray(value)) {
|
|
96
|
+
return value.map(function (item) {
|
|
97
|
+
var _otherProps$fieldName;
|
|
98
|
+
return _typeof(item) === 'object' ? item[((_otherProps$fieldName = otherProps.fieldNames) === null || _otherProps$fieldName === void 0 ? void 0 : _otherProps$fieldName.value) || 'value'] : item;
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
// 如果value是对象,则获取value
|
|
103
|
+
if (_typeof(value) === 'object') {
|
|
104
|
+
var _otherProps$fieldName2;
|
|
105
|
+
return value[((_otherProps$fieldName2 = otherProps.fieldNames) === null || _otherProps$fieldName2 === void 0 ? void 0 : _otherProps$fieldName2.value) || 'value'];
|
|
106
|
+
}
|
|
107
|
+
return value;
|
|
108
|
+
};
|
|
70
109
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
71
|
-
children: [/*#__PURE__*/_jsx(Select, _objectSpread({
|
|
110
|
+
children: [/*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({
|
|
72
111
|
allowClear: true,
|
|
73
|
-
suffixIcon: /*#__PURE__*/_jsx(SelectOutlined, {}),
|
|
112
|
+
suffixIcon: loading ? /*#__PURE__*/_jsx(LoadingOutlined, {}) : /*#__PURE__*/_jsx(SelectOutlined, {}),
|
|
74
113
|
open: false,
|
|
75
114
|
dropdownRender: function dropdownRender() {
|
|
76
115
|
return /*#__PURE__*/_jsx("div", {});
|
|
77
116
|
},
|
|
78
|
-
value:
|
|
117
|
+
value: loading ? undefined : renderValueText(),
|
|
79
118
|
onClick: onClick,
|
|
80
|
-
placeholder:
|
|
119
|
+
placeholder: '请选择'
|
|
120
|
+
}, otherProps), {}, {
|
|
121
|
+
mode: !!labelText ? undefined : mode,
|
|
122
|
+
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
123
|
+
width: width
|
|
124
|
+
}),
|
|
81
125
|
options: options,
|
|
82
126
|
onChange: function onChange(e) {
|
|
83
127
|
setValueState(e);
|
|
84
128
|
onOkChange === null || onOkChange === void 0 || onOkChange(e);
|
|
85
129
|
}
|
|
86
|
-
}
|
|
130
|
+
})), /*#__PURE__*/_jsx(Modal, _objectSpread(_objectSpread({
|
|
87
131
|
open: open,
|
|
88
132
|
onCancel: onModalClose,
|
|
89
133
|
styles: {
|
package/es/select/customize.d.ts
CHANGED
|
@@ -1,37 +1,27 @@
|
|
|
1
1
|
import { SelectProps } from 'antd';
|
|
2
2
|
import { ReactElement, ReactNode } from 'react';
|
|
3
|
-
export type SelectChildrenProps = {
|
|
4
|
-
/** 当前选中的值 */
|
|
5
|
-
value?: any;
|
|
6
|
-
/** 是否多选 */
|
|
7
|
-
multiple?: boolean;
|
|
3
|
+
export type SelectChildrenProps = Pick<SelectProps, 'value' | 'onChange' | 'mode'> & {
|
|
8
4
|
/** 关闭弹框 */
|
|
9
5
|
onClose?: (e?: any) => void;
|
|
10
|
-
/** form item onChange */
|
|
11
|
-
onChange?: (value: any) => void;
|
|
12
6
|
/** 更改select options */
|
|
13
7
|
onChangeOptions?: (options: any[]) => void;
|
|
14
8
|
/** 自定义显示选中详情 */
|
|
15
9
|
onChangeLabel?: (labelText?: string) => void;
|
|
10
|
+
/** 加载状态 */
|
|
11
|
+
onLoading?: (loading: boolean) => void;
|
|
16
12
|
};
|
|
17
13
|
export interface CustomizeSelectProps extends Omit<SelectProps, 'children'> {
|
|
18
14
|
/** 选择触发器宽度 */
|
|
19
15
|
width?: number;
|
|
20
16
|
/** 内容宽度 */
|
|
21
17
|
contentWidth?: number;
|
|
22
|
-
/** 单选自动关闭弹框 */
|
|
23
|
-
autoClose?: boolean;
|
|
24
18
|
/** 自定义内容 */
|
|
25
19
|
children: ReactElement | ((props: SelectChildrenProps) => ReactNode);
|
|
26
|
-
/** form item value */
|
|
27
|
-
value?: any;
|
|
28
|
-
/** form item onChange */
|
|
29
|
-
onChange?: (e: any) => void;
|
|
30
20
|
}
|
|
31
21
|
/**
|
|
32
22
|
* 自定义弹框
|
|
33
23
|
* @param SelectCustomizeProps
|
|
34
24
|
* @returns
|
|
35
25
|
*/
|
|
36
|
-
declare function SelectIndex({ width,
|
|
26
|
+
declare function SelectIndex({ width, value, style, mode, children, contentWidth, labelInValue, onChange, ...otherProps }: CustomizeSelectProps): import("react/jsx-runtime").JSX.Element;
|
|
37
27
|
export default SelectIndex;
|
package/es/select/customize.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
var _excluded = ["width", "title", "value", "style", "mode", "children", "autoClose", "contentWidth", "onChange"];
|
|
1
|
+
var _excluded = ["width", "value", "style", "mode", "children", "contentWidth", "labelInValue", "onChange"];
|
|
3
2
|
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; }
|
|
4
3
|
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; }
|
|
5
4
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
5
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
7
6
|
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); }
|
|
7
|
+
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); }
|
|
8
8
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
9
9
|
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."); }
|
|
10
10
|
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); }
|
|
@@ -13,11 +13,10 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
|
|
|
13
13
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
14
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
15
15
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
16
|
+
import { LoadingOutlined, SelectOutlined } from '@ant-design/icons';
|
|
17
|
+
import { Select } from 'antd';
|
|
18
18
|
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
19
19
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
20
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
21
20
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
22
21
|
/**
|
|
23
22
|
* 自定义弹框
|
|
@@ -26,13 +25,12 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
|
26
25
|
*/
|
|
27
26
|
function SelectIndex(_ref) {
|
|
28
27
|
var width = _ref.width,
|
|
29
|
-
title = _ref.title,
|
|
30
28
|
value = _ref.value,
|
|
31
29
|
style = _ref.style,
|
|
32
30
|
mode = _ref.mode,
|
|
33
31
|
children = _ref.children,
|
|
34
|
-
autoClose = _ref.autoClose,
|
|
35
32
|
contentWidth = _ref.contentWidth,
|
|
33
|
+
labelInValue = _ref.labelInValue,
|
|
36
34
|
_onChange = _ref.onChange,
|
|
37
35
|
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
38
36
|
// 初始加载
|
|
@@ -45,12 +43,16 @@ function SelectIndex(_ref) {
|
|
|
45
43
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
46
44
|
labelText = _useState4[0],
|
|
47
45
|
setLabelText = _useState4[1];
|
|
46
|
+
var _useState5 = useState(false),
|
|
47
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
48
|
+
loading = _useState6[0],
|
|
49
|
+
setLoading = _useState6[1];
|
|
48
50
|
|
|
49
51
|
// 选择说明
|
|
50
|
-
var
|
|
51
|
-
|
|
52
|
-
options =
|
|
53
|
-
setOptions =
|
|
52
|
+
var _useState7 = useState(undefined),
|
|
53
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
54
|
+
options = _useState8[0],
|
|
55
|
+
setOptions = _useState8[1];
|
|
54
56
|
|
|
55
57
|
// 确定按钮
|
|
56
58
|
var onClose = function onClose(e) {
|
|
@@ -58,48 +60,27 @@ function SelectIndex(_ref) {
|
|
|
58
60
|
setOpen(false);
|
|
59
61
|
};
|
|
60
62
|
|
|
61
|
-
// 多选
|
|
62
|
-
var isMulti = mode === 'multiple';
|
|
63
|
-
|
|
64
63
|
// children 参数
|
|
65
64
|
var childrenProps = {
|
|
66
65
|
value: value,
|
|
67
66
|
onClose: onClose,
|
|
68
|
-
onChange: function onChange(
|
|
69
|
-
_onChange === null || _onChange === void 0 || _onChange(
|
|
67
|
+
onChange: function onChange(v, option) {
|
|
68
|
+
_onChange === null || _onChange === void 0 || _onChange(labelInValue ? option : v);
|
|
70
69
|
// 单选关闭弹框
|
|
71
|
-
if (!
|
|
70
|
+
if (!mode) setOpen(false);
|
|
72
71
|
},
|
|
72
|
+
onLoading: setLoading,
|
|
73
73
|
onChangeLabel: setLabelText,
|
|
74
|
-
|
|
74
|
+
mode: mode,
|
|
75
75
|
onChangeOptions: setOptions
|
|
76
76
|
};
|
|
77
77
|
var _dropdownRender = useMemo(function () {
|
|
78
|
-
return /*#__PURE__*/
|
|
78
|
+
return /*#__PURE__*/_jsx("div", {
|
|
79
79
|
style: {
|
|
80
80
|
display: 'none'
|
|
81
81
|
},
|
|
82
82
|
ref: ref,
|
|
83
|
-
children:
|
|
84
|
-
style: {
|
|
85
|
-
padding: 10,
|
|
86
|
-
borderBottom: '1px solid #f5f5f5',
|
|
87
|
-
display: 'flex',
|
|
88
|
-
justifyContent: 'space-between'
|
|
89
|
-
},
|
|
90
|
-
children: [/*#__PURE__*/_jsx("div", {
|
|
91
|
-
children: title
|
|
92
|
-
}), /*#__PURE__*/_jsx(Button, {
|
|
93
|
-
type: "text",
|
|
94
|
-
size: "small",
|
|
95
|
-
onClick: onClose,
|
|
96
|
-
children: /*#__PURE__*/_jsx(CloseOutlined, {
|
|
97
|
-
style: {
|
|
98
|
-
color: 'rgba(0,0,0,0.55)'
|
|
99
|
-
}
|
|
100
|
-
})
|
|
101
|
-
})]
|
|
102
|
-
}), typeof children === 'function' ? children(childrenProps) : /*#__PURE__*/React.cloneElement(children, childrenProps)]
|
|
83
|
+
children: typeof children === 'function' ? children(childrenProps) : /*#__PURE__*/React.cloneElement(children, childrenProps)
|
|
103
84
|
});
|
|
104
85
|
}, [value]);
|
|
105
86
|
useEffect(function () {
|
|
@@ -119,6 +100,20 @@ function SelectIndex(_ref) {
|
|
|
119
100
|
|
|
120
101
|
// 优先显示 labelText
|
|
121
102
|
if (!!labelText) return labelText;
|
|
103
|
+
|
|
104
|
+
// 如果value是数组对象,则获取value对象
|
|
105
|
+
if (Array.isArray(value)) {
|
|
106
|
+
return value.map(function (item) {
|
|
107
|
+
var _otherProps$fieldName;
|
|
108
|
+
return _typeof(item) === 'object' ? item[((_otherProps$fieldName = otherProps.fieldNames) === null || _otherProps$fieldName === void 0 ? void 0 : _otherProps$fieldName.value) || 'value'] : item;
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
// 如果value是对象,则获取value
|
|
113
|
+
if (_typeof(value) === 'object') {
|
|
114
|
+
var _otherProps$fieldName2;
|
|
115
|
+
return value[((_otherProps$fieldName2 = otherProps.fieldNames) === null || _otherProps$fieldName2 === void 0 ? void 0 : _otherProps$fieldName2.value) || 'value'];
|
|
116
|
+
}
|
|
122
117
|
return value;
|
|
123
118
|
};
|
|
124
119
|
return /*#__PURE__*/_jsx(_Fragment, {
|
|
@@ -127,14 +122,15 @@ function SelectIndex(_ref) {
|
|
|
127
122
|
onDropdownVisibleChange: setOpen,
|
|
128
123
|
allowClear: true,
|
|
129
124
|
defaultActiveFirstOption: true,
|
|
130
|
-
suffixIcon: /*#__PURE__*/_jsx(SelectOutlined, {})
|
|
125
|
+
suffixIcon: loading ? /*#__PURE__*/_jsx(LoadingOutlined, {}) : /*#__PURE__*/_jsx(SelectOutlined, {}),
|
|
126
|
+
placeholder: "\u8BF7\u9009\u62E9"
|
|
131
127
|
}, otherProps), {}, {
|
|
132
128
|
popupMatchSelectWidth: contentWidth,
|
|
133
129
|
dropdownRender: function dropdownRender() {
|
|
134
130
|
return _dropdownRender;
|
|
135
131
|
},
|
|
136
132
|
mode: !!labelText ? undefined : mode,
|
|
137
|
-
value: renderValueText(),
|
|
133
|
+
value: loading ? undefined : renderValueText(),
|
|
138
134
|
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
139
135
|
width: width
|
|
140
136
|
}),
|