antd-mobile 5.20.0 → 5.21.0

package/2x/bundle/style.css

@@ -3486,6 +3486,8 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   --inactive-color: var(--adm-color-border);
   display: inline-flex;
   touch-action: pan-y;
+  -webkit-user-select: none;
+  user-select: none;
 }
 
 .adm-rate-box {
@@ -3501,6 +3503,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   overflow: hidden;
   cursor: pointer;
   box-sizing: border-box;
+  transition: all .3s;
 }
 
 .adm-rate-star-half {
@@ -3571,6 +3574,134 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   color: var(--adm-color-warning);
 }
 
+.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 40px 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: #fff9;
+  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: .6;
+  width: 20px;
+  height: 20px;
+  margin: auto auto 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 24px 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);
+}
+
 .adm-search-bar {
   --height: 64px;
   --padding-left: 16px;

package/2x/cjs/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/2x/cjs/components/picker-view/wheel.js

@@ -208,6 +208,8 @@ const Wheel = (0, _react.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 (!(0, _isEqual.default)(prev.column, next.column)) {
     return false;

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

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

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

@@ -50,15 +50,6 @@ 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
@@ -68,20 +59,30 @@ const Rate = p => {
   const bind = (0, _react2.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((0, _bound.bound)(roundedValue, 0, props.count));
+    const ceiledValue = props.allowHalf ? Math.ceil(rawValue * 2) / 2 : Math.ceil(rawValue);
+    const boundValue = (0, _bound.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 (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", Object.assign({
     className: classPrefix,

package/2x/cjs/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/cjs/components/result-page/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("./result-page.css");
+
+var _resultPage2 = require("./result-page");
+
+var _attachPropertiesToComponent = require("../../utils/attach-properties-to-component");
+
+var _resultPageCard = require("./result-page-card");
+
+var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_resultPage2.ResultPage, {
+  Card: _resultPageCard.ResultPageCard
+});
+
+exports.default = _default;

package/2x/cjs/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/cjs/components/result-page/result-page-card.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ResultPageCard = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _nativeProps = require("../../utils/native-props");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const classPrefix = `adm-result-page-card`;
+
+const ResultPageCard = props => {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement('div', {
+    className: (0, _classnames.default)(`${classPrefix}`)
+  }, props.children));
+};
+
+exports.ResultPageCard = ResultPageCard;

package/2x/cjs/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/cjs/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/cjs/components/result-page/result-page.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ResultPage = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _antdMobileIcons = require("antd-mobile-icons");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _nativeProps = require("../../utils/native-props");
+
+var _withDefaultProps = require("../../utils/with-default-props");
+
+var _isNodeWithContent = require("../../utils/is-node-with-content");
+
+var _button = _interopRequireDefault(require("../button"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+const classPrefix = `adm-result-page`;
+const iconRecord = {
+  success: _antdMobileIcons.CheckCircleFill,
+  error: _antdMobileIcons.CloseCircleFill,
+  info: _antdMobileIcons.InformationCircleFill,
+  waiting: _antdMobileIcons.ClockCircleFill,
+  warning: _antdMobileIcons.ExclamationCircleFill
+};
+const defaultProps = {
+  status: 'info',
+  details: []
+};
+
+const ResultPage = p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const {
+    status,
+    title,
+    description,
+    details,
+    icon,
+    primaryButtonText,
+    secondaryButtonText,
+    onPrimaryButtonClick,
+    onSecondaryButtonClick
+  } = props;
+
+  const resultIcon = icon || _react.default.createElement(iconRecord[status]);
+
+  const [collapse, setCollapse] = (0, _react.useState)(true);
+  const showSecondaryButton = (0, _isNodeWithContent.isNodeWithContent)(secondaryButtonText);
+  const showPrimaryButton = (0, _isNodeWithContent.isNodeWithContent)(primaryButtonText);
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: classPrefix
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-header`
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-icon`
+  }, resultIcon), _react.default.createElement("div", {
+    className: `${classPrefix}-title`
+  }, title), (0, _isNodeWithContent.isNodeWithContent)(description) ? _react.default.createElement("div", {
+    className: `${classPrefix}-description`
+  }, description) : null, details.length ? _react.default.createElement("div", {
+    className: `${classPrefix}-details`
+  }, (collapse ? details.slice(0, 3) : details).map((detail, index) => {
+    return _react.default.createElement("div", {
+      className: (0, _classnames.default)(`${classPrefix}-detail`, detail.bold && `${classPrefix}-detail-bold`),
+      key: index
+    }, _react.default.createElement("span", null, detail.label), _react.default.createElement("span", null, detail.value));
+  }), details.length > 3 && _react.default.createElement("div", {
+    onClick: () => setCollapse(prev => !prev)
+  }, _react.default.createElement("div", {
+    className: (0, _classnames.default)(`${classPrefix}-collapse`, !collapse && `${classPrefix}-collapse-active`)
+  }))) : null, _react.default.createElement("div", {
+    className: `${classPrefix}-bgWrapper`
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-bg`
+  }))), _react.default.createElement("div", {
+    className: `${classPrefix}-content`
+  }, props.children), _react.default.createElement("div", {
+    className: `${classPrefix}-footer`
+  }, showSecondaryButton && _react.default.createElement(_button.default, {
+    block: true,
+    color: 'default',
+    fill: 'solid',
+    size: 'large',
+    onClick: onSecondaryButtonClick,
+    className: `${classPrefix}-footer-btn`
+  }, secondaryButtonText), showPrimaryButton && showSecondaryButton && _react.default.createElement("div", {
+    className: `${classPrefix}-footer-space`
+  }), showPrimaryButton && _react.default.createElement(_button.default, {
+    block: true,
+    color: 'primary',
+    fill: 'solid',
+    size: 'large',
+    onClick: onPrimaryButtonClick,
+    className: `${classPrefix}-footer-btn`
+  }, primaryButtonText))));
+};
+
+exports.ResultPage = ResultPage;

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

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

package/2x/cjs/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/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/2x/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/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

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