@kne/react-filter 0.1.14 → 0.1.17

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,8 +18,14 @@ 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 || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -32,7 +38,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -51,21 +56,30 @@ 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$5 = ["label"];
+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)
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, labelHidden ? null : /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-filter-item-label"
   }, label, ":"), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-filter-item-children"
@@ -75,21 +89,31 @@ var FilterItem = function FilterItem(_ref) {
 var withFilterItem = function withFilterItem(WrappedComponent) {
   return function (_ref2) {
     var label = _ref2.label,
-        props = _objectWithoutPropertiesLoose(_ref2, _excluded$5);
+        labelHidden = _ref2.labelHidden,
+        isMore = _ref2.isMore,
+        moreTrigger = _ref2.moreTrigger,
+        props = _objectWithoutPropertiesLoose(_ref2, _excluded$8);
 
     return /*#__PURE__*/React__default["default"].createElement(FilterItem, {
-      label: label
-    }, /*#__PURE__*/React__default["default"].createElement(WrappedComponent, props));
+      label: label,
+      labelHidden: labelHidden,
+      isMore: isMore,
+      moreTrigger: moreTrigger
+    }, /*#__PURE__*/React__default["default"].createElement(WrappedComponent, _extends({}, props, {
+      label: label,
+      isMore: isMore
+    })));
   };
 };
 
-var _excluded$4 = ["value", "label"];
+var _excluded$7 = ["value", "label"];
 var CheckableTag = antd.Tag.CheckableTag;
 var context = React.createContext({});
 var Provider = context.Provider;
 
 var List = function List(_ref) {
   var label = _ref.label,
+      labelHidden = _ref.labelHidden,
       name = _ref.name,
       size = _ref.size,
       children = _ref.children,
@@ -171,7 +195,8 @@ var List = function List(_ref) {
   }();
 
   return /*#__PURE__*/React__default["default"].createElement(FilterItem, {
-    label: label
+    label: label,
+    labelHidden: labelHidden
   }, /*#__PURE__*/React__default["default"].createElement(Provider, {
     value: {
       currentValue: currentValue,
@@ -207,7 +232,7 @@ var List = function List(_ref) {
 List.Item = function (_ref3) {
   var value = _ref3.value,
       label = _ref3.label,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded$4);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded$7);
 
   var _useContext = React.useContext(context),
       currentValue = _useContext.currentValue,
@@ -232,13 +257,18 @@ List.defaultProps = {
   size: 2
 };
 
+var _excluded$6 = ["label", "labelHidden", "name", "size", "isMore"];
 var Item = List.Item;
 
 var City = function City(_ref) {
   var label = _ref.label,
+      labelHidden = _ref.labelHidden,
       name = _ref.name,
       size = _ref.size;
+      _objectWithoutPropertiesLoose(_ref, _excluded$6);
+
   return /*#__PURE__*/React__default["default"].createElement(List, {
+    labelHidden: labelHidden,
     label: label,
     name: name,
     size: size,
@@ -320,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,
@@ -367,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() {
@@ -376,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) {
@@ -410,13 +444,15 @@ 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,
       onSearch = _ref.onSearch,
       _onActiveChange = _ref.onActiveChange,
       startProps = _ref.startProps,
-      endProps = _ref.endProps;
+      endProps = _ref.endProps,
+      placeholder = _ref.placeholder;
 
   var _useState = React.useState(null),
       error = _useState[0],
@@ -440,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,
@@ -475,7 +512,8 @@ var RangeInner = function RangeInner(_ref) {
       },
       onFocus: function onFocus() {
         setActive(true);
-      }
+      },
+      placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder || "请输入"
     })), "~", /*#__PURE__*/React__default["default"].createElement(antd.InputNumber, _extends({
       size: "small"
     }, endProps, {
@@ -487,24 +525,29 @@ var RangeInner = function RangeInner(_ref) {
       },
       onFocus: function onFocus() {
         setActive(true);
-      }
+      },
+      placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder || "请输入"
     }))));
   });
 };
 var Range = withFilterItem(RangeInner);
 
