@arco-design/mobile-react 2.19.0

package/cjs/input/demo/style/mobile.less

@@ -0,0 +1,75 @@
+@import "../../../../style/mixin.less";
+
+#demo-input {
+    .rem(padding-bottom, 45);
+
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+        background: transparent;
+    }
+    .@{prefix}-input-container {
+        .use-var(background, background-color);
+
+        &:not(:first-of-type) {
+            .rem(margin-top, 8);
+        }
+    }
+
+    .demo-input-maxlength {
+        .rem(font-size, 14);
+        color: #86909c;
+
+        &.error {
+            color: #f53f3f;
+        }
+    }
+
+    .demo-input-red-placeholder {
+        caret-color: #f53f3f;
+
+        &::placeholder {
+            color: #f53f3f;
+        }
+    }
+
+    .demo-input-error-hint {
+        .rem(font-size, 12);
+        color: #f53f3f;
+        .rem(padding, 0, 0, 16, 104);
+        .rem(margin-top, -8);
+
+        svg,
+        span {
+            vertical-align: middle;
+        }
+
+        svg {
+            .rem(margin-right, 4);
+        }
+    }
+
+    .demo-input-icon {
+        display: flex;
+        align-items: center;
+    }
+
+    .demo-input-title {
+        .rem(font-size, 13);
+        .rem(line-height, 18);
+        .rem(margin-bottom, -8);
+        .rem(padding, 16, 0, 0, 16);
+    }
+    .demo-input-btn-input .@{prefix}-input-wrap {
+        height: auto;
+    }
+
+    .demo-input-btn-wrap {
+        .rem(padding, 11, 0);
+    }
+
+    .demo-input-money {
+        .rem(font-size, 20);
+        font-weight: bold;
+        .rem(margin-right, -12);
+    }
+}

package/cjs/input/hooks.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import { BasicInputProps } from './props';
+export declare type InputEleType = HTMLInputElement | HTMLTextAreaElement;
+export declare function useInputLogic(props: BasicInputProps<InputEleType>, inputRef: React.MutableRefObject<InputEleType | null>): {
+    inputValue: string;
+    handleChange: (e: React.ChangeEvent<InputEleType>) => void;
+    handleInput: (e: any) => void;
+    handleKeyDown: (e: React.KeyboardEvent<InputEleType>) => void;
+    handleFocus: (e: React.FocusEvent<InputEleType>) => void;
+    handleBlur: (e: React.FocusEvent<InputEleType>) => void;
+    handleClick: (e: React.MouseEvent<InputEleType>) => void;
+    renderWrapper: (prefixCls: string, type: string, children: ReactNode) => JSX.Element;
+    wrapRef: React.MutableRefObject<HTMLDivElement | null>;
+};

package/cjs/input/hooks.js

