@arco-design/mobile-react 2.38.4 → 2.39.0

package/esm/input/hooks.js

@@ -5,54 +5,49 @@ import IconClear from '../icon/IconClear';
 import { useSystem } from '../_helpers';
 export 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.createElement(IconClear, null) : _props$clearIcon,
-      _props$preventEventWh = props.preventEventWhenClearing,
-      preventEventWhenClearing = _props$preventEventWh === void 0 ? true : _props$preventEventWh,
-      onClear = props.onClear,
-      autoFocus = props.autoFocus,
-      blockChangeWhenCompositing = props.blockChangeWhenCompositing;
-
+    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.createElement(IconClear, null) : _props$clearIcon,
+    _props$preventEventWh = props.preventEventWhenClearing,
+    preventEventWhenClearing = _props$preventEventWh === void 0 ? true : _props$preventEventWh,
+    onClear = props.onClear,
+    autoFocus = props.autoFocus,
+    blockChangeWhenCompositing = props.blockChangeWhenCompositing;
   var _useState = useState(value || defaultValue || ''),
-      inputValue = _useState[0],
-      setInputValue = _useState[1];
-
+    inputValue = _useState[0],
+    setInputValue = _useState[1];
   var _useState2 = useState(function () {
-    return clearShowType === 'always' || clearShowType === 'value' && Boolean(value || defaultValue);
-  }),
-      showClear = _useState2[0],
-      toggleClear = _useState2[1];
-
+      return clearShowType === 'always' || clearShowType === 'value' && Boolean(value || defaultValue);
+    }),
+    showClear = _useState2[0],
+    toggleClear = _useState2[1];
   var compositingRef = useRef(false);
-
   var _useState3 = useState(false),
-      isFocusing = _useState3[0],
-      setIsFocusing = _useState3[1];
-
+    isFocusing = _useState3[0],
+    setIsFocusing = _useState3[1];
   var shouldPreventEvent = useRef(false);
   var actualInputValue = value !== void 0 ? value : inputValue;
   var system = useSystem();
@@ -69,17 +64,14 @@ export function useInputLogic(props, inputRef) {
     var handleCompositionStart = function handleCompositionStart() {
       compositingRef.current = true;
     };
-
     var handleCompositionEnd = function handleCompositionEnd(e) {
       compositingRef.current = false;
       handleChange(e);
     };
-
     if (inputRef.current && needComposition) {
       inputRef.current.addEventListener('compositionstart', handleCompositionStart);
       inputRef.current.addEventListener('compositionend', handleCompositionEnd);
     }
-
     return function () {
       if (inputRef.current && needComposition) {
         inputRef.current.removeEventListener('compositionstart', handleCompositionStart);
@@ -94,12 +86,10 @@ export function useInputLogic(props, inputRef) {
       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)) {
@@ -108,65 +98,53 @@ export function useInputLogic(props, inputRef) {
       } else if (!validator.test(nowValue)) {
         return;
       }
-    } // 处理非受控模式下的showClear
+    }
+    // 处理非受控模式下的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;
     }
-
     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) {
     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.
@@ -178,45 +156,38 @@ export function useInputLogic(props, inputRef) {
     } 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
+      onClear && onClear(e);
+      // 当点击clear前是focus时强制执行focus
       // @en Enforce focus when focus is before clicking clear
-
       if (isFocusing) {
         if (preventEventWhenClearing) {
-          shouldPreventEvent.current = true; // 一段时间未执行blur或focus则重置，避免对下次事件循环造成影响
+          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(function () {
             shouldPreventEvent.current = false;
           }, 200);
         }
-
         nextTick(function () {
           inputRef.current && inputRef.current.focus();
         });
       }
     });
   }
-
   function renderPendNode(pend) {
     return typeof pend === 'function' ? pend(isFocusing, actualInputValue) : pend;
   }
-
   function renderWrapper(prefixCls, type, children) {
     var _clearEvent;
-
     // 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
@@ -246,7 +217,6 @@ export function useInputLogic(props, inputRef) {
       className: prefixCls + "-suffix"
     }, suffix) : null), renderPendNode(append));
   }
