antd-mobile 5.0.0-rc.4 → 5.0.0-rc.5

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

@@ -88,14 +88,55 @@ export var Column = function Column(props) {
       touch: true
     }
   });
+  var selectedIndex = null;
+
+  function renderAccessible() {
+    console.log('selectedIndex', selectedIndex);
+
+    if (selectedIndex === null) {
+      return null;
+    }
+
+    var current = column[selectedIndex];
+    var previousIndex = selectedIndex - 1;
+    var nextIndex = selectedIndex + 1;
+    var previous = column[previousIndex];
+    var next = column[nextIndex];
+    return /*#__PURE__*/React.createElement("div", {
+      className: 'adm-picker-view-column-accessible'
+    }, /*#__PURE__*/React.createElement("div", {
+      className: 'adm-picker-view-column-accessible-current',
+      role: 'button',
+      "aria-label": current ? "\u5F53\u524D\u9009\u62E9\u7684\u662F\uFF1A" + current.label : '当前未选择'
+    }, "-"), /*#__PURE__*/React.createElement("div", null, previous && /*#__PURE__*/React.createElement("div", {
+      className: 'adm-picker-view-column-accessible-button',
+      onClick: function onClick() {
+        scrollSelect(previousIndex);
+      },
+      role: 'button',
+      "aria-label": "\u9009\u62E9\u4E0A\u4E00\u9879\uFF1A" + previous.label
+    }, "-")), /*#__PURE__*/React.createElement("div", null, next && /*#__PURE__*/React.createElement("div", {
+      className: 'adm-picker-view-column-accessible-button',
+      onClick: function onClick() {
+        scrollSelect(nextIndex);
+      },
+      role: 'button',
+      "aria-label": "\u9009\u62E9\u4E0B\u4E00\u9879\uFF1A" + next.label
+    }, "-")));
+  }
+
   return /*#__PURE__*/React.createElement("div", Object.assign({
     className: classPrefix + "-column"
   }, bind()), /*#__PURE__*/React.createElement(animated.div, {
     style: {
       y: y
     },
-    className: classPrefix + "-column-wheel"
+    className: classPrefix + "-column-wheel",
+    "aria-hidden": true
   }, column.map(function (item, index) {
+    var selected = props.value === item.value;
+    if (selected) selectedIndex = index;
+
     function handleClick() {
       draggingRef.current = false;
       scrollSelect(index);
@@ -103,10 +144,13 @@ export var Column = function Column(props) {
 
     return /*#__PURE__*/React.createElement("div", {
       key: item.value,
+      "data-selected": item.value === value,
       className: classPrefix + "-column-item",
-      onClick: handleClick
+      onClick: handleClick,
+      "aria-hidden": !selected,
+      "aria-label": selected ? 'active' : ''
     }, /*#__PURE__*/React.createElement("div", {
       className: classPrefix + "-column-item-label"
     }, item.label));
-  })));
+  })), renderAccessible());
 };

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

@@ -13,6 +13,7 @@
   user-select: none;
   touch-action: none;
   position: relative;
+  z-index: 0;
 }
 
 .adm-picker-view-column-wheel {
@@ -56,22 +57,61 @@
   white-space: nowrap;
 }
 
+.adm-picker-view-column-accessible {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  opacity: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.adm-picker-view-column-accessible > * {
+  flex: 1;
+  text-overflow: ellipsis;
+}
+
+.adm-picker-view-column-accessible-current {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.adm-picker-view-column-accessible-button {
+  width: 100%;
+  height: 100%;
+}
+
 .adm-picker-view-mask {
   position: absolute;
+  z-index: 100;
   left: 0;
+  top: 0;
   width: 100%;
-  height: calc(50% - 24px);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
   pointer-events: none;
 }
 
-.adm-picker-view-mask-top {
-  top: -10px;
+.adm-picker-view-mask-top,
+.adm-picker-view-mask-bottom {
+  flex: auto;
+}
+
+.adm-picker-view-mask-middle {
+  height: 68px;
+  box-sizing: border-box;
+  flex: none;
+  border-top: solid 2px var(--adm-border-color);
   border-bottom: solid 2px var(--adm-border-color);
+}
+
+.adm-picker-view-mask-top {
   background: linear-gradient(0deg, rgba(255, 255, 255, 0.7) 50%, #ffffff);
 }
 
 .adm-picker-view-mask-bottom {
-  bottom: -10px;
-  border-top: solid 2px var(--adm-border-color);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 50%, #ffffff);
 }

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

@@ -59,8 +59,12 @@ export var PickerView = /*#__PURE__*/memo(function (p) {
       }
     });
   }), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-mask " + classPrefix + "-mask-top"
+    className: classPrefix + "-mask"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-mask-top"
   }), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-mask " + classPrefix + "-mask-bottom"
