linkmore-design 1.0.25 → 1.0.26
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/index.umd.js +4741 -681
- package/dist/index.umd.min.js +7 -7
- package/es/CkFilter/baseFilter/NestedFilter.js +137 -0
- package/es/CkFilter/baseFilter/filterMenu.js +12 -7
- package/es/CkFilter/baseFilter/index.js +3 -1
- package/es/CkFilter/baseFilter/moreFilters.js +15 -1
- package/es/CkFilter/complexFilter/drawer.js +27 -11
- package/es/CkFilter/components/Controls.js +8 -0
- package/es/CkFilter/components/DragBox/DndContainer.js +49 -0
- package/es/CkFilter/components/DragBox/index.js +64 -0
- package/es/CkFilter/components/DragBox/sortableBox.js +24 -0
- package/es/CkFilter/components/DragBox/sortableItem.js +107 -0
- package/es/CkFilter/components/Nested.js +90 -0
- package/es/CkFilter/components/filterTypes.js +27 -77
- package/es/CkFilter/components/modal.js +85 -30
- package/es/CkFilter/context.js +14 -2
- package/es/CkFilter/customFilter/drawer.js +1 -2
- package/es/CkFilter/style/style.css +21 -1
- package/es/Modal/index.js +1 -1
- package/es/TabBar/index.js +1 -1
- package/lib/CkFilter/baseFilter/NestedFilter.js +137 -0
- package/lib/CkFilter/baseFilter/filterMenu.js +12 -7
- package/lib/CkFilter/baseFilter/index.js +3 -1
- package/lib/CkFilter/baseFilter/moreFilters.js +15 -1
- package/lib/CkFilter/complexFilter/drawer.js +27 -11
- package/lib/CkFilter/components/Controls.js +8 -0
- package/lib/CkFilter/components/DragBox/DndContainer.js +49 -0
- package/lib/CkFilter/components/DragBox/index.js +64 -0
- package/lib/CkFilter/components/DragBox/sortableBox.js +24 -0
- package/lib/CkFilter/components/DragBox/sortableItem.js +107 -0
- package/lib/CkFilter/components/Nested.js +90 -0
- package/lib/CkFilter/components/filterTypes.js +27 -77
- package/lib/CkFilter/components/modal.js +85 -30
- package/lib/CkFilter/context.js +14 -2
- package/lib/CkFilter/customFilter/drawer.js +1 -2
- package/lib/CkFilter/style/style.css +21 -1
- package/lib/Modal/index.js +3 -3
- package/lib/TabBar/index.js +5 -5
- package/package.json +4 -1
|
@@ -0,0 +1,137 @@
|
|
|
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/drawer/style");
|
|
13
|
+
|
|
14
|
+
var _drawer = _interopRequireDefault(require("antd/es/drawer"));
|
|
15
|
+
|
|
16
|
+
require("antd/es/space/style");
|
|
17
|
+
|
|
18
|
+
var _space = _interopRequireDefault(require("antd/es/space"));
|
|
19
|
+
|
|
20
|
+
require("antd/es/button/style");
|
|
21
|
+
|
|
22
|
+
var _button = _interopRequireDefault(require("antd/es/button"));
|
|
23
|
+
|
|
24
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
|
|
25
|
+
|
|
26
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
27
|
+
|
|
28
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
29
|
+
|
|
30
|
+
var _context = require("../context");
|
|
31
|
+
|
|
32
|
+
var _utils = require("../utils");
|
|
33
|
+
|
|
34
|
+
var NestedFilter = function NestedFilter() {
|
|
35
|
+
var _data$body;
|
|
36
|
+
|
|
37
|
+
var _useStore = (0, _context.useStore)(),
|
|
38
|
+
state = _useStore.state,
|
|
39
|
+
dispatch = _useStore.dispatch;
|
|
40
|
+
|
|
41
|
+
var instance = state.instance,
|
|
42
|
+
_state$nestedDrawer = state.nestedDrawer,
|
|
43
|
+
visible = _state$nestedDrawer.visible,
|
|
44
|
+
field = _state$nestedDrawer.field,
|
|
45
|
+
_state$nestedDrawer$d = _state$nestedDrawer.data,
|
|
46
|
+
data = _state$nestedDrawer$d === void 0 ? {} : _state$nestedDrawer$d; // 用于缓存数据 1.[{value: '', label: ''}, ...] / 2.{value: []/'', label: []/''}
|
|
47
|
+
|
|
48
|
+
var aliveValue = (0, _react.useRef)([]);
|
|
49
|
+
|
|
50
|
+
var onClose = function onClose() {
|
|
51
|
+
dispatch({
|
|
52
|
+
type: 'changeNestedDrawer',
|
|
53
|
+
nestedDrawer: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state.nestedDrawer), {}, {
|
|
54
|
+
visible: false
|
|
55
|
+
})
|
|
56
|
+
});
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
var onSave = function onSave() {
|
|
60
|
+
var _state$instance$onCha, _state$instance;
|
|
61
|
+
|
|
62
|
+
var value = aliveValue.current.map(function (v) {
|
|
63
|
+
return v.value;
|
|
64
|
+
}); // 选中的数据
|
|
65
|
+
|
|
66
|
+
var childrenField = data.value; // 选中的字段
|
|
67
|
+
|
|
68
|
+
var valueLabel = aliveValue.current.map(function (v) {
|
|
69
|
+
return v.label;
|
|
70
|
+
}).join('、'); // 字段文本
|
|
71
|
+
|
|
72
|
+
var nValue = (0, _objectSpread2.default)({}, state.filterValues); // 过滤的值
|
|
73
|
+
|
|
74
|
+
delete nValue[field]; // 删除父级过滤项
|
|
75
|
+
// 删除所有子级过滤项
|
|
76
|
+
|
|
77
|
+
state.instance.data.find(function (v) {
|
|
78
|
+
return v.field === field;
|
|
79
|
+
}).data.forEach(function (element) {
|
|
80
|
+
delete nValue[element.value];
|
|
81
|
+
});
|
|
82
|
+
(0, _utils.getIsHas)(value) ? nValue[childrenField] = value : delete nValue[childrenField]; // 保存筛选
|
|
83
|
+
|
|
84
|
+
dispatch({
|
|
85
|
+
type: 'changeFilterValues',
|
|
86
|
+
filterValues: nValue
|
|
87
|
+
}); // 保存一个嵌套过滤
|
|
88
|
+
|
|
89
|
+
(0, _utils.getIsHas)(valueLabel) && dispatch({
|
|
90
|
+
type: 'changeNestedFilterValues',
|
|
91
|
+
nestedFilterValues: (0, _defineProperty2.default)({}, field, {
|
|
92
|
+
value: value,
|
|
93
|
+
label: valueLabel,
|
|
94
|
+
field: childrenField
|
|
95
|
+
})
|
|
96
|
+
});
|
|
97
|
+
(_state$instance$onCha = (_state$instance = state.instance).onChange) === null || _state$instance$onCha === void 0 ? void 0 : _state$instance$onCha.call(_state$instance, nValue, state.customFilterValues);
|
|
98
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
var onChange = function onChange(value, type) {
|
|
102
|
+
aliveValue.current = value;
|
|
103
|
+
|
|
104
|
+
if (type === 'dbclick') {
|
|
105
|
+
onSave === null || onSave === void 0 ? void 0 : onSave();
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
var config = {
|
|
110
|
+
title: data.label,
|
|
111
|
+
visible: visible,
|
|
112
|
+
onClose: onClose,
|
|
113
|
+
width: 720,
|
|
114
|
+
placement: 'right',
|
|
115
|
+
destroyOnClose: true,
|
|
116
|
+
className: 'filter_drawer',
|
|
117
|
+
bodyStyle: {
|
|
118
|
+
padding: '24px 24px 0'
|
|
119
|
+
},
|
|
120
|
+
extra: /*#__PURE__*/_react.default.createElement(_space.default, null, /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
121
|
+
onClick: onClose,
|
|
122
|
+
size: "small"
|
|
123
|
+
}, "\u53D6\u6D88"), /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
124
|
+
type: "primary",
|
|
125
|
+
onClick: onSave,
|
|
126
|
+
size: "small"
|
|
127
|
+
}, "\u786E\u5B9A"))
|
|
128
|
+
};
|
|
129
|
+
return /*#__PURE__*/_react.default.createElement(_drawer.default, config, (_data$body = data.body) === null || _data$body === void 0 ? void 0 : _data$body.call(data, {
|
|
130
|
+
value: data.value,
|
|
131
|
+
onChange: onChange,
|
|
132
|
+
item: data
|
|
133
|
+
}));
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
var _default = NestedFilter;
|
|
137
|
+
exports.default = _default;
|
|
@@ -52,20 +52,25 @@ var FilterMenu = function FilterMenu(props) {
|
|
|
52
52
|
|
|
53
53
|
var filterValue = (0, _react.useMemo)(function () {
|
|
54
54
|
return state.filterValues[field];
|
|
55
|
-
}, [state.filterValues]); //
|
|
55
|
+
}, [state.filterValues]); // 判断是否正在过滤,普通过滤 && 嵌套过滤
|
|
56
56
|
|
|
57
57
|
var isFiltering = (0, _react.useMemo)(function () {
|
|
58
58
|
return (0, _utils.getIsHas)(filterValue) || (0, _utils.getIsHas)(state.nestedFilterValues[field]);
|
|
59
|
-
}, [filterValue]); // 设置过滤的内容 filterType: 'single' 存在时 单个勾选时触发, 默认按钮触发
|
|
59
|
+
}, [filterValue, state.nestedFilterValues]); // 设置过滤的内容 filterType: 'single' 存在时 单个勾选时触发, 默认按钮触发
|
|
60
60
|
|
|
61
61
|
var setFilterValue = (0, _react.useCallback)(function (val, filterType) {
|
|
62
|
-
var _state$instance$onCha, _state$
|
|
62
|
+
var _state$instance$onCha, _state$instance;
|
|
63
63
|
|
|
64
64
|
// 嵌套结构时触发
|
|
65
65
|
if (filterType === 'children') {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
66
|
+
dispatch({
|
|
67
|
+
type: 'changeNestedDrawer',
|
|
68
|
+
nestedDrawer: {
|
|
69
|
+
visible: true,
|
|
70
|
+
data: val,
|
|
71
|
+
field: field
|
|
72
|
+
}
|
|
73
|
+
});
|
|
69
74
|
setVisible(false);
|
|
70
75
|
return;
|
|
71
76
|
}
|
|
@@ -90,7 +95,7 @@ var FilterMenu = function FilterMenu(props) {
|
|
|
90
95
|
filterValues: nValue
|
|
91
96
|
}); // 触发外部查询, 单击时不关闭菜单
|
|
92
97
|
|
|
93
|
-
(_state$instance$onCha = (_state$
|
|
98
|
+
(_state$instance$onCha = (_state$instance = state.instance).onChange) === null || _state$instance$onCha === void 0 ? void 0 : _state$instance$onCha.call(_state$instance, nValue, state.customFilterValues);
|
|
94
99
|
!filterType && setVisible(false);
|
|
95
100
|
}, [dispatch, field, state.filterValues, state.instance]); // 展示的内容
|
|
96
101
|
|
|
@@ -25,6 +25,8 @@ var _filterMenu = _interopRequireDefault(require("./filterMenu"));
|
|
|
25
25
|
|
|
26
26
|
var _moreFilters = _interopRequireDefault(require("./moreFilters"));
|
|
27
27
|
|
|
28
|
+
var _NestedFilter = _interopRequireDefault(require("./NestedFilter"));
|
|
29
|
+
|
|
28
30
|
/* 二级筛选:基础过滤
|
|
29
31
|
* data
|
|
30
32
|
*
|
|
@@ -82,7 +84,7 @@ var Filter = function Filter() {
|
|
|
82
84
|
return /*#__PURE__*/_react.default.createElement(_filterMenu.default, (0, _extends2.default)({
|
|
83
85
|
key: v.field
|
|
84
86
|
}, v));
|
|
85
|
-
}), isMore && /*#__PURE__*/_react.default.createElement(_moreFilters.default, null)));
|
|
87
|
+
}), isMore && /*#__PURE__*/_react.default.createElement(_moreFilters.default, null)), /*#__PURE__*/_react.default.createElement(_NestedFilter.default, null));
|
|
86
88
|
};
|
|
87
89
|
|
|
88
90
|
var _default = Filter;
|
|
@@ -139,6 +139,18 @@ var MoreFilters = function MoreFilters() {
|
|
|
139
139
|
return v !== item.field;
|
|
140
140
|
})))
|
|
141
141
|
});
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
if (type === 'move') {
|
|
145
|
+
var cloneArr = (0, _toConsumableArray2.default)(state.orderFields);
|
|
146
|
+
var findIndex = cloneArr.findIndex(function (v) {
|
|
147
|
+
return v === item.over;
|
|
148
|
+
});
|
|
149
|
+
cloneArr.splice(findIndex, 0, item.active);
|
|
150
|
+
dispatch({
|
|
151
|
+
type: 'changeOrderFields',
|
|
152
|
+
orderFields: cloneArr
|
|
153
|
+
});
|
|
142
154
|
} // 全选操作
|
|
143
155
|
|
|
144
156
|
|
|
@@ -171,7 +183,9 @@ var MoreFilters = function MoreFilters() {
|
|
|
171
183
|
} // 人性化设计,位置不变无需收起
|
|
172
184
|
|
|
173
185
|
|
|
174
|
-
|
|
186
|
+
if (['top'].includes(type)) {
|
|
187
|
+
setVisible(false); // 收起下拉选项框
|
|
188
|
+
}
|
|
175
189
|
}, [dispatch, state]);
|
|
176
190
|
var FilterControl = (0, _react.useCallback)(function () {
|
|
177
191
|
var _state$instance$data;
|
|
@@ -50,17 +50,20 @@ var ListItemChecked = function ListItemChecked(props) {
|
|
|
50
50
|
fullData = _state$instance$fullD === void 0 ? [] : _state$instance$fullD,
|
|
51
51
|
data = state.complexDrawer.data;
|
|
52
52
|
var field = props.field,
|
|
53
|
-
value = props.value
|
|
53
|
+
_props$value = props.value,
|
|
54
|
+
value = _props$value === void 0 ? {} : _props$value; // 单项匹配数据, 根据字段名查找, 嵌套筛选时查询父级
|
|
54
55
|
|
|
55
56
|
var getItem = (0, _react.useMemo)(function () {
|
|
56
57
|
return fullData.find(function (v) {
|
|
57
|
-
return v.field
|
|
58
|
+
return [field, value.originField].includes(v.field);
|
|
58
59
|
});
|
|
59
|
-
}, [
|
|
60
|
+
}, [props, fullData]); // 选中值的处理
|
|
60
61
|
|
|
61
|
-
var
|
|
62
|
+
var resetValue = (0, _react.useMemo)(function () {
|
|
62
63
|
if (getItem.type === 'cascader') {
|
|
63
|
-
|
|
64
|
+
var _value$value;
|
|
65
|
+
|
|
66
|
+
return (_value$value = value.value) === null || _value$value === void 0 ? void 0 : _value$value.map(function (v) {
|
|
64
67
|
return v[v.length - 1];
|
|
65
68
|
});
|
|
66
69
|
}
|
|
@@ -72,7 +75,7 @@ var ListItemChecked = function ListItemChecked(props) {
|
|
|
72
75
|
arr.forEach(function (item) {
|
|
73
76
|
var _item$children;
|
|
74
77
|
|
|
75
|
-
if (
|
|
78
|
+
if (resetValue.includes(item.value)) {
|
|
76
79
|
preArr.push(item);
|
|
77
80
|
}
|
|
78
81
|
|
|
@@ -87,6 +90,10 @@ var ListItemChecked = function ListItemChecked(props) {
|
|
|
87
90
|
var checkedValue = value.value;
|
|
88
91
|
|
|
89
92
|
if (Array.isArray(checkedValue)) {
|
|
93
|
+
if (getItem.type === 'nested') {
|
|
94
|
+
return checkedValue;
|
|
95
|
+
}
|
|
96
|
+
|
|
90
97
|
if (getItem.type === 'cascader') {
|
|
91
98
|
var arr = [];
|
|
92
99
|
deepChildren(getItem.data, arr);
|
|
@@ -99,9 +106,9 @@ var ListItemChecked = function ListItemChecked(props) {
|
|
|
99
106
|
}
|
|
100
107
|
|
|
101
108
|
if (getItem.type === 'input') {
|
|
102
|
-
return
|
|
103
|
-
value:
|
|
104
|
-
label:
|
|
109
|
+
return resetValue ? [{
|
|
110
|
+
value: resetValue,
|
|
111
|
+
label: resetValue
|
|
105
112
|
}] : [];
|
|
106
113
|
}
|
|
107
114
|
|
|
@@ -322,10 +329,19 @@ var Index = function Index() {
|
|
|
322
329
|
}
|
|
323
330
|
});
|
|
324
331
|
}
|
|
325
|
-
}, [dispatch, visible]);
|
|
332
|
+
}, [dispatch, visible]);
|
|
333
|
+
|
|
334
|
+
var Tit = function Tit() {
|
|
335
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
336
|
+
onClick: function onClick() {
|
|
337
|
+
console.log('title', state);
|
|
338
|
+
}
|
|
339
|
+
}, "\u9AD8\u7EA7\u67E5\u8BE2");
|
|
340
|
+
}; // 弹窗配置项
|
|
341
|
+
|
|
326
342
|
|
|
327
343
|
var config = {
|
|
328
|
-
title:
|
|
344
|
+
title: /*#__PURE__*/_react.default.createElement(Tit, null),
|
|
329
345
|
visible: visible,
|
|
330
346
|
onClose: onClose,
|
|
331
347
|
width: 440,
|
|
@@ -21,6 +21,8 @@ var _CheckboxTags = _interopRequireDefault(require("./CheckboxTags"));
|
|
|
21
21
|
|
|
22
22
|
var _CascaderFilter = _interopRequireDefault(require("./CascaderFilter"));
|
|
23
23
|
|
|
24
|
+
var _Nested = _interopRequireDefault(require("./Nested"));
|
|
25
|
+
|
|
24
26
|
var _excluded = ["type", "options"];
|
|
25
27
|
|
|
26
28
|
var Controls = function Controls(props) {
|
|
@@ -31,11 +33,17 @@ var Controls = function Controls(props) {
|
|
|
31
33
|
'select': /*#__PURE__*/_react.default.createElement(_CheckboxTags.default, (0, _extends2.default)({
|
|
32
34
|
options: options
|
|
33
35
|
}, resetProps)),
|
|
36
|
+
'checkbox': /*#__PURE__*/_react.default.createElement(_CheckboxTags.default, (0, _extends2.default)({
|
|
37
|
+
options: options
|
|
38
|
+
}, resetProps)),
|
|
34
39
|
'cascader': /*#__PURE__*/_react.default.createElement(_CascaderFilter.default, (0, _extends2.default)({
|
|
35
40
|
options: options
|
|
36
41
|
}, resetProps)),
|
|
37
42
|
'input': /*#__PURE__*/_react.default.createElement(_input.default, (0, _extends2.default)({
|
|
38
43
|
placeholder: "\u8BF7\u8F93\u5165"
|
|
44
|
+
}, resetProps)),
|
|
45
|
+
'nested': /*#__PURE__*/_react.default.createElement(_Nested.default, (0, _extends2.default)({
|
|
46
|
+
options: options
|
|
39
47
|
}, resetProps))
|
|
40
48
|
};
|
|
41
49
|
return obj[type] || null;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
12
|
+
var _core = require("@dnd-kit/core");
|
|
13
|
+
|
|
14
|
+
var _modifiers = require("@dnd-kit/modifiers");
|
|
15
|
+
|
|
16
|
+
var _sortable = require("@dnd-kit/sortable");
|
|
17
|
+
|
|
18
|
+
// 可拖拽容器
|
|
19
|
+
var DndContainer = function DndContainer(_ref) {
|
|
20
|
+
var children = _ref.children,
|
|
21
|
+
move = _ref.move;
|
|
22
|
+
var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor), (0, _core.useSensor)(_core.KeyboardSensor, {
|
|
23
|
+
coordinateGetter: _sortable.sortableKeyboardCoordinates
|
|
24
|
+
})); // 拖拽结束
|
|
25
|
+
|
|
26
|
+
var handleDragEnd = function handleDragEnd(event) {
|
|
27
|
+
var active = event.active,
|
|
28
|
+
over = event.over; // 未移入时触发
|
|
29
|
+
|
|
30
|
+
if (!(over === null || over === void 0 ? void 0 : over.id)) {
|
|
31
|
+
return;
|
|
32
|
+
} // 移入时触发更新数据
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
if (active.id !== over.id) {
|
|
36
|
+
move(active.data.current.field, over.data.current.field);
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
return /*#__PURE__*/_react.default.createElement(_core.DndContext, {
|
|
41
|
+
sensors: sensors,
|
|
42
|
+
collisionDetection: _core.closestCenter,
|
|
43
|
+
onDragEnd: handleDragEnd,
|
|
44
|
+
modifiers: [_modifiers.restrictToParentElement]
|
|
45
|
+
}, children);
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
var _default = DndContainer;
|
|
49
|
+
exports.default = _default;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
|
|
11
|
+
|
|
12
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
|
|
13
|
+
|
|
14
|
+
var _react = _interopRequireDefault(require("react"));
|
|
15
|
+
|
|
16
|
+
var _linkmoreDesign = require("linkmore-design");
|
|
17
|
+
|
|
18
|
+
var _DndContainer = _interopRequireDefault(require("./DndContainer"));
|
|
19
|
+
|
|
20
|
+
var _sortableBox = _interopRequireDefault(require("./sortableBox"));
|
|
21
|
+
|
|
22
|
+
var _sortableItem = _interopRequireDefault(require("./sortableItem"));
|
|
23
|
+
|
|
24
|
+
var _excluded = ["options", "checkedValues", "setFilterValue"];
|
|
25
|
+
|
|
26
|
+
var Drag = function Drag(_ref) {
|
|
27
|
+
var _ref$options = _ref.options,
|
|
28
|
+
options = _ref$options === void 0 ? [] : _ref$options,
|
|
29
|
+
_ref$checkedValues = _ref.checkedValues,
|
|
30
|
+
checkedValues = _ref$checkedValues === void 0 ? [] : _ref$checkedValues,
|
|
31
|
+
setFilterValue = _ref.setFilterValue,
|
|
32
|
+
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
33
|
+
|
|
34
|
+
var move = function move(active, over) {
|
|
35
|
+
console.log('handleMove', active, over);
|
|
36
|
+
setFilterValue({
|
|
37
|
+
active: active,
|
|
38
|
+
over: over
|
|
39
|
+
}, 'move');
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DndContainer.default, {
|
|
43
|
+
move: move
|
|
44
|
+
}, /*#__PURE__*/_react.default.createElement(_sortableBox.default, {
|
|
45
|
+
items: options.map(function (v) {
|
|
46
|
+
return "drag".concat(v.field);
|
|
47
|
+
})
|
|
48
|
+
}, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Checkbox.Group, {
|
|
49
|
+
value: checkedValues,
|
|
50
|
+
className: "filter_body"
|
|
51
|
+
}, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.VirtualList, {
|
|
52
|
+
options: options,
|
|
53
|
+
className: "filter_list"
|
|
54
|
+
}, function (virProps) {
|
|
55
|
+
return /*#__PURE__*/_react.default.createElement(_sortableItem.default, (0, _extends2.default)({}, virProps, {
|
|
56
|
+
options: options,
|
|
57
|
+
checkedValues: checkedValues,
|
|
58
|
+
setFilterValue: setFilterValue
|
|
59
|
+
}, props));
|
|
60
|
+
})))));
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
var _default = Drag;
|
|
64
|
+
exports.default = _default;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
12
|
+
var _sortable = require("@dnd-kit/sortable");
|
|
13
|
+
|
|
14
|
+
var SortableBox = function SortableBox(_ref) {
|
|
15
|
+
var items = _ref.items,
|
|
16
|
+
children = _ref.children;
|
|
17
|
+
return /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
|
|
18
|
+
items: items,
|
|
19
|
+
strategy: _sortable.verticalListSortingStrategy
|
|
20
|
+
}, children);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
var _default = SortableBox;
|
|
24
|
+
exports.default = _default;
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
|
|
13
|
+
|
|
14
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
|
|
15
|
+
|
|
16
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
17
|
+
|
|
18
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
|
|
19
|
+
|
|
20
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
21
|
+
|
|
22
|
+
var _icons = require("@ant-design/icons");
|
|
23
|
+
|
|
24
|
+
var _linkmoreDesign = require("linkmore-design");
|
|
25
|
+
|
|
26
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
27
|
+
|
|
28
|
+
var _sortable = require("@dnd-kit/sortable");
|
|
29
|
+
|
|
30
|
+
var _utilities = require("@dnd-kit/utilities");
|
|
31
|
+
|
|
32
|
+
var _excluded = ["item", "filters", "options", "checkedValues", "setFilterValue", "setCheckedValues"];
|
|
33
|
+
|
|
34
|
+
var SortableItem = function SortableItem(props) {
|
|
35
|
+
var virItem = props.item,
|
|
36
|
+
filters = props.filters,
|
|
37
|
+
options = props.options,
|
|
38
|
+
checkedValues = props.checkedValues,
|
|
39
|
+
setFilterValue = props.setFilterValue,
|
|
40
|
+
setCheckedValues = props.setCheckedValues,
|
|
41
|
+
resetProps = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
42
|
+
|
|
43
|
+
var _useSortable = (0, _sortable.useSortable)({
|
|
44
|
+
id: "drag".concat(virItem.field),
|
|
45
|
+
data: (0, _objectSpread2.default)({}, virItem)
|
|
46
|
+
}),
|
|
47
|
+
attributes = _useSortable.attributes,
|
|
48
|
+
listeners = _useSortable.listeners,
|
|
49
|
+
setNodeRef = _useSortable.setNodeRef,
|
|
50
|
+
transform = _useSortable.transform,
|
|
51
|
+
transition = _useSortable.transition;
|
|
52
|
+
|
|
53
|
+
var style = {
|
|
54
|
+
transform: _utilities.CSS.Transform.toString(transform),
|
|
55
|
+
transition: transition
|
|
56
|
+
}; // 是否可置顶, 第一项无置顶操作, 所以这里的index > 0
|
|
57
|
+
|
|
58
|
+
var isTop = (0, _react.useCallback)(function (item) {
|
|
59
|
+
return checkedValues.includes(item.field) && filters.findIndex(function (v) {
|
|
60
|
+
return v.field === item.field;
|
|
61
|
+
}) > 0;
|
|
62
|
+
}, [checkedValues, filters]); // 置顶操作, 防止频繁操作, 建议加上节流
|
|
63
|
+
|
|
64
|
+
var handleTop = function handleTop(e, item) {
|
|
65
|
+
e.stopPropagation();
|
|
66
|
+
setFilterValue(item, 'top');
|
|
67
|
+
}; // 单选事件
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
var onChange = function onChange(e, item) {
|
|
71
|
+
e.preventDefault();
|
|
72
|
+
e.stopPropagation(); // setFilterValue(item)
|
|
73
|
+
|
|
74
|
+
var nValue = checkedValues.includes(item.field) ? checkedValues.filter(function (v) {
|
|
75
|
+
return v !== item.field;
|
|
76
|
+
}) : [].concat((0, _toConsumableArray2.default)(checkedValues), [item.field]);
|
|
77
|
+
setCheckedValues(nValue);
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
|
81
|
+
ref: setNodeRef,
|
|
82
|
+
style: style
|
|
83
|
+
}, attributes), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
|
|
84
|
+
className: (0, _classnames.default)('filter_item', {
|
|
85
|
+
checked: checkedValues.includes(virItem.field)
|
|
86
|
+
}),
|
|
87
|
+
onClick: function onClick(e) {
|
|
88
|
+
return onChange(e, virItem);
|
|
89
|
+
}
|
|
90
|
+
}), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
|
91
|
+
className: "pointer_move"
|
|
92
|
+
}, listeners), /*#__PURE__*/_react.default.createElement(_icons.HolderOutlined, null)), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Checkbox, {
|
|
93
|
+
value: virItem.field,
|
|
94
|
+
className: "filter_item-content"
|
|
95
|
+
}, virItem.title), /*#__PURE__*/_react.default.createElement("div", {
|
|
96
|
+
className: "filter_item_operate"
|
|
97
|
+
}, isTop(virItem) && /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
|
|
98
|
+
type: "lmweb-vertical-align-top",
|
|
99
|
+
className: "hover_show icon_top",
|
|
100
|
+
onClick: function onClick(e) {
|
|
101
|
+
return handleTop(e, virItem);
|
|
102
|
+
}
|
|
103
|
+
})))));
|
|
104
|
+
};
|
|
105
|
+
|
|
106
|
+
var _default = SortableItem;
|
|
107
|
+
exports.default = _default;
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
13
|
+
|
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
15
|
+
|
|
16
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
|
|
17
|
+
|
|
18
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
+
|
|
20
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
21
|
+
|
|
22
|
+
var _linkmoreDesign = require("linkmore-design");
|
|
23
|
+
|
|
24
|
+
var _excluded = ["value", "onChange", "options"];
|
|
25
|
+
|
|
26
|
+
var Nested = function Nested(_ref) {
|
|
27
|
+
var _aliveActive$body;
|
|
28
|
+
|
|
29
|
+
var value = _ref.value,
|
|
30
|
+
onChange = _ref.onChange,
|
|
31
|
+
options = _ref.options,
|
|
32
|
+
resetProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
33
|
+
|
|
34
|
+
var _useState = (0, _react.useState)({}),
|
|
35
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
36
|
+
aliveActive = _useState2[0],
|
|
37
|
+
setAliveActive = _useState2[1];
|
|
38
|
+
|
|
39
|
+
var handleClick = function handleClick(item) {
|
|
40
|
+
setAliveActive(item);
|
|
41
|
+
|
|
42
|
+
if (!item.children) {
|
|
43
|
+
onChange({
|
|
44
|
+
subValue: item,
|
|
45
|
+
value: [(0, _objectSpread2.default)({}, item)]
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
/*
|
|
50
|
+
* @Array val 选中的数据数组: [{}, ...]
|
|
51
|
+
* @String subValue 选中的子级
|
|
52
|
+
*
|
|
53
|
+
*/
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
var handleOnChange = function handleOnChange(val, type) {
|
|
57
|
+
onChange({
|
|
58
|
+
subValue: aliveActive,
|
|
59
|
+
value: val,
|
|
60
|
+
type: type
|
|
61
|
+
});
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Space, {
|
|
65
|
+
size: 8,
|
|
66
|
+
wrap: true
|
|
67
|
+
}, options === null || options === void 0 ? void 0 : options.map(function (v) {
|
|
68
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
69
|
+
key: v.value,
|
|
70
|
+
className: (0, _classnames.default)('checkbox_tag', {
|
|
71
|
+
active: aliveActive.value === v.value
|
|
72
|
+
}),
|
|
73
|
+
onClick: function onClick() {
|
|
74
|
+
return handleClick(v);
|
|
75
|
+
}
|
|
76
|
+
}, v.label);
|
|
77
|
+
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
78
|
+
style: {
|
|
79
|
+
flex: 1,
|
|
80
|
+
marginTop: 16
|
|
81
|
+
}
|
|
82
|
+
}, (_aliveActive$body = aliveActive.body) === null || _aliveActive$body === void 0 ? void 0 : _aliveActive$body.call(aliveActive, {
|
|
83
|
+
value: aliveActive.value,
|
|
84
|
+
onChange: handleOnChange,
|
|
85
|
+
item: aliveActive
|
|
86
|
+
})));
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
var _default = Nested;
|
|
90
|
+
exports.default = _default;
|