-
   return {
     inputValue: actualInputValue,
     handleChange: handleChange,

package/esm/input/index.js

@@ -5,42 +5,39 @@ import { ContextLayout } from '../context-provider';
 import { useInputLogic } from './hooks';
 var Input = /*#__PURE__*/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,
-      _props$ariaLabel = props.ariaLabel,
-      ariaLabel = _props$ariaLabel === void 0 ? '' : _props$ariaLabel;
+    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,
+    _props$ariaLabel = props.ariaLabel,
+    ariaLabel = _props$ariaLabel === void 0 ? '' : _props$ariaLabel;
   var inputRef = useRef(null);
-
   var _useInputLogic = 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;
-
+    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;
   useImperativeHandle(ref, function () {
     return {
       dom: wrapRef.current,
       input: inputRef.current
     };
   });
-
   function renderInput(_ref) {
     var prefixCls = _ref.prefixCls;
     var prefix = prefixCls + "-input";
@@ -69,9 +66,9 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
       "aria-label": ariaLabel
     })));
   }
-
   return /*#__PURE__*/React.createElement(ContextLayout, null, renderInput);
 });
+
 /**
  * 输入框组件，支持添加前后缀。
  * @en The input box, supports adding prefixes and suffixes.
@@ -81,5 +78,4 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
  * @name_en Input
  * @displayName Input
  */
-
 export default componentWrapper(Input, 'Input');

package/esm/keyboard/index.js

@@ -6,31 +6,30 @@ import React, { useRef, forwardRef, useImperativeHandle, useMemo, useCallback, u
 import { GlobalContext } from '../context-provider';
 import { IconKeyboard, IconKeyboardDelete } from '../icon';
 import Popup from '../popup';
-export * from './type'; // 键盘乱序
-// @en let keyboard random
+export * from './type';
 
+// 键盘乱序
+// @en let keyboard random
 var makeArrayRandom = function makeArrayRandom(targetArray) {
   var randomFn = function randomFn() {
     return Math.random() - 0.5;
   };
-
   return targetArray.sort(randomFn);
 };
-
 var splitArray = function splitArray(target) {
   return target.reduce(function (acc, cur) {
     if (!acc[acc.length - 1] || acc[acc.length - 1].length >= 3) {
       acc.push([]);
     }
-
     acc[acc.length - 1].push(cur);
     return acc;
   }, []);
-}; // 纯数字类字符
-// @en Pure numeric characters
-
+};
 
+// 纯数字类字符
+// @en Pure numeric characters
 var contentArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
+
 /**
  * 数字键盘组件
  * @en Keyboard component
@@ -39,56 +38,49 @@ var contentArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
  * @name 数字键盘
  * @name_en Keyboard
  */
-
 var Keyboard = /*#__PURE__*/forwardRef(function (props, ref) {
   var normalKeyClass = props.normalKeyClass,
-      normalKeyStyle = props.normalKeyStyle,
-      _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      style = props.style,
-      _props$type = props.type,
-      type = _props$type === void 0 ? 'number' : _props$type,
-      _props$randomOrder = props.randomOrder,
-      randomOrder = _props$randomOrder === void 0 ? false : _props$randomOrder,
-      title = props.title,
-      rightColumns = props.rightColumns,
-      confirmClosable = props.confirmClosable,
-      confirmButton = props.confirmButton,
-      deleteButton = props.deleteButton,
-      keyboardButton = props.keyboardButton,
-      close = props.close,
-      onConfirm = props.onConfirm,
-      onDelete = props.onDelete,
-      onChange = props.onChange,
-      resetProps = _objectWithoutPropertiesLoose(props, _excluded);
-
+    normalKeyStyle = props.normalKeyStyle,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    style = props.style,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'number' : _props$type,
+    _props$randomOrder = props.randomOrder,
+    randomOrder = _props$randomOrder === void 0 ? false : _props$randomOrder,
+    title = props.title,
+    rightColumns = props.rightColumns,
+    confirmClosable = props.confirmClosable,
+    confirmButton = props.confirmButton,
+    deleteButton = props.deleteButton,
+    keyboardButton = props.keyboardButton,
+    close = props.close,
+    onConfirm = props.onConfirm,
+    onDelete = props.onDelete,
+    onChange = props.onChange,
+    resetProps = _objectWithoutPropertiesLoose(props, _excluded);
   var popupRef = useRef(null);
   var keyboardRef = useRef(null);
-
   var _useContext = useContext(GlobalContext),
-      prefixCls = _useContext.prefixCls,
-      _useContext$locale = _useContext.locale,
-      locale = _useContext$locale === void 0 ? defaultLocale : _useContext$locale;
-
-  var prefix = prefixCls + "-keyboard"; // 3x4键盘的按键内容
+    prefixCls = _useContext.prefixCls,
+    _useContext$locale = _useContext.locale,
+    locale = _useContext$locale === void 0 ? defaultLocale : _useContext$locale;
+  var prefix = prefixCls + "-keyboard";
+  // 3x4键盘的按键内容
   // @en 3x4 Keyboard button content
-
   var displayData = useMemo(function () {
     var numberArr = randomOrder ? makeArrayRandom(contentArray) : contentArray;
     var lastNum = numberArr.slice(-1)[0];
     var finalData = splitArray(numberArr.slice(0, -1));
-
     switch (type) {
       case 'confirm':
         finalData.push([lastNum, '.']);
         break;
-
       case 'tool':
         finalData.push(['.', lastNum, {
           type: 'delete'
         }]);
         break;
-
       case 'number':
       default:
         finalData.push([{
@@ -98,37 +90,34 @@ var Keyboard = /*#__PURE__*/forwardRef(function (props, ref) {
         }]);
         break;
     }
-
     return finalData;
-  }, [type]); // 右边一列
-  // @en Right column
+  }, [type]);
 
+  // 右边一列
+  // @en Right column
   var rightColumn = useMemo(function () {
     switch (type) {
       case 'number':
         return [];
-
       case 'confirm':
         {
           return [{
             type: 'delete'
           }];
         }
-
       case 'tool':
         return ['+', '-', '×', '÷'];
-
       default:
         return [];
     }
-  }, [type]); // 确认按钮需要在type为confirm时展示
-  // @en Display then confirm button when type is confirm
+  }, [type]);
 
