acud/lib/input/Input.js

acg react 组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.resolveTargetValue = exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _MultiToneClear = _interopRequireDefault(require("acud-icon/lib/icons/MultiToneClear"));
var _popover = _interopRequireDefault(require("../popover"));
var _configProvider = require("../config-provider");
var _SizeContext = _interopRequireDefault(require("../config-provider/SizeContext"));
var _LocaleReceiver = require("../locale-provider/LocaleReceiver");
var _useCombinedRefs = _interopRequireDefault(require("../_util/hooks/useCombinedRefs"));
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" != _typeof(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;
};
/**
 * @file Group component
 * @author liyanan
 */

var resolveTargetValue = exports.resolveTargetValue = function resolveTargetValue(event, value) {
  var newEvent = (0, _extends2["default"])((0, _extends2["default"])({}, event), {
    target: (0, _extends2["default"])((0, _extends2["default"])({}, event.target), {
      value: value
    })
  });
  return newEvent;
};
var Input = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  var _classNames3;
  var _useLocaleReceiver = (0, _LocaleReceiver.useLocaleReceiver)('Input'),
    _useLocaleReceiver2 = (0, _slicedToArray2["default"])(_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 = (0, _react.useState)(props.value || defaultValue || ''),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    value = _useState2[0],
    setValue = _useState2[1];
  var _useState3 = (0, _react.useState)('#D4D6D9'),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    clearIconColor = _useState4[0],
    setClearIconColor = _useState4[1];
  var _useState5 = (0, _react.useState)(false),
    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
    showClearIcon = _useState6[0],
    setShowClearIcon = _useState6[1];
  var _useState7 = (0, _react.useState)(''),
    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
    focusClass = _useState8[0],
    setFocusClass = _useState8[1];
  // const userTypingRef = React.useRef(false);
  var composedRef = _react["default"].useRef(false);
  var _useState9 = (0, _react.useState)(''),
    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
    composingValue = _useState0[0],
    setComposingValue = _useState0[1];
  var innerRef = _react["default"].useRef(null);
  var combinedRef = (0, _useCombinedRefs["default"])(ref, innerRef);
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      blur: function blur() {
        setFocusClass('');
      },
      focus: function focus() {
        combinedRef.current.focus();
      }
    };
  });
  (0, _react.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 = (0, _react.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["default"].useContext(_configProvider.ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var prefixCls = getPrefixCls('input', customizePrefixCls);
  var renderPrefix = function renderPrefix() {
    if (prefix) {
      return /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-prefix"),
        "aria-disabled": disabled || readOnly
      }, prefix);
    }
    return null;
  };
  var renderSuffix = function renderSuffix() {
    if (suffix || limitLength) {
      return /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-suffix"),
        "aria-disabled": disabled || readOnly
      }, suffix, (!disabled || !readOnly) && limitLength && /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-suffix-limit-text")
      }, /*#__PURE__*/_react["default"].createElement("span", {
        className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-suffix-warning"), value && value.length > limitLength))
      }, value && value.length ? value.length : 0, "/", limitLength))));
    }
    return null;
  };
  var addonClasses = function addonClasses(addon) {
    return (0, _classnames["default"])("".concat(prefixCls, "-addon"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-addonOnlyText"), typeof addon === 'string'));
  };
  var renderAddonBefore = function renderAddonBefore() {
    if (addonBefore) {
      return /*#__PURE__*/_react["default"].createElement("span", {
        className: addonClasses(addonBefore),
        "aria-disabled": disabled || readOnly
      }, addonBefore);
    }
    return null;
  };
  var renderAddonAffer = function renderAddonAffer() {
    if (addonAfter) {
      return /*#__PURE__*/_react["default"].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["default"].useContext(_SizeContext["default"]) || customizeSize;
  var classes = (0, _classnames["default"])(prefixCls, className, (_classNames3 = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_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'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])(_classNames3, "".concat(prefixCls, "-has-clear"), (!disabled || !readOnly) && allowClear && !label), "".concat(prefixCls, "-has-limit"), limitLength)));
  var inputDom = /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({}, 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["default"].createElement("span", {
      className: classes,
      style: style,
      "aria-disabled": disabled || readOnly,
      onFocus: handleOuterFocus,
      onBlur: handleOuterBlur
    }, label, renderAddonBefore(), renderPrefix(), /*#__PURE__*/_react["default"].cloneElement(inputDom, {
      value: innerValue
    }), (!disabled || !readOnly) && showClearIcon && /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(prefixCls, "-clear-wrapper"),
      onClick: clickClear,
      onMouseEnter: hoverClear,
      onMouseLeave: clearMouseLeave,
      onMouseDown: handleMouseDownClear
    }, /*#__PURE__*/_react["default"].createElement(_MultiToneClear["default"], {
      width: 16,
      color: clearIconColor
    })), renderSuffix(), renderAddonAffer());
  };
  if (!hidden) {
    var warningTextContent = (!disabled || !readOnly) && !warningPopover && warningText && /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(prefixCls, "-warning-text")
    }, warningText);
    var tipsContent = (!disabled || !readOnly) && !warningPopover && !warningText && tips && /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(prefixCls, "-tips")
    }, tips);
    return warningText ? /*#__PURE__*/_react["default"].createElement(_popover["default"], (0, _extends2["default"])({
      content: /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-warning-popover-text")
      }, warningText),
      placement: "bottomLeft"
    }, warningPopover && !!warningText ? {} : {
      visible: false
    }), renderInner(), warningTextContent, tipsContent) : /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, renderInner(), warningTextContent, tipsContent);
  }
  return null;
});
var _default = exports["default"] = Input;