antd-mobile 5.0.0-rc.25 → 5.0.0-rc.26

package/cjs/utils/use-ref-state.js

@@ -10,7 +10,7 @@ var _react = require("react");
 function useRefState(initialState) {
   const [state, setState] = (0, _react.useState)(initialState);
   const ref = (0, _react.useRef)(state);
-  (0, _react.useLayoutEffect)(() => {
+  (0, _react.useEffect)(() => {
     ref.current = state;
   }, [state]);
   return [state, setState, ref];

package/cjs/utils/use-resize-effect.js

@@ -5,13 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useResizeEffect = useResizeEffect;
 
-var _react = require("react");
-
 var _ahooks = require("ahooks");
 
 function useResizeEffect(effect, targetRef) {
   const fn = (0, _ahooks.useMemoizedFn)(effect);
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     const target = targetRef.current;
     if (!target) return;
 

package/cjs/utils/use-tab-list-scroll.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTabListScroll = void 0;
 
-var _react = require("react");
-
 var _web = require("@react-spring/web");
 
 var _useMutationEffect = require("./use-mutation-effect");
@@ -49,7 +47,7 @@ const useTabListScroll = (targetRef, activeIndex) => {
     });
   }
 
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     animate(true);
   }, []);
   (0, _ahooks.useUpdateLayoutEffect)(() => {

package/es/components/button/button.css

@@ -12,9 +12,9 @@
   display: inline-block;
   box-sizing: border-box;
   height: auto;
-  padding: 8px 12px;
+  padding: 7px 12px;
   margin: 0;
-  font-size: 15px;
+  font-size: 17px;
   line-height: 1.4;
   text-align: center;
   border: var(--border-width) var(--border-style) var(--border-color);

package/es/components/calendar/calendar.js

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import dayjs from 'dayjs';
 import classNames from 'classnames';
@@ -7,6 +7,7 @@ import { ArrowLeft } from './arrow-left';
 import { ArrowLeftDouble } from './arrow-left-double';
 import { useConfig } from '../config-provider';
 import isoWeek from 'dayjs/plugin/isoWeek';
+import { useIsomorphicLayoutEffect } from 'ahooks';
 dayjs.extend(isoWeek);
 const classPrefix = 'adm-calendar';
 const defaultProps = {
@@ -65,7 +66,7 @@ export const Calendar = p => {
   }, [props.selectionMode, props.value, props.defaultValue]);
   const [begin, setBegin] = useState(null);
   const [end, setEnd] = useState(null);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     setBegin(dateRange[0] ? dayjs(dateRange[0]) : null);
     setEnd(dateRange[1] ? dayjs(dateRange[1]) : null);
   }, [dateRange[0], dateRange[1]]);

package/es/components/ellipsis/ellipsis.js

