antd-mobile 5.25.1 → 5.26.0

package/2x/cjs/components/stepper/stepper.js

@@ -32,35 +32,45 @@ const Stepper = p => {
     step,
     max,
     min,
-    inputReadOnly
+    inputReadOnly,
+    digits,
+    formatter,
+    parser
   } = props;
   const {
     locale
   } = (0, _configProvider.useConfig)();
+  // ========================== Parse / Format ==========================
+  const parseValue = text => {
+    if (text === '') return null;
+    return parser ? parser(text) : parseFloat(text);
+  };
+  const formatValue = value => {
+    if (value === null) return '';
+    if (formatter) {
+      return formatter(value);
+    } else if (digits !== undefined) {
+      return value.toFixed(digits);
+    } else {
+      return value.toString();
+    }
+  };
+  // ======================== Value & InputValue ========================
   const [value, setValue] = (0, _usePropsValue.usePropsValue)(props);
-  const [inputValue, setInputValue] = (0, _react.useState)(() => convertValueToText(value, props.digits));
+  const [inputValue, setInputValue] = (0, _react.useState)(() => formatValue(value));
+  // >>>>> Value
   function setValueWithCheck(v) {
     if (isNaN(v)) return;
     let target = (0, _bound.bound)(v, props.min, props.max);
-    if (props.digits !== undefined) {
-      target = parseFloat(target.toFixed(props.digits));
+    if (digits !== undefined) {
+      target = parseFloat(target.toFixed(digits));
     }
     setValue(target);
   }
-  const [hasFocus, setHasFocus] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
-    if (!hasFocus) {
-      setInputValue(convertValueToText(value, props.digits));
-    }
-  }, [hasFocus]);
-  (0, _react.useEffect)(() => {
-    if (!hasFocus) {
-      setInputValue(convertValueToText(value, props.digits));
-    }
-  }, [value, props.digits]);
+  // >>>>> Input
   const handleInputChange = v => {
     setInputValue(v);
-    const value = convertTextToValue(v);
+    const value = parseValue(v);
     if (value === null) {
       if (props.allowEmpty) {
         setValue(null);
@@ -71,6 +81,29 @@ const Stepper = p => {
       setValueWithCheck(value);
     }
   };
+  // ============================== Focus ===============================
+  const [focused, setFocused] = (0, _react.useState)(false);
+  const inputRef = _react.default.useRef(null);
+  function triggerFocus(nextFocus) {
+    setFocused(nextFocus);
+    // We will convert value to original text when focus
+    if (nextFocus) {
+      setInputValue(typeof value === 'number' ? String(value) : '');
+    }
+  }
+  (0, _react.useEffect)(() => {
+    var _a, _b, _c;
+    if (focused) {
+      (_c = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.select) === null || _c === void 0 ? void 0 : _c.call(_b);
+    }
+  }, [focused]);
+  // Focus change to format value
+  (0, _react.useEffect)(() => {
+    if (!focused) {
+      setInputValue(formatValue(value));
+    }
+  }, [focused, value, digits]);
+  // ============================ Operations ============================
   const handleMinus = () => {
     setValueWithCheck((0, _big.default)(value !== null && value !== void 0 ? value : 0).minus(step).toNumber());
   };
@@ -93,9 +126,10 @@ const Stepper = p => {
     }
     return false;
   };
+  // ============================== Render ==============================
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: (0, _classnames.default)(classPrefix, {
-      [`${classPrefix}-active`]: hasFocus
+      [`${classPrefix}-active`]: focused
     })
   }, _react.default.createElement(_button.default, {
     className: `${classPrefix}-minus`,
@@ -108,10 +142,11 @@ const Stepper = p => {
   }, _react.default.createElement(_antdMobileIcons.MinusOutline, null)), _react.default.createElement("div", {
     className: `${classPrefix}-middle`
   }, _react.default.createElement(_input.default, {
+    ref: inputRef,
     className: `${classPrefix}-input`,
     onFocus: e => {
       var _a;
-      setHasFocus(true);
+      triggerFocus(true);
       (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
     value: inputValue,
@@ -121,7 +156,7 @@ const Stepper = p => {
     disabled: disabled,
     onBlur: e => {
       var _a;
-      setHasFocus(false);
+      triggerFocus(false);
       (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
     readOnly: inputReadOnly,
@@ -140,16 +175,4 @@ const Stepper = p => {
     "aria-label": locale.Stepper.increase
   }, _react.default.createElement(_antdMobileIcons.AddOutline, null))));
 };
-exports.Stepper = Stepper;
-function convertValueToText(value, digits) {
-  if (value === null) return '';
-  if (digits !== undefined) {
-    return value.toFixed(digits);
-  } else {
-    return value.toString();
-  }
-}
-function convertTextToValue(text) {
-  if (text === '') return null;
-  return parseFloat(text);
-}
+exports.Stepper = Stepper;

package/2x/cjs/components/water-mark/water-mark.d.ts

@@ -10,7 +10,7 @@ export declare type WaterMarkProps = {
     image?: string;
     imageWidth?: number;
     imageHeight?: number;
-    content?: string;
+    content?: string | string[];
     fontColor?: string;
     fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
     fontFamily?: string;

package/2x/cjs/components/water-mark/water-mark.js

@@ -67,7 +67,11 @@ const WaterMark = p => {
         const markSize = Number(fontSize) * ratio;
         ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
         ctx.fillStyle = fontColor;
-        ctx.fillText(content, 0, 0);
+        if (Array.isArray(content)) {
+          content.forEach((item, index) => ctx.fillText(item, 0, index * markSize));
+        } else {
+          ctx.fillText(content, 0, 0);
+        }
         ctx.restore();
         setBase64Url(canvas.toDataURL());
       }

package/2x/es/components/calendar/calendar.js

@@ -122,11 +122,17 @@ export const Calendar = forwardRef((p, ref) => {
       let isSelect = false;
       let isBegin = false;
       let isEnd = false;
+      let isSelectRowBegin = false;
+      let isSelectRowEnd = false;
       if (dateRange) {
         const [begin, end] = dateRange;
         isBegin = d.isSame(begin, 'day');
         isEnd = d.isSame(end, 'day');
         isSelect = isBegin || isEnd || d.isAfter(begin, 'day') && d.isBefore(end, 'day');
+        if (isSelect) {
+          isSelectRowBegin = (cells.length % 7 === 0 || d.isSame(d.startOf('month'), 'day')) && !isBegin;
+          isSelectRowEnd = (cells.length % 7 === 6 || d.isSame(d.endOf('month'), 'day')) && !isEnd;
+        }
       }
       const inThisMonth = d.month() === current.month();
       const disabled = props.shouldDisableDate ? props.shouldDisableDate(d.toDate()) : maxDay && d.isAfter(maxDay, 'day') || minDay && d.isBefore(minDay, 'day');
@@ -136,7 +142,9 @@ export const Calendar = forwardRef((p, ref) => {
           [`${classPrefix}-cell-today`]: d.isSame(today, 'day'),
           [`${classPrefix}-cell-selected`]: isSelect,
           [`${classPrefix}-cell-selected-begin`]: isBegin,
-          [`${classPrefix}-cell-selected-end`]: isEnd
+          [`${classPrefix}-cell-selected-end`]: isEnd,
+          [`${classPrefix}-cell-selected-row-begin`]: isSelectRowBegin,
+          [`${classPrefix}-cell-selected-row-end`]: isSelectRowEnd
         }),
         onClick: () => {
           if (!props.selectionMode) return;

package/2x/es/components/floating-bubble/floating-bubble.d.ts

@@ -1,9 +1,17 @@
 import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
+declare type Offset = {
+    x: number;
+    y: number;
+};
 export declare type FloatingBubbleProps = {
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     axis?: 'x' | 'y' | 'xy' | 'lock';
     magnetic?: 'x' | 'y';
     children?: React.ReactNode;
+    offset?: Offset;
+    defaultOffset?: Offset;
+    onOffsetChange?: (offset: Offset) => void;
 } & NativeProps<'--initial-position-left' | '--initial-position-right' | '--initial-position-top' | '--initial-position-bottom' | '--z-index' | '--edge-distance' | '--size' | '--border-radius' | '--background'>;
 export declare const FloatingBubble: FC<FloatingBubbleProps>;
+export {};

package/2x/es/components/floating-bubble/floating-bubble.js

@@ -1,16 +1,28 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { useSpring, animated, to } from '@react-spring/web';
 import { useDrag } from '@use-gesture/react';
 import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
 const classPrefix = `adm-floating-bubble`;
 const defaultProps = {
-  axis: 'y'
+  axis: 'y',
+  defaultOffset: {
+    x: 0,
+    y: 0
+  }
 };
 export const FloatingBubble = p => {
   const props = mergeProps(defaultProps, p);
   const boundaryRef = useRef(null);
   const buttonRef = useRef(null);
+  const [innerValue, setInnerValue] = useState(props.offset === undefined ? props.defaultOffset : props.offset);
+  useEffect(() => {
+    if (props.offset === undefined) return;
+    api.start({
+      x: props.offset.x,
+      y: props.offset.y
+    });
+  }, [props.offset]);
   /**
    * memoize the `to` function
    * inside a component that renders frequently
@@ -21,11 +33,12 @@ export const FloatingBubble = p => {
     y,
     opacity
   }, api] = useSpring(() => ({
-    x: 0,
-    y: 0,
+    x: innerValue.x,
+    y: innerValue.y,
     opacity: 1
   }));
   const bind = useDrag(state => {
+    var _a;
     let nextX = state.offset[0];
     let nextY = state.offset[1];
     if (state.last && props.magnetic) {
@@ -54,10 +67,17 @@ export const FloatingBubble = p => {
         }
       }
     }
-    api.start({
+    const nextOffest = {
       x: nextX,
       y: nextY
-    });
+    };
+    if (props.offset === undefined) {
+      // Uncontrolled mode
+      api.start(nextOffest);
+    } else {
+      setInnerValue(nextOffest);
+    }
+    (_a = props.onOffsetChange) === null || _a === void 0 ? void 0 : _a.call(props, nextOffest);
     // active status
     api.start({
       opacity: state.active ? 0.8 : 1

package/2x/es/components/form/form.d.ts

@@ -3,7 +3,7 @@ import { NativeProps } from '../../utils/native-props';
 import { ListProps } from '../list';
 import type { FormProps as RcFormProps, FormInstance as RCFormInstance } from 'rc-field-form';
 import { FormContextType } from './context';
-export declare type FormInstance = Pick<RCFormInstance, 'getFieldValue' | 'getFieldsValue' | 'getFieldError' | 'getFieldsError' | 'isFieldTouched' | 'isFieldsTouched' | 'resetFields' | 'setFields' | 'setFieldsValue' | 'submit' | 'validateFields'>;
+export declare type FormInstance = Pick<RCFormInstance, 'getFieldValue' | 'getFieldsValue' | 'getFieldError' | 'getFieldsError' | 'isFieldTouched' | 'isFieldsTouched' | 'resetFields' | 'setFields' | 'setFieldValue' | 'setFieldsValue' | 'submit' | 'validateFields'>;
 export declare type FormProps = Pick<RcFormProps, 'form' | 'initialValues' | 'name' | 'preserve' | 'validateMessages' | 'validateTrigger' | 'onFieldsChange' | 'onFinish' | 'onFinishFailed' | 'onValuesChange' | 'children'> & NativeProps<'--border-inner' | '--border-top' | '--border-bottom' | '--prefix-width'> & Partial<FormContextType> & {
     footer?: ReactNode;
     mode?: ListProps['mode'];

package/2x/es/components/image-uploader/image-uploader.css

@@ -1,9 +1,16 @@
 .adm-image-uploader {
   --cell-size: 160px;
+  --gap: 24px;
+  ---gap: var(--gap);
+  ---gap-horizontal: var(--gap-horizontal, var(--gap));
+  ---gap-vertical: var(--gap-vertical, var(--gap));
 }
 
+.adm-image-uploader-grid,
 .adm-image-uploader-space {
-  --gap: 24px;
+  --gap: var(---gap);
+  --gap-horizontal: var(---gap-horizontal);
+  --gap-vertical: var(---gap-vertical);
 }
 
 .adm-image-uploader-cell {
@@ -94,4 +101,12 @@
   width: 100%;
   height: 100%;
   border-radius: 8px;
+}
+
+.adm-image-uploader .adm-image-uploader-gap-measure {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: var(--gap-horizontal);
+  width: 0;
 }

package/2x/es/components/image-uploader/image-uploader.d.ts

@@ -1,6 +1,7 @@
 import React, { FC, InputHTMLAttributes } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import type { ImageProps } from '../image';
+import { GridProps } from '../grid';
 export declare type TaskStatus = 'pending' | 'fail' | 'success';
 export interface ImageUploadItem {
     key?: string | number;
@@ -18,6 +19,7 @@ export declare type UploadTask = Pick<Task, 'id' | 'status'>;
 export declare type ImageUploaderProps = {
     defaultValue?: ImageUploadItem[];
     value?: ImageUploadItem[];
+    columns?: GridProps['columns'];
     onChange?: (items: ImageUploadItem[]) => void;
     onUploadQueueChange?: (tasks: UploadTask[]) => void;
     accept?: string;
@@ -27,6 +29,7 @@ export declare type ImageUploaderProps = {
     disableUpload?: boolean;
     showUpload?: boolean;
     deletable?: boolean;
+    deleteIcon?: React.ReactNode;
     capture?: InputHTMLAttributes<unknown>['capture'];
     onPreview?: (index: number, item: ImageUploadItem) => void;
     beforeUpload?: (file: File, files: File[]) => Promise<File | null> | File | null;
@@ -37,6 +40,6 @@ export declare type ImageUploaderProps = {
     imageFit?: ImageProps['fit'];
     children?: React.ReactNode;
     renderItem?: (originNode: React.ReactElement, file: ImageUploadItem, fileList: ImageUploadItem[]) => React.ReactNode;
-} & NativeProps<'--cell-size'>;
+} & NativeProps<'--cell-size' | '--gap' | '--gap-vertical' | '--gap-horizontal'>;
 export declare const ImageUploader: FC<ImageUploaderProps>;
 export {};

package/2x/es/components/image-uploader/image-uploader.js

@@ -1,18 +1,23 @@
 import { __awaiter } from "tslib";
 import React, { useRef, useState } from 'react';
-import { AddOutline } from 'antd-mobile-icons';
+import { AddOutline, CloseOutline } from 'antd-mobile-icons';
 import { mergeProps } from '../../utils/with-default-props';
 import ImageViewer from '../image-viewer';
 import PreviewItem from './preview-item';
 import { usePropsValue } from '../../utils/use-props-value';
-import { useIsomorphicLayoutEffect, useUnmount } from 'ahooks';
+import { useIsomorphicLayoutEffect, useUnmount, useSize } from 'ahooks';
 import Space from '../space';
 import { withNativeProps } from '../../utils/native-props';
+import { measureCSSLength } from '../../utils/measure-css-length';
 import { useConfig } from '../config-provider';
+import Grid from '../grid';
 const classPrefix = `adm-image-uploader`;
 const defaultProps = {
   disableUpload: false,
   deletable: true,
+  deleteIcon: React.createElement(CloseOutline, {
+    className: `${classPrefix}-cell-delete-icon`
+  }),
   showUpload: true,
   multiple: false,
   maxCount: 0,
@@ -27,8 +32,26 @@ export const ImageUploader = p => {
     locale
   } = useConfig();
   const props = mergeProps(defaultProps, p);
+  const {
+    columns
+  } = props;
   const [value, setValue] = usePropsValue(props);
   const [tasks, setTasks] = useState([]);
+  const containerRef = useRef(null);
+  const containerSize = useSize(containerRef);
+  const gapMeasureRef = useRef(null);
+  const [cellSize, setCellSize] = useState(80);
+  useIsomorphicLayoutEffect(() => {
+    const gapMeasure = gapMeasureRef.current;
+    if (columns && containerSize && gapMeasure) {
+      const width = containerSize.width;
+      const gap = measureCSSLength(window.getComputedStyle(gapMeasure).getPropertyValue('height'));
+      setCellSize((width - gap * (columns - 1)) / columns);
+    }
+  }, [containerSize === null || containerSize === void 0 ? void 0 : containerSize.width]);
+  const style = {
+    '--cell-size': cellSize + 'px'
+  };
   useIsomorphicLayoutEffect(() => {
     setTasks(prev => prev.filter(task => {
       if (task.url === undefined) return true;
@@ -152,6 +175,7 @@ export const ImageUploader = p => {
         key: (_a = fileItem.key) !== null && _a !== void 0 ? _a : index,
         url: (_b = fileItem.thumbnailUrl) !== null && _b !== void 0 ? _b : fileItem.url,
         deletable: props.deletable,
+        deleteIcon: props.deleteIcon,
         imageFit: props.imageFit,
         onClick: () => {
           if (props.preview) {
@@ -169,21 +193,19 @@ export const ImageUploader = p => {
       return renderItem ? renderItem(originNode, fileItem, value) : originNode;
     });
   };
-  return withNativeProps(props, React.createElement("div", {
-    className: classPrefix
-  }, React.createElement(Space, {
-    className: `${classPrefix}-space`,
-    wrap: true,
-    block: true
-  }, renderImages(), finalTasks.map(task => {
+  const contentNode = React.createElement(React.Fragment, null, renderImages(), tasks.map(task => {
+    if (!props.showFailed && task.status === 'fail') {
+      return null;
+    }
     return React.createElement(PreviewItem, {
       key: task.id,
       file: task.file,
       deletable: task.status !== 'pending',
+      deleteIcon: props.deleteIcon,
       status: task.status,
       imageFit: props.imageFit,
       onDelete: () => {
-        setTasks(prev => prev.filter(x => x.id !== task.id));
+        setTasks(tasks.filter(x => x.id !== task.id));
       }
     });
   }), showUpload && React.createElement("div", {
@@ -202,5 +224,20 @@ export const ImageUploader = p => {
     className: `${classPrefix}-input`,
     onChange: onChange,
     "aria-hidden": true
-  })))));
+  })));
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix,
+    ref: containerRef
+  }, columns ? React.createElement(Grid, {
+    className: `${classPrefix}-grid`,
+    columns: columns,
+    style: style
+  }, React.createElement("div", {
+    className: `${classPrefix}-gap-measure`,
+    ref: gapMeasureRef
+  }), contentNode.props.children) : React.createElement(Space, {
+    className: `${classPrefix}-space`,
+    wrap: true,
+    block: true
+  }, contentNode.props.children)));
 };

package/2x/es/components/image-uploader/preview-item.d.ts

@@ -1,10 +1,11 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { TaskStatus } from './image-uploader';
 import type { ImageProps } from '../image';
 declare type Props = {
     onClick?: () => void;
     onDelete?: () => void;
     deletable: boolean;
+    deleteIcon: React.ReactNode;
     url?: string;
     file?: File;
     status?: TaskStatus;

package/2x/es/components/image-uploader/preview-item.js

@@ -1,5 +1,4 @@
-import React, { useLayoutEffect, useMemo } from 'react';
-import { CloseOutline } from 'antd-mobile-icons';
+import React, { useEffect, useMemo } from 'react';
 import classNames from 'classnames';
 import Image from '../image';
 import SpinLoading from '../spin-loading';
@@ -13,6 +12,7 @@ const PreviewItem = props => {
     url,
     file,
     deletable,
+    deleteIcon,
     onDelete,
     imageFit
   } = props;
@@ -25,11 +25,11 @@ const PreviewItem = props => {
     }
     return '';
   }, [url, file]);
-  useLayoutEffect(() => {
+  useEffect(() => {
     return () => {
-      URL.revokeObjectURL(src);
+      if (file) URL.revokeObjectURL(src);
     };
-  }, [src]);
+  }, [src, file]);
   function renderLoading() {
     return props.status === 'pending' && React.createElement("div", {
       className: `${classPrefix}-cell-mask`
@@ -45,9 +45,7 @@ const PreviewItem = props => {
     return deletable && React.createElement("span", {
       className: `${classPrefix}-cell-delete`,
       onClick: onDelete
-    }, React.createElement(CloseOutline, {
-      className: `${classPrefix}-cell-delete-icon`
-    }));
+    }, deleteIcon);
   }
   return React.createElement("div", {
     className: classNames(`${classPrefix}-cell`, props.status === 'fail' && `${classPrefix}-cell-fail`)

package/2x/es/components/mask/mask.d.ts

@@ -8,7 +8,7 @@ export declare type MaskProps = {
     destroyOnClose?: boolean;
     forceRender?: boolean;
     disableBodyScroll?: boolean;
-    color?: 'black' | 'white';
+    color?: 'white' | 'black' | (string & {});
     opacity?: 'default' | 'thin' | 'thick' | number;
     getContainer?: GetContainer;
     afterShow?: () => void;

package/2x/es/components/mask/mask.js

@@ -14,6 +14,10 @@ const opacityRecord = {
   thin: 0.35,
   thick: 0.75
 };
+const colorRecord = {
+  black: '0, 0, 0',
+  white: '255, 255, 255'
+};
 const defaultProps = {
   visible: true,
   destroyOnClose: false,
@@ -34,8 +38,8 @@ export const Mask = p => {
   const background = useMemo(() => {
     var _a;
     const opacity = (_a = opacityRecord[props.opacity]) !== null && _a !== void 0 ? _a : props.opacity;
-    const rgb = props.color === 'white' ? '255, 255, 255' : '0, 0, 0';
-    return `rgba(${rgb}, ${opacity})`;
+    const rgb = colorRecord[props.color];
+    return rgb ? `rgba(${rgb}, ${opacity})` : props.color;
   }, [props.color, props.opacity]);
   const [active, setActive] = useState(props.visible);
   const unmountedRef = useUnmountedRef();

package/2x/es/components/notice-bar/notice-bar.css

@@ -4,11 +4,10 @@
   --text-color: var(--adm-color-white);
   --font-size: var(--adm-font-size-7);
   --icon-font-size: var(--adm-font-size-10);
-  --height: 76px;
+  --height: 80px;
   height: var(--height);
   box-sizing: border-box;
   font-size: var(--font-size);
-  line-height: var(--height);
   padding: 0 24px;
   display: flex;
   align-items: center;
@@ -46,7 +45,6 @@
   flex-shrink: 0;
   margin-right: 16px;
   font-size: var(--icon-font-size);
-  line-height: var(--height);
 }
 
 .adm-notice-bar .adm-notice-bar-content {
@@ -61,10 +59,13 @@
 .adm-notice-bar .adm-notice-bar-content .adm-notice-bar-content-inner {
   width: auto;
   transition-timing-function: linear;
-  position: absolute;
   white-space: nowrap;
 }
 
+.adm-notice-bar-wrap.adm-notice-bar .adm-notice-bar-content .adm-notice-bar-content-inner {
+  white-space: normal;
+}
+
 .adm-notice-bar .adm-notice-bar-right {
   flex-shrink: 0;
   margin-left: 24px;
@@ -81,4 +82,12 @@
 
 .adm-notice-bar-close-icon {
   font-size: var(--adm-font-size-10);
+}
+
+.adm-notice-bar-wrap {
+  height: auto;
+  align-items: flex-start;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  line-height: 44px;
 }

package/2x/es/components/notice-bar/notice-bar.d.ts

@@ -1,21 +1,23 @@
 import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type NoticeBarProps = {
-    /** 通告栏的类型 */
+    /** The type of the NoticeBar */
     color?: 'default' | 'alert' | 'error' | 'info';
-    /** 开始滚动的延迟，单位 ms */
+    /** TDelay to start scrolling, unit ms */
     delay?: number;
-    /** 滚动速度，单位 px/s */
+    /** Scroll speed, unit px/s */
     speed?: number;
-    /** 公告内容 */
+    /** The content of the NoticeBar */
     content: React.ReactNode;
-    /** 是否可关闭 */
+    /** Whether it can be closed */
     closeable?: boolean;
-    /** 关闭时的回调 */
+    /** Callback when closed */
     onClose?: () => void;
-    /** 额外操作区域，显示在关闭按钮左侧 */
+    /** Additional operating area, displayed to the left of the close button */
     extra?: React.ReactNode;
-    /** 左侧广播图标 */
+    /** Radio icon on the left */
     icon?: React.ReactNode;
+    /** Whether to display multiple lines */
+    wrap?: boolean;
 } & NativeProps<'--background-color' | '--border-color' | '--text-color' | '--font-size' | '--icon-font-size' | '--height'>;
 export declare const NoticeBar: React.NamedExoticComponent<NoticeBarProps>;

package/2x/es/components/notice-bar/notice-bar.js

@@ -11,6 +11,7 @@ const defaultProps = {
   color: 'default',
   delay: 2000,
   speed: 50,
+  wrap: false,
   icon: React.createElement(SoundOutline, null)
 };
 export const NoticeBar = memo(p => {
@@ -22,7 +23,7 @@ export const NoticeBar = memo(p => {
   const delayLockRef = useRef(true);
   const animatingRef = useRef(false);
   function start() {
-    if (delayLockRef.current) return;
+    if (delayLockRef.current || props.wrap) return;
     const container = containerRef.current;
     const text = textRef.current;
     if (!container || !text) return;
@@ -61,7 +62,9 @@ export const NoticeBar = memo(p => {
   });
   if (!visible) return null;
   return withNativeProps(props, React.createElement("div", {
-    className: classNames(classPrefix, `${classPrefix}-${props.color}`)
+    className: classNames(classPrefix, `${classPrefix}-${props.color}`, {
+      [`${classPrefix}-wrap`]: props.wrap
+    })
   }, props.icon && React.createElement("span", {
     className: `${classPrefix}-left`
   }, props.icon), React.createElement("span", {

package/2x/es/components/stepper/stepper.d.ts

@@ -20,6 +20,8 @@ export declare type StepperProps = Pick<InputProps, 'onFocus' | 'onBlur'> & (Val
     digits?: number;
     disabled?: boolean;
     inputReadOnly?: boolean;
+    parser?: (text: string) => number;
+    formatter?: (value?: number) => string;
 } & NativeProps<'--height' | '--input-width' | '--input-font-size' | '--input-background-color' | '--border-radius' | '--border' | '--border-inner' | '--active-border' | '--button-font-size' | '--button-background-color' | '--button-width' | '--input-font-color' | '--button-text-color'>;
 export declare const Stepper: FC<StepperProps>;
 export {};