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

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

@@ -1,10 +1,10 @@
-import React, { useLayoutEffect } from 'react';
+import React, { useLayoutEffect, useRef } from 'react';
 import { useSpring, animated } from '@react-spring/web';
-import { useDrag } from 'react-use-gesture';
+import { useDrag } from '@use-gesture/react';
 import { convertPx } from '../../utils/convert-px';
 import { rubberbandIfOutOfBounds } from '../../utils/rubberband';
 import { bound } from '../../utils/bound';
-var classPrefix = "adm-picker";
+var classPrefix = "adm-picker-view";
 export var Column = function Column(props) {
   var itemHeight = convertPx(34);
   var value = props.value,
@@ -25,19 +25,14 @@ export var Column = function Column(props) {
       y = _useSpring[0].y,
       api = _useSpring[1];
 
+  var draggingRef = useRef(false);
   useLayoutEffect(function () {
-    if (!value) {
-      return;
-    }
-
+    if (draggingRef.current) return;
+    if (!value) return;
     var targetIndex = column.findIndex(function (item) {
       return item.value === value;
     });
-
-    if (targetIndex < 0) {
-      return;
-    }
-
+    if (targetIndex < 0) return;
     var finalPosition = targetIndex * -itemHeight;
     api.start({
       y: finalPosition,
@@ -57,31 +52,41 @@ export var Column = function Column(props) {
         props.onSelect(firstItem.value);
       }
     }
-  });
+  }, [column, value]);
+
+  function scrollSelect(index) {
+    var finalPosition = index * -itemHeight;
+    api.start({
+      y: finalPosition
+    });
+    onSelect(column[index].value);
+  }
+
   var bind = useDrag(function (state) {
+    draggingRef.current = true;
     var min = -((column.length - 1) * itemHeight);
     var max = 0;
 
     if (state.last) {
-      var position = state.movement[1] + state.vxvy[1] * 50;
+      draggingRef.current = false;
+      var position = state.offset[1] + state.velocity[1] * state.direction[1] * 50;
       var targetIndex = -Math.round(bound(position, min, max) / itemHeight);
-      var finalPosition = targetIndex * -itemHeight;
-      api.start({
-        y: finalPosition
-      });
-      onSelect(column[targetIndex].value);
+      scrollSelect(targetIndex);
     } else {
-      var _position = state.movement[1];
+      var _position = state.offset[1];
       api.start({
         y: rubberbandIfOutOfBounds(_position, min, max, itemHeight * 50, 0.2)
       });
     }
   }, {
     axis: 'y',
-    initial: function initial() {
+    from: function from() {
       return [0, y.get()];
     },
-    filterTaps: true
+    filterTaps: true,
+    pointer: {
+      touch: true
+    }
   });
   return /*#__PURE__*/React.createElement("div", Object.assign({
     className: classPrefix + "-column"
@@ -92,11 +97,8 @@ export var Column = function Column(props) {
     className: classPrefix + "-column-wheel"
   }, column.map(function (item, index) {
     function handleClick() {
-      var finalPosition = index * -itemHeight;
-      api.start({
-        y: finalPosition
-      });
-      onSelect(column[index].value);
+      draggingRef.current = false;
+      scrollSelect(index);
     }
 
     return /*#__PURE__*/React.createElement("div", {

package/2x/es/components/picker-view/index.d.ts

@@ -0,0 +1,4 @@
+import { PickerView } from './picker-view';
+import './picker-view.less';
+export type { PickerViewProps, PickerValue, PickerColumnItem, PickerColumn, PickerValueExtend, } from './picker-view';
+export default PickerView;

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

@@ -0,0 +1,3 @@
+import { PickerView } from './picker-view';
+import "./picker-view.css";
+export default PickerView;

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

@@ -0,0 +1,77 @@
+.adm-picker-view {
+  --height: 480px;
+  height: var(--height);
+  width: 100%;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.adm-picker-view-column {
+  height: 100%;
+  flex: 1;
+  user-select: none;
+  touch-action: none;
+  position: relative;
+}
+
+.adm-picker-view-column-wheel {
+  width: 100%;
+  cursor: grab;
+  position: absolute;
+  top: calc(50% - 34px);
+  left: 0;
+}
+
+.adm-picker-view-column-wheel::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  top: -100vh;
+}
+
+.adm-picker-view-column-wheel::after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  bottom: -100vh;
+}
+
+.adm-picker-view-column-item {
+  font-size: 32px;
+  padding: 0 12px;
+  height: 68px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.adm-picker-view-column-item-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.adm-picker-view-mask {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: calc(50% - 24px);
+  pointer-events: none;
+}
+
+.adm-picker-view-mask-top {
+  top: -10px;
+  border-bottom: solid 2px var(--adm-border-color);
+  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.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type PickerValue = string | null;
+export declare type PickerValueExtend = {
+    items: (PickerColumnItem | null)[];
+};
+export declare type PickerColumnItem = {
+    label: ReactNode;
+    value: string;
+};
+export declare type PickerColumn = (string | PickerColumnItem)[];
+export declare type PickerViewProps = {
+    columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]);
+    value?: PickerValue[];
+    defaultValue?: PickerValue[];
+    onChange?: (value: PickerValue[], extend: PickerValueExtend) => void;
+} & NativeProps<'--height'>;
+export declare const PickerView: React.NamedExoticComponent<PickerViewProps>;

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

@@ -0,0 +1,66 @@
+import React, { memo, useEffect, useState } from 'react';
+import { mergeProps } from '../../utils/with-default-props';
+import { Column } from './column';
+import { useColumns } from './use-columns';
+import { withNativeProps } from '../../utils/native-props';
+import { usePickerValueExtend } from './use-picker-value-extend';
+import { useDebounceEffect } from 'ahooks';
+var classPrefix = "adm-picker-view";
+var defaultProps = {
+  defaultValue: []
+};
+export var PickerView = /*#__PURE__*/memo(function (p) {
+  var props = mergeProps(defaultProps, p);
+
+  var _useState = useState(props.value === undefined ? props.defaultValue : props.value),
+      innerValue = _useState[0],
+      setInnerValue = _useState[1];
+
+  useDebounceEffect(function () {
+    var _a;
+
+    if (props.value === innerValue) return;
+    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, innerValue, generateValueExtend(innerValue));
+  }, [innerValue], {
+    wait: 0,
+    leading: false,
+    trailing: true
+  }); // Sync `value` to `innerValue`
+
+  useEffect(function () {
+    if (props.value === undefined) return; // Uncontrolled mode
+
+    if (props.value === innerValue) return;
+    setInnerValue(props.value);
+  }, [props.value]); // Reset `innerValue` after 1s in case user does not update `value` when `onChange` is called
+
+  useDebounceEffect(function () {
+    if (props.value !== undefined && props.value !== innerValue) {
+      setInnerValue(props.value);
+    }
+  }, [props.value, innerValue], {
+    wait: 1000,
+    leading: false,
+    trailing: true
+  });
+  var columns = useColumns(props.columns, innerValue);
+  var generateValueExtend = usePickerValueExtend(columns);
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    className: "" + classPrefix
+  }, columns.map(function (column, index) {
+    return /*#__PURE__*/React.createElement(Column, {
+      key: index,
+      column: column,
+      value: innerValue[index],
+      onSelect: function onSelect(val) {
+        var nextInnerValue = [].concat(innerValue);
+        nextInnerValue[index] = val;
+        setInnerValue(nextInnerValue);
+      }
+    });
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-mask " + classPrefix + "-mask-top"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-mask " + classPrefix + "-mask-bottom"
+  })));
+});

package/2x/es/components/picker-view/use-columns.d.ts

@@ -0,0 +1,2 @@
+import { PickerColumn, PickerValue } from './picker-view';
+export declare function useColumns(rawColumns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]), value: PickerValue[]): import("./picker-view").PickerColumnItem[][];

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

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+export function useColumns(rawColumns, value) {
+  return useMemo(function () {
+    var columns = typeof rawColumns === 'function' ? rawColumns(value) : rawColumns;
+    return columns.map(function (column) {
+      return column.map(function (item) {
+        return typeof item === 'string' ? {
+          label: item,
+          value: item
+        } : item;
+      });
+    });
+  }, [rawColumns, value]);
+}

package/2x/es/components/picker-view/use-picker-value-extend.d.ts

@@ -0,0 +1,2 @@
+import { PickerValue, PickerValueExtend, PickerColumnItem } from './picker-view';
+export declare function usePickerValueExtend(columns: PickerColumnItem[][]): (val: PickerValue[]) => PickerValueExtend;

package/2x/es/components/picker-view/use-picker-value-extend.js

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+import memoize from 'lodash/memoize';
+export function usePickerValueExtend(columns) {
+  var generateItems = useMemo(function () {
+    return memoize(function (val) {
+      return val.map(function (v, index) {
+        var _a;
+
+        var column = columns[index];
+        if (!column) return null;
+        return (_a = column.find(function (item) {
+          return item.value === v;
+        })) !== null && _a !== void 0 ? _a : null;
+      });
+    }, function (val) {
+      return JSON.stringify(val);
+    });
+  }, [columns]);
+
+  function generateValueExtend(val) {
+    return {
+      get items() {
+        return generateItems(val);
+      }
+
+    };
+  }
+
+  return generateValueExtend;
+}

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

@@ -1,13 +1,15 @@
 /// <reference types="react" />
 import './popover.less';
-export type { Action } from './pop-menu';
+export type { BasePopoverProps, PopoverRef } from './popover';
+export type { PopMenuProps, Action } from './pop-menu';
 declare const _default: import("react").ForwardRefExoticComponent<{
     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?: string | undefined;
-} & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "placement" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & {
+    trigger?: "click" | undefined;
+    placement: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
+} & 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: {
@@ -15,10 +17,11 @@ declare const _default: import("react").ForwardRefExoticComponent<{
         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?: string | undefined;
-    } & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "placement" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & {
+        trigger?: "click" | undefined;
+        placement: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
+    } & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & import("../../utils/native-props").NativeProps<"--z-index"> & {
         actions: T[];
-        onSelect?: ((text: T) => void) | undefined;
+        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>)>;

package/2x/es/components/popover/pop-menu.d.ts

@@ -8,20 +8,20 @@ export declare type Action = {
     onClick?: () => void;
     [key: string]: any;
 };
-declare type PopoverPropsWithActions<T> = BasePopoverProps & {
+export declare type PopMenuProps<T> = BasePopoverProps & {
     actions: T[];
-    onSelect?: (text: T) => void;
+    onAction?: (text: T) => void;
 };
 export declare const PopMenu: <T extends Action = Action>(props: {
     getContainer?: (() => HTMLElement) | undefined;
     destroyOnHide?: boolean | undefined;
     children: React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
     mode?: "dark" | "light" | undefined;
-    trigger?: string | undefined;
-} & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "placement" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & {
+    trigger?: "click" | undefined;
+    placement: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
+} & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & import("../../utils/native-props").NativeProps<"--z-index"> & {
     actions: T[];
-    onSelect?: ((text: T) => void) | undefined;
+    onAction?: ((text: T) => void) | undefined;
 } & {
     ref?: ((instance: PopoverRef | null) => void) | React.RefObject<PopoverRef> | null | undefined;
 }) => ReactElement;
-export {};

package/2x/es/components/popover/pop-menu.js

@@ -12,14 +12,14 @@ export var PopMenu = /*#__PURE__*/forwardRef(function (props, ref) {
   var _onClick = useCallback(function (e) {
     var _a;
 
-    var onSelect = props.onSelect;
+    var onAction = props.onAction;
 
-    if (onSelect) {
-      onSelect(e);
+    if (onAction) {
+      onAction(e);
     }
 
     (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.hide();
-  }, [props.onSelect]);
+  }, [props.onAction]);
 
   var overlay = useMemo(function () {
     return /*#__PURE__*/React.createElement(React.Fragment, null, (props.actions || []).map(function (ele, index) {
@@ -33,8 +33,12 @@ export var PopMenu = /*#__PURE__*/forwardRef(function (props, ref) {
       }, /*#__PURE__*/React.createElement(Button, {
         disabled: ele.disabled,
         onClick: function onClick() {
+          var _a;
+
           if (!ele.disabled) {
             _onClick(ele);
+
+            (_a = ele.onClick) === null || _a === void 0 ? void 0 : _a.call(ele);
           }
         },
         fill: 'none',

package/2x/es/components/popover/popover.css

@@ -111,10 +111,11 @@
 }
 
 .adm-popover {
+  --z-index: var(--adm-popover-z-index, 1030);
   position: absolute;
   top: 0;
   left: 0;
-  z-index: var(--adm-z-index-popover);
+  z-index: var(--z-index);
   font-weight: normal;
   white-space: normal;
   text-align: left;

package/2x/es/components/popover/popover.d.ts

@@ -1,12 +1,14 @@
 import React, { ReactElement } from 'react';
 import type { TooltipProps } from 'rc-tooltip/lib/Tooltip';
+import { NativeProps } from '../../utils/native-props';
 export declare type BasePopoverProps = {
     getContainer?: () => HTMLElement;
     destroyOnHide?: boolean;
     children: ReactElement;
     mode?: 'light' | 'dark';
-    trigger?: string;
-} & Pick<TooltipProps, 'defaultVisible' | 'visible' | 'placement' | 'onVisibleChange' | 'overlayStyle' | 'overlayClassName' | 'align' | 'zIndex'>;
+    trigger?: 'click';
+    placement: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+} & Pick<TooltipProps, 'defaultVisible' | 'visible' | 'onVisibleChange' | 'overlayStyle' | 'overlayClassName' | 'align' | 'zIndex'> & NativeProps<'--z-index'>;
 export declare type PopoverRef = {
     show: () => void;
     hide: () => void;
@@ -17,7 +19,8 @@ export declare const Popover: React.ForwardRefExoticComponent<{
     destroyOnHide?: boolean | undefined;
     children: ReactElement;
     mode?: "dark" | "light" | undefined;
-    trigger?: string | undefined;
-} & Pick<TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "placement" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & {
+    trigger?: "click" | undefined;
+    placement: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+} & Pick<TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & NativeProps<"--z-index"> & {
     content: React.ReactNode;
 } & React.RefAttributes<PopoverRef>>;

package/2x/es/components/popover/popover.js

@@ -1,7 +1,7 @@
 import React, { forwardRef, useImperativeHandle } from 'react';
 import Tooltip from 'rc-tooltip';
 import classNames from 'classnames';
-import { useNewControllableValue } from '../../utils/use-controllable-value';
+import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
 var classPrefix = "adm-popover";
 var enterClassName = 'entering';
@@ -14,21 +14,21 @@ export var Popover = /*#__PURE__*/forwardRef(function (p, ref) {
   var _props$mode = props.mode,
       mode = _props$mode === void 0 ? 'light' : _props$mode;
 
-  var _useNewControllableVa = useNewControllableValue({
+  var _usePropsValue = usePropsValue({
     value: props.visible,
     defaultValue: props.defaultVisible,
     onChange: props.onVisibleChange
   }),
-      visible = _useNewControllableVa[0],
-      onVisibleChange = _useNewControllableVa[1];
+      visible = _usePropsValue[0],
+      setVisible = _usePropsValue[1];
 
   useImperativeHandle(ref, function () {
     return {
       show: function show() {
-        return onVisibleChange(true);
+        return setVisible(true);
       },
       hide: function hide() {
-        return onVisibleChange(false);
+        return setVisible(false);
       },
       visible: visible
     };
@@ -41,7 +41,7 @@ export var Popover = /*#__PURE__*/forwardRef(function (p, ref) {
       return document.body;
     },
     visible: visible,
-    onVisibleChange: onVisibleChange,
+    onVisibleChange: setVisible,
     trigger: props.trigger,
     motion: {
       motionName: {

package/2x/es/components/popup/popup.css

@@ -1,69 +1,35 @@
 .adm-popup {
+  --z-index: var(--adm-popup-z-index, 1000);
   position: fixed;
-  z-index: var(--adm-z-index-popup);
-}
-
-.adm-popup-hidden {
-  display: none;
+  z-index: var(--z-index);
 }
 
 .adm-popup-body {
   position: fixed;
   background-color: #ffffff;
-  z-index: calc(var(--adm-z-index-mask) + 10);
-  --transform-active: none;
+  z-index: calc(var(--z-index) + 10);
 }
 
 .adm-popup-body-position-bottom {
   width: 100%;
   bottom: 0;
   left: 0;
-  --transform-non-active: translate(0, 100%);
 }
 
 .adm-popup-body-position-top {
   width: 100%;
   top: 0;
   left: 0;
-  --transform-non-active: translate(0, -100%);
 }
 
 .adm-popup-body-position-left {
   height: 100%;
   top: 0;
   left: 0;
-  --transform-non-active: translate(-100%, 0);
 }
 
 .adm-popup-body-position-right {
   height: 100%;
   top: 0;
   right: 0;
-  --transform-non-active: translate(100%, 0);
-}
-
-.adm-popup-body-hidden {
-  transform: var(--transform-non-active);
-}
-
-.adm-popup-body-enter {
-  transform: var(--transform-non-active);
-}
-
-.adm-popup-body-enter-active {
-  transform: var(--transform-active);
-  transition: transform 200ms ease-out;
-}
-
-.adm-popup-body-enter-done {
-  transform: var(--transform-active);
-}
-
-.adm-popup-body-exit {
-  transform: var(--transform-active);
-}
-
-.adm-popup-body-exit-active {
-  transform: var(--transform-non-active);
-  transition: transform 200ms;
 }

package/2x/es/components/popup/popup.d.ts

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { GetContainer } from '../../utils/render-to-container';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
 export declare type PopupProps = {
     visible?: boolean;
     mask?: boolean;
@@ -16,5 +17,6 @@ export declare type PopupProps = {
     maskClassName?: string;
     maskStyle?: React.CSSProperties;
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-} & NativeProps;
+    stopPropagation?: PropagationEvent[];
+} & NativeProps<'--z-index'>;
 export declare const Popup: FC<PopupProps>;