acud/es/search/Search.js

acg react 组件库

import _typeof from "@babel/runtime/helpers/esm/typeof";
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
var __rest = this && this.__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;
};
import React, { useCallback } from 'react';
import classnames from 'classnames';
import OutlinedSearch from "acud-icon/es/icons/OutlinedSearch";
import OutlinedLoading from "acud-icon/es/icons/OutlinedLoading";
import useMergedState from "rc-util/es/hooks/useMergedState";
import { ConfigContext } from '../config-provider';
import Select from '../select';
import useCombinedRefs from '../_util/hooks/useCombinedRefs';
import Input from '../input';
import Button from '../button';
var Option = Select.Option;
var Search = /*#__PURE__*/React.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 = useMergedState(multipleDefaultValue, {
      value: multipleValue
    }),
    _useMergedState2 = _slicedToArray(_useMergedState, 2),
    multipleMergeValue = _useMergedState2[0],
    setMultipleMergeValue = _useMergedState2[1];
  var composedRef = React.useRef(false);
  // 变量
  // search里面主要是对enterButton做处理
  var button;
  var addonBefore;
  var ifMultiple = !!multipleOption.length;
  var _React$useContext = React.useContext(ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var customizePrefixCls = props.prefixCls;
  var prefixCls = getPrefixCls('input-search', customizePrefixCls);
  var ifControlMutipleValue = 'multipleValue' in props;
  // 样式
  var classes = classnames(className, prefixCls, _defineProperty(_defineProperty(_defineProperty({}, "".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.useRef(null);
  var combinedRef = useCombinedRefs(ref, inputRef);
  // 函数
  var onChange = useCallback(function (e) {
    if (e && e.target && e.type === 'click' && customSearch) {
      customSearch(e.target.value, e);
    }
    customChange && customChange(e);
  }, [customChange, customSearch]);
  var onSearch = 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 = 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.createElement(OutlinedSearch, null) : enterButton;
  // icon还是交给button处理吧
  button = /*#__PURE__*/React.createElement(Button, {
    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.createElement(Select, {
      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.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 = _extends(_extends({}, otherProps), {
    size: size,
    ref: combinedRef,
    onChange: onChange,
    disabled: disabled,
    onPressEnter: onSearch,
    onCompositionStart: handleOnCompositionStart,
    onCompositionEnd: handleOnCompositionEnd,
    addonBefore: ifMultiple && addonBefore
  });
  var suffix = loading ? /*#__PURE__*/React.createElement(OutlinedLoading, {
    className: searchLoadingIconClass,
    animation: "spin"
  }) : /*#__PURE__*/React.createElement(OutlinedSearch, {
    onClick: onSearch,
    onMouseDown: function onMouseDown(e) {
      e.preventDefault();
    },
    className: searchIconClass,
    disabled: disabled
  });
  var realProps = enterButton === false || _typeof(enterButton) === undefined ? _extends(_extends({}, baseProps), {
    suffix: suffix
  }) : baseProps;
  return /*#__PURE__*/React.createElement("span", {
    className: classes
  }, /*#__PURE__*/React.createElement(Input, _extends({}, realProps, {
    ref: combinedRef
  })), enterButton && button);
});
export default Search;