assui 3.1.39 → 3.1.41
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/condition-select-input/index.d.ts +4 -0
- package/es/condition-select-input/index.js +61 -7
- package/es/label-condition-select-input/index.d.ts +3 -0
- package/es/label-condition-select-input/index.js +62 -7
- package/lib/condition-select-input/index.d.ts +4 -0
- package/lib/condition-select-input/index.js +61 -7
- package/lib/label-condition-select-input/index.d.ts +3 -0
- package/lib/label-condition-select-input/index.js +62 -7
- package/package.json +2 -2
|
@@ -14,6 +14,7 @@ export interface MainSelectOptionsType extends SelectOptionsType {
|
|
|
14
14
|
export interface ValueType {
|
|
15
15
|
selectValue?: number | string | null;
|
|
16
16
|
inputValue?: SelectProps['value'] | ConditionInputProps['value'];
|
|
17
|
+
finalSelectValue?: SelectProps['value'] | ConditionInputProps['value'][];
|
|
17
18
|
}
|
|
18
19
|
export interface ConditionSelectInputProps {
|
|
19
20
|
value?: ValueType;
|
|
@@ -25,7 +26,10 @@ export interface ConditionSelectInputProps {
|
|
|
25
26
|
conditionInputProps?: ConditionInputProps;
|
|
26
27
|
/** 联动selectProps */
|
|
27
28
|
conditionSelectProps?: SelectProps;
|
|
29
|
+
/** onChange */
|
|
28
30
|
onChange?: (value: ValueType) => void;
|
|
31
|
+
/** onBlur */
|
|
32
|
+
onBlur?: (value: ValueType) => void;
|
|
29
33
|
/** 输入框类型 */
|
|
30
34
|
inputType?: InputTypeEnum;
|
|
31
35
|
/** select options */
|
|
@@ -35,6 +35,7 @@ var __read = this && this.__read || function (o, n) {
|
|
|
35
35
|
return ar;
|
|
36
36
|
};
|
|
37
37
|
import isNil from 'lodash/isNil';
|
|
38
|
+
import isEmpty from 'lodash/isEmpty';
|
|
38
39
|
import classNames from 'classnames';
|
|
39
40
|
import Select from "antd/es/select";
|
|
40
41
|
import React, { useEffect, useState } from 'react';
|
|
@@ -45,6 +46,15 @@ export var InputTypeEnum;
|
|
|
45
46
|
InputTypeEnum["CONDITION_INPUT"] = "conditionInput";
|
|
46
47
|
InputTypeEnum["SELECT"] = "select";
|
|
47
48
|
})(InputTypeEnum || (InputTypeEnum = {}));
|
|
49
|
+
/** 找所有的子代选项 */
|
|
50
|
+
var findAllSubSelectItems = function findAllSubSelectItems(dataSource, key) {
|
|
51
|
+
var _a, _b;
|
|
52
|
+
return (_b = (_a = dataSource.find(function (item) {
|
|
53
|
+
return item.value === key;
|
|
54
|
+
})) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.map(function (subItem) {
|
|
55
|
+
return subItem.value;
|
|
56
|
+
});
|
|
57
|
+
};
|
|
48
58
|
var ConditionSelectInput = function ConditionSelectInput(props) {
|
|
49
59
|
var value = props.value,
|
|
50
60
|
_a = props.hiddenInputKeys,
|
|
@@ -55,7 +65,8 @@ var ConditionSelectInput = function ConditionSelectInput(props) {
|
|
|
55
65
|
_b = props.inputType,
|
|
56
66
|
inputType = _b === void 0 ? InputTypeEnum.CONDITION_INPUT : _b,
|
|
57
67
|
_c = props.optionsList,
|
|
58
|
-
optionsList = _c === void 0 ? [] : _c
|
|
68
|
+
optionsList = _c === void 0 ? [] : _c,
|
|
69
|
+
onBlur = props.onBlur;
|
|
59
70
|
var isInput = inputType === InputTypeEnum.CONDITION_INPUT;
|
|
60
71
|
var _d = __read(useControllableValue(props), 2),
|
|
61
72
|
selectInputValue = _d[0],
|
|
@@ -63,6 +74,8 @@ var ConditionSelectInput = function ConditionSelectInput(props) {
|
|
|
63
74
|
var _e = __read(useState([]), 2),
|
|
64
75
|
subSelectOptions = _e[0],
|
|
65
76
|
setSubSelectOptions = _e[1];
|
|
77
|
+
/** 子选择器是否多选 */
|
|
78
|
+
var isSubSelectMultiple = (conditionSelectProps === null || conditionSelectProps === void 0 ? void 0 : conditionSelectProps.mode) === 'multiple';
|
|
66
79
|
useEffect(function () {
|
|
67
80
|
if (value && value.selectValue && optionsList.length) {
|
|
68
81
|
var _a = __read(optionsList.filter(function (item) {
|
|
@@ -76,10 +89,16 @@ var ConditionSelectInput = function ConditionSelectInput(props) {
|
|
|
76
89
|
}, [value, optionsList]);
|
|
77
90
|
var onSelectChange = function onSelectChange(selectValue) {
|
|
78
91
|
var inputValue = isInput ? '' : undefined;
|
|
79
|
-
|
|
92
|
+
var finalSelectInputValue = {
|
|
80
93
|
selectValue: selectValue,
|
|
81
94
|
inputValue: inputValue
|
|
82
|
-
}
|
|
95
|
+
};
|
|
96
|
+
if (isSubSelectMultiple) {
|
|
97
|
+
finalSelectInputValue = __assign(__assign({}, finalSelectInputValue), {
|
|
98
|
+
finalSelectValue: selectValue ? findAllSubSelectItems(optionsList, selectValue) : undefined
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
setSelectInputValue(finalSelectInputValue);
|
|
83
102
|
if (isInput || isNil(selectValue)) {
|
|
84
103
|
setSubSelectOptions([]);
|
|
85
104
|
return;
|
|
@@ -99,9 +118,39 @@ var ConditionSelectInput = function ConditionSelectInput(props) {
|
|
|
99
118
|
});
|
|
100
119
|
};
|
|
101
120
|
var onTypeSelectChange = function onTypeSelectChange(inputValue) {
|
|
102
|
-
|
|
121
|
+
var finalSelectInputValue = {
|
|
103
122
|
selectValue: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.selectValue,
|
|
104
123
|
inputValue: inputValue
|
|
124
|
+
};
|
|
125
|
+
if (isSubSelectMultiple) {
|
|
126
|
+
finalSelectInputValue = __assign(__assign({}, finalSelectInputValue), {
|
|
127
|
+
finalSelectValue: isEmpty(inputValue) ? findAllSubSelectItems(optionsList, selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.selectValue) : inputValue
|
|
128
|
+
});
|
|
129
|
+
}
|
|
130
|
+
setSelectInputValue(finalSelectInputValue);
|
|
131
|
+
};
|
|
132
|
+
var onConditionSelectInputBlur = function onConditionSelectInputBlur() {
|
|
133
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(selectInputValue);
|
|
134
|
+
};
|
|
135
|
+
/** 二级下拉框清空 */
|
|
136
|
+
var onTypeSelectClear = function onTypeSelectClear() {
|
|
137
|
+
var finalSelectInputValue = {
|
|
138
|
+
selectValue: selectInputValue.selectValue,
|
|
139
|
+
inputValue: []
|
|
140
|
+
};
|
|
141
|
+
if (isSubSelectMultiple) {
|
|
142
|
+
finalSelectInputValue = __assign(__assign({}, finalSelectInputValue), {
|
|
143
|
+
finalSelectValue: findAllSubSelectItems(optionsList, selectInputValue.selectValue)
|
|
144
|
+
});
|
|
145
|
+
}
|
|
146
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(finalSelectInputValue);
|
|
147
|
+
};
|
|
148
|
+
/** 一级下拉框清空 */
|
|
149
|
+
var onSelectClear = function onSelectClear() {
|
|
150
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur({
|
|
151
|
+
selectValue: undefined,
|
|
152
|
+
inputValue: undefined,
|
|
153
|
+
finalSelectValue: undefined
|
|
105
154
|
});
|
|
106
155
|
};
|
|
107
156
|
// 是否展示输入框
|
|
@@ -110,13 +159,16 @@ var ConditionSelectInput = function ConditionSelectInput(props) {
|
|
|
110
159
|
className: "condition-select-input"
|
|
111
160
|
}, /*#__PURE__*/React.createElement(ConditionInput, __assign({}, conditionInputProps, {
|
|
112
161
|
onChange: onInputChange,
|
|
113
|
-
value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.inputValue
|
|
162
|
+
value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.inputValue,
|
|
163
|
+
onBlur: onConditionSelectInputBlur
|
|
114
164
|
}))) : /*#__PURE__*/React.createElement("div", {
|
|
115
165
|
className: "condition-select-select-input"
|
|
116
166
|
}, /*#__PURE__*/React.createElement(Select, __assign({}, conditionSelectProps, {
|
|
117
167
|
onChange: onTypeSelectChange,
|
|
118
168
|
value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.inputValue,
|
|
119
|
-
options: subSelectOptions
|
|
169
|
+
options: subSelectOptions,
|
|
170
|
+
onBlur: onConditionSelectInputBlur,
|
|
171
|
+
onClear: onTypeSelectClear
|
|
120
172
|
})));
|
|
121
173
|
return /*#__PURE__*/React.createElement("div", {
|
|
122
174
|
className: "condition-select-wrap"
|
|
@@ -128,7 +180,9 @@ var ConditionSelectInput = function ConditionSelectInput(props) {
|
|
|
128
180
|
}, /*#__PURE__*/React.createElement(Select, __assign({}, selectProps, {
|
|
129
181
|
onChange: onSelectChange,
|
|
130
182
|
value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.selectValue,
|
|
131
|
-
options: optionsList
|
|
183
|
+
options: optionsList,
|
|
184
|
+
onBlur: onConditionSelectInputBlur,
|
|
185
|
+
onClear: onSelectClear
|
|
132
186
|
}))), isShowInput && typeInput);
|
|
133
187
|
};
|
|
134
188
|
export default ConditionSelectInput;
|
|
@@ -15,6 +15,7 @@ export interface MainSelectOptionsType extends SelectOptionsType {
|
|
|
15
15
|
export interface ValueType {
|
|
16
16
|
selectValue?: number | string | null;
|
|
17
17
|
inputValue?: LabelSelectProps['value'] | LabelConditionInputProps['value'];
|
|
18
|
+
finalSelectValue?: LabelSelectProps['value'] | LabelConditionInputProps['value'][];
|
|
18
19
|
}
|
|
19
20
|
export interface LabelConditionSelectInputProps {
|
|
20
21
|
value?: ValueType;
|
|
@@ -28,6 +29,8 @@ export interface LabelConditionSelectInputProps {
|
|
|
28
29
|
conditionSelectProps?: LabelSelectProps;
|
|
29
30
|
/** onChange */
|
|
30
31
|
onChange?: (value: ValueType) => void;
|
|
32
|
+
/** onBlur */
|
|
33
|
+
onBlur?: (value: ValueType) => void;
|
|
31
34
|
/** 输入框类型 */
|
|
32
35
|
inputType?: InputTypeEnum;
|
|
33
36
|
/** select options */
|
|
@@ -35,6 +35,7 @@ var __read = this && this.__read || function (o, n) {
|
|
|
35
35
|
return ar;
|
|
36
36
|
};
|
|
37
37
|
import isNil from 'lodash/isNil';
|
|
38
|
+
import isEmpty from 'lodash/isEmpty';
|
|
38
39
|
import classNames from 'classnames';
|
|
39
40
|
import React, { useEffect, useState } from 'react';
|
|
40
41
|
import useControllableValue from "ahooks/es/useControllableValue";
|
|
@@ -45,6 +46,15 @@ export var InputTypeEnum;
|
|
|
45
46
|
InputTypeEnum["CONDITION_INPUT"] = "conditionInput";
|
|
46
47
|
InputTypeEnum["SELECT"] = "select";
|
|
47
48
|
})(InputTypeEnum || (InputTypeEnum = {}));
|
|
49
|
+
/** 找所有的子代选项 */
|
|
50
|
+
var findAllSubSelectItems = function findAllSubSelectItems(dataSource, key) {
|
|
51
|
+
var _a, _b;
|
|
52
|
+
return (_b = (_a = dataSource.find(function (item) {
|
|
53
|
+
return item.value === key;
|
|
54
|
+
})) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.map(function (subItem) {
|
|
55
|
+
return subItem.value;
|
|
56
|
+
});
|
|
57
|
+
};
|
|
48
58
|
var LabelConditionSelect = function LabelConditionSelect(props) {
|
|
49
59
|
var value = props.value,
|
|
50
60
|
_a = props.hiddenInputKeys,
|
|
@@ -57,7 +67,8 @@ var LabelConditionSelect = function LabelConditionSelect(props) {
|
|
|
57
67
|
_c = props.optionsList,
|
|
58
68
|
optionsList = _c === void 0 ? [] : _c,
|
|
59
69
|
label = props.label,
|
|
60
|
-
className = props.className
|
|
70
|
+
className = props.className,
|
|
71
|
+
onBlur = props.onBlur;
|
|
61
72
|
var isInput = inputType === InputTypeEnum.CONDITION_INPUT;
|
|
62
73
|
var _d = __read(useControllableValue(props), 2),
|
|
63
74
|
selectInputValue = _d[0],
|
|
@@ -65,6 +76,8 @@ var LabelConditionSelect = function LabelConditionSelect(props) {
|
|
|
65
76
|
var _e = __read(useState([]), 2),
|
|
66
77
|
subSelectOptions = _e[0],
|
|
67
78
|
setSubSelectOptions = _e[1];
|
|
79
|
+
/** 子选择器是否多选 */
|
|
80
|
+
var isSubSelectMultiple = (conditionSelectProps === null || conditionSelectProps === void 0 ? void 0 : conditionSelectProps.mode) === 'multiple';
|
|
68
81
|
useEffect(function () {
|
|
69
82
|
if (value && value.selectValue && optionsList.length) {
|
|
70
83
|
var _a = __read(optionsList.filter(function (item) {
|
|
@@ -78,10 +91,16 @@ var LabelConditionSelect = function LabelConditionSelect(props) {
|
|
|
78
91
|
}, [value, optionsList]);
|
|
79
92
|
var onSelectChange = function onSelectChange(selectValue) {
|
|
80
93
|
var inputValue = isInput ? '' : undefined;
|
|
81
|
-
|
|
94
|
+
var finalSelectInputValue = {
|
|
82
95
|
selectValue: selectValue,
|
|
83
96
|
inputValue: inputValue
|
|
84
|
-
}
|
|
97
|
+
};
|
|
98
|
+
if (isSubSelectMultiple) {
|
|
99
|
+
finalSelectInputValue = __assign(__assign({}, finalSelectInputValue), {
|
|
100
|
+
finalSelectValue: selectValue ? findAllSubSelectItems(optionsList, selectValue) : undefined
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
setSelectInputValue(finalSelectInputValue);
|
|
85
104
|
if (isInput || isNil(selectValue)) {
|
|
86
105
|
setSubSelectOptions([]);
|
|
87
106
|
return;
|
|
@@ -101,9 +120,40 @@ var LabelConditionSelect = function LabelConditionSelect(props) {
|
|
|
101
120
|
});
|
|
102
121
|
};
|
|
103
122
|
var onTypeSelectChange = function onTypeSelectChange(inputValue) {
|
|
104
|
-
|
|
123
|
+
var finalSelectInputValue = {
|
|
105
124
|
selectValue: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.selectValue,
|
|
106
125
|
inputValue: inputValue
|
|
126
|
+
};
|
|
127
|
+
if (isSubSelectMultiple) {
|
|
128
|
+
finalSelectInputValue = __assign(__assign({}, finalSelectInputValue), {
|
|
129
|
+
finalSelectValue: isEmpty(inputValue) ? findAllSubSelectItems(optionsList, selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.selectValue) : inputValue
|
|
130
|
+
});
|
|
131
|
+
}
|
|
132
|
+
setSelectInputValue(finalSelectInputValue);
|
|
133
|
+
};
|
|
134
|
+
/** 联级选择框失去焦点 */
|
|
135
|
+
var onLabelConditionSelectInputBlur = function onLabelConditionSelectInputBlur() {
|
|
136
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(selectInputValue);
|
|
137
|
+
};
|
|
138
|
+
/** 二级下拉框清空 */
|
|
139
|
+
var onTypeSelectClear = function onTypeSelectClear() {
|
|
140
|
+
var finalSelectInputValue = {
|
|
141
|
+
selectValue: selectInputValue.selectValue,
|
|
142
|
+
inputValue: []
|
|
143
|
+
};
|
|
144
|
+
if (isSubSelectMultiple) {
|
|
145
|
+
finalSelectInputValue = __assign(__assign({}, finalSelectInputValue), {
|
|
146
|
+
finalSelectValue: findAllSubSelectItems(optionsList, selectInputValue.selectValue)
|
|
147
|
+
});
|
|
148
|
+
}
|
|
149
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(finalSelectInputValue);
|
|
150
|
+
};
|
|
151
|
+
/** 一级下拉框清空 */
|
|
152
|
+
var onSelectClear = function onSelectClear() {
|
|
153
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur({
|
|
154
|
+
selectValue: undefined,
|
|
155
|
+
inputValue: undefined,
|
|
156
|
+
finalSelectValue: undefined
|
|
107
157
|
});
|
|
108
158
|
};
|
|
109
159
|
// 是否展示输入框
|
|
@@ -111,13 +161,16 @@ var LabelConditionSelect = function LabelConditionSelect(props) {
|
|
|
111
161
|
var typeInput = isInput ? /*#__PURE__*/React.createElement(LabelConditionInput, __assign({}, conditionInputProps, {
|
|
112
162
|
onChange: onInputChange,
|
|
113
163
|
className: "label-condition-select-second-input",
|
|
114
|
-
value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.inputValue
|
|
164
|
+
value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.inputValue,
|
|
165
|
+
onBlur: onLabelConditionSelectInputBlur
|
|
115
166
|
})) : /*#__PURE__*/React.createElement("div", {
|
|
116
167
|
className: "label-condition-select-second-select"
|
|
117
168
|
}, /*#__PURE__*/React.createElement(LabelSelect, __assign({}, conditionSelectProps, {
|
|
118
169
|
onChange: onTypeSelectChange,
|
|
119
170
|
value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.inputValue,
|
|
120
|
-
options: subSelectOptions
|
|
171
|
+
options: subSelectOptions,
|
|
172
|
+
onBlur: onLabelConditionSelectInputBlur,
|
|
173
|
+
onClear: onTypeSelectClear
|
|
121
174
|
})));
|
|
122
175
|
return /*#__PURE__*/React.createElement("div", {
|
|
123
176
|
className: classNames('label-condition-select', className)
|
|
@@ -131,7 +184,9 @@ var LabelConditionSelect = function LabelConditionSelect(props) {
|
|
|
131
184
|
}, selectProps, {
|
|
132
185
|
onChange: onSelectChange,
|
|
133
186
|
value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.selectValue,
|
|
134
|
-
options: optionsList
|
|
187
|
+
options: optionsList,
|
|
188
|
+
onBlur: onLabelConditionSelectInputBlur,
|
|
189
|
+
onClear: onSelectClear
|
|
135
190
|
}))), isShowInput && typeInput);
|
|
136
191
|
};
|
|
137
192
|
export default LabelConditionSelect;
|
|
@@ -14,6 +14,7 @@ export interface MainSelectOptionsType extends SelectOptionsType {
|
|
|
14
14
|
export interface ValueType {
|
|
15
15
|
selectValue?: number | string | null;
|
|
16
16
|
inputValue?: SelectProps['value'] | ConditionInputProps['value'];
|
|
17
|
+
finalSelectValue?: SelectProps['value'] | ConditionInputProps['value'][];
|
|
17
18
|
}
|
|
18
19
|
export interface ConditionSelectInputProps {
|
|
19
20
|
value?: ValueType;
|
|
@@ -25,7 +26,10 @@ export interface ConditionSelectInputProps {
|
|
|
25
26
|
conditionInputProps?: ConditionInputProps;
|
|
26
27
|
/** 联动selectProps */
|
|
27
28
|
conditionSelectProps?: SelectProps;
|
|
29
|
+
/** onChange */
|
|
28
30
|
onChange?: (value: ValueType) => void;
|
|
31
|
+
/** onBlur */
|
|
32
|
+
onBlur?: (value: ValueType) => void;
|
|
29
33
|
/** 输入框类型 */
|
|
30
34
|
inputType?: InputTypeEnum;
|
|
31
35
|
/** select options */
|
|
@@ -79,6 +79,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
79
79
|
});
|
|
80
80
|
exports.InputTypeEnum = void 0;
|
|
81
81
|
var isNil_1 = __importDefault(require("lodash/isNil"));
|
|
82
|
+
var isEmpty_1 = __importDefault(require("lodash/isEmpty"));
|
|
82
83
|
var classnames_1 = __importDefault(require("classnames"));
|
|
83
84
|
var select_1 = __importDefault(require("antd/lib/select"));
|
|
84
85
|
var react_1 = __importStar(require("react"));
|
|
@@ -89,6 +90,15 @@ var InputTypeEnum;
|
|
|
89
90
|
InputTypeEnum["CONDITION_INPUT"] = "conditionInput";
|
|
90
91
|
InputTypeEnum["SELECT"] = "select";
|
|
91
92
|
})(InputTypeEnum = exports.InputTypeEnum || (exports.InputTypeEnum = {}));
|
|
93
|
+
/** 找所有的子代选项 */
|
|
94
|
+
var findAllSubSelectItems = function findAllSubSelectItems(dataSource, key) {
|
|
95
|
+
var _a, _b;
|
|
96
|
+
return (_b = (_a = dataSource.find(function (item) {
|
|
97
|
+
return item.value === key;
|
|
98
|
+
})) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.map(function (subItem) {
|
|
99
|
+
return subItem.value;
|
|
100
|
+
});
|
|
101
|
+
};
|
|
92
102
|
var ConditionSelectInput = function ConditionSelectInput(props) {
|
|
93
103
|
var value = props.value,
|
|
94
104
|
_a = props.hiddenInputKeys,
|
|
@@ -99,7 +109,8 @@ var ConditionSelectInput = function ConditionSelectInput(props) {
|
|
|
99
109
|
_b = props.inputType,
|
|
100
110
|
inputType = _b === void 0 ? InputTypeEnum.CONDITION_INPUT : _b,
|
|
101
111
|
_c = props.optionsList,
|
|
102
|
-
optionsList = _c === void 0 ? [] : _c
|
|
112
|
+
optionsList = _c === void 0 ? [] : _c,
|
|
113
|
+
onBlur = props.onBlur;
|
|
103
114
|
var isInput = inputType === InputTypeEnum.CONDITION_INPUT;
|
|
104
115
|
var _d = __read((0, useControllableValue_1["default"])(props), 2),
|
|
105
116
|
selectInputValue = _d[0],
|
|
@@ -107,6 +118,8 @@ var ConditionSelectInput = function ConditionSelectInput(props) {
|
|
|
107
118
|
var _e = __read((0, react_1.useState)([]), 2),
|
|
108
119
|
subSelectOptions = _e[0],
|
|
109
120
|
setSubSelectOptions = _e[1];
|
|
121
|
+
/** 子选择器是否多选 */
|
|
122
|
+
var isSubSelectMultiple = (conditionSelectProps === null || conditionSelectProps === void 0 ? void 0 : conditionSelectProps.mode) === 'multiple';
|
|
110
123
|
(0, react_1.useEffect)(function () {
|
|
111
124
|
if (value && value.selectValue && optionsList.length) {
|
|
112
125
|
var _a = __read(optionsList.filter(function (item) {
|
|
@@ -120,10 +133,16 @@ var ConditionSelectInput = function ConditionSelectInput(props) {
|
|
|
120
133
|
}, [value, optionsList]);
|
|
121
134
|
var onSelectChange = function onSelectChange(selectValue) {
|
|
122
135
|
var inputValue = isInput ? '' : undefined;
|
|
123
|
-
|
|
136
|
+
var finalSelectInputValue = {
|
|
124
137
|
selectValue: selectValue,
|
|
125
138
|
inputValue: inputValue
|
|
126
|
-
}
|
|
139
|
+
};
|
|
140
|
+
if (isSubSelectMultiple) {
|
|
141
|
+
finalSelectInputValue = __assign(__assign({}, finalSelectInputValue), {
|
|
142
|
+
finalSelectValue: selectValue ? findAllSubSelectItems(optionsList, selectValue) : undefined
|
|
143
|
+
});
|
|
144
|
+
}
|
|
145
|
+
setSelectInputValue(finalSelectInputValue);
|
|
127
146
|
if (isInput || (0, isNil_1["default"])(selectValue)) {
|
|
128
147
|
setSubSelectOptions([]);
|
|
129
148
|
return;
|
|
@@ -143,9 +162,39 @@ var ConditionSelectInput = function ConditionSelectInput(props) {
|
|
|
143
162
|
});
|
|
144
163
|
};
|
|
145
164
|
var onTypeSelectChange = function onTypeSelectChange(inputValue) {
|
|
146
|
-
|
|
165
|
+
var finalSelectInputValue = {
|
|
147
166
|
selectValue: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.selectValue,
|
|
148
167
|
inputValue: inputValue
|
|
168
|
+
};
|
|
169
|
+
if (isSubSelectMultiple) {
|
|
170
|
+
finalSelectInputValue = __assign(__assign({}, finalSelectInputValue), {
|
|
171
|
+
finalSelectValue: (0, isEmpty_1["default"])(inputValue) ? findAllSubSelectItems(optionsList, selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.selectValue) : inputValue
|
|
172
|
+
});
|
|
173
|
+
}
|
|
174
|
+
setSelectInputValue(finalSelectInputValue);
|
|
175
|
+
};
|
|
176
|
+
var onConditionSelectInputBlur = function onConditionSelectInputBlur() {
|
|
177
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(selectInputValue);
|
|
178
|
+
};
|
|
179
|
+
/** 二级下拉框清空 */
|
|
180
|
+
var onTypeSelectClear = function onTypeSelectClear() {
|
|
181
|
+
var finalSelectInputValue = {
|
|
182
|
+
selectValue: selectInputValue.selectValue,
|
|
183
|
+
inputValue: []
|
|
184
|
+
};
|
|
185
|
+
if (isSubSelectMultiple) {
|
|
186
|
+
finalSelectInputValue = __assign(__assign({}, finalSelectInputValue), {
|
|
187
|
+
finalSelectValue: findAllSubSelectItems(optionsList, selectInputValue.selectValue)
|
|
188
|
+
});
|
|
189
|
+
}
|
|
190
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(finalSelectInputValue);
|
|
191
|
+
};
|
|
192
|
+
/** 一级下拉框清空 */
|
|
193
|
+
var onSelectClear = function onSelectClear() {
|
|
194
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur({
|
|
195
|
+
selectValue: undefined,
|
|
196
|
+
inputValue: undefined,
|
|
197
|
+
finalSelectValue: undefined
|
|
149
198
|
});
|
|
150
199
|
};
|
|
151
200
|
// 是否展示输入框
|
|
@@ -154,13 +203,16 @@ var ConditionSelectInput = function ConditionSelectInput(props) {
|
|
|
154
203
|
className: "condition-select-input"
|
|
155
204
|
}, react_1["default"].createElement(condition_input_1["default"], __assign({}, conditionInputProps, {
|
|
156
205
|
onChange: onInputChange,
|
|
157
|
-
value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.inputValue
|
|
206
|
+
value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.inputValue,
|
|
207
|
+
onBlur: onConditionSelectInputBlur
|
|
158
208
|
}))) : react_1["default"].createElement("div", {
|
|
159
209
|
className: "condition-select-select-input"
|
|
160
210
|
}, react_1["default"].createElement(select_1["default"], __assign({}, conditionSelectProps, {
|
|
161
211
|
onChange: onTypeSelectChange,
|
|
162
212
|
value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.inputValue,
|
|
163
|
-
options: subSelectOptions
|
|
213
|
+
options: subSelectOptions,
|
|
214
|
+
onBlur: onConditionSelectInputBlur,
|
|
215
|
+
onClear: onTypeSelectClear
|
|
164
216
|
})));
|
|
165
217
|
return react_1["default"].createElement("div", {
|
|
166
218
|
className: "condition-select-wrap"
|
|
@@ -172,7 +224,9 @@ var ConditionSelectInput = function ConditionSelectInput(props) {
|
|
|
172
224
|
}, react_1["default"].createElement(select_1["default"], __assign({}, selectProps, {
|
|
173
225
|
onChange: onSelectChange,
|
|
174
226
|
value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.selectValue,
|
|
175
|
-
options: optionsList
|
|
227
|
+
options: optionsList,
|
|
228
|
+
onBlur: onConditionSelectInputBlur,
|
|
229
|
+
onClear: onSelectClear
|
|
176
230
|
}))), isShowInput && typeInput);
|
|
177
231
|
};
|
|
178
232
|
exports["default"] = ConditionSelectInput;
|
|
@@ -15,6 +15,7 @@ export interface MainSelectOptionsType extends SelectOptionsType {
|
|
|
15
15
|
export interface ValueType {
|
|
16
16
|
selectValue?: number | string | null;
|
|
17
17
|
inputValue?: LabelSelectProps['value'] | LabelConditionInputProps['value'];
|
|
18
|
+
finalSelectValue?: LabelSelectProps['value'] | LabelConditionInputProps['value'][];
|
|
18
19
|
}
|
|
19
20
|
export interface LabelConditionSelectInputProps {
|
|
20
21
|
value?: ValueType;
|
|
@@ -28,6 +29,8 @@ export interface LabelConditionSelectInputProps {
|
|
|
28
29
|
conditionSelectProps?: LabelSelectProps;
|
|
29
30
|
/** onChange */
|
|
30
31
|
onChange?: (value: ValueType) => void;
|
|
32
|
+
/** onBlur */
|
|
33
|
+
onBlur?: (value: ValueType) => void;
|
|
31
34
|
/** 输入框类型 */
|
|
32
35
|
inputType?: InputTypeEnum;
|
|
33
36
|
/** select options */
|
|
@@ -79,6 +79,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
79
79
|
});
|
|
80
80
|
exports.InputTypeEnum = void 0;
|
|
81
81
|
var isNil_1 = __importDefault(require("lodash/isNil"));
|
|
82
|
+
var isEmpty_1 = __importDefault(require("lodash/isEmpty"));
|
|
82
83
|
var classnames_1 = __importDefault(require("classnames"));
|
|
83
84
|
var react_1 = __importStar(require("react"));
|
|
84
85
|
var useControllableValue_1 = __importDefault(require("ahooks/lib/useControllableValue"));
|
|
@@ -89,6 +90,15 @@ var InputTypeEnum;
|
|
|
89
90
|
InputTypeEnum["CONDITION_INPUT"] = "conditionInput";
|
|
90
91
|
InputTypeEnum["SELECT"] = "select";
|
|
91
92
|
})(InputTypeEnum = exports.InputTypeEnum || (exports.InputTypeEnum = {}));
|
|
93
|
+
/** 找所有的子代选项 */
|
|
94
|
+
var findAllSubSelectItems = function findAllSubSelectItems(dataSource, key) {
|
|
95
|
+
var _a, _b;
|
|
96
|
+
return (_b = (_a = dataSource.find(function (item) {
|
|
97
|
+
return item.value === key;
|
|
98
|
+
})) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.map(function (subItem) {
|
|
99
|
+
return subItem.value;
|
|
100
|
+
});
|
|
101
|
+
};
|
|
92
102
|
var LabelConditionSelect = function LabelConditionSelect(props) {
|
|
93
103
|
var value = props.value,
|
|
94
104
|
_a = props.hiddenInputKeys,
|
|
@@ -101,7 +111,8 @@ var LabelConditionSelect = function LabelConditionSelect(props) {
|
|
|
101
111
|
_c = props.optionsList,
|
|
102
112
|
optionsList = _c === void 0 ? [] : _c,
|
|
103
113
|
label = props.label,
|
|
104
|
-
className = props.className
|
|
114
|
+
className = props.className,
|
|
115
|
+
onBlur = props.onBlur;
|
|
105
116
|
var isInput = inputType === InputTypeEnum.CONDITION_INPUT;
|
|
106
117
|
var _d = __read((0, useControllableValue_1["default"])(props), 2),
|
|
107
118
|
selectInputValue = _d[0],
|
|
@@ -109,6 +120,8 @@ var LabelConditionSelect = function LabelConditionSelect(props) {
|
|
|
109
120
|
var _e = __read((0, react_1.useState)([]), 2),
|
|
110
121
|
subSelectOptions = _e[0],
|
|
111
122
|
setSubSelectOptions = _e[1];
|
|
123
|
+
/** 子选择器是否多选 */
|
|
124
|
+
var isSubSelectMultiple = (conditionSelectProps === null || conditionSelectProps === void 0 ? void 0 : conditionSelectProps.mode) === 'multiple';
|
|
112
125
|
(0, react_1.useEffect)(function () {
|
|
113
126
|
if (value && value.selectValue && optionsList.length) {
|
|
114
127
|
var _a = __read(optionsList.filter(function (item) {
|
|
@@ -122,10 +135,16 @@ var LabelConditionSelect = function LabelConditionSelect(props) {
|
|
|
122
135
|
}, [value, optionsList]);
|
|
123
136
|
var onSelectChange = function onSelectChange(selectValue) {
|
|
124
137
|
var inputValue = isInput ? '' : undefined;
|
|
125
|
-
|
|
138
|
+
var finalSelectInputValue = {
|
|
126
139
|
selectValue: selectValue,
|
|
127
140
|
inputValue: inputValue
|
|
128
|
-
}
|
|
141
|
+
};
|
|
142
|
+
if (isSubSelectMultiple) {
|
|
143
|
+
finalSelectInputValue = __assign(__assign({}, finalSelectInputValue), {
|
|
144
|
+
finalSelectValue: selectValue ? findAllSubSelectItems(optionsList, selectValue) : undefined
|
|
145
|
+
});
|
|
146
|
+
}
|
|
147
|
+
setSelectInputValue(finalSelectInputValue);
|
|
129
148
|
if (isInput || (0, isNil_1["default"])(selectValue)) {
|
|
130
149
|
setSubSelectOptions([]);
|
|
131
150
|
return;
|
|
@@ -145,9 +164,40 @@ var LabelConditionSelect = function LabelConditionSelect(props) {
|
|
|
145
164
|
});
|
|
146
165
|
};
|
|
147
166
|
var onTypeSelectChange = function onTypeSelectChange(inputValue) {
|
|
148
|
-
|
|
167
|
+
var finalSelectInputValue = {
|
|
149
168
|
selectValue: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.selectValue,
|
|
150
169
|
inputValue: inputValue
|
|
170
|
+
};
|
|
171
|
+
if (isSubSelectMultiple) {
|
|
172
|
+
finalSelectInputValue = __assign(__assign({}, finalSelectInputValue), {
|
|
173
|
+
finalSelectValue: (0, isEmpty_1["default"])(inputValue) ? findAllSubSelectItems(optionsList, selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.selectValue) : inputValue
|
|
174
|
+
});
|
|
175
|
+
}
|
|
176
|
+
setSelectInputValue(finalSelectInputValue);
|
|
177
|
+
};
|
|
178
|
+
/** 联级选择框失去焦点 */
|
|
179
|
+
var onLabelConditionSelectInputBlur = function onLabelConditionSelectInputBlur() {
|
|
180
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(selectInputValue);
|
|
181
|
+
};
|
|
182
|
+
/** 二级下拉框清空 */
|
|
183
|
+
var onTypeSelectClear = function onTypeSelectClear() {
|
|
184
|
+
var finalSelectInputValue = {
|
|
185
|
+
selectValue: selectInputValue.selectValue,
|
|
186
|
+
inputValue: []
|
|
187
|
+
};
|
|
188
|
+
if (isSubSelectMultiple) {
|
|
189
|
+
finalSelectInputValue = __assign(__assign({}, finalSelectInputValue), {
|
|
190
|
+
finalSelectValue: findAllSubSelectItems(optionsList, selectInputValue.selectValue)
|
|
191
|
+
});
|
|
192
|
+
}
|
|
193
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(finalSelectInputValue);
|
|
194
|
+
};
|
|
195
|
+
/** 一级下拉框清空 */
|
|
196
|
+
var onSelectClear = function onSelectClear() {
|
|
197
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur({
|
|
198
|
+
selectValue: undefined,
|
|
199
|
+
inputValue: undefined,
|
|
200
|
+
finalSelectValue: undefined
|
|
151
201
|
});
|
|
152
202
|
};
|
|
153
203
|
// 是否展示输入框
|
|
@@ -155,13 +205,16 @@ var LabelConditionSelect = function LabelConditionSelect(props) {
|
|
|
155
205
|
var typeInput = isInput ? react_1["default"].createElement(label_condition_input_1["default"], __assign({}, conditionInputProps, {
|
|
156
206
|
onChange: onInputChange,
|
|
157
207
|
className: "label-condition-select-second-input",
|
|
158
|
-
value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.inputValue
|
|
208
|
+
value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.inputValue,
|
|
209
|
+
onBlur: onLabelConditionSelectInputBlur
|
|
159
210
|
})) : react_1["default"].createElement("div", {
|
|
160
211
|
className: "label-condition-select-second-select"
|
|
161
212
|
}, react_1["default"].createElement(label_select_1["default"], __assign({}, conditionSelectProps, {
|
|
162
213
|
onChange: onTypeSelectChange,
|
|
163
214
|
value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.inputValue,
|
|
164
|
-
options: subSelectOptions
|
|
215
|
+
options: subSelectOptions,
|
|
216
|
+
onBlur: onLabelConditionSelectInputBlur,
|
|
217
|
+
onClear: onTypeSelectClear
|
|
165
218
|
})));
|
|
166
219
|
return react_1["default"].createElement("div", {
|
|
167
220
|
className: (0, classnames_1["default"])('label-condition-select', className)
|
|
@@ -175,7 +228,9 @@ var LabelConditionSelect = function LabelConditionSelect(props) {
|
|
|
175
228
|
}, selectProps, {
|
|
176
229
|
onChange: onSelectChange,
|
|
177
230
|
value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.selectValue,
|
|
178
|
-
options: optionsList
|
|
231
|
+
options: optionsList,
|
|
232
|
+
onBlur: onLabelConditionSelectInputBlur,
|
|
233
|
+
onClear: onSelectClear
|
|
179
234
|
}))), isShowInput && typeInput);
|
|
180
235
|
};
|
|
181
236
|
exports["default"] = LabelConditionSelect;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "assui",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.41",
|
|
4
4
|
"description": "react ui library",
|
|
5
5
|
"author": "jason <usochen@gmail.com>",
|
|
6
6
|
"main": "./lib/index.js",
|
|
@@ -80,5 +80,5 @@
|
|
|
80
80
|
"node": ">=10.0.0"
|
|
81
81
|
},
|
|
82
82
|
"license": "MIT",
|
|
83
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "743a32b19ad5f38ae8332a67fef0a01aab6d46d5"
|
|
84
84
|
}
|