antd-mobile 5.19.0 → 5.22.0

package/cjs/index.js

@@ -339,6 +339,12 @@ Object.defineProperty(exports, "Result", {
     return _result.default;
   }
 });
+Object.defineProperty(exports, "ResultPage", {
+  enumerable: true,
+  get: function () {
+    return _resultPage.default;
+  }
+});
 Object.defineProperty(exports, "SafeArea", {
   enumerable: true,
   get: function () {
@@ -610,6 +616,8 @@ var _rate = _interopRequireDefault(require("./components/rate"));
 
 var _result = _interopRequireDefault(require("./components/result"));
 
+var _resultPage = _interopRequireDefault(require("./components/result-page"));
+
 var _safeArea = _interopRequireDefault(require("./components/safe-area"));
 
 var _scrollMask = _interopRequireDefault(require("./components/scroll-mask"));

package/cjs/locales/id-ID.js

@@ -115,6 +115,19 @@ const idID = (0, _mergeLocale.mergeLocale)(_base.base, {
     pulling: 'Tarik ke bawah untuk menyegarkan',
     canRelease: 'Lepaskan untuk menyegarkan segera',
     complete: 'Segarkan berhasil'
+  },
+  SearchBar: {
+    name: 'Bilah Pencarian'
+  },
+  Slider: {
+    name: 'Penggeser'
+  },
+  Stepper: {
+    decrease: 'mengurangi',
+    increase: 'meningkat'
+  },
+  Switch: {
+    name: 'Mengalihkan'
   }
 });
 var _default = idID;

package/cjs/utils/use-resize-effect.js

@@ -14,11 +14,13 @@ function useResizeEffect(effect, targetRef) {
     if (!target) return;
 
     if (window.ResizeObserver) {
+      let animationFrame;
       const observer = new ResizeObserver(() => {
-        fn(target);
+        animationFrame = window.requestAnimationFrame(() => fn(target));
       });
       observer.observe(target);
       return () => {
+        window.cancelAnimationFrame(animationFrame);
         observer.disconnect();
       };
     } else {

package/es/components/action-sheet/action-sheet.css

@@ -39,13 +39,16 @@
   font-size: var(--adm-font-size-10);
 }
 .adm-action-sheet-button-item-description {
-  font-size: var(--adm-font-size-4);
+  font-size: var(--adm-font-size-6);
   color: var(--adm-color-weak);
-  padding-top: 2px;
+  padding-top: 4px;
 }
 .adm-action-sheet-button-item-danger .adm-action-sheet-button-item-name {
   color: var(--adm-color-danger);
 }
+.adm-action-sheet-button-item-bold .adm-action-sheet-button-item-name {
+  font-weight: bold;
+}
 .adm-action-sheet-cancel {
   background-color: var(--adm-color-box);
   padding-top: 8px;

package/es/components/action-sheet/action-sheet.d.ts

@@ -7,6 +7,7 @@ export declare type Action = {
     disabled?: boolean;
     description?: ReactNode;
     danger?: boolean;
+    bold?: boolean;
     onClick?: () => void;
 };
 export declare type ActionSheetProps = {

package/es/components/action-sheet/action-sheet.js

@@ -47,7 +47,8 @@ export const ActionSheet = p => {
   }, React.createElement("a", {
     className: classNames('adm-plain-anchor', `${classPrefix}-button-item`, {
       [`${classPrefix}-button-item-danger`]: action.danger,
-      [`${classPrefix}-button-item-disabled`]: action.disabled
+      [`${classPrefix}-button-item-disabled`]: action.disabled,
+      [`${classPrefix}-button-item-bold`]: action.bold
     }),
     onClick: () => {
       var _a, _b, _c;

package/es/components/check-list/check-list.css

@@ -1,5 +1,5 @@
 .adm-check-list-item-extra {
-  font-size: var(--adm-font-size-8);
+  font-size: var(--adm-font-size-10);
   line-height: 1;
   color: var(--adm-color-primary);
 }

package/es/components/ellipsis/ellipsis.js

@@ -23,6 +23,7 @@ export const Ellipsis = p => {
   function calcEllipsised() {
     const root = rootRef.current;
     if (!root) return;
+    if (!root.offsetParent) return;
     const originStyle = window.getComputedStyle(root);
     const container = document.createElement('div');
     const styleNames = Array.prototype.slice.apply(originStyle);

package/es/components/floating-panel/floating-panel.js

@@ -113,8 +113,8 @@ export const FloatingPanel = forwardRef((p, ref) => {
     ref: elementRef,
     className: 'adm-floating-panel',
     style: {
-      height: maxHeight,
-      translateY: y.to(y => `calc(100% + (${y}px))`)
+      height: Math.round(maxHeight),
+      translateY: y.to(y => `calc(100% + (${Math.round(y)}px))`)
     }
   }, React.createElement("div", {
     className: 'adm-floating-panel-mask',

package/es/components/form/context.d.ts

@@ -5,7 +5,7 @@ export declare type FormContextType = {
     name?: string;
     hasFeedback: boolean;
     layout: FormLayout;
-    requiredMarkStyle: 'asterisk' | 'text-required' | 'text-optional';
+    requiredMarkStyle: 'asterisk' | 'text-required' | 'text-optional' | 'none';
     disabled: boolean;
 };
 export declare const defaultFormContext: FormContextType;

package/es/components/form/form-item.d.ts

@@ -7,7 +7,7 @@ import type { FormLayout } from './index';
 declare type RenderChildren<Values = any> = (form: FormInstance<Values>) => React.ReactNode;
 declare type ChildrenType<Values = any> = RenderChildren<Values> | React.ReactNode;
 declare type RcFieldProps = Omit<FieldProps, 'children'>;
-export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePropName' | 'name' | 'rules' | 'messageVariables' | 'trigger' | 'validateTrigger' | 'shouldUpdate' | 'initialValue'> & Pick<ListItemProps, 'style' | 'extra' | 'clickable' | 'arrow' | 'description'> & {
+export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePropName' | 'name' | 'rules' | 'messageVariables' | 'trigger' | 'validateTrigger' | 'shouldUpdate' | 'initialValue' | 'getValueFromEvent' | 'getValueProps' | 'normalize' | 'preserve' | 'validateFirst'> & Pick<ListItemProps, 'style' | 'extra' | 'clickable' | 'arrow' | 'description'> & {
     label?: React.ReactNode;
     help?: React.ReactNode;
     hasFeedback?: boolean;

package/es/components/form/form-item.js

@@ -63,6 +63,9 @@ const FormItemLayout = props => {
           className: `${classPrefix}-required-text`
         }, "(", locale.Form.optional, ")");
 
+      case 'none':
+        return null;
+
       default:
         return null;
     }

package/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/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/es/components/index-bar/index-bar.css

@@ -40,7 +40,7 @@
 .adm-index-bar-sidebar-bubble {
   position: absolute;
   top: 50%;
-  right: 42px;
+  right: 60px;
   width: 47px;
   height: 47px;
   color: var(--adm-color-white);

package/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: 3px;
   --active-dot-size: 13px;

package/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/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 {
   position: relative;
@@ -16,6 +19,7 @@
   overflow: hidden;
   cursor: pointer;
   box-sizing: border-box;
+  transition: all 0.3s;
 }
 .adm-rate-star-half {
   padding-right: 0;

package/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/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/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/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/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/es/components/result-page/result-page.css

@@ -0,0 +1,113 @@
+.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: 20px;
+  padding-bottom: 100px;
+  z-index: 1;
+  overflow: hidden;
+}
+.adm-result-page-icon {
+  color: var(--adm-color-background);
+  box-sizing: border-box;
+  padding: 2px;
+  margin-bottom: 8px;
+}
+.adm-result-page-icon .antd-mobile-icon {
+  font-size: 32px;
+}
+.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: 8px;
+  margin-bottom: 24px;
+  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: 5px;
+  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: 10px;
+  height: 10px;
+  margin: auto;
+  margin-bottom: 5px;
+  border-top: 2px solid var(--adm-color-background);
+  border-right: 2px 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: 54px;
+}
+.adm-result-page-bg {
+  --width: 440vw;
+  position: absolute;
+  height: var(--width);
+  width: var(--width);
+  left: calc((var(--width) - 100vw) * -1 / 2 - 20px);
+  top: calc(var(--width) * -1 + 1vw);
+  border-radius: 50%;
+  background-color: var(--background-color);
+  z-index: -1;
+}
+.adm-result-page-content {
+  position: relative;
+  padding: 12px;
+  top: -104px;
+  z-index: 2;
+}
+.adm-result-page-footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  padding: 12px;
+  padding-bottom: 24px;
+  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 - 36px) / 2);
+}
+.adm-result-page-footer-space {
+  width: 12px;
+}
+.adm-result-page-card {
+  border-radius: 8px;
+  background-color: var(--adm-color-background);
+}

package/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/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/es/components/selector/selector.css

@@ -7,6 +7,10 @@
   --checked-border: none;
   --border-radius: 2px;
   --padding: 8px 16px;
+  --gap: 8px;
+  ---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;
@@ -14,6 +18,11 @@
 .adm-selector .adm-space.adm-space {
   --gap: 12px;
 }
+.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;