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

package/2x/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/2x/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/2x/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: 4px;
+  --padding: 16px 32px;
   overflow: hidden;
   font-size: 30px;
   line-height: 1.4;
@@ -11,11 +17,12 @@
 }
 
 .adm-selector-item {
-  padding: 16px 32px;
+  padding: var(--padding);
   position: relative;
-  background-color: #f5f5f5;
-  border-radius: 4px;
-  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;
@@ -31,8 +38,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 {

package/2x/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/2x/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/2x/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/2x/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/2x/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/2x/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/2x/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/2x/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/2x/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/2x/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",

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

@@ -23,6 +23,8 @@ var _configProvider = require("../config-provider");
 
 var _isoWeek = _interopRequireDefault(require("dayjs/plugin/isoWeek"));
 
+var _ahooks = require("ahooks");
+
 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); }
@@ -91,7 +93,7 @@ const Calendar = p => {
   }, [props.selectionMode, props.value, props.defaultValue]);
   const [begin, setBegin] = (0, _react.useState)(null);
   const [end, setEnd] = (0, _react.useState)(null);
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     setBegin(dateRange[0] ? (0, _dayjs.default)(dateRange[0]) : null);
     setEnd(dateRange[1] ? (0, _dayjs.default)(dateRange[1]) : null);
   }, [dateRange[0], dateRange[1]]);

package/cjs/components/ellipsis/ellipsis.js

@@ -13,6 +13,8 @@ var _nativeProps = require("../../utils/native-props");
 
 var _useResizeEffect = require("../../utils/use-resize-effect");
 
+var _ahooks = require("ahooks");
+
 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; }
