@kne/react-filter 0.1.21 → 0.1.22

package/README.md

@@ -38,7 +38,6 @@ const {default: antdMessage} = message;
 
 const {City, List, Range, Text, Selector, Check, DateTime} = Filter.type;
 
-console.log(Text.Number);
 const {isNumber} = _;
 
 const BaseExample = () => {
@@ -196,6 +195,45 @@ render(<Example/>);
 
 ```
 
+- 扩展示例
+- 展示扩展筛选项，自定义筛选项
+- reactFilter(@kne/react-filter),modal(antd/lib/modal),input(antd/lib/input),_(lodash),(@kne/react-filter/dist/index.css)
+
+```jsx
+const {default: ReactFilter, useFilterContext, FilterItem} = reactFilter;
+const {default: Modal} = modal;
+const {default: Input} = input;
+const {useRef, useState} = React;
+const {get} = _;
+
+const MyFilter = (props) => {
+    const ref = useRef();
+    const {value, onChange} = useFilterContext();
+    return <FilterItem {...props} onClick={() => {
+        Modal.confirm({
+            icon: null,
+            content: <Input ref={ref} defaultValue={get(value[props.name], 'value')}/>,
+            onOk: () => {
+                const value = ref.current.input.value;
+                onChange(props.name, {
+                    label: value,
+                    value
+                });
+            }
+        });
+        console.log(value);
+    }}/>;
+};
+
+const Example = () => {
+    const [value, setValue] = useState({});
+    return <ReactFilter value={value} onChange={setValue} more={[<MyFilter name="test1" label="测试"/>]}/>
+};
+
+render(<Example/>);
+
+```
+
 
 ### API