-var _excluded$3 = ["name", "label", "template", "defaultActive", "onBlur", "onSearch", "onActiveChange"];
+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,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      placeholder = _ref.placeholder,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
   return /*#__PURE__*/React__default["default"].createElement(SearchButton, {
     defaultActive: defaultActive,
+    isMore: isMore,
     onBlur: onBlur,
     template: template,
     name: name,
@@ -519,6 +562,7 @@ var TextInner = function TextInner(_ref) {
     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);
@@ -531,10 +575,12 @@ var TextInner = function TextInner(_ref) {
 };
 var Text = withFilterItem(TextInner);
 
-var _excluded$2 = ["name"];
+var _excluded$4 = ["name", "label", "placeholder", "isMore"];
 var SelectorInner = function SelectorInner(_ref) {
   var name = _ref.name,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      label = _ref.label,
+      placeholder = _ref.placeholder,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
   var _useConsumer = useConsumer(),
       aValue = _useConsumer.value,
@@ -542,9 +588,7 @@ var SelectorInner = function SelectorInner(_ref) {
 
   var currentValue = aValue[name];
   return /*#__PURE__*/React__default["default"].createElement(antd.Select, _extends({}, props, {
-    style: {
-      minWidth: "150px"
-    },
+    placeholder: label || placeholder,
     size: "small",
     value: currentValue,
     onChange: function onChange(value, item) {
@@ -554,12 +598,13 @@ var SelectorInner = function SelectorInner(_ref) {
 };
 var Selector = withFilterItem(SelectorInner);
 
-var _excluded$1 = ["name", "label"];
+var _excluded$3 = ["name", "label", "className", "isMore"];
 
 var Check = function Check(_ref) {
   var name = _ref.name,
       label = _ref.label,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+      className = _ref.className,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
   var _useConsumer = useConsumer(),
       aValue = _useConsumer.value,
@@ -567,6 +612,7 @@ var Check = function Check(_ref) {
 
   var currentValue = aValue[name];
   return /*#__PURE__*/React__default["default"].createElement(antd.Checkbox, _extends({}, props, {
+    className: classnames__default["default"]('react-filter-item', className),
     size: "small",
     checked: currentValue,
     onChange: function onChange(e) {
@@ -578,56 +624,59 @@ var Check = function Check(_ref) {
   }), label);
 };
 
-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];
+var _excluded$2 = ["label", "name", "options", "isMore"];
+var RadioList = withFilterItem(function (_ref) {
+  var name = _ref.name,
+      options = _ref.options,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
-    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);
+  var _useConsumer = useConsumer(),
+      aValue = _useConsumer.value,
+      _onChange = _useConsumer.onChange;
 
-  return function (innerProps) {
-    var mapping = {
-      range: RangeButton,
-      text: TextButton,
-      selector: SelectorButton
-    };
-    var ExtraButtonComponent = mapping[type];
+  var currentValue = aValue[name];
+  return /*#__PURE__*/React__default["default"].createElement(antd.Radio.Group, _extends({}, props, {
+    options: options,
+    value: get__default["default"](currentValue, 'value'),
+    onChange: function onChange(e) {
+      var item = options.find(function (item) {
+        return item.value === e.target.value;
+      });
 
-    if (!ExtraButtonComponent) {
-      return null;
+      _onChange(name, item);
     }
+  }));
+});
 
-    return /*#__PURE__*/React__default["default"].createElement(ExtraButtonComponent, _extends({}, props, innerProps));
-  };
-};
+var _excluded$1 = ["label", "name", "options", "isMore"];
+var CheckboxList = withFilterItem(function (_ref) {
+  var name = _ref.name,
+      options = _ref.options,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+
+  var _useConsumer = useConsumer(),
+      aValue = _useConsumer.value,
+      _onChange = _useConsumer.onChange;
+
+  var currentValue = aValue[name];
+  return /*#__PURE__*/React__default["default"].createElement(antd.Checkbox.Group, _extends({}, props, {
+    value: (currentValue || []).map(function (_ref2) {
+      var value = _ref2.value;
+      return value;
+    }),
+    onChange: function onChange(value) {
+      var item = value.map(function (value) {
+        return options.find(function (item) {
+          return item.value === value;
+        });
+      });
+      console.log(item);
+
+      _onChange(name, item);
+    },
+    options: options
+  }));
+});
 
 var filterNull = function filterNull(item) {
   var target = Object.assign({}, item);
@@ -665,19 +714,25 @@ var filterNull = function filterNull(item) {
 
 var Filter = function Filter(_ref) {
   var displayLine = _ref.displayLine,
+      defaultDisplay = _ref.defaultDisplay,
       isExtra = _ref.isExtra,
       list = _ref.list,
       label = _ref.label,
+      labelHidden = _ref.labelHidden,
+      itemLabelHidden = _ref.itemLabelHidden,
       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 () {
     return filterNull(originValue);
   }, [originValue]);
 
-  var _useState = React.useState(false),
+  var _useState = React.useState(defaultDisplay),
       display = _useState[0],
       setDisplay = _useState[1];
 
@@ -687,10 +742,12 @@ var Filter = function Filter(_ref) {
   var renderList = function renderList(list) {
     return list.map(function (item, index) {
       return /*#__PURE__*/React__default["default"].createElement(antd.Space, {
-        key: index
+        key: index,
+        className: "react-filter-line"
       }, item.map(function (item, index) {
         return React.cloneElement(item, {
-          key: index
+          key: index,
+          labelHidden: itemLabelHidden
         });
       }));
     });
@@ -703,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,
@@ -712,7 +787,7 @@ var Filter = function Filter(_ref) {
     className: "react-filter"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-filter-inner"
-  }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(antd.Space, null, /*#__PURE__*/React__default["default"].createElement(FilterItem, {
+  }, /*#__PURE__*/React__default["default"].createElement("div", null, labelHidden ? null : /*#__PURE__*/React__default["default"].createElement(antd.Space, null, /*#__PURE__*/React__default["default"].createElement(FilterItem, {
     className: "react-filter-selected",
     label: label
   }, Object.keys(value).map(function (key) {
@@ -729,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",
@@ -754,20 +829,79 @@ Filter.type = {
   Range: Range,
   Text: Text,
   Selector: Selector,
-  Check: Check
+  Check: Check,
+  RadioList: RadioList,
+  CheckboxList: CheckboxList
 };
 Filter.defaultProps = {
   label: '筛选项',
+  labelHidden: false,
+  itemLabelHidden: false,
   unfoldText: '展开',
   foldText: '收起',
   displayLine: 2,
+  defaultDisplay: false,
   isExtra: true,
   list: [[]],
+  more: [],
+  moreTrigger: 'hover',
+  moreLabel: '更多',
   value: {},
   extra: null,
   onChange: function onChange() {}
 };
 
+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;