antd-mobile 5.17.0 → 5.18.0

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

@@ -0,0 +1,210 @@
+import { __awaiter } from "tslib";
+import React, { useRef, useState } from 'react';
+import { AddOutline } 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 Space from '../space';
+import { withNativeProps } from '../../utils/native-props';
+import { useConfig } from '../config-provider';
+const classPrefix = `adm-image-uploader`;
+const defaultProps = {
+  disableUpload: false,
+  deletable: true,
+  showUpload: true,
+  multiple: false,
+  maxCount: 0,
+  defaultValue: [],
+  accept: 'image/*',
+  preview: true,
+  showFailed: true,
+  imageFit: 'cover'
+};
+export const ImageUploader = p => {
+  const {
+    locale
+  } = useConfig();
+  const props = mergeProps(defaultProps, p);
+  const [value, setValue] = usePropsValue(props);
+  const [tasks, setTasks] = useState([]);
+  useIsomorphicLayoutEffect(() => {
+    setTasks(prev => prev.filter(task => {
+      if (task.url === undefined) return true;
+      return !value.some(fileItem => fileItem.url === task.url);
+    }));
+  }, [value]);
+  const idCountRef = useRef(0);
+  const {
+    maxCount,
+    onPreview
+  } = props;
+
+  function processFile(file, fileList) {
+    return __awaiter(this, void 0, void 0, function* () {
+      const {
+        beforeUpload
+      } = props;
+      let transformedFile = file;
+      transformedFile = yield beforeUpload === null || beforeUpload === void 0 ? void 0 : beforeUpload(file, fileList);
+      return transformedFile;
+    });
+  }
+
+  function onChange(e) {
+    var _a;
+
+    return __awaiter(this, void 0, void 0, function* () {
+      e.persist();
+      const {
+        files: rawFiles
+      } = e.target;
+      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);
+        });
+        yield Promise.all(postFiles).then(filesList => {
+          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',
+        file
+      }));
+      setTasks(prev => [...prev, ...newTasks]);
+      yield Promise.all(newTasks.map(currentTask => __awaiter(this, void 0, void 0, function* () {
+        try {
+          const result = yield props.upload(currentTask.file);
+          setTasks(prev => {
+            return prev.map(task => {
+              if (task.id === currentTask.id) {
+                return Object.assign(Object.assign({}, task), {
+                  url: result.url
+                });
+              }
+
+              return task;
+            });
+          });
+          setValue(prev => {
+            const newVal = Object.assign({}, result);
+            return [...prev, newVal];
+          });
+        } catch (e) {
+          setTasks(prev => {
+            return prev.map(task => {
+              if (task.id === currentTask.id) {
+                return Object.assign(Object.assign({}, task), {
+                  status: 'fail'
+                });
+              }
+
+              return task;
+            });
+          });
+          throw e;
+        }
+      }))).catch(error => console.error(error));
+    });
+  }
+
+  const imageViewerHandlerRef = useRef(null);
+
+  function previewImage(index) {
+    imageViewerHandlerRef.current = ImageViewer.Multi.show({
+      images: value.map(fileItem => fileItem.url),
+      defaultIndex: index,
+      onClose: () => {
+        imageViewerHandlerRef.current = null;
+      }
+    });
+  }
+
+  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);
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix
+  }, React.createElement(Space, {
+    className: `${classPrefix}-space`,
+    wrap: true,
+    block: true
+  }, value.map((fileItem, index) => {
+    var _a, _b;
+
+    return React.createElement(PreviewItem, {
+      key: (_a = fileItem.key) !== null && _a !== void 0 ? _a : index,
+      url: (_b = fileItem.thumbnailUrl) !== null && _b !== void 0 ? _b : fileItem.url,
+      deletable: props.deletable,
+      imageFit: props.imageFit,
+      onClick: () => {
+        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));
+      })
+    });
+  }), 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',
+      status: task.status,
+      imageFit: props.imageFit,
+      onDelete: () => {
+        setTasks(tasks.filter(x => x.id !== task.id));
+      }
+    });
+  }), showUpload && React.createElement("div", {
+    className: `${classPrefix}-upload-button-wrap`
+  }, props.children ? props.children : React.createElement("span", {
+    className: `${classPrefix}-cell ${classPrefix}-upload-button`,
+    role: 'button',
+    "aria-label": locale.ImageUploader.upload
+  }, React.createElement("span", {
+    className: `${classPrefix}-upload-button-icon`
+  }, React.createElement(AddOutline, null))), !props.disableUpload && React.createElement("input", {
+    capture: props.capture,
+    accept: props.accept,
+    multiple: props.multiple,
+    type: 'file',
+    className: `${classPrefix}-input`,
+    onChange: onChange,
+    "aria-hidden": true
+  })))));
+};

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

@@ -0,0 +1,4 @@
+import { ImageUploader } from './image-uploader';
+import './image-uploader.less';
+export type { ImageUploadItem, ImageUploaderProps } from './image-uploader';
+export default ImageUploader;

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

