antd-mobile 5.0.0-rc.19 → 5.0.0-rc.22

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

@@ -13,7 +13,7 @@ export const ListItem = props => {
   }, props.prefix && React.createElement("div", {
     className: `${classPrefix}-content-prefix`
   }, props.prefix), React.createElement("div", {
-    className: classNames(`${classPrefix}-content-main`, (props.title || props.description) && `${classPrefix}-content-main-multi-row`)
+    className: `${classPrefix}-content-main`
   }, props.title && React.createElement("div", {
     className: `${classPrefix}-title`
   }, props.title), props.children, props.description && React.createElement("div", {

package/es/components/list/list.css

@@ -8,12 +8,14 @@
   --border-top: solid 1px var(--adm-border-color);
   --border-bottom: solid 1px var(--adm-border-color);
   --padding-left: 12px;
+  --padding-right: 12px;
   --font-size: 17px;
 }
 .adm-list-header {
   color: var(--adm-color-weak);
   font-size: var(--header-font-size);
   padding-left: var(--padding-left);
+  padding-right: var(--padding-right);
   margin: 16px 0 4px;
 }
 .adm-list-body {
@@ -48,8 +50,8 @@
   display: flex;
   align-items: var(--align-items);
   justify-content: flex-start;
-  padding: 0 12px;
   border-top: var(--border-inner);
+  padding-right: var(--padding-right);
 }
 .adm-list-item-content-prefix {
   width: var(--prefix-width);
@@ -58,9 +60,6 @@
 }
 .adm-list-item-content-main {
   flex: auto;
-  padding: 14px 0;
-}
-.adm-list-item-content-main.adm-list-item-content-main-multi-row {
   padding: 12px 0;
 }
 .adm-list-item-content-extra {

package/es/components/list/list.d.ts

@@ -3,5 +3,5 @@ import { NativeProps } from '../../utils/native-props';
 export declare type ListProps = {
     header?: ReactNode;
     mode?: 'default' | 'card';
-} & NativeProps<'--header-font-size' | '--prefix-width' | '--prefix-padding-right' | '--align-items' | '--active-background-color' | '--border-inner' | '--border-top' | '--border-bottom' | '--padding-left' | '--font-size'>;
+} & NativeProps<'--header-font-size' | '--prefix-width' | '--prefix-padding-right' | '--align-items' | '--active-background-color' | '--border-inner' | '--border-top' | '--border-bottom' | '--padding-left' | '--padding-right' | '--font-size'>;
 export declare const List: FC<ListProps>;

package/es/components/modal/modal.css

@@ -18,10 +18,19 @@
 }
 .adm-modal-main {
   width: 100%;
+  max-height: 70vh;
   font-size: 14px;
   background-color: white;
   border-radius: 8px;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.adm-modal-main > * {
+  flex: none;
+}
+.adm-modal-main > .adm-modal-image-container {
+  flex: auto;
 }
 .adm-modal-main .adm-modal-body {
   padding: 20px 12px 12px;
@@ -73,3 +82,6 @@
 .adm-modal-main .adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary):active {
   opacity: 0.7;
 }
+.adm-modal-image-container {
+  overflow-y: auto;
+}

package/es/components/modal/modal.js

@@ -71,11 +71,13 @@ export const Modal = p => {
     style: Object.assign({}, style),
     onClick: e => e.stopPropagation(),
     className: `${classPrefix}-main`
-  }, !!props.image && React.createElement(Image, {
+  }, !!props.image && React.createElement("div", {
+    className: `${classPrefix}-image-container`
+  }, React.createElement(Image, {
     src: props.image,
     alt: 'modal header image',
     width: '100%'
-  }), React.createElement("div", {
+  })), React.createElement("div", {
     style: props.bodyStyle,
     className: classNames(`${classPrefix}-body`, props.bodyClassName)
   }, props.showCloseButton && React.createElement("a", {

package/es/components/nav-bar/nav-bar.css

@@ -21,13 +21,13 @@
 .adm-nav-bar-back {
   display: flex;
   align-items: center;
-  margin-right: 12px;
+  margin-right: 16px;
   padding: 6px 0;
   cursor: pointer;
 }
 .adm-nav-bar-back-arrow {
-  font-size: 18px;
-  margin-right: 6px;
+  font-size: 24px;
+  margin-right: 4px;
 }
 .adm-nav-bar-left {
   font-size: 15px;

package/es/components/notice-bar/notice-bar.css

@@ -1,15 +1,18 @@
 .adm-notice-bar {
-  height: 30px;
+  --background-color: #ababab;
+  --border-color: #999999;
+  --text-color: #ffffff;
+  --font-size: 15px;
+  --icon-font-size: 18px;
+  --height: 38px;
+  height: var(--height);
   box-sizing: border-box;
-  font-size: 14px;
-  line-height: 30px;
+  font-size: var(--font-size);
+  line-height: var(--height);
   padding: 0 12px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  --background-color: #b2b2b2;
-  --border-color: #a0a0a0;
-  --text-color: #ffffff;
   border: solid 1px var(--border-color);
   border-left: none;
   border-right: none;
@@ -34,9 +37,11 @@
   --border-color: #bcd8ff;
   --text-color: #1677ff;
 }
-.adm-notice-bar .adm-notice-bar-left:not(:empty) {
+.adm-notice-bar .adm-notice-bar-left {
   flex-shrink: 0;
   margin-right: 8px;
+  font-size: var(--icon-font-size);
+  line-height: var(--height);
 }
 .adm-notice-bar .adm-notice-bar-content {
   flex: 1;
@@ -50,10 +55,12 @@
   width: auto;
   transition-timing-function: linear;
   position: absolute;
-  padding: 0 4px;
   white-space: nowrap;
 }
 .adm-notice-bar .adm-notice-bar-right {
   flex-shrink: 0;
   margin-left: 12px;
 }
+.adm-notice-bar-close-icon {
+  font-size: 18px;
+}

package/es/components/notice-bar/notice-bar.d.ts

@@ -17,5 +17,5 @@ export declare type NoticeBarProps = {
     extra?: React.ReactNode;
     /** 左侧广播图标 */
     icon?: React.ReactNode;
-} & NativeProps<'--background-color' | '--border-color' | '--text-color'>;
+} & NativeProps<'--background-color' | '--border-color' | '--text-color' | '--font-size' | '--icon-font-size' | '--height'>;
 export declare const NoticeBar: React.NamedExoticComponent<NoticeBarProps>;

package/es/components/notice-bar/notice-bar.js

@@ -10,7 +10,8 @@ const classPrefix = `adm-notice-bar`;
 const defaultProps = {
   color: 'default',
   delay: 2000,
-  speed: 50
+  speed: 50,
+  icon: React.createElement(SoundOutline, null)
 };
 export const NoticeBar = memo(p => {
   const props = mergeProps(defaultProps, p);
@@ -67,9 +68,9 @@ export const NoticeBar = memo(p => {
   if (!visible) return null;
   return withNativeProps(props, React.createElement("div", {
     className: classNames(classPrefix, `${classPrefix}-${props.color}`)
-  }, React.createElement("span", {
+  }, props.icon && React.createElement("span", {
     className: `${classPrefix}-left`
-  }, 'icon' in props ? props.icon : React.createElement(SoundOutline, null)), React.createElement("span", {
+  }, props.icon), React.createElement("span", {
     ref: containerRef,
     className: `${classPrefix}-content`
   }, React.createElement("span", {
@@ -82,6 +83,7 @@ export const NoticeBar = memo(p => {
   }, props.content)), (props.closeable || props.extra) && React.createElement("span", {
     className: `${classPrefix}-right`
   }, props.extra, props.closeable && React.createElement(CloseOutline, {
+    className: `${classPrefix}-close-icon`,
     onClick: () => {
       var _a;
 

package/es/components/picker/picker.css

@@ -12,12 +12,12 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 6px 8px;
+  padding: 4px 4px;
 }
 .adm-picker-header-button {
   font-size: 15px;
   display: inline-block;
-  padding: 4px 4px;
+  padding: 8px 8px;
 }
 .adm-picker-header-title {
   padding: 4px 4px;
@@ -34,3 +34,7 @@
 .adm-picker-body > .adm-picker-view {
   --height: 100%;
 }
+.adm-picker-popup .adm-popup-body {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}

package/es/components/picker/picker.js

@@ -83,6 +83,7 @@ export const Picker = memo(p => {
     onChange: onChange
   }))));
   const popupElement = React.createElement(Popup, {
+    className: `${classPrefix}-popup`,
     visible: props.visible,
     position: 'bottom',
     onMaskClick: () => {

package/es/components/picker-view/picker-view.css

@@ -96,8 +96,8 @@
   border-bottom: solid 1px var(--adm-border-color);
 }
 .adm-picker-view-mask-top {
-  background: linear-gradient(0deg, rgba(255, 255, 255, 0.7) 50%, #ffffff);
+  background: linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 50%, #ffffff);
 }
 .adm-picker-view-mask-bottom {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 50%, #ffffff);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 50%, #ffffff);
 }

package/es/components/popover/popover.js

@@ -30,7 +30,10 @@ export const Popover = forwardRef((p, ref) => {
       visible
     };
   }, [visible]);
-  return withStopPropagation(props.stopPropagation, React.createElement(Tooltip, Object.assign({}, props, {
+  const overlay = withStopPropagation(props.stopPropagation, React.createElement("div", {
+    className: `${classPrefix}-inner-content`
+  }, props.content));
+  return React.createElement(Tooltip, Object.assign({}, props, {
     overlayClassName: classNames(`${classPrefix}-${mode}`, props.overlayClassName),
     destroyTooltipOnHide: props.destroyOnHide,
     prefixCls: classPrefix,
@@ -52,8 +55,6 @@ export const Popover = forwardRef((p, ref) => {
       },
       motionDeadline: 200
     },
-    overlay: React.createElement("div", {
-      className: `${classPrefix}-inner-content`
-    }, props.content)
-  }), props.children));
+    overlay: overlay
+  }), props.children);
 });

package/es/components/radio/radio.css

@@ -13,7 +13,7 @@
 }
 .adm-radio .adm-radio-icon {
   flex: none;
-  border: 1px solid #ccc;
+  border: 1px solid var(--adm-color-light);
   border-radius: var(--icon-size);
   box-sizing: border-box;
   display: flex;
@@ -39,12 +39,12 @@
   cursor: not-allowed;
 }
 .adm-radio.adm-radio-disabled .adm-radio-content {
-  color: var(--adm-color-weak);
+  opacity: 0.4;
 }
 .adm-radio.adm-radio-disabled .adm-radio-icon {
-  color: #ccc;
-  border-color: #ccc;
-  background-color: #ebedf0;
+  color: #b7b7b7;
+  border-color: var(--adm-color-light);
+  background-color: #f5f5f5;
 }
 .adm-radio .adm-radio-custom-icon {
   font-size: var(--icon-size);

package/es/components/result/result.css

@@ -1,9 +1,6 @@
 .adm-result {
-  --bg-color: var(--adm-color-white);
-  --color: var(--adm-color-text);
-  --adm-color-weak: var(--adm-color-weak);
   padding: 32px 12px;
-  background-color: var(--bg-color);
+  background-color: var(--adm-color-white);
 }
 .adm-result-icon {
   box-sizing: border-box;
@@ -16,7 +13,7 @@
   font-size: 52px;
 }
 .adm-result-title {
-  color: var(--color);
+  color: var(--adm-color-text);
   font-size: 18px;
   line-height: 1.4;
   text-align: center;

package/es/components/search-bar/search-bar.css

@@ -1,13 +1,14 @@
 .adm-search-bar {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  --height: 28px;
+  --height: 32px;
   --padding-left: 8px;
   --background: #f5f5f5;
   --border-radius: 6px;
   --placeholder-color: var(--adm-color-weak);
   ---placeholder-color: var(--placeholder-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--height);
 }
 .adm-search-bar .adm-search-bar-input-box {
   flex: auto;
@@ -21,20 +22,20 @@
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input-box-icon {
   flex: none;
-  color: var(---placeholder-color);
+  color: var(--adm-color-light);
   font-size: 16px;
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input {
   flex: auto;
   padding: 4px 8px 4px 4px;
-  height: var(--height);
+  height: calc(var(--height) - 2px);
   box-sizing: border-box;
 }
-.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input-wrapper {
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input {
   --placeholder-color: var(---placeholder-color);
+  --font-size: 15px;
 }
-.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input {
-  font-size: 13px;
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input-element {
   line-height: 19px;
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-search-bar-input-without-icon {
@@ -47,6 +48,9 @@
 .adm-search-bar .adm-search-bar-cancel-button.adm-button {
   padding: 3px 12px;
 }
+.adm-search-bar-active .adm-input.adm-input {
+  --placeholder-color: var(--adm-color-light);
+}
 .adm-search-bar-active .adm-search-bar-input-box {
   border-color: var(--adm-color-primary);
   background: var(--adm-color-white);

package/es/components/selector/selector.css

@@ -5,6 +5,9 @@
   font-size: 15px;
   line-height: 1.4;
 }
+.adm-selector .adm-space.adm-space {
+  --gap: 12px;
+}
 .adm-selector-item {
   padding: 8px 16px;
   position: relative;

package/es/components/side-bar/corner.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare const Corner: React.NamedExoticComponent<NativeProps<never>>;

package/es/components/side-bar/corner.js

@@ -0,0 +1,14 @@
+import React, { memo } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+export const Corner = memo(props => withNativeProps(props, React.createElement("svg", {
+  viewBox: '0 0 30 30'
+}, React.createElement("g", {
+  stroke: 'none',
+  strokeWidth: '1',
+  fill: 'none',
+  fillRule: 'evenodd'
+}, React.createElement("path", {
+  d: 'M30,0 C13.4314575,3.04359188e-15 -2.02906125e-15,13.4314575 0,30 L0,30 L0,0 Z',
+  fill: 'var(--adm-color-white)',
+  transform: 'translate(15.000000, 15.000000) scale(-1, -1) translate(-15.000000, -15.000000) '
+})))));

package/es/components/side-bar/side-bar.css

@@ -6,10 +6,22 @@
   width: var(--width);
   height: var(--height);
   box-sizing: border-box;
-  font-size: 15px;
+  font-size: 13px;
   overflow-y: auto;
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
+  background-color: var(--background-color);
+  display: flex;
+  flex-direction: column;
+}
+.adm-side-bar-items {
+  flex: none;
+  overflow: hidden;
+}
+.adm-side-bar-extra-space {
+  flex: auto;
+  overflow: hidden;
+  position: relative;
 }
 .adm-side-bar-item {
   display: flex;
@@ -19,6 +31,7 @@
   position: relative;
   cursor: pointer;
   background-color: var(--background-color);
+  overflow: visible;
 }
 .adm-side-bar-item-highlight {
   position: absolute;
@@ -34,27 +47,21 @@
   background-color: var(--adm-color-white);
   position: relative;
 }
-.adm-side-bar-item-active + .adm-side-bar-item {
-  border-top-right-radius: var(--item-border-radius);
-}
-.adm-side-bar-item-active::before {
-  content: '';
+.adm-side-bar-item-corner {
   width: var(--item-border-radius);
   height: var(--item-border-radius);
-  background-color: var(--adm-color-white);
   position: absolute;
-  top: calc(var(--item-border-radius) * -1);
+  z-index: 100;
   right: 0;
+  user-select: none;
+  pointer-events: none;
 }
-.adm-side-bar-item-active::after {
-  content: '';
-  width: var(--item-border-radius);
-  height: var(--item-border-radius);
-  background-color: var(--background-color);
-  border-bottom-right-radius: var(--item-border-radius);
-  position: absolute;
-  top: calc(var(--item-border-radius) * -1);
-  right: 0;
+.adm-side-bar-item-corner-top {
+  top: 0;
+  transform: rotate(-90deg);
+}
+.adm-side-bar-item-corner-bottom {
+  bottom: 0;
 }
 .adm-side-bar-item-disabled {
   cursor: not-allowed;
@@ -62,3 +69,6 @@
 .adm-side-bar-item-disabled .adm-side-bar-item-title {
   opacity: 0.4;
 }
+.adm-side-bar-badge.adm-badge {
+  --right: -4px;
+}

package/es/components/side-bar/side-bar.js

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import Badge from '../badge';
 import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
+import { Corner } from './corner';
 const classPrefix = `adm-side-bar`;
 export const SideBarItem = () => {
   return null;
@@ -33,10 +34,16 @@ export const SideBar = props => {
       (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
     }
   });
+  const lastItem = items[items.length - 1];
+  const isLastItemActive = lastItem && lastItem.key === activeKey;
   return withNativeProps(props, React.createElement("div", {
-    className: classNames(classPrefix)
-  }, items.map(item => {
+    className: classPrefix
+  }, React.createElement("div", {
+    className: `${classPrefix}-items`
+  }, items.map((item, index) => {
     const active = item.key === activeKey;
+    const isActiveNextSibling = items[index - 1] && items[index - 1].key === activeKey;
+    const isActivePreviousSibling = items[index + 1] && items[index + 1].key === activeKey;
     return withNativeProps(item.props, React.createElement("div", {
       key: item.key,
       onClick: () => {
@@ -50,12 +57,21 @@ export const SideBar = props => {
         [`${classPrefix}-item-active`]: active,
         [`${classPrefix}-item-disabled`]: item.props.disabled
       })
-    }, React.createElement(Badge, {
-      content: item.props.badge
+    }, React.createElement(React.Fragment, null, isActiveNextSibling && React.createElement(Corner, {
+      className: `${classPrefix}-item-corner ${classPrefix}-item-corner-top`
+    }), isActivePreviousSibling && React.createElement(Corner, {
+      className: `${classPrefix}-item-corner ${classPrefix}-item-corner-bottom`
+    })), React.createElement(Badge, {
+      content: item.props.badge,
+      className: `${classPrefix}-badge`
     }, React.createElement("div", {
       className: `${classPrefix}-item-title`
     }, active && React.createElement("div", {
       className: `${classPrefix}-item-highlight`
     }), item.props.title))));
-  })));
+  })), React.createElement("div", {
+    className: classNames(`${classPrefix}-extra-space`, isLastItemActive && `${classPrefix}-item-active-next-sibling`)
+  }, isLastItemActive && React.createElement(Corner, {
+    className: `${classPrefix}-item-corner ${classPrefix}-item-corner-top`
+  }))));
 };

package/es/components/spin-loading/spin-loading.css

@@ -1,9 +1,8 @@
 .adm-spin-loading {
   --color: var(--adm-color-weak);
   --size: 32px;
-  --track-width: calc(var(--size) / 16);
   --pi: 3.14159265;
-  --radius: calc(var(--size) / 2 - var(--track-width) / 2);
+  --radius: 15;
   --circumference: calc(var(--radius) * var(--pi) * 2);
   width: var(--size);
   height: var(--size);
@@ -15,13 +14,6 @@
 }
 .adm-spin-loading-svg > .adm-spin-loading-fill {
   stroke: var(--color);
-  stroke-width: var(--track-width);
-  stroke-dasharray: var(--circumference);
-  stroke-linecap: square;
-  animation: adm-spin-loading-fill 1s infinite alternate-reverse linear;
-  r: var(--radius);
-  cx: calc(var(--size) / 2);
-  cy: calc(var(--size) / 2);
 }
 @keyframes adm-spin-loading-rotate {
   from {
@@ -31,11 +23,3 @@
     transform: rotate(360deg);
   }
 }
-@keyframes adm-spin-loading-fill {
-  from {
-    stroke-dashoffset: calc(var(--circumference) * (1 - 0.4));
-  }
-  to {
-    stroke-dashoffset: calc(var(--circumference) * (1 - 0.8));
-  }
-}

package/es/components/spin-loading/spin-loading.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type SpinLoadingProps = {
     color?: 'default' | 'primary' | 'white' | (string & {});
-} & NativeProps<'--color' | '--size' | '--track-width'>;
+} & NativeProps<'--color' | '--size'>;
 export declare const SpinLoading: React.NamedExoticComponent<SpinLoadingProps>;

package/es/components/spin-loading/spin-loading.js

@@ -1,6 +1,7 @@
 import React, { memo } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
+import { useSpring, animated } from '@react-spring/web';
 const classPrefix = 'adm-spin-loading';
 const colorRecord = {
   default: 'var(--adm-color-weak)',
@@ -10,19 +11,45 @@ const colorRecord = {
 const defaultProps = {
   color: 'default'
 };
+const circumference = 15 * 3.14159265358979 * 2;
 export const SpinLoading = memo(p => {
   var _a;
 
   const props = mergeProps(defaultProps, p);
-  return withNativeProps(props, React.createElement("div", {
+  const {
+    percent
+  } = useSpring({
+    loop: {
+      reverse: true
+    },
+    from: {
+      percent: 30
+    },
+    to: {
+      percent: 80
+    },
+    config: {
+      duration: 1200
+    }
+  });
+  return withNativeProps(props, React.createElement(animated.div, {
     className: classPrefix,
     style: {
-      '--color': (_a = colorRecord[props.color]) !== null && _a !== void 0 ? _a : props.color
+      '--color': (_a = colorRecord[props.color]) !== null && _a !== void 0 ? _a : props.color,
+      '--percent': percent
     }
   }, React.createElement("svg", {
-    className: `${classPrefix}-svg`
-  }, React.createElement("circle", {
+    className: `${classPrefix}-svg`,
+    viewBox: '0 0 32 32'
+  }, React.createElement(animated.circle, {
     className: `${classPrefix}-fill`,
-    fill: 'transparent'
+    fill: 'transparent',
+    strokeWidth: '2',
+    strokeDasharray: circumference,
+    strokeDashoffset: percent,
+    strokeLinecap: 'square',
+    r: 15,
+    cx: 16,
+    cy: 16
   }))));
 });

package/es/components/stepper/stepper.css

@@ -31,12 +31,10 @@
 }
 .adm-stepper .adm-stepper-input {
   height: var(--height);
-  background-color: var(--input-background-color);
-}
-.adm-stepper .adm-stepper-input > input {
-  text-align: center;
-  font-size: var(--input-font-size);
-  color: var(--input-font-color);
+  --background-color: var(--input-background-color);
+  --font-size: var(--input-font-size);
+  --color: var(--input-font-color);
+  --text-align: center;
 }
 .adm-stepper-minus,
 .adm-stepper-plus {