@@ -0,0 +1,213 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.useInputLogic = useInputLogic;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _IconClear = _interopRequireDefault(require("../icon/IconClear"));
+
+var _helpers = require("../_helpers");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function useInputLogic(props, inputRef) {
+  var value = props.value,
+      defaultValue = props.defaultValue,
+      validator = props.validator,
+      onChange = props.onChange,
+      onInput = props.onInput,
+      className = props.className,
+      style = props.style,
+      label = props.label,
+      required = props.required,
+      prepend = props.prepend,
+      append = props.append,
+      blurBeforeFocus = props.blurBeforeFocus,
+      onKeyDown = props.onKeyDown,
+      onPressEnter = props.onPressEnter,
+      onFocus = props.onFocus,
+      onBlur = props.onBlur,
+      onClick = props.onClick,
+      disabled = props.disabled,
+      _props$border = props.border,
+      border = _props$border === void 0 ? 'half' : _props$border,
+      prefix = props.prefix,
+      suffix = props.suffix,
+      clearable = props.clearable,
+      _props$clearShowType = props.clearShowType,
+      clearShowType = _props$clearShowType === void 0 ? 'focus' : _props$clearShowType,
+      _props$clearIcon = props.clearIcon,
+      clearIcon = _props$clearIcon === void 0 ? /*#__PURE__*/_react.default.createElement(_IconClear.default, null) : _props$clearIcon,
+      onClear = props.onClear,
+      autoFocus = props.autoFocus;
+
+  var _useState = (0, _react.useState)(value || defaultValue || ''),
+      inputValue = _useState[0],
+      setInputValue = _useState[1];
+
+  var _useState2 = (0, _react.useState)(function () {
+    return clearShowType === 'always' || clearShowType === 'value' && Boolean(value || defaultValue);
+  }),
+      showClear = _useState2[0],
+      toggleClear = _useState2[1];
+
+  var focusingRef = (0, _react.useRef)(false);
+  var actualInputValue = value !== void 0 ? value : inputValue;
+  var system = (0, _helpers.useSystem)();
+  var wrapRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (autoFocus) {
+      setTimeout(function () {
+        inputRef.current && inputRef.current.focus();
+      }, 200);
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    // 处理受控模式下的showClear
+    // @en Handling showClear in controlled mode
+    if (clearShowType === 'value' && value !== void 0) {
+      toggleClear(Boolean(value));
+    }
+  }, [value]);
+
+  function changeValue(nowValue, callback) {
+    if (callback === void 0) {
+      callback = function callback() {};
+    }
+
+    if (nowValue && validator) {
+      if (typeof validator === 'function') {
+        if (!validator(nowValue)) {
+          return;
+        }
+      } else if (!validator.test(nowValue)) {
+        return;
+      }
+    } // 处理非受控模式下的showClear
+    // @en Handling showClear in uncontrolled mode
+
+
+    if (clearShowType === 'value' && value === void 0) {
+      toggleClear(Boolean(nowValue));
+    }
+
+    setInputValue(nowValue);
+    callback();
+  }
+
+  function handleChange(e) {
+    var newValue = e.target.value;
+    changeValue(newValue, function () {
+      onChange && onChange(e, newValue);
+    });
+  }
+
+  function handleInput(e) {
+    var newValue = e.target.value;
+    changeValue(newValue, function () {
+      onInput && onInput(e, newValue);
+    });
+  }
+
+  function handleKeyDown(e) {
+    if (e.keyCode === 13) {
+      onPressEnter && onPressEnter(e);
+    }
+
+    onKeyDown && onKeyDown(e);
+  }
+
+  function handleFocus(e) {
+    (0, _mobileUtils.nextTick)(function () {
+      focusingRef.current = true;
+      clearShowType === 'focus' && toggleClear(true);
+      onFocus && onFocus(e);
+    });
+  }
+
+  function handleBlur(e) {
+    (0, _mobileUtils.nextTick)(function () {
+      focusingRef.current = false;
+      clearShowType === 'focus' && toggleClear(false);
+      onBlur && onBlur(e);
+    });
+  }
+
+  function handleClick(e) {
+    // 安卓才会有键盘切换不过来的问题，ios不开启此项，因为blur之后不能再自动focus
+    // @en Android will have the problem that the keyboard cannot be switched. iOS does not enable this, because it can no longer automatically focus after blur.
+    if (blurBeforeFocus && system === 'android' && !focusingRef.current) {
+      inputRef.current && inputRef.current.blur();
+      (0, _mobileUtils.nextTick)(function () {
+        inputRef.current && inputRef.current.focus();
+      });
+    } else {
+      inputRef.current && inputRef.current.focus();
+    }
+
+    onClick && onClick(e);
+  }
+
+  function handleClear(e) {
+    // 不展示清除按钮时不触发事件
+    // @en No event fired when clear button is not displayed
+    if (!clearable || !showClear) {
+      return;
+    }
+
+    changeValue('', function () {
+      onClear && onClear(e); // 当点击clear前是focus时强制执行focus
+      // @en Enforce focus when focus is before clicking clear
+
+      if (focusingRef.current) {
+        inputRef.current && inputRef.current.focus();
+      }
+    });
+  }
+
+  function renderWrapper(prefixCls, type, children) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-container all-border-box " + (className || ''),
+      style: style,
+      ref: wrapRef
+    }, prepend, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-wrap", type, "border-" + border, system, {
+        disabled: disabled
+      }, {
+        prefix: prefix
+      }, {
+        suffix: suffix
+      })
+    }, label || prefix ? /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-prefix"
+    }, label ? /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-label", {
+        required: required
+      })
+    }, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-clear",
+      onClick: handleClear
+    }, clearIcon) : null, suffix ? /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-suffix"
+    }, suffix) : null), append);
+  }
+
+  return {
+    inputValue: actualInputValue,
+    handleChange: handleChange,
+    handleInput: handleInput,
+    handleKeyDown: handleKeyDown,
+    handleFocus: handleFocus,
+    handleBlur: handleBlur,
+    handleClick: handleClick,
+    renderWrapper: renderWrapper,
+    wrapRef: wrapRef
+  };
+}