-  })));
+    className: classPrefix + "-mask-middle"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-mask-bottom"
+  }))));
 });

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

@@ -1,8 +1,9 @@
 import './toast.less';
-import { clear, show } from './methods';
+import { clear, show, config } from './methods';
 export type { ToastShowProps } from './methods';
 declare const Toast: {
     show: typeof show;
     clear: typeof clear;
+    config: typeof config;
 };
 export default Toast;

package/2x/es/components/toast/index.js

@@ -1,7 +1,8 @@
 import "./toast.css";
-import { clear, show } from './methods';
+import { clear, show, config } from './methods';
 var Toast = {
   show: show,
-  clear: clear
+  clear: clear,
+  config: config
 };
 export default Toast;

package/2x/es/components/toast/methods.d.ts

@@ -2,3 +2,4 @@ import { ToastProps } from './toast';
 export declare type ToastShowProps = Omit<ToastProps, 'visible'>;
 export declare function show(p: ToastShowProps | string): void;
 export declare function clear(): void;
+export declare function config(val: Pick<ToastProps, 'duration' | 'position' | 'maskClickable'>): void;

package/2x/es/components/toast/methods.js

@@ -14,7 +14,9 @@ function unmount(container) {
 }
 
 var defaultProps = {
-  duration: 2000
+  duration: 2000,
+  position: 'center',
+  maskClickable: true
 };
 export function show(p) {
   var props = mergeProps(defaultProps, typeof p === 'string' ? {
@@ -74,4 +76,17 @@ export function clear() {
     if (!container) break;
     unmount(container);
   }
+}
+export function config(val) {
+  if (val.duration !== undefined) {
+    defaultProps.duration = val.duration;
+  }
+
+  if (val.position !== undefined) {
+    defaultProps.position = val.position;
+  }
+
+  if (val.maskClickable !== undefined) {
+    defaultProps.maskClickable = val.maskClickable;
+  }
 }

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

@@ -72,3 +72,4 @@ 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 PasscodeInput } from './components/passcode-input';

package/2x/es/index.js

@@ -72,4 +72,5 @@ export { default as TextArea } from './components/text-area';
 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 WaterMark } from './components/water-mark';
+export { default as PasscodeInput } from './components/passcode-input';

package/2x/es/utils/memo-with-event-marks.d.ts

@@ -0,0 +1,2 @@
+import { FunctionComponent } from 'react';
+export declare function memoWithEventMarks<P extends object>(Component: FunctionComponent<P>, eventProps: (keyof P)[]): import("react").NamedExoticComponent<P>;

package/2x/es/utils/memo-with-event-marks.js

@@ -0,0 +1,15 @@
+import { memo } from 'react';
+export function memoWithEventMarks(Component, eventProps) {
+  return /*#__PURE__*/memo(Component, function (prevProps, nextProps) {
+    for (var k in nextProps) {
+      var key = k;
+      if (eventProps.includes(key)) continue;
+
+      if (prevProps[key] !== nextProps[key]) {
+        return false;
+      }
+    }
+
+    return true;
+  });
+}