@@ -0,0 +1,3 @@
+import { ImageUploader } from './image-uploader';
+import "./image-uploader.css";
+export default ImageUploader;

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

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { TaskStatus } from './image-uploader';
+import type { ImageProps } from '../image';
+declare type Props = {
+    onClick?: () => void;
+    onDelete?: () => void;
+    deletable: boolean;
+    url?: string;
+    file?: File;
+    status?: TaskStatus;
+    imageFit: ImageProps['fit'];
+};
+declare const PreviewItem: FC<Props>;
+export default PreviewItem;

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

@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react';
+import { CloseOutline } from 'antd-mobile-icons';
+import classNames from 'classnames';
+import Image from '../image';
+import SpinLoading from '../spin-loading';
+import { useConfig } from '../config-provider';
+const classPrefix = `adm-image-uploader`;
+
+const PreviewItem = props => {
+  const {
+    locale
+  } = useConfig();
+  const {
+    url,
+    file,
+    deletable,
+    onDelete,
+    imageFit
+  } = props;
+  const src = useMemo(() => {
+    if (url) {
+      return url;
+    }
+
+    if (file) {
+      return URL.createObjectURL(file);
+    }
+
+    return '';
+  }, [url, file]);
+
+  function renderLoading() {
+    return props.status === 'pending' && React.createElement("div", {
+      className: `${classPrefix}-cell-mask`
+    }, React.createElement("span", {
+      className: `${classPrefix}-cell-loading`
+    }, React.createElement(SpinLoading, {
+      color: 'white'
+    }), React.createElement("span", {
+      className: `${classPrefix}-cell-mask-message`
+    }, locale.ImageUploader.uploading)));
+  }
+
+  function renderDelete() {
+    return deletable && React.createElement("span", {
+      className: `${classPrefix}-cell-delete`,
+      onClick: onDelete
+    }, React.createElement(CloseOutline, {
+      className: `${classPrefix}-cell-delete-icon`
+    }));
+  }
+
+  return React.createElement("div", {
+    className: classNames(`${classPrefix}-cell`, props.status === 'fail' && `${classPrefix}-cell-fail`)
+  }, React.createElement(Image, {
+    className: `${classPrefix}-cell-image`,
+    src: src,
+    fit: imageFit,
+    onClick: props.onClick
+  }), renderLoading(), renderDelete());
+};
+
+export default PreviewItem;

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

@@ -0,0 +1,75 @@
+.adm-image-viewer-content {
+  width: 100vw;
+  height: 100vh;
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.adm-image-viewer-footer {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  z-index: 1;
+}
+
+.adm-image-viewer-slides {
+  height: 100%;
+  position: relative;
+  z-index: 1;
+  cursor: -webkit-grab;
+  cursor: grab;
+  touch-action: none;
+}
+
+.adm-image-viewer-slides-inner {
+  height: 100%;
+  white-space: nowrap;
+}
+
+.adm-image-viewer-slides-inner > * {
+  margin-right: 32px;
+}
+
+.adm-image-viewer-slide {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+
+.adm-image-viewer-control {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  cursor: -webkit-grab;
+  cursor: grab;
+  touch-action: none;
+}
+
+.adm-image-viewer-image-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.adm-image-viewer-image-wrapper img {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.adm-image-viewer-indicator {
+  position: absolute;
+  z-index: 2;
+  left: 50%;
+  top: 24px;
+  transform: translateX(-50%);
+  color: #e6e6e6;
+  font-size: var(--adm-font-size-6);
+}

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

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import { GetContainer } from '../../utils/render-to-container';
+import { SlidesRef } from './slides';
+export declare type ImageViewerProps = {
+    image?: string;
+    maxZoom?: number;
+    getContainer?: GetContainer;
+    visible?: boolean;
+    onClose?: () => void;
+    afterClose?: () => void;
+    renderFooter?: (image: string) => React.ReactNode;
+};
+export declare const ImageViewer: FC<ImageViewerProps>;
+export declare type MultiImageViewerRef = SlidesRef;
+export declare type MultiImageViewerProps = Omit<ImageViewerProps, 'image' | 'renderFooter'> & {
+    images?: string[];
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    renderFooter?: (image: string, index: number) => React.ReactNode;
+};
+export declare const MultiImageViewer: React.ForwardRefExoticComponent<Omit<ImageViewerProps, "image" | "renderFooter"> & {
+    images?: string[] | undefined;
+    defaultIndex?: number | undefined;
+    onIndexChange?: ((index: number) => void) | undefined;
+    renderFooter?: ((image: string, index: number) => React.ReactNode) | undefined;
+} & React.RefAttributes<SlidesRef>>;

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

@@ -0,0 +1,87 @@
+import React, { forwardRef, useImperativeHandle, useRef, useState, useCallback } from 'react';
+import { mergeProps } from '../../utils/with-default-props';
+import { renderToContainer } from '../../utils/render-to-container';
+import Mask from '../mask';
+import SafeArea from '../safe-area';
+import { Slide } from './slide';
+import { Slides } from './slides';
+const classPrefix = `adm-image-viewer`;
+const defaultProps = {
+  maxZoom: 3,
+  getContainer: null,
+  visible: false
+};
+export const ImageViewer = p => {
+  var _a;
+
+  const props = mergeProps(defaultProps, p);
+  const node = React.createElement(Mask, {
+    visible: props.visible,
+    disableBodyScroll: false,
+    opacity: 'thick',
+    afterClose: props.afterClose
+  }, React.createElement("div", {
+    className: `${classPrefix}-content`
+  }, props.image && React.createElement(Slide, {
+    image: props.image,
+    onTap: () => {
+      var _a;
+
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    },
+    maxZoom: props.maxZoom
+  })), props.image && React.createElement("div", {
+    className: `${classPrefix}-footer`
+  }, (_a = props.renderFooter) === null || _a === void 0 ? void 0 : _a.call(props, props.image), React.createElement(SafeArea, {
+    position: 'bottom'
+  })));
+  return renderToContainer(props.getContainer, node);
+};
+const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
+  defaultIndex: 0
+});
+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]);
+  const node = React.createElement(Mask, {
+    visible: props.visible,
+    disableBodyScroll: false,
+    opacity: 'thick',
+    afterClose: props.afterClose
+  }, React.createElement("div", {
+    className: `${classPrefix}-content`
+  }, props.images && React.createElement(Slides, {
+    ref: slidesRef,
+    defaultIndex: index,
+    onIndexChange: onSlideChange,
+    images: props.images,
+    onTap: () => {
+      var _a;
+
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    },
+    maxZoom: props.maxZoom
+  })), props.images && React.createElement("div", {
+    className: `${classPrefix}-footer`
+  }, (_a = props.renderFooter) === null || _a === void 0 ? void 0 : _a.call(props, props.images[index], index), React.createElement(SafeArea, {
+    position: 'bottom'
+  })));
+  return renderToContainer(props.getContainer, node);
+});

