antd-mobile 5.36.1 → 5.37.0

package/es/components/virtual-input/virtual-input.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
 import type { ReactElement } from 'react';
-import type { InputProps } from '../input';
+import React from 'react';
 import { NativeProps } from '../../utils/native-props';
+import type { InputProps } from '../input';
 import { NumberKeyboardProps } from '../number-keyboard';
 export declare type VirtualInputProps = {
     onFocus?: () => void;
@@ -10,7 +10,7 @@ export declare type VirtualInputProps = {
     keyboard?: ReactElement<NumberKeyboardProps>;
     clearable?: boolean;
     onClear?: () => void;
-} & Pick<InputProps, 'value' | 'onChange' | 'placeholder' | 'disabled'> & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--disabled-color' | '--text-align' | '--caret-width' | '--caret-color'>;
+} & Pick<InputProps, 'value' | 'onChange' | 'placeholder' | 'disabled' | 'clearIcon'> & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--disabled-color' | '--text-align' | '--caret-width' | '--caret-color'>;
 export declare type VirtualInputRef = {
     focus: () => void;
     blur: () => void;
@@ -19,10 +19,10 @@ export declare const VirtualInput: React.ForwardRefExoticComponent<{
     onFocus?: (() => void) | undefined;
     onBlur?: (() => void) | undefined;
     onClick?: ((e: React.MouseEvent<HTMLDivElement>) => void) | undefined;
-    keyboard?: React.ReactElement<NumberKeyboardProps, string | React.JSXElementConstructor<any>> | undefined;
+    keyboard?: ReactElement<NumberKeyboardProps, string | React.JSXElementConstructor<any>> | undefined;
     clearable?: boolean | undefined;
     onClear?: (() => void) | undefined;
-} & Pick<InputProps, "value" | "onChange" | "disabled" | "placeholder"> & {
+} & Pick<InputProps, "value" | "onChange" | "disabled" | "placeholder" | "clearIcon"> & {
     className?: string | undefined;
     style?: (React.CSSProperties & Partial<Record<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color", string>>) | undefined;
     tabIndex?: number | undefined;

package/es/components/virtual-input/virtual-input.js

@@ -1,24 +1,26 @@
+import { useIsomorphicLayoutEffect } from 'ahooks';
+import { CloseCircleFill } from 'antd-mobile-icons';
+import classNames from 'classnames';
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { withNativeProps } from '../../utils/native-props';
-import { mergeProps } from '../../utils/with-default-props';
 import { usePropsValue } from '../../utils/use-props-value';
-import classNames from 'classnames';
-import { CloseCircleFill } from 'antd-mobile-icons';
-import { useIsomorphicLayoutEffect } from 'ahooks';
+import { mergeProp, mergeProps } from '../../utils/with-default-props';
 import { useConfig } from '../config-provider';
 const classPrefix = 'adm-virtual-input';
 const defaultProps = {
   defaultValue: ''
 };
-export const VirtualInput = forwardRef((p, ref) => {
-  const props = mergeProps(defaultProps, p);
-  const [value, setValue] = usePropsValue(props);
+export const VirtualInput = forwardRef((props, ref) => {
+  const {
+    locale,
+    input: componentConfig = {}
+  } = useConfig();
+  const mergedProps = mergeProps(defaultProps, componentConfig, props);
+  const [value, setValue] = usePropsValue(mergedProps);
   const rootRef = useRef(null);
   const contentRef = useRef(null);
   const [hasFocus, setHasFocus] = useState(false);
-  const {
-    locale
-  } = useConfig();
+  const clearIcon = mergeProp(React.createElement(CloseCircleFill, null), componentConfig.clearIcon, props.clearIcon);
   function scrollToEnd() {
     const root = rootRef.current;
     if (!root) return;
@@ -50,14 +52,14 @@ export const VirtualInput = forwardRef((p, ref) => {
   function onFocus() {
     var _a;
     setHasFocus(true);
-    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props);
+    (_a = mergedProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(mergedProps);
   }
   function onBlur() {
     var _a;
     setHasFocus(false);
-    (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
+    (_a = mergedProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(mergedProps);
   }
-  const keyboard = props.keyboard;
+  const keyboard = mergedProps.keyboard;
   const keyboardElement = keyboard && React.cloneElement(keyboard, {
     onInput: v => {
       var _a, _b;
@@ -84,36 +86,36 @@ export const VirtualInput = forwardRef((p, ref) => {
     },
     getContainer: null
   });
-  return withNativeProps(props, React.createElement("div", {
+  return withNativeProps(mergedProps, React.createElement("div", {
     ref: rootRef,
     className: classNames(classPrefix, {
-      [`${classPrefix}-disabled`]: props.disabled
+      [`${classPrefix}-disabled`]: mergedProps.disabled
     }),
-    tabIndex: props.disabled ? undefined : 0,
+    tabIndex: mergedProps.disabled ? undefined : 0,
     role: 'textbox',
     onFocus: onFocus,
     onBlur: onBlur,
-    onClick: props.onClick
+    onClick: mergedProps.onClick
   }, React.createElement("div", {
     className: `${classPrefix}-content`,
     ref: contentRef,
-    "aria-disabled": props.disabled,
-    "aria-label": props.placeholder
+    "aria-disabled": mergedProps.disabled,
+    "aria-label": mergedProps.placeholder
   }, value, React.createElement("div", {
     className: `${classPrefix}-caret-container`
   }, hasFocus && React.createElement("div", {
     className: `${classPrefix}-caret`
-  }))), props.clearable && !!value && hasFocus && React.createElement("div", {
+  }))), mergedProps.clearable && !!value && hasFocus && React.createElement("div", {
     className: `${classPrefix}-clear`,
     onClick: e => {
       var _a;
       e.stopPropagation();
       setValue('');
-      (_a = props.onClear) === null || _a === void 0 ? void 0 : _a.call(props);
+      (_a = mergedProps.onClear) === null || _a === void 0 ? void 0 : _a.call(mergedProps);
     },
     role: 'button',
     "aria-label": locale.Input.clear
-  }, React.createElement(CloseCircleFill, null)), [undefined, null, ''].includes(value) && React.createElement("div", {
+  }, clearIcon), [undefined, null, ''].includes(value) && React.createElement("div", {
     className: `${classPrefix}-placeholder`
-  }, props.placeholder), keyboardElement));
+  }, mergedProps.placeholder), keyboardElement));
 });

package/es/utils/is-node-with-content.d.ts

@@ -1,4 +1,7 @@
 import type { ReactNode } from 'react';
 declare type Regulated<T> = T extends null | undefined | false ? never : T;
+/**
+ * Check if the `node` is visible Node (not null, undefined, or false)
+ */
 export declare function isNodeWithContent(node: ReactNode): node is Regulated<ReactNode>;
 export {};

package/es/utils/is-node-with-content.js

@@ -1,3 +1,6 @@
+/**
+ * Check if the `node` is visible Node (not null, undefined, or false)
+ */
 export function isNodeWithContent(node) {
   return node !== undefined && node !== null && node !== false;
 }

package/es/utils/with-default-props.d.ts

@@ -1,2 +1,9 @@
 export declare function mergeProps<A, B>(a: A, b: B): B & A;
 export declare function mergeProps<A, B, C>(a: A, b: B, c: C): C & B & A;
+export declare function mergeProps<A, B, C, D>(a: A, b: B, c: C, d: D): D & C & B & A;
+/**
+ * Merge props and return the first non-undefined value.
+ * The later has higher priority. e.g. (10, 1, 5) => 5 wins.
+ * This is useful with legacy props that have been deprecated.
+ */
+export declare function mergeProp<T, DefaultT extends T = T>(defaultProp: DefaultT, ...propList: T[]): T | undefined;

package/es/utils/with-default-props.js

@@ -1,11 +1,26 @@
 export function mergeProps(...items) {
   const ret = {};
   items.forEach(item => {
-    Object.keys(item).forEach(key => {
-      if (item[key] !== undefined) {
-        ret[key] = item[key];
-      }
-    });
+    if (item) {
+      Object.keys(item).forEach(key => {
+        if (item[key] !== undefined) {
+          ret[key] = item[key];
+        }
+      });
+    }
   });
   return ret;
+}
+/**
+ * Merge props and return the first non-undefined value.
+ * The later has higher priority. e.g. (10, 1, 5) => 5 wins.
+ * This is useful with legacy props that have been deprecated.
+ */
+export function mergeProp(defaultProp, ...propList) {
+  for (let i = propList.length - 1; i >= 0; i -= 1) {
+    if (propList[i] !== undefined) {
+      return propList[i];
+    }
+  }
+  return defaultProp;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.36.1",
+  "version": "5.37.0",
   "homepage": "https://github.com/ant-design/ant-design-mobile#readme",
   "bugs": {
     "url": "https://github.com/ant-design/ant-design-mobile/issues"