@arco-design/mobile-react 2.31.5 → 2.32.0

package/esnext/input/hooks.js

@@ -0,0 +1,174 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { cls, nextTick } from '@arco-design/mobile-utils';
+import IconClear from '../icon/IconClear';
+import { useSystem } from '../_helpers';
+export function useInputLogic(props, inputRef) {
+    const { value, defaultValue, validator, onChange, onInput, className, style, label, required, prepend, append, blurBeforeFocus, onKeyDown, onPressEnter, onFocus, onBlur, onClick, disabled, border = 'half', prefix, suffix, clearable, clearShowType = 'focus', clearIcon = React.createElement(IconClear, null), preventEventWhenClearing = true, onClear, autoFocus, blockChangeWhenCompositing, } = props;
+    const [inputValue, setInputValue] = useState(value || defaultValue || '');
+    const [showClear, toggleClear] = useState(() => clearShowType === 'always' ||
+        (clearShowType === 'value' && Boolean(value || defaultValue)));
+    const compositingRef = useRef(false);
+    const [isFocusing, setIsFocusing] = useState(false);
+    const shouldPreventEvent = useRef(false);
+    const actualInputValue = value !== void 0 ? value : inputValue;
+    const system = useSystem();
+    const wrapRef = useRef(null);
+    const needComposition = system === 'ios' && blockChangeWhenCompositing;
+    useEffect(() => {
+        if (autoFocus) {
+            setTimeout(() => {
+                inputRef.current && inputRef.current.click();
+            }, 100);
+        }
+    }, []);
+    useEffect(() => {
+        const handleCompositionStart = () => {
+            compositingRef.current = true;
+        };
+        const handleCompositionEnd = e => {
+            compositingRef.current = false;
+            handleChange(e);
+        };
+        if (inputRef.current && needComposition) {
+            inputRef.current.addEventListener('compositionstart', handleCompositionStart);
+            inputRef.current.addEventListener('compositionend', handleCompositionEnd);
+        }
+        return () => {
+            if (inputRef.current && needComposition) {
+                inputRef.current.removeEventListener('compositionstart', handleCompositionStart);
+                inputRef.current.removeEventListener('compositionend', handleCompositionEnd);
+            }
+        };
+    }, [needComposition]);
+    useEffect(() => {
+        // 处理受控模式下的showClear
+        // @en Handling showClear in controlled mode
+        if (clearShowType === 'value' && value !== void 0) {
+            toggleClear(Boolean(value));
+        }
+    }, [value]);
+    function changeValue(nowValue, 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) {
+        if (needComposition && compositingRef.current) {
+            return;
+        }
+        const newValue = e.target.value;
+        changeValue(newValue, () => {
+            onChange && onChange(e, newValue);
+        });
+    }
+    function handleInput(e) {
+        const newValue = e.target.value;
+        changeValue(newValue, () => {
+            onInput && onInput(e, newValue);
+        });
+    }
+    function handleKeyDown(e) {
+        if (e.keyCode === 13) {
+            onPressEnter && onPressEnter(e);
+        }
+        onKeyDown && onKeyDown(e);
+    }
+    function handleFocus(e) {
+        if (preventEventWhenClearing && shouldPreventEvent.current) {
+            shouldPreventEvent.current = false;
+            return;
+        }
+        setIsFocusing(true);
+        clearShowType === 'focus' && toggleClear(true);
+        onFocus && onFocus(e);
+    }
+    function handleBlur(e) {
+        if (preventEventWhenClearing && shouldPreventEvent.current) {
+            return;
+        }
+        setIsFocusing(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' && !isFocusing) {
+            inputRef.current && inputRef.current.blur();
+            nextTick(() => {
+                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('', () => {
+            onClear && onClear(e);
+            // 当点击clear前是focus时强制执行focus
+            // @en Enforce focus when focus is before clicking clear
+            if (isFocusing) {
+                if (preventEventWhenClearing) {
+                    shouldPreventEvent.current = true;
+                    // 一段时间未执行blur或focus则重置，避免对下次事件循环造成影响
+                    // @en If blur or focus is not executed for a period of time, it will be reset to avoid affecting the next event loop
+                    setTimeout(() => {
+                        shouldPreventEvent.current = false;
+                    }, 200);
+                }
+                nextTick(() => {
+                    inputRef.current && inputRef.current.focus();
+                });
+            }
+        });
+    }
+    function renderPendNode(pend) {
+        return typeof pend === 'function' ? pend(isFocusing, actualInputValue) : pend;
+    }
+    function renderWrapper(prefixCls, type, children) {
+        // handleClear必须早于handleBlur执行，pc端仅mousedown事件触发早于blur，移动端touch相关事件均早于blur
+        // @en handleClear must be executed earlier than handleBlur
+        // @en only the mousedown event on the PC side is triggered earlier than blur, and the touch-related events on the mobile side are all earlier than blur
+        const clearEvent = { [system === 'pc' ? 'onMouseDown' : 'onTouchEnd']: handleClear };
+        return (React.createElement("div", { role: "search", className: `${prefixCls}-container all-border-box ${className || ''}`, style: style, ref: wrapRef },
+            renderPendNode(prepend),
+            React.createElement("div", { className: cls(`${prefixCls}-wrap`, type, `border-${border}`, system, { disabled }, { prefix }, { suffix }) },
+                label || prefix ? (React.createElement("div", { className: `${prefixCls}-prefix` }, label ? (React.createElement("div", { className: cls(`${prefixCls}-label`, { required }) }, label)) : (prefix))) : null,
+                children,
+                clearable && showClear ? (React.createElement("div", Object.assign({ className: `${prefixCls}-clear` }, clearEvent), clearIcon)) : null,
+                suffix ? React.createElement("div", { className: `${prefixCls}-suffix` }, suffix) : null),
+            renderPendNode(append)));
+    }
+    return {
+        inputValue: actualInputValue,
+        handleChange,
+        handleInput,
+        handleKeyDown,
+        handleFocus,
+        handleBlur,
+        handleClick,
+        renderWrapper,
+        wrapRef,
+    };
+}

package/esnext/input/index.d.ts

@@ -0,0 +1,60 @@
+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>;
+    /**
+     * 无障碍label
+     * @en accessible label
+     */
+    ariaLabel?: string;
+}
+export interface InputRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 原生输入框 DOM
+     * @en Native input DOM
+     */
+    input: HTMLInputElement | null;
+}
+declare const _default: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>> & {
+    displayName?: string | undefined;
+};
+/**
+ * 输入框组件，支持添加前后缀。
+ * @en The input box, supports adding prefixes and suffixes.
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 输入框
+ * @name_en Input
+ * @displayName Input
+ */
+export default _default;

package/esnext/input/index.js

@@ -0,0 +1,28 @@
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import { useInputLogic } from './hooks';
+const Input = forwardRef((props, ref) => {
+    const { id, name, maxLength, placeholder, readOnly, onKeyUp, onKeyPress, type = 'text', disabled, pattern, inputClass, inputStyle, nativeProps = {}, ariaLabel = '', } = props;
+    const inputRef = useRef(null);
+    const { inputValue, handleChange, handleInput, handleKeyDown, handleFocus, handleBlur, handleClick, renderWrapper, wrapRef, } = useInputLogic(props, inputRef);
+    useImperativeHandle(ref, () => ({
+        dom: wrapRef.current,
+        input: inputRef.current,
+    }));
+    function renderInput({ prefixCls }) {
+        const prefix = `${prefixCls}-input`;
+        return renderWrapper(prefix, type, React.createElement("input", Object.assign({}, nativeProps, { id: id, name: name, maxLength: maxLength, placeholder: placeholder, readOnly: readOnly, onFocus: handleFocus, onBlur: handleBlur, onKeyUp: onKeyUp, onKeyPress: onKeyPress, ref: inputRef, className: cls(prefix, inputClass), style: inputStyle, value: inputValue, type: type, disabled: disabled, pattern: pattern, onChange: handleChange, onInput: handleInput, onKeyDown: handleKeyDown, onClick: handleClick, "aria-disabled": disabled, "aria-label": ariaLabel })));
+    }
+    return React.createElement(ContextLayout, null, renderInput);
+});
+/**
+ * 输入框组件，支持添加前后缀。
+ * @en The input box, supports adding prefixes and suffixes.
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 输入框
+ * @name_en Input
+ * @displayName Input
+ */
+export default componentWrapper(Input, 'Input');

package/esnext/input/props.d.ts

@@ -0,0 +1,182 @@
+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;
+    /**
+     * 是否自动获取焦点，开启后会触发一次onClick事件
+     * @en Whether to automatically get the focus, it will trigger an onClick event once after being enabled
+     */
+    autoFocus?: boolean;
+    /**
+     * 当 ios 输入中文时，输拼音的过程不触发onChange，仅确认选择后触发
+     * @en When inputting Chinese on ios, onChange is not triggered during pinyin input, but only after confirming the selection
+     * @default false
+     */
+    blockChangeWhenCompositing?: 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 | ((focusing: boolean, inputValue: string) => React.ReactNode);
+    /**
+     * 输入框尾部内容，在输入框外部
+     * @en The content at the end of the input box, outside the input box
+     */
+    append?: React.ReactNode | ((focusing: boolean, inputValue: string) => 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';
+    /**
+     * 在聚焦模式下点击清除按钮时，是否要屏蔽对应产生的onBlur和onFocus事件
+     * @en Whether to block the onBlur and onFocus events generated when the clear button is clicked in focus mode
+     * @default true
+     */
+    preventEventWhenClearing?: boolean;
+    /**
+     * 清除按钮类型，也可自定义
+     * @en Clear button type, also customizable
+     * @default \<IconClear className="clear-icon" /\>
+     */
+    clearIcon?: React.ReactNode;
+    /**
+     * 按下清除按钮回调
+     * @en Callback when clear button is pressed
+     */
+    onClear?: (e: React.TouchEvent<HTMLElement>) => 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/esnext/input/props.js

@@ -0,0 +1 @@
+export {};