antd-mobile 5.0.0-beta.9 → 5.0.0-rc.3

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

@@ -0,0 +1,132 @@
+.adm-number-keyboard-main {
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1;
+}
+
+.adm-number-keyboard.confirmed-style {
+  width: 75%;
+  background-color: var(--adm-color-white);
+}
+
+.adm-number-keyboard-popup.adm-popup {
+  width: 100%;
+  user-select: none;
+  z-index: 1050;
+}
+
+.adm-number-keyboard-popup.adm-popup .adm-popup-body {
+  background-color: #f5f5f5;
+}
+
+.adm-number-keyboard-wrapper {
+  display: flex;
+}
+
+.adm-number-keyboard-header {
+  height: 68px;
+  line-height: 68px;
+  border-top: solid 2px #f5f5f5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 24px;
+  color: var(--adm-color-weak);
+  background-color: var(--adm-color-white);
+}
+
+.adm-number-keyboard-header-close-button {
+  padding: 0 24px;
+  font-size: 32px;
+}
+
+.adm-number-keyboard-header.with-title {
+  justify-content: space-between;
+}
+
+.adm-number-keyboard-header.with-title .adm-number-keyboard-header-close-button {
+  padding-right: 0;
+}
+
+.adm-number-keyboard-footer {
+  background: var(--adm-color-white);
+}
+
+.adm-number-keyboard-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.adm-number-keyboard-confirm {
+  width: 25%;
+}
+
+.adm-number-keyboard-key {
+  flex: 1 33.33%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 96px;
+  font-size: 44px;
+  box-sizing: border-box;
+  border: solid 2px #f5f5f5;
+  border-bottom: none;
+  border-left: none;
+}
+
+.adm-number-keyboard-key:nth-child(3n),
+.adm-number-keyboard-key:last-child {
+  border-right: none;
+}
+
+.adm-number-keyboard-key::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  border: inherit;
+  border-color: #000;
+  border-radius: inherit;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  content: ' ';
+  box-sizing: content-box;
+}
+
+.adm-number-keyboard-key.mid-key {
+  flex-basis: 66.67%;
+}
+
+.adm-number-keyboard-key.sign-key:active::before {
+  opacity: 0.1;
+}
+
+.adm-number-keyboard-key.extra-key {
+  border-left: solid 2px #f5f5f5;
+  border-right: none;
+}
+
+.adm-number-keyboard-key.extra-key,
+.adm-number-keyboard-key.number-key {
+  background-color: var(--adm-color-white);
+}
+
+.adm-number-keyboard-key.extra-key:active::before,
+.adm-number-keyboard-key.number-key:active::before {
+  opacity: 0.1;
+}
+
+.adm-number-keyboard-key.ok-key {
+  background-color: var(--adm-color-primary);
+  color: var(--adm-color-white);
+  height: 288px;
+  font-size: 32px;
+}
+
+.adm-number-keyboard-bs-key {
+  height: 40px;
+}

package/2x/cjs/components/number-keyboard/number-keyboard.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { PopupProps } from '../popup';
+import { GetContainer } from '../../utils/render-to-container';
+import { NativeProps } from '../../utils/native-props';
+export declare type NumberKeyboardProps = {
+    visible?: boolean;
+    title?: string;
+    getContainer?: GetContainer;
+    confirmText?: string | null;
+    customKey?: '-' | '.' | 'X';
+    randomOrder?: boolean;
+    showCloseButton?: boolean;
+    onInput?: (v: string) => void;
+    onDelete?: () => void;
+    onClose?: () => void;
+    onConfirm?: () => void;
+    afterShow?: () => void;
+    afterClose?: () => void;
+    closeOnConfirm?: boolean;
+    safeArea?: boolean;
+} & Pick<PopupProps, 'stopPropagation'> & NativeProps;
+export declare const NumberKeyboard: React.FC<NumberKeyboardProps>;

package/2x/cjs/components/number-keyboard/number-keyboard.js