@@ -1,7 +1,8 @@
-import React, { useLayoutEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
 import { useResizeEffect } from '../../utils/use-resize-effect';
+import { useIsomorphicLayoutEffect } from 'ahooks';
 const classPrefix = `adm-ellipsis`;
 const defaultProps = {
   direction: 'end',
@@ -113,7 +114,7 @@ export const Ellipsis = p => {
   }
 
   useResizeEffect(calcEllipsised, rootRef);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     calcEllipsised();
   }, [props.content, props.direction, props.rows, props.expandText, props.collapseText]);
   const expandActionElement = exceeded && props.expandText ? React.createElement("a", {

package/es/components/floating-panel/floating-panel.d.ts

@@ -1,17 +1,19 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
-export declare type FloatingPanelProps = {
-    anchors: number[];
-    children: ReactNode;
-    onHeightChange?: (height: number, animating: boolean) => void;
-} & NativeProps<'--border-radius' | '--z-index'>;
 export declare type FloatingPanelRef = {
     setHeight: (height: number, options?: {
         immediate?: boolean;
     }) => void;
 };
+export declare type FloatingPanelProps = {
+    anchors: number[];
+    children: ReactNode;
+    onHeightChange?: (height: number, animating: boolean) => void;
+    handleDraggingOfContent?: boolean;
+} & NativeProps<'--border-radius' | '--z-index'>;
 export declare const FloatingPanel: React.ForwardRefExoticComponent<{
     anchors: number[];
     children: ReactNode;
     onHeightChange?: ((height: number, animating: boolean) => void) | undefined;
+    handleDraggingOfContent?: boolean | undefined;
 } & NativeProps<"--z-index" | "--border-radius"> & React.RefAttributes<FloatingPanelRef>>;

package/es/components/floating-panel/floating-panel.js

@@ -4,9 +4,15 @@ import { useDrag } from '@use-gesture/react';
 import { useSpring, animated } from '@react-spring/web';
 import { supportsPassive } from '../../utils/supports-passive';
 import { nearest } from '../../utils/nearest';
-export const FloatingPanel = forwardRef((props, ref) => {
+import { mergeProps } from '../../utils/with-default-props';
+import { useLockScroll } from '../../utils/use-lock-scroll';
+const defaultProps = {
+  handleDraggingOfContent: true
+};
+export const FloatingPanel = forwardRef((p, ref) => {
   var _a;
 
+  const props = mergeProps(defaultProps, p);
   const {
     anchors
   } = props;
@@ -44,6 +50,7 @@ export const FloatingPanel = forwardRef((props, ref) => {
       if (header === target || (header === null || header === void 0 ? void 0 : header.contains(target))) {
         pullingRef.current = true;
       } else {
+        if (!props.handleDraggingOfContent) return;
         const reachedTop = y.goal <= bounds.top;
         const content = contentRef.current;
         if (!content) return;
@@ -101,6 +108,7 @@ export const FloatingPanel = forwardRef((props, ref) => {
       });
     }
   }), [api]);
+  useLockScroll(elementRef, true);
   return withNativeProps(props, React.createElement(animated.div, {
     ref: elementRef,
     className: 'adm-floating-panel',

package/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'> & Pick<ListItemProps, 'style' | 'onClick' | 'extra' | 'arrow'> & {
+export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePropName' | 'name' | 'rules' | 'messageVariables' | 'trigger' | 'validateTrigger' | 'shouldUpdate' | 'initialValue'> & Pick<ListItemProps, 'style' | 'onClick' | 'extra' | 'arrow'> & {
     label?: React.ReactNode;
     help?: React.ReactNode;
     hasFeedback?: boolean;

package/es/components/image-uploader/image-uploader.js

@@ -1,11 +1,11 @@
 import { __awaiter } from "tslib";
-import React, { useLayoutEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { AddOutline } from 'antd-mobile-icons';
 import { mergeProps } from '../../utils/with-default-props';
 import ImageViewer from '../image-viewer';
 import PreviewItem from './preview-item';
 import { usePropsValue } from '../../utils/use-props-value';
-import { useMemoizedFn, useUnmount } from 'ahooks';
+import { useIsomorphicLayoutEffect, useMemoizedFn, useUnmount } from 'ahooks';
 import Space from '../space';
 import { withNativeProps } from '../../utils/native-props';
 const classPrefix = `adm-image-uploader`;
@@ -26,7 +26,7 @@ export const ImageUploader = p => {
     setValue(updater(value));
   });
   const [tasks, setTasks] = useState([]);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     setTasks(prev => prev.filter(task => {
       if (task.url === undefined) return true;
       return !value.some(fileItem => fileItem.url === task.url);

package/es/components/image-viewer/image-viewer.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { mergeProps } from '../../utils/with-default-props';
 import { renderToContainer } from '../../utils/render-to-container';
 import Mask from '../mask';
@@ -35,6 +35,16 @@ const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
 });
 export const MultiImageViewer = forwardRef((p, ref) => {
   const props = mergeProps(multiDefaultProps, p);
+  const [defaultIndex, setDefaultIndex] = useState(props.defaultIndex);
+  const slidesRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    swipeTo: (index, immediate) => {
+      var _a;
+
+      setDefaultIndex(index);
+      (_a = slidesRef.current) === null || _a === void 0 ? void 0 : _a.swipeTo(index, immediate);
+    }
+  }));
   const node = React.createElement(Mask, {
     visible: props.visible,
     disableBodyScroll: false,
@@ -43,8 +53,8 @@ export const MultiImageViewer = forwardRef((p, ref) => {
   }, React.createElement("div", {
     className: `${classPrefix}-content`
   }, props.images && React.createElement(Slides, {
-    ref: ref,
-    defaultIndex: props.defaultIndex,
+    ref: slidesRef,
+    defaultIndex: defaultIndex,
     onIndexChange: props.onIndexChange,
     images: props.images,
     onTap: () => {

package/es/components/image-viewer/slide.js

@@ -109,6 +109,7 @@ export const Slide = props => {
     }
   }, React.createElement("img", {
     src: props.image,
-    draggable: false
+    draggable: false,
+    alt: props.image
   }))));
 };

package/es/components/image-viewer/slides.d.ts

@@ -7,6 +7,6 @@ export declare type SlidesType = {
     onIndexChange?: (index: number) => void;
 };
 export declare type SlidesRef = {
-    swipeTo: (index: number, immediate: boolean) => void;
+    swipeTo: (index: number, immediate?: boolean) => void;
 };
 export declare const Slides: React.ForwardRefExoticComponent<SlidesType & React.RefAttributes<SlidesRef>>;

package/es/components/input/input.js

@@ -1,9 +1,10 @@
-import React, { useState, forwardRef, useImperativeHandle, useRef, useLayoutEffect } from 'react';
+import React, { useState, forwardRef, useImperativeHandle, useRef } from 'react';
 import { usePropsValue } from '../../utils/use-props-value';
 import { CloseCircleFill } from 'antd-mobile-icons';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import classNames from 'classnames';
+import { useIsomorphicLayoutEffect } from 'ahooks';
 const classPrefix = `adm-input`;
 const defaultProps = {
   defaultValue: ''
@@ -39,7 +40,7 @@ export const Input = forwardRef((p, ref) => {
     (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
   };
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     var _a;
 
     if (!props.enterKeyHint) return;
@@ -89,7 +90,7 @@ export const Input = forwardRef((p, ref) => {
     onKeyUp: props.onKeyUp,
     onCompositionStart: props.onCompositionStart,
     onCompositionEnd: props.onCompositionEnd
-  }), props.clearable && !!value && React.createElement("div", {
+  }), props.clearable && !!value && !props.readOnly && React.createElement("div", {
     className: `${classPrefix}-clear`,
     onMouseDown: e => {
       e.preventDefault();

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

@@ -1,10 +1,11 @@
-import React, { memo, useLayoutEffect, useRef } from 'react';
+import React, { memo, useRef } from 'react';
 import { useSpring, animated } from '@react-spring/web';
 import { useDrag } from '@use-gesture/react';
 import { convertPx } from '../../utils/convert-px';
 import { rubberbandIfOutOfBounds } from '../../utils/rubberband';
 import { bound } from '../../utils/bound';
 import isEqual from 'lodash/isEqual';
+import { useIsomorphicLayoutEffect } from 'ahooks';
 const classPrefix = `adm-picker-view`;
 export const Wheel = memo(props => {
   const itemHeight = convertPx(34);
@@ -29,7 +30,7 @@ export const Wheel = memo(props => {
     }
   }));
   const draggingRef = useRef(false);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (draggingRef.current) return;
     if (!value) return;
     const targetIndex = column.findIndex(item => item.value === value);
@@ -40,7 +41,7 @@ export const Wheel = memo(props => {
       immediate: y.goal !== finalPosition
     });
   }, [value, column]);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (column.length === 0) {
       if (value !== null) {
         onSelect(null);

package/es/components/selector/selector.css

@@ -1,6 +1,12 @@
 .adm-selector {
-  --color: var(--adm-color-text);
+  --color: #f5f5f5;
   --checked-color: #e7f1ff;
+  --text-color: var(--adm-color-text);
+  --checked-text-color: var(--adm-color-primary);
+  --border: none;
+  --checked-border: none;
+  --border-radius: 2px;
+  --padding: 8px 16px;
   overflow: hidden;
   font-size: 15px;
   line-height: 1.4;
@@ -9,11 +15,12 @@
   --gap: 12px;
 }
 .adm-selector-item {
-  padding: 8px 16px;
+  padding: var(--padding);
   position: relative;
-  background-color: #f5f5f5;
-  border-radius: 2px;
-  color: #333;
+  background-color: var(--color);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  color: var(--text-color);
   opacity: 1;
   cursor: pointer;
   display: inline-block;
@@ -27,8 +34,9 @@
 }
 .adm-selector-item-active,
 .adm-selector-item-multiple-active {
-  color: var(--adm-color-primary);
+  color: var(--checked-text-color);
   background-color: var(--checked-color);
+  border: var(--checked-border);
 }
 .adm-selector-item .adm-selector-check-mark-wrapper {
   position: absolute;

package/es/components/selector/selector.d.ts

@@ -16,5 +16,6 @@ export declare type SelectorProps<V> = {
     onChange?: (v: V[], extend: {
         items: SelectorOption<V>[];
     }) => void;
-} & NativeProps<'--checked-color'>;
+    showCheckMark?: boolean;
+} & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding'>;
 export declare const Selector: <V extends string | number>(p: SelectorProps<V>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;

package/es/components/selector/selector.js

@@ -10,7 +10,8 @@ import { CheckMark } from './check-mark';
 const classPrefix = `adm-selector`;
 const defaultProps = {
   multiple: false,
-  defaultValue: []
+  defaultValue: [],
+  showCheckMark: true
 };
 export const Selector = p => {
   const props = mergeProps(defaultProps, p);
@@ -55,7 +56,7 @@ export const Selector = p => {
       }
     }, option.label, option.description && React.createElement("div", {
       className: `${classPrefix}-item-description`
-    }, option.description), active && React.createElement("div", {
+    }, option.description), active && props.showCheckMark && React.createElement("div", {
       className: `${classPrefix}-check-mark-wrapper`
     }, React.createElement(CheckMark, null)));
   });

package/es/components/swiper/swiper.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import classNames from 'classnames';
@@ -10,7 +10,7 @@ import PageIndicator from '../page-indicator';
 import { staged } from 'staged-components';
 import { useRefState } from '../../utils/use-ref-state';
 import { bound } from '../../utils/bound';
-import { useUpdateEffect } from 'ahooks';
+import { useIsomorphicLayoutEffect, useUpdateEffect } from 'ahooks';
 const defaultProps = {
   defaultIndex: 0,
   allowTouchMove: true,
@@ -184,7 +184,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
       swipeNext,
       swipePrev
     }));
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       const maxIndex = validChildren.length - 1;
 
       if (current > maxIndex) {

package/es/components/tabs/tabs.js

@@ -1,10 +1,10 @@
-import React, { useRef, useLayoutEffect } from 'react';
+import React, { useRef } from 'react';
 import classNames from 'classnames';
 import { useSpring, animated } from '@react-spring/web';
 import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { bound } from '../../utils/bound';
-import { useUpdateLayoutEffect, useThrottleFn } from 'ahooks';
+import { useUpdateLayoutEffect, useThrottleFn, useIsomorphicLayoutEffect } from 'ahooks';
 import { useMutationEffect } from '../../utils/use-mutation-effect';
 import { useResizeEffect } from '../../utils/use-resize-effect';
 import { mergeProps } from '../../utils/with-default-props';
@@ -134,7 +134,7 @@ export const Tabs = p => {
     });
   }
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     animate(true);
   }, []);
   useUpdateLayoutEffect(() => {
@@ -168,7 +168,7 @@ export const Tabs = p => {
     trailing: true,
     leading: true
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     updateMask(true);
   }, []);
   return withNativeProps(props, React.createElement("div", {

package/es/components/virtual-input/virtual-input.js

@@ -1,9 +1,10 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import classNames from 'classnames';
 import { CloseCircleFill } from 'antd-mobile-icons';
+import { useIsomorphicLayoutEffect } from 'ahooks';
 const classPrefix = 'adm-virtual-input';
 const defaultProps = {
   defaultValue: ''
@@ -28,7 +29,7 @@ export const VirtualInput = forwardRef((p, ref) => {
     content.scrollLeft = content.clientWidth;
   }
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     scrollToEnd();
   }, [value]);
   useEffect(() => {

package/es/utils/get-scroll-parent.js

@@ -4,7 +4,7 @@ const defaultRoot = canUseDom ? window : undefined;
 
 function isElement(node) {
   const ELEMENT_NODE_TYPE = 1;
-  return node.tagName !== 'HTML' && node.tagName !== 'BODY' && node.nodeType === ELEMENT_NODE_TYPE;
+  return node.nodeType === ELEMENT_NODE_TYPE;
 } // https://github.com/youzan/vant/issues/3823
 
 

package/es/utils/use-ref-state.js

@@ -1,8 +1,8 @@
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 export function useRefState(initialState) {
   const [state, setState] = useState(initialState);
   const ref = useRef(state);
-  useLayoutEffect(() => {
+  useEffect(() => {
     ref.current = state;
   }, [state]);
   return [state, setState, ref];

package/es/utils/use-resize-effect.js

@@ -1,8 +1,7 @@
-import { useLayoutEffect } from 'react';
-import { useMemoizedFn } from 'ahooks';
+import { useIsomorphicLayoutEffect, useMemoizedFn } from 'ahooks';
 export function useResizeEffect(effect, targetRef) {
   const fn = useMemoizedFn(effect);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const target = targetRef.current;
     if (!target) return;
 

package/es/utils/use-tab-list-scroll.js

@@ -1,8 +1,7 @@
-import { useLayoutEffect } from 'react';
 import { useSpring } from '@react-spring/web';
 import { useMutationEffect } from './use-mutation-effect';
 import { bound } from './bound';
-import { useUpdateLayoutEffect } from 'ahooks';
+import { useIsomorphicLayoutEffect, useUpdateLayoutEffect } from 'ahooks';
 export const useTabListScroll = (targetRef, activeIndex) => {
   const [{
     scrollLeft
@@ -37,7 +36,7 @@ export const useTabListScroll = (targetRef, activeIndex) => {
     });
   }
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     animate(true);
   }, []);
   useUpdateLayoutEffect(() => {

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "antd-mobile",
-  "version": "5.0.0-rc.25",
+  "version": "5.0.0-rc.26",
   "dependencies": {
     "@react-spring/web": "^9.4.2",
-    "@types/resize-observer-browser": "^0.1.6",
-    "@use-gesture/react": "^10.2.4",
+    "@types/resize-observer-browser": "^0.1.7",
+    "@use-gesture/react": "^10.2.5",
     "ahooks": "^3.1.9",
     "antd-mobile-icons": "^0.2.2",
     "antd-mobile-v5-count": "^1.0.1",