antd-mobile 5.17.0 → 5.18.0

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

@@ -0,0 +1,58 @@
+import './picker.less';
+import { prompt } from './prompt';
+export type { PickerProps, PickerRef, PickerActions } from './picker';
+export type { PickerValue, PickerColumnItem, PickerColumn, PickerValueExtend, } from '../picker-view';
+declare const _default: import("react").NamedExoticComponent<{
+    columns: import("../picker-view").PickerColumn[] | ((value: import("../picker-view").PickerValue[]) => import("../picker-view").PickerColumn[]);
+    value?: import("../picker-view").PickerValue[] | undefined;
+    defaultValue?: import("../picker-view").PickerValue[] | undefined;
+    loading?: boolean | undefined;
+    loadingContent?: import("react").ReactNode;
+    onSelect?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
+    onConfirm?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    closeOnMaskClick?: boolean | undefined;
+    visible?: boolean | undefined;
+    title?: import("react").ReactNode;
+    confirmText?: import("react").ReactNode;
+    cancelText?: import("react").ReactNode;
+    children?: ((items: (import("../picker-view").PickerColumnItem | null)[], actions: import("./picker").PickerActions) => import("react").ReactNode) | undefined;
+    renderLabel?: ((item: import("../picker-view").PickerColumnItem) => import("react").ReactNode) | undefined;
+    mouseWheel?: boolean | undefined;
+    popupClassName?: string | undefined;
+    popupStyle?: import("react").CSSProperties | undefined;
+} & Pick<import("../popup").PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--item-height" | "--header-button-font-size" | "--title-font-size" | "--item-font-size", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./picker").PickerActions>> & {
+    readonly type: import("react").ForwardRefExoticComponent<{
+        columns: import("../picker-view").PickerColumn[] | ((value: import("../picker-view").PickerValue[]) => import("../picker-view").PickerColumn[]);
+        value?: import("../picker-view").PickerValue[] | undefined;
+        defaultValue?: import("../picker-view").PickerValue[] | undefined;
+        loading?: boolean | undefined;
+        loadingContent?: import("react").ReactNode;
+        onSelect?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
+        onConfirm?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
+        onCancel?: (() => void) | undefined;
+        onClose?: (() => void) | undefined;
+        closeOnMaskClick?: boolean | undefined;
+        visible?: boolean | undefined;
+        title?: import("react").ReactNode;
+        confirmText?: import("react").ReactNode;
+        cancelText?: import("react").ReactNode;
+        children?: ((items: (import("../picker-view").PickerColumnItem | null)[], actions: import("./picker").PickerActions) => import("react").ReactNode) | undefined;
+        renderLabel?: ((item: import("../picker-view").PickerColumnItem) => import("react").ReactNode) | undefined;
+        mouseWheel?: boolean | undefined;
+        popupClassName?: string | undefined;
+        popupStyle?: import("react").CSSProperties | undefined;
+    } & Pick<import("../popup").PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
+        className?: string | undefined;
+        style?: (import("react").CSSProperties & Partial<Record<"--item-height" | "--header-button-font-size" | "--title-font-size" | "--item-font-size", string>>) | undefined;
+        tabIndex?: number | undefined;
+    } & import("react").AriaAttributes & import("react").RefAttributes<import("./picker").PickerActions>>;
+} & {
+    prompt: typeof prompt;
+};
+export default _default;

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

@@ -0,0 +1,7 @@
+import "./picker.css";
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import { Picker } from './picker';
+import { prompt } from './prompt';
+export default attachPropertiesToComponent(Picker, {
+  prompt
+});

package/2x/es/components/picker/picker-utils.d.ts

@@ -0,0 +1,2 @@
+import { PickerColumnItem } from '../picker-view';
+export declare const defaultRenderLabel: (item: PickerColumnItem) => import("react").ReactNode;

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

@@ -0,0 +1 @@
+export const defaultRenderLabel = item => item.label;

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

