@kne/react-filter 0.1.0

package/dist/index.js

@@ -0,0 +1,726 @@
+var React = require('react');
+var antd = require('antd');
+var reactCitySelect = require('@kne/react-city-select');
+var get = require('lodash/get');
+var isFunction = require('lodash/isFunction');
+var isEqual = require('lodash/isEqual');
+var useClickOutSide = require('@kne/use-click-outside');
+var classnames = require('classnames');
+var isNumber = require('lodash/isNumber');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
+var isFunction__default = /*#__PURE__*/_interopDefaultLegacy(isFunction);
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+var useClickOutSide__default = /*#__PURE__*/_interopDefaultLegacy(useClickOutSide);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var isNumber__default = /*#__PURE__*/_interopDefaultLegacy(isNumber);
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  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 FilterItem = function FilterItem(_ref) {
+  var label = _ref.label,
+      children = _ref.children;
+  return /*#__PURE__*/React__default["default"].createElement(antd.Space, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "react-filter-item-label"
+  }, label, ":"), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "react-filter-item-children"
+  }, children));
+};
+
+var withFilterItem = function withFilterItem(WrappedComponent) {
+  return function (_ref2) {
+    var label = _ref2.label,
+        props = _objectWithoutPropertiesLoose(_ref2, _excluded$5);
+
+    return /*#__PURE__*/React__default["default"].createElement(FilterItem, {
+      label: label
+    }, /*#__PURE__*/React__default["default"].createElement(WrappedComponent, props));
+  };
+};
+
+var _excluded$4 = ["value", "label"];
+var CheckableTag = antd.Tag.CheckableTag;
+var context = React.createContext({});
+var Provider = context.Provider;
+
+var List = function List(_ref) {
+  var label = _ref.label,
+      name = _ref.name,
+      size = _ref.size,
+      children = _ref.children,
+      options = _ref.options,
+      more = _ref.more;
+
+  var _useConsumer = useConsumer(),
+      value = _useConsumer.value,
+      onChange = _useConsumer.onChange;
+
+  var currentValue = function () {
+    var originValue = get__default["default"](value, name);
+
+    if (size === 1) {
+      return originValue !== void 0 ? [originValue] : [];
+    } else {
+      return originValue || [];
+    }
+  }();
+
+  var changeHandler = function changeHandler(value) {
+    if (size === 1) {
+      return onChange(name, value[0]);
+    } else {
+      return onChange(name, value);
+    }
+  };
+
+  var createCheckedChangeHandler = function createCheckedChangeHandler(value) {
+    return function (checked) {
+      if (checked) {
+        var newList = currentValue.slice(0);
+
+        if (currentValue.length < size) {
+          newList.push(value);
+        }
+
+        if (currentValue.length === size && size === 1) {
+          newList = [value];
+        }
+
+        if (currentValue.length >= size && size > 1) {
+          antd.message.error("\u6700\u591A\u9009\u62E9" + size + "\u4E2A");
+          return;
+        }
+
+        changeHandler(newList);
+      } else {
+        var _newList = currentValue.slice(0);
+
+        _newList.splice(currentValue.indexOf(value), 1);
+
+        changeHandler(_newList);
+      }
+    };
+  };
+
+  var computedChildren = function () {
+    if (Array.isArray(options)) {
+      return options.map(function (_ref2) {
+        var label = _ref2.label,
+            value = _ref2.value;
+        return /*#__PURE__*/React__default["default"].createElement(List.Item, {
+          key: value,
+          value: value,
+          label: label
+        });
+      });
+    }
+
+    if (isFunction__default["default"](children)) {
+      return children({
+        value: currentValue,
+        onChange: changeHandler
+      });
+    }
+
+    return children;
+  }();
+
+  return /*#__PURE__*/React__default["default"].createElement(FilterItem, {
+    label: label
+  }, /*#__PURE__*/React__default["default"].createElement(Provider, {
+    value: {
+      currentValue: currentValue,
+      createCheckedChangeHandler: createCheckedChangeHandler
+    }
+  }, computedChildren, more ? function () {
+    if (isFunction__default["default"](more)) {
+      return more({
+        name: name,
+        size: size,
+        label: label,
+        value: currentValue,
+        onChange: changeHandler
+      });
+    }
+
+    var children = more.children,
+        _onClick = more.onClick;
+    return /*#__PURE__*/React__default["default"].createElement(List.Item, _extends({}, more, {
+      onClick: function onClick(e) {
+        _onClick({
+          name: name,
+          label: label,
+          value: currentValue,
+          onChange: changeHandler
+        }, e);
+      },
+      label: children || "其他"
+    }));
+  }() : null));
+};
+
+List.Item = function (_ref3) {
+  var value = _ref3.value,
+      label = _ref3.label,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded$4);
+
+  var _useContext = React.useContext(context),
+      currentValue = _useContext.currentValue,
+      createCheckedChangeHandler = _useContext.createCheckedChangeHandler;
+
+  var itemProps = {};
+
+  if (value !== void 0) {
+    itemProps.checked = currentValue.findIndex(function (item) {
+      return isEqual__default["default"](item.value, value);
+    }) > -1;
+    itemProps.onChange = createCheckedChangeHandler({
+      label: label,
+      value: value
+    });
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(CheckableTag, _extends({}, props, itemProps), label);
+};
+
+List.defaultProps = {
+  size: 2
+};
+
+var Item = List.Item;
+
+var City = function City(_ref) {
+  var label = _ref.label,
+      name = _ref.name,
+      size = _ref.size;
+  return /*#__PURE__*/React__default["default"].createElement(List, {
+    label: label,
+    name: name,
+    size: size,
+    more: {
+      children: "其他",
+      onClick: function onClick(_ref2) {
+        var value = _ref2.value,
+            _onChange = _ref2.onChange;
+        reactCitySelect.createCitySelect({
+          size: size,
+          defaultValue: value.map(function (_ref3) {
+            var value = _ref3.value;
+            return value;
+          }),
+          onChange: function onChange(value) {
+            Promise.all(value.map(function (id) {
+              return reactCitySelect.apis.getCity(id).then(function (_ref4) {
+                var city = _ref4.city;
+                return {
+                  label: city.name,
+                  value: city.code
+                };
+              });
+            })).then(function (value) {
+              return _onChange(value);
+            });
+          }
+        });
+      }
+    }
+  }, function (_ref5) {
+    var currentValue = _ref5.value;
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(reactCitySelect.RemoteData, {
+      loader: reactCitySelect.apis.getChinaHotCities
+    }, function (data) {
+      var otherList = currentValue.filter(function (_ref6) {
+        var code = _ref6.value;
+        return !data.find(function (item) {
+          return item.code === code;
+        });
+      });
+      var extraLength = 0;
+      data.forEach(function (item, index) {
+        if (currentValue.findIndex(function (_ref7) {
+          var value = _ref7.value;
+          return value === item.code;
+        }) > -1 && index >= data.length - otherList.length) {
+          extraLength += 1;
+        }
+      });
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, otherList.map(function (_ref8) {
+        var code = _ref8.value;
+        return /*#__PURE__*/React__default["default"].createElement(reactCitySelect.DisplayCity, {
+          id: code,
+          key: code
+        }, function (_ref9) {
+          var item = _ref9.city;
+          return /*#__PURE__*/React__default["default"].createElement(Item, {
+            value: code,
+            label: item.name
+          });
+        });
+      }), data.filter(function (item, index) {
+        return currentValue.findIndex(function (_ref10) {
+          var value = _ref10.value;
+          return value === item.code;
+        }) > -1 || index < data.length - otherList.length - extraLength;
+      }).map(function (item) {
+        return /*#__PURE__*/React__default["default"].createElement(Item, {
+          key: item.code,
+          value: item.code,
+          label: item.name
+        });
+      }));
+    }));
+  });
+};
+
+var SearchButton = function SearchButton(_ref) {
+  var name = _ref.name,
+      size = _ref.size,
+      template = _ref.template,
+      children = _ref.children,
+      defaultValue = _ref.defaultValue,
+      defaultActive = _ref.defaultActive,
+      onSearch = _ref.onSearch,
+      onBeforeSearch = _ref.onBeforeSearch,
+      onActiveChange = _ref.onActiveChange,
+      buttonText = _ref.buttonText;
+
+  var _useConsumer = useConsumer(),
+      aValue = _useConsumer.value,
+      onChange = _useConsumer.onChange;
+
+  var currentValue = aValue[name];
+
+  var _useState = React.useState(defaultValue || get__default["default"](currentValue, "value")),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  var _useState2 = React.useState(defaultActive),
+      active = _useState2[0],
+      setActive = _useState2[1];
+
+  var withTemplate = function withTemplate(value) {
+    return {
+      value: value,
+      label: isFunction__default["default"](template) ? template(value) : value.toString()
+    };
+  };
+
+  var ref = useClickOutSide__default["default"](function () {
+    if (!active) {
+      return;
+    }
+
+    setValue(get__default["default"](currentValue, "value"));
+    setActive(false);
+  });
+  var activeChangeRef = React.useRef(onActiveChange);
+  activeChangeRef.current = onActiveChange;
+  React.useEffect(function () {
+    activeChangeRef.current && activeChangeRef.current(active);
+  }, [active]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classnames__default["default"]("react-filter-search-button", {
+      "is-active": active
+    }),
+    ref: ref
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "inner"
+  }, /*#__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",
+    size: "small",
+    type: "primary",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+
+      if (onBeforeSearch && onBeforeSearch(value) === false) {
+        return;
+      }
+
+      onChange(name, Number.isInteger(size) && size > 1 ? [withTemplate(value)] : withTemplate(value));
+      setActive(false);
+      onSearch && onSearch({
+        value: value
+      });
+    }
+  }, buttonText) : null));
+};
+
+SearchButton.defaultProps = {
+  defaultActive: false,
+  buttonText: "确定"
+};
+
+var RangeInner = function RangeInner(_ref) {
+  var name = _ref.name,
+      size = _ref.size,
+      defaultActive = _ref.defaultActive,
+      template = _ref.template,
+      onSearch = _ref.onSearch,
+      _onActiveChange = _ref.onActiveChange,
+      startProps = _ref.startProps,
+      endProps = _ref.endProps;
+
+  var _useState = React.useState(null),
+      error = _useState[0],
+      setError = _useState[1];
+
+  var check = function check(value) {
+    setError(null);
+
+    if (!Array.isArray(value)) {
+      return false;
+    }
+
+    if (value[0] === null && value[1] === null) {
+      setError("最大值和最小值不能同时为空");
+      return false;
+    }
+
+    if (isNumber__default["default"](value[1]) && value[0] > value[1]) {
+      setError("最大值不能小于最小值");
+      return false;
+    }
+
+    return true;
+  };
+
+  return /*#__PURE__*/React__default["default"].createElement(SearchButton, {
+    size: size,
+    template: template,
+    defaultActive: defaultActive,
+    name: name,
+    onSearch: onSearch,
+    onBeforeSearch: function onBeforeSearch(value) {
+      return check(value);
+    },
+    onActiveChange: function onActiveChange(active) {
+      if (!active) {
+        setError(null);
+      }
+
+      _onActiveChange && _onActiveChange(active);
+    }
+  }, function (_ref2) {
+    var value = _ref2.value,
+        setValue = _ref2.setValue,
+        setActive = _ref2.setActive;
+    return /*#__PURE__*/React__default["default"].createElement(antd.Tooltip, {
+      visible: !!error,
+      title: error,
+      placement: "bottomRight"
+    }, /*#__PURE__*/React__default["default"].createElement(antd.Space, {
+      size: "small"
+    }, /*#__PURE__*/React__default["default"].createElement(antd.InputNumber, _extends({
+      size: "small"
+    }, startProps, {
+      value: get__default["default"](value, 0),
+      onChange: function onChange(inputValue) {
+        var target = [inputValue, get__default["default"](value, 1)];
+        check(target);
+        setValue(target);
+      },
+      onFocus: function onFocus() {
+        setActive(true);
+      }
+    })), "~", /*#__PURE__*/React__default["default"].createElement(antd.InputNumber, _extends({
+      size: "small"
+    }, endProps, {
+      value: get__default["default"](value, 1),
+      onChange: function onChange(inputValue) {
+        var target = [get__default["default"](value, 0), inputValue];
+        check(target);
+        setValue(target);
+      },
+      onFocus: function onFocus() {
+        setActive(true);
+      }
+    }))));
+  });
+};
+var Range = withFilterItem(RangeInner);
+
+var _excluded$3 = ["name", "label", "template", "defaultActive", "onSearch", "onActiveChange"];
+var TextInner = function TextInner(_ref) {
+  var name = _ref.name,
+      template = _ref.template,
+      defaultActive = _ref.defaultActive,
+      onSearch = _ref.onSearch,
+      _onActiveChange = _ref.onActiveChange,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+
+  return /*#__PURE__*/React__default["default"].createElement(SearchButton, {
+    defaultActive: defaultActive,
+    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, {
+      value: value,
+      onChange: function onChange(e) {
+        setValue(e.target.value);
+      },
+      onFocus: function onFocus() {
+        setActive(true);
+      }
+    })));
+  });
+};
+var Text = withFilterItem(TextInner);
+
+var _excluded$2 = ["name"];
+var SelectorInner = function SelectorInner(_ref) {
+  var name = _ref.name,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+
+  var _useConsumer = useConsumer(),
+      aValue = _useConsumer.value,
+      _onChange = _useConsumer.onChange;
+
+  var currentValue = aValue[name];
+  return /*#__PURE__*/React__default["default"].createElement(antd.Select, _extends({}, props, {
+    style: {
+      minWidth: "150px"
+    },
+    size: "small",
+    value: currentValue,
+    onChange: function onChange(value, item) {
+      _onChange(name, item);
+    }
+  }));
+};
+var Selector = withFilterItem(SelectorInner);
+
+var _excluded$1 = ["name", "label"];
+
+var Check = function Check(_ref) {
+  var name = _ref.name,
+      label = _ref.label,
+      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, _extends({}, props, {
+    size: "small",
+    checked: currentValue,
+    onChange: function onChange(e) {
+      _onChange(name, e.target.checked ? {
+        value: true,
+        label: label
+      } : null);
+    }
+  }), 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];
+
+    return isEdit ? /*#__PURE__*/React__default["default"].createElement(WrappedComponent, _extends({
+      defaultActive: true
+    }, props, {
+      name: name,
+      onActiveChange: function onActiveChange(active) {
+        if (active === false) {
+          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 Filter = function Filter(_ref) {
+  var displayLine = _ref.displayLine,
+      list = _ref.list,
+      value = _ref.value,
+      onChange = _ref.onChange;
+
+  var _useState = React.useState(false),
+      display = _useState[0],
+      setDisplay = _useState[1];
+
+  var basicList = list.slice(0, displayLine),
+      moreList = list.slice(displayLine);
+
+  var renderList = function renderList(list) {
+    return list.map(function (item, index) {
+      return /*#__PURE__*/React__default["default"].createElement(antd.Space, {
+        key: index
+      }, item.map(function (item, index) {
+        return React.cloneElement(item, {
+          key: index
+        });
+      }));
+    });
+  };
+
+  var changeHandler = function changeHandler(name, item) {
+    var _Object$assign;
+
+    var target = Object.assign({}, value, (_Object$assign = {}, _Object$assign[name] = item, _Object$assign));
+    Object.keys(target).forEach(function (key) {
+      var item = target[key];
+
+      if (item === void 0 || item === null) {
+        delete target[key];
+      }
+
+      if (Array.isArray(item) && item.length === 0) {
+        delete target[key];
+      }
+    });
+    onChange(target);
+  };
+
+  return /*#__PURE__*/React__default["default"].createElement(Provider$1, {
+    value: {
+      value: value,
+      onChange: changeHandler
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(antd.Space, {
+    className: "space-full",
+    direction: "vertical"
+  }, /*#__PURE__*/React__default["default"].createElement(FilterItem, {
+    label: "\u7B5B\u9009\u9879"
+  }, Object.keys(value).map(function (key) {
+    var item = value[key];
+    if (!item) return null;
+    if (Array.isArray(item) && item.length === 0) return null;
+    return /*#__PURE__*/React__default["default"].createElement(antd.Tag, {
+      key: key,
+      closable: true,
+      onClose: function onClose() {
+        changeHandler(key, null);
+      }
+    }, Array.isArray(item) ? item.map(function (_ref2) {
+      var label = _ref2.label;
+      return label;
+    }).join(",") : item.label);
+  })), renderList(basicList), display ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(antd.Divider, {
+    className: "react-filter-divider"
+  }), renderList(moreList)) : null, /*#__PURE__*/React__default["default"].createElement(antd.Row, {
+    justify: "end"
+  }, /*#__PURE__*/React__default["default"].createElement(antd.Col, null, /*#__PURE__*/React__default["default"].createElement(antd.Button, {
+    type: "link",
+    onClick: function onClick() {
+      setDisplay(function (display) {
+        return !display;
+      });
+    }
+  }, display ? "收起更多条件" : "展开更多")))));
+};
+
+Filter.type = {
+  City: City,
+  List: List,
+  Range: Range,
+  Text: Text,
+  Selector: Selector,
+  Check: Check
+};
+Filter.defaultProps = {
+  displayLine: 2,
+  list: [[]],
+  value: {},
+  onChange: function onChange() {}
+};
+
+exports.FilterItem = FilterItem;
+exports.SearchButton = SearchButton;
+exports.createExtraButton = createExtraButton;
+exports["default"] = Filter;
+exports.withFilterItem = withFilterItem;
+exports.withMoreExtraButton = withMoreExtraButton;
+//# sourceMappingURL=index.js.map