+  // 确认按钮需要在type为confirm时展示
+  // @en Display then confirm button when type is confirm
   var getConfirmButton = useCallback(function () {
     if (type !== 'confirm') {
       return null;
     }
-
     return /*#__PURE__*/React.createElement("div", {
       onClick: function onClick() {
         confirmClosable && close();
@@ -136,20 +125,19 @@ var Keyboard = /*#__PURE__*/forwardRef(function (props, ref) {
       },
       className: cls(prefix + "-key", prefix + "-key-confirm")
     }, confirmButton || locale.Keyboard.confirm);
-  }, [type]); // 点击空白处关闭键盘
-  // @en Close keyboard when clicked the blank space
+  }, [type]);
 
+  // 点击空白处关闭键盘
+  // @en Close keyboard when clicked the blank space
   useEffect(function () {
     var handlerDocumentClick = function handlerDocumentClick(e) {
       if (!keyboardRef.current) {
         return;
       }
-
       if (!keyboardRef.current.contains(e.target) && e.target !== keyboardRef.current) {
         close();
       }
     };
-
     document.addEventListener('click', handlerDocumentClick);
     return function () {
       document.removeEventListener('click', handlerDocumentClick);
@@ -160,35 +148,28 @@ var Keyboard = /*#__PURE__*/forwardRef(function (props, ref) {
       keyboard: keyboardRef.current
     }, popupRef.current);
   });
-
   var handleButtonClick = function handleButtonClick(ele) {
     switch (ele.type) {
       case 'delete':
         onDelete == null ? void 0 : onDelete();
         break;
-
       case 'keyboard':
         close();
         break;
-
       default:
         onChange == null ? void 0 : onChange(ele.value);
     }
   };
-
   var renderButtonContent = function renderButtonContent(ele) {
     switch (ele.type) {
       case 'delete':
         return deleteButton || /*#__PURE__*/React.createElement(IconKeyboardDelete, null);
-
       case 'keyboard':
         return keyboardButton || /*#__PURE__*/React.createElement(IconKeyboard, null);
-
       default:
         return ele.content;
     }
   };
-
   var renderButton = function renderButton(data, key, extraClass) {
     var ele = typeof data === 'string' || typeof data === 'number' ? {
       type: 'content',
@@ -204,19 +185,16 @@ var Keyboard = /*#__PURE__*/forwardRef(function (props, ref) {
       style: normalKeyStyle
     }, renderButtonContent(ele));
   };
-
   var renderKeyboardRightColumns = function renderKeyboardRightColumns() {
     if (rightColumns) {
       return rightColumns;
     }
-
     return rightColumn.length > 0 ? /*#__PURE__*/React.createElement("div", {
       className: prefix + "-col"
     }, rightColumn.map(function (item, index) {
       return renderButton(item, String(index));
     }), getConfirmButton()) : null;
   };
-
   return /*#__PURE__*/React.createElement(Popup, _extends({
     ref: popupRef,
     maskClass: prefix + "-popup",
@@ -235,7 +213,6 @@ var Keyboard = /*#__PURE__*/forwardRef(function (props, ref) {
       key: index
     }, item.map(function (e, idx) {
       var _renderButton;
-
       return renderButton(e, String(idx), (_renderButton = {}, _renderButton[prefix + "-key-special"] = type === 'confirm' && index === displayData.length - 1 && idx === 0, _renderButton));
     }));
   })), renderKeyboardRightColumns())));