package/cjs/input/index.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { BasicInputProps } from './props';
+export interface InputProps extends BasicInputProps {
+    /**
+     * 输入框类型
+     * @en Input box type
+     * @default "text"
+     */
+    type?: string;
+    /**
+     * 检查控件值的正则表达式
+     * @en Regular expression to check the value of input box
+     */
+    pattern?: string;
+    /**
+     * 输入框dom自定义类名
+     * @en Custom classname for input DOM
+     */
+    inputClass?: string;
+    /**
+     * 输入框dom自定义样式
+     * @en Custom style for input DOM
+     */
+    inputStyle?: React.CSSProperties;
+    /**
+     * 其他未列出的原生属性，优先级低于已列出的组件属性
+     *  @en Other unlisted native properties have lower priority than listed component properties
+     */
+    nativeProps?: React.InputHTMLAttributes<HTMLInputElement>;
+}
+export interface InputRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 原生输入框 DOM
+     * @en Native input DOM
+     */
+    input: HTMLInputElement | null;
+}
+/**
+ * 输入框组件，支持添加前后缀。
+ * @en The input box, supports adding prefixes and suffixes.
+ * @type 数据输入
+ * @type_en Data Entry
+ * @name 输入框
+ * @name_en Input
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
+export default Input;

package/cjs/input/index.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _contextProvider = require("../context-provider");
+
+var _hooks = require("./hooks");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * 输入框组件，支持添加前后缀。
+ * @en The input box, supports adding prefixes and suffixes.
+ * @type 数据输入
+ * @type_en Data Entry
+ * @name 输入框
+ * @name_en Input
+ */
+var Input = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var id = props.id,
+      name = props.name,
+      maxLength = props.maxLength,
+      placeholder = props.placeholder,
+      readOnly = props.readOnly,
+      onKeyUp = props.onKeyUp,
+      onKeyPress = props.onKeyPress,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'text' : _props$type,
+      disabled = props.disabled,
+      pattern = props.pattern,
+      inputClass = props.inputClass,
+      inputStyle = props.inputStyle,
+      _props$nativeProps = props.nativeProps,
+      nativeProps = _props$nativeProps === void 0 ? {} : _props$nativeProps;
+  var inputRef = (0, _react.useRef)(null);
+
+  var _useInputLogic = (0, _hooks.useInputLogic)(props, inputRef),
+      inputValue = _useInputLogic.inputValue,
+      handleChange = _useInputLogic.handleChange,
+      handleInput = _useInputLogic.handleInput,
+      handleKeyDown = _useInputLogic.handleKeyDown,
+      handleFocus = _useInputLogic.handleFocus,
+      handleBlur = _useInputLogic.handleBlur,
+      handleClick = _useInputLogic.handleClick,
+      renderWrapper = _useInputLogic.renderWrapper,
+      wrapRef = _useInputLogic.wrapRef;
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: wrapRef.current,
+      input: inputRef.current
+    };
+  });
+
+  function renderInput(_ref) {
+    var prefixCls = _ref.prefixCls;
+    var prefix = prefixCls + "-input";
+    return renderWrapper(prefix, type, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, nativeProps, {
+      id: id,
+      name: name,
+      maxLength: maxLength,
+      placeholder: placeholder,
+      readOnly: readOnly,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onKeyUp: onKeyUp,
+      onKeyPress: onKeyPress,
+      ref: inputRef,
+      className: (0, _mobileUtils.cls)(prefix, inputClass),
+      style: inputStyle,
+      value: inputValue,
+      type: type,
+      disabled: disabled,
+      pattern: pattern,
+      onChange: handleChange,
+      onInput: handleInput,
+      onKeyDown: handleKeyDown,
+      onClick: handleClick
+    })));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, renderInput);
+});
+var _default = Input;
+exports.default = _default;

package/cjs/input/props.d.ts

