@kne/react-filter 0.1.0

package/dist/index.modern.js

@@ -0,0 +1,688 @@
+import React, { createContext, useContext, useState, useRef, useEffect, 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 get from 'lodash/get';
+import isFunction from 'lodash/isFunction';
+import isEqual from 'lodash/isEqual';
+import useClickOutSide from '@kne/use-click-outside';
+import classnames from 'classnames';
+import isNumber from 'lodash/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;
+}
+
+const context$1 = createContext({});
+const {
+  Consumer,
+  Provider: Provider$1
+} = context$1;
+const useConsumer = () => useContext(context$1);
+
+const _excluded$5 = ["label"];
+
+const FilterItem = ({
+  label,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement("div", {
+    className: "react-filter-item-label"
+  }, label, ":"), /*#__PURE__*/React.createElement("div", {
+    className: "react-filter-item-children"
+  }, children));
+};
+
+const withFilterItem = WrappedComponent => _ref => {
+  let {
+    label
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+
+  return /*#__PURE__*/React.createElement(FilterItem, {
+    label: label
+  }, /*#__PURE__*/React.createElement(WrappedComponent, props));
+};
+
+const _excluded$4 = ["value", "label"];
+const {
+  CheckableTag
+} = Tag;
+const context = createContext({});
+const {
+  Provider
+} = context;
+
+const List = ({
+  label,
+  name,
+  size,
+  children,
+  options,
+  more
+}) => {
+  const {
+    value,
+    onChange
+  } = useConsumer();
+
+  const currentValue = (() => {
+    const originValue = get(value, name);
+
+    if (size === 1) {
+      return originValue !== void 0 ? [originValue] : [];
+    } else {
+      return originValue || [];
+    }
+  })();
+
+  const changeHandler = value => {
+    if (size === 1) {
+      return onChange(name, value[0]);
+    } else {
+      return onChange(name, value);
+    }
+  };
+
+  const createCheckedChangeHandler = value => checked => {
+    if (checked) {
+      let 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) {
+        message.error(`最多选择${size}个`);
+        return;
+      }
+
+      changeHandler(newList);
+    } else {
+      const newList = currentValue.slice(0);
+      newList.splice(currentValue.indexOf(value), 1);
+      changeHandler(newList);
+    }
+  };
+
+  const computedChildren = (() => {
+    if (Array.isArray(options)) {
+      return options.map(({
+        label,
+        value
+      }) => /*#__PURE__*/React.createElement(List.Item, {
+        key: value,
+        value: value,
+        label: label
+      }));
+    }
+
+    if (isFunction(children)) {
+      return children({
+        value: currentValue,
+        onChange: changeHandler
+      });
+    }
+
+    return children;
+  })();
+
+  return /*#__PURE__*/React.createElement(FilterItem, {
+    label: label
+  }, /*#__PURE__*/React.createElement(Provider, {
+    value: {
+      currentValue,
+      createCheckedChangeHandler
+    }
+  }, computedChildren, more ? (() => {
+    if (isFunction(more)) {
+      return more({
+        name,
+        size,
+        label,
+        value: currentValue,
+        onChange: changeHandler
+      });
+    }
+
+    const {
+      children,
+      onClick
+    } = more;
+    return /*#__PURE__*/React.createElement(List.Item, _extends({}, more, {
+      onClick: e => {
+        onClick({
+          name,
+          label,
+          value: currentValue,
+          onChange: changeHandler
+        }, e);
+      },
+      label: children || "其他"
+    }));
+  })() : null));
+};
+
+List.Item = _ref => {
+  let {
+    value,
+    label
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+
+  const {
+    currentValue,
+    createCheckedChangeHandler
+  } = useContext(context);
+  const itemProps = {};
+
+  if (value !== void 0) {
+    itemProps.checked = currentValue.findIndex(item => isEqual(item.value, value)) > -1;
+    itemProps.onChange = createCheckedChangeHandler({
+      label,
+      value
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(CheckableTag, _extends({}, props, itemProps), label);
+};
+
+List.defaultProps = {
+  size: 2
+};
+
+const {
+  Item
+} = List;
+
+const City = ({
+  label,
+  name,
+  size
+}) => {
+  return /*#__PURE__*/React.createElement(List, {
+    label: label,
+    name: name,
+    size: size,
+    more: {
+      children: "其他",
+      onClick: ({
+        value,
+        onChange
+      }) => {
+        createCitySelect({
+          size,
+          defaultValue: value.map(({
+            value
+          }) => value),
+          onChange: value => {
+            Promise.all(value.map(id => apis.getCity(id).then(({
+              city
+            }) => ({
+              label: city.name,
+              value: city.code
+            })))).then(value => onChange(value));
+          }
+        });
+      }
+    }
+  }, ({
+    value: currentValue
+  }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RemoteData, {
+    loader: apis.getChinaHotCities
+  }, data => {
+    const otherList = currentValue.filter(({
+      value: code
+    }) => !data.find(item => item.code === code));
+    let extraLength = 0;
+    data.forEach((item, index) => {
+      if (currentValue.findIndex(({
+        value
+      }) => value === item.code) > -1 && index >= data.length - otherList.length) {
+        extraLength += 1;
+      }
+    });
+    return /*#__PURE__*/React.createElement(React.Fragment, null, otherList.map(({
+      value: code
+    }) => {
+      return /*#__PURE__*/React.createElement(DisplayCity, {
+        id: code,
+        key: code
+      }, ({
+        city: item
+      }) => {
+        return /*#__PURE__*/React.createElement(Item, {
+          value: code,
+          label: item.name
+        });
+      });
+    }), data.filter((item, index) => currentValue.findIndex(({
+      value
+    }) => value === item.code) > -1 || index < data.length - otherList.length - extraLength).map(item => /*#__PURE__*/React.createElement(Item, {
+      key: item.code,
+      value: item.code,
+      label: item.name
+    })));
+  })));
+};
+
+const SearchButton = ({
+  name,
+  size,
+  template,
+  children,
+  defaultValue,
+  defaultActive,
+  onSearch,
+  onBeforeSearch,
+  onActiveChange,
+  buttonText
+}) => {
+  const {
+    value: aValue,
+    onChange
+  } = useConsumer();
+  const currentValue = aValue[name];
+  const [value, setValue] = useState(defaultValue || get(currentValue, "value"));
+  const [active, setActive] = useState(defaultActive);
+
+  const withTemplate = value => ({
+    value,
+    label: isFunction(template) ? template(value) : value.toString()
+  });
+
+  const ref = useClickOutSide(() => {
+    if (!active) {
+      return;
+    }
+
+    setValue(get(currentValue, "value"));
+    setActive(false);
+  });
+  const activeChangeRef = useRef(onActiveChange);
+  activeChangeRef.current = onActiveChange;
+  useEffect(() => {
+    activeChangeRef.current && activeChangeRef.current(active);
+  }, [active]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames("react-filter-search-button", {
+      "is-active": active
+    }),
+    ref: ref
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "inner"
+  }, /*#__PURE__*/React.createElement("div", null, children({
+    value,
+    setValue,
+    setActive
+  })), active ? /*#__PURE__*/React.createElement(Button, {
+    className: "react-filter-search-confirm",
+    size: "small",
+    type: "primary",
+    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
+      });
+    }
+  }, buttonText) : null));
+};
+
+SearchButton.defaultProps = {
+  defaultActive: false,
+  buttonText: "确定"
+};
+
+const RangeInner = ({
+  name,
+  size,
+  defaultActive,
+  template,
+  onSearch,
+  onActiveChange,
+  startProps,
+  endProps
+}) => {
+  const [error, setError] = useState(null);
+
+  const check = value => {
+    setError(null);
+
+    if (!Array.isArray(value)) {
+      return false;
+    }
+
+    if (value[0] === null && value[1] === null) {
+      setError("最大值和最小值不能同时为空");
+      return false;
+    }
+
+    if (isNumber(value[1]) && value[0] > value[1]) {
+      setError("最大值不能小于最小值");
+      return false;
+    }
+
+    return true;
+  };
+
+  return /*#__PURE__*/React.createElement(SearchButton, {
+    size: size,
+    template: template,
+    defaultActive: defaultActive,
+    name: name,
+    onSearch: onSearch,
+    onBeforeSearch: value => {
+      return check(value);
+    },
+    onActiveChange: active => {
+      if (!active) {
+        setError(null);
+      }
+
+      onActiveChange && onActiveChange(active);
+    }
+  }, ({
+    value,
+    setValue,
+    setActive
+  }) => /*#__PURE__*/React.createElement(Tooltip, {
+    visible: !!error,
+    title: error,
+    placement: "bottomRight"
+  }, /*#__PURE__*/React.createElement(Space, {
+    size: "small"
+  }, /*#__PURE__*/React.createElement(InputNumber, _extends({
+    size: "small"
+  }, startProps, {
+    value: get(value, 0),
+    onChange: inputValue => {
+      const target = [inputValue, get(value, 1)];
+      check(target);
+      setValue(target);
+    },
+    onFocus: () => {
+      setActive(true);
+    }
+  })), "~", /*#__PURE__*/React.createElement(InputNumber, _extends({
+    size: "small"
+  }, endProps, {
+    value: get(value, 1),
+    onChange: inputValue => {
+      const target = [get(value, 0), inputValue];
+      check(target);
+      setValue(target);
+    },
+    onFocus: () => {
+      setActive(true);
+    }
+  })))));
+};
+const Range = withFilterItem(RangeInner);
+
+const _excluded$3 = ["name", "label", "template", "defaultActive", "onSearch", "onActiveChange"];
+const TextInner = _ref => {
+  let {
+    name,
+    template,
+    defaultActive,
+    onSearch,
+    onActiveChange
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+
+  return /*#__PURE__*/React.createElement(SearchButton, {
+    defaultActive: defaultActive,
+    template: template,
+    name: name,
+    onSearch: onSearch,
+    onActiveChange: active => {
+      onActiveChange && onActiveChange(active);
+    }
+  }, ({
+    value,
+    setValue,
+    setActive
+  }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, _extends({
+    size: "small"
+  }, props, {
+    value: value,
+    onChange: e => {
+      setValue(e.target.value);
+    },
+    onFocus: () => {
+      setActive(true);
+    }
+  }))));
+};
+const Text = withFilterItem(TextInner);
+
+const _excluded$2 = ["name"];
+const SelectorInner = _ref => {
+  let {
+    name
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+
+  const {
+    value: aValue,
+    onChange
+  } = useConsumer();
+  const currentValue = aValue[name];
+  return /*#__PURE__*/React.createElement(Select, _extends({}, props, {
+    style: {
+      minWidth: "150px"
+    },
+    size: "small",
+    value: currentValue,
+    onChange: (value, item) => {
+      onChange(name, item);
+    }
+  }));
+};
+const Selector = withFilterItem(SelectorInner);
+
+const _excluded$1 = ["name", "label"];
+
+const Check = _ref => {
+  let {
+    name,
+    label
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+
+  const {
+    value: aValue,
+    onChange
+  } = useConsumer();
+  const currentValue = aValue[name];
+  return /*#__PURE__*/React.createElement(Checkbox, _extends({}, props, {
+    size: "small",
+    checked: currentValue,
+    onChange: e => {
+      onChange(name, e.target.checked ? {
+        value: true,
+        label
+      } : null);
+    }
+  }), label);
+};
+
+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,
+    onActiveChange: active => {
+      if (active === false) {
+        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));
+  };
+};
+
+const Filter = ({
+  displayLine,
+  list,
+  value,
+  onChange
+}) => {
+  const [display, setDisplay] = useState(false);
+  const basicList = list.slice(0, displayLine),
+        moreList = list.slice(displayLine);
+
+  const renderList = list => list.map((item, index) => {
+    return /*#__PURE__*/React.createElement(Space, {
+      key: index
+    }, item.map((item, index) => cloneElement(item, {
+      key: index
+    })));
+  });
+
+  const changeHandler = (name, item) => {
+    const target = Object.assign({}, value, {
+      [name]: item
+    });
+    Object.keys(target).forEach(key => {
+      const 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.createElement(Provider$1, {
+    value: {
+      value,
+      onChange: changeHandler
+    }
+  }, /*#__PURE__*/React.createElement(Space, {
+    className: "space-full",
+    direction: "vertical"
+  }, /*#__PURE__*/React.createElement(FilterItem, {
+    label: "\u7B5B\u9009\u9879"
+  }, Object.keys(value).map(key => {
+    const item = value[key];
+    if (!item) return null;
+    if (Array.isArray(item) && item.length === 0) return null;
+    return /*#__PURE__*/React.createElement(Tag, {
+      key: key,
+      closable: true,
+      onClose: () => {
+        changeHandler(key, null);
+      }
+    }, Array.isArray(item) ? item.map(({
+      label
+    }) => label).join(",") : item.label);
+  })), renderList(basicList), display ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
+    className: "react-filter-divider"
+  }), renderList(moreList)) : null, /*#__PURE__*/React.createElement(Row, {
+    justify: "end"
+  }, /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/React.createElement(Button, {
+    type: "link",
+    onClick: () => {
+      setDisplay(display => !display);
+    }
+  }, display ? "收起更多条件" : "展开更多")))));
+};
+
+Filter.type = {
+  City,
+  List,
+  Range,
+  Text,
+  Selector,
+  Check
+};
+Filter.defaultProps = {
+  displayLine: 2,
+  list: [[]],
+  value: {},
+  onChange: () => {}
+};
+
+export { FilterItem, SearchButton, createExtraButton, Filter as default, withFilterItem, withMoreExtraButton };
+//# sourceMappingURL=index.modern.js.map