@pointcloud/pcloud-components 0.0.1
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 +47 -0
- package/dist/cjs/AdvancedFilter/FormFilter.d.ts +5 -0
- package/dist/cjs/AdvancedFilter/FormFilter.js +158 -0
- package/dist/cjs/AdvancedFilter/demos/demo1.d.ts +3 -0
- package/dist/cjs/AdvancedFilter/demos/demo1.js +56 -0
- package/dist/cjs/AdvancedFilter/demos/demo2.d.ts +3 -0
- package/dist/cjs/AdvancedFilter/demos/demo2.js +63 -0
- package/dist/cjs/AdvancedFilter/demos/demo3.d.ts +3 -0
- package/dist/cjs/AdvancedFilter/demos/demo3.js +113 -0
- package/dist/cjs/AdvancedFilter/index.d.ts +5 -0
- package/dist/cjs/AdvancedFilter/index.js +114 -0
- package/dist/cjs/AdvancedFilter/interface.d.ts +97 -0
- package/dist/cjs/AdvancedFilter/interface.js +17 -0
- package/dist/cjs/AdvancedFilter/styles/index.less +115 -0
- package/dist/cjs/ErrorBoundary/index.d.ts +6 -0
- package/dist/cjs/ErrorBoundary/index.js +45 -0
- package/dist/cjs/ErrorBoundary/index.less +42 -0
- package/dist/cjs/LabelValue/demos/demo1.d.ts +3 -0
- package/dist/cjs/LabelValue/demos/demo1.js +35 -0
- package/dist/cjs/LabelValue/demos/demo2.d.ts +3 -0
- package/dist/cjs/LabelValue/demos/demo2.js +36 -0
- package/dist/cjs/LabelValue/demos/demo3.d.ts +3 -0
- package/dist/cjs/LabelValue/demos/demo3.js +36 -0
- package/dist/cjs/LabelValue/index.d.ts +16 -0
- package/dist/cjs/LabelValue/index.js +50 -0
- package/dist/cjs/LabelValue/interface.d.ts +29 -0
- package/dist/cjs/LabelValue/interface.js +17 -0
- package/dist/cjs/LabelValue/styles/index.less +18 -0
- package/dist/cjs/index.d.ts +4 -0
- package/dist/cjs/index.js +38 -0
- package/dist/esm/AdvancedFilter/FormFilter.d.ts +4 -0
- package/dist/esm/AdvancedFilter/FormFilter.js +199 -0
- package/dist/esm/AdvancedFilter/demos/demo1.d.ts +2 -0
- package/dist/esm/AdvancedFilter/demos/demo1.js +25 -0
- package/dist/esm/AdvancedFilter/demos/demo2.d.ts +2 -0
- package/dist/esm/AdvancedFilter/demos/demo2.js +39 -0
- package/dist/esm/AdvancedFilter/demos/demo3.d.ts +2 -0
- package/dist/esm/AdvancedFilter/demos/demo3.js +86 -0
- package/dist/esm/AdvancedFilter/index.d.ts +5 -0
- package/dist/esm/AdvancedFilter/index.js +163 -0
- package/dist/esm/AdvancedFilter/interface.d.ts +97 -0
- package/dist/esm/AdvancedFilter/interface.js +1 -0
- package/dist/esm/AdvancedFilter/styles/index.less +115 -0
- package/dist/esm/ConfigProvider/index.d.ts +6 -0
- package/dist/esm/ConfigProvider/index.js +19 -0
- package/dist/esm/ConfigProvider/interface.d.ts +11 -0
- package/dist/esm/ConfigProvider/interface.js +1 -0
- package/dist/esm/ErrorBoundary/index.d.ts +5 -0
- package/dist/esm/ErrorBoundary/index.js +39 -0
- package/dist/esm/ErrorBoundary/index.less +42 -0
- package/dist/esm/LabelValue/demos/demo1.d.ts +2 -0
- package/dist/esm/LabelValue/demos/demo1.js +9 -0
- package/dist/esm/LabelValue/demos/demo2.d.ts +2 -0
- package/dist/esm/LabelValue/demos/demo2.js +10 -0
- package/dist/esm/LabelValue/demos/demo3.d.ts +2 -0
- package/dist/esm/LabelValue/demos/demo3.js +10 -0
- package/dist/esm/LabelValue/index.d.ts +16 -0
- package/dist/esm/LabelValue/index.js +45 -0
- package/dist/esm/LabelValue/interface.d.ts +29 -0
- package/dist/esm/LabelValue/interface.js +1 -0
- package/dist/esm/LabelValue/styles/index.less +18 -0
- package/dist/esm/Loading/demos/demo1.d.ts +2 -0
- package/dist/esm/Loading/demos/demo1.js +17 -0
- package/dist/esm/Loading/demos/demo2.d.ts +2 -0
- package/dist/esm/Loading/demos/demo2.js +18 -0
- package/dist/esm/Loading/index.d.ts +9 -0
- package/dist/esm/Loading/index.js +27 -0
- package/dist/esm/Loading/interface.d.ts +13 -0
- package/dist/esm/Loading/interface.js +1 -0
- package/dist/esm/Loading/loading.d.ts +9 -0
- package/dist/esm/Loading/loading.js +53 -0
- package/dist/esm/Loading/styles/index.less +22 -0
- package/dist/esm/NoData/demos/demo1.d.ts +2 -0
- package/dist/esm/NoData/demos/demo1.js +12 -0
- package/dist/esm/NoData/demos/demo2.d.ts +2 -0
- package/dist/esm/NoData/demos/demo2.js +14 -0
- package/dist/esm/NoData/index.d.ts +4 -0
- package/dist/esm/NoData/index.js +36 -0
- package/dist/esm/NoData/interface.d.ts +12 -0
- package/dist/esm/NoData/interface.js +1 -0
- package/dist/esm/NoData/styles/index.less +20 -0
- package/dist/esm/index.d.ts +7 -0
- package/dist/esm/index.js +6 -0
- package/dist/umd/images/logo.png +0 -0
- package/dist/umd/pcloud-components.min.css +1 -0
- package/dist/umd/pcloud-components.min.js +114 -0
- package/package.json +73 -0
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
+
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
+
|
|
5
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
+
|
|
7
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
8
|
+
|
|
9
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
10
|
+
|
|
11
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
12
|
+
|
|
13
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
14
|
+
|
|
15
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
16
|
+
|
|
17
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
18
|
+
|
|
19
|
+
import { Row, Col, Input, Button, DatePicker, Form, Radio, Select, InputNumber, TreeSelect, Switch, Checkbox } from 'antd';
|
|
20
|
+
import React, { useImperativeHandle } from 'react';
|
|
21
|
+
import "./styles/index.less";
|
|
22
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
23
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
24
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
25
|
+
var grid = {
|
|
26
|
+
xxl: {
|
|
27
|
+
span: 6
|
|
28
|
+
},
|
|
29
|
+
xl: {
|
|
30
|
+
span: 6
|
|
31
|
+
},
|
|
32
|
+
lg: {
|
|
33
|
+
span: 8
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
var formItemLayout = {
|
|
37
|
+
labelCol: {
|
|
38
|
+
span: 10
|
|
39
|
+
},
|
|
40
|
+
wrapperCol: {
|
|
41
|
+
span: 14
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
export default (function (props) {
|
|
45
|
+
var formItemConfig = props.formItemConfig,
|
|
46
|
+
_props$showButton = props.showButton,
|
|
47
|
+
showButton = _props$showButton === void 0 ? true : _props$showButton,
|
|
48
|
+
onValuesChange = props.onValuesChange,
|
|
49
|
+
onSearch = props.onSearch,
|
|
50
|
+
onReset = props.onReset,
|
|
51
|
+
formRef = props.formRef;
|
|
52
|
+
|
|
53
|
+
var _Form$useForm = Form.useForm(),
|
|
54
|
+
_Form$useForm2 = _slicedToArray(_Form$useForm, 1),
|
|
55
|
+
form = _Form$useForm2[0];
|
|
56
|
+
|
|
57
|
+
useImperativeHandle(formRef, function () {
|
|
58
|
+
return {
|
|
59
|
+
resetFields: form.resetFields,
|
|
60
|
+
setFieldsValue: form.setFieldsValue,
|
|
61
|
+
form: form
|
|
62
|
+
};
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
var search = function search() {
|
|
66
|
+
var values = form.getFieldsValue();
|
|
67
|
+
Object.keys(values).forEach(function (item) {
|
|
68
|
+
var config = formItemConfig.find(function (c) {
|
|
69
|
+
return c.name === item;
|
|
70
|
+
});
|
|
71
|
+
var isDate = ['datePicker', 'rangePicker'].includes(config === null || config === void 0 ? void 0 : config.type);
|
|
72
|
+
|
|
73
|
+
if (isDate && values[item]) {
|
|
74
|
+
values = _objectSpread(_objectSpread({}, values), formatTime(_defineProperty({}, item, values[item])));
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
onSearch && onSearch(values);
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
var valuesChange = function valuesChange(v) {
|
|
81
|
+
var value = formatTime(v);
|
|
82
|
+
onValuesChange && onValuesChange(value);
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
var formatTime = function formatTime(v) {
|
|
86
|
+
var fieldName = Object.keys(v)[0];
|
|
87
|
+
var config = formItemConfig.find(function (item) {
|
|
88
|
+
return item.name === fieldName;
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
if ((config === null || config === void 0 ? void 0 : config.type) === 'datePicker') {
|
|
92
|
+
var _v$fieldName;
|
|
93
|
+
|
|
94
|
+
v[fieldName] = (_v$fieldName = v[fieldName]) === null || _v$fieldName === void 0 ? void 0 : _v$fieldName.format((config === null || config === void 0 ? void 0 : config.format) || 'YYYY-MM-DD HH:mm:ss');
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
if ((config === null || config === void 0 ? void 0 : config.type) === 'rangePicker') {
|
|
98
|
+
var _v$fieldName$, _v$fieldName$2;
|
|
99
|
+
|
|
100
|
+
v[fieldName] = [(_v$fieldName$ = v[fieldName][0]) === null || _v$fieldName$ === void 0 ? void 0 : _v$fieldName$.format((config === null || config === void 0 ? void 0 : config.format) || 'YYYY-MM-DD HH:mm:ss'), (_v$fieldName$2 = v[fieldName][1]) === null || _v$fieldName$2 === void 0 ? void 0 : _v$fieldName$2.format((config === null || config === void 0 ? void 0 : config.format) || 'YYYY-MM-DD HH:mm:ss')];
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
return v;
|
|
104
|
+
};
|
|
105
|
+
|
|
106
|
+
var reset = function reset() {
|
|
107
|
+
form.resetFields();
|
|
108
|
+
onReset && onReset();
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
var renderComponent = function renderComponent(type, item) {
|
|
112
|
+
switch (type) {
|
|
113
|
+
case 'input':
|
|
114
|
+
return /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({}, item), {}, {
|
|
115
|
+
allowClear: true,
|
|
116
|
+
placeholder: item.placeholder || "\u8BF7\u8F93\u5165".concat(item.label)
|
|
117
|
+
}));
|
|
118
|
+
|
|
119
|
+
case 'inputNumber':
|
|
120
|
+
return /*#__PURE__*/_jsx(InputNumber, _objectSpread(_objectSpread({}, item), {}, {
|
|
121
|
+
placeholder: item.placeholder || "\u8BF7\u8F93\u5165".concat(item.label)
|
|
122
|
+
}));
|
|
123
|
+
|
|
124
|
+
case 'radio':
|
|
125
|
+
return /*#__PURE__*/_jsx(Radio.Group, _objectSpread(_objectSpread({}, item), {}, {
|
|
126
|
+
options: item.options
|
|
127
|
+
}));
|
|
128
|
+
|
|
129
|
+
case 'select':
|
|
130
|
+
return /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({}, item), {}, {
|
|
131
|
+
allowClear: true,
|
|
132
|
+
placeholder: item.placeholder || "\u8BF7\u9009\u62E9".concat(item.label),
|
|
133
|
+
options: item.options
|
|
134
|
+
}));
|
|
135
|
+
|
|
136
|
+
case 'checkbox':
|
|
137
|
+
return /*#__PURE__*/_jsx(Checkbox.Group, _objectSpread(_objectSpread({}, item), {}, {
|
|
138
|
+
options: item.options
|
|
139
|
+
}));
|
|
140
|
+
|
|
141
|
+
case 'switch':
|
|
142
|
+
return /*#__PURE__*/_jsx(Switch, {});
|
|
143
|
+
|
|
144
|
+
case 'datePicker':
|
|
145
|
+
return /*#__PURE__*/_jsx(DatePicker, _objectSpread(_objectSpread({}, item), {}, {
|
|
146
|
+
allowClear: true,
|
|
147
|
+
placeholder: item.placeholder || "\u8BF7\u9009\u62E9".concat(item.label)
|
|
148
|
+
}));
|
|
149
|
+
|
|
150
|
+
case 'rangePicker':
|
|
151
|
+
return /*#__PURE__*/_jsx(DatePicker.RangePicker, {
|
|
152
|
+
allowClear: true
|
|
153
|
+
});
|
|
154
|
+
|
|
155
|
+
case 'treeSelect':
|
|
156
|
+
return /*#__PURE__*/_jsx(TreeSelect, _objectSpread(_objectSpread({}, item), {}, {
|
|
157
|
+
dropdownClassName: "tree-select-filter",
|
|
158
|
+
showSearch: true,
|
|
159
|
+
allowClear: true,
|
|
160
|
+
placeholder: item.placeholder || "\u8BF7\u9009\u62E9".concat(item.label),
|
|
161
|
+
treeData: item.options
|
|
162
|
+
}));
|
|
163
|
+
|
|
164
|
+
default:
|
|
165
|
+
return /*#__PURE__*/_jsx(_Fragment, {});
|
|
166
|
+
}
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
return /*#__PURE__*/_jsxs(Form, _objectSpread(_objectSpread({}, formItemLayout), {}, {
|
|
170
|
+
className: "form-filter",
|
|
171
|
+
form: form,
|
|
172
|
+
colon: false,
|
|
173
|
+
onValuesChange: valuesChange,
|
|
174
|
+
children: [/*#__PURE__*/_jsx(Row, {
|
|
175
|
+
className: "filter-row",
|
|
176
|
+
children: formItemConfig === null || formItemConfig === void 0 ? void 0 : formItemConfig.map(function (item) {
|
|
177
|
+
return /*#__PURE__*/_jsx(Col, _objectSpread(_objectSpread({}, grid), {}, {
|
|
178
|
+
className: "filter-col",
|
|
179
|
+
children: /*#__PURE__*/_jsx(Form.Item, {
|
|
180
|
+
label: item.label,
|
|
181
|
+
name: item.name,
|
|
182
|
+
className: "filter-item",
|
|
183
|
+
children: renderComponent(item.type, item)
|
|
184
|
+
})
|
|
185
|
+
}), item.name);
|
|
186
|
+
})
|
|
187
|
+
}), showButton && /*#__PURE__*/_jsxs(Row, {
|
|
188
|
+
className: "search-btn",
|
|
189
|
+
children: [/*#__PURE__*/_jsx(Button, {
|
|
190
|
+
type: "primary",
|
|
191
|
+
onClick: search,
|
|
192
|
+
children: "\u67E5\u8BE2"
|
|
193
|
+
}), /*#__PURE__*/_jsx(Button, {
|
|
194
|
+
onClick: reset,
|
|
195
|
+
children: "\u91CD\u7F6E"
|
|
196
|
+
})]
|
|
197
|
+
})]
|
|
198
|
+
}));
|
|
199
|
+
});
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { AdvancedFilter } from '@pointcloud/pui-components';
|
|
3
|
+
import { CaretDownOutlined } from '@ant-design/icons';
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
export default (function () {
|
|
6
|
+
var formItemConfig = [{
|
|
7
|
+
label: '姓名',
|
|
8
|
+
type: 'input',
|
|
9
|
+
name: 'name'
|
|
10
|
+
}, {
|
|
11
|
+
label: '年龄',
|
|
12
|
+
type: 'input',
|
|
13
|
+
name: 'age'
|
|
14
|
+
}];
|
|
15
|
+
return /*#__PURE__*/_jsx(AdvancedFilter, {
|
|
16
|
+
formItemConfig: formItemConfig,
|
|
17
|
+
icon: /*#__PURE__*/_jsx(CaretDownOutlined, {}),
|
|
18
|
+
inputProps: {
|
|
19
|
+
name: 'keyWords',
|
|
20
|
+
inputSearch: function inputSearch(v) {
|
|
21
|
+
console.info(v);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
});
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { AdvancedFilter } from '@pointcloud/pui-components';
|
|
3
|
+
import { CaretDownOutlined } from '@ant-design/icons';
|
|
4
|
+
import { Button } from 'antd';
|
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
+
export default (function () {
|
|
7
|
+
var formItemConfig = [{
|
|
8
|
+
label: '筛选项1',
|
|
9
|
+
type: 'input',
|
|
10
|
+
name: 'name'
|
|
11
|
+
}, {
|
|
12
|
+
label: '性别',
|
|
13
|
+
type: 'select',
|
|
14
|
+
name: 'hight',
|
|
15
|
+
options: [{
|
|
16
|
+
label: '男',
|
|
17
|
+
value: '1'
|
|
18
|
+
}, {
|
|
19
|
+
label: '女',
|
|
20
|
+
value: '2'
|
|
21
|
+
}]
|
|
22
|
+
}];
|
|
23
|
+
return /*#__PURE__*/_jsx(AdvancedFilter, {
|
|
24
|
+
formItemConfig: formItemConfig,
|
|
25
|
+
icon: /*#__PURE__*/_jsx(CaretDownOutlined, {}),
|
|
26
|
+
left: /*#__PURE__*/_jsx(Button, {
|
|
27
|
+
children: "\u5DE6\u4FA7\u6309\u94AE"
|
|
28
|
+
}),
|
|
29
|
+
inputProps: {
|
|
30
|
+
name: 'keyWords',
|
|
31
|
+
inputSearch: function inputSearch(v) {
|
|
32
|
+
console.info(v);
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
right: /*#__PURE__*/_jsx(Button, {
|
|
36
|
+
children: "\u53F3\u4FA7\u6309\u94AE"
|
|
37
|
+
})
|
|
38
|
+
});
|
|
39
|
+
});
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { AdvancedFilter } from '@pointcloud/pui-components';
|
|
3
|
+
import { CaretDownOutlined } from '@ant-design/icons';
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
export default (function () {
|
|
6
|
+
var formItemConfig = [{
|
|
7
|
+
label: '姓名',
|
|
8
|
+
type: 'input',
|
|
9
|
+
name: 'name'
|
|
10
|
+
}, {
|
|
11
|
+
label: '性别',
|
|
12
|
+
type: 'select',
|
|
13
|
+
name: 'hight',
|
|
14
|
+
options: [{
|
|
15
|
+
label: '男',
|
|
16
|
+
value: '1'
|
|
17
|
+
}, {
|
|
18
|
+
label: '女',
|
|
19
|
+
value: '2'
|
|
20
|
+
}]
|
|
21
|
+
}, {
|
|
22
|
+
label: '出生日期',
|
|
23
|
+
type: 'datePicker',
|
|
24
|
+
name: 'birthday'
|
|
25
|
+
}, {
|
|
26
|
+
label: '时间范围',
|
|
27
|
+
type: 'rangePicker',
|
|
28
|
+
name: 'timeRange'
|
|
29
|
+
}, {
|
|
30
|
+
label: '开关',
|
|
31
|
+
type: 'switch',
|
|
32
|
+
name: 'open'
|
|
33
|
+
}, {
|
|
34
|
+
label: '是否学生',
|
|
35
|
+
type: 'radio',
|
|
36
|
+
name: 'isStudent',
|
|
37
|
+
options: [{
|
|
38
|
+
label: '是',
|
|
39
|
+
value: '1'
|
|
40
|
+
}, {
|
|
41
|
+
label: '否',
|
|
42
|
+
value: '2'
|
|
43
|
+
}]
|
|
44
|
+
}, {
|
|
45
|
+
label: '课程',
|
|
46
|
+
type: 'checkbox',
|
|
47
|
+
name: 'isStudent',
|
|
48
|
+
options: [{
|
|
49
|
+
label: '语文',
|
|
50
|
+
value: '1'
|
|
51
|
+
}, {
|
|
52
|
+
label: '数学',
|
|
53
|
+
value: '2'
|
|
54
|
+
}]
|
|
55
|
+
}, {
|
|
56
|
+
label: '组织结构',
|
|
57
|
+
type: 'treeSelect',
|
|
58
|
+
name: 'orgs',
|
|
59
|
+
options: [{
|
|
60
|
+
label: '根组织',
|
|
61
|
+
value: '1',
|
|
62
|
+
children: [{
|
|
63
|
+
label: '一级组织1',
|
|
64
|
+
value: '1-1',
|
|
65
|
+
children: [{
|
|
66
|
+
label: '二级组织1',
|
|
67
|
+
value: '2-1-1'
|
|
68
|
+
}]
|
|
69
|
+
}, {
|
|
70
|
+
label: '一级组织2',
|
|
71
|
+
value: '1-2'
|
|
72
|
+
}]
|
|
73
|
+
}]
|
|
74
|
+
}];
|
|
75
|
+
return /*#__PURE__*/_jsx(AdvancedFilter, {
|
|
76
|
+
formItemConfig: formItemConfig,
|
|
77
|
+
icon: /*#__PURE__*/_jsx(CaretDownOutlined, {}),
|
|
78
|
+
inputProps: {
|
|
79
|
+
placeholder: '请输入关键字检索',
|
|
80
|
+
name: 'keyWords',
|
|
81
|
+
inputSearch: function inputSearch(v) {
|
|
82
|
+
console.info(v);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
});
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
+
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
+
|
|
5
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
6
|
+
|
|
7
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
8
|
+
|
|
9
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
10
|
+
|
|
11
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
12
|
+
|
|
13
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
14
|
+
|
|
15
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
16
|
+
|
|
17
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
18
|
+
|
|
19
|
+
import React, { useState, useRef, useImperativeHandle, useContext } from 'react';
|
|
20
|
+
import { Input, Button, Collapse } from 'antd';
|
|
21
|
+
import classNames from 'classnames';
|
|
22
|
+
import { motion } from 'framer-motion';
|
|
23
|
+
import FormFilter from "./FormFilter";
|
|
24
|
+
import { ConfigContext } from "../ConfigProvider";
|
|
25
|
+
import "./styles/index.less";
|
|
26
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
27
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
28
|
+
var variants = {
|
|
29
|
+
down: {
|
|
30
|
+
transform: 'rotateZ(180deg)'
|
|
31
|
+
},
|
|
32
|
+
up: {
|
|
33
|
+
transform: 'rotateZ(0deg)'
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
var AdvancedFilter = function AdvancedFilter(props) {
|
|
38
|
+
var left = props.left,
|
|
39
|
+
right = props.right,
|
|
40
|
+
inputProps = props.inputProps,
|
|
41
|
+
formItemConfig = props.formItemConfig,
|
|
42
|
+
fRef = props.fRef,
|
|
43
|
+
icon = props.icon,
|
|
44
|
+
onValuesChange = props.onValuesChange,
|
|
45
|
+
onSearch = props.onSearch,
|
|
46
|
+
onReset = props.onReset;
|
|
47
|
+
|
|
48
|
+
var _useContext = useContext(ConfigContext),
|
|
49
|
+
prefixCls = _useContext.prefixCls,
|
|
50
|
+
getPrefixCls = _useContext.getPrefixCls;
|
|
51
|
+
|
|
52
|
+
var classname = getPrefixCls('search-filter');
|
|
53
|
+
var wrapperClass = classNames(_defineProperty({}, "".concat(prefixCls, "-search-filter"), !!prefixCls), classname);
|
|
54
|
+
|
|
55
|
+
var _useState = useState(false),
|
|
56
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
57
|
+
panelVisible = _useState2[0],
|
|
58
|
+
setPanelVisible = _useState2[1];
|
|
59
|
+
|
|
60
|
+
var _useState3 = useState(''),
|
|
61
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
62
|
+
inputValue = _useState4[0],
|
|
63
|
+
setInputValue = _useState4[1];
|
|
64
|
+
|
|
65
|
+
var inputRef = useRef(null);
|
|
66
|
+
var formRef = useRef(null);
|
|
67
|
+
useImperativeHandle(fRef, function () {
|
|
68
|
+
var _formRef$current;
|
|
69
|
+
|
|
70
|
+
return {
|
|
71
|
+
resetFields: resetFields,
|
|
72
|
+
form: (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.form
|
|
73
|
+
};
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
var resetFields = function resetFields() {
|
|
77
|
+
var _formRef$current2;
|
|
78
|
+
|
|
79
|
+
setInputValue('');
|
|
80
|
+
formRef === null || formRef === void 0 ? void 0 : (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 ? void 0 : _formRef$current2.resetFields();
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
var handleSearch = function handleSearch(values) {
|
|
84
|
+
var _inputRef$current, _inputRef$current$inp;
|
|
85
|
+
|
|
86
|
+
var value = inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : (_inputRef$current$inp = _inputRef$current.input) === null || _inputRef$current$inp === void 0 ? void 0 : _inputRef$current$inp.value;
|
|
87
|
+
onSearch && onSearch(_objectSpread(_objectSpread({}, values), _defineProperty({}, inputProps.name, value)));
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
var inputSearch = function inputSearch(v) {
|
|
91
|
+
(inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputSearch) && inputProps.inputSearch(_defineProperty({}, inputProps.name, v));
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
return /*#__PURE__*/_jsx(Collapse, {
|
|
95
|
+
className: wrapperClass,
|
|
96
|
+
activeKey: panelVisible ? '1' : 'none',
|
|
97
|
+
collapsible: "header",
|
|
98
|
+
ghost: true,
|
|
99
|
+
bordered: false,
|
|
100
|
+
children: /*#__PURE__*/_jsxs(Collapse.Panel, {
|
|
101
|
+
showArrow: false,
|
|
102
|
+
header: /*#__PURE__*/_jsxs("div", {
|
|
103
|
+
className: "search-header",
|
|
104
|
+
style: {
|
|
105
|
+
justifyContent: left ? 'space-between' : 'flex-end',
|
|
106
|
+
alignItems: 'center'
|
|
107
|
+
},
|
|
108
|
+
onClick: function onClick(e) {
|
|
109
|
+
return e.stopPropagation();
|
|
110
|
+
},
|
|
111
|
+
children: [left && /*#__PURE__*/_jsx("div", {
|
|
112
|
+
className: "left",
|
|
113
|
+
children: left
|
|
114
|
+
}), /*#__PURE__*/_jsxs("div", {
|
|
115
|
+
className: "right right-content",
|
|
116
|
+
children: [/*#__PURE__*/_jsx(Input.Search, {
|
|
117
|
+
className: "input",
|
|
118
|
+
ref: inputRef,
|
|
119
|
+
allowClear: true,
|
|
120
|
+
placeholder: inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder,
|
|
121
|
+
onChange: function onChange(e) {
|
|
122
|
+
setInputValue(e.target.value);
|
|
123
|
+
onValuesChange && onValuesChange(e.target.value);
|
|
124
|
+
},
|
|
125
|
+
onSearch: inputSearch,
|
|
126
|
+
name: inputProps === null || inputProps === void 0 ? void 0 : inputProps.name,
|
|
127
|
+
value: inputValue
|
|
128
|
+
}), /*#__PURE__*/_jsxs(Button, {
|
|
129
|
+
className: "button",
|
|
130
|
+
onClick: function onClick() {
|
|
131
|
+
return setPanelVisible(!panelVisible);
|
|
132
|
+
},
|
|
133
|
+
children: ["\u9AD8\u7EA7\u7B5B\u9009", icon && /*#__PURE__*/_jsx(motion.span, {
|
|
134
|
+
className: "icon",
|
|
135
|
+
animate: panelVisible ? 'down' : 'up',
|
|
136
|
+
variants: variants,
|
|
137
|
+
children: icon
|
|
138
|
+
})]
|
|
139
|
+
}), right && /*#__PURE__*/_jsx("div", {
|
|
140
|
+
className: "right",
|
|
141
|
+
children: right
|
|
142
|
+
})]
|
|
143
|
+
})]
|
|
144
|
+
}),
|
|
145
|
+
children: [/*#__PURE__*/_jsxs("div", {
|
|
146
|
+
className: "title",
|
|
147
|
+
children: [/*#__PURE__*/_jsx("span", {
|
|
148
|
+
className: "icon"
|
|
149
|
+
}), " \u67E5\u8BE2\u6761\u4EF6"]
|
|
150
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
151
|
+
className: "search-content",
|
|
152
|
+
children: /*#__PURE__*/_jsx(FormFilter, {
|
|
153
|
+
formRef: formRef,
|
|
154
|
+
formItemConfig: formItemConfig,
|
|
155
|
+
onSearch: handleSearch,
|
|
156
|
+
onReset: onReset
|
|
157
|
+
})
|
|
158
|
+
})]
|
|
159
|
+
}, "1")
|
|
160
|
+
});
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
export default AdvancedFilter;
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface FormProps {
|
|
3
|
+
/**
|
|
4
|
+
* @description 筛选项配置
|
|
5
|
+
*/
|
|
6
|
+
formItemConfig: FormItem[];
|
|
7
|
+
/**
|
|
8
|
+
* @description 筛选项值变更时触发
|
|
9
|
+
*/
|
|
10
|
+
onValuesChange?: (v: any) => void;
|
|
11
|
+
/**
|
|
12
|
+
* @description 点击查询按钮时触发
|
|
13
|
+
*/
|
|
14
|
+
onSearch?: (v: any) => void;
|
|
15
|
+
/**
|
|
16
|
+
* @description 点击重置按钮时触发
|
|
17
|
+
*/
|
|
18
|
+
onReset?: Function;
|
|
19
|
+
}
|
|
20
|
+
export interface FProps extends FormProps {
|
|
21
|
+
/**
|
|
22
|
+
* @description 显示查询/重置按钮
|
|
23
|
+
* @default true
|
|
24
|
+
*/
|
|
25
|
+
showButton?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* @description 筛选项表单的Ref
|
|
28
|
+
*/
|
|
29
|
+
formRef?: any;
|
|
30
|
+
}
|
|
31
|
+
export interface FilterProps extends FormProps {
|
|
32
|
+
/**
|
|
33
|
+
* @description 左侧渲染区
|
|
34
|
+
*/
|
|
35
|
+
left?: React.ReactNode;
|
|
36
|
+
/**
|
|
37
|
+
* @description 右侧渲染区
|
|
38
|
+
*/
|
|
39
|
+
right?: React.ReactNode;
|
|
40
|
+
/**
|
|
41
|
+
* @description input检索框props
|
|
42
|
+
*/
|
|
43
|
+
inputProps: InputProps;
|
|
44
|
+
/**
|
|
45
|
+
* @description children
|
|
46
|
+
*/
|
|
47
|
+
children?: React.ReactNode;
|
|
48
|
+
/**
|
|
49
|
+
* @description 表单引用ref值
|
|
50
|
+
*/
|
|
51
|
+
fRef?: any;
|
|
52
|
+
/**
|
|
53
|
+
* @description 筛选文字按钮图标
|
|
54
|
+
*/
|
|
55
|
+
icon?: React.ReactNode;
|
|
56
|
+
}
|
|
57
|
+
export interface FormItem {
|
|
58
|
+
/**
|
|
59
|
+
* @description 筛选项label文字
|
|
60
|
+
*/
|
|
61
|
+
label?: string;
|
|
62
|
+
/**
|
|
63
|
+
* @description 筛选项字段名
|
|
64
|
+
*/
|
|
65
|
+
name: string;
|
|
66
|
+
/**
|
|
67
|
+
* @description 筛选项类型
|
|
68
|
+
*/
|
|
69
|
+
type: FormItemType;
|
|
70
|
+
/**
|
|
71
|
+
* @description 筛选项placeholder
|
|
72
|
+
*/
|
|
73
|
+
placeholder?: string;
|
|
74
|
+
/**
|
|
75
|
+
* @description 筛选项的配置项(select|treeSelect时可用)
|
|
76
|
+
*/
|
|
77
|
+
options?: any[];
|
|
78
|
+
/**
|
|
79
|
+
* @description 筛选项的格式化配置(rangePicker|datePicker时可用)
|
|
80
|
+
*/
|
|
81
|
+
format?: string;
|
|
82
|
+
}
|
|
83
|
+
export declare type FormItemType = 'input' | 'inputNumber' | 'radio' | 'select' | 'checkbox' | 'datePicker' | 'rangePicker' | 'switch' | 'treeSelect';
|
|
84
|
+
export interface InputProps {
|
|
85
|
+
/**
|
|
86
|
+
* @description input检索框placeholder
|
|
87
|
+
*/
|
|
88
|
+
placeholder?: string;
|
|
89
|
+
/**
|
|
90
|
+
* @description input检索框字段名
|
|
91
|
+
*/
|
|
92
|
+
name: string;
|
|
93
|
+
/**
|
|
94
|
+
* @description input检索框回车时或点击检索图标时触发
|
|
95
|
+
*/
|
|
96
|
+
inputSearch?: (v: any) => void;
|
|
97
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|