@@ -129,7 +131,7 @@ const Ellipsis = p => {
   }
 
   (0, _useResizeEffect.useResizeEffect)(calcEllipsised, rootRef);
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     calcEllipsised();
   }, [props.content, props.direction, props.rows, props.expandText, props.collapseText]);
   const expandActionElement = exceeded && props.expandText ? _react.default.createElement("a", {

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

@@ -17,13 +17,21 @@ var _supportsPassive = require("../../utils/supports-passive");
 
 var _nearest = require("../../utils/nearest");
 
+var _withDefaultProps = require("../../utils/with-default-props");
+
+var _useLockScroll = require("../../utils/use-lock-scroll");
+
 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 FloatingPanel = (0, _react.forwardRef)((props, ref) => {
+const defaultProps = {
+  handleDraggingOfContent: true
+};
+const FloatingPanel = (0, _react.forwardRef)((p, ref) => {
   var _a;
 
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const {
     anchors
   } = props;
@@ -61,6 +69,7 @@ const FloatingPanel = (0, _react.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;
@@ -118,6 +127,7 @@ const FloatingPanel = (0, _react.forwardRef)((props, ref) => {
       });
     }
   }), [api]);
+  (0, _useLockScroll.useLockScroll)(elementRef, true);
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement(_web.animated.div, {
     ref: elementRef,
     className: 'adm-floating-panel',

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

@@ -50,7 +50,7 @@ const ImageUploader = p => {
     setValue(updater(value));
   });
   const [tasks, setTasks] = (0, _react.useState)([]);
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     setTasks(prev => prev.filter(task => {
       if (task.url === undefined) return true;
       return !value.some(fileItem => fileItem.url === task.url);

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

@@ -59,6 +59,16 @@ const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
 });
 const MultiImageViewer = (0, _react.forwardRef)((p, ref) => {
   const props = (0, _withDefaultProps.mergeProps)(multiDefaultProps, p);
+  const [defaultIndex, setDefaultIndex] = (0, _react.useState)(props.defaultIndex);
+  const slidesRef = (0, _react.useRef)(null);
+  (0, _react.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.default.createElement(_mask.default, {
     visible: props.visible,
@@ -68,8 +78,8 @@ const MultiImageViewer = (0, _react.forwardRef)((p, ref) => {
   }, _react.default.createElement("div", {
     className: `${classPrefix}-content`
   }, props.images && _react.default.createElement(_slides.Slides, {
-    ref: ref,
-    defaultIndex: props.defaultIndex,
+    ref: slidesRef,
+    defaultIndex: defaultIndex,
     onIndexChange: props.onIndexChange,
     images: props.images,
     onTap: () => {

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

@@ -124,7 +124,8 @@ const Slide = props => {
     }
   }, _react.default.createElement("img", {
     src: props.image,
-    draggable: false
+    draggable: false,
+    alt: props.image
   }))));
 };
 

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

@@ -17,6 +17,8 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _ahooks = require("ahooks");
+
 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); }
@@ -58,7 +60,7 @@ const Input = (0, _react.forwardRef)((p, ref) => {
     (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
   };
 
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     var _a;
 
     if (!props.enterKeyHint) return;
@@ -108,7 +110,7 @@ const Input = (0, _react.forwardRef)((p, ref) => {
     onKeyUp: props.onKeyUp,
     onCompositionStart: props.onCompositionStart,
     onCompositionEnd: props.onCompositionEnd
-  }), props.clearable && !!value && _react.default.createElement("div", {
+  }), props.clearable && !!value && !props.readOnly && _react.default.createElement("div", {
     className: `${classPrefix}-clear`,
     onMouseDown: e => {
       e.preventDefault();

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

@@ -19,6 +19,8 @@ var _bound = require("../../utils/bound");
 
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 
+var _ahooks = require("ahooks");
+
 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); }
@@ -49,7 +51,7 @@ const Wheel = (0, _react.memo)(props => {
     }
   }));
   const draggingRef = (0, _react.useRef)(false);
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     if (draggingRef.current) return;
     if (!value) return;
     const targetIndex = column.findIndex(item => item.value === value);
@@ -60,7 +62,7 @@ const Wheel = (0, _react.memo)(props => {
       immediate: y.goal !== finalPosition
     });
   }, [value, column]);
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     if (column.length === 0) {
       if (value !== null) {
         onSelect(null);

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

@@ -28,7 +28,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const classPrefix = `adm-selector`;
 const defaultProps = {
   multiple: false,
-  defaultValue: []
+  defaultValue: [],
+  showCheckMark: true
 };
 
 const Selector = p => {
@@ -74,7 +75,7 @@ const Selector = p => {
       }
     }, option.label, option.description && _react.default.createElement("div", {
       className: `${classPrefix}-item-description`
-    }, option.description), active && _react.default.createElement("div", {
+    }, option.description), active && props.showCheckMark && _react.default.createElement("div", {
       className: `${classPrefix}-check-mark-wrapper`
     }, _react.default.createElement(_checkMark.CheckMark, null)));
   });

package/cjs/components/swiper/swiper.js

@@ -212,7 +212,7 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
       swipeNext,
       swipePrev
     }));
-    (0, _react.useLayoutEffect)(() => {
+    (0, _ahooks.useIsomorphicLayoutEffect)(() => {
       const maxIndex = validChildren.length - 1;
 
       if (current > maxIndex) {

package/cjs/components/tabs/tabs.js

@@ -163,7 +163,7 @@ const Tabs = p => {
     });
   }
 
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     animate(true);
   }, []);
   (0, _ahooks.useUpdateLayoutEffect)(() => {
@@ -197,7 +197,7 @@ const Tabs = p => {
     trailing: true,
     leading: true
   });
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     updateMask(true);
   }, []);
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {

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

@@ -17,6 +17,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _antdMobileIcons = require("antd-mobile-icons");
 
+var _ahooks = require("ahooks");
+
 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); }
@@ -47,7 +49,7 @@ const VirtualInput = (0, _react.forwardRef)((p, ref) => {
     content.scrollLeft = content.clientWidth;
   }
 
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     scrollToEnd();
   }, [value]);
   (0, _react.useEffect)(() => {

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

@@ -12,7 +12,7 @@ const defaultRoot = _canUseDom.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