antd-mobile 5.25.1 → 5.27.0

package/cjs/components/image-uploader/image-uploader.js

@@ -14,7 +14,9 @@ var _usePropsValue = require("../../utils/use-props-value");
 var _ahooks = require("ahooks");
 var _space = _interopRequireDefault(require("../space"));
 var _nativeProps = require("../../utils/native-props");
+var _measureCssLength = require("../../utils/measure-css-length");
 var _configProvider = require("../config-provider");
+var _grid = _interopRequireDefault(require("../grid"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -22,6 +24,9 @@ const classPrefix = `adm-image-uploader`;
 const defaultProps = {
   disableUpload: false,
   deletable: true,
+  deleteIcon: _react.default.createElement(_antdMobileIcons.CloseOutline, {
+    className: `${classPrefix}-cell-delete-icon`
+  }),
   showUpload: true,
   multiple: false,
   maxCount: 0,
@@ -36,8 +41,26 @@ const ImageUploader = p => {
     locale
   } = (0, _configProvider.useConfig)();
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const {
+    columns
+  } = props;
   const [value, setValue] = (0, _usePropsValue.usePropsValue)(props);
   const [tasks, setTasks] = (0, _react.useState)([]);
+  const containerRef = (0, _react.useRef)(null);
+  const containerSize = (0, _ahooks.useSize)(containerRef);
+  const gapMeasureRef = (0, _react.useRef)(null);
+  const [cellSize, setCellSize] = (0, _react.useState)(80);
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
+    const gapMeasure = gapMeasureRef.current;
+    if (columns && containerSize && gapMeasure) {
+      const width = containerSize.width;
+      const gap = (0, _measureCssLength.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'
+  };
   (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     setTasks(prev => prev.filter(task => {
       if (task.url === undefined) return true;
@@ -161,6 +184,7 @@ 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) {
@@ -178,26 +202,27 @@ const ImageUploader = p => {
       return renderItem ? renderItem(originNode, fileItem, value) : originNode;
     });
   };
-  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
-    className: classPrefix
-  }, _react.default.createElement(_space.default, {
-    className: `${classPrefix}-space`,
-    wrap: true,
-    block: true
-  }, renderImages(), finalTasks.map(task => {
+  const contentNode = _react.default.createElement(_react.default.Fragment, null, renderImages(), tasks.map(task => {
+    if (!props.showFailed && task.status === 'fail') {
+      return null;
+    }
     return _react.default.createElement(_previewItem.default, {
       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.default.createElement("div", {
-    className: `${classPrefix}-upload-button-wrap`
-  }, props.children ? props.children : _react.default.createElement("span", {
+  }), _react.default.createElement("div", {
+    className: `${classPrefix}-upload-button-wrap`,
+    style: showUpload ? undefined : {
+      display: 'none'
+    }
+  }, props.children || _react.default.createElement("span", {
     className: `${classPrefix}-cell ${classPrefix}-upload-button`,
     role: 'button',
     "aria-label": locale.ImageUploader.upload
@@ -211,6 +236,21 @@ const ImageUploader = p => {
     className: `${classPrefix}-input`,
     onChange: onChange,
     "aria-hidden": true
-  })))));
+  })));
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: classPrefix,
+    ref: containerRef
+  }, columns ? _react.default.createElement(_grid.default, {
+    className: `${classPrefix}-grid`,
+    columns: columns,
+    style: style
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-gap-measure`,
+    ref: gapMeasureRef
+  }), contentNode.props.children) : _react.default.createElement(_space.default, {
+    className: `${classPrefix}-space`,
+    wrap: true,
+    block: true
+  }, contentNode.props.children)));
 };
 exports.ImageUploader = ImageUploader;

package/cjs/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/cjs/components/image-uploader/preview-item.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _antdMobileIcons = require("antd-mobile-icons");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _image = _interopRequireDefault(require("../image"));
 var _spinLoading = _interopRequireDefault(require("../spin-loading"));
@@ -22,6 +21,7 @@ const PreviewItem = props => {
     url,
     file,
     deletable,
+    deleteIcon,
     onDelete,
     imageFit
   } = props;
@@ -34,11 +34,11 @@ const PreviewItem = props => {
     }
     return '';
   }, [url, file]);
-  (0, _react.useLayoutEffect)(() => {
+  (0, _react.useEffect)(() => {
     return () => {
-      URL.revokeObjectURL(src);
+      if (file) URL.revokeObjectURL(src);
     };
-  }, [src]);
+  }, [src, file]);
   function renderLoading() {
     return props.status === 'pending' && _react.default.createElement("div", {
       className: `${classPrefix}-cell-mask`
@@ -54,9 +54,7 @@ const PreviewItem = props => {
     return deletable && _react.default.createElement("span", {
       className: `${classPrefix}-cell-delete`,
       onClick: onDelete
-    }, _react.default.createElement(_antdMobileIcons.CloseOutline, {
-      className: `${classPrefix}-cell-delete-icon`
-    }));
+    }, deleteIcon);
   }
   return _react.default.createElement("div", {
     className: (0, _classnames.default)(`${classPrefix}-cell`, props.status === 'fail' && `${classPrefix}-cell-fail`)

package/cjs/components/image-viewer/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './image-viewer.less';
 import { showMultiImageViewer, showImageViewer, clearImageViewer } from './methods';
 export type { ImageViewerProps, MultiImageViewerProps, MultiImageViewerRef, } from './image-viewer';

package/cjs/components/index-bar/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index-bar.less';
 export type { IndexBarProps, IndexBarRef } from './index-bar';
 export type { IndexBarPanelProps } from './panel';

package/cjs/components/jumbo-tabs/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './jumbo-tabs.less';
 export type { JumboTabsProps, JumboTabProps } from './jumbo-tabs';
 declare const _default: import("react").FC<import("./jumbo-tabs").JumboTabsProps> & {

package/cjs/components/list/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './list.less';
 export type { ListProps, ListRef } from './list';
 export type { ListItemProps } from './list-item';

package/cjs/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/cjs/components/mask/mask.js

@@ -22,6 +22,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,
@@ -42,8 +46,8 @@ const Mask = p => {
   const background = (0, _react.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] = (0, _react.useState)(props.visible);
   const unmountedRef = (0, _ahooks.useUnmountedRef)();

package/cjs/components/modal/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './modal.less';
 import { show } from './show';
 import { alert } from './alert';

package/cjs/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: 38px;
+  --height: 40px;
   height: var(--height);
   box-sizing: border-box;
   font-size: var(--font-size);
-  line-height: var(--height);
   padding: 0 12px;
   display: flex;
   align-items: center;
@@ -41,7 +40,6 @@
   flex-shrink: 0;
   margin-right: 8px;
   font-size: var(--icon-font-size);
-  line-height: var(--height);
 }
 .adm-notice-bar .adm-notice-bar-content {
   flex: 1;
@@ -54,9 +52,11 @@
 .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: 12px;
@@ -72,3 +72,10 @@
 .adm-notice-bar-close-icon {
   font-size: var(--adm-font-size-10);
 }
+.adm-notice-bar-wrap {
+  height: auto;
+  align-items: flex-start;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  line-height: 22px;
+}

package/cjs/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/cjs/components/notice-bar/notice-bar.js

@@ -20,6 +20,7 @@ const defaultProps = {
   color: 'default',
   delay: 2000,
   speed: 50,
+  wrap: false,
   icon: _react.default.createElement(_antdMobileIcons.SoundOutline, null)
 };
 const NoticeBar = (0, _react.memo)(p => {
@@ -31,7 +32,7 @@ const NoticeBar = (0, _react.memo)(p => {
   const delayLockRef = (0, _react.useRef)(true);
   const animatingRef = (0, _react.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;
@@ -70,7 +71,9 @@ const NoticeBar = (0, _react.memo)(p => {
   });
   if (!visible) return null;
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
-    className: (0, _classnames.default)(classPrefix, `${classPrefix}-${props.color}`)
+    className: (0, _classnames.default)(classPrefix, `${classPrefix}-${props.color}`, {
+      [`${classPrefix}-wrap`]: props.wrap
+    })
   }, props.icon && _react.default.createElement("span", {
     className: `${classPrefix}-left`
   }, props.icon), _react.default.createElement("span", {

package/cjs/components/popover/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './popover.less';
 import './popover-menu.less';
 export type { PopoverProps, PopoverRef } from './popover';

package/cjs/components/radio/group-context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RadioValue } from '.';
 export declare const RadioGroupContext: import("react").Context<{
     value: RadioValue[];

package/cjs/components/radio/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './radio.less';
 export type { RadioProps, RadioValue } from './radio';
 export type { RadioGroupProps } from './group';

package/cjs/components/result-page/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './result-page.less';
 export type { ResultPageProps } from './result-page';
 declare const _default: import("react").FC<import("./result-page").ResultPageProps> & {

package/cjs/components/side-bar/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './side-bar.less';
 export type { SideBarProps, SideBarItemProps } from './side-bar';
 declare const _default: import("react").FC<import("./side-bar").SideBarProps> & {

package/cjs/components/skeleton/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './skeleton.less';
 export type { SkeletonProps, SkeletonTitleProps } from './skeleton';
 declare const _default: import("react").FC<import("./skeleton").SkeletonProps> & {

package/cjs/components/slider/slider.js

@@ -9,12 +9,12 @@ var _nativeProps = require("../../utils/native-props");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ticks = _interopRequireDefault(require("./ticks"));
 var _marks = _interopRequireDefault(require("./marks"));
+var _miniDecimal = _interopRequireWildcard(require("@rc-component/mini-decimal"));
 var _thumb = _interopRequireDefault(require("./thumb"));
 var _withDefaultProps = require("../../utils/with-default-props");
 var _nearest = require("../../utils/nearest");
 var _usePropsValue = require("../../utils/use-props-value");
 var _devLog = require("../../utils/dev-log");
-var _big = _interopRequireDefault(require("big.js"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -47,9 +47,14 @@ const Slider = p => {
   function convertValue(value) {
     return props.range ? value : [props.min, value];
   }
+  function alignValue(value, decimalLen) {
+    const decimal = (0, _miniDecimal.default)(value);
+    const fixedStr = (0, _miniDecimal.toFixed)(decimal.toString(), '.', decimalLen);
+    return (0, _miniDecimal.default)(fixedStr).toNumber();
+  }
   function reverseValue(value) {
     const mergedDecimalLen = Math.max(getDecimalLen(step), getDecimalLen(value[0]), getDecimalLen(value[1]));
-    return props.range ? value.map(v => (0, _big.default)((0, _big.default)(v).toFixed(mergedDecimalLen)).toNumber()) : (0, _big.default)((0, _big.default)(value[1]).toFixed(mergedDecimalLen)).toNumber();
+    return props.range ? value.map(v => alignValue(v, mergedDecimalLen)) : alignValue(value[1], mergedDecimalLen);
   }
   function getDecimalLen(n) {
     return (`${n}`.split('.')[1] || '').length;
@@ -84,7 +89,7 @@ const Slider = p => {
       return Object.keys(marks).map(parseFloat).sort((a, b) => a - b);
     } else {
       const points = [];
-      for (let i = (0, _big.default)(min); i.lte(max); i = i.plus(step)) {
+      for (let i = (0, _miniDecimal.default)(min); i.lessEquals((0, _miniDecimal.default)(max)); i = i.add(step)) {
         points.push(i.toNumber());
       }
       return points;

package/cjs/components/stepper/stepper.d.ts

@@ -1,25 +1,34 @@
-import { FC } from 'react';
+import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { InputProps } from '../input';
-declare type ValueProps = {
+declare type ValueProps<ValueType> = {
     allowEmpty: true;
-    value?: number | null;
-    defaultValue?: number | null;
-    onChange?: (value: number | null) => void;
+    value?: ValueType | null;
+    defaultValue?: ValueType | null;
+    onChange?: (value: ValueType | null) => void;
 };
-declare type ValuePropsWithNull = {
+declare type ValuePropsWithNull<ValueType> = {
     allowEmpty?: false;
-    value?: number;
-    defaultValue?: number;
-    onChange?: (value: number) => void;
+    value?: ValueType;
+    defaultValue?: ValueType;
+    onChange?: (value: ValueType) => void;
 };
-export declare type StepperProps = Pick<InputProps, 'onFocus' | 'onBlur'> & (ValuePropsWithNull | ValueProps) & {
-    min?: number;
-    max?: number;
-    step?: number;
+export declare type BaseStepperProps<ValueType> = Pick<InputProps, 'onFocus' | 'onBlur'> & (ValuePropsWithNull<ValueType> | ValueProps<ValueType>) & {
+    min?: ValueType;
+    max?: ValueType;
+    step?: ValueType;
     digits?: number;
     disabled?: boolean;
     inputReadOnly?: boolean;
+    parser?: (text: string) => ValueType;
+    formatter?: (value?: ValueType) => 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 declare type NumberStepperProps = BaseStepperProps<number> & {
+    stringMode?: false;
+};
+export declare type StringStepperProps = BaseStepperProps<string> & {
+    stringMode: true;
+};
+export declare type StepperProps = NumberStepperProps | StringStepperProps;
+export declare function Stepper<ValueType extends number | string>(p: StepperProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export {};