@@ -0,0 +1,62 @@
+.adm-picker {
+  --header-button-font-size: var(--adm-font-size-7);
+  --title-font-size: var(--adm-font-size-7);
+  --item-font-size: var(--adm-font-size-8);
+  --item-height: 68px;
+  width: 100%;
+  height: 600px;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  ---item-font-size: var(--item-font-size);
+  ---item-height: var(--item-height);
+}
+
+.adm-picker .adm-picker-view.adm-picker-view {
+  --item-font-size: var(---item-font-size);
+  --item-height: var(---item-height);
+}
+
+.adm-picker-header {
+  flex-shrink: 0;
+  border-bottom: solid 2px var(--adm-color-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 8px;
+}
+
+.adm-picker-header-button {
+  font-size: var(--header-button-font-size);
+  display: inline-block;
+  padding: 16px 16px;
+}
+
+.adm-picker-header-button-disabled,
+.adm-picker-header-button-disabled:active {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.adm-picker-header-title {
+  padding: 8px 8px;
+  font-size: var(--title-font-size);
+  color: var(--adm-color-text);
+  text-align: center;
+  flex: 1;
+}
+
+.adm-picker-body {
+  flex: 1;
+  width: 100%;
+}
+
+.adm-picker-body > .adm-picker-view {
+  --height: 100%;
+}
+
+.adm-picker-popup .adm-popup-body {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+}

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

@@ -0,0 +1,56 @@
+import React, { ReactNode } from 'react';
+import { PopupProps } from '../popup';
+import { NativeProps } from '../../utils/native-props';
+import { PickerColumn, PickerColumnItem, PickerValue, PickerValueExtend } from './index';
+export declare type PickerActions = {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+export declare type PickerRef = PickerActions;
+export declare type PickerProps = {
+    columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]);
+    value?: PickerValue[];
+    defaultValue?: PickerValue[];
+    loading?: boolean;
+    loadingContent?: ReactNode;
+    onSelect?: (value: PickerValue[], extend: PickerValueExtend) => void;
+    onConfirm?: (value: PickerValue[], extend: PickerValueExtend) => void;
+    onCancel?: () => void;
+    onClose?: () => void;
+    closeOnMaskClick?: boolean;
+    visible?: boolean;
+    title?: ReactNode;
+    confirmText?: ReactNode;
+    cancelText?: ReactNode;
+    children?: (items: (PickerColumnItem | null)[], actions: PickerActions) => ReactNode;
+    renderLabel?: (item: PickerColumnItem) => ReactNode;
+    mouseWheel?: boolean;
+    popupClassName?: string;
+    popupStyle?: React.CSSProperties;
+} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation' | 'forceRender' | 'destroyOnClose'> & NativeProps<'--header-button-font-size' | '--title-font-size' | '--item-font-size' | '--item-height'>;
+export declare const Picker: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]);
+    value?: PickerValue[] | undefined;
+    defaultValue?: PickerValue[] | undefined;
+    loading?: boolean | undefined;
+    loadingContent?: ReactNode;
+    onSelect?: ((value: PickerValue[], extend: PickerValueExtend) => void) | undefined;
+    onConfirm?: ((value: PickerValue[], extend: PickerValueExtend) => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    closeOnMaskClick?: boolean | undefined;
+    visible?: boolean | undefined;
+    title?: ReactNode;
+    confirmText?: ReactNode;
+    cancelText?: ReactNode;
+    children?: ((items: (PickerColumnItem | null)[], actions: PickerActions) => ReactNode) | undefined;
+    renderLabel?: ((item: PickerColumnItem) => ReactNode) | undefined;
+    mouseWheel?: boolean | undefined;
+    popupClassName?: string | undefined;
+    popupStyle?: React.CSSProperties | undefined;
+} & Pick<PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--item-height" | "--header-button-font-size" | "--title-font-size" | "--item-font-size", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<PickerActions>>>;

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

