@kne/react-filter 0.1.20 → 0.1.23

package/README.md

@@ -29,13 +29,15 @@ npm i --save @kne/react-filter
 
 - 基础示例
 - 展示一个筛选器的普通模式
-- reactFilter(@kne/react-filter),(@kne/react-filter/dist/index.css),_(lodash)
+- reactFilter(@kne/react-filter),(@kne/react-filter/dist/index.css),message(antd/lib/message),_(lodash)
 
 ```jsx
 const {useState} = React;
 const {default: Filter, createExtraButton} = reactFilter;
+const {default: antdMessage} = message;
+
+const {City, List, Range, Text, Selector, Check, DateTime} = Filter.type;
 
-const {City, List, Range, Text, Selector, Check} = Filter.type;
 const {isNumber} = _;
 
 const BaseExample = () => {
@@ -45,7 +47,11 @@ const BaseExample = () => {
         setValue(value);
     }} more={[
         <Text label="测试字段" name="test1"/>,
-        <Text label="测试字段2" name="test2"/>,
+        <Text label="测试字段2" name="test2" onBeforeSearch={(value) => {
+            antdMessage.error(`提交被拦截，输入值${value}`);
+            return false;
+        }}/>,
+        <Text.Number label="测试字段7" name="test7"/>,
         <Range label="测试字段3" name="test3"/>,
         <Selector label="测试字段4" name="test4"
                   options={[{
@@ -54,7 +60,9 @@ const BaseExample = () => {
                       label: "日语", value: "jap"
                   }, {
                       label: "法语", value: "fac"
-                  }]}/>
+                  }]}/>,
+        <DateTime label="测试字段5" name="test5" showTime/>,
+        <DateTime.Range label="测试字段6" name="test6"/>
     ]} list={[[<City label="目前城市" name="currentCity" size={5}/>], [<List label="学历" name="degree" size={1}>
         <List.Item value="0" label="初中"/>
         <List.Item value="1" label="高中"/>
@@ -187,23 +195,135 @@ render(<Example/>);
 
 ```
 
+- 扩展示例
+- 展示扩展筛选项，自定义筛选项
+- reactFilter(@kne/react-filter),modal(antd/lib/modal),input(antd/lib/input),space(antd/lib/space),datePicker(antd/lib/date-picker),monment(moment),_(lodash),(@kne/react-filter/dist/index.css)
+
+```jsx
+const {default: ReactFilter, useFilterContext, FilterItem, withFilterItem, SearchButton} = reactFilter;
+const {default: Modal} = modal;
+const {default: Input} = input;
+const {default: Space} = space;
+const {default: DatePicker} = datePicker;
+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 DateRange = withFilterItem(({
+                                      name,
+                                      size,
+                                      isMore,
+                                      defaultActive,
+                                      onBlur,
+                                      onSearch,
+                                      onBeforeSearch,
+                                      startProps,
+                                      endProps,
+                                      placeholder
+                                  }) => {
+    const ref = useRef();
+
+    const sort = (a, b) => {
+        if (a && b) {
+            return new Date(a) - new Date(b);
+        }
+        return 0;
+    };
+
+    return <SearchButton size={size} template={(value) => {
+        if (!value[0] && value[1]) {
+            return `${value[1]}之前`;
+        }
+        if (!value[1] && value[0]) {
+            return `${value[0]}之后`;
+        }
+        return value.join('~');
+    }} isMore={isMore} onBlur={onBlur} defaultActive={defaultActive}
+                         name={name}
+                         onSearch={onSearch}
+                         onBeforeSearch={onBeforeSearch}>
+        {({value, setValue, setActive}) => {
+            return <div ref={ref}>
+                <Space>
+                    <DatePicker size="small" {...startProps} getPopupContainer={() => ref.current}
+                                value={get(value, 0) && monment(get(value, 0))}
+                                onChange={(inputValue) => {
+                                    const target = [inputValue && inputValue.format('YYYY-MM-DD HH:mm:ss'), get(value, 1)];
+                                    setValue(target.sort(sort));
+                                }} onFocus={() => {
+                        setActive(true);
+                    }} placeholder={Array.isArray(placeholder) ? placeholder[0] : (placeholder || "请输入")}/>
+                    ~
+                    <DatePicker size="small" {...endProps} getPopupContainer={() => ref.current}
+                                value={get(value, 1) && monment(get(value, 1))}
+                                onChange={(inputValue) => {
+                                    const target = [get(value, 0), inputValue && inputValue.format('YYYY-MM-DD HH:mm:ss')];
+                                    setValue(target.sort(sort));
+                                }} onFocus={() => {
+                        setActive(true);
+                    }} placeholder={Array.isArray(placeholder) ? placeholder[0] : (placeholder || "请输入")}/>
+                </Space>
+            </div>
+        }}
+    </SearchButton>
+});
+
+const Example = () => {
+    const [value, setValue] = useState({});
+    return <ReactFilter value={value} onChange={setValue} moreTrigger="click"
+                        more={[<MyFilter name="test1" label="测试"/>, <DateRange name="test2" label="测试2"/>]}/>
+};
+
+render(<Example/>);
+
+```
+
 
 ### API
 
