antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.bc248f5c7

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

@@ -7,12 +7,16 @@ export type { FormItemProps } from './form-item';
 export type { FormSubscribeProps } from './form-subscribe';
 export type { ValidateMessages, FieldData, NamePath, } from 'rc-field-form/es/interface';
 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"> & import("../../utils/native-props").NativeProps<"--border-inner" | "--border-top" | "--border-bottom"> & Partial<import("./context").FormContextType> & {
+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;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & Partial<import("./context").FormContextType> & {
     footer?: import("react").ReactNode;
     mode?: "default" | "card" | undefined;
 } & import("react").RefAttributes<import("./form").FormInstance>> & {
     Item: import("react").FC<import("./form-item").FormItemProps>;
-    Subscribe: import("react").VFC<import("./form-subscribe").FormSubscribeProps>;
+    Subscribe: import("react").FC<import("./form-subscribe").FormSubscribeProps>;
     Header: import("react").FC<{
         children?: import("react").ReactNode;
     }>;

package/2x/cjs/components/grid/grid.css

@@ -4,6 +4,7 @@
   --gap-vertical: var(--gap);
   display: grid;
   grid-gap: 20px;
+  -webkit-column-gap: var(--gap-horizontal);
   column-gap: var(--gap-horizontal);
   row-gap: var(--gap-vertical);
   grid-template-columns: repeat(var(--columns), minmax(0, 1fr));

package/2x/cjs/components/image/broken-image-icon.d.ts

@@ -0,0 +1 @@
+export declare const BrokenImageIcon: () => JSX.Element;

package/2x/cjs/components/image/broken-image-icon.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BrokenImageIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const BrokenImageIcon = () => _react.default.createElement("svg", {
+  viewBox: '0 0 48 48',
+  xmlns: 'http://www.w3.org/2000/svg'
+}, _react.default.createElement("path", {
+  d: 'M19.233 6.233 17.42 9.08l-10.817.001a.665.665 0 0 0-.647.562l-.007.096V34.9l5.989-8.707a2.373 2.373 0 0 1 1.801-1.005 2.415 2.415 0 0 1 1.807.625l.126.127 4.182 4.525 2.267-3.292 5.461 7.841-4.065 7.375H6.604c-1.86 0-3.382-1.47-3.482-3.317l-.005-.192V9.744c0-1.872 1.461-3.405 3.296-3.505l.19-.005h12.63Zm22.163 0c1.86 0 3.382 1.472 3.482 3.314l.005.192v29.14a3.507 3.507 0 0 1-3.3 3.505l-.191.006H27.789l3.63-6.587.06-.119a1.87 1.87 0 0 0-.163-1.853l-6.928-9.949 3.047-4.422a2.374 2.374 0 0 1 1.96-1.01 2.4 2.4 0 0 1 1.86.87l.106.14L42.05 34.89V9.74a.664.664 0 0 0-.654-.658H21.855l1.812-2.848h17.73Zm-28.305 5.611c.794 0 1.52.298 2.07.788l-.843 1.325-.067.114a1.87 1.87 0 0 0 .11 1.959l.848 1.217c-.556.515-1.3.83-2.118.83a3.122 3.122 0 0 1-3.117-3.116 3.119 3.119 0 0 1 3.117-3.117Z',
+  fill: '#DBDBDB',
+  fillRule: 'nonzero'
+}));
+
+exports.BrokenImageIcon = BrokenImageIcon;

package/2x/cjs/components/image/image-icon.d.ts

@@ -0,0 +1 @@
+export declare const ImageIcon: () => JSX.Element;

package/2x/cjs/components/image/image-icon.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ImageIcon = () => _react.default.createElement("svg", {
+  viewBox: '0 0 48 48',
+  xmlns: 'http://www.w3.org/2000/svg'
+}, _react.default.createElement("path", {
+  d: 'M41.396 6.234c1.923 0 3.487 1.574 3.487 3.505v29.14c0 1.937-1.568 3.51-3.491 3.51H6.604c-1.923 0-3.487-1.573-3.487-3.51V9.745c0-1.936 1.564-3.51 3.487-3.51Zm0 2.847H6.604c-.355 0-.654.3-.654.658V34.9l5.989-8.707a2.373 2.373 0 0 1 1.801-1.005 2.405 2.405 0 0 1 1.933.752l4.182 4.525 7.58-11.005a2.374 2.374 0 0 1 1.96-1.01c.79 0 1.532.38 1.966 1.01L42.05 34.89V9.74a.664.664 0 0 0-.654-.658Zm-28.305 2.763a3.119 3.119 0 0 1 3.117 3.117 3.119 3.119 0 0 1-3.117 3.117 3.122 3.122 0 0 1-3.117-3.117 3.119 3.119 0 0 1 3.117-3.117Z',
+  fill: '#DBDBDB',
+  fillRule: 'nonzero'
+}));
+
+exports.ImageIcon = ImageIcon;

package/2x/cjs/components/image/image.css

@@ -14,13 +14,15 @@
 
 .adm-image-tip {
   position: relative;
-  background-color: #f3f3f3;
+  background-color: var(--adm-color-box);
   height: 100%;
   min-height: 48px;
   min-width: 48px;
 }
 
-.adm-image-tip > .antd-mobile-icon {
+.adm-image-tip > svg {
+  width: 48px;
+  height: 48px;
   position: absolute;
   left: 50%;
   top: 50%;

package/2x/cjs/components/image/image.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ImageProps = {
-    src: string;
+    src?: string;
     alt?: string;
     width?: number | string;
     height?: number | string;
@@ -9,8 +9,10 @@ export declare type ImageProps = {
     placeholder?: ReactNode;
     fallback?: ReactNode;
     lazy?: boolean;
+    draggable?: boolean;
     onClick?: (event: React.MouseEvent<HTMLImageElement, Event>) => void;
     onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
     onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    onContainerClick?: (event: React.MouseEvent<HTMLDivElement, Event>) => void;
 } & NativeProps<'--width' | '--height'> & Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin' | 'decoding' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet' | 'useMap'>;
 export declare const Image: React.FC<ImageProps>;

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

@@ -11,8 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _nativeProps = require("../../utils/native-props");
 
-var _antdMobileIcons = require("antd-mobile-icons");
-
 var _stagedComponents = require("staged-components");
 
 var _toCssLength = require("../../utils/to-css-length");
@@ -21,6 +19,10 @@ var _lazyDetector = require("./lazy-detector");
 
 var _useIsomorphicUpdateLayoutEffect = require("../../utils/use-isomorphic-update-layout-effect");
 
+var _imageIcon = require("./image-icon");
+
+var _brokenImageIcon = require("./broken-image-icon");
+
 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; }
@@ -30,11 +32,12 @@ const defaultProps = {
   fit: 'fill',
   placeholder: _react.default.createElement("div", {
     className: `${classPrefix}-tip`
-  }, _react.default.createElement(_antdMobileIcons.PictureOutline, null)),
+  }, _react.default.createElement(_imageIcon.ImageIcon, null)),
   fallback: _react.default.createElement("div", {
     className: `${classPrefix}-tip`
-  }, _react.default.createElement(_antdMobileIcons.PictureWrongOutline, null)),
-  lazy: false
+  }, _react.default.createElement(_brokenImageIcon.BrokenImageIcon, null)),
+  lazy: false,
+  draggable: false
 };
 const Image = (0, _stagedComponents.staged)(p => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
@@ -83,7 +86,8 @@ const Image = (0, _stagedComponents.staged)(p => {
       referrerPolicy: props.referrerPolicy,
       sizes: props.sizes,
       srcSet: srcSet,
-      useMap: props.useMap
+      useMap: props.useMap,
+      draggable: props.draggable
     });
 
     return _react.default.createElement(_react.default.Fragment, null, !loaded && props.placeholder, img);
@@ -93,16 +97,19 @@ const Image = (0, _stagedComponents.staged)(p => {
 
   if (props.width) {
     style['--width'] = (0, _toCssLength.toCSSLength)(props.width);
+    style['width'] = (0, _toCssLength.toCSSLength)(props.width);
   }
 
   if (props.height) {
     style['--height'] = (0, _toCssLength.toCSSLength)(props.height);
+    style['height'] = (0, _toCssLength.toCSSLength)(props.height);
   }
 
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     ref: ref,
     className: classPrefix,
-    style: style
+    style: style,
+    onClick: props.onContainerClick
   }, props.lazy && !initialized && _react.default.createElement(_lazyDetector.LazyDetector, {
     onActive: () => {
       setInitialized(true);

package/2x/cjs/components/image/image.patch.css

@@ -0,0 +1,12 @@
+.adm-image {
+  width: auto;
+  height: auto;
+}
+
+.adm-image-tip {
+  background-color: #f5f5f5;
+}
+
+.adm-image-tip > svg {
+  color: #999999;
+}

package/2x/cjs/components/image/test/image.test.d.ts

@@ -0,0 +1 @@
+export {};

package/2x/cjs/components/image/test/image.test.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _testing = require("testing");
+
+var _index = _interopRequireDefault(require("../index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const classPrefix = `adm-image`;
+const demoSrc = 'https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60';
+describe('Image', () => {
+  test('onContainerClick can work', () => {
+    const onContainerClick = jest.fn();
+    const {
+      getByTestId
+    } = (0, _testing.render)(_react.default.createElement(_index.default, {
+      src: demoSrc,
+      onContainerClick: onContainerClick,
+      "data-testid": 'img'
+    }));
+
+    _testing.fireEvent.click(getByTestId('img'));
+
+    expect(onContainerClick).toBeCalledTimes(1);
+  });
+  test('load successfully', () => {
+    (0, _testing.render)(_react.default.createElement(_index.default, {
+      src: demoSrc
+    }));
+    const img = document.querySelectorAll(`.${classPrefix}-img`)[0];
+
+    _testing.fireEvent.load(img);
+
+    expect(img).toHaveAttribute('src', demoSrc);
+  });
+  test('load failed', () => {
+    (0, _testing.render)(_react.default.createElement(_index.default, {
+      src: '404'
+    }));
+    const img = document.querySelectorAll(`.${classPrefix}-img`)[0];
+
+    _testing.fireEvent.error(img);
+
+    expect(img).not.toBeInTheDocument();
+    expect(document.querySelectorAll(`.${classPrefix}-tip`)[0]).toBeInTheDocument();
+  });
+  test('lazy load should be work', () => {
+    // mock useInViewport
+    // https://github.com/alibaba/hooks/blob/master/packages/hooks/src/useInViewport/__tests__/index.test.ts
+    const mockIntersectionObserver = jest.fn().mockReturnValue({
+      observe: () => null,
+      disconnect: () => null
+    });
+    window.IntersectionObserver = mockIntersectionObserver;
+    (0, _testing.render)(_react.default.createElement(_index.default, {
+      src: demoSrc,
+      lazy: true
+    }));
+    const img = document.querySelectorAll(`.${classPrefix}-img`)[0];
+    expect(img).not.toHaveAttribute('src');
+    const calls = mockIntersectionObserver.mock.calls;
+    const [onChange] = calls[calls.length - 1];
+    (0, _testing.act)(() => {
+      onChange([{
+        isIntersecting: true
+      }]);
+    });
+    expect(img).toHaveAttribute('src', demoSrc);
+  });
+  test('renders with width and height', () => {
+    const {
+      getByTestId
+    } = (0, _testing.render)(_react.default.createElement(_index.default, {
+      src: demoSrc,
+      width: 100,
+      height: 100,
+      "data-testid": 'image'
+    }));
+    expect(getByTestId('image')).toHaveStyle('--width: 100px;--height: 100px');
+  });
+});

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

@@ -28,7 +28,7 @@
   background-color: rgba(0, 0, 0, 0.7);
   border-radius: 0 0 0 24px;
   font-size: 16px;
-  color: #fff;
+  color: var(--adm-color-white);
   cursor: pointer;
 }
 
@@ -44,7 +44,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  color: #fff;
+  color: var(--adm-color-white);
   background-color: rgba(50, 50, 51, 0.88);
 }
 
@@ -61,7 +61,7 @@
 .adm-image-uploader-cell-mask-message {
   display: inline-block;
   padding: 12px 8px;
-  font-size: 24px;
+  font-size: var(--adm-font-size-4);
 }
 
 .adm-image-uploader-cell-image {
@@ -74,7 +74,7 @@
 }
 
 .adm-image-uploader-upload-button-wrap .adm-image-uploader-upload-button {
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
   text-align: center;
   line-height: var(--cell-size);
   display: block;

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

@@ -53,9 +53,6 @@ const ImageUploader = p => {
   } = (0, _configProvider.useConfig)();
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const [value, setValue] = (0, _usePropsValue.usePropsValue)(props);
-  const updateValue = (0, _ahooks.useMemoizedFn)(updater => {
-    setValue(updater(value));
-  });
   const [tasks, setTasks] = (0, _react.useState)([]);
   (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     setTasks(prev => prev.filter(task => {
@@ -134,7 +131,7 @@ const ImageUploader = p => {
               return task;
             });
           });
-          updateValue(prev => {
+          setValue(prev => {
             const newVal = Object.assign({}, result);
             return [...prev, newVal];
           });

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

@@ -1,15 +1,23 @@
 .adm-image-viewer-content {
   width: 100vw;
   height: 100vh;
-  max-height: -webkit-fill-available;
   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;
 }
@@ -37,6 +45,7 @@
   top: 0;
   width: 100%;
   height: 100%;
+  cursor: -webkit-grab;
   cursor: grab;
   touch-action: none;
 }
@@ -62,5 +71,5 @@
   top: 24px;
   transform: translateX(-50%);
   color: #e6e6e6;
-  font-size: 28px;
+  font-size: var(--adm-font-size-6);
 }

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

@@ -8,16 +8,19 @@ export declare type ImageViewerProps = {
     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'> & {
+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"> & {
+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/cjs/components/image-viewer/image-viewer.js

@@ -13,6 +13,8 @@ var _renderToContainer = require("../../utils/render-to-container");
 
 var _mask = _interopRequireDefault(require("../mask"));
 
+var _safeArea = _interopRequireDefault(require("../safe-area"));
+
 var _slide = require("./slide");
 
 var _slides = require("./slides");
@@ -31,6 +33,8 @@ const defaultProps = {
 };
 
 const ImageViewer = p => {
+  var _a;
+
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
 
   const node = _react.default.createElement(_mask.default, {
@@ -48,6 +52,10 @@ const ImageViewer = p => {
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
     },
     maxZoom: props.maxZoom
+  })), props.image && _react.default.createElement("div", {
+    className: `${classPrefix}-footer`
+  }, (_a = props.renderFooter) === null || _a === void 0 ? void 0 : _a.call(props, props.image), _react.default.createElement(_safeArea.default, {
+    position: 'bottom'
   })));
 
   return (0, _renderToContainer.renderToContainer)(props.getContainer, node);
@@ -58,17 +66,25 @@ const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
   defaultIndex: 0
 });
 const MultiImageViewer = (0, _react.forwardRef)((p, ref) => {
+  var _a;
+
   const props = (0, _withDefaultProps.mergeProps)(multiDefaultProps, p);
-  const [defaultIndex, setDefaultIndex] = (0, _react.useState)(props.defaultIndex);
+  const [index, setIndex] = (0, _react.useState)(props.defaultIndex);
   const slidesRef = (0, _react.useRef)(null);
   (0, _react.useImperativeHandle)(ref, () => ({
     swipeTo: (index, immediate) => {
       var _a;
 
-      setDefaultIndex(index);
+      setIndex(index);
       (_a = slidesRef.current) === null || _a === void 0 ? void 0 : _a.swipeTo(index, immediate);
     }
   }));
+  const onSlideChange = (0, _react.useCallback)(index => {
+    var _a;
+
+    setIndex(index);
+    (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, index);
+  }, [props.onIndexChange]);
 
   const node = _react.default.createElement(_mask.default, {
     visible: props.visible,
@@ -79,8 +95,8 @@ const MultiImageViewer = (0, _react.forwardRef)((p, ref) => {
     className: `${classPrefix}-content`
   }, props.images && _react.default.createElement(_slides.Slides, {
     ref: slidesRef,
-    defaultIndex: defaultIndex,
-    onIndexChange: props.onIndexChange,
+    defaultIndex: index,
+    onIndexChange: onSlideChange,
     images: props.images,
     onTap: () => {
       var _a;
@@ -88,6 +104,10 @@ const MultiImageViewer = (0, _react.forwardRef)((p, ref) => {
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
     },
     maxZoom: props.maxZoom
+  })), props.images && _react.default.createElement("div", {
+    className: `${classPrefix}-footer`
+  }, (_a = props.renderFooter) === null || _a === void 0 ? void 0 : _a.call(props, props.images[index], index), _react.default.createElement(_safeArea.default, {
+    position: 'bottom'
   })));
 
   return (0, _renderToContainer.renderToContainer)(props.getContainer, node);

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

@@ -4,10 +4,11 @@ import { showMultiImageViewer, showImageViewer, clearImageViewer } from './metho
 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"> & {
+    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;
     };