@@ -0,0 +1,142 @@
+import React, { useState, useEffect, forwardRef, useImperativeHandle, memo } from 'react';
+import classNames from 'classnames';
+import Popup from '../popup';
+import { mergeProps } from '../../utils/with-default-props';
+import { withNativeProps } from '../../utils/native-props';
+import { usePropsValue } from '../../utils/use-props-value';
+import PickerView from '../picker-view';
+import { generateColumnsExtend, useColumnsExtend } from '../picker-view/columns-extend';
+import { useConfig } from '../config-provider';
+import { useMemoizedFn } from 'ahooks';
+import SafeArea from '../safe-area';
+import { defaultRenderLabel } from './picker-utils';
+const classPrefix = `adm-picker`;
+const defaultProps = {
+  defaultValue: [],
+  closeOnMaskClick: true,
+  renderLabel: defaultRenderLabel,
+  destroyOnClose: false,
+  forceRender: false
+};
+export const Picker = memo(forwardRef((p, ref) => {
+  var _a;
+
+  const {
+    locale
+  } = useConfig();
+  const props = mergeProps(defaultProps, {
+    confirmText: locale.common.confirm,
+    cancelText: locale.common.cancel
+  }, p);
+  const [visible, setVisible] = usePropsValue({
+    value: props.visible,
+    defaultValue: false,
+    onChange: v => {
+      var _a;
+
+      if (v === false) {
+        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      }
+    }
+  });
+  const actions = {
+    toggle: () => {
+      setVisible(v => !v);
+    },
+    open: () => {
+      setVisible(true);
+    },
+    close: () => {
+      setVisible(false);
+    }
+  };
+  useImperativeHandle(ref, () => actions);
+  const [value, setValue] = usePropsValue(Object.assign(Object.assign({}, props), {
+    onChange: val => {
+      var _a;
+
+      const extend = generateColumnsExtend(props.columns, val);
+      (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, val, extend);
+    }
+  }));
+  const extend = useColumnsExtend(props.columns, value);
+  const [innerValue, setInnerValue] = useState(value);
+  useEffect(() => {
+    if (innerValue !== value) {
+      setInnerValue(value);
+    }
+  }, [visible]);
+  useEffect(() => {
+    if (!visible) {
+      setInnerValue(value);
+    }
+  }, [value]);
+  const onChange = useMemoizedFn((val, ext) => {
+    var _a;
+
+    setInnerValue(val);
+
+    if (visible) {
+      (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, val, ext);
+    }
+  });
+  const pickerElement = withNativeProps(props, React.createElement("div", {
+    className: classPrefix
+  }, React.createElement("div", {
+    className: `${classPrefix}-header`
+  }, React.createElement("a", {
+    role: 'button',
+    className: `${classPrefix}-header-button`,
+    onClick: () => {
+      var _a;
+
+      (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
+      setVisible(false);
+    }
+  }, props.cancelText), React.createElement("div", {
+    className: `${classPrefix}-header-title`
+  }, props.title), React.createElement("a", {
+    role: 'button',
+    className: classNames(`${classPrefix}-header-button`, props.loading && `${classPrefix}-header-button-disabled`),
+    onClick: () => {
+      if (props.loading) return;
+      setValue(innerValue, true);
+      setVisible(false);
+    },
+    "aria-disabled": props.loading
+  }, props.confirmText)), React.createElement("div", {
+    className: `${classPrefix}-body`
+  }, React.createElement(PickerView, {
+    loading: props.loading,
+    loadingContent: props.loadingContent,
+    columns: props.columns,
+    renderLabel: props.renderLabel,
+    value: innerValue,
+    mouseWheel: props.mouseWheel,
+    onChange: onChange
+  }))));
+  const popupElement = React.createElement(Popup, {
+    style: props.popupStyle,
+    className: classNames(`${classPrefix}-popup`, props.popupClassName),
+    visible: visible,
+    position: 'bottom',
+    onMaskClick: () => {
+      var _a;
+
+      if (!props.closeOnMaskClick) return;
+      (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
+      setVisible(false);
+    },
+    getContainer: props.getContainer,
+    destroyOnClose: props.destroyOnClose,
+    afterShow: props.afterShow,
+    afterClose: props.afterClose,
+    onClick: props.onClick,
+    forceRender: props.forceRender,
+    stopPropagation: props.stopPropagation
+  }, pickerElement, React.createElement(SafeArea, {
+    position: 'bottom'
+  }));
+  return React.createElement(React.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, extend.items, actions));
+}));
+Picker.displayName = 'Picker';

package/2x/es/components/picker/prompt.d.ts

@@ -0,0 +1,2 @@
+import type { PickerProps, PickerValue } from './index';
+export declare function prompt(props: Omit<PickerProps, 'value' | 'visible' | 'children'>): Promise<PickerValue[] | null>;

package/2x/es/components/picker/prompt.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+import { renderToBody } from '../../utils/render-to-body';
+import { Picker } from './picker';
+export function prompt(props) {
+  return new Promise(resolve => {
+    const Wrapper = () => {
+      const [visible, setVisible] = useState(false);
+      useEffect(() => {
+        setVisible(true);
+      }, []);
+      return React.createElement(Picker, Object.assign({}, props, {
+        visible: visible,
+        onConfirm: (val, extend) => {
+          var _a;
+
+          (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, val, extend);
+          resolve(val);
+        },
+        onClose: () => {
+          var _a;
+
+          (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+          setVisible(false);
+          resolve(null);
+        },
+        afterClose: () => {
+          var _a;
+
+          (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+          unmount();
+        }
+      }));
+    };
+
+    const unmount = renderToBody(React.createElement(Wrapper, null));
+  });
+}

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

@@ -0,0 +1,3 @@
+import type { PickerViewProps, PickerValue, PickerValueExtend } from './picker-view';
+export declare function generateColumnsExtend(rawColumns: PickerViewProps['columns'], val: PickerValue[]): PickerValueExtend;
+export declare function useColumnsExtend(rawColumns: PickerViewProps['columns'], value: PickerValue[]): PickerValueExtend;

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

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import { withCache } from '../../utils/with-cache';
+export function generateColumnsExtend(rawColumns, val) {
+  const columns = withCache(() => {
+    const c = typeof rawColumns === 'function' ? rawColumns(val) : rawColumns;
+    return c.map(column => column.map(item => typeof item === 'string' ? {
+      label: item,
+      value: item
+    } : item));
+  });
+  const items = withCache(() => {
+    return val.map((v, index) => {
+      var _a;
+
+      const column = columns()[index];
+      if (!column) return null;
+      return (_a = column.find(item => item.value === v)) !== null && _a !== void 0 ? _a : null;
+    });
+  });
+  const extend = {
+    get columns() {
+      return columns();
+    },
+
+    get items() {
+      return items();
+    }
+
+  };
+  return extend;
+}
+export function useColumnsExtend(rawColumns, value) {
+  return useMemo(() => generateColumnsExtend(rawColumns, value), [rawColumns, value]);
+}

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,136 @@
+.adm-picker-view {
+  --height: 480px;
+  --item-height: 68px;
+  --item-font-size: var(--adm-font-size-8);
+  height: var(--height);
+  width: 100%;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  background: var(--adm-color-background);
+}
+
+.adm-picker-view-column {
+  height: 100%;
+  flex: 1;
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: none;
+  position: relative;
+  z-index: 0;
+}
+
+.adm-picker-view-column-wheel {
+  width: 100%;
+  cursor: -webkit-grab;
+  cursor: grab;
+  position: absolute;
+  top: calc(50% - var(--item-height) / 2);
+  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: var(--item-font-size);
+  padding: 0 12px;
+  height: var(--item-height);
+  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-column-accessible {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  opacity: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 0;
+  padding-bottom: 2px;
+}
+
+.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: 10000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+}
+
+.adm-picker-view-mask-top,
+.adm-picker-view-mask-bottom {
+  flex: auto;
+}
+
+.adm-picker-view-mask-middle {
+  height: var(--item-height);
+  box-sizing: border-box;
+  flex: none;
+  border-top: solid 2px var(--adm-color-border);
+  border-bottom: solid 2px var(--adm-color-border);
+}
+
+.adm-picker-view-mask-top {
+  background: var(--adm-color-background);
+  -webkit-mask: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
+  mask: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
+}
+
+.adm-picker-view-mask-bottom {
+  background: var(--adm-color-background);
+  -webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
+  mask: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
+}
+
+.adm-picker-view-loading-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

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

@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import { PickerProps } from '../picker';
+export declare type PickerValue = string | null;
+export declare type PickerValueExtend = {
+    columns: PickerColumnItem[][];
+    items: (PickerColumnItem | null)[];
+};
+export declare type PickerColumnItem = {
+    label: ReactNode;
+    value: string;
+    key?: string | number;
+};
+export declare type PickerColumn = (string | PickerColumnItem)[];
+export declare type PickerViewProps = {
+    columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]);
+    value?: PickerValue[];
+    defaultValue?: PickerValue[];
+    mouseWheel?: boolean;
+    loading?: boolean;
+    loadingContent?: ReactNode;
+    onChange?: (value: PickerValue[], extend: PickerValueExtend) => void;
+} & Pick<PickerProps, 'renderLabel'> & NativeProps<'--height' | '--item-height' | '--item-font-size'>;
+export declare const PickerView: React.NamedExoticComponent<PickerViewProps>;

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

@@ -0,0 +1,78 @@
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import { mergeProps } from '../../utils/with-default-props';
+import { Wheel } from './wheel';
+import { useColumnsExtend } from './columns-extend';
+import { withNativeProps } from '../../utils/native-props';
+import { useDebounceEffect } from 'ahooks';
+import { defaultRenderLabel } from '../picker/picker-utils';
+import SpinLoading from '../spin-loading';
+const classPrefix = `adm-picker-view`;
+const defaultProps = {
+  defaultValue: [],
+  renderLabel: defaultRenderLabel,
+  mouseWheel: false,
+  loadingContent: React.createElement("div", {
+    className: `${classPrefix}-loading-content`
+  }, React.createElement(SpinLoading, null))
+};
+export const PickerView = memo(p => {
+  const props = mergeProps(defaultProps, p);
+  const [innerValue, setInnerValue] = useState(props.value === undefined ? props.defaultValue : props.value); // Sync `value` to `innerValue`
+
+  useEffect(() => {
+    if (props.value === undefined) return; // Uncontrolled mode
+
+    if (props.value === innerValue) return;
+    setInnerValue(props.value);
+  }, [props.value]);
+  useEffect(() => {
+    if (props.value === innerValue) return;
+    const timeout = window.setTimeout(() => {
+      if (props.value !== undefined && props.value !== innerValue) {
+        setInnerValue(props.value);
+      }
+    }, 1000);
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [props.value, innerValue]);
+  const extend = useColumnsExtend(props.columns, innerValue);
+  const columns = extend.columns;
+  useDebounceEffect(() => {
+    var _a;
+
+    if (props.value === innerValue) return;
+    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, innerValue, extend);
+  }, [innerValue], {
+    wait: 0,
+    leading: false,
+    trailing: true
+  });
+  const handleSelect = useCallback((val, index) => {
+    setInnerValue(prev => {
+      const next = [...prev];
+      next[index] = val;
+      return next;
+    });
+  }, []);
+  return withNativeProps(props, React.createElement("div", {
+    className: `${classPrefix}`
+  }, props.loading ? props.loadingContent : React.createElement(React.Fragment, null, columns.map((column, index) => React.createElement(Wheel, {
+    key: index,
+    index: index,
+    column: column,
+    value: innerValue[index],
+    onSelect: handleSelect,
+    renderLabel: props.renderLabel,
+    mouseWheel: props.mouseWheel
+  })), React.createElement("div", {
+    className: `${classPrefix}-mask`
+  }, React.createElement("div", {
+    className: `${classPrefix}-mask-top`
+  }), React.createElement("div", {
+    className: `${classPrefix}-mask-middle`
+  }), React.createElement("div", {
+    className: `${classPrefix}-mask-bottom`
+  })))));
+});
+PickerView.displayName = 'PickerView';

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

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import { PickerColumnItem, PickerValue } from './index';
+declare type Props = {
+    index: number;
+    column: PickerColumnItem[];
+    value: PickerValue;
+    onSelect: (value: PickerValue, index: number) => void;
+    renderLabel: (item: PickerColumnItem) => ReactNode;
+    mouseWheel: boolean;
+};
+export declare const Wheel: React.NamedExoticComponent<Props>;
+export {};