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

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MultiImageViewer = exports.ImageViewer = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
@@ -19,6 +19,10 @@ var _slides = require("./slides");
 
 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; }
+
 const classPrefix = `adm-image-viewer`;
 const defaultProps = {
   maxZoom: 3,
@@ -53,8 +57,7 @@ exports.ImageViewer = ImageViewer;
 const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
   defaultIndex: 0
 });
-
-const MultiImageViewer = p => {
+const MultiImageViewer = (0, _react.forwardRef)((p, ref) => {
   const props = (0, _withDefaultProps.mergeProps)(multiDefaultProps, p);
 
   const node = _react.default.createElement(_mask.default, {
@@ -65,6 +68,7 @@ const MultiImageViewer = p => {
   }, _react.default.createElement("div", {
     className: `${classPrefix}-content`
   }, props.images && _react.default.createElement(_slides.Slides, {
+    ref: ref,
     defaultIndex: props.defaultIndex,
     onIndexChange: props.onIndexChange,
     images: props.images,
@@ -77,6 +81,5 @@ const MultiImageViewer = p => {
   })));
 
   return (0, _renderToContainer.renderToContainer)(props.getContainer, node);
-};
-
+});
 exports.MultiImageViewer = MultiImageViewer;

package/2x/cjs/components/image-viewer/index.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 import './image-viewer.less';
 import { showMultiImageViewer, showImageViewer, clearImageViewer } from './methods';
-export type { ImageViewerProps, MultiImageViewerProps } from './image-viewer';
+export type { ImageViewerProps, MultiImageViewerProps, MultiImageViewerRef, } from './image-viewer';
 export type { ImageViewerHandler } from './methods';
 declare const _default: import("react").FC<import("./image-viewer").ImageViewerProps> & {
-    Multi: import("react").FC<import("./image-viewer").MultiImageViewerProps> & {
+    Multi: import("react").ForwardRefExoticComponent<Pick<import("./image-viewer").ImageViewerProps, "visible" | "onClose" | "afterClose" | "getContainer" | "maxZoom"> & {
+        images?: string[] | undefined;
+        defaultIndex?: number | undefined;
+        onIndexChange?: ((index: number) => void) | undefined;
+    } & import("react").RefAttributes<import("./slides").SlidesRef>> & {
         show: typeof showMultiImageViewer;
     };
     show: typeof showImageViewer;

package/2x/cjs/components/image-viewer/slides.d.ts

@@ -1,8 +1,12 @@
-import { FC } from 'react';
-export declare const Slides: FC<{
+import React from 'react';
+export declare type SlidesType = {
     images: string[];
     onTap: () => void;
     maxZoom: number;
     defaultIndex: number;
     onIndexChange?: (index: number) => void;
-}>;
+};
+export declare type SlidesRef = {
+    swipeTo: (index: number, immediate: boolean) => void;
+};
+export declare const Slides: React.ForwardRefExoticComponent<SlidesType & React.RefAttributes<SlidesRef>>;

package/2x/cjs/components/image-viewer/slides.js

@@ -22,8 +22,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 classPrefix = `adm-image-viewer`;
-
-const Slides = props => {
+const Slides = (0, _react.forwardRef)((props, ref) => {
   const slideWidth = window.innerWidth + (0, _convertPx.convertPx)(16);
   const [{
     x
@@ -35,10 +34,23 @@ const Slides = props => {
     }
   }));
   const count = props.images.length;
-  const dragLockRef = (0, _react.useRef)(false);
-  const bind = (0, _react2.useDrag)(state => {
+
+  function swipeTo(index, immediate = false) {
     var _a;
 
+    const i = (0, _bound.bound)(index, 0, count - 1);
+    (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, i);
+    api.start({
+      x: i * slideWidth,
+      immediate
+    });
+  }
+
+  (0, _react.useImperativeHandle)(ref, () => ({
+    swipeTo
+  }));
+  const dragLockRef = (0, _react.useRef)(false);
+  const bind = (0, _react2.useDrag)(state => {
     if (dragLockRef.current) return;
     const [offsetX] = state.offset;
 
@@ -46,11 +58,7 @@ const Slides = props => {
       const minIndex = Math.floor(offsetX / slideWidth);
       const maxIndex = minIndex + 1;
       const velocityOffset = Math.min(state.velocity[0] * 2000, slideWidth) * state.direction[0];
-      const index = (0, _bound.bound)((0, _bound.bound)(Math.round((offsetX + velocityOffset) / slideWidth), minIndex, maxIndex), 0, count - 1);
-      (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, index);
-      api.start({
-        x: index * slideWidth
-      });
+      swipeTo((0, _bound.bound)(Math.round((offsetX + velocityOffset) / slideWidth), minIndex, maxIndex));
     } else {
       api.start({
         x: offsetX,
@@ -99,6 +107,5 @@ const Slides = props => {
     },
     dragLockRef: dragLockRef
   }))));
-};
-
+});
 exports.Slides = Slides;

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

@@ -1,18 +1,24 @@
-.adm-input-wrapper {
+.adm-input {
   --font-size: 34px;
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
-  --disabled-color: var(--adm-color-weak);
   --text-align: left;
+  --background-color: transparent;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   width: 100%;
   max-width: 100%;
   max-height: 100%;
+  background-color: var(--background-color);
 }
 
-.adm-input {
+.adm-input-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.adm-input-element {
   flex: auto;
   display: inline-block;
   box-sizing: border-box;
@@ -32,65 +38,62 @@
   text-align: var(--text-align);
 }
 
-.adm-input::placeholder {
+.adm-input-element::placeholder {
   color: var(--placeholder-color);
   font-family: inherit;
 }
 
-.adm-input:-webkit-autofill {
+.adm-input-element:-webkit-autofill {
   background-color: transparent;
 }
 
-.adm-input:disabled {
-  color: var(--disabled-color);
-  cursor: not-allowed;
-  opacity: 1;
-  -webkit-text-fill-color: var(--disabled-color);
-}
-
-.adm-input:read-only {
+.adm-input-element:read-only {
   cursor: default;
 }
 
-.adm-input:invalid {
+.adm-input-element:invalid {
   box-shadow: none;
 }
 
-.adm-input::-ms-clear {
+.adm-input-element::-ms-clear {
   display: none;
 }
 
-.adm-input::-webkit-search-cancel-button {
+.adm-input-element::-webkit-search-cancel-button {
   display: none;
 }
 
-.adm-input::-webkit-search-decoration {
+.adm-input-element::-webkit-search-decoration {
   display: none;
 }
 
-.adm-input[type='date'],
-.adm-input[type='time'],
-.adm-input[type='datetime-local'] {
+.adm-input-element[type='date'],
+.adm-input-element[type='time'],
+.adm-input-element[type='datetime-local'] {
   min-height: 1.5em;
 }
 
-.adm-input[type='search'] {
+.adm-input-element[type='search'] {
   -webkit-appearance: none;
 }
 
-.adm-input[readonly] {
+.adm-input-element[readonly] {
   pointer-events: none;
 }
 
 .adm-input-clear {
   flex: none;
   margin-left: 16px;
-  color: var(--placeholder-color);
-  padding: 6px;
+  color: var(--adm-color-light);
+  padding: 8px;
   cursor: pointer;
 }
 
+.adm-input-clear:active {
+  color: var(--adm-color-weak);
+}
+
 .adm-input-clear .antd-mobile-icon {
   display: block;
-  font-size: 28px;
+  font-size: 30px;
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 declare type NativeInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'max' | 'min' | 'autoComplete' | 'pattern' | 'inputMode' | 'type' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp'> & {
+export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'max' | 'min' | 'autoComplete' | 'pattern' | 'inputMode' | 'type' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp' | 'onCompositionStart' | 'onCompositionEnd'> & {
     value?: string;
     defaultValue?: string;
     onChange?: (val: string) => void;
@@ -13,13 +13,13 @@ export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength
     id?: string;
     onEnterPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
-} & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--disabled-color' | '--text-align'>;
+} & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--text-align'>;
 export declare type InputRef = {
     clear: () => void;
     focus: () => void;
     blur: () => void;
 };
-export declare const Input: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "pattern" | "max" | "min" | "type" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoCapitalize" | "autoCorrect" | "inputMode" | "autoComplete" | "maxLength" | "minLength"> & {
+export declare const Input: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "pattern" | "max" | "min" | "type" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoCapitalize" | "autoCorrect" | "inputMode" | "autoComplete" | "maxLength" | "minLength"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     onChange?: ((val: string) => void) | undefined;
@@ -31,5 +31,5 @@ export declare const Input: React.ForwardRefExoticComponent<Pick<React.DetailedH
     id?: string | undefined;
     onEnterPress?: ((e: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;
     enterKeyHint?: "enter" | "search" | "done" | "go" | "next" | "previous" | "send" | undefined;
-} & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--disabled-color" | "--text-align"> & React.RefAttributes<InputRef>>;
+} & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align"> & React.RefAttributes<InputRef>>;
 export {};

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

@@ -15,6 +15,10 @@ var _nativeProps = require("../../utils/native-props");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+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; }
@@ -66,10 +70,10 @@ const Input = (0, _react.forwardRef)((p, ref) => {
     };
   }, [props.enterKeyHint]);
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
-    className: `${classPrefix}-wrapper`
+    className: (0, _classnames.default)(`${classPrefix}`, props.disabled && `${classPrefix}-disabled`)
   }, _react.default.createElement("input", {
     ref: nativeInputRef,
-    className: classPrefix,
+    className: `${classPrefix}-element`,
     value: value,
     onChange: e => {
       setValue(e.target.value);
@@ -101,8 +105,10 @@ const Input = (0, _react.forwardRef)((p, ref) => {
     autoCapitalize: props.autoCapitalize,
     autoCorrect: props.autoCorrect,
     onKeyDown: handleKeydown,
-    onKeyUp: props.onKeyUp
-  }), props.clearable && !!value && hasFocus && _react.default.createElement("div", {
+    onKeyUp: props.onKeyUp,
+    onCompositionStart: props.onCompositionStart,
+    onCompositionEnd: props.onCompositionEnd
+  }), props.clearable && !!value && _react.default.createElement("div", {
     className: `${classPrefix}-clear`,
     onMouseDown: e => {
       e.preventDefault();

package/2x/cjs/components/jumbo-tabs/jumbo-tabs.css

@@ -1,4 +1,5 @@
 .adm-jumbo-tabs {
+  --gap: 16px;
   position: relative;
 }
 
@@ -14,6 +15,7 @@
   align-items: center;
   position: relative;
   overflow-x: scroll;
+  padding: 0 var(--gap);
   scrollbar-width: none;
 }
 
@@ -23,7 +25,7 @@
 
 .adm-jumbo-tabs-tab-wrapper {
   flex: auto;
-  padding: 0 24px;
+  padding: 0 calc(var(--gap) / 2);
   text-align: center;
 }
 
@@ -42,6 +44,7 @@
 
 .adm-jumbo-tabs-tab-title {
   line-height: 48px;
+  padding: 0 8px;
 }
 
 .adm-jumbo-tabs-tab-description {

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

@@ -99,11 +99,11 @@
   pointer-events: none;
 }
 
-a.adm-list-item:active {
+a.adm-list-item:active:not(.adm-list-item-disabled) {
   background-color: var(--active-background-color);
 }
 
-a.adm-list-item:active::after {
+a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   content: ' ';
   display: block;
   position: absolute;
@@ -111,8 +111,4 @@ a.adm-list-item:active::after {
   bottom: -2px;
   left: 0;
   border-bottom: var(--border-inner);
-}
-
-a.adm-list-item.adm-list-item-disabled:active {
-  background-color: unset;
 }

package/2x/cjs/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/2x/cjs/components/modal/modal.css

@@ -22,10 +22,12 @@
 .adm-modal-main {
   width: 100%;
   max-height: 70vh;
+  box-sizing: border-box;
   font-size: 28px;
   background-color: white;
   border-radius: 16px;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
 }
@@ -40,14 +42,12 @@
 
 .adm-modal-main .adm-modal-body {
   padding: 40px 24px 24px;
+  display: flex;
+  flex-direction: column;
 }
 
-.adm-modal-main .adm-modal-body .adm-modal-close {
-  position: absolute;
-  right: 24px;
-  top: 24px;
-  color: var(--adm-color-weak);
-  padding: 4px;
+.adm-modal-main .adm-modal-body > * + * {
+  margin-top: 16px;
 }
 
 .adm-modal-main .adm-modal-body-header-wrapper {
@@ -63,39 +63,44 @@
 }
 
 .adm-modal-main .adm-modal-body-content {
-  max-height: 70vh;
-  overflow-x: hidden;
-  overflow-y: auto;
   font-size: 30px;
   line-height: 1.4;
   color: #333;
 }
 
-.adm-modal-main .adm-modal-footer {
+.adm-modal-main .adm-modal-close {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  color: var(--adm-color-weak);
+  padding: 8px;
+  font-size: 36px;
+}
+
+.adm-modal-footer {
   user-select: none;
   padding: 16px 24px 24px;
 }
 
-.adm-modal-main .adm-modal-footer .adm-modal-button {
-  font-size: 36px;
-  line-height: 50px;
-  border-right: solid 1px var(--adm-border-color);
+.adm-modal-footer.adm-space {
+  --gap-vertical: 40px;
 }
 
-.adm-modal-main .adm-modal-footer .adm-modal-button:last-child {
-  border-right: none;
+.adm-modal-footer .adm-modal-button {
+  font-size: 36px;
+  line-height: 50px;
 }
 
-.adm-modal-main .adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary) {
+.adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary) {
   padding-top: 0;
   padding-bottom: 0;
 }
 
-.adm-modal-main .adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary)::before {
+.adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary)::before {
   display: none;
 }
 
-.adm-modal-main .adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary):active {
+.adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary):active {
   opacity: 0.7;
 }
 

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

@@ -100,7 +100,10 @@ const Modal = p => {
     style: Object.assign({}, style),
     onClick: e => e.stopPropagation(),
     className: `${classPrefix}-main`
-  }, !!props.image && _react.default.createElement("div", {
+  }, props.showCloseButton && _react.default.createElement("a", {
+    className: (0, _classnames.default)(`${classPrefix}-close`, 'adm-plain-anchor'),
+    onClick: props.onClose
+  }, _react.default.createElement(_antdMobileIcons.CloseOutline, null)), !!props.image && _react.default.createElement("div", {
     className: `${classPrefix}-image-container`
   }, _react.default.createElement(_image.default, {
     src: props.image,
@@ -109,12 +112,6 @@ const Modal = p => {
   })), _react.default.createElement("div", {
     style: props.bodyStyle,
     className: (0, _classnames.default)(`${classPrefix}-body`, props.bodyClassName)
-  }, props.showCloseButton && _react.default.createElement("a", {
-    className: (0, _classnames.default)(`${classPrefix}-close`, 'adm-plain-anchor'),
-    onClick: props.onClose
-  }, _react.default.createElement(_antdMobileIcons.CloseOutline, null)), _react.default.createElement(_space.default, {
-    direction: 'vertical',
-    block: true
   }, !!props.header && _react.default.createElement("div", {
     className: `${classPrefix}-body-header-wrapper`
   }, _react.default.createElement("div", {
@@ -123,11 +120,10 @@ const Modal = p => {
     className: `${classPrefix}-body-title`
   }, props.title), !!props.content && _react.default.createElement("div", {
     className: `${classPrefix}-body-content`
-  }, typeof props.content === 'string' ? _react.default.createElement(_autoCenter.default, null, props.content) : props.content))), _react.default.createElement("div", {
-    className: `${classPrefix}-footer`
-  }, _react.default.createElement(_space.default, {
+  }, typeof props.content === 'string' ? _react.default.createElement(_autoCenter.default, null, props.content) : props.content)), _react.default.createElement(_space.default, {
     direction: 'vertical',
-    block: true
+    block: true,
+    className: `${classPrefix}-footer`
   }, props.actions.map((action, index) => {
     return _react.default.createElement(_modalActionButton.ModalActionButton, {
       key: action.key,
@@ -142,7 +138,7 @@ const Modal = p => {
         }
       })
     });
-  }))))))));
+  })))))));
   return (0, _renderToContainer.renderToContainer)(props.getContainer, node);
 };
 

package/2x/cjs/components/nav-bar/nav-bar.css

@@ -24,14 +24,14 @@
 .adm-nav-bar-back {
   display: flex;
   align-items: center;
-  margin-right: 24px;
+  margin-right: 32px;
   padding: 12px 0;
   cursor: pointer;
 }
 
 .adm-nav-bar-back-arrow {
-  font-size: 36px;
-  margin-right: 12px;
+  font-size: 48px;
+  margin-right: 8px;
 }
 
 .adm-nav-bar-left {

package/2x/cjs/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/2x/cjs/components/passcode-input/passcode-input.d.ts

@@ -14,7 +14,7 @@ export declare type PasscodeInputProps = {
     onFocus?: () => void;
     keyboard?: ReactElement<NumberKeyboardProps>;
     onFill?: (val: string) => void;
-} & NativeProps<'--cell-gap' | '--cell-size'>;
+} & NativeProps<'--cell-gap' | '--cell-size' | '--dot-size' | '--border-color' | '--border-radius'>;
 export declare type PasscodeInputRef = {
     focus: () => void;
     blur: () => void;
@@ -32,4 +32,4 @@ export declare const PasscodeInput: React.ForwardRefExoticComponent<{
     onFocus?: (() => void) | undefined;
     keyboard?: React.ReactElement<NumberKeyboardProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
     onFill?: ((val: string) => void) | undefined;
-} & NativeProps<"--cell-size" | "--cell-gap"> & React.RefAttributes<PasscodeInputRef>>;
+} & NativeProps<"--border-radius" | "--border-color" | "--cell-size" | "--dot-size" | "--cell-gap"> & React.RefAttributes<PasscodeInputRef>>;

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

@@ -1,10 +1,18 @@
 .adm-picker {
+  --header-button-font-size: 30px;
+  --title-font-size: 30px;
+  --item-font-size: 32px;
   width: 100%;
   height: 600px;
   overflow: hidden;
   position: relative;
   display: flex;
   flex-direction: column;
+  ---item-font-size: var(--item-font-size);
+}
+
+.adm-picker .adm-picker-view.adm-picker-view {
+  --item-font-size: var(---item-font-size);
 }
 
 .adm-picker-header {
@@ -17,14 +25,14 @@
 }
 
 .adm-picker-header-button {
-  font-size: 30px;
+  font-size: var(--header-button-font-size);
   display: inline-block;
   padding: 16px 16px;
 }
 
 .adm-picker-header-title {
   padding: 8px 8px;
-  font-size: 30px;
+  font-size: var(--title-font-size);
   color: var(--adm-color-text);
   text-align: center;
   flex: 1;

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

@@ -15,5 +15,5 @@ export declare type PickerProps = {
     confirmText?: ReactNode;
     cancelText?: ReactNode;
     children?: (items: (PickerColumnItem | null)[]) => ReactNode;
-} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps;
+} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps<'--header-button-font-size' | '--title-font-size' | '--item-font-size'>;
 export declare const Picker: React.NamedExoticComponent<PickerProps>;

package/2x/cjs/components/picker-view/picker-view.css

@@ -1,5 +1,6 @@
 .adm-picker-view {
   --height: 480px;
+  --item-font-size: 32px;
   height: var(--height);
   width: 100%;
   display: flex;
@@ -44,7 +45,7 @@
 }
 
 .adm-picker-view-column-item {
-  font-size: 32px;
+  font-size: var(--item-font-size);
   padding: 0 12px;
   height: 68px;
   display: flex;
@@ -66,6 +67,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  z-index: 0;
 }
 
 .adm-picker-view-column-accessible > * {
@@ -86,7 +88,7 @@
 
 .adm-picker-view-mask {
   position: absolute;
-  z-index: 100;
+  z-index: 10000;
   left: 0;
   top: 0;
   width: 100%;

package/2x/cjs/components/picker-view/picker-view.d.ts

@@ -14,5 +14,5 @@ export declare type PickerViewProps = {
     value?: PickerValue[];
     defaultValue?: PickerValue[];
     onChange?: (value: PickerValue[], extend: PickerValueExtend) => void;
-} & NativeProps<'--height'>;
+} & NativeProps<'--height' | '--item-font-size'>;
 export declare const PickerView: React.NamedExoticComponent<PickerViewProps>;

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

@@ -146,7 +146,7 @@ const Wheel = (0, _react.memo)(props => {
     className: `${classPrefix}-column`
   }, bind()), _react.default.createElement(_web.animated.div, {
     style: {
-      y
+      translateY: y
     },
     className: `${classPrefix}-column-wheel`,
     "aria-hidden": true