@arco-design/mobile-react 2.25.3 → 2.26.0

package/esm/image-preview/methods.js

@@ -8,32 +8,42 @@ export function open(Component) {
     }, config || {}, {
       close: function close() {}
     });
-    var dynamicProps = _extends({}, baseProps);
 
-    // 不同的key用不同的容器挂载
+    var dynamicProps = _extends({}, baseProps); // 不同的key用不同的容器挂载
     // @en Different keys are mounted in different containers
+
+
     var id = "_ARCO_IMAGE_PREVIEW_DIV_" + (baseProps.key || '') + "_";
+
     var _appendElementById = appendElementById(id, baseProps.getContainer),
-      div = _appendElementById.child;
+        div = _appendElementById.child;
+
     var leaving = false;
+
     var _ReactDOMRender = new ReactDOMRender(Component, div, context),
-      render = _ReactDOMRender.render;
+        render = _ReactDOMRender.render;
+
     function update(newConfig) {
       dynamicProps = _extends({}, dynamicProps, newConfig || {});
       render(dynamicProps);
     }
+
     function close() {
       leaving = true;
       dynamicProps.openIndex = -1;
       render(dynamicProps);
     }
+
     dynamicProps.close = close;
+
     dynamicProps.onClose = function () {
       baseProps.onClose && baseProps.onClose();
+
       if (baseProps.unmountOnExit) {
         removeElement(div);
       }
     };
+
     dynamicProps.openIndex = -1;
     render(dynamicProps);
     setTimeout(function () {

package/esm/index.d.ts

@@ -1,20 +1,17 @@
+export { default as Button } from './button';
 export { default as ActionSheet } from './action-sheet';
-export { default as Cell } from './cell';
-export { default as Loading } from './loading';
-export { default as Badge } from './badge';
 export { default as Avatar } from './avatar';
-export { default as Button } from './button';
+export { default as Badge } from './badge';
 export { default as Carousel } from './carousel';
-export { default as Toast } from './toast';
-export { default as Switch } from './switch';
+export { default as Cell } from './cell';
 export { default as Checkbox } from './checkbox';
 export { default as CircleProgress } from './circle-progress';
 export { default as Collapse } from './collapse';
-export { default as Tabs } from './tabs';
 export { default as ContextProvider } from './context-provider';
-export { default as Dialog } from './dialog';
 export { default as CountDown } from './count-down';
 export { default as DatePicker } from './date-picker';
+export { default as Divider } from './divider';
+export { default as Dialog } from './dialog';
 export { default as Dropdown } from './dropdown';
 export { default as DropdownMenu } from './dropdown-menu';
 export { default as Ellipsis } from './ellipsis';
@@ -22,14 +19,15 @@ export { default as Form } from './form';
 export { default as Input } from './input';
 export { default as Textarea } from './textarea';
 export { default as Radio } from './radio';
-export { default as ImagePicker } from './image-picker';
 export { default as Rate } from './rate';
 export { default as Slider } from './slider';
 export { default as Grid } from './grid';
 export { default as Image } from './image';
 export { default as ShowMonitor } from './show-monitor';
+export { default as ImagePicker } from './image-picker';
 export { default as ImagePreview } from './image-preview';
 export { default as LoadMore } from './load-more';
+export { default as Loading } from './loading';
 export { default as Masking } from './masking';
 export { default as NavBar } from './nav-bar';
 export { default as NoticeBar } from './notice-bar';
@@ -49,6 +47,9 @@ export { default as Steps } from './steps';
 export { default as Sticky } from './sticky';
 export { default as SwipeAction } from './swipe-action';
 export { default as SwipeLoad } from './swipe-load';
+export { default as Switch } from './switch';
 export { default as TabBar } from './tab-bar';
+export { default as Tabs } from './tabs';
 export { default as Tag } from './tag';
+export { default as Toast } from './toast';
 export { default as Transition } from './transition';

package/esm/index.js

@@ -1,20 +1,17 @@
+export { default as Button } from './button';
 export { default as ActionSheet } from './action-sheet';
-export { default as Cell } from './cell';
-export { default as Loading } from './loading';
-export { default as Badge } from './badge';
 export { default as Avatar } from './avatar';
-export { default as Button } from './button';
+export { default as Badge } from './badge';
 export { default as Carousel } from './carousel';
-export { default as Toast } from './toast';
-export { default as Switch } from './switch';
+export { default as Cell } from './cell';
 export { default as Checkbox } from './checkbox';
 export { default as CircleProgress } from './circle-progress';
 export { default as Collapse } from './collapse';
-export { default as Tabs } from './tabs';
 export { default as ContextProvider } from './context-provider';
-export { default as Dialog } from './dialog';
 export { default as CountDown } from './count-down';
 export { default as DatePicker } from './date-picker';
+export { default as Divider } from './divider';
+export { default as Dialog } from './dialog';
 export { default as Dropdown } from './dropdown';
 export { default as DropdownMenu } from './dropdown-menu';
 export { default as Ellipsis } from './ellipsis';
@@ -22,14 +19,15 @@ export { default as Form } from './form';
 export { default as Input } from './input';
 export { default as Textarea } from './textarea';
 export { default as Radio } from './radio';
-export { default as ImagePicker } from './image-picker';
 export { default as Rate } from './rate';
 export { default as Slider } from './slider';
 export { default as Grid } from './grid';
 export { default as Image } from './image';
 export { default as ShowMonitor } from './show-monitor';
+export { default as ImagePicker } from './image-picker';
 export { default as ImagePreview } from './image-preview';
 export { default as LoadMore } from './load-more';
+export { default as Loading } from './loading';
 export { default as Masking } from './masking';
 export { default as NavBar } from './nav-bar';
 export { default as NoticeBar } from './notice-bar';
@@ -49,6 +47,9 @@ export { default as Steps } from './steps';
 export { default as Sticky } from './sticky';
 export { default as SwipeAction } from './swipe-action';
 export { default as SwipeLoad } from './swipe-load';
+export { default as Switch } from './switch';
 export { default as TabBar } from './tab-bar';
+export { default as Tabs } from './tabs';
 export { default as Tag } from './tag';
+export { default as Toast } from './toast';
 export { default as Transition } from './transition';

package/esm/input/demo/style/css/mobile.css

@@ -52,7 +52,7 @@
   font-size: 0.26rem;
   line-height: 0.36rem;
   margin-bottom: -0.16rem;
-  padding: 0.32rem 0 0 0.32rem;
+  padding: 0.32rem 0.32rem 0 0.32rem;
 }
 #demo-input .demo-input-btn-input .arco-input-wrap {
   height: auto;
@@ -65,3 +65,7 @@
   font-weight: bold;
   margin-right: -0.24rem;
 }
