https://github.com/wood3n/react-filter-component
react filter component
https://github.com/wood3n/react-filter-component
immerjs react reactcomponents typescript
Last synced: 11 months ago
JSON representation
react filter component
- Host: GitHub
- URL: https://github.com/wood3n/react-filter-component
- Owner: wood3n
- License: mit
- Created: 2024-02-22T09:29:41.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-03-13T14:38:08.000Z (almost 2 years ago)
- Last Synced: 2024-03-14T13:10:22.784Z (almost 2 years ago)
- Topics: immerjs, react, reactcomponents, typescript
- Language: TypeScript
- Homepage: https://wood3n.github.io/react-filter-component/
- Size: 1.82 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react filter
[](https://badge.fury.io/js/@react-filter%2Fantd)
[](http://commitizen.github.io/cz-cli/)
## 安装
```shell
pnpm add @react-filter/antd
```
## 使用
```jsx
import { ReactFilter } from '@react-filter/antd';
;
```
## API
| 属性 |
说明 | 类型 | 默认值 |
| :------------- | -------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `defaultValue` | 组件初始化默认值 | `object` | |
| `value` | 组件值 | `object` | |
| `onChange` | 组件值改变回调 | `(value) => void` | |
| `connectors` | 条件组关系，默认且和或 | `SelectOption[]` | `{ label: '且', value: 'AND' }`
`{ label: '或', value: 'OR' }` |
| `operators` | 条件表达式操作符，例如`大于`、`小于`等 | `SelectOption[]` | `{ label: "等于", "value": "equal"}`
`{ "label": "不等于", "value": "not_equal"}`
`{ "label": "大于", "value": "greater" }`
`{ "label": "大于等于", "value": "greater_equal" }`
`{ "label": "小于", "value": "less" }`
`{ "label": "小于等于", "value": "less_equal" }`
`{ "label": "包含", "value": "in" }`
`{ "label": "不包含", "value": "not_in" }`
`{ "label": "模糊匹配", "value": "like" }`
`{ "label": "不匹配", "value": "not_like" }` |
| `fieldNames` | 组件值字段名称 | `FieldNameMap` | `{connector: 'connector', filters: 'filters', left: 'left', operator: 'operator', value: 'value'}` |
### interface
```typescript
interface SelectOption {
label: React.ReactNode;
value: string | number | boolean;
}
```
```typescript
interface FieldNameMap {
connector?: string;
filters?: string;
left?: string;
operator?: string;
value?: string;
}
```