antd-mobile 5.23.0 → 5.24.1

package/2x/es/components/form/form.css

@@ -1,10 +1,12 @@
 .adm-form {
-  --border-inner: solid 2px var(--adm-color-border);
-  --border-top: solid 2px var(--adm-color-border);
-  --border-bottom: solid 2px var(--adm-color-border);
+  --border-inner: solid 2px var(--adm-border-color);
+  --border-top: solid 2px var(--adm-border-color);
+  --border-bottom: solid 2px var(--adm-border-color);
+  --prefix-width: 6.8em;
   ---border-inner: var(--border-inner);
   ---border-top: var(--border-top);
   ---border-bottom: var(--border-bottom);
+  ---prefix-width: var(--prefix-width);
 }
 
 .adm-form .adm-list.adm-list {
@@ -19,6 +21,10 @@
   padding: 40px 24px;
 }
 
+.adm-form .adm-form-item-horizontal.adm-list-item {
+  --prefix-width: var(---prefix-width);
+}
+
 .adm-form-list-operation {
   text-align: center;
   color: #1677ff;

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

@@ -4,13 +4,13 @@ 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 FormProps = Pick<RcFormProps, 'form' | 'initialValues' | 'name' | 'preserve' | 'validateMessages' | 'validateTrigger' | 'onFieldsChange' | 'onFinish' | 'onFinishFailed' | 'onValuesChange' | 'children'> & NativeProps<'--border-inner' | '--border-top' | '--border-bottom'> & Partial<FormContextType> & {
+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'];
 };
 export declare const Form: React.ForwardRefExoticComponent<Pick<RcFormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & {
     className?: string | undefined;
-    style?: (React.CSSProperties & Partial<Record<"--border-bottom" | "--border-inner" | "--border-top", string>>) | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--border-bottom" | "--border-inner" | "--border-top" | "--prefix-width", string>>) | undefined;
     tabIndex?: number | undefined;
 } & React.AriaAttributes & Partial<FormContextType> & {
     footer?: ReactNode;

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

@@ -14,20 +14,18 @@ const classPrefix = 'adm-form';
 const defaultProps = defaultFormContext;
 export const Form = forwardRef((p, ref) => {
   const props = mergeProps(defaultProps, p);
-
   const {
-    className,
-    style,
-    hasFeedback,
-    children,
-    layout,
-    footer,
-    mode,
-    disabled,
-    requiredMarkStyle
-  } = props,
-        formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode", "disabled", "requiredMarkStyle"]);
-
+      className,
+      style,
+      hasFeedback,
+      children,
+      layout,
+      footer,
+      mode,
+      disabled,
+      requiredMarkStyle
+    } = props,
+    formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode", "disabled", "requiredMarkStyle"]);
   const {
     locale
   } = useConfig();
@@ -36,7 +34,6 @@ export const Form = forwardRef((p, ref) => {
   let currentHeader = null;
   let items = [];
   let count = 0;
-
   function collect() {
     if (items.length === 0) return;
     count += 1;
@@ -47,7 +44,6 @@ export const Form = forwardRef((p, ref) => {
     }, items));
     items = [];
   }
-
   traverseReactNode(props.children, child => {
     if (React.isValidElement(child)) {
       if (child.type === Header) {
@@ -55,14 +51,12 @@ export const Form = forwardRef((p, ref) => {
         currentHeader = child.props.children;
         return;
       }
-
       if (child.type === FormArray) {
         collect();
         lists.push(child);
         return;
       }
     }
-
     items.push(child);
   });
   collect();

package/2x/es/components/form/index.css

@@ -1,10 +1,12 @@
 .adm-form {
-  --border-inner: solid 2px var(--adm-color-border);
-  --border-top: solid 2px var(--adm-color-border);
-  --border-bottom: solid 2px var(--adm-color-border);
+  --border-inner: solid 2px var(--adm-border-color);
+  --border-top: solid 2px var(--adm-border-color);
+  --border-bottom: solid 2px var(--adm-border-color);
+  --prefix-width: 6.8em;
   ---border-inner: var(--border-inner);
   ---border-top: var(--border-top);
   ---border-bottom: var(--border-bottom);
+  ---prefix-width: var(--prefix-width);
 }
 
 .adm-form .adm-list.adm-list {
@@ -19,6 +21,10 @@
   padding: 40px 24px;
 }
 
+.adm-form .adm-form-item-horizontal.adm-list-item {
+  --prefix-width: var(---prefix-width);
+}
+
 .adm-form-list-operation {
   text-align: center;
   color: #1677ff;
@@ -93,7 +99,6 @@
 
 .adm-form-item.adm-form-item-horizontal.adm-list-item {
   --align-items: stretch;
-  --prefix-width: 6.8em;
 }
 
 .adm-form-item.adm-form-item-horizontal .adm-list-item-content-prefix {

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

@@ -9,7 +9,7 @@ export type { ValidateMessages, FieldData, NamePath, } from 'rc-field-form/es/in
 export type { FormArrayField, FormArrayOperation, FormArrayProps, } from './form-array';
 declare const _default: import("react").ForwardRefExoticComponent<Pick<import("rc-field-form").FormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & {
     className?: string | undefined;
-    style?: (import("react").CSSProperties & Partial<Record<"--border-bottom" | "--border-inner" | "--border-top", string>>) | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--border-bottom" | "--border-inner" | "--border-top" | "--prefix-width", string>>) | undefined;
     tabIndex?: number | undefined;
 } & import("react").AriaAttributes & Partial<import("./context").FormContextType> & {
     footer?: import("react").ReactNode;

package/2x/es/components/form/utils.js

@@ -2,18 +2,16 @@ import { isMemo, isFragment } from 'react-is';
 export function toArray(candidate) {
   if (candidate === undefined || candidate === false) return [];
   return Array.isArray(candidate) ? candidate : [candidate];
-} // eslint-disable-next-line @typescript-eslint/ban-types
-
+}
+// eslint-disable-next-line @typescript-eslint/ban-types
 function shouldConstruct(Component) {
   const prototype = Component.prototype;
   return !!(prototype && prototype.isReactComponent);
-} // https://github.com/facebook/react/blob/ce13860281f833de8a3296b7a3dad9caced102e9/packages/react-reconciler/src/ReactFiber.new.js#L225
-
-
+}
+// https://github.com/facebook/react/blob/ce13860281f833de8a3296b7a3dad9caced102e9/packages/react-reconciler/src/ReactFiber.new.js#L225
 function isSimpleFunctionComponent(type) {
   return typeof type === 'function' && !shouldConstruct(type) && type.defaultProps === undefined;
 }
-
 export function isSafeSetRefComponent(component) {
   if (isFragment(component)) return false;
   if (isMemo(component)) return isSafeSetRefComponent(component.type);

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

@@ -10,7 +10,6 @@ export const Grid = props => {
   const {
     gap
   } = props;
-
   if (gap !== undefined) {
     if (Array.isArray(gap)) {
       style['--gap-horizontal'] = toCSSLength(gap[0]);
@@ -19,7 +18,6 @@ export const Grid = props => {
       style['--gap'] = toCSSLength(gap);
     }
   }
-
   return withNativeProps(props, React.createElement("div", {
     className: classPrefix,
     style: style

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

@@ -33,12 +33,10 @@ export const Image = staged(p => {
     setLoaded(false);
     setFailed(false);
   }, [src]);
-
   function renderInner() {
     if (failed) {
       return React.createElement(React.Fragment, null, props.fallback);
     }
-
     const img = React.createElement("img", {
       className: `${classPrefix}-img`,
       src: src,
@@ -46,13 +44,11 @@ export const Image = staged(p => {
       onClick: props.onClick,
       onLoad: e => {
         var _a;
-
         setLoaded(true);
         (_a = props.onLoad) === null || _a === void 0 ? void 0 : _a.call(props, e);
       },
       onError: e => {
         var _a;
-
         setFailed(true);
         (_a = props.onError) === null || _a === void 0 ? void 0 : _a.call(props, e);
       },
@@ -71,19 +67,15 @@ export const Image = staged(p => {
     });
     return React.createElement(React.Fragment, null, !loaded && props.placeholder, img);
   }
-
   const style = {};
-
   if (props.width) {
     style['--width'] = toCSSLength(props.width);
     style['width'] = toCSSLength(props.width);
   }
-
   if (props.height) {
     style['--height'] = toCSSLength(props.height);
     style['height'] = toCSSLength(props.height);
   }
-
   return withNativeProps(props, React.createElement("div", {
     ref: ref,
     className: classPrefix,

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

@@ -37,7 +37,6 @@ export const ImageUploader = p => {
   }, [value]);
   useIsomorphicLayoutEffect(() => {
     var _a;
-
     (_a = props.onUploadQueueChange) === null || _a === void 0 ? void 0 : _a.call(props, tasks.map(item => ({
       id: item.id,
       status: item.status
@@ -49,7 +48,6 @@ export const ImageUploader = p => {
     onPreview,
     renderItem
   } = props;
-
   function processFile(file, fileList) {
     return __awaiter(this, void 0, void 0, function* () {
       const {
@@ -60,10 +58,8 @@ export const ImageUploader = p => {
       return transformedFile;
     });
   }
-
   function onChange(e) {
     var _a;
-
     return __awaiter(this, void 0, void 0, function* () {
       e.persist();
       const {
@@ -72,7 +68,6 @@ export const ImageUploader = p => {
       if (!rawFiles) return;
       let files = [].slice.call(rawFiles);
       e.target.value = ''; // HACK: fix the same file doesn't trigger onChange
-
       if (props.beforeUpload) {
         const postFiles = files.map(file => {
           return processFile(file, files);
@@ -81,20 +76,16 @@ export const ImageUploader = p => {
           files = filesList.filter(Boolean);
         });
       }
-
       if (files.length === 0) {
         return;
       }
-
       if (maxCount > 0) {
         const exceed = value.length + files.length - maxCount;
-
         if (exceed > 0) {
           files = files.slice(0, files.length - exceed);
           (_a = props.onCountExceed) === null || _a === void 0 ? void 0 : _a.call(props, exceed);
         }
       }
-
       const newTasks = files.map(file => ({
         id: idCountRef.current++,
         status: 'pending',
@@ -112,7 +103,6 @@ export const ImageUploader = p => {
                   url: result.url
                 });
               }
-
               return task;
             });
           });
@@ -128,7 +118,6 @@ export const ImageUploader = p => {
                   status: 'fail'
                 });
               }
-
               return task;
             });
           });
@@ -137,9 +126,7 @@ export const ImageUploader = p => {
       }))).catch(error => console.error(error));
     });
   }
-
   const imageViewerHandlerRef = useRef(null);
-
   function previewImage(index) {
     imageViewerHandlerRef.current = ImageViewer.Multi.show({
       images: value.map(fileItem => fileItem.url),
@@ -149,18 +136,14 @@ export const ImageUploader = p => {
       }
     });
   }
-
   useUnmount(() => {
     var _a;
-
     (_a = imageViewerHandlerRef.current) === null || _a === void 0 ? void 0 : _a.close();
   });
   const showUpload = props.showUpload && (maxCount === 0 || value.length + tasks.length < maxCount);
-
   const renderImages = () => {
     return value.map((fileItem, index) => {
       var _a, _b;
-
       const originNode = React.createElement(PreviewItem, {
         key: (_a = fileItem.key) !== null && _a !== void 0 ? _a : index,
         url: (_b = fileItem.thumbnailUrl) !== null && _b !== void 0 ? _b : fileItem.url,
@@ -170,12 +153,10 @@ export const ImageUploader = p => {
           if (props.preview) {
             previewImage(index);
           }
-
           onPreview && onPreview(index, fileItem);
         },
         onDelete: () => __awaiter(void 0, void 0, void 0, function* () {
           var _c;
-
           const canDelete = yield (_c = props.onDelete) === null || _c === void 0 ? void 0 : _c.call(props, fileItem);
           if (canDelete === false) return;
           setValue(value.filter((x, i) => i !== index));
@@ -184,7 +165,6 @@ export const ImageUploader = p => {
       return renderItem ? renderItem(originNode, fileItem, value) : originNode;
     });
   };
-
   return withNativeProps(props, React.createElement("div", {
     className: classPrefix
   }, React.createElement(Space, {
@@ -195,7 +175,6 @@ export const ImageUploader = p => {
     if (!props.showFailed && task.status === 'fail') {
       return null;
     }
-
     return React.createElement(PreviewItem, {
       key: task.id,
       file: task.file,

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

@@ -5,7 +5,6 @@ import Image from '../image';
 import SpinLoading from '../spin-loading';
 import { useConfig } from '../config-provider';
 const classPrefix = `adm-image-uploader`;
-
 const PreviewItem = props => {
   const {
     locale
@@ -21,11 +20,9 @@ const PreviewItem = props => {
     if (url) {
       return url;
     }
-
     if (file) {
       return URL.createObjectURL(file);
     }
-
     return '';
   }, [url, file]);
   useLayoutEffect(() => {
@@ -33,7 +30,6 @@ const PreviewItem = props => {
       URL.revokeObjectURL(src);
     };
   }, [src]);
-
   function renderLoading() {
     return props.status === 'pending' && React.createElement("div", {
       className: `${classPrefix}-cell-mask`
@@ -45,7 +41,6 @@ const PreviewItem = props => {
       className: `${classPrefix}-cell-mask-message`
     }, locale.ImageUploader.uploading)));
   }
-
   function renderDelete() {
     return deletable && React.createElement("span", {
       className: `${classPrefix}-cell-delete`,
@@ -54,7 +49,6 @@ const PreviewItem = props => {
       className: `${classPrefix}-cell-delete-icon`
     }));
   }
-
   return React.createElement("div", {
     className: classNames(`${classPrefix}-cell`, props.status === 'fail' && `${classPrefix}-cell-fail`)
   }, React.createElement(Image, {
@@ -64,5 +58,4 @@ const PreviewItem = props => {
     onClick: props.onClick
   }), renderLoading(), renderDelete());
 };
-
 export default PreviewItem;

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

@@ -13,7 +13,6 @@ const defaultProps = {
 };
 export const ImageViewer = p => {
   var _a;
-
   const props = mergeProps(defaultProps, p);
   const node = React.createElement(Mask, {
     visible: props.visible,
@@ -27,7 +26,6 @@ export const ImageViewer = p => {
     image: props.image,
     onTap: () => {
       var _a;
-
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
     },
     maxZoom: props.maxZoom
@@ -43,21 +41,18 @@ const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
 });
 export const MultiImageViewer = forwardRef((p, ref) => {
   var _a;
-
   const props = mergeProps(multiDefaultProps, p);
   const [index, setIndex] = useState(props.defaultIndex);
   const slidesRef = useRef(null);
   useImperativeHandle(ref, () => ({
     swipeTo: (index, immediate) => {
       var _a;
-
       setIndex(index);
       (_a = slidesRef.current) === null || _a === void 0 ? void 0 : _a.swipeTo(index, immediate);
     }
   }));
   const onSlideChange = useCallback(index => {
     var _a;
-
     setIndex(index);
     (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, index);
   }, [props.onIndexChange]);
@@ -76,7 +71,6 @@ export const MultiImageViewer = forwardRef((p, ref) => {
     images: props.images,
     onTap: () => {
       var _a;
-
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
     },
     maxZoom: props.maxZoom

package/2x/es/components/image-viewer/methods.js

@@ -7,7 +7,6 @@ export function showImageViewer(props) {
   const handler = renderImperatively(React.createElement(ImageViewer, Object.assign({}, props, {
     afterClose: () => {
       var _a;
-
       handlerSet.delete(handler);
       (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
     }
@@ -20,7 +19,6 @@ export function showMultiImageViewer(props) {
   const handler = renderImperatively(React.createElement(MultiImageViewer, Object.assign({}, props, {
     afterClose: () => {
       var _a;
-
       handlerSet.delete(handler);
       (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
     }

package/2x/es/components/image-viewer/slide.js

@@ -23,7 +23,6 @@ export const Slide = props => {
   const controlSize = useSize(controlRef);
   const imgSize = useSize(imgRef);
   const pinchLockRef = useRef(false);
-
   const boundMatrix = (nextMatrix, type, last = false) => {
     if (!controlSize || !imgSize) return nextMatrix;
     const controlLeft = -controlSize.width / 2;
@@ -34,11 +33,9 @@ export const Slide = props => {
     const scaledImgWidth = zoom * imgSize.width;
     const scaledImgHeight = zoom * imgSize.height;
     const [x, y] = mat.apply(nextMatrix, [imgLeft, imgTop]);
-
     if (type === 'translate') {
       let boundedX = x;
       let boundedY = y;
-
       if (scaledImgWidth > controlSize.width) {
         const minX = controlLeft - (scaledImgWidth - controlSize.width);
         const maxX = controlLeft;
@@ -46,7 +43,6 @@ export const Slide = props => {
       } else {
         boundedX = -scaledImgWidth / 2;
       }
-
       if (scaledImgHeight > controlSize.height) {
         const minY = controlTop - (scaledImgHeight - controlSize.height);
         const maxY = controlTop;
@@ -54,35 +50,27 @@ export const Slide = props => {
       } else {
         boundedY = -scaledImgHeight / 2;
       }
-
       return mat.translate(nextMatrix, boundedX - x, boundedY - y);
     }
-
     if (type === 'scale' && last) {
       const [boundedX, boundedY] = [scaledImgWidth > controlSize.width ? bound(x, controlLeft - (scaledImgWidth - controlSize.width), controlLeft) : -scaledImgWidth / 2, scaledImgHeight > controlSize.height ? bound(y, controlTop - (scaledImgHeight - controlSize.height), controlTop) : -scaledImgHeight / 2];
       return mat.translate(nextMatrix, boundedX - x, boundedY - y);
     }
-
     return nextMatrix;
   };
-
   useDragAndPinch({
     onDrag: state => {
       if (state.first) return;
       if (state.pinching) return state.cancel();
-
       if (state.tap && state.elapsedTime > 0 && state.elapsedTime < 1000) {
         // 判断点击时间>0是为了过滤掉非正常操作，例如用户长按选择图片之后的取消操作（也是一次点击）
         props.onTap();
         return;
       }
-
       const currentZoom = mat.getScaleX(matrix.get());
-
       if (dragLockRef) {
         dragLockRef.current = currentZoom !== 1;
       }
-
       if (!pinchLockRef.current && currentZoom <= 1) {
         api.start({
           matrix: mat.create()
@@ -99,18 +87,15 @@ export const Slide = props => {
     },
     onPinch: state => {
       var _a;
-
       pinchLockRef.current = !state.last;
       const [d] = state.offset;
       if (d < 0) return;
       const nextZoom = state.last ? bound(d, 1, props.maxZoom) : d;
       (_a = props.onZoomChange) === null || _a === void 0 ? void 0 : _a.call(props, nextZoom);
-
       if (state.last && nextZoom <= 1) {
         api.start({
           matrix: mat.create()
         });
-
         if (dragLockRef) {
           dragLockRef.current = false;
         }
@@ -127,7 +112,6 @@ export const Slide = props => {
           matrix: boundMatrix(nextMatrix, 'scale', state.last),
           immediate: !state.last
         });
-
         if (dragLockRef) {
           dragLockRef.current = true;
         }

package/2x/es/components/image-viewer/slides.js

@@ -17,10 +17,8 @@ export const Slides = forwardRef((props, ref) => {
     }
   }));
   const count = props.images.length;
-
   function swipeTo(index, immediate = false) {
     var _a;
-
     const i = bound(index, 0, count - 1);
     (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, i);
     api.start({
@@ -28,7 +26,6 @@ export const Slides = forwardRef((props, ref) => {
       immediate
     });
   }
-
   useImperativeHandle(ref, () => ({
     swipeTo
   }));
@@ -36,7 +33,6 @@ export const Slides = forwardRef((props, ref) => {
   const bind = useDrag(state => {
     if (dragLockRef.current) return;
     const [offsetX] = state.offset;
-
     if (state.last) {
       const minIndex = Math.floor(offsetX / slideWidth);
       const maxIndex = minIndex + 1;

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

@@ -20,14 +20,11 @@ export const IndexBar = forwardRef((p, ref) => {
   const panels = [];
   traverseReactNode(props.children, child => {
     var _a;
-
     if (!React.isValidElement(child)) return;
-
     if (child.type !== Panel) {
       devWarning('IndexBar', 'The children of `IndexBar` must be `IndexBar.Panel` components.');
       return;
     }
-
     indexItems.push({
       index: child.props.index,
       brief: (_a = child.props.brief) !== null && _a !== void 0 ? _a : child.props.index.charAt(0)
@@ -47,19 +44,15 @@ export const IndexBar = forwardRef((p, ref) => {
   useImperativeHandle(ref, () => ({
     scrollTo
   }));
-
   function scrollTo(index) {
     var _a;
-
     const body = bodyRef.current;
     if (!body) return;
     const children = body.children;
-
     for (let i = 0; i < children.length; i++) {
       const panel = children.item(i);
       if (!panel) continue;
       const panelIndex = panel.dataset['index'];
-
       if (panelIndex === index) {
         body.scrollTop = panel.offsetTop;
         setActiveIndex(index);
@@ -68,23 +61,19 @@ export const IndexBar = forwardRef((p, ref) => {
       }
     }
   }
-
   const {
     run: checkActiveIndex
   } = useThrottleFn(() => {
     var _a;
-
     const body = bodyRef.current;
     if (!body) return;
     const scrollTop = body.scrollTop;
     const elements = body.getElementsByClassName(`${classPrefix}-anchor`);
-
     for (let i = 0; i < elements.length; i++) {
       const panel = elements.item(i);
       if (!panel) continue;
       const panelIndex = panel.dataset['index'];
       if (!panelIndex) continue;
-
       if (panel.offsetTop + panel.clientHeight - titleHeight > scrollTop) {
         setActiveIndex(panelIndex);
         activeIndex !== panelIndex && ((_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, panelIndex));

package/2x/es/components/index-bar/sidebar.js

@@ -28,7 +28,6 @@ export const Sidebar = props => {
       const target = document.elementFromPoint(clientX, clientY);
       if (!target) return;
       const index = target.dataset['index'];
-
       if (index) {
         props.onActive(index);
       }