acud/es/input/Input.js

acg react 组件库

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _extends from "@babel/runtime/helpers/esm/extends";
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;
};
/**
 * @file Group component
 * @author liyanan
 */
import React, { useImperativeHandle, Fragment, useEffect, useState, useCallback } from 'react';
import classNames from 'classnames';
import MultiToneClear from "acud-icon/es/icons/MultiToneClear";
import Popover from '../popover';
import { ConfigContext } from '../config-provider';
import SizeContext from '../config-provider/SizeContext';
import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
import useCombinedRefs from '../_util/hooks/useCombinedRefs';
export var resolveTargetValue = function resolveTargetValue(event, value) {
  var newEvent = _extends(_extends({}, event), {
    target: _extends(_extends({}, event.target), {
      value: value
    })
  });
  return newEvent;
};
var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var _classNames3;
  var _useLocaleReceiver = useLocaleReceiver('Input'),
    _useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 1),
    locale = _useLocaleReceiver2[0];
  var customizePrefixCls = props.prefixCls,
    customizeSize = props.size,
    _props$placeholder = props.placeholder,
    placeholder = _props$placeholder === void 0 ? locale === null || locale === void 0 ? void 0 : locale.placeholder : _props$placeholder,
    warning = props.warning,
    warningPopover = props.warningPopover,
    warningText = props.warningText,
    tips = props.tips,
    disabled = props.disabled,
    readOnly = props.readOnly,
    defaultValue = props.defaultValue,
    limitLength = props.limitLength,
    label = props.label,
    prefix = props.prefix,
    suffix = props.suffix,
    addonBefore = props.addonBefore,
    addonAfter = props.addonAfter,
    className = props.className,
    allowClear = props.allowClear,
    onPressEnter = props.onPressEnter,
    onKeyDown = props.onKeyDown,
    handleClearAll = props.handleClearAll,
    onCompositionStart = props.onCompositionStart,
    onCompositionEnd = props.onCompositionEnd,
    onPaste = props.onPaste,
    type = props.type,
    style = props.style,
    _props$hidden = props.hidden,
    hidden = _props$hidden === void 0 ? false : _props$hidden,
    _props$forbidIfLimit = props.forbidIfLimit,
    forbidIfLimit = _props$forbidIfLimit === void 0 ? false : _props$forbidIfLimit,
    rest = __rest(props, ["prefixCls", "size", "placeholder", "warning", "warningPopover", "warningText", "tips", "disabled", "readOnly", "defaultValue", "limitLength", "label", "prefix", "suffix", "addonBefore", "addonAfter", "className", "allowClear", "onPressEnter", "onKeyDown", "handleClearAll", "onCompositionStart", "onCompositionEnd", "onPaste", "type", "style", "hidden", "forbidIfLimit"]);
  var _useState = useState(props.value || defaultValue || ''),
    _useState2 = _slicedToArray(_useState, 2),
    value = _useState2[0],
    setValue = _useState2[1];
  var _useState3 = useState('#D4D6D9'),
    _useState4 = _slicedToArray(_useState3, 2),
    clearIconColor = _useState4[0],
    setClearIconColor = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    showClearIcon = _useState6[0],
    setShowClearIcon = _useState6[1];
  var _useState7 = useState(''),
    _useState8 = _slicedToArray(_useState7, 2),
    focusClass = _useState8[0],
    setFocusClass = _useState8[1];
  // const userTypingRef = React.useRef(false);
  var composedRef = React.useRef(false);
  var _useState9 = useState(''),
    _useState0 = _slicedToArray(_useState9, 2),
    composingValue = _useState0[0],
    setComposingValue = _useState0[1];
  var innerRef = React.useRef(null);
  var combinedRef = useCombinedRefs(ref, innerRef);
  useImperativeHandle(ref, function () {
    return {
      blur: function blur() {
        setFocusClass('');
      },
      focus: function focus() {
        combinedRef.current.focus();
      }
    };
  });
  useEffect(function () {
    if ('value' in props && value !== props.value) {
      setComposingValue(props.value || '');
      setValue(props.value || '');
      if (props.value === 0) {
        setComposingValue(0);
        setValue(0);
      }
    }
    if ('label' in props && props.label) {
      if (props.allowClear) {
        setShowClearIcon(true);
      } else {
        setShowClearIcon(false);
      }
    }
    if (!disabled && !readOnly) {
      if (value.length && props.allowClear) {
        setShowClearIcon(true);
      }
    }
    if (props.allowClear && !value.length) {
      setShowClearIcon(false);
    }
  }, [props, value, disabled, readOnly]);
  var handleFocus = function handleFocus(e) {
    if (disabled || readOnly) {
      return;
    }
    e.stopPropagation();
    setFocusClass('focus');
    if (props.onFocus) {
      props.onFocus(e);
    }
  };
  var handleBlur = function handleBlur(e) {
    if (disabled || readOnly) {
      return;
    }
    setFocusClass('');
    if (props.onBlur) {
      props.onBlur(e);
    }
  };
  var handleOnKeyDown = function handleOnKeyDown(e) {
    // userTypingRef.current = true;
    if (onPressEnter && e.key === 'Enter') {
      if (composedRef.current) {
        return;
      }
      onPressEnter(e);
    }
    if (onKeyDown) {
      onKeyDown(e);
    }
  };
  var handleOnChange = function handleOnChange(e) {
    var _a;
    if (composedRef.current) {
      setComposingValue(e.target.value);
    } else {
      if (forbidIfLimit && limitLength && e.target.value.length >= limitLength) {
        setComposingValue(e.target.value.slice(0, limitLength));
        setValue(e.target.value.slice(0, limitLength));
        e.target.value = e.target.value.slice(0, limitLength);
      } else {
        setComposingValue(e.target.value);
        setValue(e.target.value);
      }
      if (!e.target.value.length) {
        setShowClearIcon(false);
      }
      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
    }
  };
  var handleOuterFocus = function handleOuterFocus() {
    setFocusClass('focus');
  };
  var handleOuterBlur = function handleOuterBlur() {
    setFocusClass('');
  };
  var handleMouseDownClear = useCallback(function (e) {
    e.preventDefault();
  }, []);
  var clickClear = function clickClear(e) {
    if (allowClear) {
      setShowClearIcon(false);
      // setValue('');
      // 强制转换一下类型
      handleOnChange(resolveTargetValue(e, ''));
    }
    if (label) {
      setShowClearIcon(false);
    }
    if (handleClearAll) {
      handleClearAll();
    }
    // console.log('combinedRef', combinedRef);
    // combinedRef.current.focus();
  };
  var hoverClear = function hoverClear() {
    setClearIconColor('#84868C');
  };
  var clearMouseLeave = function clearMouseLeave() {
    setClearIconColor('#D4D6D9');
  };
  var onHandlePaste = function onHandlePaste(e) {
    if (onPaste) {
      onPaste(e);
    }
  };
  var _React$useContext = React.useContext(ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var prefixCls = getPrefixCls('input', customizePrefixCls);
  var renderPrefix = function renderPrefix() {
    if (prefix) {
      return /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-prefix"),
        "aria-disabled": disabled || readOnly
      }, prefix);
    }
    return null;
  };
  var renderSuffix = function renderSuffix() {
    if (suffix || limitLength) {
      return /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-suffix"),
        "aria-disabled": disabled || readOnly
      }, suffix, (!disabled || !readOnly) && limitLength && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-suffix-limit-text")
      }, /*#__PURE__*/React.createElement("span", {
        className: classNames(_defineProperty({}, "".concat(prefixCls, "-suffix-warning"), value && value.length > limitLength))
      }, value && value.length ? value.length : 0, "/", limitLength))));
    }
    return null;
  };
  var addonClasses = function addonClasses(addon) {
    return classNames("".concat(prefixCls, "-addon"), _defineProperty({}, "".concat(prefixCls, "-addonOnlyText"), typeof addon === 'string'));
  };
  var renderAddonBefore = function renderAddonBefore() {
    if (addonBefore) {
      return /*#__PURE__*/React.createElement("span", {
        className: addonClasses(addonBefore),
        "aria-disabled": disabled || readOnly
      }, addonBefore);
    }
    return null;
  };
  var renderAddonAffer = function renderAddonAffer() {
    if (addonAfter) {
      return /*#__PURE__*/React.createElement("span", {
        className: addonClasses(addonAfter),
        "aria-disabled": disabled || readOnly
      }, addonAfter);
    }
    return null;
  };
  var handleOnCompositionStart = function handleOnCompositionStart(e) {
    composedRef.current = true;
    onCompositionStart === null || onCompositionStart === void 0 ? void 0 : onCompositionStart(e);
  };
  var handleOnCompositionEnd = function handleOnCompositionEnd(e) {
    if (composedRef.current) {
      composedRef.current = false;
      handleOnChange(e);
    }
    onCompositionEnd === null || onCompositionEnd === void 0 ? void 0 : onCompositionEnd(e);
  };
  var innerValue = composedRef.current ? composingValue : value !== null && value !== void 0 ? value : '';
  var size = React.useContext(SizeContext) || customizeSize;
  var classes = classNames(prefixCls, className, (_classNames3 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classNames3, "".concat(prefixCls, "-sm"), size === 'small'), "".concat(prefixCls, "-lg"), size === 'large'), "".concat(prefixCls, "-warning"), warning || warningPopover || value && value.length > limitLength), "".concat(prefixCls, "-has-prefix"), prefix), "".concat(prefixCls, "-has-suffix"), suffix), "".concat(prefixCls, "-has-addon-before"), addonBefore), "".concat(prefixCls, "-has-addon-after"), addonAfter), "".concat(prefixCls, "-label-input"), label), "".concat(prefixCls, "-span-focus"), focusClass), "".concat(prefixCls, "-real-password"), type === 'password'), _defineProperty(_defineProperty(_classNames3, "".concat(prefixCls, "-has-clear"), (!disabled || !readOnly) && allowClear && !label), "".concat(prefixCls, "-has-limit"), limitLength)));
  var inputDom = /*#__PURE__*/React.createElement("input", _extends({}, rest, {
    type: type,
    ref: combinedRef,
    placeholder: placeholder,
    value: innerValue,
    disabled: disabled,
    readOnly: readOnly,
    onFocus: handleFocus,
    onBlur: handleBlur,
    onKeyDown: handleOnKeyDown,
    onChange: handleOnChange,
    onCompositionStart: handleOnCompositionStart,
    onCompositionEnd: handleOnCompositionEnd,
    onPaste: onHandlePaste
  }));
  var renderInner = function renderInner() {
    return /*#__PURE__*/React.createElement("span", {
      className: classes,
      style: style,
      "aria-disabled": disabled || readOnly,
      onFocus: handleOuterFocus,
      onBlur: handleOuterBlur
    }, label, renderAddonBefore(), renderPrefix(), /*#__PURE__*/React.cloneElement(inputDom, {
      value: innerValue
    }), (!disabled || !readOnly) && showClearIcon && /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-clear-wrapper"),
      onClick: clickClear,
      onMouseEnter: hoverClear,
      onMouseLeave: clearMouseLeave,
      onMouseDown: handleMouseDownClear
    }, /*#__PURE__*/React.createElement(MultiToneClear, {
      width: 16,
      color: clearIconColor
    })), renderSuffix(), renderAddonAffer());
  };
  if (!hidden) {
    var warningTextContent = (!disabled || !readOnly) && !warningPopover && warningText && /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-warning-text")
    }, warningText);
    var tipsContent = (!disabled || !readOnly) && !warningPopover && !warningText && tips && /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-tips")
    }, tips);
    return warningText ? /*#__PURE__*/React.createElement(Popover, _extends({
      content: /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-warning-popover-text")
      }, warningText),
      placement: "bottomLeft"
    }, warningPopover && !!warningText ? {} : {
      visible: false
    }), renderInner(), warningTextContent, tipsContent) : /*#__PURE__*/React.createElement(Fragment, null, renderInner(), warningTextContent, tipsContent);
  }
  return null;
});
export default Input;