@@ -0,0 +1,217 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NumberKeyboard = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _antdMobileIcons = require("antd-mobile-icons");
+
+var _withDefaultProps = require("../../utils/with-default-props");
+
+var _shuffle = require("../../utils/shuffle");
+
+var _popup = _interopRequireDefault(require("../popup"));
+
+var _nativeProps = require("../../utils/native-props");
+
+var _safeArea = _interopRequireDefault(require("../safe-area"));
+
+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 _getRequireWildcardCache(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; }
+
+var classPrefix = 'adm-number-keyboard';
+var defaultProps = {
+  defaultVisible: false,
+  randomOrder: false,
+  showCloseButton: true,
+  confirmText: null,
+  closeOnConfirm: true,
+  safeArea: true
+};
+
+var NumberKeyboard = function NumberKeyboard(p) {
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  var visible = props.visible,
+      title = props.title,
+      getContainer = props.getContainer,
+      confirmText = props.confirmText,
+      customKey = props.customKey,
+      randomOrder = props.randomOrder,
+      showCloseButton = props.showCloseButton,
+      onInput = props.onInput;
+  var keyboardRef = (0, _react.useRef)(null);
+  var keys = (0, _react.useMemo)(function () {
+    var defaultKeys = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
+    var keyList = randomOrder ? (0, _shuffle.shuffle)(defaultKeys) : defaultKeys;
+    keyList.push('0');
+
+    if (confirmText) {
+      keyList.push(customKey || '');
+    } else {
+      keyList.splice(9, 0, customKey || '');
+      keyList.push('BACKSPACE');
+    }
+
+    return keyList;
+  }, [customKey, confirmText, randomOrder, randomOrder && visible]);
+  var timeoutRef = (0, _react.useRef)(-1);
+  var intervalRef = (0, _react.useRef)(-1);
+  var onDelete = (0, _ahooks.usePersistFn)(function () {
+    var _a;
+
+    (_a = props.onDelete) === null || _a === void 0 ? void 0 : _a.call(props);
+  });
+
+  var onBackspacePressStart = function onBackspacePressStart() {
+    timeoutRef.current = window.setTimeout(function () {
+      onDelete();
+      intervalRef.current = window.setInterval(onDelete, 150);
+    }, 700);
+  };
+
+  var onBackspacePressEnd = function onBackspacePressEnd() {
+    clearTimeout(timeoutRef.current);
+    clearInterval(intervalRef.current);
+  }; // 点击键盘按键
+
+
+  var onKeyPress = function onKeyPress(e, key) {
+    var _a, _b;
+
+    e.preventDefault();
+
+    switch (key) {
+      case 'BACKSPACE':
+        onDelete === null || onDelete === void 0 ? void 0 : onDelete();
+        break;
+
+      case 'OK':
+        (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props);
+
+        if (props.closeOnConfirm) {
+          (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+        }
+
+        break;
+
+      default:
+        onInput === null || onInput === void 0 ? void 0 : onInput(key);
+        break;
+    }
+  }; // 渲染 title 和 close button
+
+
+  var renderHeader = function renderHeader() {
+    if (!showCloseButton && !title) return null;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])(classPrefix + "-header", {
+        'with-title': !!title
+      })
+    }, title && /*#__PURE__*/_react["default"].createElement("div", {
+      className: classPrefix + "-title"
+    }, title), showCloseButton && /*#__PURE__*/_react["default"].createElement("span", {
+      className: classPrefix + "-header-close-button",
+      onClick: function onClick() {
+        var _a;
+
+        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      },
+      role: 'button',
+      title: 'CLOSE'
+    }, /*#__PURE__*/_react["default"].createElement(_antdMobileIcons.DownOutline, null)));
+  }; // 渲染基础键盘按键
+
+
+  var renderKey = function renderKey(key, index) {
+    var isNumberKey = /^\d$/.test(key);
+    var className = (0, _classnames["default"])(classPrefix + "-key", {
+      'number-key': isNumberKey,
+      'sign-key': !isNumberKey && key,
+      'mid-key': index === 9 && !!confirmText
+    });
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: key,
+      className: className,
+      onTouchStart: function onTouchStart() {
+        if (key === 'BACKSPACE') {
+          onBackspacePressStart();
+        }
+      },
+      onTouchEnd: function onTouchEnd(e) {
+        onKeyPress(e, key);
+
+        if (key === 'BACKSPACE') {
+          onBackspacePressEnd();
+        }
+      },
+      onMouseUp: function onMouseUp(e) {
+        onKeyPress(e, key);
+      },
+      title: key,
+      role: 'button'
+    }, key === 'BACKSPACE' ? /*#__PURE__*/_react["default"].createElement(_antdMobileIcons.TextDeletionOutline, null) : key);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_popup["default"], {
+    visible: visible,
+    getContainer: getContainer,
+    mask: false,
+    afterClose: props.afterClose,
+    afterShow: props.afterShow,
+    className: classPrefix + "-popup",
+    stopPropagation: props.stopPropagation
+  }, (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+    ref: keyboardRef,
+    className: classPrefix,
+    onMouseDown: function onMouseDown(e) {
+      e.preventDefault();
+    }
+  }, renderHeader(), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix + "-wrapper"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])(classPrefix + "-main", {
+      'confirmed-style': !!confirmText
+    })
+  }, keys.map(renderKey)), !!confirmText && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix + "-confirm"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix + "-key extra-key bs-key",
+    onTouchStart: function onTouchStart() {
+      onBackspacePressStart();
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      onKeyPress(e, 'BACKSPACE');
+      onBackspacePressEnd();
+    },
+    onMouseUp: function onMouseUp(e) {
+      return onKeyPress(e, 'BACKSPACE');
+    },
+    title: 'BACKSPACE',
+    role: 'button'
+  }, /*#__PURE__*/_react["default"].createElement(_antdMobileIcons.TextDeletionOutline, null)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix + "-key extra-key ok-key",
+    onTouchEnd: function onTouchEnd(e) {
+      return onKeyPress(e, 'OK');
+    },
+    onMouseUp: function onMouseUp(e) {
+      return onKeyPress(e, 'OK');
+    },
+    role: 'button'
+  }, confirmText))), props.safeArea && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix + "-footer"
+  }, /*#__PURE__*/_react["default"].createElement(_safeArea["default"], {
+    position: 'bottom'
+  })))));
+};
+
+exports.NumberKeyboard = NumberKeyboard;

