antd-mobile 5.19.0 → 5.22.0

package/cjs/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/cjs/components/rate/rate.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Rate = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -17,8 +17,16 @@ var _usePropsValue = require("../../utils/use-props-value");
 
 var _star = require("./star");
 
+var _react2 = require("@use-gesture/react");
+
+var _bound = require("../../utils/bound");
+
 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-rate`;
 const defaultProps = {
   count: 5,
@@ -32,6 +40,7 @@ const defaultProps = {
 const Rate = p => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const [value, setValue] = (0, _usePropsValue.usePropsValue)(props);
+  const containerRef = (0, _react.useRef)(null);
   const starList = Array(props.count).fill(null);
 
   function renderStar(v, half) {
@@ -41,26 +50,46 @@ 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 (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+  const bind = (0, _react2.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 = (0, _bound.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 (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", Object.assign({
     className: classPrefix,
     role: 'radiogroup',
-    "aria-readonly": props.readOnly
-  }, starList.map((_, i) => _react.default.createElement("div", {
+    "aria-readonly": props.readOnly,
+    ref: containerRef
+  }, bind()), starList.map((_, i) => _react.default.createElement("div", {
     key: i,
     className: (0, _classnames.default)(`${classPrefix}-box`)
   }, props.allowHalf && renderStar(i + 0.5, true), renderStar(i + 1, false)))));

package/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/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/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/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/cjs/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/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/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/cjs/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;

package/cjs/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/cjs/components/selector/selector.js

@@ -17,8 +17,6 @@ var _space = _interopRequireDefault(require("../space"));
 
 var _grid = _interopRequireDefault(require("../grid"));
 
-var _convertPx = require("../../utils/convert-px");
-
 var _usePropsValue = require("../../utils/use-props-value");
 
 var _checkMark = require("./check-mark");
@@ -84,8 +82,7 @@ const Selector = p => {
   }, !props.columns && _react.default.createElement(_space.default, {
     wrap: true
   }, items), props.columns && _react.default.createElement(_grid.default, {
-    columns: props.columns,
-    gap: (0, _convertPx.convertPx)(8)
+    columns: props.columns
   }, items)));
 };
 

package/cjs/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/cjs/components/swipe-action/swipe-action.js

@@ -65,8 +65,26 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
     }
   }), []);
   const draggingRef = (0, _react.useRef)(false);
+  const dragCancelRef = (0, _react.useRef)(null);
+
+  function forceCancelDrag() {
+    var _a;
+
+    (_a = dragCancelRef.current) === null || _a === void 0 ? void 0 : _a.call(dragCancelRef);
+    draggingRef.current = false;
+  }
+
   const bind = (0, _react2.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) {
@@ -82,9 +100,15 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
         position = 0;
       }
 
+      const targetX = (0, _nearest.nearest)([-rightWidth, 0, leftWidth], position);
       api.start({
-        x: (0, _nearest.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;
       });
@@ -109,17 +133,21 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
     preventScroll: true,
     pointer: {
       touch: true
-    }
+    },
+    triggerAllEvents: true
   });
 
   function close() {
     api.start({
       x: 0
     });
+    forceCancelDrag();
   }
 
   (0, _react.useImperativeHandle)(ref, () => ({
     show: (side = 'right') => {
+      var _a;
+
       if (side === 'right') {
         api.start({
           x: -getRightWidth()
@@ -129,6 +157,8 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
           x: getLeftWidth()
         });
       }
+
+      (_a = p.onActionsReveal) === null || _a === void 0 ? void 0 : _a.call(p, side);
     },
     close
   }));
@@ -200,9 +230,7 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
       if (x.goal !== 0) {
         e.preventDefault();
         e.stopPropagation();
-        api.start({
-          x: 0
-        });
+        close();
       }
     }
   }, _react.default.createElement(_web.animated.div, {

package/cjs/components/swiper/swiper.js

@@ -141,7 +141,18 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
         });
       }
     }), [count]);
+    const dragCancelRef = (0, _react.useRef)(null);
+
+    function forceCancelDrag() {
+      var _a;
+
+      (_a = dragCancelRef.current) === null || _a === void 0 ? void 0 : _a.call(dragCancelRef);
+      draggingRef.current = false;
+    }
+
     const bind = (0, _react2.useDrag)(state => {
+      dragCancelRef.current = state.cancel;
+      if (!state.intentional) return;
       const slidePixels = getSlidePixels();
       if (!slidePixels) return;
       const paramIndex = isVertical ? 1 : 0;
@@ -170,6 +181,7 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
         const slidePixels = getSlidePixels();
         return [position.get() / 100 * slidePixels, position.get() / 100 * slidePixels];
       },
+      triggerAllEvents: true,
       bounds: () => {
         if (loop) return {};
         const slidePixels = getSlidePixels();
@@ -233,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) {
@@ -284,6 +296,8 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
         if (draggingRef.current) {
           e.stopPropagation();
         }
+
+        forceCancelDrag();
       }
     }, props.allowTouchMove ? bind() : {}), renderTrackInner()), props.indicator === undefined ? _react.default.createElement("div", {
       className: `${classPrefix}-indicator`

package/cjs/components/tab-bar/tab-bar.css

@@ -8,7 +8,7 @@
 }
 .adm-tab-bar-item {
   flex: 1;
-  color: var(--adm-color-weak);
+  color: var(--adm-color-text-secondary);
   white-space: nowrap;
   padding: 4px 8px;
   width: -webkit-min-content;
@@ -26,7 +26,7 @@
   line-height: 1;
 }
 .adm-tab-bar-item-title {
-  font-size: var(--adm-font-size-3);
+  font-size: var(--adm-font-size-2);
   line-height: 15px;
 }
 .adm-tab-bar-item-title-with-icon {

package/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';