antd-mobile 5.19.0 → 5.22.0

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

@@ -1,14 +1,9 @@
-import { __awaiter } from "tslib";
 import React from 'react';
-import { fireEvent, render, testA11y } from 'testing';
+import { fireEvent, render, act } from 'testing';
 import Image from '../index';
+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('a11y', () => __awaiter(void 0, void 0, void 0, function* () {
-    yield testA11y(React.createElement(Image, {
-      src: demoSrc
-    }));
-  }));
+describe('Image', () => {
   test('onContainerClick can work', () => {
     const onContainerClick = jest.fn();
     const {
@@ -21,4 +16,55 @@ describe('image', () => {
     fireEvent.click(getByTestId('img'));
     expect(onContainerClick).toBeCalledTimes(1);
   });
+  test('load successfully', () => {
+    render(React.createElement(Image, {
+      src: demoSrc
+    }));
+    const img = document.querySelectorAll(`.${classPrefix}-img`)[0];
+    fireEvent.load(img);
+    expect(img).toHaveAttribute('src', demoSrc);
+  });
+  test('load failed', () => {
+    render(React.createElement(Image, {
+      src: '404'
+    }));
+    const img = document.querySelectorAll(`.${classPrefix}-img`)[0];
+    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;
+    render(React.createElement(Image, {
+      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];
+    act(() => {
+      onChange([{
+        isIntersecting: true
+      }]);
+    });
+    expect(img).toHaveAttribute('src', demoSrc);
+  });
+  test('renders with width and height', () => {
+    const {
+      getByTestId
+    } = render(React.createElement(Image, {
+      src: demoSrc,
+      width: 100,
+      height: 100,
+      "data-testid": 'image'
+    }));
+    expect(getByTestId('image')).toHaveStyle('--width: 100px;--height: 100px');
+  });
 });

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

@@ -19,7 +19,8 @@ export const ImageViewer = p => {
     visible: props.visible,
     disableBodyScroll: false,
     opacity: 'thick',
-    afterClose: props.afterClose
+    afterClose: props.afterClose,
+    destroyOnClose: true
   }, React.createElement("div", {
     className: `${classPrefix}-content`
   }, props.image && React.createElement(Slide, {
@@ -64,7 +65,8 @@ export const MultiImageViewer = forwardRef((p, ref) => {
     visible: props.visible,
     disableBodyScroll: false,
     opacity: 'thick',
-    afterClose: props.afterClose
+    afterClose: props.afterClose,
+    destroyOnClose: true
   }, React.createElement("div", {
     className: `${classPrefix}-content`
   }, props.images && React.createElement(Slides, {

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

@@ -45,7 +45,7 @@
 .adm-index-bar-sidebar-bubble {
   position: absolute;
   top: 50%;
-  right: 84px;
+  right: 120px;
   width: 94px;
   height: 94px;
   color: var(--adm-color-white);

package/2x/es/components/page-indicator/page-indicator.css

@@ -1,7 +1,7 @@
 .adm-page-indicator {
   display: flex;
   width: auto;
-  --dot-color: rgba(0, 0, 0, 0.2);
+  --dot-color: #dddddd;
   --active-dot-color: var(--adm-color-primary);
   --dot-size: 6px;
   --active-dot-size: 26px;

package/2x/es/components/picker-view/wheel.js

@@ -186,6 +186,8 @@ export const Wheel = memo(props => {
   if (prev.index !== next.index) return false;
   if (prev.value !== next.value) return false;
   if (prev.onSelect !== next.onSelect) return false;
+  if (prev.renderLabel !== next.renderLabel) return false;
+  if (prev.mouseWheel !== next.mouseWheel) return false;
 
   if (!isEqual(prev.column, next.column)) {
     return false;

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

@@ -3,6 +3,9 @@
   --active-color: #ffd21e;
   --inactive-color: var(--adm-color-border);
   display: inline-flex;
+  touch-action: pan-y;
+  -webkit-user-select: none;
+  user-select: none;
 }
 
 .adm-rate-box {
@@ -18,6 +21,7 @@
   overflow: hidden;
   cursor: pointer;
   box-sizing: border-box;
+  transition: all 0.3s;
 }
 
 .adm-rate-star-half {

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

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import classNames from 'classnames';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { Star } from './star';
+import { useDrag } from '@use-gesture/react';
+import { bound } from '../../utils/bound';
 const classPrefix = `adm-rate`;
 const defaultProps = {
   count: 5,
@@ -16,6 +18,7 @@ const defaultProps = {
 export const Rate = p => {
   const props = mergeProps(defaultProps, p);
   const [value, setValue] = usePropsValue(props);
+  const containerRef = useRef(null);
   const starList = Array(props.count).fill(null);
 
   function renderStar(v, half) {
@@ -25,26 +28,46 @@ export const Rate = p => {
         [`${classPrefix}-star-half`]: half,
         [`${classPrefix}-star-readonly`]: props.readOnly
       }),
-      onClick: () => {
-        if (props.readOnly) return;
-
-        if (props.allowClear && value === v) {
-          setValue(0);
-        } else {
-          setValue(v);
-        }
-      },
       role: 'radio',
       "aria-checked": value >= v,
       "aria-label": '' + v
     }, props.character);
   }
 
-  return withNativeProps(props, React.createElement("div", {
+  const bind = useDrag(state => {
+    if (props.readOnly) return;
+    const {
+      xy: [clientX],
+      tap
+    } = state;
+    const container = containerRef.current;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    const rawValue = (clientX - rect.left) / rect.width * props.count;
+    const ceiledValue = props.allowHalf ? Math.ceil(rawValue * 2) / 2 : Math.ceil(rawValue);
+    const boundValue = bound(ceiledValue, 0, props.count);
+
+    if (tap) {
+      if (props.allowClear && boundValue === value) {
+        setValue(0);
+        return;
+      }
+    }
+
+    setValue(boundValue);
+  }, {
+    axis: 'x',
+    pointer: {
+      touch: true
+    },
+    filterTaps: true
+  });
+  return withNativeProps(props, React.createElement("div", Object.assign({
     className: classPrefix,
     role: 'radiogroup',
-    "aria-readonly": props.readOnly
-  }, starList.map((_, i) => React.createElement("div", {
+    "aria-readonly": props.readOnly,
+    ref: containerRef
+  }, bind()), starList.map((_, i) => React.createElement("div", {
     key: i,
     className: classNames(`${classPrefix}-box`)
   }, props.allowHalf && renderStar(i + 0.5, true), renderStar(i + 1, false)))));

package/2x/es/components/result-page/index.d.ts

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

package/2x/es/components/result-page/index.js

@@ -0,0 +1,7 @@
+import "./result-page.css";
+import { ResultPage } from './result-page';
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import { ResultPageCard } from './result-page-card';
+export default attachPropertiesToComponent(ResultPage, {
+  Card: ResultPageCard
+});

package/2x/es/components/result-page/result-page-card.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type ResultPageCardProps = {
+    children?: ReactNode;
+} & NativeProps;
+export declare const ResultPageCard: FC<ResultPageCardProps>;

package/2x/es/components/result-page/result-page-card.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import classNames from 'classnames';
+const classPrefix = `adm-result-page-card`;
+export const ResultPageCard = props => {
+  return withNativeProps(props, React.createElement('div', {
+    className: classNames(`${classPrefix}`)
+  }, props.children));
+};

package/2x/es/components/result-page/result-page.css

@@ -0,0 +1,130 @@
+.adm-result-page {
+  --background-color: var(--adm-color-primary);
+  position: relative;
+  background-color: var(--adm-color-box);
+  min-height: 100vh;
+  width: 100%;
+}
+
+.adm-result-page-header {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  background-color: transparent;
+  position: relative;
+  padding: 40px;
+  padding-bottom: 200px;
+  z-index: 1;
+  overflow: hidden;
+}
+
+.adm-result-page-icon {
+  color: var(--adm-color-background);
+  box-sizing: border-box;
+  padding: 4px;
+  margin-bottom: 16px;
+}
+
+.adm-result-page-icon .antd-mobile-icon {
+  font-size: 64px;
+}
+
+.adm-result-page-title {
+  font-size: var(--adm-font-size-10);
+  color: var(--adm-color-background);
+  line-height: 1.4;
+  text-align: center;
+}
+
+.adm-result-page-description {
+  margin-top: 16px;
+  margin-bottom: 48px;
+  font-size: var(--adm-font-size-6);
+  color: rgba(255, 255, 255, 0.6);
+  line-height: 1.4;
+  text-align: center;
+}
+
+.adm-result-page-details {
+  width: 100%;
+}
+
+.adm-result-page-detail {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  color: var(--adm-color-background);
+  font-size: var(--adm-font-size-6);
+}
+
+.adm-result-page-detail-bold {
+  font-weight: 600;
+}
+
+.adm-result-page-collapse {
+  opacity: 0.6;
+  width: 20px;
+  height: 20px;
+  margin: auto;
+  margin-bottom: 10px;
+  border-top: 4px solid var(--adm-color-background);
+  border-right: 4px solid var(--adm-color-background);
+  transform: rotate(135deg);
+}
+
+.adm-result-page-collapse-active {
+  transform: rotate(-45deg);
+}
+
+.adm-result-page-bgWrapper {
+  position: relative;
+  align-self: flex-start;
+  top: 108px;
+}
+
+.adm-result-page-bg {
+  --width: 440vw;
+  position: absolute;
+  height: var(--width);
+  width: var(--width);
+  left: calc((var(--width) - 100vw) * -1 / 2 - 40px);
+  top: calc(var(--width) * -1 + 1vw);
+  border-radius: 50%;
+  background-color: var(--background-color);
+  z-index: -1;
+}
+
+.adm-result-page-content {
+  position: relative;
+  padding: 24px;
+  top: -208px;
+  z-index: 2;
+}
+
+.adm-result-page-footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  padding: 24px;
+  padding-bottom: 48px;
+  display: flex;
+  justify-content: center;
+  background-color: var(--adm-color-box);
+  z-index: 3;
+}
+
+.adm-result-page-footer-btn {
+  flex: 1;
+  max-width: calc((100vw - 72px) / 2);
+}
+
+.adm-result-page-footer-space {
+  width: 24px;
+}
+
+.adm-result-page-card {
+  border-radius: 16px;
+  background-color: var(--adm-color-background);
+}

package/2x/es/components/result-page/result-page.d.ts

@@ -0,0 +1,23 @@
+import React, { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+interface ResultPageDetail {
+    label: ReactNode;
+    value: ReactNode;
+    bold?: boolean;
+}
+declare type ResultPageDetails = ResultPageDetail[];
+declare type OnClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void> | unknown;
+export declare type ResultPageProps = {
+    status?: 'success' | 'error' | 'info' | 'waiting' | 'warning';
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    details?: ResultPageDetails;
+    children?: ReactNode;
+    primaryButtonText?: ReactNode;
+    secondaryButtonText?: ReactNode;
+    onPrimaryButtonClick?: OnClick;
+    onSecondaryButtonClick?: OnClick;
+} & NativeProps<'--background-color'>;
+export declare const ResultPage: FC<ResultPageProps>;
+export {};

package/2x/es/components/result-page/result-page.js

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { CheckCircleFill, CloseCircleFill, InformationCircleFill, ClockCircleFill, ExclamationCircleFill } from 'antd-mobile-icons';
+import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+import { isNodeWithContent } from '../../utils/is-node-with-content';
+import Button from '../button';
+const classPrefix = `adm-result-page`;
+const iconRecord = {
+  success: CheckCircleFill,
+  error: CloseCircleFill,
+  info: InformationCircleFill,
+  waiting: ClockCircleFill,
+  warning: ExclamationCircleFill
+};
+const defaultProps = {
+  status: 'info',
+  details: []
+};
+export const ResultPage = p => {
+  const props = mergeProps(defaultProps, p);
+  const {
+    status,
+    title,
+    description,
+    details,
+    icon,
+    primaryButtonText,
+    secondaryButtonText,
+    onPrimaryButtonClick,
+    onSecondaryButtonClick
+  } = props;
+  const resultIcon = icon || React.createElement(iconRecord[status]);
+  const [collapse, setCollapse] = useState(true);
+  const showSecondaryButton = isNodeWithContent(secondaryButtonText);
+  const showPrimaryButton = isNodeWithContent(primaryButtonText);
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix
+  }, React.createElement("div", {
+    className: `${classPrefix}-header`
+  }, React.createElement("div", {
+    className: `${classPrefix}-icon`
+  }, resultIcon), React.createElement("div", {
+    className: `${classPrefix}-title`
+  }, title), isNodeWithContent(description) ? React.createElement("div", {
+    className: `${classPrefix}-description`
+  }, description) : null, details.length ? React.createElement("div", {
+    className: `${classPrefix}-details`
+  }, (collapse ? details.slice(0, 3) : details).map((detail, index) => {
+    return React.createElement("div", {
+      className: classNames(`${classPrefix}-detail`, detail.bold && `${classPrefix}-detail-bold`),
+      key: index
+    }, React.createElement("span", null, detail.label), React.createElement("span", null, detail.value));
+  }), details.length > 3 && React.createElement("div", {
+    onClick: () => setCollapse(prev => !prev)
+  }, React.createElement("div", {
+    className: classNames(`${classPrefix}-collapse`, !collapse && `${classPrefix}-collapse-active`)
+  }))) : null, React.createElement("div", {
+    className: `${classPrefix}-bgWrapper`
+  }, React.createElement("div", {
+    className: `${classPrefix}-bg`
+  }))), React.createElement("div", {
+    className: `${classPrefix}-content`
+  }, props.children), React.createElement("div", {
+    className: `${classPrefix}-footer`
+  }, showSecondaryButton && React.createElement(Button, {
+    block: true,
+    color: 'default',
+    fill: 'solid',
+    size: 'large',
+    onClick: onSecondaryButtonClick,
+    className: `${classPrefix}-footer-btn`
+  }, secondaryButtonText), showPrimaryButton && showSecondaryButton && React.createElement("div", {
+    className: `${classPrefix}-footer-space`
+  }), showPrimaryButton && React.createElement(Button, {
+    block: true,
+    color: 'primary',
+    fill: 'solid',
+    size: 'large',
+    onClick: onPrimaryButtonClick,
+    className: `${classPrefix}-footer-btn`
+  }, primaryButtonText))));
+};

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

@@ -7,6 +7,10 @@
   --checked-border: none;
   --border-radius: 4px;
   --padding: 16px 32px;
+  --gap: 16px;
+  ---gap: var(--gap);
+  ---gap-horizontal: var(--gap-horizontal, var(--gap));
+  ---gap-vertical: var(--gap-vertical, var(--gap));
   overflow: hidden;
   font-size: var(--adm-font-size-7);
   line-height: 1.4;
@@ -16,6 +20,12 @@
   --gap: 24px;
 }
 
+.adm-selector .adm-grid {
+  --gap: var(---gap);
+  --gap-horizontal: var(---gap-horizontal);
+  --gap-vertical: var(---gap-vertical);
+}
+
 .adm-selector-item {
   padding: var(--padding);
   position: relative;

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

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
+import { GridProps } from '../grid';
 declare type SelectorValue = string | number;
 export interface SelectorOption<V> {
     label: ReactNode;
@@ -9,7 +10,7 @@ export interface SelectorOption<V> {
 }
 export declare type SelectorProps<V> = {
     options: SelectorOption<V>[];
-    columns?: number;
+    columns?: GridProps['columns'];
     multiple?: boolean;
     disabled?: boolean;
     defaultValue?: V[];
@@ -18,6 +19,6 @@ export declare type SelectorProps<V> = {
         items: SelectorOption<V>[];
     }) => void;
     showCheckMark?: boolean;
-} & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding'>;
+} & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding' | '--gap' | '--gap-vertical' | '--gap-horizontal'>;
 export declare const Selector: <V extends SelectorValue>(p: SelectorProps<V>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export {};

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

@@ -4,7 +4,6 @@ import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import Space from '../space';
 import Grid from '../grid';
-import { convertPx } from '../../utils/convert-px';
 import { usePropsValue } from '../../utils/use-props-value';
 import { CheckMark } from './check-mark';
 const classPrefix = `adm-selector`;
@@ -65,7 +64,6 @@ export const Selector = p => {
   }, !props.columns && React.createElement(Space, {
     wrap: true
   }, items), props.columns && React.createElement(Grid, {
-    columns: props.columns,
-    gap: convertPx(8)
+    columns: props.columns
   }, items)));
 };

package/2x/es/components/swipe-action/swipe-action.d.ts

@@ -20,6 +20,7 @@ export declare type SwipeActionProps = {
     closeOnAction?: boolean;
     children: ReactNode;
     stopPropagation?: PropagationEvent[];
+    onActionsReveal?: (side: 'left' | 'right') => void;
 } & NativeProps<'--background'>;
 export declare const SwipeAction: React.ForwardRefExoticComponent<{
     rightActions?: Action[] | undefined;
@@ -29,6 +30,7 @@ export declare const SwipeAction: React.ForwardRefExoticComponent<{
     closeOnAction?: boolean | undefined;
     children: ReactNode;
     stopPropagation?: "click"[] | undefined;
+    onActionsReveal?: ((side: 'left' | 'right') => void) | undefined;
 } & {
     className?: string | undefined;
     style?: (React.CSSProperties & Partial<Record<"--background", string>>) | undefined;

package/2x/es/components/swipe-action/swipe-action.js

@@ -44,8 +44,26 @@ export const SwipeAction = forwardRef((p, ref) => {
     }
   }), []);
   const draggingRef = useRef(false);
+  const dragCancelRef = useRef(null);
+
+  function forceCancelDrag() {
+    var _a;
+
+    (_a = dragCancelRef.current) === null || _a === void 0 ? void 0 : _a.call(dragCancelRef);
+    draggingRef.current = false;
+  }
+
   const bind = useDrag(state => {
-    draggingRef.current = true;
+    var _a;
+
+    dragCancelRef.current = state.cancel;
+    if (!state.intentional) return;
+
+    if (state.down) {
+      draggingRef.current = true;
+    }
+
+    if (!draggingRef.current) return;
     const [offsetX] = state.offset;
 
     if (state.last) {
@@ -61,9 +79,15 @@ export const SwipeAction = forwardRef((p, ref) => {
         position = 0;
       }
 
+      const targetX = nearest([-rightWidth, 0, leftWidth], position);
       api.start({
-        x: nearest([-rightWidth, 0, leftWidth], position)
+        x: targetX
       });
+
+      if (targetX !== 0) {
+        (_a = p.onActionsReveal) === null || _a === void 0 ? void 0 : _a.call(p, targetX > 0 ? 'left' : 'right');
+      }
+
       window.setTimeout(() => {
         draggingRef.current = false;
       });
@@ -88,17 +112,21 @@ export const SwipeAction = forwardRef((p, ref) => {
     preventScroll: true,
     pointer: {
       touch: true
-    }
+    },
+    triggerAllEvents: true
   });
 
   function close() {
     api.start({
       x: 0
     });
+    forceCancelDrag();
   }
 
   useImperativeHandle(ref, () => ({
     show: (side = 'right') => {
+      var _a;
+
       if (side === 'right') {
         api.start({
           x: -getRightWidth()
@@ -108,6 +136,8 @@ export const SwipeAction = forwardRef((p, ref) => {
           x: getLeftWidth()
         });
       }
+
+      (_a = p.onActionsReveal) === null || _a === void 0 ? void 0 : _a.call(p, side);
     },
     close
   }));
@@ -179,9 +209,7 @@ export const SwipeAction = forwardRef((p, ref) => {
       if (x.goal !== 0) {
         e.preventDefault();
         e.stopPropagation();
-        api.start({
-          x: 0
-        });
+        close();
       }
     }
   }, React.createElement(animated.div, {