package/2x/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.0.0-rc.4",
+  "version": "5.0.0-rc.5",
   "dependencies": {
     "@react-spring/web": "^9.3.1",
     "@types/resize-observer-browser": "^0.1.6",

package/README.md

@@ -4,6 +4,8 @@
 ![GitHub (Pre-)Release Date](https://img.shields.io/github/release-date-pre/ant-design/ant-design-mobile)
 ![npm](https://img.shields.io/npm/dw/antd-mobile-v5-count)
 ![gzip size](https://img.badgesize.io/https:/unpkg.com/antd-mobile@next/umd/antd-mobile.js?label=gzip%20size&compression=gzip)
+[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/ant-design/ant-design-mobile.svg)](http://isitmaintained.com/project/ant-design/ant-design-mobile 'Average time to resolve an issue')
+[![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design-mobile.svg)](http://isitmaintained.com/project/ant-design/ant-design-mobile 'Percentage of issues still open')
 ![GitHub Workflow Status (branch)](https://img.shields.io/github/workflow/status/ant-design/ant-design-mobile/Check/v5)
 ![GitHub](https://img.shields.io/github/license/ant-design/ant-design-mobile)
 

package/cjs/components/collapse/collapse.d.ts

@@ -7,14 +7,14 @@ export declare type CollapsePanelProps = {
     forceRender?: boolean;
     destroyOnClose?: boolean;
     onClick?: (event: React.MouseEvent<Element, MouseEvent>) => void;
-    arrow?: React.ReactNode;
+    arrow?: React.ReactNode | ((active: boolean) => React.ReactNode);
 } & NativeProps;
 export declare const CollapsePanel: FC<CollapsePanelProps>;
 declare type ValueProps<T> = {
     activeKey?: T;
     defaultActiveKey?: T;
     onChange?: (activeKey: T) => void;
-    arrow?: React.ReactNode;
+    arrow?: React.ReactNode | ((active: boolean) => React.ReactNode);
 };
 export declare type CollapseProps = (({
     accordion?: false;

package/cjs/components/collapse/collapse.js

@@ -168,7 +168,7 @@ var Collapse = function Collapse(props) {
         arrow = panel.props.arrow;
       }
 
-      return /*#__PURE__*/_react["default"].createElement("div", {
+      return typeof arrow === 'function' ? arrow(active) : /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _classnames["default"])(classPrefix + "-arrow", (_classNames = {}, _classNames[classPrefix + "-arrow-active"] = active, _classNames))
       }, arrow);
     };

package/cjs/components/dialog/dialog.js

@@ -21,6 +21,8 @@ var _image = _interopRequireDefault(require("../image"));
 
 var _space = _interopRequireDefault(require("../space"));
 
+var _renderToContainer = require("../../utils/render-to-container");
+
 var _withStopPropagation = require("../../utils/with-stop-propagation");
 
 var _autoCenter = _interopRequireDefault(require("../auto-center"));
@@ -73,7 +75,8 @@ var defaultProps = {
   actions: [],
   closeOnAction: false,
   closeOnMaskClick: false,
-  stopPropagation: ['click']
+  stopPropagation: ['click'],
+  getContainer: null
 };
 
 var Dialog = function Dialog(p) {
@@ -107,14 +110,13 @@ var Dialog = function Dialog(p) {
       active = _useState[0],
       setActive = _useState[1];
 
-  return (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+  var node = (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix,
     style: {
       display: active ? 'unset' : 'none'
     }
   }, /*#__PURE__*/_react["default"].createElement(_mask["default"], {
     visible: props.visible,
-    getContainer: props.getContainer,
     onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
     style: props.maskStyle,
     className: (0, _classnames["default"])(classPrefix + "-mask", props.maskClassName)
@@ -184,7 +186,8 @@ var Dialog = function Dialog(p) {
         }
       });
     }));
-  })))))));
+  }))))));
+  return (0, _renderToContainer.renderToContainer)(props.getContainer, (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, node));
 };
 
 exports.Dialog = Dialog;

package/cjs/components/list/list.css

@@ -10,9 +10,6 @@
   overflow: hidden;
   font-size: 17px;
 }
-.adm-list-inner {
-  margin-bottom: -1px;
-}
 .adm-list-default {
   border-top: var(--border-top);
   border-bottom: var(--border-bottom);
@@ -22,9 +19,13 @@
   border-radius: 8px;
 }
 .adm-list-item {
+  margin-bottom: -1px;
   display: block;
   padding-left: var(--padding-left);
 }
+.adm-list-item:not(:first-child) {
+  padding-top: 1px;
+}
 .adm-list-item-title,
 .adm-list-item-description {
   color: var(--adm-color-weak);

package/cjs/components/list/list.js

@@ -24,9 +24,7 @@ var List = function List(p) {
   var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])(classPrefix, classPrefix + "-" + props.mode)
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-inner"
-  }, props.children)));
+  }, props.children));
 };
 
 exports.List = List;

package/cjs/components/number-keyboard/number-keyboard.css

@@ -3,8 +3,7 @@
   flex-wrap: wrap;
   flex: 1;
 }
