linkmore-design/lib/advanced-filter/controls/index.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _ahooks = require("ahooks");
var _pick = _interopRequireDefault(require("lodash/pick"));
var _react = _interopRequireWildcard(require("react"));
var _dropdown = _interopRequireDefault(require("../../dropdown"));
var _LocaleReceiver = _interopRequireDefault(require("../../locale-provider/LocaleReceiver"));
var _widgets = require("../widgets");
var _LabelRender = _interopRequireDefault(require("./LabelRender"));
const DropdownRender = ({
  type,
  ...props
}) => {
  const widgets = {
    select: /*#__PURE__*/_react.default.createElement(_widgets.SelectRender, props),
    input: /*#__PURE__*/_react.default.createElement(_widgets.InputRender, props),
    number: /*#__PURE__*/_react.default.createElement(_widgets.InputNumberRender, props),
    numberRange: /*#__PURE__*/_react.default.createElement(_widgets.InputNumberRangeRender, props),
    checkbox: /*#__PURE__*/_react.default.createElement(_widgets.CheckboxRender, props),
    cascader: /*#__PURE__*/_react.default.createElement(_widgets.CascaderRender, props),
    date: /*#__PURE__*/_react.default.createElement(_widgets.DateRender, props),
    range: /*#__PURE__*/_react.default.createElement(_widgets.DateRangeRender, props)
  };
  // 防止报错
  if (!(type in widgets)) return /*#__PURE__*/_react.default.createElement("div", null);
  return widgets[type];
};
const Control = props => {
  const {
    onChange,
    children,
    dropdownRender
  } = props;
  const [controlOpen, onControlOpenChange] = (0, _ahooks.useControllableValue)(props, {
    defaultValue: false,
    valuePropName: 'open',
    trigger: 'onOpenChange'
  });
  const handleChange = (0, _ahooks.useMemoizedFn)((...arg) => {
    onControlOpenChange(false);
    onChange?.(...arg);
  });

  /** 重组props向下传递 */
  const resetProps = {
    ...props,
    onChange: handleChange,
    onCancel: (0, _ahooks.useMemoizedFn)(() => onControlOpenChange(false)),
    open: controlOpen
  };
  return /*#__PURE__*/_react.default.createElement(_dropdown.default, {
    trigger: ['click'],
    placement: "bottomLeft",
    open: controlOpen,
    onOpenChange: onControlOpenChange,
    dropdownRender: () => dropdownRender?.(resetProps),
    destroyPopupOnHide: true // 未开启则需手动控制下拉展示组件的初始化
  }, children?.(resetProps));
};

/**
 * 赋予不同类型不同的默认值(可用于单独使用)
 * 可以在此处根据不同的type重组props向下传递, 防止多余参数的传递
 * @description 此处用于赋予默认值, 不要在子集赋予, 防止Dropdown打开时的更新
 */
const DefaultControl = props => {
  const {
    type,
    placeholder,
    fieldNames,
    options,
    colon,
    dropdownRender,
    children,
    locale
  } = props;
  const defaultConfig = (0, _react.useMemo)(() => {
    const typePlaceholder = type === 'date' ? locale.datePickerPlaceholder : ['dateRange', 'range'].includes(type) ? [locale.startDate, locale.endDate] : locale.all;
    const defaultPlaceholder = placeholder ?? typePlaceholder;
    const defaultFieldNames = {
      label: 'label',
      value: 'value',
      children: 'children',
      ...fieldNames
    };
    const defaultOptions = options ?? [];
    const defaultColon = colon ?? true;
    return {
      placeholder: defaultPlaceholder,
      fieldNames: defaultFieldNames,
      options: defaultOptions,
      colon: defaultColon
    };
  }, [type, placeholder, fieldNames, options, colon, locale]);
  const defaultDropdownRender = (0, _ahooks.useMemoizedFn)(dropdownRender ?? DropdownRender);
  const defaultChildren = (0, _ahooks.useMemoizedFn)(otherProps => {
    return typeof children === 'function' ? children(otherProps) : children ?? /*#__PURE__*/_react.default.createElement(_LabelRender.default, otherProps);
  });
  const resetProps = {
    ...defaultConfig,
    ...(0, _pick.default)(props, ['type', 'value', 'onChange', 'locale', 'open', 'onOpenChange', 'size']),
    ...(0, _pick.default)(props, ['title', 'multiple', 'showSearch', 'onSearch', 'optionLabelProp', 'optionFilterProp']),
    ...(0, _pick.default)(props, ['showCheckedStrategy']),
    ...(0, _pick.default)(props, ['picker', 'showTime', 'format']),
    // input输入框的参数
    ...(0, _pick.default)(props, ['onFocus', 'itemRender', 'footerRender']),
    children: defaultChildren,
    dropdownRender: defaultDropdownRender
  };
  return /*#__PURE__*/_react.default.createElement(Control, resetProps);
};
const LocaleControl = props => {
  return /*#__PURE__*/_react.default.createElement(_LocaleReceiver.default, {
    componentName: "FilterWidget"
  }, contextLocale => /*#__PURE__*/_react.default.createElement(DefaultControl, (0, _extends2.default)({}, props, {
    locale: contextLocale
  })));
};
var _default = LocaleControl;
exports.default = _default;