@@ -0,0 +1,170 @@
+import React from 'react';
+export interface BasicInputProps<T = HTMLInputElement> {
+    /**
+     * 输入框的id
+     * @en Input id
+     */
+    id?: string;
+    /**
+     * 输入框的name
+     * @en Input name
+     */
+    name?: string;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 绑定值，传入即受控
+     * @en Binding value, if input, the component is controlled
+     */
+    value?: string;
+    /**
+     * 默认值
+     * @en Default value
+     */
+    defaultValue?: string;
+    /**
+     * 最大输入长度
+     * @en Maximum input length
+     */
+    maxLength?: number;
+    /**
+     * 边框展示类型
+     * @en Border display type
+     * @default "half"
+     */
+    border?: 'all' | 'half' | 'bottom' | 'none';
+    /**
+     * 占位文本
+     * @en Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * 输入框是否禁用
+     * @en Whether the input box is disabled
+     */
+    disabled?: boolean;
+    /**
+     * 是否只读
+     * @en Read-only
+     */
+    readOnly?: boolean;
+    /**
+     * 是否自动获取焦点
+     * @en Whether to automatically get the focus
+     */
+    autoFocus?: boolean;
+    /**
+     * 输入框左侧文本
+     * @en text to the left of the input box
+     */
+    label?: string | React.ReactNode;
+    /**
+     * 是否必填项
+     * @en Whether it is required
+     */
+    required?: boolean;
+    /**
+     * 正则验证，不符合验证的不允许输入
+     * @en Regular validation, input is not allowed if it does not meet the validation
+     */
+    validator?: RegExp | ((value: string) => boolean);
+    /**
+     * 输入框头部内容，在输入框外部
+     * @en The content of the header of the input box, outside the input box
+     */
+    prepend?: React.ReactNode;
+    /**
+     * 输入框尾部内容，在输入框外部
+     * @en The content at the end of the input box, outside the input box
+     */
+    append?: React.ReactNode;
+    /**
+     * 在聚焦之前blur掉，即切换不同input时会重新弹起键盘，常用于input type切换时重新加载键盘，安卓上有效
+     * @en Blur before focusing, that is, the keyboard will be re-bounced when switching between different inputs. It is often used to reload the keyboard when the input type is switched. It is valid on Android.
+     */
+    blurBeforeFocus?: boolean;
+    /**
+     * 是否有清除按钮
+     * @en whether there is a clear button
+     */
+    clearable?: boolean;
+    /**
+     * 清除按钮展示时机：focus - 聚焦时展示 value - 有值则展示 always - 始终展示
+     * @en Clear button display timing: focus - display when focused, value - display when there is value, always - always display
+     * @default "focus"
+     */
+    clearShowType?: 'focus' | 'value' | 'always';
+    /**
+     * 清除按钮类型，也可自定义
+     * @en Clear button type, also customizable
+     * @default \<IconClear className="clear-icon" /\>
+     */
+    clearIcon?: React.ReactNode;
+    /**
+     * 按下清除按钮回调
+     * @en Callback when clear button is pressed
+     */
+    onClear?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /**
+     * 输入框前置内容，在输入框内部，也可自定义
+     * @en The prefix of the input box, inside the input box, can also be customized
+     */
+    prefix?: React.ReactNode;
+    /**
+     * 输入框后置内容，在输入框内部，也可自定义
+     * @en The suffix content of the input box, inside the input box, can also be customized
+     */
+    suffix?: React.ReactNode;
+    /**
+     * 数据改变时触发（失去焦点时）
+     * @en Fired when the data changes (when bluring the focus)
+     */
+    onChange?: (e: React.ChangeEvent<T>, value: string) => void;
+    /**
+     * 数据改变时触发
+     * @en Callback when data changes
+     */
+    onInput?: (e: React.ChangeEvent<T>, value: string) => void;
+    /**
+     * 输入框聚焦时触发
+     * @en Callback when the input box is focused
+     */
+    onFocus?: (e: React.FocusEvent<T>) => void;
+    /**
+     * 输入框失去焦点时触发
+     * @en Callback when the input box is blured
+     */
+    onBlur?: (e: React.FocusEvent<T>) => void;
+    /**
+     * 点击输入框事件
+     * @en Callback when clicking the input box
+     */
+    onClick?: (e: React.MouseEvent<T>) => void;
+    /**
+     * 原生的keyup事件
+     * @en Native keyup event
+     */
+    onKeyUp?: (e: React.KeyboardEvent<T>) => void;
+    /** 原生的keydown事件
+     * @en Native keydown event
+     */
+    onKeyDown?: (e: React.KeyboardEvent<T>) => void;
+    /**
+     * 原生的keypress事件
+     * @en Native keypress event
+     */
+    onKeyPress?: (e: React.KeyboardEvent<T>) => void;
+    /**
+     * 按下回车键时触发
+     * @en Callback when the enter key is pressed
+     */
+    onPressEnter?: (e: React.KeyboardEvent<T>) => void;
+}

package/cjs/input/props.js

@@ -0,0 +1,3 @@
+"use strict";
+
+exports.__esModule = true;