antd-mobile 5.0.0-rc.23 → 5.0.0-rc.27

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

@@ -17,6 +17,10 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _ahooks = require("ahooks");
+
+var _bound = require("../../utils/bound");
+
 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 +62,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;
@@ -69,6 +73,19 @@ const Input = (0, _react.forwardRef)((p, ref) => {
       (_a = nativeInputRef.current) === null || _a === void 0 ? void 0 : _a.removeAttribute('enterkeyhint');
     };
   }, [props.enterKeyHint]);
+
+  function checkValue() {
+    let nextValue = value;
+
+    if (props.type === 'number') {
+      nextValue = (0, _bound.bound)(parseFloat(nextValue), props.min, props.max).toString();
+    }
+
+    if (nextValue !== value) {
+      setValue(nextValue);
+    }
+  }
+
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: (0, _classnames.default)(`${classPrefix}`, props.disabled && `${classPrefix}-disabled`)
   }, _react.default.createElement("input", {
@@ -88,6 +105,7 @@ const Input = (0, _react.forwardRef)((p, ref) => {
       var _a;
 
       setHasFocus(false);
+      checkValue();
       (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
     id: props.id,
@@ -105,8 +123,10 @@ const Input = (0, _react.forwardRef)((p, ref) => {
     autoCapitalize: props.autoCapitalize,
     autoCorrect: props.autoCorrect,
     onKeyDown: handleKeydown,
-    onKeyUp: props.onKeyUp
-  }), props.clearable && !!value && _react.default.createElement("div", {
+    onKeyUp: props.onKeyUp,
+    onCompositionStart: props.onCompositionStart,
+    onCompositionEnd: props.onCompositionEnd
+  }), props.clearable && !!value && !props.readOnly && _react.default.createElement("div", {
     className: `${classPrefix}-clear`,
     onMouseDown: e => {
       e.preventDefault();

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

@@ -1,5 +1,5 @@
 .adm-list {
-  --header-font-size: 28px;
+  --header-font-size: 30px;
   --prefix-width: 'auto';
   --prefix-padding-right: 24px;
   --align-items: center;
@@ -15,9 +15,7 @@
 .adm-list-header {
   color: var(--adm-color-weak);
   font-size: var(--header-font-size);
-  padding-left: var(--padding-left);
-  padding-right: var(--padding-right);
-  margin: 32px 0 8px;
+  padding: 16px var(--padding-right) 16px var(--padding-left);
 }
 
 .adm-list-body {
@@ -43,6 +41,10 @@
   border-radius: 16px;
 }
 
+.adm-list-card .adm-list-header {
+  padding-left: 0;
+}
+
 .adm-list-item {
   display: block;
   padding-left: var(--padding-left);
@@ -99,11 +101,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 +113,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/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

@@ -10,10 +10,11 @@ export declare type PickerProps = {
     onConfirm?: (value: PickerValue[], extend: PickerValueExtend) => void;
     onCancel?: () => void;
     onClose?: () => void;
+    closeOnMaskClick?: boolean;
     visible?: boolean;
     title?: ReactNode;
     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/picker.js

@@ -35,7 +35,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const classPrefix = `adm-picker`;
 const defaultProps = {
-  defaultValue: []
+  defaultValue: [],
+  closeOnMaskClick: true
 };
 const Picker = (0, _react.memo)(p => {
   var _a;
@@ -114,6 +115,7 @@ const Picker = (0, _react.memo)(p => {
     onMaskClick: () => {
       var _a, _b;
 
+      if (!props.closeOnMaskClick) return;
       (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
       (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
     },

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;

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

@@ -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/2x/cjs/components/popover/arrow.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare const Arrow: React.NamedExoticComponent<NativeProps<never>>;

package/2x/cjs/components/popover/arrow.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Arrow = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _nativeProps = require("../../utils/native-props");
+
+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 Arrow = (0, _react.memo)(props => {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("svg", {
+    viewBox: '0 0 30 16'
+  }, _react.default.createElement("g", {
+    transform: 'translate(-1300.000000, -841.000000)',
+    fill: 'currentColor'
+  }, _react.default.createElement("path", {
+    d: 'M1300,841 L1330,841 L1318.07289,855.312538 C1316.65863,857.009645 1314.13637,857.238942 1312.43926,855.824685 C1312.25341,855.669808 1312.08199,855.49839 1311.92711,855.312538 L1300,841 L1300,841 Z'
+  }))));
+});
+exports.Arrow = Arrow;

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

@@ -1,31 +1,21 @@
 /// <reference types="react" />
 import './popover.less';
-export type { BasePopoverProps, PopoverRef } from './popover';
-export type { PopMenuProps, Action } from './pop-menu';
+import './popover-menu.less';
+export type { PopoverProps, PopoverRef } from './popover';
+export type { PopoverMenuProps, Action } from './popover-menu';
 declare const _default: import("react").ForwardRefExoticComponent<{
-    getContainer?: (() => HTMLElement) | undefined;
+    getContainer?: HTMLElement | (() => HTMLElement) | null | undefined;
     destroyOnHide?: boolean | undefined;
     children: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     mode?: "dark" | "light" | undefined;
     trigger?: "click" | undefined;
-    placement: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
+    placement?: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | undefined;
     stopPropagation?: "click"[] | undefined;
-} & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & import("../../utils/native-props").NativeProps<"--z-index"> & {
     content: import("react").ReactNode;
-} & import("react").RefAttributes<import("./popover").PopoverRef>> & {
-    Menu: <T extends import("./pop-menu").Action = import("./pop-menu").Action>(props: {
-        getContainer?: (() => HTMLElement) | undefined;
-        destroyOnHide?: boolean | undefined;
-        children: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
-        mode?: "dark" | "light" | undefined;
-        trigger?: "click" | undefined;
-        placement: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
-        stopPropagation?: "click"[] | undefined;
-    } & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & import("../../utils/native-props").NativeProps<"--z-index"> & {
-        actions: T[];
-        onAction?: ((text: T) => void) | undefined;
-    } & {
-        ref?: ((instance: import("./popover").PopoverRef | null) => void) | import("react").RefObject<import("./popover").PopoverRef> | null | undefined;
-    }) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
+} & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "align" | "defaultVisible" | "onVisibleChange"> & import("../../utils/native-props").NativeProps<"--z-index"> & import("react").RefAttributes<import("./popover").PopoverRef>> & {
+    Menu: import("react").ForwardRefExoticComponent<Pick<import("./popover").PopoverProps, "children" | "style" | "visible" | "className" | "tabIndex" | "mode" | "align" | "getContainer" | "stopPropagation" | "trigger" | "defaultVisible" | "onVisibleChange" | "placement" | "destroyOnHide"> & {
+        actions: import("./popover-menu").Action[];
+        onAction?: ((item: import("./popover-menu").Action) => void) | undefined;
+    } & import("react").RefAttributes<import("./popover").PopoverRef>>;
 };
 export default _default;

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

@@ -7,14 +7,16 @@ exports.default = void 0;
 
 require("./popover.css");
 
+require("./popover-menu.css");
+
 var _attachPropertiesToComponent = require("../../utils/attach-properties-to-component");
 
-var _popMenu = require("./pop-menu");
+var _popoverMenu2 = require("./popover-menu");
 
 var _popover2 = require("./popover");
 
 var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_popover2.Popover, {
-  Menu: _popMenu.PopMenu
+  Menu: _popoverMenu2.PopoverMenu
 });
 
 exports.default = _default;

package/2x/cjs/components/popover/popover-menu.css

@@ -0,0 +1,63 @@
+.adm-popover-menu {
+  --border-color: var(--adm-border-color);
+}
+
+.adm-popover-menu.adm-popover {
+  --content-padding: 0;
+}
+
+.adm-popover-menu-list {
+  overflow: hidden;
+  min-width: 240px;
+}
+
+.adm-popover-menu-list-inner {
+  margin-top: -2px;
+}
+
+.adm-popover-menu-item {
+  display: flex;
+  padding-left: 40px;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+}
+
+.adm-popover-menu-item-icon {
+  flex: none;
+  padding-right: 16px;
+  font-size: 40px;
+}
+
+.adm-popover-menu-item-text {
+  flex: auto;
+  padding: 28px 40px 28px 0;
+  border-top: solid 2px var(--border-color);
+}
+
+.adm-popover-menu-item-disabled {
+  cursor: not-allowed;
+}
+
+.adm-popover-menu-item-disabled > * {
+  opacity: 0.4;
+}
+
+.adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled) {
+  background-color: var(--border-color);
+}
+
+.adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled)::after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 100%;
+  bottom: -2px;
+  left: 0;
+  border-bottom: solid 2px var(--border-color);
+}
+
+.adm-popover.adm-popover-dark.adm-popover-menu {
+  --border-color: #333333;
+  --background: rgba(0, 0, 0, 0.9);
+}

package/2x/cjs/components/popover/popover-menu.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { PopoverProps, PopoverRef } from './popover';
+export declare type Action = {
+    text: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    key?: string | number;
+    onClick?: () => void;
+};
+export declare type PopoverMenuProps = Omit<PopoverProps, 'content'> & {
+    actions: Action[];
+    onAction?: (item: Action) => void;
+};
+export declare const PopoverMenu: React.ForwardRefExoticComponent<Pick<PopoverProps, "children" | "style" | "visible" | "className" | "tabIndex" | "mode" | "align" | "getContainer" | "stopPropagation" | "trigger" | "defaultVisible" | "onVisibleChange" | "placement" | "destroyOnHide"> & {
+    actions: Action[];
+    onAction?: ((item: Action) => void) | undefined;
+} & React.RefAttributes<PopoverRef>>;

package/{cjs/components/popover/pop-menu.js → 2x/cjs/components/popover/popover-menu.js}

@@ -3,14 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PopMenu = void 0;
+exports.PopoverMenu = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _button = _interopRequireDefault(require("../button"));
-
 var _popover = require("./popover");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19,8 +17,8 @@ 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-popover`;
-const PopMenu = (0, _react.forwardRef)((props, ref) => {
+const classPrefix = `adm-popover-menu`;
+const PopoverMenu = (0, _react.forwardRef)((props, ref) => {
   const innerRef = (0, _react.useRef)(null);
   (0, _react.useImperativeHandle)(ref, () => innerRef.current, []);
   const onClick = (0, _react.useCallback)(e => {
@@ -37,36 +35,35 @@ const PopMenu = (0, _react.forwardRef)((props, ref) => {
     (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.hide();
   }, [props.onAction]);
   const overlay = (0, _react.useMemo)(() => {
-    return _react.default.createElement(_react.default.Fragment, null, (props.actions || []).map((ele, index) => {
+    return _react.default.createElement("div", {
+      className: `${classPrefix}-list`
+    }, _react.default.createElement("div", {
+      className: `${classPrefix}-list-inner`
+    }, props.actions.map((action, index) => {
       var _a;
 
-      return _react.default.createElement("div", {
-        className: (0, _classnames.default)(`${classPrefix}-inner-menu`, {
-          [`${classPrefix}-inner-menu-with-icon`]: !!ele.icon
-        }),
-        key: (_a = ele.key) !== null && _a !== void 0 ? _a : index
-      }, _react.default.createElement(_button.default, {
-        disabled: ele.disabled,
+      return _react.default.createElement("a", {
+        key: (_a = action.key) !== null && _a !== void 0 ? _a : index,
+        className: (0, _classnames.default)(`${classPrefix}-item`, 'adm-plain-anchor', action.disabled && `${classPrefix}-item-disabled`),
         onClick: () => {
           var _a;
 
-          if (!ele.disabled) {
-            onClick(ele);
-            (_a = ele.onClick) === null || _a === void 0 ? void 0 : _a.call(ele);
-          }
-        },
-        fill: 'none',
-        block: true
-      }, ele.icon && _react.default.createElement("span", {
-        className: `${classPrefix}-inner-menu-icon`
-      }, ele.icon), ele.text));
-    }));
+          if (action.disabled) return;
+          onClick(action);
+          (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
+        }
+      }, action.icon && _react.default.createElement("div", {
+        className: `${classPrefix}-item-icon`
+      }, action.icon), _react.default.createElement("div", {
+        className: `${classPrefix}-item-text`
+      }, action.text));
+    })));
   }, [props.actions, onClick]);
   return _react.default.createElement(_popover.Popover, Object.assign({
     ref: innerRef
   }, props, {
-    overlayClassName: (0, _classnames.default)(`${classPrefix}-menu`, props.overlayClassName),
+    className: (0, _classnames.default)(classPrefix, props.className),
     content: overlay
   }), props.children);
 });
-exports.PopMenu = PopMenu;
+exports.PopoverMenu = PopoverMenu;