-| 属性名       | 说明                                                                           | 类型       | 默认值   |
-|-----------|------------------------------------------------------------------------------|----------|-------|
-| value     | 筛选器的值，该组件为一个受控组件                                                             | object   | -     |
-| onChange  | 筛选器的值发生改变的时候调用的函数                                                            | function | -     |
-| list      | 筛选器的选项，为一个二维数组，二维数组中的每一个数组为一行，内部数组的每一项为一个筛选选项，筛选选项为Filter.type中的一项或者是自行扩展的选项 | array    | []    |
-| more      | 筛选项更多选项，为一个一维数组，数组中的每一项为一个筛选项，和list不同的是该筛选项默认为收起状态|array| []    |
-| moreLabel | 更多选项的label|string| 更多    |
-|moreTrigger|更多选项的触发方式，默认为hover触发，页可以设置为click|string| hover |
+| 属性名             | 说明                                                                           | 类型       | 默认值   |
+|-----------------|------------------------------------------------------------------------------|----------|-------|
+| value           | 筛选器的值，该组件为一个受控组件                                                             | object   | -     |
+| onChange        | 筛选器的值发生改变的时候调用的函数                                                            | function | -     |
+| list            | 筛选器的选项，为一个二维数组，二维数组中的每一个数组为一行，内部数组的每一项为一个筛选选项，筛选选项为Filter.type中的一项或者是自行扩展的选项 | array    | []    |
+| more            | 筛选项更多选项，为一个一维数组，数组中的每一项为一个筛选项，和list不同的是该筛选项默认为收起状态                           | array    | []    |
+| moreLabel       | 更多选项的label                                                                   | string   | 更多    |
+| moreTrigger     | 更多选项的触发方式，默认为hover触发，页可以设置为click                                             | string   | hover |
+| label           | 筛选器的label                                                                    | string   |筛选项|
+| labelHidden     | 筛选器的label及筛选内容行是否隐藏                                                          | boolean  | false    |
+| itemLabelHidden | 筛选项的label是否隐藏                                                                | boolean  |false|
+| unfoldText      | 展开提示文字                                                                       |string| 展开       |
+| foldText        | 收起提示文字                                                                       |string|收起|
+|displayLine| 默认展开行数                                                                       |number|2|
+|defaultDisplay| 默认是否展开                                                                       |boolean|false|
+|isExtra| 是否将list切分成收起项和默认展开项                                                          |boolean|true|
+|extra| 额外内容                                                                         |boolean|null|
 
 #### Filter.type
 
-City(城市选择), List(列表选择，可以多选或者单选), Range(数据范围), Text(文字输入), Selector(下拉选项), Check(单项选择), RadioList(单选列表),
+City(城市选择), List(列表选择，可以多选或者单选), Range(数据范围), Text(文字输入) Text.Number, Selector(下拉选项), Check(单项选择), RadioList(单选列表),
 CheckboxList（多选列表）
 
+DateTime(时间选择),DateTime.Time DateTime.Range DateTime.Week DateTime.Month DateTime.Year
+
 公共参数
 
 | 属性名   | 说明                                         | 类型     | 默认值 |