package/2x/cjs/components/page-indicator/page-indicator.css

@@ -1,17 +1,21 @@
 .adm-page-indicator {
   display: flex;
   width: fit-content;
-  --active-color: var(--adm-color-primary);
-  --non-active-color: rgba(0, 0, 0, 0.2);
+  --dot-color: rgba(0, 0, 0, 0.2);
+  --active-dot-color: var(--adm-color-primary);
+  --dot-size: 6px;
+  --active-dot-size: 26px;
+  --dot-border-radius: 2px;
+  --active-dot-border-radius: var(--dot-border-radius);
+  --dot-spacing: 6px;
 }
 
 .adm-page-indicator-dot {
   display: block;
-  width: 6px;
-  height: 6px;
-  border-radius: 2px;
-  background: var(--non-active-color);
-  margin-right: 6px;
+  width: var(--dot-size);
+  height: var(--dot-size);
+  border-radius: var(--dot-border-radius);
+  background: var(--dot-color);
 }
 
 .adm-page-indicator-dot:last-child {
@@ -19,10 +23,34 @@
 }
 
 .adm-page-indicator-dot-active {
-  width: 26px;
-  background: var(--active-color);
+  border-radius: var(--active-dot-border-radius);
+  background: var(--active-dot-color);
 }
 
 .adm-page-indicator-color-white {
-  --active-color: var(--adm-color-white);
+  --active-dot-color: var(--adm-color-white);
+}
+
+.adm-page-indicator-horizontal {
+  flex-direction: row;
+}
+
+.adm-page-indicator-horizontal .adm-page-indicator-dot {
+  margin-right: var(--dot-spacing);
+}
+
+.adm-page-indicator-horizontal .adm-page-indicator-dot-active {
+  width: var(--active-dot-size);
+}
+
+.adm-page-indicator-vertical {
+  flex-direction: column;
+}
+
+.adm-page-indicator-vertical .adm-page-indicator-dot {
+  margin-bottom: var(--dot-spacing);
+}
+
+.adm-page-indicator-vertical .adm-page-indicator-dot-active {
+  height: var(--active-dot-size);
 }

package/2x/cjs/components/page-indicator/page-indicator.d.ts

@@ -3,7 +3,7 @@ import { NativeProps } from '../../utils/native-props';
 export declare type PageIndicatorProps = {
     total: number;
     current: number;
+    direction?: 'horizontal' | 'vertical';
     color?: 'primary' | 'white';
-    children?: [];
-} & NativeProps<'--active-color' | '--non-active-color'>;
+} & NativeProps<'--dot-color' | '--active-dot-color' | '--dot-size' | '--active-dot-size' | '--dot-border-radius' | '--active-dot-border-radius' | '--dot-spacing'>;
 export declare const PageIndicator: React.NamedExoticComponent<PageIndicatorProps>;

package/2x/cjs/components/page-indicator/page-indicator.js

@@ -19,24 +19,26 @@ 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; }
 
+var classPrefix = "adm-page-indicator";
 var defaultProps = {
-  color: 'primary'
+  color: 'primary',
+  direction: 'horizontal'
 };
 var PageIndicator = /*#__PURE__*/(0, _react.memo)(function (p) {
   var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   var dots = [];
 
   for (var i = 0; i < props.total; i++) {
+    var _classNames;
+
     dots.push( /*#__PURE__*/_react["default"].createElement("div", {
       key: i,
-      className: (0, _classnames["default"])('adm-page-indicator-dot', {
-        'adm-page-indicator-dot-active': props.current === i
-      })
+      className: (0, _classnames["default"])(classPrefix + "-dot", (_classNames = {}, _classNames[classPrefix + "-dot-active"] = props.current === i, _classNames))
     }));
   }
 
   return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])('adm-page-indicator', "adm-page-indicator-color-" + props.color)
