antd-mobile 5.22.0 → 5.24.0

package/2x/bundle/style.css

@@ -291,6 +291,38 @@ div.adm-px-tester {
   display: block;
 }
 
+.adm-image {
+  --width: var(--adm-image-width, auto);
+  --height: var(--adm-image-height, auto);
+  width: var(--width);
+  height: var(--height);
+  display: block;
+  overflow: hidden;
+}
+
+.adm-image-img {
+  width: 100%;
+  height: 100%;
+}
+
+.adm-image-tip {
+  position: relative;
+  background-color: var(--adm-color-box);
+  height: 100%;
+  min-height: 48px;
+  min-width: 48px;
+}
+
+.adm-image-tip>svg {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%);
+  color: var(--adm-color-weak);
+}
+
 .adm-badge-wrapper {
   display: inline-block;
   position: relative;
@@ -945,6 +977,15 @@ div.adm-px-tester {
   align-items: center;
 }
 
+.adm-picker-view-item-height-measure {
+  position: relative;
+  left: 0;
+  top: 0;
+  height: var(--item-height);
+  width: 0;
+  pointer-events: none;
+}
+
 .adm-cascader-view {
   --height: auto;
 }
@@ -1538,38 +1579,6 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   overflow-y: auto;
 }
 
-.adm-image {
-  --width: var(--adm-image-width, auto);
-  --height: var(--adm-image-height, auto);
-  width: var(--width);
-  height: var(--height);
-  display: block;
-  overflow: hidden;
-}
-
-.adm-image-img {
-  width: 100%;
-  height: 100%;
-}
-
-.adm-image-tip {
-  position: relative;
-  background-color: var(--adm-color-box);
-  height: 100%;
-  min-height: 48px;
-  min-width: 48px;
-}
-
-.adm-image-tip>svg {
-  width: 48px;
-  height: 48px;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%,-50%);
-  color: var(--adm-color-weak);
-}
-
 .adm-divider-horizontal {
   display: flex;
   align-items: center;
@@ -1903,12 +1912,14 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 }
 
 .adm-form {
-  --border-inner: solid 2px var(--adm-color-border);
-  --border-top: solid 2px var(--adm-color-border);
-  --border-bottom: solid 2px var(--adm-color-border);
+  --border-inner: solid 2px var(--adm-border-color);
+  --border-top: solid 2px var(--adm-border-color);
+  --border-bottom: solid 2px var(--adm-border-color);
+  --prefix-width: 6.8em;
   ---border-inner: var(--border-inner);
   ---border-top: var(--border-top);
   ---border-bottom: var(--border-bottom);
+  ---prefix-width: var(--prefix-width);
 }
 
 .adm-form .adm-list.adm-list {
@@ -1923,6 +1934,10 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   padding: 40px 24px;
 }
 
