@kne/react-filter 0.1.15 → 0.1.18

package/dist/index.modern.js

@@ -1,15 +1,19 @@
 import React, { createContext, useContext, useState, useRef, useEffect, useMemo, cloneElement } from 'react';
-import { Space, Tag, message, Button, Tooltip, InputNumber, Input, Select, Checkbox, Divider, Row, Col } from 'antd';
-import { createCitySelect, apis, RemoteData, DisplayCity } from '@kne/react-city-select';
+import { Popover, Space, Tag, message, Button, Tooltip, InputNumber, Input, Select, Checkbox, Radio, Divider, Row, Col } from 'antd';
 import classnames from 'classnames';
-import get from 'lodash/get';
-import isFunction from 'lodash/isFunction';
-import isEqual from 'lodash/isEqual';
+import { createCitySelect, apis, RemoteData, DisplayCity } from '@kne/react-city-select';
+import { get, isFunction, isEqual, isNumber } from 'lodash';
 import useClickOutSide from '@kne/use-click-outside';
-import isNumber from 'lodash/isNumber';
+
+const context$1 = createContext({});
+const {
+  Consumer,
+  Provider: Provider$1
+} = context$1;
+const useConsumer = () => 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];
 
@@ -22,7 +26,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -41,23 +44,30 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const context$1 = createContext({});
-const {
-  Consumer,
-  Provider: Provider$1
-} = context$1;
-const useConsumer = () => useContext(context$1);
-
-const _excluded$5 = ["label"];
+const _excluded$8 = ["label", "labelHidden", "isMore", "moreTrigger"];
 
 const FilterItem = ({
   className,
   label,
+  labelHidden,
+  isMore,
+  moreTrigger,
   children
 }) => {
+  if (isMore) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames("react-filter-item-label", "is-more", className)
+    }, /*#__PURE__*/React.createElement(Popover, {
+      content: children,
+      trigger: moreTrigger,
+      placement: "bottom",
+      overlayClassName: "react-filter-item-popover"
+    }, /*#__PURE__*/React.createElement("a", null, label)));
+  }
+
   return /*#__PURE__*/React.createElement(Space, {
     className: classnames('react-filter-item', className)
-  }, /*#__PURE__*/React.createElement("div", {
+  }, labelHidden ? null : /*#__PURE__*/React.createElement("div", {
     className: "react-filter-item-label"
   }, label, ":"), /*#__PURE__*/React.createElement("div", {
     className: "react-filter-item-children"
@@ -66,16 +76,25 @@ const FilterItem = ({
 
 const withFilterItem = WrappedComponent => _ref => {
   let {
-    label
+    label,
+    labelHidden,
+    isMore,
+    moreTrigger
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
 
   return /*#__PURE__*/React.createElement(FilterItem, {
-    label: label
-  }, /*#__PURE__*/React.createElement(WrappedComponent, props));
+    label: label,
+    labelHidden: labelHidden,
+    isMore: isMore,
+    moreTrigger: moreTrigger
+  }, /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
+    label: label,
+    isMore: isMore
+  })));
 };
 
-const _excluded$4 = ["value", "label"];
+const _excluded$7 = ["value", "label"];
 const {
   CheckableTag
 } = Tag;
@@ -86,11 +105,13 @@ const {
 
 const List = ({
   label,
+  labelHidden,
   name,
   size,
   children,
   options,
-  more
+  more,
+  isMore
 }) => {
   const {
     value,
@@ -163,7 +184,8 @@ const List = ({
   })();
 
   return /*#__PURE__*/React.createElement(FilterItem, {
-    label: label
+    label: label,
+    labelHidden: labelHidden
   }, /*#__PURE__*/React.createElement(Provider, {
     value: {
       currentValue,
@@ -203,7 +225,7 @@ List.Item = _ref => {
     value,
     label
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
   const {
     currentValue,
@@ -226,16 +248,22 @@ List.defaultProps = {
   size: 2
 };
 
+const _excluded$6 = ["label", "labelHidden", "name", "size", "isMore"];
 const {
   Item
 } = List;
 
-const City = ({
-  label,
-  name,
-  size
-}) => {
+const City = _ref => {
+  let {
+    label,
+    labelHidden,
+    name,
+    size
+  } = _ref;
+      _objectWithoutPropertiesLoose(_ref, _excluded$6);
+
   return /*#__PURE__*/React.createElement(List, {
+    labelHidden: labelHidden,
     label: label,
     name: name,
     size: size,
@@ -304,6 +332,7 @@ const City = ({
 const SearchButton = ({
   name,
   size,
+  isMore,
   template,
   children,
   defaultValue,
@@ -339,7 +368,7 @@ const SearchButton = ({
   }, [active]);
   return /*#__PURE__*/React.createElement("div", {
     className: classnames("react-filter-search-button", {
-      "is-active": active
+      "is-active": active && !isMore
     }),
     ref: ref,
     onMouseEnter: () => {
@@ -348,14 +377,17 @@ const SearchButton = ({
     onMouseLeave: () => {
       active && setActive(false);
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "inner"
+  }, /*#__PURE__*/React.createElement(Space, {
+    className: "inner",
+    size: 0
   }, /*#__PURE__*/React.createElement("div", null, children({
     value,
     setValue,
     setActive
-  })), active ? /*#__PURE__*/React.createElement(Button, {
-    className: "react-filter-search-confirm",
+  })), active || isMore ? /*#__PURE__*/React.createElement(Button, {
+    className: classnames("react-filter-search-confirm", {
+      "is-more": isMore
+    }),
     size: "small",
     type: "primary",
     onClick: e => {
@@ -382,13 +414,15 @@ SearchButton.defaultProps = {
 const RangeInner = ({
   name,
   size,
+  isMore,
   defaultActive,
   template,
   onBlur,
   onSearch,
   onActiveChange,
   startProps,
-  endProps
+  endProps,
+  placeholder
 }) => {
   const [error, setError] = useState(null);
 
@@ -410,6 +444,7 @@ const RangeInner = ({
   return /*#__PURE__*/React.createElement(SearchButton, {
     size: size,
     template: template,
+    isMore: isMore,
     onBlur: onBlur,
     defaultActive: defaultActive,
     name: name,
@@ -445,7 +480,8 @@ const RangeInner = ({
     },
     onFocus: () => {
       setActive(true);
-    }
+    },
+    placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder || "请输入"
   })), "~", /*#__PURE__*/React.createElement(InputNumber, _extends({
     size: "small"
   }, endProps, {
@@ -457,25 +493,30 @@ const RangeInner = ({
     },
     onFocus: () => {
       setActive(true);
-    }
+    },
+    placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder || "请输入"
   })))));
 };
 const Range = withFilterItem(RangeInner);
 
-const _excluded$3 = ["name", "label", "template", "defaultActive", "onBlur", "onSearch", "onActiveChange"];
+const _excluded$5 = ["name", "label", "isMore", "template", "defaultActive", "onBlur", "onSearch", "onActiveChange", "placeholder"];
 const TextInner = _ref => {
   let {
     name,
+    label,
+    isMore,
     template,
     defaultActive,
     onBlur,
     onSearch,
-    onActiveChange
+    onActiveChange,
+    placeholder
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
   return /*#__PURE__*/React.createElement(SearchButton, {
     defaultActive: defaultActive,
+    isMore: isMore,
     onBlur: onBlur,
     template: template,
     name: name,
@@ -490,6 +531,7 @@ const TextInner = _ref => {
   }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, _extends({
     size: "small"
   }, props, {
+    placeholder: placeholder || label,
     value: value,
     onChange: e => {
       setValue(e.target.value);
@@ -501,12 +543,14 @@ const TextInner = _ref => {
 };
 const Text = withFilterItem(TextInner);
 
-const _excluded$2 = ["name"];
+const _excluded$4 = ["name", "label", "placeholder", "isMore"];
 const SelectorInner = _ref => {
   let {
-    name
+    name,
+    label,
+    placeholder
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
   const {
     value: aValue,
@@ -514,9 +558,7 @@ const SelectorInner = _ref => {
   } = useConsumer();
   const currentValue = aValue[name];
   return /*#__PURE__*/React.createElement(Select, _extends({}, props, {
-    style: {
-      minWidth: "150px"
-    },
+    placeholder: label || placeholder,
     size: "small",
     value: currentValue,
     onChange: (value, item) => {
@@ -526,14 +568,15 @@ const SelectorInner = _ref => {
 };
 const Selector = withFilterItem(SelectorInner);
 
-const _excluded$1 = ["name", "label"];
+const _excluded$3 = ["name", "label", "className", "isMore"];
 
 const Check = _ref => {
   let {
     name,
-    label
+    label,
+    className
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
   const {
     value: aValue,
@@ -541,6 +584,7 @@ const Check = _ref => {
   } = useConsumer();
   const currentValue = aValue[name];
   return /*#__PURE__*/React.createElement(Checkbox, _extends({}, props, {
+    className: classnames('react-filter-item', className),
     size: "small",
     checked: currentValue,
     onChange: e => {
@@ -552,55 +596,56 @@ const Check = _ref => {
   }), label);
 };
 
-const _excluded = ["name", "value", "children"],
-      _excluded2 = ["type"];
-const withMoreExtraButton = WrappedComponent => _ref => {
+const _excluded$2 = ["label", "name", "options", "isMore"];
+const RadioList = withFilterItem(_ref => {
   let {
     name,
-    children
+    options
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
-  const [isEdit, setIsEdit] = useState(false);
-  return isEdit ? /*#__PURE__*/React.createElement(WrappedComponent, _extends({
-    defaultActive: true
-  }, props, {
-    name: name,
-    onBlur: () => {
-      setIsEdit(false);
+  const {
+    value: aValue,
+    onChange
+  } = useConsumer();
+  const currentValue = aValue[name];
+  return /*#__PURE__*/React.createElement(Radio.Group, _extends({}, props, {
+    options: options,
+    value: get(currentValue, 'value'),
+    onChange: e => {
+      const item = options.find(item => item.value === e.target.value);
+      onChange(name, item);
     }
-  })) : /*#__PURE__*/React.createElement(List.Item, {
-    onClick: e => {
-      e.stopPropagation();
-      setIsEdit(true);
-    },
-    label: children || "其他"
-  });
-};
-const RangeButton = withMoreExtraButton(RangeInner);
-const TextButton = withMoreExtraButton(TextInner);
-const SelectorButton = withMoreExtraButton(SelectorInner);
-const createExtraButton = _ref2 => {
-  let {
-    type
-  } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-
-  return innerProps => {
-    const mapping = {
-      range: RangeButton,
-      text: TextButton,
-      selector: SelectorButton
-    };
-    const ExtraButtonComponent = mapping[type];
+  }));
+});
 
-    if (!ExtraButtonComponent) {
-      return null;
-    }
+const _excluded$1 = ["label", "name", "options", "isMore"];
+const CheckboxList = withFilterItem(_ref => {
+  let {
+    name,
+    options
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
-    return /*#__PURE__*/React.createElement(ExtraButtonComponent, _extends({}, props, innerProps));
-  };
-};
+  const {
+    value: aValue,
+    onChange
+  } = useConsumer();
+  const currentValue = aValue[name];
+  return /*#__PURE__*/React.createElement(Checkbox.Group, _extends({}, props, {
+    value: (currentValue || []).map(({
+      value
+    }) => value),
+    onChange: value => {
+      const item = value.map(value => {
+        return options.find(item => item.value === value);
+      });
+      console.log(item);
+      onChange(name, item);
+    },
+    options: options
+  }));
+});
 
 const filterNull = item => {
   const target = Object.assign({}, item);
@@ -638,9 +683,14 @@ const Filter = ({
   isExtra,
   list,
   label,
+  labelHidden,
+  itemLabelHidden,
   unfoldText,
   foldText,
   extra,
+  more,
+  moreTrigger,
+  moreLabel,
   value: originValue,
   onChange
 }) => {
@@ -653,9 +703,11 @@ const Filter = ({
 
   const renderList = list => list.map((item, index) => {
     return /*#__PURE__*/React.createElement(Space, {
-      key: index
+      key: index,
+      className: "react-filter-line"
     }, item.map((item, index) => cloneElement(item, {
-      key: index
+      key: index,
+      labelHidden: itemLabelHidden
     })));
   });
 
@@ -666,6 +718,22 @@ const Filter = ({
     onChange(filterNull(target));
   };
 
+  const moreFilter = more && more.length > 0 ? /*#__PURE__*/React.createElement(Space, {
+    className: "react-filter-line is-more"
+  }, /*#__PURE__*/React.createElement(Space, {
+    className: "react-filter-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "react-filter-item-label"
+  }, moreLabel, ":"), /*#__PURE__*/React.createElement(Space, {
+    className: "react-filter-item-children",
+    split: /*#__PURE__*/React.createElement(Divider, {
+      type: "vertical"
+    })
+  }, more.map((item, index) => cloneElement(item, {
+    key: index,
+    isMore: true,
+    moreTrigger
+  }))))) : null;
   return /*#__PURE__*/React.createElement(Provider$1, {
     value: {
       value,
@@ -675,7 +743,7 @@ const Filter = ({
     className: "react-filter"
   }, /*#__PURE__*/React.createElement("div", {
     className: "react-filter-inner"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(FilterItem, {
+  }, /*#__PURE__*/React.createElement("div", null, labelHidden ? null : /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(FilterItem, {
     className: "react-filter-selected",
     label: label
   }, Object.keys(value).map(key => {
@@ -691,11 +759,11 @@ const Filter = ({
     }, Array.isArray(item) ? item.map(({
       label
     }) => label).join(",") : item.label);
-  })), /*#__PURE__*/React.createElement("div", null, extra))), renderList(isExtra ? basicList : list)), display ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
+  })), /*#__PURE__*/React.createElement("div", null, extra))), renderList(isExtra ? basicList : list), moreList.length === 0 ? moreFilter : null), display ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
     className: "react-filter-divider"
   }), /*#__PURE__*/React.createElement("div", {
     className: "react-filter-inner"
-  }, renderList(moreList))) : /*#__PURE__*/React.createElement("div", {
+  }, renderList(moreList)), moreList.length > 0 ? moreFilter : null) : /*#__PURE__*/React.createElement("div", {
     className: "react-filter-divider-close"
   }), isExtra && list.length > displayLine ? /*#__PURE__*/React.createElement(Row, {
     className: "react-filter-switch-btn",
@@ -714,20 +782,77 @@ Filter.type = {
   Range,
   Text,
   Selector,
-  Check
+  Check,
+  RadioList,
+  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: () => {}
 };
 
+const _excluded = ["name", "value", "children"],
+      _excluded2 = ["type"];
+const withMoreExtraButton = WrappedComponent => _ref => {
+  let {
+    name,
+    children
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  const [isEdit, setIsEdit] = useState(false);
+  return isEdit ? /*#__PURE__*/React.createElement(WrappedComponent, _extends({
+    defaultActive: true
+  }, props, {
+    name: name,
+    onBlur: () => {
+      setIsEdit(false);
+    }
+  })) : /*#__PURE__*/React.createElement(List.Item, {
+    onClick: e => {
+      e.stopPropagation();
+      setIsEdit(true);
+    },
+    label: children || "其他"
+  });
+};
+const RangeButton = withMoreExtraButton(RangeInner);
+const TextButton = withMoreExtraButton(TextInner);
+const SelectorButton = withMoreExtraButton(SelectorInner);
+const createExtraButton = _ref2 => {
+  let {
+    type
+  } = _ref2,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+
+  return innerProps => {
+    const mapping = {
+      range: RangeButton,
+      text: TextButton,
+      selector: SelectorButton
+    };
+    const ExtraButtonComponent = mapping[type];
+
+    if (!ExtraButtonComponent) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement(ExtraButtonComponent, _extends({}, props, innerProps));
+  };
+};
+
 export { FilterItem, SearchButton, createExtraButton, Filter as default, useConsumer as useFilterContext, withFilterItem, withMoreExtraButton };
 //# sourceMappingURL=index.modern.js.map