@alifd/meet-react/lib/input/input.js

Fusion Mobile React UI System Component

"use strict";

exports.__esModule = true;
exports.default = void 0;
var _tslib = require("tslib");
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _env = require("@uni/env");
var _meetReactComponentOne = require("@alifd/meet-react-component-one");
var _view = _interopRequireDefault(require("../view"));
var _icon = _interopRequireDefault(require("../icon"));
var _form = _interopRequireDefault(require("../form"));
var _utils = require("../utils");
var _hooks = require("../utils/hooks");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var ICON_NAME_MAP = {
  warning: 'warning-filling',
  error: 'warning-filling',
  success: 'success-filling',
  loading: 'loading'
};
var Input = function (props, ref) {
  var _classNames, _classNames2, _classNames3, _classNames4, _classNames5, _clearEvt;
  var _props$prefix = props.prefix,
    prefix = _props$prefix === void 0 ? 'mt-' : _props$prefix,
    _props$size = props.size,
    size = _props$size === void 0 ? 'medium' : _props$size,
    _props$type = props.type,
    type = _props$type === void 0 ? 'normal' : _props$type,
    valueProp = props.value,
    _props$defaultValue = props.defaultValue,
    defaultValue = _props$defaultValue === void 0 ? '' : _props$defaultValue,
    _props$keyboardType = props.keyboardType,
    keyboardType = _props$keyboardType === void 0 ? 'text' : _props$keyboardType,
    placeholder = props.placeholder,
    _props$htmlType = props.htmlType,
    htmlType = _props$htmlType === void 0 ? '' : _props$htmlType,
    _props$isPassword = props.isPassword,
    isPasswordProp = _props$isPassword === void 0 ? false : _props$isPassword,
    stateProp = props.state,
    _props$disabled = props.disabled,
    disabled = _props$disabled === void 0 ? false : _props$disabled,
    _props$readOnly = props.readOnly,
    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
    _props$hasClear = props.hasClear,
    hasClear = _props$hasClear === void 0 ? false : _props$hasClear,
    _props$multiline = props.multiline,
    multiline = _props$multiline === void 0 ? false : _props$multiline,
    _props$useOriginalRef = props.useOriginalRef,
    useOriginalRef = _props$useOriginalRef === void 0 ? false : _props$useOriginalRef,
    _props$highlightable = props.highlightable,
    highlightable = _props$highlightable === void 0 ? false : _props$highlightable,
    _props$showLimitHint = props.showLimitHint,
    showLimitHint = _props$showLimitHint === void 0 ? true : _props$showLimitHint,
    _props$rows = props.rows,
    rows = _props$rows === void 0 ? 3 : _props$rows,
    maxLength = props.maxLength,
    focused = props.focused,
    autoFocus = props.autoFocus,
    alignProp = props.align,
    _props$onFocus = props.onFocus,
    onFocus = _props$onFocus === void 0 ? function () {} : _props$onFocus,
    _props$onBlur = props.onBlur,
    onBlur = _props$onBlur === void 0 ? function () {} : _props$onBlur,
    _props$onChange = props.onChange,
    onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
    _props$onConfirm = props.onConfirm,
    onConfirm = _props$onConfirm === void 0 ? function () {} : _props$onConfirm,
    _props$onClear = props.onClear,
    onClear = _props$onClear === void 0 ? function () {} : _props$onClear,
    onCompositionStart = props.onCompositionStart,
    onCompositionEnd = props.onCompositionEnd,
    className = props.className,
    controlled = props.controlled,
    _props$addonAfter = props.addonAfter,
    addonAfter = _props$addonAfter === void 0 ? null : _props$addonAfter,
    _props$addonBefore = props.addonBefore,
    addonBefore = _props$addonBefore === void 0 ? null : _props$addonBefore,
    _props$innerAfter = props.innerAfter,
    innerAfter = _props$innerAfter === void 0 ? null : _props$innerAfter,
    _props$innerBefore = props.innerBefore,
    innerBefore = _props$innerBefore === void 0 ? null : _props$innerBefore,
    enableNative = props.enableNative,
    compositionProp = props.composition,
    others = (0, _tslib.__rest)(props, ["prefix", "size", "type", "value", "defaultValue", "keyboardType", "placeholder", "htmlType", "isPassword", "state", "disabled", "readOnly", "hasClear", "multiline", "useOriginalRef", "highlightable", "showLimitHint", "rows", "maxLength", "focused", "autoFocus", "align", "onFocus", "onBlur", "onChange", "onConfirm", "onClear", "onCompositionStart", "onCompositionEnd", "className", "controlled", "addonAfter", "addonBefore", "innerAfter", "innerBefore", "enableNative", "composition"]);
  var inputRef = (0, _react.useRef)(null);
  var composition = (0, _react.useRef)(false);
  var isPassword = isPasswordProp || htmlType === 'password';
  var clsPrefix = prefix + "input";
  var _useContext = (0, _react.useContext)(_form.default.ItemContext),
    validateState = _useContext.validateState,
    contentAlign = _useContext.contentAlign,
    hasFeedback = _useContext.hasFeedback;
  var _useValue = (0, _hooks.useValue)(props, '', {
      fitValue: function fitValue(v) {
        if ((0, _utils.isNumber)(maxLength) && maxLength > 0) {
          return ("" + v).length > maxLength ? ("" + v).substr(0, maxLength) : v;
        }
        return v;
      }
    }),
    value = _useValue[0],
    setValue = _useValue[1],
    isControlled = _useValue[2],
    setPropValue = _useValue[3];
  var _useState = (0, _react.useState)(false),
    isFocused = _useState[0],
    setFocusState = _useState[1];
  var state = stateProp || validateState;
  var editable = !disabled && !readOnly;
  var showClear = hasClear && (_env.isWeb && isFocused || _utils.isMiniappPlatform) && !!value && editable;
  var clses = {
    input: (0, _classnames.default)(clsPrefix, clsPrefix + "--" + size, clsPrefix + "--" + type, (_classNames = {}, _classNames[clsPrefix + "--hasIcon"] = showClear || state !== 'normal', _classNames[clsPrefix + "--" + type + "-highlighted"] = highlightable && isFocused, _classNames), className),
    textInputWrapper: (0, _classnames.default)(clsPrefix + "-textinput-wrapper", (_classNames2 = {}, _classNames2[clsPrefix + "-textinput-wrapper--multiline"] = multiline, _classNames2)),
    textInput: (0, _classnames.default)(clsPrefix + "-textinput", clsPrefix + "-textinput--" + size, clsPrefix + "-textinput--" + type, clsPrefix + "-textinput--" + (alignProp || contentAlign), (_classNames3 = {}, _classNames3[clsPrefix + "-textinput--" + type + "-disabled"] = disabled, _classNames3[clsPrefix + "-textinput--" + size + "-multiline"] = multiline, _classNames3[clsPrefix + "-textinput--wechat"] = _utils.isStrictWechatMiniProgram, _classNames3[clsPrefix + "-textinput--not-bw"] = !_utils.isStrictByteDanceMicroApp && !_utils.isStrictWechatMiniProgram, _classNames3[clsPrefix + "-textinput--" + type + "-readonly"] = readOnly, _classNames3[clsPrefix + "-textinput--" + type + "-placeholder"] = readOnly && !value && placeholder, _classNames3)),
    icon: (0, _classnames.default)(clsPrefix + "-icon", clsPrefix + "-icon--" + size, (_classNames4 = {}, _classNames4[clsPrefix + "-icon--loading"] = state === 'loading', _classNames4[clsPrefix + "-icon--warning"] = state === 'warning', _classNames4[clsPrefix + "-icon--success"] = state === 'success', _classNames4[clsPrefix + "-icon--error"] = state === 'error', _classNames4)),
    clear: (0, _classnames.default)(clsPrefix + "-icon", clsPrefix + "-icon--" + size, (_classNames5 = {}, _classNames5[clsPrefix + "-icon--clear"] = hasClear, _classNames5)),
    limitHint: (0, _classnames.default)(clsPrefix + "-limit-hint", clsPrefix + "-limit-hint--" + type, clsPrefix + "-limit-hint--" + size),
    addonBefore: clsPrefix + "-addon-before--" + size,
    addonAfter: clsPrefix + "-addon-after--" + size
  };
  var triggerChange = function (v, e) {
    var _a, _b, _c;
    onChange(v, e);
    if (_env.isWeb) {
      var r;
      try {
        if ((0, _utils.isNumber)((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.selectionEnd)) {
          r = [e.target.selectionEnd, e.target.selectionEnd];
        }
        if (Array.isArray(r) && ((_c = (_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b._nativeNode) === null || _c === void 0 ? void 0 : _c.setSelectionRange)) {
          setTimeout(function () {
            inputRef.current._nativeNode.setSelectionRange(r[0], r[1]);
          }, 32);
        }
      } catch (err) {}
    }
  };
  var handleChange = function (v, e) {
    if (isControlled) {
      if (composition.current) {
        setPropValue(v);
      }
    } else {
      setValue(v);
    }
    if (composition.current) {
      return;
    }
    triggerChange(v, e);
  };
  var handleCompositionStart = function (e) {
    composition.current = true;
    if (onCompositionStart) {
      onCompositionStart(e);
    }
  };
  var handleCompositionEnd = function (e) {
    composition.current = false;
    if (onCompositionEnd) {
      onCompositionEnd(e);
    }
    triggerChange((0, _utils.getValueFromEvents)(e), e);
  };
  var clearEvt = (_clearEvt = {}, _clearEvt[_env.isWeb ? 'onTouchEnd' : 'onClick'] = function handleClear(e) {
    if (disabled || readOnly) {
      return;
    }
    if (e && e.preventDefault) {
      e.preventDefault();
    }
    if (onClear) {
      onClear(e);
    }
    handleChange('', e);
    if (inputRef && inputRef.current) {
      inputRef.current.focus();
    }
  }, _clearEvt);
  if (compositionProp) {
    others.onCompositionStart = handleCompositionStart;
    others.onCompositionEnd = handleCompositionEnd;
  }
  (0, _react.useImperativeHandle)(ref, function () {
    return Object.assign((0, _utils.get)(inputRef, 'current') || {});
  });
  return /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clses.input
  }, addonBefore ? /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clses.addonBefore
  }, addonBefore) : null, readOnly ? /*#__PURE__*/(0, _react.createElement)(_meetReactComponentOne.Text, {
    className: clses.textInput,
    numberOfLines: multiline ? 'auto' : 1
  }, value || placeholder, "\xA0") : /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clses.textInputWrapper
  }, innerBefore, /*#__PURE__*/(0, _react.createElement)(_meetReactComponentOne.TextInput, _extends({
    ref: inputRef,
    autoHeight: true
  }, others, {
    editable: editable,
    value: value,
    keyboardType: keyboardType,
    multiline: multiline,
    maxLength: maxLength,
    numberOfLines: rows,
    className: clses.textInput
  }, isPassword ? {
    type: 'password'
  } : null, {
    secureTextEntry: isPassword,
    password: isPassword,
    onFocus: function handleFocus(e) {
      setFocusState(true);
      onFocus(e);
    },
    onBlur: function handleBlur(e) {
      if (_env.isWeb) {
        if (inputRef && inputRef.current && inputRef.current._nativeNode !== document.activeElement) {
          setFocusState(false);
          onBlur(e);
        }
      } else {
        setFocusState(false);
        onBlur(e);
      }
    },
    onConfirm: function handleConfirm(e) {
      return onConfirm((0, _utils.getValueFromEvents)(e), e);
    },
    placeholder: placeholder,
    controlled: controlled,
    autoFocus: autoFocus || focused,
    onInput: function onInput(e) {
      return handleChange((0, _utils.getValueFromEvents)(e), e);
    },
    onChange: function (e) {
      return (0, _utils.stopPropagation)(e);
    },
    placeholderColor: undefined,
    "placeholder-class": clsPrefix + "-placeholder",
    enableNative: enableNative,
    showCount: false
  })), (0, _utils.isNumber)(maxLength) && maxLength > 0 && showLimitHint ? /*#__PURE__*/(0, _react.createElement)(_meetReactComponentOne.Text, {
    className: clses.limitHint
  }, value.length || 0, "/", maxLength) : null), !multiline ? /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clsPrefix + "-items " + clsPrefix + "-items--" + size
  }, showClear ? /*#__PURE__*/(0, _react.createElement)(_view.default, _extends({
    className: clsPrefix + "-icon-wrapper"
  }, clearEvt), /*#__PURE__*/(0, _react.createElement)(_icon.default, {
    name: "delete-filling",
    className: clses.clear
  })) : null, !showClear && state !== 'normal' && hasFeedback ? /*#__PURE__*/(0, _react.createElement)(_icon.default, {
    className: clses.icon,
    name: ICON_NAME_MAP[state]
  }) : null, innerAfter, addonAfter ? /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clses.addonAfter
  }, addonAfter) : null) : null);
};
Input.displayName = 'Input';
var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(Input);