linkmore-design 1.0.36 → 1.0.37
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/Cascader/demos/basic.d.ts +2 -0
- package/dist/Cascader/index.d.ts +4 -0
- package/dist/Cascader/style/index.d.ts +1 -0
- package/dist/Form/demos/basic.d.ts +2 -0
- package/dist/Form/demos/drawer1152-triple.d.ts +3 -0
- package/dist/Form/demos/drawer440-double.d.ts +3 -0
- package/dist/Form/demos/drawer440.d.ts +3 -0
- package/dist/Form/demos/drawer720-double.d.ts +3 -0
- package/dist/Form/demos/modal416.d.ts +3 -0
- package/dist/Form/demos/modal552-double.d.ts +3 -0
- package/dist/Form/index.d.ts +24 -0
- package/dist/Form/style/index.d.ts +1 -0
- package/dist/LmSelect/GhostSelect.d.ts +2 -0
- package/dist/LmSelect/NormalSelect.d.ts +11 -0
- package/dist/LmSelect/demos/basic.d.ts +2 -0
- package/dist/LmSelect/demos/checkbox.d.ts +2 -0
- package/dist/LmSelect/demos/ghost.d.ts +2 -0
- package/dist/LmSelect/index.d.ts +14 -0
- package/dist/LmSelect/style/index.d.ts +1 -0
- package/dist/LmSelect/useCheckboxOptions.d.ts +1 -0
- package/dist/LmSelect/utils.d.ts +10 -0
- package/dist/VirtualList/index.d.ts +1 -1
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/useEvent/index.d.ts +2 -0
- package/dist/hooks/useFullscreen/demos/basic.d.ts +2 -0
- package/dist/hooks/useFullscreen/index.d.ts +15 -0
- package/dist/index.d.ts +4 -1
- package/dist/index.umd.js +1213 -229
- package/dist/index.umd.min.js +7 -7
- package/es/Cascader/index.d.ts +4 -0
- package/es/Cascader/index.js +37 -0
- package/es/Cascader/style/index.css +520 -0
- package/es/Cascader/style/index.d.ts +1 -0
- package/es/Cascader/style/index.js +1 -0
- package/es/Form/index.d.ts +24 -0
- package/es/Form/index.js +56 -0
- package/es/Form/style/index.css +531 -0
- package/es/Form/style/index.d.ts +1 -0
- package/es/Form/style/index.js +1 -0
- package/es/LmSelect/GhostSelect.d.ts +2 -0
- package/es/LmSelect/GhostSelect.js +523 -0
- package/es/LmSelect/NormalSelect.d.ts +11 -0
- package/es/LmSelect/NormalSelect.js +97 -0
- package/es/LmSelect/icon_placeholder.png +0 -0
- package/es/LmSelect/index.d.ts +14 -0
- package/es/LmSelect/index.js +34 -0
- package/es/LmSelect/style/index.css +751 -0
- package/es/LmSelect/style/index.d.ts +1 -0
- package/es/LmSelect/style/index.js +1 -0
- package/es/LmSelect/useCheckboxOptions.d.ts +1 -0
- package/es/LmSelect/useCheckboxOptions.js +120 -0
- package/es/LmSelect/utils.d.ts +10 -0
- package/es/LmSelect/utils.js +66 -0
- package/es/LmTable/Table.js +15 -14
- package/es/VirtualList/index.js +2 -1
- package/es/hooks/index.d.ts +2 -0
- package/es/hooks/index.js +2 -0
- package/es/hooks/useEvent/index.d.ts +2 -0
- package/es/hooks/useEvent/index.js +16 -0
- package/es/hooks/useFullscreen/index.d.ts +15 -0
- package/es/hooks/useFullscreen/index.js +99 -0
- package/es/index.d.ts +4 -1
- package/es/index.js +4 -1
- package/lib/Cascader/index.d.ts +4 -0
- package/lib/Cascader/index.js +50 -0
- package/lib/Cascader/style/index.css +520 -0
- package/lib/Cascader/style/index.d.ts +1 -0
- package/lib/Cascader/style/index.js +3 -0
- package/lib/Form/index.d.ts +24 -0
- package/lib/Form/index.js +75 -0
- package/lib/Form/style/index.css +531 -0
- package/lib/Form/style/index.d.ts +1 -0
- package/lib/Form/style/index.js +3 -0
- package/lib/LmSelect/GhostSelect.d.ts +2 -0
- package/lib/LmSelect/GhostSelect.js +545 -0
- package/lib/LmSelect/NormalSelect.d.ts +11 -0
- package/lib/LmSelect/NormalSelect.js +116 -0
- package/lib/LmSelect/icon_placeholder.png +0 -0
- package/lib/LmSelect/index.d.ts +14 -0
- package/lib/LmSelect/index.js +50 -0
- package/lib/LmSelect/style/index.css +751 -0
- package/lib/LmSelect/style/index.d.ts +1 -0
- package/lib/LmSelect/style/index.js +3 -0
- package/lib/LmSelect/useCheckboxOptions.d.ts +1 -0
- package/lib/LmSelect/useCheckboxOptions.js +139 -0
- package/lib/LmSelect/utils.d.ts +10 -0
- package/lib/LmSelect/utils.js +103 -0
- package/lib/LmTable/Table.js +15 -14
- package/lib/VirtualList/index.js +2 -1
- package/lib/hooks/index.d.ts +2 -0
- package/lib/hooks/index.js +23 -0
- package/lib/hooks/useEvent/index.d.ts +2 -0
- package/lib/hooks/useEvent/index.js +25 -0
- package/lib/hooks/useFullscreen/index.d.ts +15 -0
- package/lib/hooks/useFullscreen/index.js +113 -0
- package/lib/index.d.ts +4 -1
- package/lib/index.js +25 -1
- package/package.json +5 -4
|
@@ -0,0 +1,545 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
+
|
|
5
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
require("antd/es/cascader/style");
|
|
13
|
+
|
|
14
|
+
var _cascader = _interopRequireDefault(require("antd/es/cascader"));
|
|
15
|
+
|
|
16
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
17
|
+
|
|
18
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
19
|
+
|
|
20
|
+
var _hooks = require("@/hooks");
|
|
21
|
+
|
|
22
|
+
var _ahooks = require("ahooks");
|
|
23
|
+
|
|
24
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
25
|
+
|
|
26
|
+
var _linkmoreDesign = require("linkmore-design");
|
|
27
|
+
|
|
28
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
29
|
+
|
|
30
|
+
var _IconFont = _interopRequireDefault(require("../IconFont"));
|
|
31
|
+
|
|
32
|
+
var _VirtualList = _interopRequireDefault(require("../VirtualList"));
|
|
33
|
+
|
|
34
|
+
var _utils = require("./utils");
|
|
35
|
+
|
|
36
|
+
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
37
|
+
var t = {};
|
|
38
|
+
|
|
39
|
+
for (var p in s) {
|
|
40
|
+
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
44
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
45
|
+
}
|
|
46
|
+
return t;
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
var imgEmpty = require('./icon_placeholder.png');
|
|
50
|
+
|
|
51
|
+
var FilterEmpty = function FilterEmpty() {
|
|
52
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
53
|
+
className: "filter_empty"
|
|
54
|
+
}, /*#__PURE__*/_react.default.createElement("img", {
|
|
55
|
+
src: imgEmpty,
|
|
56
|
+
alt: "empty",
|
|
57
|
+
width: 81
|
|
58
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
59
|
+
className: "filter_empty_text"
|
|
60
|
+
}, "\u6682\u65E0\u6570\u636E"));
|
|
61
|
+
}; // 下拉单选过滤器
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
var SelectFilter = function SelectFilter(_ref) {
|
|
65
|
+
var _ref$filters = _ref.filters,
|
|
66
|
+
filters = _ref$filters === void 0 ? [] : _ref$filters,
|
|
67
|
+
getFilterValue = _ref.getFilterValue,
|
|
68
|
+
setFilterValue = _ref.setFilterValue;
|
|
69
|
+
var inputRef = (0, _react.useRef)(null); // 搜索后的筛选项
|
|
70
|
+
|
|
71
|
+
var _useState = (0, _react.useState)(filters),
|
|
72
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
73
|
+
options = _useState2[0],
|
|
74
|
+
setOptions = _useState2[1]; // 是否存在搜索, 当数据大于8时存在搜索
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
var isSearch = (0, _react.useMemo)(function () {
|
|
78
|
+
return filters.length > 8;
|
|
79
|
+
}, [filters.length]); // 搜索
|
|
80
|
+
|
|
81
|
+
var handleFilter = (0, _hooks.useEvent)(function (val) {
|
|
82
|
+
return setOptions(filters.filter(function (v) {
|
|
83
|
+
return (0, _utils.onStringSearch)(val, v.label);
|
|
84
|
+
}));
|
|
85
|
+
}); // 单选事件
|
|
86
|
+
|
|
87
|
+
var onChange = function onChange(e, item) {
|
|
88
|
+
e.preventDefault();
|
|
89
|
+
setFilterValue(item.value);
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
93
|
+
className: "filter_dropdown"
|
|
94
|
+
}, isSearch && /*#__PURE__*/_react.default.createElement("div", {
|
|
95
|
+
className: "filter_header"
|
|
96
|
+
}, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Input.Search, {
|
|
97
|
+
ref: inputRef,
|
|
98
|
+
allowClear: true,
|
|
99
|
+
size: "small",
|
|
100
|
+
placeholder: "\u8BF7\u8F93\u5165",
|
|
101
|
+
onSearch: handleFilter,
|
|
102
|
+
onChange: function onChange(e) {
|
|
103
|
+
return handleFilter(e.target.value);
|
|
104
|
+
}
|
|
105
|
+
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
106
|
+
className: "filter_body"
|
|
107
|
+
}, /*#__PURE__*/_react.default.createElement(_VirtualList.default, {
|
|
108
|
+
options: options,
|
|
109
|
+
className: "filter_list"
|
|
110
|
+
}, function (_a) {
|
|
111
|
+
var item = _a.item,
|
|
112
|
+
resetProps = __rest(_a, ["item"]);
|
|
113
|
+
|
|
114
|
+
return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, resetProps, {
|
|
115
|
+
className: (0, _classnames.default)('filter_item', {
|
|
116
|
+
checked: item.value === getFilterValue
|
|
117
|
+
}),
|
|
118
|
+
onClick: function onClick(e) {
|
|
119
|
+
return onChange(e, item);
|
|
120
|
+
}
|
|
121
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
122
|
+
className: "filter_item-content"
|
|
123
|
+
}, item.label));
|
|
124
|
+
}), !options.length && /*#__PURE__*/_react.default.createElement(FilterEmpty, null)));
|
|
125
|
+
}; // 下拉多选过滤器: 要过滤的数据, 当前选中项, 触发过滤, 过滤前的数据
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
var CheckboxFilter = function CheckboxFilter(_ref2) {
|
|
129
|
+
var _ref2$filters = _ref2.filters,
|
|
130
|
+
filters = _ref2$filters === void 0 ? [] : _ref2$filters,
|
|
131
|
+
_ref2$getFilterValue = _ref2.getFilterValue,
|
|
132
|
+
getFilterValue = _ref2$getFilterValue === void 0 ? [] : _ref2$getFilterValue,
|
|
133
|
+
setFilterValue = _ref2.setFilterValue;
|
|
134
|
+
var onValuesChange = (0, _hooks.useEvent)(function (checkedValues) {
|
|
135
|
+
return setFilterValue(checkedValues, false);
|
|
136
|
+
}); // 父组件和子组件同步checked状态
|
|
137
|
+
|
|
138
|
+
var _useControllableValue = (0, _ahooks.useControllableValue)({
|
|
139
|
+
value: getFilterValue,
|
|
140
|
+
onChange: onValuesChange
|
|
141
|
+
}),
|
|
142
|
+
_useControllableValue2 = (0, _slicedToArray2.default)(_useControllableValue, 2),
|
|
143
|
+
checkedValues = _useControllableValue2[0],
|
|
144
|
+
setCheckedValues = _useControllableValue2[1]; // 搜索后的筛选项:[{value: '', ... }, ...]
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
var _useState3 = (0, _react.useState)(filters),
|
|
148
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
149
|
+
options = _useState4[0],
|
|
150
|
+
setOptions = _useState4[1]; // 是否存在搜索, 当数据大于8时存在搜索
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
var isSearch = (0, _react.useMemo)(function () {
|
|
154
|
+
return filters.length > 8;
|
|
155
|
+
}, [filters.length]); // 是否全选: 选中的数据大于等于筛选后的数据 && 筛选后的数据全部存在于选中的数据中
|
|
156
|
+
|
|
157
|
+
var checkAll = (0, _react.useMemo)(function () {
|
|
158
|
+
var isLen = checkedValues.length >= options.length;
|
|
159
|
+
return isLen && options.every(function (_ref3) {
|
|
160
|
+
var value = _ref3.value;
|
|
161
|
+
return checkedValues.includes(value);
|
|
162
|
+
});
|
|
163
|
+
}, [checkedValues.length, options]); // 是否半选: 存在选中的数据 && 未全选
|
|
164
|
+
|
|
165
|
+
var indeterminate = (0, _react.useMemo)(function () {
|
|
166
|
+
return checkedValues.length && !checkAll;
|
|
167
|
+
}, [checkedValues.length, checkAll]); // 全选事件
|
|
168
|
+
|
|
169
|
+
var onCheckAllChange = function onCheckAllChange(e) {
|
|
170
|
+
var nValue = checkAll ? checkedValues.filter(function (v) {
|
|
171
|
+
return !options.some(function (_ref4) {
|
|
172
|
+
var value = _ref4.value;
|
|
173
|
+
return v === value;
|
|
174
|
+
});
|
|
175
|
+
}) : Array.from(new Set([].concat((0, _toConsumableArray2.default)(checkedValues), (0, _toConsumableArray2.default)(options.map(function (v) {
|
|
176
|
+
return v.value;
|
|
177
|
+
})))));
|
|
178
|
+
setCheckedValues(nValue);
|
|
179
|
+
}; // 搜索
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
var handleFilter = (0, _hooks.useEvent)(function (val) {
|
|
183
|
+
return setOptions(filters.filter(function (v) {
|
|
184
|
+
return (0, _utils.onStringSearch)(val, v.label);
|
|
185
|
+
}));
|
|
186
|
+
}); // 单选事件
|
|
187
|
+
|
|
188
|
+
var onChange = function onChange(e, item) {
|
|
189
|
+
e.preventDefault();
|
|
190
|
+
e.stopPropagation();
|
|
191
|
+
var arr = checkedValues.includes(item.value) ? checkedValues.filter(function (v) {
|
|
192
|
+
return v !== item.value;
|
|
193
|
+
}) : [].concat((0, _toConsumableArray2.default)(checkedValues), [item.value]);
|
|
194
|
+
setCheckedValues(arr || undefined);
|
|
195
|
+
};
|
|
196
|
+
|
|
197
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
198
|
+
className: "select_dropdown"
|
|
199
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
200
|
+
className: "filter_header"
|
|
201
|
+
}, isSearch && /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Input.Search, {
|
|
202
|
+
allowClear: true,
|
|
203
|
+
size: "small",
|
|
204
|
+
placeholder: "\u8BF7\u8F93\u5165",
|
|
205
|
+
onSearch: handleFilter,
|
|
206
|
+
onChange: function onChange(e) {
|
|
207
|
+
var _a;
|
|
208
|
+
|
|
209
|
+
return handleFilter((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value);
|
|
210
|
+
}
|
|
211
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
212
|
+
className: "filter_header_operate"
|
|
213
|
+
}, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Checkbox, {
|
|
214
|
+
indeterminate: indeterminate,
|
|
215
|
+
onChange: onCheckAllChange,
|
|
216
|
+
checked: checkAll,
|
|
217
|
+
className: "filter_tip"
|
|
218
|
+
}, "\u5168\u90E8"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
|
|
219
|
+
className: "filter_tip"
|
|
220
|
+
}, "\u5DF2\u9009: ", checkedValues.length)))), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Checkbox.Group, {
|
|
221
|
+
value: checkedValues,
|
|
222
|
+
className: "filter_body"
|
|
223
|
+
}, /*#__PURE__*/_react.default.createElement(_VirtualList.default, {
|
|
224
|
+
options: options,
|
|
225
|
+
className: "filter_list"
|
|
226
|
+
}, function (_a) {
|
|
227
|
+
var item = _a.item,
|
|
228
|
+
resetProps = __rest(_a, ["item"]);
|
|
229
|
+
|
|
230
|
+
return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, resetProps, {
|
|
231
|
+
className: (0, _classnames.default)('filter_item', {
|
|
232
|
+
checked: checkedValues.includes(item.value)
|
|
233
|
+
}),
|
|
234
|
+
onClick: function onClick(e) {
|
|
235
|
+
return onChange(e, item);
|
|
236
|
+
}
|
|
237
|
+
}), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Checkbox, {
|
|
238
|
+
value: item.value,
|
|
239
|
+
className: "filter_item-content"
|
|
240
|
+
}, item.label));
|
|
241
|
+
}), !options.length && /*#__PURE__*/_react.default.createElement(FilterEmpty, null)));
|
|
242
|
+
}; // 级联选择器
|
|
243
|
+
|
|
244
|
+
|
|
245
|
+
var CascaderFilter = function CascaderFilter(props) {
|
|
246
|
+
var title = props.title,
|
|
247
|
+
filters = props.filters,
|
|
248
|
+
getFilterValue = props.getFilterValue,
|
|
249
|
+
setFilterValue = props.setFilterValue,
|
|
250
|
+
_props$itemProps = props.itemProps,
|
|
251
|
+
itemProps = _props$itemProps === void 0 ? {} : _props$itemProps,
|
|
252
|
+
isFiltering = props.isFiltering;
|
|
253
|
+
|
|
254
|
+
var _useState5 = (0, _react.useState)(false),
|
|
255
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
256
|
+
visible = _useState6[0],
|
|
257
|
+
setVisible = _useState6[1];
|
|
258
|
+
|
|
259
|
+
var _useState7 = (0, _react.useState)(filters),
|
|
260
|
+
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
261
|
+
options = _useState8[0],
|
|
262
|
+
setOptions = _useState8[1];
|
|
263
|
+
|
|
264
|
+
var _useState9 = (0, _react.useState)('全部'),
|
|
265
|
+
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
|
|
266
|
+
text = _useState10[0],
|
|
267
|
+
setText = _useState10[1];
|
|
268
|
+
|
|
269
|
+
var _useState11 = (0, _react.useState)(getFilterValue || itemProps.multiple ? [] : ''),
|
|
270
|
+
_useState12 = (0, _slicedToArray2.default)(_useState11, 2),
|
|
271
|
+
checkedValues = _useState12[0],
|
|
272
|
+
setCheckedValues = _useState12[1]; // const isSearch = useMemo(() => filters.length > 8, [filters.length]);
|
|
273
|
+
|
|
274
|
+
|
|
275
|
+
var handleFilter = (0, _hooks.useEvent)(function (val) {
|
|
276
|
+
return setOptions(filters.filter(function (v) {
|
|
277
|
+
return (0, _utils.onStringSearch)(val, v.label);
|
|
278
|
+
}));
|
|
279
|
+
}); // 重置级联弹框
|
|
280
|
+
|
|
281
|
+
var dropdownRender = function dropdownRender(menus) {
|
|
282
|
+
var inputRef = (0, _react.useRef)(null); // 确定
|
|
283
|
+
|
|
284
|
+
var handleSure = function handleSure() {
|
|
285
|
+
setFilterValue(itemProps.multiple ? checkedValues.map(function (v) {
|
|
286
|
+
return v[v.length - 1];
|
|
287
|
+
}) : checkedValues);
|
|
288
|
+
setVisible(false);
|
|
289
|
+
}; // 取消
|
|
290
|
+
|
|
291
|
+
|
|
292
|
+
var handleReset = function handleReset() {
|
|
293
|
+
if (inputRef.current) {
|
|
294
|
+
inputRef.current.input.value = '';
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
setFilterValue(undefined);
|
|
298
|
+
setCheckedValues(itemProps.multiple ? [] : '');
|
|
299
|
+
};
|
|
300
|
+
|
|
301
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
302
|
+
className: "filter_cascader_container filter_dropdown"
|
|
303
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
304
|
+
className: "filter_header"
|
|
305
|
+
}, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Input.Search, {
|
|
306
|
+
ref: inputRef,
|
|
307
|
+
allowClear: true,
|
|
308
|
+
size: "small",
|
|
309
|
+
placeholder: "\u8BF7\u8F93\u5165",
|
|
310
|
+
onSearch: handleFilter,
|
|
311
|
+
onChange: function onChange(e) {
|
|
312
|
+
return handleFilter(e.target.value);
|
|
313
|
+
}
|
|
314
|
+
})), menus, itemProps.multiple && /*#__PURE__*/_react.default.createElement("div", {
|
|
315
|
+
className: "filter_footer"
|
|
316
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
317
|
+
className: "footer_clear",
|
|
318
|
+
onClick: handleReset
|
|
319
|
+
}, "\u53D6\u6D88"), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Button, {
|
|
320
|
+
type: "primary",
|
|
321
|
+
size: "small",
|
|
322
|
+
onClick: handleSure
|
|
323
|
+
}, "\u786E\u5B9A")));
|
|
324
|
+
};
|
|
325
|
+
|
|
326
|
+
var onChange = function onChange(item, selectedOptions) {
|
|
327
|
+
if (!item.length) {
|
|
328
|
+
setText('全部');
|
|
329
|
+
setCheckedValues(itemProps.multiple ? [] : '');
|
|
330
|
+
setFilterValue(undefined);
|
|
331
|
+
return;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
if (itemProps.multiple) {
|
|
335
|
+
var arr = [];
|
|
336
|
+
selectedOptions.map(function (vals) {
|
|
337
|
+
return vals.length > 1 ? arr.push(vals.map(function (v) {
|
|
338
|
+
return v.label;
|
|
339
|
+
}).join('/')) : vals[0].children.map(function (v) {
|
|
340
|
+
return arr.push("".concat(vals[0].label, "/").concat(v.label));
|
|
341
|
+
});
|
|
342
|
+
});
|
|
343
|
+
var showLabel = arr.length < 3 ? arr.join('、') : "".concat(arr[0], "\u3001+").concat(arr.length);
|
|
344
|
+
setText(showLabel);
|
|
345
|
+
setCheckedValues(item);
|
|
346
|
+
} else {
|
|
347
|
+
setText(selectedOptions.map(function (v) {
|
|
348
|
+
return v.label;
|
|
349
|
+
}).join('/'));
|
|
350
|
+
setFilterValue(item);
|
|
351
|
+
setCheckedValues(item);
|
|
352
|
+
}
|
|
353
|
+
};
|
|
354
|
+
|
|
355
|
+
var handleClear = function handleClear(e) {
|
|
356
|
+
if (isFiltering) {
|
|
357
|
+
e.stopPropagation();
|
|
358
|
+
setText('全部');
|
|
359
|
+
setCheckedValues(itemProps.multiple ? [] : '');
|
|
360
|
+
setFilterValue(undefined);
|
|
361
|
+
}
|
|
362
|
+
};
|
|
363
|
+
|
|
364
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_cascader.default, Object.assign({}, itemProps, {
|
|
365
|
+
options: options,
|
|
366
|
+
value: checkedValues,
|
|
367
|
+
onChange: onChange,
|
|
368
|
+
open: visible,
|
|
369
|
+
// showCheckedStrategy="Cascader.SHOW_CHILD"
|
|
370
|
+
dropdownRender: dropdownRender,
|
|
371
|
+
onDropdownVisibleChange: function onDropdownVisibleChange(v) {
|
|
372
|
+
return setVisible(v);
|
|
373
|
+
}
|
|
374
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
375
|
+
className: (0, _classnames.default)('filter_item', {
|
|
376
|
+
isfiltering: isFiltering || visible,
|
|
377
|
+
active: !isFiltering && visible
|
|
378
|
+
})
|
|
379
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
380
|
+
className: "filter_item_label"
|
|
381
|
+
}, title, ":"), /*#__PURE__*/_react.default.createElement("div", {
|
|
382
|
+
className: "filter_item_value"
|
|
383
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
384
|
+
className: "checked"
|
|
385
|
+
}, isFiltering ? text : '全部'), /*#__PURE__*/_react.default.createElement(_IconFont.default, {
|
|
386
|
+
type: isFiltering ? 'lmweb-close-circle-fill' : 'lmweb-down',
|
|
387
|
+
className: "addonAfter",
|
|
388
|
+
onClick: handleClear
|
|
389
|
+
})))));
|
|
390
|
+
};
|
|
391
|
+
|
|
392
|
+
var FilterComp = function FilterComp(props) {
|
|
393
|
+
var type = props.type,
|
|
394
|
+
resetProps = __rest(props, ["type"]);
|
|
395
|
+
|
|
396
|
+
switch (type) {
|
|
397
|
+
case 'select':
|
|
398
|
+
return /*#__PURE__*/_react.default.createElement(SelectFilter, Object.assign({}, resetProps));
|
|
399
|
+
|
|
400
|
+
case 'checkbox':
|
|
401
|
+
return /*#__PURE__*/_react.default.createElement(CheckboxFilter, Object.assign({}, resetProps));
|
|
402
|
+
|
|
403
|
+
case 'cascader':
|
|
404
|
+
return /*#__PURE__*/_react.default.createElement(CascaderFilter, Object.assign({}, resetProps));
|
|
405
|
+
|
|
406
|
+
default:
|
|
407
|
+
return /*#__PURE__*/_react.default.createElement(SelectFilter, Object.assign({}, resetProps));
|
|
408
|
+
}
|
|
409
|
+
};
|
|
410
|
+
|
|
411
|
+
var Index = function Index(props) {
|
|
412
|
+
var className = props.className,
|
|
413
|
+
dropdownClassName = props.dropdownClassName,
|
|
414
|
+
title = props.title,
|
|
415
|
+
type = props.type,
|
|
416
|
+
options = props.options,
|
|
417
|
+
children = props.children,
|
|
418
|
+
style = props.style,
|
|
419
|
+
comProps = props.props;
|
|
420
|
+
|
|
421
|
+
var _useState13 = (0, _react.useState)(false),
|
|
422
|
+
_useState14 = (0, _slicedToArray2.default)(_useState13, 2),
|
|
423
|
+
visible = _useState14[0],
|
|
424
|
+
setVisible = _useState14[1];
|
|
425
|
+
|
|
426
|
+
var _useState15 = (0, _react.useState)(),
|
|
427
|
+
_useState16 = (0, _slicedToArray2.default)(_useState15, 2),
|
|
428
|
+
value = _useState16[0],
|
|
429
|
+
setValue = _useState16[1];
|
|
430
|
+
|
|
431
|
+
var data = (0, _react.useMemo)(function () {
|
|
432
|
+
if (options) return options;
|
|
433
|
+
return (0, _utils.getArray)(children).map(function (item) {
|
|
434
|
+
return {
|
|
435
|
+
label: item.props.children,
|
|
436
|
+
value: item.props.value
|
|
437
|
+
};
|
|
438
|
+
});
|
|
439
|
+
}, [options, children]); // 判断是否正在过滤,普通过滤 && 嵌套过滤
|
|
440
|
+
|
|
441
|
+
var isFiltering = (0, _react.useMemo)(function () {
|
|
442
|
+
return (0, _utils.getIsHas)(value);
|
|
443
|
+
}, [value]); // 设置过滤的内容 filterType: 'single' 存在时 单个勾选时触发, 默认按钮触发
|
|
444
|
+
|
|
445
|
+
var setFilterValue = (0, _hooks.useEvent)(function (val) {
|
|
446
|
+
var close = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
447
|
+
|
|
448
|
+
var _a;
|
|
449
|
+
|
|
450
|
+
setValue(val);
|
|
451
|
+
(_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, val);
|
|
452
|
+
close && setVisible(false);
|
|
453
|
+
}); // 展示的内容
|
|
454
|
+
|
|
455
|
+
var checkedValue = (0, _react.useMemo)(function () {
|
|
456
|
+
if (!isFiltering) return '全部'; // select & checkbox
|
|
457
|
+
|
|
458
|
+
if (['select', 'checkbox'].includes(type)) {
|
|
459
|
+
var findItem = data.find(function (v) {
|
|
460
|
+
return Array.isArray(value) ? value.includes(v.value) : value === v.value;
|
|
461
|
+
});
|
|
462
|
+
|
|
463
|
+
if (!findItem) {
|
|
464
|
+
setFilterValue(type === 'checkbox' ? [] : '');
|
|
465
|
+
return '全部';
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
var filterLabel = findItem.label;
|
|
469
|
+
|
|
470
|
+
if (Array.isArray(value)) {
|
|
471
|
+
if (value.length > 1) {
|
|
472
|
+
return "".concat(filterLabel, "\u3001+").concat(value.length - 1, "...");
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
return filterLabel;
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
return filterLabel;
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
return value;
|
|
482
|
+
}, [comProps, data, isFiltering, setFilterValue, type, value]); // 下拉组件渲染
|
|
483
|
+
|
|
484
|
+
var FilterControl = function FilterControl() {
|
|
485
|
+
var obj = {
|
|
486
|
+
filters: data,
|
|
487
|
+
getFilterValue: value,
|
|
488
|
+
setFilterValue: setFilterValue
|
|
489
|
+
};
|
|
490
|
+
return (0, _utils.render)(function () {
|
|
491
|
+
return /*#__PURE__*/_react.default.createElement(FilterComp, Object.assign({
|
|
492
|
+
type: type
|
|
493
|
+
}, obj));
|
|
494
|
+
}());
|
|
495
|
+
}; // 清除筛选项
|
|
496
|
+
|
|
497
|
+
|
|
498
|
+
var handleClear = function handleClear(e) {
|
|
499
|
+
if (isFiltering) {
|
|
500
|
+
e.stopPropagation();
|
|
501
|
+
setFilterValue(type === 'checkbox' ? [] : '');
|
|
502
|
+
}
|
|
503
|
+
};
|
|
504
|
+
|
|
505
|
+
if (['cascader'].includes(type)) {
|
|
506
|
+
return /*#__PURE__*/_react.default.createElement(FilterComp, Object.assign({}, props, {
|
|
507
|
+
itemProps: comProps,
|
|
508
|
+
filters: data,
|
|
509
|
+
isFiltering: isFiltering,
|
|
510
|
+
getFilterValue: value,
|
|
511
|
+
setFilterValue: setFilterValue,
|
|
512
|
+
handleClear: handleClear
|
|
513
|
+
}));
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
517
|
+
className: (0, _classnames.default)('lm_select_dropdown_base', className),
|
|
518
|
+
style: style
|
|
519
|
+
}, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Dropdown, {
|
|
520
|
+
trigger: ['click'],
|
|
521
|
+
visible: visible,
|
|
522
|
+
placement: "bottomLeft",
|
|
523
|
+
overlay: FilterControl,
|
|
524
|
+
onVisibleChange: setVisible,
|
|
525
|
+
className: (0, _classnames.default)(dropdownClassName)
|
|
526
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
527
|
+
className: (0, _classnames.default)('filter_item', {
|
|
528
|
+
isfiltering: isFiltering || visible,
|
|
529
|
+
active: !isFiltering && visible
|
|
530
|
+
})
|
|
531
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
532
|
+
className: "filter_item_label"
|
|
533
|
+
}, title && "".concat(title, ":")), /*#__PURE__*/_react.default.createElement("div", {
|
|
534
|
+
className: "filter_item_value"
|
|
535
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
536
|
+
className: "checked"
|
|
537
|
+
}, checkedValue), /*#__PURE__*/_react.default.createElement(_IconFont.default, {
|
|
538
|
+
type: isFiltering ? 'lmweb-close-circle-fill' : 'lmweb-down',
|
|
539
|
+
className: "addonAfter",
|
|
540
|
+
onClick: handleClear
|
|
541
|
+
})))));
|
|
542
|
+
};
|
|
543
|
+
|
|
544
|
+
var _default = Index;
|
|
545
|
+
exports.default = _default;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Select, SelectProps } from 'antd';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import GhostSelect from './GhostSelect';
|
|
4
|
+
export interface ISelectProps extends SelectProps {
|
|
5
|
+
type?: 'select' | 'checkbox' | 'cascader';
|
|
6
|
+
Option?: typeof Select.Option;
|
|
7
|
+
OptGroup?: typeof Select.OptGroup;
|
|
8
|
+
GhostSelect?: typeof GhostSelect;
|
|
9
|
+
}
|
|
10
|
+
declare const NormalSelect: React.FC<ISelectProps>;
|
|
11
|
+
export default NormalSelect;
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
+
|
|
5
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
require("antd/es/select/style");
|
|
13
|
+
|
|
14
|
+
var _select = _interopRequireDefault(require("antd/es/select"));
|
|
15
|
+
|
|
16
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
17
|
+
|
|
18
|
+
var _hooks = require("@/hooks");
|
|
19
|
+
|
|
20
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
21
|
+
|
|
22
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
23
|
+
|
|
24
|
+
var _useCheckboxOptions = require("./useCheckboxOptions");
|
|
25
|
+
|
|
26
|
+
var _utils = require("./utils");
|
|
27
|
+
|
|
28
|
+
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
29
|
+
var t = {};
|
|
30
|
+
|
|
31
|
+
for (var p in s) {
|
|
32
|
+
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
36
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
37
|
+
}
|
|
38
|
+
return t;
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
var prefixCls = 'lm_select'; // 不同类型Select, 不同的默认配置
|
|
42
|
+
|
|
43
|
+
var config = {
|
|
44
|
+
select: {
|
|
45
|
+
placeholder: '请选择',
|
|
46
|
+
size: 'middle'
|
|
47
|
+
},
|
|
48
|
+
checkbox: {
|
|
49
|
+
mode: 'multiple',
|
|
50
|
+
placeholder: '请选择',
|
|
51
|
+
size: 'middle'
|
|
52
|
+
},
|
|
53
|
+
cascader: {}
|
|
54
|
+
}; // 基于 antd 的 Select 组件
|
|
55
|
+
|
|
56
|
+
var NormalSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
57
|
+
var children = props.children,
|
|
58
|
+
className = props.className,
|
|
59
|
+
dropdownClassName = props.dropdownClassName,
|
|
60
|
+
_props$type = props.type,
|
|
61
|
+
type = _props$type === void 0 ? 'select' : _props$type,
|
|
62
|
+
options = props.options,
|
|
63
|
+
showSearch = props.showSearch,
|
|
64
|
+
others = __rest(props, ["children", "className", "dropdownClassName", "type", "options", "showSearch"]);
|
|
65
|
+
|
|
66
|
+
var _React$useState = _react.default.useState([]),
|
|
67
|
+
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
68
|
+
checkedValues = _React$useState2[0],
|
|
69
|
+
setCheckedValues = _React$useState2[1];
|
|
70
|
+
|
|
71
|
+
var _React$useState3 = _react.default.useState(''),
|
|
72
|
+
_React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
|
|
73
|
+
search = _React$useState4[0],
|
|
74
|
+
setSearch = _React$useState4[1]; // 支持options和children渲染,优先级options > children, 计算时需要把children转换为options
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
var renderOptions = (0, _react.useMemo)(function () {
|
|
78
|
+
return options || (0, _utils.getOptions)(children);
|
|
79
|
+
}, [options, children]);
|
|
80
|
+
var onChange = (0, _hooks.useEvent)(function (v) {
|
|
81
|
+
var _a;
|
|
82
|
+
|
|
83
|
+
setCheckedValues(v);
|
|
84
|
+
(_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v, renderOptions.filter(function (item) {
|
|
85
|
+
return v.includes(item.value);
|
|
86
|
+
}));
|
|
87
|
+
});
|
|
88
|
+
var isSearch = (0, _react.useMemo)(function () {
|
|
89
|
+
return showSearch || renderOptions.length > 8;
|
|
90
|
+
}, [renderOptions.length, showSearch]); // 获取dropdown
|
|
91
|
+
|
|
92
|
+
var _dropdownRender = (0, _useCheckboxOptions.useCheckboxOptions)(renderOptions, {
|
|
93
|
+
value: checkedValues,
|
|
94
|
+
onChange: onChange
|
|
95
|
+
}, search);
|
|
96
|
+
|
|
97
|
+
return /*#__PURE__*/_react.default.createElement(_select.default, Object.assign({
|
|
98
|
+
allowClear: true,
|
|
99
|
+
showArrow: true,
|
|
100
|
+
className: (0, _classnames.default)(className, prefixCls),
|
|
101
|
+
ref: ref,
|
|
102
|
+
options: options,
|
|
103
|
+
showSearch: isSearch,
|
|
104
|
+
dropdownRender: function dropdownRender(o) {
|
|
105
|
+
return type === 'checkbox' ? _dropdownRender : o;
|
|
106
|
+
},
|
|
107
|
+
value: checkedValues,
|
|
108
|
+
searchValue: search,
|
|
109
|
+
onSearch: isSearch && setSearch
|
|
110
|
+
}, config[type], others, {
|
|
111
|
+
onChange: onChange,
|
|
112
|
+
dropdownClassName: (0, _classnames.default)('lm_select_dropdown', dropdownClassName)
|
|
113
|
+
}), children);
|
|
114
|
+
});
|
|
115
|
+
var _default = NormalSelect;
|
|
116
|
+
exports.default = _default;
|
|
Binary file
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Select, SelectProps } from 'antd';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import GhostSelect from './GhostSelect';
|
|
4
|
+
export interface ISelectProps extends SelectProps {
|
|
5
|
+
title?: string;
|
|
6
|
+
ghost?: boolean;
|
|
7
|
+
type?: 'select' | 'checkbox' | 'cascader';
|
|
8
|
+
}
|
|
9
|
+
declare const LMSelect: React.FC<ISelectProps> & {
|
|
10
|
+
Option?: typeof Select.Option;
|
|
11
|
+
OptGroup?: typeof Select.OptGroup;
|
|
12
|
+
GhostSelect?: typeof GhostSelect;
|
|
13
|
+
};
|
|
14
|
+
export default LMSelect;
|