-.adm-number-keyboard.confirmed-style {
-  width: 75%;
+.adm-number-keyboard-main.confirmed-style .sign-key {
   background-color: var(--adm-color-white);
 }
 .adm-number-keyboard-popup.adm-popup {
@@ -105,6 +104,7 @@
   color: var(--adm-color-white);
   height: 144px;
   font-size: 16px;
+  border: none;
 }
 .adm-number-keyboard-bs-key {
   height: 20px;

package/cjs/components/passcode-input/index.d.ts

@@ -0,0 +1,4 @@
+import './passcode-input.less';
+import { PasscodeInput } from './passcode-input';
+export type { PasscodeInputProps } from './passcode-input';
+export default PasscodeInput;

package/cjs/components/passcode-input/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+require("./passcode-input.css");
+
+var _passcodeInput2 = require("./passcode-input");
+
+var _default = _passcodeInput2.PasscodeInput;
+exports["default"] = _default;

package/cjs/components/passcode-input/passcode-input.css

@@ -0,0 +1,136 @@
+.adm-passcode-input {
+  position: relative;
+  display: inline-block;
+  --cell-size: 40px;
+  --cell-gap: 6px;
+  --dot-size: 10px;
+  --border-color: #e5e5e5;
+  --border-radius: 8px;
+}
+.adm-passcode-input-cell-container {
+  display: inline-flex;
+  vertical-align: top;
+}
+.adm-passcode-input-cell {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  font-size: 18px;
+  width: var(--cell-size);
+  height: var(--cell-size);
+  background: var(--adm-color-white);
+}
+.adm-passcode-input:not(.seperated) {
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+}
+.adm-passcode-input:not(.seperated) .adm-passcode-input-cell:not(:last-child) {
+  border-right: 1px solid var(--border-color);
+}
+.adm-passcode-input:not(.seperated).focused {
+  border-color: var(--adm-color-primary);
+  box-shadow: 0 0 2px 0 var(--adm-color-primary);
+  outline: none;
+}
+.adm-passcode-input:not(.seperated).error {
+  border-color: var(--adm-color-danger);
+  box-shadow: 0 0 2px 0 var(--adm-color-danger);
+  animation: 100ms ease-in-out 0s 3 normal none running adm-shake-horizontal;
+}
+.adm-passcode-input.seperated .adm-passcode-input-cell {
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+}
+.adm-passcode-input.seperated .adm-passcode-input-cell:not(:last-child) {
+  margin-right: var(--cell-gap);
+}
+.adm-passcode-input.seperated .adm-passcode-input-cell.focused {
+  border-color: var(--adm-color-primary);
+  box-shadow: 0 0 2px 0 var(--adm-color-primary);
+}
+.adm-passcode-input.seperated.focused {
+  outline: none;
+}
+.adm-passcode-input.seperated.error {
+  animation: 100ms ease-in-out 0s 3 normal none running adm-shake-horizontal;
+}
+.adm-passcode-input.seperated.error .adm-passcode-input-cell {
+  border-color: var(--adm-color-danger);
+  box-shadow: 0 0 2px 0 var(--adm-color-danger);
+}
+.adm-passcode-input-cell.dot::before {
+  content: '';
+  width: var(--dot-size);
+  height: var(--dot-size);
+  border-radius: 50%;
+  background: var(--adm-color-text);
+}
+.adm-passcode-input-cell.caret::after {
+  content: '';
+  width: 2px;
+  height: 1.1em;
+  margin-left: 1px;
+  background: var(--adm-color-primary);
+  animation: 1s linear infinite adm-caret-blink;
+}
+.adm-passcode-input > .adm-passcode-input-native-input {
+  position: absolute;
+  left: -200vw;
+  top: 0;
+  display: block;
+  width: 50px;
+  height: 20px;
+  opacity: 0.5;
+}
+@keyframes adm-shake-horizontal {
+  0% {
+    transform: translateX(0);
+  }
+  10% {
+    transform: translateX(-4px);
+  }
+  20% {
+    transform: translateX(5px);
+  }
+  30% {
+    transform: translateX(-1px);
+  }
+  40% {
+    transform: translateX(8px);
+  }
+  50% {
+    transform: translateX(0);
+  }
+  60% {
+    transform: translateX(-8px);
+  }
+  70% {
+    transform: translateX(1px);
+  }
+  80% {
+    transform: translateX(-5px);
+  }
+  90% {
+    transform: translateX(4px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes adm-caret-blink {
+  from {
+    opacity: 1;
+  }
+  60% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 0;
+  }
+  to {
+    opacity: 0;
+  }
+}

package/cjs/components/passcode-input/passcode-input.d.ts

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import type { NumberKeyboardProps } from '../number-keyboard';
+export declare type PasscodeInputProps = {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (val: string) => void;
+    length?: number;
+    plain?: boolean;
+    error?: boolean;
+    caret?: boolean;
+    seperated?: boolean;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    keyboard?: ReactElement<NumberKeyboardProps>;
+    onFill?: (val: string) => void;
+} & NativeProps<'--cell-gap' | '--cell-size'>;
+export declare type PasscodeInputRef = {
+    focus: () => void;
+    blur: () => void;
+};
+export declare const PasscodeInput: React.ForwardRefExoticComponent<{
+    value?: string | undefined;
+    defaultValue?: string | undefined;
+    onChange?: ((val: string) => void) | undefined;
+    length?: number | undefined;
+    plain?: boolean | undefined;
+    error?: boolean | undefined;
+    caret?: boolean | undefined;
+    seperated?: boolean | undefined;
+    onBlur?: (() => void) | undefined;
+    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>>;