@@ -212,7 +332,13 @@ CheckboxList（多选列表）
 | name  | 筛选项的key                                    | string | -   |
 | placeholder| 筛选项的placeholder(如果可以显示的话)，如果不传值通常会去label的值 | string |-|
 
-##### Range
+#### Text|Text.Number|Range
+
+| 属性名   | 说明                                                    | 类型     | 默认值 |
+|-------|-------------------------------------------------------|--------|-----|
+|onBeforeSearch| 带有确定按钮的筛选项，在点击确定后会调用该方法，如果该方法返回为false，则该选项的值不会被提交给筛选项 | function | -   |
+
+##### Range|DateTime.Range
 
 | 属性名   | 说明                                                           | 类型       | 默认值 |
 |-------|--------------------------------------------------------------|----------|-----|

package/dist/index.css

@@ -10,12 +10,17 @@
 .react-filter-item {
   white-space: nowrap;
   line-height: 32px; }
-  .react-filter-item .ant-input, .react-filter-item .ant-select {
+  .react-filter-item .ant-input, .react-filter-item .ant-select, .react-filter-item .ant-input-number {
     min-width: 150px; }
+  .react-filter-item .react-filter-range .ant-input-number {
+    min-width: auto; }
 
-.react-filter-item-popover .ant-input, .react-filter-item-popover .ant-select {
+.react-filter-item-popover .ant-input, .react-filter-item-popover .ant-select, .react-filter-item-popover .ant-input-number {
   min-width: 150px; }
 
+.react-filter-item-popover .react-filter-range .ant-input-number {
+  min-width: auto; }
+
 .react-filter-item-label {
   font-size: 14px; }
   .react-filter-item-label.is-more {

package/dist/index.css.map

@@ -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;;AAEtB;EACE,gBAAgB,EAAE;;AAEpB;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 {\n    min-width: 150px; }\n\n.react-filter-item-popover .ant-input, .react-filter-item-popover .ant-select {\n  min-width: 150px; }\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"]}
+{"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"]}

package/dist/index.js

@@ -1,15 +1,19 @@
 var React = require('react');
 var antd = require('antd');
+var useEvent = require('@kne/use-event');
 var classnames = require('classnames');
 var reactCitySelect = require('@kne/react-city-select');
 var lodash = require('lodash');
 var useClickOutSide = require('@kne/use-click-outside');
+var moment = require('moment');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var useEvent__default = /*#__PURE__*/_interopDefaultLegacy(useEvent);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var useClickOutSide__default = /*#__PURE__*/_interopDefaultLegacy(useClickOutSide);
+var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 
 var context$1 = React.createContext({});
 var Provider$1 = context$1.Provider;
@@ -49,7 +53,26 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded$8 = ["label", "labelHidden", "isMore", "moreTrigger"];
+var _excluded$9 = ["label", "labelHidden", "isMore", "moreTrigger"];
+
+var PopContent = function PopContent(props) {
+  var _useState = React.useState(false),
+      visible = _useState[0],
+      setVisible = _useState[1];
+
+  var _useConsumer = useConsumer(),
+      emitter = _useConsumer.emitter;
+
+  React.useEffect(function () {
+    emitter.addListener('change', function () {
+      setVisible(false);
+    });
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement(antd.Popover, _extends({}, props, {
+    visible: visible,
+    onVisibleChange: setVisible
+  }));
+};
 
 var FilterItem = function FilterItem(_ref) {
   var className = _ref.className,
@@ -57,17 +80,23 @@ var FilterItem = function FilterItem(_ref) {
       labelHidden = _ref.labelHidden,
       isMore = _ref.isMore,
       moreTrigger = _ref.moreTrigger,
+      onClick = _ref.onClick,
       children = _ref.children;
 
   if (isMore) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: classnames__default["default"]("react-filter-item-label", "is-more", className)
-    }, /*#__PURE__*/React__default["default"].createElement(antd.Popover, {
+    }, children ? /*#__PURE__*/React__default["default"].createElement(PopContent, {
       content: children,
       trigger: moreTrigger,
       placement: "bottom",
       overlayClassName: "react-filter-item-popover"
-    }, /*#__PURE__*/React__default["default"].createElement("a", null, label)));
+    }, /*#__PURE__*/React__default["default"].createElement("a", {
+      className: "react-filter-item-more"
+    }, label)) : /*#__PURE__*/React__default["default"].createElement("a", {
+      className: "react-filter-item-more",
+      onClick: onClick
+    }, label));
   }
 
   return /*#__PURE__*/React__default["default"].createElement(antd.Space, {
@@ -85,7 +114,7 @@ var withFilterItem = function withFilterItem(WrappedComponent) {
         labelHidden = _ref2.labelHidden,
         isMore = _ref2.isMore,
         moreTrigger = _ref2.moreTrigger,
-        props = _objectWithoutPropertiesLoose(_ref2, _excluded$8);
+        props = _objectWithoutPropertiesLoose(_ref2, _excluded$9);
 
     return /*#__PURE__*/React__default["default"].createElement(FilterItem, {
       label: label,
@@ -99,7 +128,7 @@ var withFilterItem = function withFilterItem(WrappedComponent) {
   };
 };
 
-var _excluded$7 = ["value", "label"];
+var _excluded$8 = ["value", "label"];
 var CheckableTag = antd.Tag.CheckableTag;
 var context = React.createContext({});
 var Provider = context.Provider;
@@ -225,7 +254,7 @@ var List = function List(_ref) {
 List.Item = function (_ref3) {
   var value = _ref3.value,
       label = _ref3.label,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded$7);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded$8);
 
   var _useContext = React.useContext(context),
       currentValue = _useContext.currentValue,
@@ -250,7 +279,7 @@ List.defaultProps = {
   size: 2
 };
 
-var _excluded$6 = ["label", "labelHidden", "name", "size", "isMore"];
+var _excluded$7 = ["label", "labelHidden", "name", "size", "isMore"];
 var Item = List.Item;
 
 var City = function City(_ref) {
@@ -258,7 +287,7 @@ var City = function City(_ref) {
       labelHidden = _ref.labelHidden,
       name = _ref.name,
       size = _ref.size;
-      _objectWithoutPropertiesLoose(_ref, _excluded$6);
+      _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
   return /*#__PURE__*/React__default["default"].createElement(List, {
     labelHidden: labelHidden,
@@ -443,6 +472,7 @@ var RangeInner = function RangeInner(_ref) {
       onBlur = _ref.onBlur,
       onSearch = _ref.onSearch,
       _onActiveChange = _ref.onActiveChange,
+      onBeforeSearch = _ref.onBeforeSearch,
       startProps = _ref.startProps,
       endProps = _ref.endProps,
       placeholder = _ref.placeholder;
@@ -463,6 +493,10 @@ var RangeInner = function RangeInner(_ref) {
       return false;
     }
 
+    if (onBeforeSearch) {
+      return onBeforeSearch(value);
+    }
+
     return true;
   };
 
@@ -493,7 +527,8 @@ var RangeInner = function RangeInner(_ref) {
       title: error,
       placement: "bottomRight"
     }, /*#__PURE__*/React__default["default"].createElement(antd.Space, {
-      size: "small"
+      size: "small",
+      className: "react-filter-range"
     }, /*#__PURE__*/React__default["default"].createElement(antd.InputNumber, _extends({
       size: "small"
     }, startProps, {
@@ -525,55 +560,71 @@ var RangeInner = function RangeInner(_ref) {
 };
 var Range = withFilterItem(RangeInner);
 
-var _excluded$5 = ["name", "label", "isMore", "template", "defaultActive", "onBlur", "onSearch", "onActiveChange", "placeholder"];
-var TextInner = function TextInner(_ref) {
-  var name = _ref.name,
-      label = _ref.label,
-      isMore = _ref.isMore,
-      template = _ref.template,
-      defaultActive = _ref.defaultActive,
-      onBlur = _ref.onBlur,
-      onSearch = _ref.onSearch,
-      _onActiveChange = _ref.onActiveChange,
-      placeholder = _ref.placeholder,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+var _excluded$6 = ["name", "label", "isMore", "template", "defaultActive", "onBlur", "onSearch", "onBeforeSearch", "onActiveChange", "placeholder"];
 
-  return /*#__PURE__*/React__default["default"].createElement(SearchButton, {
-    defaultActive: defaultActive,
-    isMore: isMore,
-    onBlur: onBlur,
-    template: template,
-    name: name,
-    onSearch: onSearch,
-    onActiveChange: function onActiveChange(active) {
-      _onActiveChange && _onActiveChange(active);
-    }
-  }, function (_ref2) {
-    var value = _ref2.value,
-        setValue = _ref2.setValue,
-        setActive = _ref2.setActive;
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(antd.Input, _extends({
-      size: "small"
-    }, props, {
-      placeholder: placeholder || label,
-      value: value,
-      onChange: function onChange(e) {
-        setValue(e.target.value);
-      },
-      onFocus: function onFocus() {
-        setActive(true);
+var withValue$1 = function withValue(WrappedComponent, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  return function (_ref) {
+    var name = _ref.name,
+        label = _ref.label,
+        isMore = _ref.isMore,
+        template = _ref.template,
+        defaultActive = _ref.defaultActive,
+        onBlur = _ref.onBlur,
+        onSearch = _ref.onSearch,
+        onBeforeSearch = _ref.onBeforeSearch,
+        _onActiveChange = _ref.onActiveChange,
+        placeholder = _ref.placeholder,
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+
+    return /*#__PURE__*/React__default["default"].createElement(SearchButton, {
+      defaultActive: defaultActive,
+      isMore: isMore,
+      onBlur: onBlur,
+      template: template,
+      name: name,
+      onSearch: onSearch,
+      onBeforeSearch: onBeforeSearch,
+      onActiveChange: function onActiveChange(active) {
+        _onActiveChange && _onActiveChange(active);
       }
-    })));
-  });
+    }, function (_ref2) {
+      var value = _ref2.value,
+          setValue = _ref2.setValue,
+          setActive = _ref2.setActive;
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(WrappedComponent, _extends({
+        size: "small"
+      }, props, {
+        placeholder: placeholder || label,
+        value: value,
+        onChange: function onChange(e) {
+          setValue(options.getValue ? options.getValue(e) : e.target.value);
+        },
+        onFocus: function onFocus() {
+          setActive(true);
+        }
+      })));
+    });
+  };
 };
-var Text = withFilterItem(TextInner);
 
-var _excluded$4 = ["name", "label", "placeholder", "isMore"];
+var TextInner = withValue$1(antd.Input);
+var Text = withFilterItem(withValue$1(antd.Input));
+Text.Number = withFilterItem(withValue$1(antd.InputNumber, {
+  getValue: function getValue(value) {
+    return value;
+  }
+}));
+
+var _excluded$5 = ["name", "label", "placeholder", "isMore"];
 var SelectorInner = function SelectorInner(_ref) {
   var name = _ref.name,
       label = _ref.label,
       placeholder = _ref.placeholder,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
   var _useConsumer = useConsumer(),
       aValue = _useConsumer.value,
@@ -591,13 +642,13 @@ var SelectorInner = function SelectorInner(_ref) {
 };
 var Selector = withFilterItem(SelectorInner);
 
-var _excluded$3 = ["name", "label", "className", "isMore"];
+var _excluded$4 = ["name", "label", "className", "isMore"];
 
 var Check = function Check(_ref) {
   var name = _ref.name,
       label = _ref.label,
       className = _ref.className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
   var _useConsumer = useConsumer(),
       aValue = _useConsumer.value,
@@ -617,11 +668,11 @@ var Check = function Check(_ref) {
   }), label);
 };
 
-var _excluded$2 = ["label", "name", "options", "isMore"];
+var _excluded$3 = ["label", "name", "options", "isMore"];
 var RadioList = withFilterItem(function (_ref) {
   var name = _ref.name,
       options = _ref.options,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
   var _useConsumer = useConsumer(),
       aValue = _useConsumer.value,
@@ -641,11 +692,11 @@ var RadioList = withFilterItem(function (_ref) {
   }));
 });
 
-var _excluded$1 = ["label", "name", "options", "isMore"];
+var _excluded$2 = ["label", "name", "options", "isMore"];
 var CheckboxList = withFilterItem(function (_ref) {
   var name = _ref.name,
       options = _ref.options,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
   var _useConsumer = useConsumer(),
       aValue = _useConsumer.value,
@@ -671,6 +722,48 @@ var CheckboxList = withFilterItem(function (_ref) {
   }));
 });
 
+var _excluded$1 = ["name", "label", "placeholder", "template", "isMore"];
+
+var withValue = function withValue(WrappedComponent, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  return function (_ref) {
+    var name = _ref.name,
+        label = _ref.label,
+        placeholder = _ref.placeholder,
+        template = _ref.template,
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+
+    var _useConsumer = useConsumer(),
+        aValue = _useConsumer.value,
+        _onChange = _useConsumer.onChange;
+
+    var currentValue = aValue[name];
+    return /*#__PURE__*/React__default["default"].createElement(WrappedComponent, _extends({}, props, {
+      placeholder: options.range ? placeholder || [label, label] : placeholder || label,
+      size: "small",
+      value: currentValue && moment__default["default"](currentValue),
+      onChange: function onChange(value, item) {
+        _onChange(name, {
+          label: lodash.isFunction(template) ? template(item) : options.range ? item.join('~') : item,
+          value: item
+        });
+      }
+    }));
+  };
+};
+
+var DateTime = withFilterItem(withValue(antd.DatePicker));
+DateTime.Month = withFilterItem(withValue(antd.DatePicker.MonthPicker));
+DateTime.Week = withFilterItem(withValue(antd.DatePicker.WeekPicker));
+DateTime.Time = withFilterItem(withValue(antd.DatePicker.TimePicker));
+DateTime.YearPicker = withFilterItem(withValue(antd.DatePicker.YearPicker));
+DateTime.Range = withFilterItem(withValue(antd.DatePicker.RangePicker, {
+  range: true
+}));
+
 var filterNull = function filterNull(item) {
   var target = Object.assign({}, item);
   Object.keys(target).forEach(function (key) {
@@ -724,6 +817,7 @@ var Filter = function Filter(_ref) {
   var value = React.useMemo(function () {
     return filterNull(originValue);
   }, [originValue]);
+  var emitter = useEvent__default["default"]();
 
   var _useState = React.useState(defaultDisplay),
       display = _useState[0],
@@ -750,7 +844,9 @@ var Filter = function Filter(_ref) {
     var _Object$assign;
 
     var target = Object.assign({}, value, (_Object$assign = {}, _Object$assign[name] = item, _Object$assign));
-    onChange(filterNull(target));
+    var output = filterNull(target);
+    emitter.emit('change', output);
+    onChange(output);
   };
 
   var moreFilter = more && more.length > 0 ? /*#__PURE__*/React__default["default"].createElement(antd.Space, {
@@ -774,7 +870,8 @@ var Filter = function Filter(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(Provider$1, {
     value: {
       value: value,
-      onChange: changeHandler
+      onChange: changeHandler,
+      emitter: emitter
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-filter"
@@ -797,7 +894,7 @@ var Filter = function Filter(_ref) {
       var label = _ref2.label;
       return label;
     }).join(",") : item.label);
-  })), /*#__PURE__*/React__default["default"].createElement("div", null, extra))), renderList(isExtra ? basicList : list), moreList.length === 0 ? moreFilter : null), display ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(antd.Divider, {
+  })), /*#__PURE__*/React__default["default"].createElement("div", null, extra))), renderList(isExtra ? basicList : list), moreList.length === 0 || isExtra === false ? moreFilter : null), display && isExtra ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(antd.Divider, {
     className: "react-filter-divider"
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-filter-inner"
@@ -824,7 +921,8 @@ Filter.type = {
   Selector: Selector,
   Check: Check,
   RadioList: RadioList,
-  CheckboxList: CheckboxList
+  CheckboxList: CheckboxList,
+  DateTime: DateTime
 };
 Filter.defaultProps = {
   label: '筛选项',