+[dir="rtl"] #demo-input .demo-input-money {
+  margin-right: initial;
+  margin-left: -0.24rem;
+}

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

@@ -57,7 +57,7 @@
         .rem(font-size, 13);
         .rem(line-height, 18);
         .rem(margin-bottom, -8);
-        .rem(padding, 16, 0, 0, 16);
+        .rem(padding, 16, 16, 0, 16);
     }
     .demo-input-btn-input .@{prefix}-input-wrap {
         height: auto;
@@ -70,6 +70,6 @@
     .demo-input-money {
         .rem(font-size, 20);
         font-weight: bold;
-        .rem(margin-right, -12);
+        .rem-with-rtl(margin-right, -12);
     }
 }

package/esm/input/hooks.js

@@ -4,44 +4,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;
+      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);
   /**
    * clear相关问题背景
    * 如果点击clear按钮之前已经是focusing状态了，那么在点完clear按钮之后会手动聚焦一下
@@ -59,13 +64,16 @@ export function useInputLogic(props, inputRef) {
    * 如果这个标志为true，则跳过调用外部的onBlur和onFocus，并在最后再将标志置回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();
   var wrapRef = useRef(null);
+  var needComposition = system === 'ios' && blockChangeWhenCompositing;
   useEffect(function () {
     if (autoFocus) {
       setTimeout(function () {
@@ -73,6 +81,28 @@ export function useInputLogic(props, inputRef) {
       }, 200);
     }
   }, []);
+  useEffect(function () {
+    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);
+        inputRef.current.removeEventListener('compositionend', handleCompositionEnd);
+      }
+    };
+  }, [needComposition]);
   useEffect(function () {
     // 处理受控模式下的showClear
     // @en Handling showClear in controlled mode
@@ -80,10 +110,12 @@ 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)) {
@@ -92,54 +124,69 @@ 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) {
     nextTick(function () {
       if (preventEventWhenClearing && shouldPreventEvent.current) {
         shouldPreventEvent.current = false;
         return;
       }
+
       setIsFocusing(true);
       clearShowType === 'focus' && toggleClear(true);
       onFocus && onFocus(e);
     });
   }
+
   function handleBlur(e) {
     nextTick(function () {
       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.
@@ -151,29 +198,35 @@ 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;
         }
+
         inputRef.current && inputRef.current.focus();
       }
     });
   }
+
   function renderPendNode(pend) {
     return typeof pend === 'function' ? pend(isFocusing, actualInputValue) : pend;
   }
+
   function renderWrapper(prefixCls, type, children) {
     return /*#__PURE__*/React.createElement("div", {
       role: "search",
@@ -201,6 +254,7 @@ export function useInputLogic(props, inputRef) {
       className: prefixCls + "-suffix"
     }, suffix) : null), renderPendNode(append));
   }
+
   return {
     inputValue: actualInputValue,
     handleChange: handleChange,

package/esm/input/index.js

@@ -5,39 +5,42 @@ 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";
@@ -66,9 +69,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.
@@ -78,4 +81,5 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
  * @name_en Input
  * @displayName Input
  */
+
 export default componentWrapper(Input, 'Input');

package/esm/input/props.d.ts

@@ -61,6 +61,12 @@ export interface BasicInputProps<T = HTMLInputElement> {
      * @en Whether to automatically get the focus
      */
     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

package/esm/input/style/css/index.css

@@ -118,10 +118,19 @@
 .arco-input-prefix {
   padding-right:  0.48rem ;
 }
+[dir="rtl"] .arco-input-prefix {
+  padding-right: initial;
+  padding-left:  0.48rem ;
+}
 .arco-input-clear,
 .arco-input-suffix {
   padding-left:  0.32rem ;
 }
+[dir="rtl"] .arco-input-clear,
+[dir="rtl"] .arco-input-suffix {
+  padding-left: initial;
+  padding-right:  0.32rem ;
+}
 .arco-input-clear {
   color:  #c9cdd4 ;
   font-size:  16PX ;

package/esm/input/style/index.less

@@ -77,11 +77,11 @@
     display: flex;
 }
 .@{prefix}-input-prefix {
-    .use-var(padding-right, input-label-gutter);
+    .use-var-with-rtl(padding-right, input-label-gutter);
 }
 .@{prefix}-input-clear,
 .@{prefix}-input-suffix {
-    .use-var(padding-left, input-horizontal-padding);
+    .use-var-with-rtl(padding-left, input-horizontal-padding);
 }
 .@{prefix}-input-clear {
     .use-var(color, input-clear-icon-color);