antd-mobile 5.16.1 → 5.17.0

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

@@ -1,210 +0,0 @@
-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/es/components/image-uploader/index.d.ts

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

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

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

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

@@ -1,14 +0,0 @@
-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/es/components/image-uploader/preview-item.js

@@ -1,63 +0,0 @@
-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/es/components/image-viewer/image-viewer.css

@@ -1,63 +0,0 @@
-.adm-image-viewer-content {
-  width: 100vw;
-  height: 100vh;
-  touch-action: 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: grab;
-  touch-action: none;
-}
-.adm-image-viewer-slides-inner {
-  height: 100%;
-  white-space: nowrap;
-}
-.adm-image-viewer-slides-inner > * {
-  margin-right: 16px;
-}
-.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: 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: 12px;
-  transform: translateX(-50%);
-  color: #e6e6e6;
-  font-size: var(--adm-font-size-6);
-}

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

@@ -1,26 +0,0 @@
-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/es/components/image-viewer/image-viewer.js

@@ -1,87 +0,0 @@
-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/es/components/image-viewer/index.d.ts

@@ -1,18 +0,0 @@
-/// <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/es/components/image-viewer/index.js

@@ -1,12 +0,0 @@
-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/es/components/image-viewer/methods.d.ts

@@ -1,7 +0,0 @@
-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/es/components/image-viewer/methods.js

@@ -1,36 +0,0 @@
-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/es/components/image-viewer/slide.d.ts

@@ -1,10 +0,0 @@
-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 {};