+    className: (0, _classnames["default"])(classPrefix, classPrefix + "-" + props.direction, classPrefix + "-color-" + props.color)
   }, dots));
 });
 exports.PageIndicator = PageIndicator;

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

@@ -1,13 +1,9 @@
 /// <reference types="react" />
 import './picker.less';
-import { promptCascader } from './prompt-cascader';
 import { prompt } from './prompt';
-export type { PickerValue, PickerColumnItem, PickerColumn, PickerProps, } from './picker';
-export type { CascaderProps, CascaderOption } from './cascader';
-declare const _default: import("react").FC<import("./picker").PickerProps> & {
-    Cascader: import("react").FC<import("./cascader").CascaderProps> & {
-        prompt: typeof promptCascader;
-    };
+export type { PickerProps } from './picker';
+export type { PickerValue, PickerColumnItem, PickerColumn, PickerValueExtend, } from '../picker-view';
+declare const _default: import("react").NamedExoticComponent<import("./picker").PickerProps> & {
     prompt: typeof prompt;
 };
 export default _default;

package/2x/cjs/components/picker/index.js

@@ -9,18 +9,11 @@ require("./picker.css");
 
 var _attachPropertiesToComponent = require("../../utils/attach-properties-to-component");
 
-var _cascader = require("./cascader");
-
 var _picker2 = require("./picker");
 
-var _promptCascader = require("./prompt-cascader");
-
 var _prompt = require("./prompt");
 
 var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_picker2.Picker, {
-  Cascader: (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_cascader.Cascader, {
-    prompt: _promptCascader.promptCascader
-  }),
   prompt: _prompt.prompt
 });
 

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

@@ -22,80 +22,20 @@
   padding: 8px 8px;
 }
 
-.adm-picker-columns {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex: auto;
-  position: relative;
-  overflow: hidden;
-}
-
-.adm-picker-column {
-  height: 100%;
+.adm-picker-header-title {
+  padding: 8px 8px;
+  font-size: 30px;
+  color: var(--adm-color-text);
+  text-align: center;
   flex: 1;
-  user-select: none;
-  touch-action: none;
-  position: relative;
-}
-
-.adm-picker-column-wheel {
-  width: 100%;
-  cursor: grab;
-  position: absolute;
-  top: calc(50% - 34px);
-  left: 0;
 }
 
-.adm-picker-column-wheel::before {
-  content: ' ';
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100vh;
-  top: -100vh;
-}
-
-.adm-picker-column-wheel::after {
-  content: ' ';
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100vh;
-  bottom: -100vh;
-}
-
-.adm-picker-column-item {
-  font-size: 32px;
-  padding: 0 12px;
-  height: 68px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.adm-picker-column-item-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.adm-picker-mask {
-  position: absolute;
-  left: 0;
+.adm-picker-body {
+  flex: auto;
+  height: 100%;
   width: 100%;
-  height: calc(50% - 34px);
-  pointer-events: none;
-}
-
-.adm-picker-mask-top {
-  top: 0;
-  border-bottom: solid 2px var(--adm-border-color);
-  background: linear-gradient(0deg, rgba(255, 255, 255, 0.7) 50%, #ffffff);
 }
 
-.adm-picker-mask-bottom {
-  bottom: 0;
-  border-top: solid 2px var(--adm-border-color);
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 50%, #ffffff);
+.adm-picker-body > .adm-picker-view {
+  --height: 100%;
 }

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

@@ -1,23 +1,19 @@
 import React, { ReactNode } from 'react';
 import { PopupProps } from '../popup';
 import { NativeProps } from '../../utils/native-props';
-export declare type PickerValue = string | null;
-export declare type PickerColumnItem = {
-    label: string;
-    value: string;
-};
-export declare type PickerColumn = (string | PickerColumnItem)[];
+import { PickerColumn, PickerColumnItem, PickerValue, PickerValueExtend } from './index';
 export declare type PickerProps = {
     columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]);
     value?: PickerValue[];
     defaultValue?: PickerValue[];
-    onSelect?: (value: PickerValue[]) => void;
-    onConfirm?: (value: PickerValue[]) => void;
+    onSelect?: (value: PickerValue[], extend: PickerValueExtend) => void;
+    onConfirm?: (value: PickerValue[], extend: PickerValueExtend) => void;
     onCancel?: () => void;
     onClose?: () => void;
     visible?: boolean;
+    title?: ReactNode;
     confirmText?: string;
     cancelText?: string;
     children?: (items: (PickerColumnItem | null)[]) => ReactNode;
-} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick'> & NativeProps;
-export declare const Picker: React.FC<PickerProps>;
+} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps;
+export declare const Picker: React.NamedExoticComponent<PickerProps>;