@kne/react-filter 0.1.16 → 0.1.17

package/README.md

@@ -29,11 +29,11 @@ npm i --save @kne/react-filter
 
 - 基础示例
 - 展示一个筛选器的普通模式
-- reactFilter(@kne/react-filter),undefined(@kne/react-filter/dist/index.css),_(lodash)
+- reactFilter(@kne/react-filter),_(lodash)
 
 ```jsx
 const {useState} = React;
-const {Filter, createExtraButton} = reactFilter;
+const {default: Filter, createExtraButton} = reactFilter.default;
 
 const {City, List, Range, Text, Selector, Check} = Filter.type;
 const {isNumber} = _;
@@ -43,7 +43,19 @@ const BaseExample = () => {
     console.log(value);
     return <Filter value={value} onChange={(value) => {
         setValue(value);
-    }} list={[[<City label="目前城市" name="currentCity" size={5}/>], [<List label="学历" name="degree" size={1}>
+    }} more={[
+        <Text label="测试字段" name="test1"/>,
+        <Text label="测试字段2" name="test2"/>,
+        <Range label="测试字段3" name="test3"/>,
+        <Selector label="测试字段4" name="test4"
+                  options={[{
+                      label: "英语", value: "en"
+                  }, {
+                      label: "日语", value: "jap"
+                  }, {
+                      label: "法语", value: "fac"
+                  }]}/>
+    ]} list={[[<City label="目前城市" name="currentCity" size={5}/>], [<List label="学历" name="degree" size={1}>
         <List.Item value="0" label="初中"/>
         <List.Item value="1" label="高中"/>
         <List.Item value="2" label="大学专科"/>
@@ -105,7 +117,7 @@ render(<BaseExample/>);
 
 ```jsx
 const {useState} = React;
-const {Filter} = reactFilter;
+const {default: Filter} = reactFilter.default;
 const {default: Space} = space;
 
 const {RadioList, Selector, Text, CheckboxList} = Filter.type;
@@ -178,11 +190,14 @@ render(<Example/>);
 
 ### API
 
-| 属性名      | 说明                                                                           | 类型       | 默认值 |
-|----------|------------------------------------------------------------------------------|----------|-----|
-| value    | 筛选器的值，该组件为一个受控组件                                                             | object   | -   |
-| onChange | 筛选器的值发生改变的时候调用的函数                                                            | function | -   |
-| list     | 筛选器的选项，为一个二维数组，二维数组中的每一个数组为一行，内部数组的每一项为一个筛选选项，筛选选项为Filter.type中的一项或者是自行扩展的选项 | array    | []  |
+| 属性名       | 说明                                                                           | 类型       | 默认值   |
+|-----------|------------------------------------------------------------------------------|----------|-------|
+| value     | 筛选器的值，该组件为一个受控组件                                                             | object   | -     |
+| onChange  | 筛选器的值发生改变的时候调用的函数                                                            | function | -     |
+| list      | 筛选器的选项，为一个二维数组，二维数组中的每一个数组为一行，内部数组的每一项为一个筛选选项，筛选选项为Filter.type中的一项或者是自行扩展的选项 | array    | []    |
+| more      | 筛选项更多选项，为一个一维数组，数组中的每一项为一个筛选项，和list不同的是该筛选项默认为收起状态|array| []    |
+| moreLabel | 更多选项的label|string| 更多    |
+|moreTrigger|更多选项的触发方式，默认为hover触发，页可以设置为click|string| hover |
 
 #### Filter.type
 
@@ -203,6 +218,7 @@ CheckboxList（多选列表）
 |-------|--------------------------------------------------------------|----------|-----|
 |   template    | 将一组数据范围显示成一段用户可阅读的问题的模版，参数为筛选项的值,要求返回一个描述的字符串                | function | -   |
 |placeholder| 当为字符串时前后两个输入框显示同样内容，当为一个数组时，第一个输入框显示数组的第一个值，第二个输入框显示为数组的第二个值 | string&#124;array                                | -        |
+
 #### List
 
 | 属性名      | 说明                      | 类型        | 默认值 |

package/dist/index.css

@@ -11,10 +11,15 @@
   white-space: nowrap;
   line-height: 32px; }
   .react-filter-item .ant-input, .react-filter-item .ant-select {
-    min-width: 88px; }
+    min-width: 150px; }
+
+.react-filter-item-popover .ant-input, .react-filter-item-popover .ant-select {
+  min-width: 150px; }
 
 .react-filter-item-label {
   font-size: 14px; }
