@kne/react-filter 0.1.18 → 0.1.21
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 +42 -16
- package/dist/index.css +7 -2
- package/dist/index.css.map +1 -1
- package/dist/index.js +6645 -0
- package/dist/index.js.map +1 -0
- package/dist/index.modern.js +5754 -24
- package/dist/index.modern.js.map +1 -1
- package/package.json +5 -3
- package/dist/index.cjs +0 -905
- package/dist/index.cjs.map +0 -1
package/README.md
CHANGED
|
@@ -29,13 +29,16 @@ npm i --save @kne/react-filter
|
|
|
29
29
|
|
|
30
30
|
- 基础示例
|
|
31
31
|
- 展示一个筛选器的普通模式
|
|
32
|
-
- reactFilter(@kne/react-filter),_(lodash)
|
|
32
|
+
- reactFilter(@kne/react-filter),(@kne/react-filter/dist/index.css),message(antd/lib/message),_(lodash)
|
|
33
33
|
|
|
34
34
|
```jsx
|
|
35
35
|
const {useState} = React;
|
|
36
36
|
const {default: Filter, createExtraButton} = reactFilter;
|
|
37
|
+
const {default: antdMessage} = message;
|
|
37
38
|
|
|
38
|
-
const {City, List, Range, Text, Selector, Check} = Filter.type;
|
|
39
|
+
const {City, List, Range, Text, Selector, Check, DateTime} = Filter.type;
|
|
40
|
+
|
|
41
|
+
console.log(Text.Number);
|
|
39
42
|
const {isNumber} = _;
|
|
40
43
|
|
|
41
44
|
const BaseExample = () => {
|
|
@@ -45,7 +48,11 @@ const BaseExample = () => {
|
|
|
45
48
|
setValue(value);
|
|
46
49
|
}} more={[
|
|
47
50
|
<Text label="测试字段" name="test1"/>,
|
|
48
|
-
<Text label="测试字段2" name="test2"
|
|
51
|
+
<Text label="测试字段2" name="test2" onBeforeSearch={(value) => {
|
|
52
|
+
antdMessage.error(`提交被拦截，输入值${value}`);
|
|
53
|
+
return false;
|
|
54
|
+
}}/>,
|
|
55
|
+
<Text.Number label="测试字段7" name="test7"/>,
|
|
49
56
|
<Range label="测试字段3" name="test3"/>,
|
|
50
57
|
<Selector label="测试字段4" name="test4"
|
|
51
58
|
options={[{
|
|
@@ -54,7 +61,9 @@ const BaseExample = () => {
|
|
|
54
61
|
label: "日语", value: "jap"
|
|
55
62
|
}, {
|
|
56
63
|
label: "法语", value: "fac"
|
|
57
|
-
}]}
|
|
64
|
+
}]}/>,
|
|
65
|
+
<DateTime label="测试字段5" name="test5" showTime/>,
|
|
66
|
+
<DateTime.Range label="测试字段6" name="test6"/>
|
|
58
67
|
]} list={[[<City label="目前城市" name="currentCity" size={5}/>], [<List label="学历" name="degree" size={1}>
|
|
59
68
|
<List.Item value="0" label="初中"/>
|
|
60
69
|
<List.Item value="1" label="高中"/>
|
|
@@ -113,11 +122,11 @@ render(<BaseExample/>);
|
|
|
113
122
|
|
|
114
123
|
- 简单示例
|
|
115
124
|
- 展示一个简单的筛选项，一般放在列表页title extra位置
|
|
116
|
-
- reactFilter(@kne/react-filter),
|
|
125
|
+
- reactFilter(@kne/react-filter),(@kne/react-filter/dist/index.css),space(antd/lib/space)
|
|
117
126
|
|
|
118
127
|
```jsx
|
|
119
128
|
const {useState} = React;
|
|
120
|
-
const {default: Filter} = reactFilter
|
|
129
|
+
const {default: Filter} = reactFilter;
|
|
121
130
|
const {default: Space} = space;
|
|
122
131
|
|
|
123
132
|
const {RadioList, Selector, Text, CheckboxList} = Filter.type;
|
|
@@ -190,20 +199,31 @@ render(<Example/>);
|
|
|
190
199
|
|
|
191
200
|
### API
|
|
192
201
|
|
|
193
|
-
| 属性名
|
|
194
|
-
|
|
195
|
-
| value
|
|
196
|
-
| onChange
|
|
197
|
-
| list
|
|
198
|
-
| more
|
|
199
|
-
| moreLabel
|
|
200
|
-
|moreTrigger
|
|
202
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
203
|
+
|-----------------|------------------------------------------------------------------------------|----------|-------|
|
|
204
|
+
| value | 筛选器的值，该组件为一个受控组件 | object | - |
|
|
205
|
+
| onChange | 筛选器的值发生改变的时候调用的函数 | function | - |
|
|
206
|
+
| list | 筛选器的选项，为一个二维数组，二维数组中的每一个数组为一行，内部数组的每一项为一个筛选选项，筛选选项为Filter.type中的一项或者是自行扩展的选项 | array | [] |
|
|
207
|
+
| more | 筛选项更多选项，为一个一维数组，数组中的每一项为一个筛选项，和list不同的是该筛选项默认为收起状态 | array | [] |
|
|
208
|
+
| moreLabel | 更多选项的label | string | 更多 |
|
|
209
|
+
| moreTrigger | 更多选项的触发方式，默认为hover触发，页可以设置为click | string | hover |
|
|
210
|
+
| label | 筛选器的label | string |筛选项|
|
|
211
|
+
| labelHidden | 筛选器的label及筛选内容行是否隐藏 | boolean | false |
|
|
212
|
+
| itemLabelHidden | 筛选项的label是否隐藏 | boolean |false|
|
|
213
|
+
| unfoldText | 展开提示文字 |string| 展开 |
|
|
214
|
+
| foldText | 收起提示文字 |string|收起|
|
|
215
|
+
|displayLine| 默认展开行数 |number|2|
|
|
216
|
+
|defaultDisplay| 默认是否展开 |boolean|false|
|
|
217
|
+
|isExtra| 是否将list切分成收起项和默认展开项 |boolean|true|
|
|
218
|
+
|extra| 额外内容 |boolean|null|
|
|
201
219
|
|
|
202
220
|
#### Filter.type
|
|
203
221
|
|
|
204
|
-
City(城市选择), List(列表选择，可以多选或者单选), Range(数据范围), Text(文字输入), Selector(下拉选项), Check(单项选择), RadioList(单选列表),
|
|
222
|
+
City(城市选择), List(列表选择，可以多选或者单选), Range(数据范围), Text(文字输入) Text.Number, Selector(下拉选项), Check(单项选择), RadioList(单选列表),
|
|
205
223
|
CheckboxList（多选列表）
|
|
206
224
|
|
|
225
|
+
DateTime(时间选择),DateTime.Time DateTime.Range DateTime.Week DateTime.Month DateTime.Year
|
|
226
|
+
|
|
207
227
|
公共参数
|
|
208
228
|
|
|
209
229
|
| 属性名 | 说明 | 类型 | 默认值 |
|
|
@@ -212,7 +232,13 @@ CheckboxList（多选列表）
|
|
|
212
232
|
| name | 筛选项的key | string | - |
|
|
213
233
|
| placeholder| 筛选项的placeholder(如果可以显示的话)，如果不传值通常会去label的值 | string |-|
|
|
214
234
|
|
|
215
|
-
|
|
235
|
+
#### Text|Text.Number|Range
|
|
236
|
+
|
|
237
|
+
| 属性名 | 说明 | 类型 | 默认值 |
|
|
238
|
+
|-------|-------------------------------------------------------|--------|-----|
|
|
239
|
+
|onBeforeSearch| 带有确定按钮的筛选项，在点击确定后会调用该方法，如果该方法返回为false，则该选项的值不会被提交给筛选项 | function | - |
|
|
240
|
+
|
|
241
|
+
##### Range|DateTime.Range
|
|
216
242
|
|
|
217
243
|
| 属性名 | 说明 | 类型 | 默认值 |
|
|
218
244
|
|-------|--------------------------------------------------------------|----------|-----|
|
package/dist/index.css
CHANGED
|
@@ -10,12 +10,17 @@
|
|
|
10
10
|
.react-filter-item {
|
|
11
11
|
white-space: nowrap;
|
|
12
12
|
line-height: 32px; }
|
|
13
|
-
.react-filter-item .ant-input, .react-filter-item .ant-select {
|
|
13
|
+
.react-filter-item .ant-input, .react-filter-item .ant-select, .react-filter-item .ant-input-number {
|
|
14
14
|
min-width: 150px; }
|
|
15
|
+
.react-filter-item .react-filter-range .ant-input-number {
|
|
16
|
+
min-width: auto; }
|
|
15
17
|
|
|
16
|
-
.react-filter-item-popover .ant-input, .react-filter-item-popover .ant-select {
|
|
18
|
+
.react-filter-item-popover .ant-input, .react-filter-item-popover .ant-select, .react-filter-item-popover .ant-input-number {
|
|
17
19
|
min-width: 150px; }
|
|
18
20
|
|
|
21
|
+
.react-filter-item-popover .react-filter-range .ant-input-number {
|
|
22
|
+
min-width: auto; }
|
|
23
|
+
|
|
19
24
|
.react-filter-item-label {
|
|
20
25
|
font-size: 14px; }
|
|
21
26
|
.react-filter-item-label.is-more {
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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,gBAAgB,EAAE;;
|
|
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,gBAAgB,EAAE;EACpB;IACE,eAAe,EAAE;;AAErB;EACE,gBAAgB,EAAE;;AAEpB;EACE,eAAe,EAAE;;AAEnB;EACE,eAAe,EAAE;EACjB;IACE,eAAe,EAAE;;AAErB;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,gBAAgB,EAAE;;AAEpB;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, .react-filter-item .ant-input-number {\n min-width: 150px; }\n .react-filter-item .react-filter-range .ant-input-number {\n min-width: auto; }\n\n.react-filter-item-popover .ant-input, .react-filter-item-popover .ant-select, .react-filter-item-popover .ant-input-number {\n min-width: 150px; }\n\n.react-filter-item-popover .react-filter-range .ant-input-number {\n min-width: auto; }\n\n.react-filter-item-label {\n font-size: 14px; }\n .react-filter-item-label.is-more {\n cursor: pointer; }\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.is-more {\n margin-left: 8px; }\n\n.react-filter-search-confirm:not(.is-more) {\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"]}
|