antd-mobile 5.20.0 → 5.21.0

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

@@ -28,15 +28,6 @@ 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
@@ -46,20 +37,30 @@ export const Rate = p => {
   const bind = useDrag(state => {
     if (props.readOnly) return;
     const {
-      xy: [clientX]
+      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 roundedValue = props.allowHalf ? Math.round(rawValue * 2) / 2 : Math.round(rawValue);
-    setValue(bound(roundedValue, 0, 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',
-    preventScroll: true,
     pointer: {
       touch: true
-    }
+    },
+    filterTaps: true
   });
   return withNativeProps(props, React.createElement("div", Object.assign({
     className: classPrefix,

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/swiper/swiper.js

@@ -217,7 +217,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
       return () => {
         window.clearInterval(interval);
       };
-    }, [autoplay, autoplayInterval, dragging]);
+    }, [autoplay, autoplayInterval, dragging, count]);
 
     function renderTrackInner() {
       if (loop) {

package/2x/es/index.d.ts

@@ -56,6 +56,7 @@ export { default as PullToRefresh } from './components/pull-to-refresh';
 export { default as Radio } from './components/radio';
 export { default as Rate } from './components/rate';
 export { default as Result } from './components/result';
+export { default as ResultPage } from './components/result-page';
 export { default as SafeArea } from './components/safe-area';
 export { default as ScrollMask } from './components/scroll-mask';
 export { default as SearchBar } from './components/search-bar';

package/2x/es/index.js

@@ -56,6 +56,7 @@ export { default as PullToRefresh } from './components/pull-to-refresh';
 export { default as Radio } from './components/radio';
 export { default as Rate } from './components/rate';
 export { default as Result } from './components/result';
+export { default as ResultPage } from './components/result-page';
 export { default as SafeArea } from './components/safe-area';
 export { default as ScrollMask } from './components/scroll-mask';
 export { default as SearchBar } from './components/search-bar';

package/2x/package.json

@@ -1,11 +1,11 @@
 {
   "name": "antd-mobile",
-  "version": "5.20.0",
+  "version": "5.21.0",
   "dependencies": {
-    "@floating-ui/dom": "^0.5.2",
+    "@floating-ui/dom": "^1.0.0",
     "@react-spring/web": "^9.4.5",
     "@use-gesture/react": "10.2.17",
-    "ahooks": "^3.5.2",
+    "ahooks": "^3.7.0",
     "antd-mobile-icons": "^0.3.0",
     "antd-mobile-v5-count": "^1.0.1",
     "big.js": "^6.2.1",