package/2x/es/components/image-viewer/index.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import './image-viewer.less';
+import { showMultiImageViewer, showImageViewer, clearImageViewer } from './methods';
+export type { ImageViewerProps, MultiImageViewerProps, MultiImageViewerRef, } from './image-viewer';
+export type { ImageViewerShowHandler } from './methods';
+declare const _default: import("react").FC<import("./image-viewer").ImageViewerProps> & {
+    Multi: import("react").ForwardRefExoticComponent<Omit<import("./image-viewer").ImageViewerProps, "image" | "renderFooter"> & {
+        images?: string[] | undefined;
+        defaultIndex?: number | undefined;
+        onIndexChange?: ((index: number) => void) | undefined;
+        renderFooter?: ((image: string, index: number) => import("react").ReactNode) | undefined;
+    } & import("react").RefAttributes<import("./slides").SlidesRef>> & {
+        show: typeof showMultiImageViewer;
+    };
+    show: typeof showImageViewer;
+    clear: typeof clearImageViewer;
+};
+export default _default;

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

@@ -0,0 +1,12 @@
+import "./image-viewer.css";
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import { ImageViewer, MultiImageViewer } from './image-viewer';
+import { showMultiImageViewer, showImageViewer, clearImageViewer } from './methods';
+const Multi = attachPropertiesToComponent(MultiImageViewer, {
+  show: showMultiImageViewer
+});
+export default attachPropertiesToComponent(ImageViewer, {
+  Multi,
+  show: showImageViewer,
+  clear: clearImageViewer
+});

package/2x/es/components/image-viewer/methods.d.ts

@@ -0,0 +1,7 @@
+import { ImageViewerProps, MultiImageViewerProps } from './image-viewer';
+export declare type ImageViewerShowHandler = {
+    close: () => void;
+};
+export declare function showImageViewer(props: Omit<ImageViewerProps, 'visible'>): ImageViewerShowHandler;
+export declare function showMultiImageViewer(props: Omit<MultiImageViewerProps, 'visible'>): ImageViewerShowHandler;
+export declare function clearImageViewer(): void;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ImageViewer, MultiImageViewer } from './image-viewer';
+import { renderImperatively } from '../../utils/render-imperatively';
+const handlerSet = new Set();
+export function showImageViewer(props) {
+  clearImageViewer();
+  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);
+    }
+  })));
+  handlerSet.add(handler);
+  return handler;
+}
+export function showMultiImageViewer(props) {
+  clearImageViewer();
+  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);
+    }
+  })));
+  handlerSet.add(handler);
+  return handler;
+}
+export function clearImageViewer() {
+  handlerSet.forEach(handler => {
+    handler.close();
+  });
+  handlerSet.clear();
+}

package/2x/es/components/image-viewer/slide.d.ts

@@ -0,0 +1,10 @@
+import { FC, MutableRefObject } from 'react';
+declare type Props = {
+    image: string;
+    maxZoom: number;
+    onTap: () => void;
+    onZoomChange?: (zoom: number) => void;
+    dragLockRef?: MutableRefObject<boolean>;
+};
+export declare const Slide: FC<Props>;
+export {};