+  .react-filter-item-label.is-more {
+    cursor: pointer; }
 
 .react-filter-item-children {
   display: flex;
@@ -45,7 +50,10 @@
       box-shadow: 2px 3px 10px 4px rgba(0, 0, 0, 0.2);
       background: #FFFFFF; }
 
-.react-filter-search-confirm {
+.react-filter-search-confirm.is-more {
+  margin-left: 8px; }
+
+.react-filter-search-confirm:not(.is-more) {
   position: absolute;
   top: 50%;
   right: -10px;

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,eAAe,EAAE;;AAErB;EACE,eAAe,EAAE;;AAEnB;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,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: 88px; }\n\n.react-filter-item-label {\n  font-size: 14px; }\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 {\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;;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"]}

package/dist/index.js

@@ -1,7 +1,7 @@
 var React = require('react');
 var antd = require('antd');
-var reactCitySelect = require('@kne/react-city-select');
 var classnames = require('classnames');
+var reactCitySelect = require('@kne/react-city-select');
 var get = require('lodash/get');
 var isFunction = require('lodash/isFunction');
 var isEqual = require('lodash/isEqual');
@@ -18,6 +18,12 @@ var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
 var useClickOutSide__default = /*#__PURE__*/_interopDefaultLegacy(useClickOutSide);
 var isNumber__default = /*#__PURE__*/_interopDefaultLegacy(isNumber);
 
+var context$1 = React.createContext({});
+var Provider$1 = context$1.Provider;
+var useConsumer = function useConsumer() {
+  return React.useContext(context$1);
+};
+
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -50,19 +56,27 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var context$1 = React.createContext({});
-var Provider$1 = context$1.Provider;
-var useConsumer = function useConsumer() {
-  return React.useContext(context$1);
-};
-
-var _excluded$8 = ["label", "labelHidden"];
+var _excluded$8 = ["label", "labelHidden", "isMore", "moreTrigger"];
 
 var FilterItem = function FilterItem(_ref) {
   var className = _ref.className,
       label = _ref.label,
       labelHidden = _ref.labelHidden,
+      isMore = _ref.isMore,
+      moreTrigger = _ref.moreTrigger,
       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, {
+      content: children,
+      trigger: moreTrigger,
+      placement: "bottom",
+      overlayClassName: "react-filter-item-popover"
+    }, /*#__PURE__*/React__default["default"].createElement("a", null, label)));
+  }
+
   return /*#__PURE__*/React__default["default"].createElement(antd.Space, {
     className: classnames__default["default"]('react-filter-item', className)
   }, labelHidden ? null : /*#__PURE__*/React__default["default"].createElement("div", {
@@ -76,13 +90,18 @@ var withFilterItem = function withFilterItem(WrappedComponent) {
   return function (_ref2) {
     var label = _ref2.label,
         labelHidden = _ref2.labelHidden,
+        isMore = _ref2.isMore,
+        moreTrigger = _ref2.moreTrigger,
         props = _objectWithoutPropertiesLoose(_ref2, _excluded$8);
 
     return /*#__PURE__*/React__default["default"].createElement(FilterItem, {
       label: label,
-      labelHidden: labelHidden
+      labelHidden: labelHidden,
+      isMore: isMore,
+      moreTrigger: moreTrigger
     }, /*#__PURE__*/React__default["default"].createElement(WrappedComponent, _extends({}, props, {
-      label: label
+      label: label,
+      isMore: isMore
     })));
   };
 };
@@ -238,7 +257,7 @@ List.defaultProps = {
   size: 2
 };
 
-var _excluded$6 = ["label", "labelHidden", "name", "size"];
+var _excluded$6 = ["label", "labelHidden", "name", "size", "isMore"];
 var Item = List.Item;
 
 var City = function City(_ref) {
@@ -331,6 +350,7 @@ var City = function City(_ref) {
 var SearchButton = function SearchButton(_ref) {
   var name = _ref.name,
       size = _ref.size,
+      isMore = _ref.isMore,
       template = _ref.template,
       children = _ref.children,
       defaultValue = _ref.defaultValue,
@@ -378,7 +398,7 @@ var SearchButton = function SearchButton(_ref) {
   }, [active]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classnames__default["default"]("react-filter-search-button", {
-      "is-active": active
+      "is-active": active && !isMore
     }),
     ref: ref,
     onMouseEnter: function onMouseEnter() {
@@ -387,14 +407,17 @@ var SearchButton = function SearchButton(_ref) {
     onMouseLeave: function onMouseLeave() {
       active && setActive(false);
     }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "inner"
+  }, /*#__PURE__*/React__default["default"].createElement(antd.Space, {
+    className: "inner",
+    size: 0
   }, /*#__PURE__*/React__default["default"].createElement("div", null, children({
     value: value,
     setValue: setValue,
     setActive: setActive
-  })), active ? /*#__PURE__*/React__default["default"].createElement(antd.Button, {
-    className: "react-filter-search-confirm",
+  })), active || isMore ? /*#__PURE__*/React__default["default"].createElement(antd.Button, {
+    className: classnames__default["default"]("react-filter-search-confirm", {
+      "is-more": isMore
+    }),
     size: "small",
     type: "primary",
     onClick: function onClick(e) {
@@ -421,6 +444,7 @@ SearchButton.defaultProps = {
 var RangeInner = function RangeInner(_ref) {
   var name = _ref.name,
       size = _ref.size,
+      isMore = _ref.isMore,
       defaultActive = _ref.defaultActive,
       template = _ref.template,
       onBlur = _ref.onBlur,
@@ -452,6 +476,7 @@ var RangeInner = function RangeInner(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(SearchButton, {
     size: size,
     template: template,
+    isMore: isMore,
     onBlur: onBlur,
     defaultActive: defaultActive,
     name: name,
@@ -507,10 +532,11 @@ var RangeInner = function RangeInner(_ref) {
 };
 var Range = withFilterItem(RangeInner);
 
-var _excluded$5 = ["name", "label", "template", "defaultActive", "onBlur", "onSearch", "onActiveChange", "placeholder"];
+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,
@@ -521,6 +547,7 @@ var TextInner = function TextInner(_ref) {
 
   return /*#__PURE__*/React__default["default"].createElement(SearchButton, {
     defaultActive: defaultActive,
+    isMore: isMore,
     onBlur: onBlur,
     template: template,
     name: name,
@@ -548,7 +575,7 @@ var TextInner = function TextInner(_ref) {
 };
 var Text = withFilterItem(TextInner);
 
-var _excluded$4 = ["name", "label", "placeholder"];
+var _excluded$4 = ["name", "label", "placeholder", "isMore"];
 var SelectorInner = function SelectorInner(_ref) {
   var name = _ref.name,
       label = _ref.label,
@@ -571,7 +598,7 @@ var SelectorInner = function SelectorInner(_ref) {
 };
 var Selector = withFilterItem(SelectorInner);
 
-var _excluded$3 = ["name", "label", "className"];
+var _excluded$3 = ["name", "label", "className", "isMore"];
 
 var Check = function Check(_ref) {
   var name = _ref.name,
@@ -597,7 +624,7 @@ var Check = function Check(_ref) {
   }), label);
 };
 
-var _excluded$2 = ["label", "name", "options"];
+var _excluded$2 = ["label", "name", "options", "isMore"];
 var RadioList = withFilterItem(function (_ref) {
   var name = _ref.name,
       options = _ref.options,
@@ -608,7 +635,6 @@ var RadioList = withFilterItem(function (_ref) {
       _onChange = _useConsumer.onChange;
 
   var currentValue = aValue[name];
-  console.log(currentValue);
   return /*#__PURE__*/React__default["default"].createElement(antd.Radio.Group, _extends({}, props, {
     options: options,
     value: get__default["default"](currentValue, 'value'),
@@ -622,7 +648,7 @@ var RadioList = withFilterItem(function (_ref) {
   }));
 });
 
-var _excluded$1 = ["label", "name", "options"];
+var _excluded$1 = ["label", "name", "options", "isMore"];
 var CheckboxList = withFilterItem(function (_ref) {
   var name = _ref.name,
       options = _ref.options,
@@ -652,57 +678,6 @@ var CheckboxList = withFilterItem(function (_ref) {
   }));
 });
 
-var _excluded = ["name", "value", "children"],
-    _excluded2 = ["type"];
-var withMoreExtraButton = function withMoreExtraButton(WrappedComponent) {
-  return function (_ref) {
-    var name = _ref.name,
-        children = _ref.children,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-    var _useState = React.useState(false),
-        isEdit = _useState[0],
-        setIsEdit = _useState[1];
-
-    return isEdit ? /*#__PURE__*/React__default["default"].createElement(WrappedComponent, _extends({
-      defaultActive: true
-    }, props, {
-      name: name,
-      onBlur: function onBlur() {
-        setIsEdit(false);
-      }
-    })) : /*#__PURE__*/React__default["default"].createElement(List.Item, {
-      onClick: function onClick(e) {
-        e.stopPropagation();
-        setIsEdit(true);
-      },
-      label: children || "其他"
-    });
-  };
-};
-var RangeButton = withMoreExtraButton(RangeInner);
-var TextButton = withMoreExtraButton(TextInner);
-var SelectorButton = withMoreExtraButton(SelectorInner);
-var createExtraButton = function createExtraButton(_ref2) {
-  var type = _ref2.type,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-
-  return function (innerProps) {
-    var mapping = {
-      range: RangeButton,
-      text: TextButton,
-      selector: SelectorButton
-    };
-    var ExtraButtonComponent = mapping[type];
-
-    if (!ExtraButtonComponent) {
-      return null;
-    }
-
-    return /*#__PURE__*/React__default["default"].createElement(ExtraButtonComponent, _extends({}, props, innerProps));
-  };
-};
-
 var filterNull = function filterNull(item) {
   var target = Object.assign({}, item);
   Object.keys(target).forEach(function (key) {
@@ -748,6 +723,9 @@ var Filter = function Filter(_ref) {
       unfoldText = _ref.unfoldText,
       foldText = _ref.foldText,
       extra = _ref.extra,
+      more = _ref.more,
+      moreTrigger = _ref.moreTrigger,
+      moreLabel = _ref.moreLabel,
       originValue = _ref.value,
       onChange = _ref.onChange;
   var value = React.useMemo(function () {
@@ -782,6 +760,24 @@ var Filter = function Filter(_ref) {
     onChange(filterNull(target));
   };
 
+  var moreFilter = more && more.length > 0 ? /*#__PURE__*/React__default["default"].createElement(antd.Space, {
+    className: "react-filter-line is-more"
+  }, /*#__PURE__*/React__default["default"].createElement(antd.Space, {
+    className: "react-filter-item"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "react-filter-item-label"
+  }, moreLabel, ":"), /*#__PURE__*/React__default["default"].createElement(antd.Space, {
+    className: "react-filter-item-children",
+    split: /*#__PURE__*/React__default["default"].createElement(antd.Divider, {
+      type: "vertical"
+    })
+  }, more.map(function (item, index) {
+    return React.cloneElement(item, {
+      key: index,
+      isMore: true,
+      moreTrigger: moreTrigger
+    });
+  })))) : null;
   return /*#__PURE__*/React__default["default"].createElement(Provider$1, {
     value: {
       value: value,
@@ -808,11 +804,11 @@ 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)), 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 ? moreFilter : null), display ? /*#__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"
-  }, renderList(moreList))) : /*#__PURE__*/React__default["default"].createElement("div", {
+  }, renderList(moreList)), moreList.length > 0 ? moreFilter : null) : /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-filter-divider-close"
   }), isExtra && list.length > displayLine ? /*#__PURE__*/React__default["default"].createElement(antd.Row, {
     className: "react-filter-switch-btn",
@@ -826,6 +822,7 @@ var Filter = function Filter(_ref) {
     }
   }, display ? foldText : unfoldText))) : null));
 };
+
 Filter.type = {
   City: City,
   List: List,
@@ -846,12 +843,65 @@ Filter.defaultProps = {
   defaultDisplay: false,
   isExtra: true,
   list: [[]],
+  more: [],
+  moreTrigger: 'hover',
+  moreLabel: '更多',
   value: {},
   extra: null,
   onChange: function onChange() {}
 };
 
-exports.Filter = Filter;
+var _excluded = ["name", "value", "children"],
+    _excluded2 = ["type"];
+var withMoreExtraButton = function withMoreExtraButton(WrappedComponent) {
+  return function (_ref) {
+    var name = _ref.name,
+        children = _ref.children,
+        props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+    var _useState = React.useState(false),
+        isEdit = _useState[0],
+        setIsEdit = _useState[1];
+
+    return isEdit ? /*#__PURE__*/React__default["default"].createElement(WrappedComponent, _extends({
+      defaultActive: true
+    }, props, {
+      name: name,
+      onBlur: function onBlur() {
+        setIsEdit(false);
+      }
+    })) : /*#__PURE__*/React__default["default"].createElement(List.Item, {
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        setIsEdit(true);
+      },
+      label: children || "其他"
+    });
+  };
+};
+var RangeButton = withMoreExtraButton(RangeInner);
+var TextButton = withMoreExtraButton(TextInner);
+var SelectorButton = withMoreExtraButton(SelectorInner);
+var createExtraButton = function createExtraButton(_ref2) {
+  var type = _ref2.type,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+
+  return function (innerProps) {
+    var mapping = {
+      range: RangeButton,
+      text: TextButton,
+      selector: SelectorButton
+    };
+    var ExtraButtonComponent = mapping[type];
+
+    if (!ExtraButtonComponent) {
+      return null;
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(ExtraButtonComponent, _extends({}, props, innerProps));
+  };
+};
+
 exports.FilterItem = FilterItem;
 exports.SearchButton = SearchButton;
 exports.createExtraButton = createExtraButton;