+.adm-form .adm-form-item-horizontal.adm-list-item {
+  --prefix-width: var(---prefix-width);
+}
+
 .adm-form-list-operation {
   text-align: center;
   color: #1677ff;
@@ -1997,7 +2012,6 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 
 .adm-form-item.adm-form-item-horizontal.adm-list-item {
   --align-items: stretch;
-  --prefix-width: 6.8em;
 }
 
 .adm-form-item.adm-form-item-horizontal .adm-list-item-content-prefix {
@@ -3137,6 +3151,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 }
 
 .adm-page-indicator-color-white {
+  --dot-color: rgba(255, 255, 255, .5);
   --active-dot-color: var(--adm-color-white);
 }
 
@@ -3487,7 +3502,8 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 .adm-rate {
   --star-size: 48px;
   --active-color: #ffd21e;
-  --inactive-color: var(--adm-color-border);
+  --inactive-color: #e5e5e5;
+  --inactive-color-half: #dbdbdb;
   display: inline-flex;
   touch-action: pan-y;
   -webkit-user-select: none;
@@ -3526,6 +3542,10 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   cursor: unset;
 }
 
+.adm-rate.adm-rate-half .adm-rate-star-half:not(.adm-rate-star-active) {
+  color: var(--inactive-color-half);
+}
+
 .adm-result {
   padding: 64px 24px;
   background-color: var(--adm-color-background);
@@ -4048,12 +4068,26 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   transform: translate(-50%);
 }
 
-.adm-slider-disabled {
+.adm-slider-disabled .adm-slider-mark,
+.adm-slider-disabled .adm-slider-thumb-icon {
   opacity: .4;
 }
 
+.adm-slider-disabled .adm-slider-tick-active:after,
+.adm-slider-disabled .adm-slider-fill:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+  background-color: #fff9;
+}
+
 .adm-slider-disabled .adm-slider-thumb {
   cursor: not-allowed;
+  box-shadow: 0 4px 10px #0000000f;
 }
 
 .adm-slider-disabled .adm-slider-mark-text,
@@ -4717,8 +4751,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   left: 50%;
   transform: translate(-50%,-50%);
   width: auto;
-  min-width: 192px;
-  max-width: 400px;
+  max-width: 408px;
   max-height: 70%;
   overflow: auto;
   color: #fff;
@@ -4733,10 +4766,12 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 
 .adm-toast-mask .adm-toast-main-text {
   padding: 24px;
+  min-width: 0;
 }
 
 .adm-toast-mask .adm-toast-main-icon {
-  padding: 70px 80px;
+  padding: 70px 24px;
+  min-width: 300px;
 }
 
 .adm-toast-mask .adm-toast-main-icon .adm-toast-icon {
@@ -4936,4 +4971,65 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 
 .adm-water-mark-full-page {
   position: fixed;
+}
+
+.adm-footer {
+  --background-color: var(--adm-color-background);
+  color: var(--adm-color-text);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--background-color);
+}
+
+.adm-footer-label {
+  width: 100%;
+}
+
+.adm-footer-label .adm-divider.adm-divider {
+  color: var(--adm-color-light);
+}
+
+.adm-footer-links {
+  margin: 16px 0;
+  color: var(--adm-color-primary);
+  white-space: nowrap;
+}
+
+.adm-footer-links a {
+  text-decoration: none;
+}
+
+.adm-footer-content {
+  display: flex;
+  align-items: center;
+  margin: 16px 0;
+  color: var(--adm-color-light);
+}
+
+.adm-footer-chips {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  margin: 16px 0;
+}
+
+.adm-footer-chip {
+  white-space: nowrap;
+  margin-right: 40px;
+  font-size: 24px;
+  background-color: var(--adm-color-box);
+  color: var(--adm-color-weak);
+  padding: 8px 24px;
+  border-radius: 200px;
+}
+
+.adm-footer-chip-link {
+  cursor: pointer;
+  background-color: #e7f1ff;
+  color: var(--adm-color-primary);
+}
+
+.adm-footer-chip:last-child {
+  margin-right: 0;
 }

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

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _nativeProps = require("../../utils/native-props");
 
-var _index = require("../../index");
+var _image = _interopRequireDefault(require("../image"));
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
@@ -25,7 +25,7 @@ const defaultProps = {
 
 const Avatar = p => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement(_index.Image, {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement(_image.default, {
     className: classPrefix,
     src: props.src,
     fallback: props.fallback,

package/2x/cjs/components/calendar/calendar.d.ts

@@ -1,9 +1,6 @@
 import React from 'react';
 import { NativeProps } from '../../utils/native-props';
-declare type Page = {
-    month: number;
-    year: number;
-};
+import { Page } from './convert';
 export declare type CalendarRef = {
     jumpTo: (page: Page | ((page: Page) => Page)) => void;
     jumpToToday: () => void;
@@ -20,6 +17,8 @@ export declare type CalendarProps = {
     max?: Date;
     min?: Date;
     shouldDisableDate?: (date: Date) => boolean;
+    minPage?: Page;
+    maxPage?: Page;
 } & ({
     selectionMode?: undefined;
     value?: undefined;
@@ -37,4 +36,3 @@ export declare type CalendarProps = {
     onChange?: (val: [Date, Date] | null) => void;
 }) & NativeProps;
 export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<CalendarRef>>;
-export {};

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

@@ -93,36 +93,58 @@ const Calendar = (0, _react.forwardRef)((p, ref) => {
         page = pageOrPageGenerator;
       }
 
-      setCurrent((0, _dayjs.default)().year(page.year).month(page.month - 1).date(1));
+      setCurrent((0, _convert.convertPageToDayjs)(page));
     },
     jumpToToday: () => {
       setCurrent((0, _dayjs.default)().date(1));
     }
   }));
 
+  const handlePageChange = (action, num, type) => {
+    const nxtCurrent = current[action](num, type);
+
+    if (action === 'subtract' && props.minPage) {
+      const minPage = (0, _convert.convertPageToDayjs)(props.minPage);
+
+      if (nxtCurrent.isBefore(minPage, type)) {
+        return;
+      }
+    }
+
+    if (action === 'add' && props.maxPage) {
+      const maxPage = (0, _convert.convertPageToDayjs)(props.maxPage);
+
+      if (nxtCurrent.isAfter(maxPage, type)) {
+        return;
+      }
+    }
+
+    setCurrent(current[action](num, type));
+  };
+
   const header = _react.default.createElement("div", {
     className: `${classPrefix}-header`
   }, _react.default.createElement("a", {
     className: `${classPrefix}-arrow-button ${classPrefix}-arrow-button-year`,
     onClick: () => {
-      setCurrent(current.subtract(1, 'year'));
+      handlePageChange('subtract', 1, 'year');
     }
   }, props.prevYearButton), _react.default.createElement("a", {
     className: `${classPrefix}-arrow-button ${classPrefix}-arrow-button-month`,
     onClick: () => {
-      setCurrent(current.subtract(1, 'month'));
+      handlePageChange('subtract', 1, 'month');
     }
   }, props.prevMonthButton), _react.default.createElement("div", {
     className: `${classPrefix}-title`
   }, locale.Calendar.renderYearAndMonth(current.year(), current.month() + 1)), _react.default.createElement("a", {
     className: (0, _classnames.default)(`${classPrefix}-arrow-button`, `${classPrefix}-arrow-button-right`, `${classPrefix}-arrow-button-right-month`),
     onClick: () => {
-      setCurrent(current.add(1, 'month'));
+      handlePageChange('add', 1, 'month');
     }
   }, props.nextMonthButton), _react.default.createElement("a", {
     className: (0, _classnames.default)(`${classPrefix}-arrow-button`, `${classPrefix}-arrow-button-right`, `${classPrefix}-arrow-button-right-year`),
     onClick: () => {
-      setCurrent(current.add(1, 'year'));
+      handlePageChange('add', 1, 'year');
     }
   }, props.nextYearButton));
 

package/2x/cjs/components/calendar/convert.d.ts

@@ -1,2 +1,8 @@
+import dayjs from 'dayjs';
 export declare type DateRange = [Date, Date] | null;
+export declare type Page = {
+    month: number;
+    year: number;
+};
 export declare function convertValueToRange(selectionMode: 'single' | 'range' | undefined, value: Date | [Date, Date] | null): DateRange;
+export declare function convertPageToDayjs(page: Page): dayjs.Dayjs;

package/2x/cjs/components/calendar/convert.js

@@ -3,8 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.convertPageToDayjs = convertPageToDayjs;
 exports.convertValueToRange = convertValueToRange;
 
+var _dayjs = _interopRequireDefault(require("dayjs"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function convertValueToRange(selectionMode, value) {
   if (selectionMode === undefined) {
     return null;
@@ -19,4 +24,8 @@ function convertValueToRange(selectionMode, value) {
   }
 
   return [value, value];
+}
+
+function convertPageToDayjs(page) {
+  return (0, _dayjs.default)().year(page.year).month(page.month - 1).date(1);
 }

package/2x/cjs/components/dialog/dialog-action-button.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type Action = {
     key: string | number;
-    text: string;
+    text: ReactNode;
     disabled?: boolean;
     danger?: boolean;
     bold?: boolean;

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

@@ -7,6 +7,8 @@ exports.Ellipsis = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _runes = _interopRequireDefault(require("runes"));
+
 var _withDefaultProps = require("../../utils/with-default-props");
 
 var _nativeProps = require("../../utils/native-props");
@@ -17,6 +19,8 @@ var _ahooks = require("ahooks");
 
 var _withStopPropagation = require("../../utils/with-stop-propagation");
 
+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; }
@@ -37,6 +41,11 @@ const Ellipsis = p => {
   const [ellipsised, setEllipsised] = (0, _react.useState)({});
   const [expanded, setExpanded] = (0, _react.useState)(false);
   const [exceeded, setExceeded] = (0, _react.useState)(false);
+  const chars = (0, _react.useMemo)(() => (0, _runes.default)(props.content), [props.content]);
+
+  function getSubString(start, end) {
+    return chars.slice(start, end).join('');
+  }
 
   function calcEllipsised() {
     const root = rootRef.current;
@@ -75,11 +84,11 @@ const Ellipsis = p => {
         if (right - left <= 1) {
           if (props.direction === 'end') {
             return {
-              leading: props.content.slice(0, left) + '...'
+              leading: getSubString(0, left) + '...'
             };
           } else {
             return {
-              tailing: '...' + props.content.slice(right, end)
+              tailing: '...' + getSubString(right, end)
             };
           }
         }
@@ -87,9 +96,9 @@ const Ellipsis = p => {
         const middle = Math.round((left + right) / 2);
 
         if (props.direction === 'end') {
-          container.innerText = props.content.slice(0, middle) + '...' + actionText;
+          container.innerText = getSubString(0, middle) + '...' + actionText;
         } else {
-          container.innerText = actionText + '...' + props.content.slice(middle, end);
+          container.innerText = actionText + '...' + getSubString(middle, end);
         }
 
         if (container.offsetHeight <= maxHeight) {
@@ -110,14 +119,14 @@ const Ellipsis = p => {
       function checkMiddle(leftPart, rightPart) {
         if (leftPart[1] - leftPart[0] <= 1 && rightPart[1] - rightPart[0] <= 1) {
           return {
-            leading: props.content.slice(0, leftPart[0]) + '...',
-            tailing: '...' + props.content.slice(rightPart[1], end)
+            leading: getSubString(0, leftPart[0]) + '...',
+            tailing: '...' + getSubString(rightPart[1], end)
           };
         }
 
         const leftPartMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
         const rightPartMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
-        container.innerText = props.content.slice(0, leftPartMiddle) + '...' + actionText + '...' + props.content.slice(rightPartMiddle, end);
+        container.innerText = getSubString(0, leftPartMiddle) + '...' + actionText + '...' + getSubString(rightPartMiddle, end);
 
         if (container.offsetHeight <= maxHeight) {
           return checkMiddle([leftPartMiddle, leftPart[1]], [rightPart[0], rightPartMiddle]);

package/2x/cjs/components/empty/empty.d.ts

@@ -5,4 +5,5 @@ export declare type EmptyProps = {
     imageStyle?: React.CSSProperties;
     description?: ReactNode;
 } & NativeProps;
+/** @deprecated Empty has been deprecated and will be removed in the next major version. */
 export declare const Empty: React.FC<EmptyProps>;

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

@@ -16,6 +16,7 @@ var _emptyIcon = require("./empty-icon");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const classPrefix = `adm-empty`;
+/** @deprecated Empty has been deprecated and will be removed in the next major version. */
 
 const Empty = props => {
   function renderImageNode() {

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

@@ -0,0 +1,60 @@
+.adm-footer {
+  --background-color: var(--adm-color-background);
+  color: var(--adm-color-text);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--background-color);
+}
+
+.adm-footer-label {
+  width: 100%;
+}
+
+.adm-footer-label .adm-divider.adm-divider {
+  color: var(--adm-color-light);
+}
+
+.adm-footer-links {
+  margin: 16px 0;
+  color: var(--adm-color-primary);
+  white-space: nowrap;
+}
+
+.adm-footer-links a {
+  text-decoration: none;
+}
+
+.adm-footer-content {
+  display: flex;
+  align-items: center;
+  margin: 16px 0;
+  color: var(--adm-color-light);
+}
+
+.adm-footer-chips {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  margin: 16px 0;
+}
+
+.adm-footer-chip {
+  white-space: nowrap;
+  margin-right: 40px;
+  font-size: 24px;
+  background-color: var(--adm-color-box);
+  color: var(--adm-color-weak);
+  padding: 8px 24px;
+  border-radius: 200px;
+}
+
+.adm-footer-chip-link {
+  cursor: pointer;
+  background-color: #e7f1ff;
+  color: var(--adm-color-primary);
+}
+
+.adm-footer-chip:last-child {
+  margin-right: 0;
+}

package/2x/cjs/components/footer/footer.d.ts

@@ -0,0 +1,19 @@
+import { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type LinkItem = {
+    text: string;
+    href: string;
+};
+export declare type ChipItem = {
+    text: ReactNode;
+    type?: 'plain' | 'link';
+};
+export declare type FooterProps = {
+    label?: ReactNode;
+    links?: LinkItem[];
+    content?: ReactNode;
+    chips?: ChipItem[];
+    onChipClick?: (item: ChipItem, index: number) => void;
+    onLinkClick?: (item: LinkItem, index: number) => void;
+} & NativeProps<'--background-color'>;
+export declare const Footer: FC<FooterProps>;

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

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Footer = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _nativeProps = require("../../utils/native-props");
+
+var _withDefaultProps = require("../../utils/with-default-props");
+
+var _divider = require("../divider/divider");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const classPrefix = `adm-footer`;
+const defaultProps = {
+  label: '',
+  links: [],
+  content: '',
+  chips: []
+};
+
+const Footer = p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const {
+    label,
+    links,
+    content,
+    chips,
+    onChipClick,
+    onLinkClick
+  } = props;
+
+  const clickChipItem = (item, index) => {
+    if ((chips === null || chips === void 0 ? void 0 : chips.length) && item.type === 'link') {
+      onChipClick === null || onChipClick === void 0 ? void 0 : onChipClick(item, index);
+    }
+  };
+
+  const clickLinkItem = (item, index, e) => {
+    if (onLinkClick) {
+      e.preventDefault();
+      onLinkClick(item, index);
+    }
+  };
+
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: (0, _classnames.default)(classPrefix)
+  }, label && _react.default.createElement("div", {
+    className: `${classPrefix}-label`
+  }, _react.default.createElement(_divider.Divider, null, label)), links && links.length > 0 && _react.default.createElement("div", {
+    className: `${classPrefix}-links`
+  }, links.map((link, index) => {
+    return _react.default.createElement(_react.default.Fragment, {
+      key: index
+    }, _react.default.createElement("a", {
+      href: link.href,
+      rel: 'noopener noreferrer',
+      onClick: event => clickLinkItem(link, index, event)
+    }, link.text), index !== links.length - 1 && _react.default.createElement(_divider.Divider, {
+      direction: 'vertical'
+    }));
+  })), content && _react.default.createElement("div", {
+    className: `${classPrefix}-content`
+  }, content), chips && chips.length > 0 && _react.default.createElement("div", {
+    className: `${classPrefix}-chips`
+  }, chips.map((chip, index) => {
+    return _react.default.createElement("div", {
+      key: index,
+      onClick: () => clickChipItem(chip, index),
+      className: (0, _classnames.default)(`${classPrefix}-chip`, {
+        [`${classPrefix}-chip-link`]: chip.type === 'link'
+      })
+    }, chip.text);
+  }))));
+};
+
+exports.Footer = Footer;

package/2x/cjs/components/footer/index.d.ts

@@ -0,0 +1,4 @@
+import './footer.less';
+import { Footer } from './footer';
+export type { FooterProps, ChipItem, LinkItem } from './footer';
+export default Footer;