acud/lib/search/Search.js

acg react 组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof3 = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _classnames2 = _interopRequireDefault(require("classnames"));
var _OutlinedSearch = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedSearch"));
var _OutlinedLoading = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedLoading"));
var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
var _configProvider = require("../config-provider");
var _select = _interopRequireDefault(require("../select"));
var _useCombinedRefs = _interopRequireDefault(require("../_util/hooks/useCombinedRefs"));
var _input = _interopRequireDefault(require("../input"));
var _button = _interopRequireDefault(require("../button"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var __rest = void 0 && (void 0).__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
var Option = _select["default"].Option;
var Search = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  // props
  var loading = props.loading,
    className = props.className,
    _props$multipleOption = props.multipleOption,
    multipleOption = _props$multipleOption === void 0 ? [] : _props$multipleOption,
    multipleValue = props.multipleValue,
    multipleDefaultValue = props.multipleDefaultValue,
    _props$enterButton = props.enterButton,
    enterButton = _props$enterButton === void 0 ? false : _props$enterButton,
    size = props.size,
    disabled = props.disabled,
    onCompositionStart = props.onCompositionStart,
    onCompositionEnd = props.onCompositionEnd,
    customChange = props.onChange,
    customSearch = props.onSearch,
    customChangeMultiple = props.onChangeMultiple,
    addonSelectStyle = props.addonSelectStyle,
    otherProps = __rest(props, ["loading", "className", "multipleOption", "multipleValue", "multipleDefaultValue", "enterButton", "size", "disabled", "onCompositionStart", "onCompositionEnd", "onChange", "onSearch", "onChangeMultiple", "addonSelectStyle"]);
  var _useMergedState = (0, _useMergedState3["default"])(multipleDefaultValue, {
      value: multipleValue
    }),
    _useMergedState2 = (0, _slicedToArray2["default"])(_useMergedState, 2),
    multipleMergeValue = _useMergedState2[0],
    setMultipleMergeValue = _useMergedState2[1];
  var composedRef = _react["default"].useRef(false);
  // 变量
  // search里面主要是对enterButton做处理
  var button;
  var addonBefore;
  var ifMultiple = !!multipleOption.length;
  var _React$useContext = _react["default"].useContext(_configProvider.ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var customizePrefixCls = props.prefixCls;
  var prefixCls = getPrefixCls('input-search', customizePrefixCls);
  var ifControlMutipleValue = 'multipleValue' in props;
  // 样式
  var classes = (0, _classnames2["default"])(className, prefixCls, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-multiple"), ifMultiple), "".concat(prefixCls, "-enter-button"), enterButton), "".concat(prefixCls, "-enter-button-disabled"), disabled));
  // 点击搜索按钮样式
  var searchIconClass = "".concat(prefixCls, "-icon");
  var searchLoadingIconClass = "".concat(prefixCls, "-loading-icon");
  // ref
  var inputRef = _react["default"].useRef(null);
  var combinedRef = (0, _useCombinedRefs["default"])(ref, inputRef);
  // 函数
  var onChange = (0, _react.useCallback)(function (e) {
    if (e && e.target && e.type === 'click' && customSearch) {
      customSearch(e.target.value, e);
    }
    customChange && customChange(e);
  }, [customChange, customSearch]);
  var onSearch = (0, _react.useCallback)(function (e) {
    var _a;
    var value = (_a = combinedRef.current) === null || _a === void 0 ? void 0 : _a.value;
    var realValue = ifMultiple ? {
      type: multipleMergeValue,
      value: value
    } : value;
    if (composedRef.current) {
      return;
    }
    customSearch && customSearch(realValue, e);
  }, [combinedRef, ifMultiple, multipleMergeValue, customSearch]);
  var onChangeMultiple = (0, _react.useCallback)(function (value) {
    // 如果是不受控，就自己调用set
    if (!ifControlMutipleValue) {
      setMultipleMergeValue(value);
    }
    customChangeMultiple === null || customChangeMultiple === void 0 ? void 0 : customChangeMultiple(value);
  }, [customChangeMultiple, ifControlMutipleValue, setMultipleMergeValue]);
  // 主要逻辑
  // 如果是enterButton对象，就表示ReactElement
  var buttonContent = enterButton === true ? /*#__PURE__*/_react["default"].createElement(_OutlinedSearch["default"], null) : enterButton;
  // icon还是交给button处理吧
  button = /*#__PURE__*/_react["default"].createElement(_button["default"], {
    key: "enterButton",
    type: enterButton ? 'primary' : undefined,
    size: size,
    loading: loading,
    disabled: disabled,
    onClick: onSearch,
    onMouseDown: function onMouseDown(e) {
      e.preventDefault();
    },
    icon: buttonContent
  });
  // 多条件搜索
  if (multipleOption.length) {
    addonBefore = /*#__PURE__*/_react["default"].createElement(_select["default"], {
      value: multipleMergeValue,
      onChange: function onChange(value) {
        return onChangeMultiple(value);
      },
      disabled: disabled,
      style: addonSelectStyle
    }, multipleOption.map(function (item) {
      var _ref = item || {},
        value = _ref.value,
        label = _ref.label;
      return /*#__PURE__*/_react["default"].createElement(Option, {
        value: value,
        key: value
      }, label);
    }));
  }
  var handleOnCompositionStart = function handleOnCompositionStart(e) {
    composedRef.current = true;
    onCompositionStart === null || onCompositionStart === void 0 ? void 0 : onCompositionStart(e);
  };
  var handleOnCompositionEnd = function handleOnCompositionEnd(e) {
    composedRef.current = false;
    onCompositionEnd === null || onCompositionEnd === void 0 ? void 0 : onCompositionEnd(e);
  };
  var baseProps = (0, _extends2["default"])((0, _extends2["default"])({}, otherProps), {
    size: size,
    ref: combinedRef,
    onChange: onChange,
    disabled: disabled,
    onPressEnter: onSearch,
    onCompositionStart: handleOnCompositionStart,
    onCompositionEnd: handleOnCompositionEnd,
    addonBefore: ifMultiple && addonBefore
  });
  var suffix = loading ? /*#__PURE__*/_react["default"].createElement(_OutlinedLoading["default"], {
    className: searchLoadingIconClass,
    animation: "spin"
  }) : /*#__PURE__*/_react["default"].createElement(_OutlinedSearch["default"], {
    onClick: onSearch,
    onMouseDown: function onMouseDown(e) {
      e.preventDefault();
    },
    className: searchIconClass,
    disabled: disabled
  });
  var realProps = enterButton === false || (0, _typeof2["default"])(enterButton) === undefined ? (0, _extends2["default"])((0, _extends2["default"])({}, baseProps), {
    suffix: suffix
  }) : baseProps;
  return /*#__PURE__*/_react["default"].createElement("span", {
    className: classes
  }, /*#__PURE__*/_react["default"].createElement(_input["default"], (0, _extends2["default"])({}, realProps, {
    ref: combinedRef
  })), enterButton && button);
});
var _default = exports["default"] = Search;