@kne/react-filter 0.1.13 → 0.1.16
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/README.md +220 -0
- package/dist/index.css +8 -4
- package/dist/index.css.map +1 -1
- package/dist/index.js +122 -30
- package/dist/index.js.map +1 -1
- package/dist/{index.modern.js → index.modern.mjs} +131 -42
- package/dist/index.modern.mjs.map +1 -0
- package/package.json +10 -7
- package/dist/index.modern.js.map +0 -1
package/README.md
ADDED
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
|
|
2
|
+
# react-filter
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
### 描述
|
|
6
|
+
|
|
7
|
+
筛选器
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### 安装
|
|
11
|
+
|
|
12
|
+
```shell
|
|
13
|
+
npm i --save @kne/react-filter
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### 概述
|
|
18
|
+
|
|
19
|
+
用户列表数据的筛选
|
|
20
|
+
|
|
21
|
+
* 默认提供了常见的几种筛选项
|
|
22
|
+
|
|
23
|
+
* 支持自定义筛选项类型扩展
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
### 示例(全屏)
|
|
27
|
+
|
|
28
|
+
#### 示例代码
|
|
29
|
+
|
|
30
|
+
- 基础示例
|
|
31
|
+
- 展示一个筛选器的普通模式
|
|
32
|
+
- reactFilter(@kne/react-filter),undefined(@kne/react-filter/dist/index.css),_(lodash)
|
|
33
|
+
|
|
34
|
+
```jsx
|
|
35
|
+
const {useState} = React;
|
|
36
|
+
const {Filter, createExtraButton} = reactFilter;
|
|
37
|
+
|
|
38
|
+
const {City, List, Range, Text, Selector, Check} = Filter.type;
|
|
39
|
+
const {isNumber} = _;
|
|
40
|
+
|
|
41
|
+
const BaseExample = () => {
|
|
42
|
+
const [value, setValue] = useState({});
|
|
43
|
+
console.log(value);
|
|
44
|
+
return <Filter value={value} onChange={(value) => {
|
|
45
|
+
setValue(value);
|
|
46
|
+
}} list={[[<City label="目前城市" name="currentCity" size={5}/>], [<List label="学历" name="degree" size={1}>
|
|
47
|
+
<List.Item value="0" label="初中"/>
|
|
48
|
+
<List.Item value="1" label="高中"/>
|
|
49
|
+
<List.Item value="2" label="大学专科"/>
|
|
50
|
+
<List.Item value="3" label="大学本科"/>
|
|
51
|
+
</List>], [<List label="求职意向" name="yixiang" size={1}
|
|
52
|
+
options={[{label: "暂时不找工作", value: 0}, {label: "在职看机会", value: 1}, {
|
|
53
|
+
label: "离职正在找工作", value: 2
|
|
54
|
+
}]}/>], [<Range label="年龄" name="age" template={(value) => {
|
|
55
|
+
if (!value || value.length === 0) {
|
|
56
|
+
return "";
|
|
57
|
+
}
|
|
58
|
+
if (!isNumber(value[0]) && isNumber(value[1])) {
|
|
59
|
+
return `${value[1]}岁以下`;
|
|
60
|
+
}
|
|
61
|
+
if (!isNumber(value[1]) && isNumber(value[0])) {
|
|
62
|
+
return `${value[0]}岁以上`;
|
|
63
|
+
}
|
|
64
|
+
return `${value[0]}-${value[1]}岁`;
|
|
65
|
+
}}/>, <Text label="行业" name="inter"/>, <Selector label="语言" name="lang"
|
|
66
|
+
options={[{
|
|
67
|
+
label: "英语", value: "en"
|
|
68
|
+
}, {
|
|
69
|
+
label: "日语", value: "jap"
|
|
70
|
+
}, {
|
|
71
|
+
label: "法语", value: "fac"
|
|
72
|
+
}]}/>], [<List size={1}
|
|
73
|
+
label="薪资范围"
|
|
74
|
+
name="sarl"
|
|
75
|
+
options={[{
|
|
76
|
+
label: "10k以下", value: [null, 10]
|
|
77
|
+
}, {
|
|
78
|
+
label: "10k-20k", value: [10, 20]
|
|
79
|
+
}, {
|
|
80
|
+
label: "20k以上", value: [20, null]
|
|
81
|
+
}]}
|
|
82
|
+
more={createExtraButton({
|
|
83
|
+
type: "range", template: (value) => {
|
|
84
|
+
if (!value || value.length === 0) {
|
|
85
|
+
return "";
|
|
86
|
+
}
|
|
87
|
+
if (!isNumber(value[0]) && isNumber(value[1])) {
|
|
88
|
+
return `${value[1]}k以下`;
|
|
89
|
+
}
|
|
90
|
+
if (!isNumber(value[1]) && isNumber(value[0])) {
|
|
91
|
+
return `${value[0]}k以上`;
|
|
92
|
+
}
|
|
93
|
+
return `${value[0]}k-${value[1]}k`;
|
|
94
|
+
}
|
|
95
|
+
})}/>, <Check label="海外经历" name="out"/>]]}/>;
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
render(<BaseExample/>);
|
|
99
|
+
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
- 简单示例
|
|
103
|
+
- 展示一个简单的筛选项，一般放在列表页title extra位置
|
|
104
|
+
- reactFilter(@kne/react-filter),undefined(@kne/react-filter/dist/index.css),space(antd/lib/space)
|
|
105
|
+
|
|
106
|
+
```jsx
|
|
107
|
+
const {useState} = React;
|
|
108
|
+
const {Filter} = reactFilter;
|
|
109
|
+
const {default: Space} = space;
|
|
110
|
+
|
|
111
|
+
const {RadioList, Selector, Text, CheckboxList} = Filter.type;
|
|
112
|
+
|
|
113
|
+
const Example = () => {
|
|
114
|
+
const [value, setValue] = useState([]);
|
|
115
|
+
const [radioValue, setRadioValue] = useState({});
|
|
116
|
+
const [checkboxValue, setCheckboxValue] = useState({});
|
|
117
|
+
console.log(value, radioValue, checkboxValue);
|
|
118
|
+
return <Space direction="vertical">
|
|
119
|
+
<Filter value={value} onChange={setValue} labelHidden itemLabelHidden list={[[
|
|
120
|
+
<Text name="positionName" label="职位名称"/>,
|
|
121
|
+
<Selector name="type" options={[
|
|
122
|
+
{
|
|
123
|
+
label: '全职',
|
|
124
|
+
value: 1
|
|
125
|
+
}, {
|
|
126
|
+
label: '兼职',
|
|
127
|
+
value: 2
|
|
128
|
+
}
|
|
129
|
+
]} label="职位类型"/>
|
|
130
|
+
]]}/>
|
|
131
|
+
<Filter value={radioValue} onChange={setRadioValue} labelHidden list={[[
|
|
132
|
+
<RadioList name="state" label="客户状态" options={[
|
|
133
|
+
{
|
|
134
|
+
label: "全部状态",
|
|
135
|
+
value: 0
|
|
136
|
+
}, {
|
|
137
|
+
label: "待开发",
|
|
138
|
+
value: 1
|
|
139
|
+
}, {
|
|
140
|
+
label: "开发中",
|
|
141
|
+
value: 2
|
|
142
|
+
}, {
|
|
143
|
+
label: "已签约",
|
|
144
|
+
value: 3
|
|
145
|
+
}, {
|
|
146
|
+
label: "已终止",
|
|
147
|
+
value: 4
|
|
148
|
+
}
|
|
149
|
+
]}/>
|
|
150
|
+
]]}/>
|
|
151
|
+
<Filter value={checkboxValue} onChange={setCheckboxValue} labelHidden list={[[
|
|
152
|
+
<CheckboxList name="state" label="客户状态" options={[
|
|
153
|
+
{
|
|
154
|
+
label: "全部状态",
|
|
155
|
+
value: 0
|
|
156
|
+
}, {
|
|
157
|
+
label: "待开发",
|
|
158
|
+
value: 1
|
|
159
|
+
}, {
|
|
160
|
+
label: "开发中",
|
|
161
|
+
value: 2
|
|
162
|
+
}, {
|
|
163
|
+
label: "已签约",
|
|
164
|
+
value: 3
|
|
165
|
+
}, {
|
|
166
|
+
label: "已终止",
|
|
167
|
+
value: 4
|
|
168
|
+
}
|
|
169
|
+
]}/>
|
|
170
|
+
]]}/>
|
|
171
|
+
</Space>
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
render(<Example/>);
|
|
175
|
+
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
### API
|
|
180
|
+
|
|
181
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
182
|
+
|----------|------------------------------------------------------------------------------|----------|-----|
|
|
183
|
+
| value | 筛选器的值，该组件为一个受控组件 | object | - |
|
|
184
|
+
| onChange | 筛选器的值发生改变的时候调用的函数 | function | - |
|
|
185
|
+
| list | 筛选器的选项，为一个二维数组，二维数组中的每一个数组为一行，内部数组的每一项为一个筛选选项，筛选选项为Filter.type中的一项或者是自行扩展的选项 | array | [] |
|
|
186
|
+
|
|
187
|
+
#### Filter.type
|
|
188
|
+
|
|
189
|
+
City(城市选择), List(列表选择，可以多选或者单选), Range(数据范围), Text(文字输入), Selector(下拉选项), Check(单项选择), RadioList(单选列表),
|
|
190
|
+
CheckboxList（多选列表）
|
|
191
|
+
|
|
192
|
+
公共参数
|
|
193
|
+
|
|
194
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
195
|
+
|-------|--------------------------------------------|--------|-----|
|
|
196
|
+
| label | 筛选项名称 | string | - |
|
|
197
|
+
| name | 筛选项的key | string | - |
|
|
198
|
+
| placeholder| 筛选项的placeholder(如果可以显示的话)，如果不传值通常会去label的值 | string |-|
|
|
199
|
+
|
|
200
|
+
##### Range
|
|
201
|
+
|
|
202
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
203
|
+
|-------|--------------------------------------------------------------|----------|-----|
|
|
204
|
+
| template | 将一组数据范围显示成一段用户可阅读的问题的模版，参数为筛选项的值,要求返回一个描述的字符串 | function | - |
|
|
205
|
+
|placeholder| 当为字符串时前后两个输入框显示同样内容，当为一个数组时，第一个输入框显示数组的第一个值，第二个输入框显示为数组的第二个值 | string|array | - |
|
|
206
|
+
#### List
|
|
207
|
+
|
|
208
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
209
|
+
|----------|-------------------------|-----------|-----|
|
|
210
|
+
| children | 筛选项的每一项的值，必须为 List.Item | List.Item | - |
|
|
211
|
+
|
|
212
|
+
#### List.Item
|
|
213
|
+
|
|
214
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
215
|
+
|-------|--------|--------|-----|
|
|
216
|
+
| value | 筛选项的值 | - | - |
|
|
217
|
+
| label | 筛选项显示项 | string | - |
|
|
218
|
+
|
|
219
|
+
其他参数参考对应内部组件的参数
|
|
220
|
+
|
package/dist/index.css
CHANGED
|
@@ -1,20 +1,24 @@
|
|
|
1
|
-
.space-full {
|
|
2
|
-
width: 100%; }
|
|
3
|
-
|
|
4
1
|
.react-filter-inner {
|
|
5
2
|
padding-right: 116px; }
|
|
6
3
|
|
|
7
4
|
.react-filter-divider {
|
|
8
5
|
margin: 5px auto; }
|
|
9
6
|
|
|
7
|
+
.react-filter-line {
|
|
8
|
+
min-width: 100%; }
|
|
9
|
+
|
|
10
10
|
.react-filter-item {
|
|
11
|
+
white-space: nowrap;
|
|
11
12
|
line-height: 32px; }
|
|
13
|
+
.react-filter-item .ant-input, .react-filter-item .ant-select {
|
|
14
|
+
min-width: 88px; }
|
|
12
15
|
|
|
13
16
|
.react-filter-item-label {
|
|
14
17
|
font-size: 14px; }
|
|
15
18
|
|
|
16
19
|
.react-filter-item-children {
|
|
17
|
-
display: flex;
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: center; }
|
|
18
22
|
|
|
19
23
|
.react-filter-search-button {
|
|
20
24
|
position: relative; }
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.scss"],"names":[],"mappings":"AAAA;EACE,
|
|
1
|
+
{"version":3,"sources":["index.scss"],"names":[],"mappings":"AAAA;EACE,oBAAoB,EAAE;;AAExB;EACE,gBAAgB,EAAE;;AAEpB;EACE,eAAe,EAAE;;AAEnB;EACE,mBAAmB;EACnB,iBAAiB,EAAE;EACnB;IACE,eAAe,EAAE;;AAErB;EACE,eAAe,EAAE;;AAEnB;EACE,aAAa;EACb,mBAAmB,EAAE;;AAEvB;EACE,kBAAkB,EAAE;EACpB;IACE,kBAAkB,EAAE;EACtB;IACE,WAAW;IACX,cAAc;IACd,kBAAkB;IAClB,WAAW;IACX,YAAY;IACZ,oBAAoB;IACpB,kBAAkB;IAClB,yBAAyB;IACzB,uBAAuB;IACvB,gCAAgC;IAChC,8CAA8C,EAAE;EAClD;IACE,UAAU,EAAE;IACZ;MACE,UAAU,EAAE;IACd;MACE,oBAAoB;MACpB,+CAA+C;MAC/C,mBAAmB,EAAE;;AAE3B;EACE,kBAAkB;EAClB,QAAQ;EACR,YAAY;EACZ,gCAAgC,EAAE;;AAEpC;EACE,iBAAiB,EAAE;;AAErB;EACE,WAAW,EAAE","file":"index.css","sourcesContent":[".react-filter-inner {\n padding-right: 116px; }\n\n.react-filter-divider {\n margin: 5px auto; }\n\n.react-filter-line {\n min-width: 100%; }\n\n.react-filter-item {\n white-space: nowrap;\n line-height: 32px; }\n .react-filter-item .ant-input, .react-filter-item .ant-select {\n min-width: 88px; }\n\n.react-filter-item-label {\n font-size: 14px; }\n\n.react-filter-item-children {\n display: flex;\n align-items: center; }\n\n.react-filter-search-button {\n position: relative; }\n .react-filter-search-button .inner {\n position: relative; }\n .react-filter-search-button:before {\n content: '';\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n border-radius: 3px;\n padding: 4px 4px 4px 60px;\n box-sizing: content-box;\n transform: translate(-3px, -3px);\n transition: box-shadow 300ms, background 300ms; }\n .react-filter-search-button.is-active {\n z-index: 1; }\n .react-filter-search-button.is-active .inner {\n z-index: 1; }\n .react-filter-search-button.is-active:before {\n pointer-events: auto;\n box-shadow: 2px 3px 10px 4px rgba(0, 0, 0, 0.2);\n background: #FFFFFF; }\n\n.react-filter-search-confirm {\n position: absolute;\n top: 50%;\n right: -10px;\n transform: translate(100%, -50%); }\n\n.react-filter-switch-btn {\n margin-top: -32px; }\n\n.react-filter-selected {\n width: 100%; }\n"]}
|
package/dist/index.js
CHANGED
|
@@ -19,7 +19,7 @@ var useClickOutSide__default = /*#__PURE__*/_interopDefaultLegacy(useClickOutSid
|
|
|
19
19
|
var isNumber__default = /*#__PURE__*/_interopDefaultLegacy(isNumber);
|
|
20
20
|
|
|
21
21
|
function _extends() {
|
|
22
|
-
_extends = Object.assign
|
|
22
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
23
23
|
for (var i = 1; i < arguments.length; i++) {
|
|
24
24
|
var source = arguments[i];
|
|
25
25
|
|
|
@@ -32,7 +32,6 @@ function _extends() {
|
|
|
32
32
|
|
|
33
33
|
return target;
|
|
34
34
|
};
|
|
35
|
-
|
|
36
35
|
return _extends.apply(this, arguments);
|
|
37
36
|
}
|
|
38
37
|
|
|
@@ -57,15 +56,16 @@ var useConsumer = function useConsumer() {
|
|
|
57
56
|
return React.useContext(context$1);
|
|
58
57
|
};
|
|
59
58
|
|
|
60
|
-
var _excluded$
|
|
59
|
+
var _excluded$8 = ["label", "labelHidden"];
|
|
61
60
|
|
|
62
61
|
var FilterItem = function FilterItem(_ref) {
|
|
63
62
|
var className = _ref.className,
|
|
64
63
|
label = _ref.label,
|
|
64
|
+
labelHidden = _ref.labelHidden,
|
|
65
65
|
children = _ref.children;
|
|
66
66
|
return /*#__PURE__*/React__default["default"].createElement(antd.Space, {
|
|
67
67
|
className: classnames__default["default"]('react-filter-item', className)
|
|
68
|
-
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
68
|
+
}, labelHidden ? null : /*#__PURE__*/React__default["default"].createElement("div", {
|
|
69
69
|
className: "react-filter-item-label"
|
|
70
70
|
}, label, ":"), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
71
71
|
className: "react-filter-item-children"
|
|
@@ -75,21 +75,26 @@ var FilterItem = function FilterItem(_ref) {
|
|
|
75
75
|
var withFilterItem = function withFilterItem(WrappedComponent) {
|
|
76
76
|
return function (_ref2) {
|
|
77
77
|
var label = _ref2.label,
|
|
78
|
-
|
|
78
|
+
labelHidden = _ref2.labelHidden,
|
|
79
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded$8);
|
|
79
80
|
|
|
80
81
|
return /*#__PURE__*/React__default["default"].createElement(FilterItem, {
|
|
82
|
+
label: label,
|
|
83
|
+
labelHidden: labelHidden
|
|
84
|
+
}, /*#__PURE__*/React__default["default"].createElement(WrappedComponent, _extends({}, props, {
|
|
81
85
|
label: label
|
|
82
|
-
}
|
|
86
|
+
})));
|
|
83
87
|
};
|
|
84
88
|
};
|
|
85
89
|
|
|
86
|
-
var _excluded$
|
|
90
|
+
var _excluded$7 = ["value", "label"];
|
|
87
91
|
var CheckableTag = antd.Tag.CheckableTag;
|
|
88
92
|
var context = React.createContext({});
|
|
89
93
|
var Provider = context.Provider;
|
|
90
94
|
|
|
91
95
|
var List = function List(_ref) {
|
|
92
96
|
var label = _ref.label,
|
|
97
|
+
labelHidden = _ref.labelHidden,
|
|
93
98
|
name = _ref.name,
|
|
94
99
|
size = _ref.size,
|
|
95
100
|
children = _ref.children,
|
|
@@ -171,7 +176,8 @@ var List = function List(_ref) {
|
|
|
171
176
|
}();
|
|
172
177
|
|
|
173
178
|
return /*#__PURE__*/React__default["default"].createElement(FilterItem, {
|
|
174
|
-
label: label
|
|
179
|
+
label: label,
|
|
180
|
+
labelHidden: labelHidden
|
|
175
181
|
}, /*#__PURE__*/React__default["default"].createElement(Provider, {
|
|
176
182
|
value: {
|
|
177
183
|
currentValue: currentValue,
|
|
@@ -207,7 +213,7 @@ var List = function List(_ref) {
|
|
|
207
213
|
List.Item = function (_ref3) {
|
|
208
214
|
var value = _ref3.value,
|
|
209
215
|
label = _ref3.label,
|
|
210
|
-
props = _objectWithoutPropertiesLoose(_ref3, _excluded$
|
|
216
|
+
props = _objectWithoutPropertiesLoose(_ref3, _excluded$7);
|
|
211
217
|
|
|
212
218
|
var _useContext = React.useContext(context),
|
|
213
219
|
currentValue = _useContext.currentValue,
|
|
@@ -232,13 +238,18 @@ List.defaultProps = {
|
|
|
232
238
|
size: 2
|
|
233
239
|
};
|
|
234
240
|
|
|
241
|
+
var _excluded$6 = ["label", "labelHidden", "name", "size"];
|
|
235
242
|
var Item = List.Item;
|
|
236
243
|
|
|
237
244
|
var City = function City(_ref) {
|
|
238
245
|
var label = _ref.label,
|
|
246
|
+
labelHidden = _ref.labelHidden,
|
|
239
247
|
name = _ref.name,
|
|
240
248
|
size = _ref.size;
|
|
249
|
+
_objectWithoutPropertiesLoose(_ref, _excluded$6);
|
|
250
|
+
|
|
241
251
|
return /*#__PURE__*/React__default["default"].createElement(List, {
|
|
252
|
+
labelHidden: labelHidden,
|
|
242
253
|
label: label,
|
|
243
254
|
name: name,
|
|
244
255
|
size: size,
|
|
@@ -416,7 +427,8 @@ var RangeInner = function RangeInner(_ref) {
|
|
|
416
427
|
onSearch = _ref.onSearch,
|
|
417
428
|
_onActiveChange = _ref.onActiveChange,
|
|
418
429
|
startProps = _ref.startProps,
|
|
419
|
-
endProps = _ref.endProps
|
|
430
|
+
endProps = _ref.endProps,
|
|
431
|
+
placeholder = _ref.placeholder;
|
|
420
432
|
|
|
421
433
|
var _useState = React.useState(null),
|
|
422
434
|
error = _useState[0],
|
|
@@ -475,7 +487,8 @@ var RangeInner = function RangeInner(_ref) {
|
|
|
475
487
|
},
|
|
476
488
|
onFocus: function onFocus() {
|
|
477
489
|
setActive(true);
|
|
478
|
-
}
|
|
490
|
+
},
|
|
491
|
+
placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder || "请输入"
|
|
479
492
|
})), "~", /*#__PURE__*/React__default["default"].createElement(antd.InputNumber, _extends({
|
|
480
493
|
size: "small"
|
|
481
494
|
}, endProps, {
|
|
@@ -487,21 +500,24 @@ var RangeInner = function RangeInner(_ref) {
|
|
|
487
500
|
},
|
|
488
501
|
onFocus: function onFocus() {
|
|
489
502
|
setActive(true);
|
|
490
|
-
}
|
|
503
|
+
},
|
|
504
|
+
placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder || "请输入"
|
|
491
505
|
}))));
|
|
492
506
|
});
|
|
493
507
|
};
|
|
494
508
|
var Range = withFilterItem(RangeInner);
|
|
495
509
|
|
|
496
|
-
var _excluded$
|
|
510
|
+
var _excluded$5 = ["name", "label", "template", "defaultActive", "onBlur", "onSearch", "onActiveChange", "placeholder"];
|
|
497
511
|
var TextInner = function TextInner(_ref) {
|
|
498
512
|
var name = _ref.name,
|
|
513
|
+
label = _ref.label,
|
|
499
514
|
template = _ref.template,
|
|
500
515
|
defaultActive = _ref.defaultActive,
|
|
501
516
|
onBlur = _ref.onBlur,
|
|
502
517
|
onSearch = _ref.onSearch,
|
|
503
518
|
_onActiveChange = _ref.onActiveChange,
|
|
504
|
-
|
|
519
|
+
placeholder = _ref.placeholder,
|
|
520
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
505
521
|
|
|
506
522
|
return /*#__PURE__*/React__default["default"].createElement(SearchButton, {
|
|
507
523
|
defaultActive: defaultActive,
|
|
@@ -519,6 +535,7 @@ var TextInner = function TextInner(_ref) {
|
|
|
519
535
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(antd.Input, _extends({
|
|
520
536
|
size: "small"
|
|
521
537
|
}, props, {
|
|
538
|
+
placeholder: placeholder || label,
|
|
522
539
|
value: value,
|
|
523
540
|
onChange: function onChange(e) {
|
|
524
541
|
setValue(e.target.value);
|
|
@@ -531,10 +548,12 @@ var TextInner = function TextInner(_ref) {
|
|
|
531
548
|
};
|
|
532
549
|
var Text = withFilterItem(TextInner);
|
|
533
550
|
|
|
534
|
-
var _excluded$
|
|
551
|
+
var _excluded$4 = ["name", "label", "placeholder"];
|
|
535
552
|
var SelectorInner = function SelectorInner(_ref) {
|
|
536
553
|
var name = _ref.name,
|
|
537
|
-
|
|
554
|
+
label = _ref.label,
|
|
555
|
+
placeholder = _ref.placeholder,
|
|
556
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
|
538
557
|
|
|
539
558
|
var _useConsumer = useConsumer(),
|
|
540
559
|
aValue = _useConsumer.value,
|
|
@@ -542,9 +561,7 @@ var SelectorInner = function SelectorInner(_ref) {
|
|
|
542
561
|
|
|
543
562
|
var currentValue = aValue[name];
|
|
544
563
|
return /*#__PURE__*/React__default["default"].createElement(antd.Select, _extends({}, props, {
|
|
545
|
-
|
|
546
|
-
minWidth: "150px"
|
|
547
|
-
},
|
|
564
|
+
placeholder: label || placeholder,
|
|
548
565
|
size: "small",
|
|
549
566
|
value: currentValue,
|
|
550
567
|
onChange: function onChange(value, item) {
|
|
@@ -554,12 +571,13 @@ var SelectorInner = function SelectorInner(_ref) {
|
|
|
554
571
|
};
|
|
555
572
|
var Selector = withFilterItem(SelectorInner);
|
|
556
573
|
|
|
557
|
-
var _excluded$
|
|
574
|
+
var _excluded$3 = ["name", "label", "className"];
|
|
558
575
|
|
|
559
576
|
var Check = function Check(_ref) {
|
|
560
577
|
var name = _ref.name,
|
|
561
578
|
label = _ref.label,
|
|
562
|
-
|
|
579
|
+
className = _ref.className,
|
|
580
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
563
581
|
|
|
564
582
|
var _useConsumer = useConsumer(),
|
|
565
583
|
aValue = _useConsumer.value,
|
|
@@ -567,6 +585,7 @@ var Check = function Check(_ref) {
|
|
|
567
585
|
|
|
568
586
|
var currentValue = aValue[name];
|
|
569
587
|
return /*#__PURE__*/React__default["default"].createElement(antd.Checkbox, _extends({}, props, {
|
|
588
|
+
className: classnames__default["default"]('react-filter-item', className),
|
|
570
589
|
size: "small",
|
|
571
590
|
checked: currentValue,
|
|
572
591
|
onChange: function onChange(e) {
|
|
@@ -578,6 +597,61 @@ var Check = function Check(_ref) {
|
|
|
578
597
|
}), label);
|
|
579
598
|
};
|
|
580
599
|
|
|
600
|
+
var _excluded$2 = ["label", "name", "options"];
|
|
601
|
+
var RadioList = withFilterItem(function (_ref) {
|
|
602
|
+
var name = _ref.name,
|
|
603
|
+
options = _ref.options,
|
|
604
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
605
|
+
|
|
606
|
+
var _useConsumer = useConsumer(),
|
|
607
|
+
aValue = _useConsumer.value,
|
|
608
|
+
_onChange = _useConsumer.onChange;
|
|
609
|
+
|
|
610
|
+
var currentValue = aValue[name];
|
|
611
|
+
console.log(currentValue);
|
|
612
|
+
return /*#__PURE__*/React__default["default"].createElement(antd.Radio.Group, _extends({}, props, {
|
|
613
|
+
options: options,
|
|
614
|
+
value: get__default["default"](currentValue, 'value'),
|
|
615
|
+
onChange: function onChange(e) {
|
|
616
|
+
var item = options.find(function (item) {
|
|
617
|
+
return item.value === e.target.value;
|
|
618
|
+
});
|
|
619
|
+
|
|
620
|
+
_onChange(name, item);
|
|
621
|
+
}
|
|
622
|
+
}));
|
|
623
|
+
});
|
|
624
|
+
|
|
625
|
+
var _excluded$1 = ["label", "name", "options"];
|
|
626
|
+
var CheckboxList = withFilterItem(function (_ref) {
|
|
627
|
+
var name = _ref.name,
|
|
628
|
+
options = _ref.options,
|
|
629
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
630
|
+
|
|
631
|
+
var _useConsumer = useConsumer(),
|
|
632
|
+
aValue = _useConsumer.value,
|
|
633
|
+
_onChange = _useConsumer.onChange;
|
|
634
|
+
|
|
635
|
+
var currentValue = aValue[name];
|
|
636
|
+
return /*#__PURE__*/React__default["default"].createElement(antd.Checkbox.Group, _extends({}, props, {
|
|
637
|
+
value: (currentValue || []).map(function (_ref2) {
|
|
638
|
+
var value = _ref2.value;
|
|
639
|
+
return value;
|
|
640
|
+
}),
|
|
641
|
+
onChange: function onChange(value) {
|
|
642
|
+
var item = value.map(function (value) {
|
|
643
|
+
return options.find(function (item) {
|
|
644
|
+
return item.value === value;
|
|
645
|
+
});
|
|
646
|
+
});
|
|
647
|
+
console.log(item);
|
|
648
|
+
|
|
649
|
+
_onChange(name, item);
|
|
650
|
+
},
|
|
651
|
+
options: options
|
|
652
|
+
}));
|
|
653
|
+
});
|
|
654
|
+
|
|
581
655
|
var _excluded = ["name", "value", "children"],
|
|
582
656
|
_excluded2 = ["type"];
|
|
583
657
|
var withMoreExtraButton = function withMoreExtraButton(WrappedComponent) {
|
|
@@ -665,15 +739,22 @@ var filterNull = function filterNull(item) {
|
|
|
665
739
|
|
|
666
740
|
var Filter = function Filter(_ref) {
|
|
667
741
|
var displayLine = _ref.displayLine,
|
|
742
|
+
defaultDisplay = _ref.defaultDisplay,
|
|
668
743
|
isExtra = _ref.isExtra,
|
|
669
744
|
list = _ref.list,
|
|
745
|
+
label = _ref.label,
|
|
746
|
+
labelHidden = _ref.labelHidden,
|
|
747
|
+
itemLabelHidden = _ref.itemLabelHidden,
|
|
748
|
+
unfoldText = _ref.unfoldText,
|
|
749
|
+
foldText = _ref.foldText,
|
|
750
|
+
extra = _ref.extra,
|
|
670
751
|
originValue = _ref.value,
|
|
671
752
|
onChange = _ref.onChange;
|
|
672
753
|
var value = React.useMemo(function () {
|
|
673
754
|
return filterNull(originValue);
|
|
674
755
|
}, [originValue]);
|
|
675
756
|
|
|
676
|
-
var _useState = React.useState(
|
|
757
|
+
var _useState = React.useState(defaultDisplay),
|
|
677
758
|
display = _useState[0],
|
|
678
759
|
setDisplay = _useState[1];
|
|
679
760
|
|
|
@@ -683,10 +764,12 @@ var Filter = function Filter(_ref) {
|
|
|
683
764
|
var renderList = function renderList(list) {
|
|
684
765
|
return list.map(function (item, index) {
|
|
685
766
|
return /*#__PURE__*/React__default["default"].createElement(antd.Space, {
|
|
686
|
-
key: index
|
|
767
|
+
key: index,
|
|
768
|
+
className: "react-filter-line"
|
|
687
769
|
}, item.map(function (item, index) {
|
|
688
770
|
return React.cloneElement(item, {
|
|
689
|
-
key: index
|
|
771
|
+
key: index,
|
|
772
|
+
labelHidden: itemLabelHidden
|
|
690
773
|
});
|
|
691
774
|
}));
|
|
692
775
|
});
|
|
@@ -708,9 +791,9 @@ var Filter = function Filter(_ref) {
|
|
|
708
791
|
className: "react-filter"
|
|
709
792
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
710
793
|
className: "react-filter-inner"
|
|
711
|
-
}, /*#__PURE__*/React__default["default"].createElement(FilterItem, {
|
|
794
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", null, labelHidden ? null : /*#__PURE__*/React__default["default"].createElement(antd.Space, null, /*#__PURE__*/React__default["default"].createElement(FilterItem, {
|
|
712
795
|
className: "react-filter-selected",
|
|
713
|
-
label:
|
|
796
|
+
label: label
|
|
714
797
|
}, Object.keys(value).map(function (key) {
|
|
715
798
|
var item = value[key];
|
|
716
799
|
if (!item) return null;
|
|
@@ -725,7 +808,7 @@ var Filter = function Filter(_ref) {
|
|
|
725
808
|
var label = _ref2.label;
|
|
726
809
|
return label;
|
|
727
810
|
}).join(",") : item.label);
|
|
728
|
-
})), renderList(isExtra ? basicList : list)), display ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(antd.Divider, {
|
|
811
|
+
})), /*#__PURE__*/React__default["default"].createElement("div", null, extra))), renderList(isExtra ? basicList : list)), display ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(antd.Divider, {
|
|
729
812
|
className: "react-filter-divider"
|
|
730
813
|
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
731
814
|
className: "react-filter-inner"
|
|
@@ -741,25 +824,34 @@ var Filter = function Filter(_ref) {
|
|
|
741
824
|
return !display;
|
|
742
825
|
});
|
|
743
826
|
}
|
|
744
|
-
}, display ?
|
|
827
|
+
}, display ? foldText : unfoldText))) : null));
|
|
745
828
|
};
|
|
746
|
-
|
|
747
829
|
Filter.type = {
|
|
748
830
|
City: City,
|
|
749
831
|
List: List,
|
|
750
832
|
Range: Range,
|
|
751
833
|
Text: Text,
|
|
752
834
|
Selector: Selector,
|
|
753
|
-
Check: Check
|
|
835
|
+
Check: Check,
|
|
836
|
+
RadioList: RadioList,
|
|
837
|
+
CheckboxList: CheckboxList
|
|
754
838
|
};
|
|
755
839
|
Filter.defaultProps = {
|
|
840
|
+
label: '筛选项',
|
|
841
|
+
labelHidden: false,
|
|
842
|
+
itemLabelHidden: false,
|
|
843
|
+
unfoldText: '展开',
|
|
844
|
+
foldText: '收起',
|
|
756
845
|
displayLine: 2,
|
|
846
|
+
defaultDisplay: false,
|
|
757
847
|
isExtra: true,
|
|
758
848
|
list: [[]],
|
|
759
849
|
value: {},
|
|
850
|
+
extra: null,
|
|
760
851
|
onChange: function onChange() {}
|
|
761
852
|
};
|
|
762
853
|
|
|
854
|
+
exports.Filter = Filter;
|
|
763
855
|
exports.FilterItem = FilterItem;
|
|
764
856
|
exports.SearchButton = SearchButton;
|
|
765
857
|
exports.createExtraButton = createExtraButton;
|