antd-mobile 5.22.0 → 5.23.0

package/2x/es/components/picker-view/wheel.js

@@ -32,11 +32,12 @@ export const Wheel = memo(props => {
   }));
   const draggingRef = useRef(false);
   const rootRef = useRef(null);
+  const itemHeightMeasureRef = useRef(null);
   const itemHeight = useRef(34);
   useIsomorphicLayoutEffect(() => {
-    const root = rootRef.current;
-    if (!root) return;
-    itemHeight.current = measureCSSLength(window.getComputedStyle(root).getPropertyValue('--item-height'));
+    const itemHeightMeasure = itemHeightMeasureRef.current;
+    if (!itemHeightMeasure) return;
+    itemHeight.current = measureCSSLength(window.getComputedStyle(itemHeightMeasure).getPropertyValue('height'));
   });
   useIsomorphicLayoutEffect(() => {
     if (draggingRef.current) return;
@@ -153,7 +154,10 @@ export const Wheel = memo(props => {
 
   return React.createElement("div", {
     className: `${classPrefix}-column`
-  }, React.createElement(animated.div, {
+  }, React.createElement("div", {
+    className: `${classPrefix}-item-height-measure`,
+    ref: itemHeightMeasureRef
+  }), React.createElement(animated.div, {
     ref: rootRef,
     style: {
       translateY: y

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

@@ -1,7 +1,8 @@
 .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;
@@ -38,4 +39,8 @@
 
 .adm-rate-star-readonly {
   cursor: unset;
+}
+
+.adm-rate.adm-rate-half .adm-rate-star-half:not(.adm-rate-star-active) {
+  color: var(--inactive-color-half);
 }

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

@@ -63,7 +63,9 @@ export const Rate = p => {
     filterTaps: true
   });
   return withNativeProps(props, React.createElement("div", Object.assign({
-    className: classPrefix,
+    className: classNames(classPrefix, {
+      [`${classPrefix}-half`]: props.allowHalf
+    }),
     role: 'radiogroup',
     "aria-readonly": props.readOnly,
     ref: containerRef

package/2x/es/components/slider/slider.css

@@ -105,12 +105,26 @@
   transform: translateX(-50%);
 }
 
-.adm-slider-disabled {
+.adm-slider-disabled .adm-slider-mark,
+.adm-slider-disabled .adm-slider-thumb-icon {
   opacity: 0.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: rgba(255, 255, 255, 0.6);
+}
+
 .adm-slider-disabled .adm-slider-thumb {
   cursor: not-allowed;
+  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
 }
 
 .adm-slider-disabled .adm-slider-mark-text,

package/2x/es/components/slider/slider.d.ts

@@ -14,6 +14,7 @@ export declare type SliderProps = {
     range?: boolean;
     icon?: ReactNode;
     popover?: boolean | ((value: number) => ReactNode);
+    residentPopover?: boolean;
     onChange?: (value: SliderValue) => void;
     onAfterChange?: (value: SliderValue) => void;
 } & NativeProps<'--fill-color'>;

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

@@ -7,6 +7,7 @@ import Thumb from './thumb';
 import { mergeProps } from '../../utils/with-default-props';
 import { nearest } from '../../utils/nearest';
 import { usePropsValue } from '../../utils/use-props-value';
+import { devWarning } from '../../utils/dev-log';
 const classPrefix = `adm-slider`;
 const defaultProps = {
   min: 0,
@@ -15,7 +16,8 @@ const defaultProps = {
   ticks: false,
   range: false,
   disabled: false,
-  popover: false
+  popover: false,
+  residentPopover: false
 };
 export const Slider = p => {
   var _a;
@@ -49,8 +51,15 @@ export const Slider = p => {
     (_a = props.onAfterChange) === null || _a === void 0 ? void 0 : _a.call(props, reverseValue(value));
   }
 
+  let propsValue = props.value;
+
+  if (props.range && typeof props.value === 'number') {
+    devWarning('Slider', 'When `range` prop is enabled, the `value` prop should be an array, like: [0, 0]');
+    propsValue = [0, props.value];
+  }
+
   const [rawValue, setRawValue] = usePropsValue({
-    value: props.value,
+    value: propsValue,
     defaultValue: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : props.range ? [min, min] : min,
     onChange: props.onChange
   });
@@ -136,6 +145,7 @@ export const Slider = p => {
       trackRef: trackRef,
       icon: icon,
       popover: props.popover,
+      residentPopover: props.residentPopover,
       onDrag: (position, first, last) => {
         if (first) {
           dragLockRef.current += 1;

package/2x/es/components/slider/thumb.d.ts

@@ -9,6 +9,7 @@ declare type ThumbProps = {
     trackRef: RefObject<HTMLDivElement>;
     icon?: React.ReactNode;
     popover: boolean | ((value: number) => ReactNode);
+    residentPopover: boolean;
 } & NativeProps;
 declare const Thumb: FC<ThumbProps>;
 export default Thumb;

package/2x/es/components/slider/thumb.js

@@ -11,8 +11,9 @@ const Thumb = props => {
     min,
     max,
     disabled,
-    onDrag,
-    icon
+    icon,
+    residentPopover,
+    onDrag
   } = props;
   const prevValue = useRef(value);
   const {
@@ -67,7 +68,7 @@ const Thumb = props => {
   }), renderPopoverContent ? React.createElement(Popover, {
     content: renderPopoverContent(value),
     placement: 'top',
-    visible: dragging,
+    visible: residentPopover || dragging,
     getContainer: null,
     mode: 'dark'
   }, thumbElement) : thumbElement);

package/2x/es/components/toast/toast.css

@@ -13,8 +13,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
   width: auto;
-  min-width: 192px;
-  max-width: 400px;
+  max-width: 408px;
   max-height: 70%;
   overflow: auto;
   color: white;
@@ -29,10 +28,12 @@
 
 .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 {

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

@@ -79,5 +79,6 @@ export { default as Toast } from './components/toast';
 export { default as TreeSelect } from './components/tree-select';
 export { default as VirtualInput } from './components/virtual-input';
 export { default as WaterMark } from './components/water-mark';
+export { default as Footer } from './components/footer';
 export { createErrorBlock } from './components/error-block';
 export { reduceMotion, restoreMotion } from './utils/reduce-and-restore-motion';

package/2x/es/index.js

@@ -79,5 +79,6 @@ export { default as Toast } from './components/toast';
 export { default as TreeSelect } from './components/tree-select';
 export { default as VirtualInput } from './components/virtual-input';
 export { default as WaterMark } from './components/water-mark';
+export { default as Footer } from './components/footer';
 export { createErrorBlock } from './components/error-block';
 export { reduceMotion, restoreMotion } from './utils/reduce-and-restore-motion';

package/2x/es/locales/zh-CN.js

@@ -100,7 +100,7 @@ const zhCN = mergeLocale(base, {
     clear: '清除'
   },
   Mask: {
-    name: '遮罩层'
+    name: '背景蒙层'
   },
   Modal: {
     ok: '我知道了'

package/2x/es/utils/measure-css-length.js

@@ -3,7 +3,7 @@ import { devError } from './dev-log';
 export function measureCSSLength(raw) {
   if (raw === null || raw === undefined || raw === '') {
     if (isDev) {
-      devError('Global', 'Seems like the you will encounter a style messed problem. Please check the browser environment to make sure it supports CSS variables.');
+      devError('Global', 'Something went wrong when calculating CSS length. Please report an issue at https://github.com/ant-design/ant-design-mobile/issues/new/choose');
     }
 
     return 0;

package/2x/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.22.0",
+  "version": "5.23.0",
   "dependencies": {
     "@floating-ui/dom": "^1.0.0",
     "@react-spring/web": "^9.4.5",