@nickeylin/antd-mobile-pro 2.0.0

package/dist/es/components/popup-picker-base/popup-picker-base.d.ts

@@ -0,0 +1,36 @@
+import { ButtonProps, PopupProps } from 'antd-mobile';
+import { NativeProps } from 'antd-mobile/es/utils/native-props';
+import { FC, ReactNode } from 'react';
+interface PopupPickerBaseToolbarProps {
+    title?: ReactNode;
+    confirm?: false | ReactNode | Omit<ButtonProps, 'onClick'>;
+    onConfirm?: () => void;
+    beforeConfirm?(): Promise<void>;
+    cancel?: false | ReactNode | Omit<ButtonProps, 'onClick'>;
+    onCancel?: () => void;
+    clear?: ReactNode | Omit<ButtonProps, 'onClick'>;
+    clearable?: boolean;
+    onClear?: () => void;
+}
+interface LegacyPickerToolbarProps {
+    /**
+     * @deprecated use `cancel` instead
+     */
+    cancelText?: ReactNode;
+    /**
+     * @deprecated use `confirm` instead
+     */
+    confirmText?: ReactNode;
+    /**
+     * @deprecated use `clear` instead
+     */
+    clearText?: ReactNode;
+}
+export type PopupPickerBaseProps = Pick<PopupProps, 'visible' | 'onClose' | 'children' | 'getContainer' | 'afterShow' | 'afterClose' | 'stopPropagation' | 'forceRender' | 'closeOnMaskClick' | 'bodyClassName' | 'bodyStyle' | 'destroyOnClose'> & NativeProps<'--border-radius'> & PopupPickerBaseToolbarProps & {
+    safearea?: boolean;
+} & LegacyPickerToolbarProps;
+/**
+ * 自定义popup选择器的基础组件，封装了popup选择器的通用行为，简化自定义选择器的封装
+ */
+declare const PopupPickerBase: FC<PopupPickerBaseProps>;
+export default PopupPickerBase;

package/dist/es/components/popup-picker-base/popup-picker-base.js

@@ -0,0 +1,136 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["visible", "onClose", "closeOnMaskClick", "children", "title", "confirm", "onConfirm", "beforeConfirm", "cancel", "onCancel", "clear", "clearable", "onClear", "safearea", "confirmText", "cancelText", "clearText", "className", "bodyClassName"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { isReactNode, useMergedState } from '@nickeylin/rc-utils';
+import { Popup, SafeArea } from 'antd-mobile';
+import classNames from 'classnames';
+import { useMemo } from 'react';
+import { cn } from "../../utils/bem";
+import PickerToolBar from "../picker-toolbar";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var bem = cn('picker-popup');
+/**
+ * 自定义popup选择器的基础组件，封装了popup选择器的通用行为，简化自定义选择器的封装
+ */
+var PopupPickerBase = function PopupPickerBase(_ref) {
+  var visibleProp = _ref.visible,
+    onClose = _ref.onClose,
+    _ref$closeOnMaskClick = _ref.closeOnMaskClick,
+    closeOnMaskClick = _ref$closeOnMaskClick === void 0 ? false : _ref$closeOnMaskClick,
+    children = _ref.children,
+    title = _ref.title,
+    confirm = _ref.confirm,
+    _onConfirm = _ref.onConfirm,
+    beforeConfirm = _ref.beforeConfirm,
+    cancel = _ref.cancel,
+    _onCancel = _ref.onCancel,
+    clear = _ref.clear,
+    clearable = _ref.clearable,
+    _onClear = _ref.onClear,
+    _ref$safearea = _ref.safearea,
+    safearea = _ref$safearea === void 0 ? true : _ref$safearea,
+    confirmText = _ref.confirmText,
+    cancelText = _ref.cancelText,
+    clearText = _ref.clearText,
+    className = _ref.className,
+    bodyClassName = _ref.bodyClassName,
+    popupProps = _objectWithoutProperties(_ref, _excluded);
+  var _useMergedState = useMergedState(false, {
+      value: visibleProp,
+      onChange: function onChange(value) {
+        if (!value) {
+          onClose === null || onClose === void 0 || onClose();
+        }
+      }
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    visible = _useMergedState2[0],
+    setVisible = _useMergedState2[1];
+  var confirmProps = useMemo(function () {
+    if (confirm === false) return {};
+    var p;
+    if (typeof confirmText !== 'undefined') {
+      // 兼容旧版API
+      p = {
+        children: confirmText
+      };
+    } else {
+      p = isReactNode(confirm) ? {
+        children: confirm
+      } : confirm;
+    }
+    return {
+      confirmProps: p,
+      onConfirm: function onConfirm() {
+        var _beforeConfirm;
+        ((_beforeConfirm = beforeConfirm === null || beforeConfirm === void 0 ? void 0 : beforeConfirm()) !== null && _beforeConfirm !== void 0 ? _beforeConfirm : Promise.resolve()).then(function () {
+          setVisible(false);
+          _onConfirm === null || _onConfirm === void 0 || _onConfirm();
+        });
+      }
+    };
+  }, [beforeConfirm, confirm, confirmText, _onConfirm, setVisible]);
+  var cancelProps = useMemo(function () {
+    if (cancel === false) return {};
+    var p;
+    if (typeof cancelText !== 'undefined') {
+      // 兼容旧版API
+      p = {
+        children: cancelText
+      };
+    } else {
+      p = isReactNode(cancel) ? {
+        children: cancel
+      } : cancel;
+    }
+    return {
+      cancelProps: p,
+      onCancel: function onCancel() {
+        setVisible(false);
+        _onCancel === null || _onCancel === void 0 || _onCancel();
+      }
+    };
+  }, [cancel, cancelText, _onCancel, setVisible]);
+  var clearProps = useMemo(function () {
+    if (!clearable) return {};
+    var p;
+    if (typeof clearText !== 'undefined') {
+      // 兼容旧版API
+      p = {
+        children: clearText
+      };
+    } else {
+      p = isReactNode(clear) ? {
+        children: clear
+      } : clear;
+    }
+    return {
+      clearProps: p,
+      onClear: function onClear() {
+        setVisible(false);
+        _onClear === null || _onClear === void 0 || _onClear();
+      }
+    };
+  }, [clear, clearText, clearable, _onClear, setVisible]);
+  return /*#__PURE__*/_jsxs(Popup, _objectSpread(_objectSpread({
+    visible: visible,
+    onClose: function onClose() {
+      return setVisible(false);
+    },
+    closeOnMaskClick: closeOnMaskClick,
+    position: "bottom",
+    className: classNames(bem(), className),
+    bodyClassName: classNames(bem('body'), bodyClassName)
+  }, popupProps), {}, {
+    children: [/*#__PURE__*/_jsx(PickerToolBar, _objectSpread(_objectSpread(_objectSpread({
+      title: title
+    }, confirmProps), cancelProps), clearProps)), children, safearea && /*#__PURE__*/_jsx(SafeArea, {
+      position: "bottom"
+    })]
+  }));
+};
+export default PopupPickerBase;

package/dist/es/components/popup-picker-base/prompt.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { PopupPickerMixinProps } from './use-popup-picker-mixin';
+declare function createPrompt<R, P extends Omit<PopupPickerMixinProps, 'value' | 'visible' | 'children' | 'fieldNames'>>(Comp: FC<P>): (props: P) => Promise<R>;
+export default createPrompt;

package/dist/es/components/popup-picker-base/prompt.js

@@ -0,0 +1,48 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { renderToBody } from 'antd-mobile/cjs/utils/render-to-body';
+import { useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+function createPrompt(Comp) {
+  return function (props) {
+    return new Promise(function (resolve, reject) {
+      var unmount = undefined;
+      var Wrapper = function Wrapper() {
+        var _useState = useState(false),
+          _useState2 = _slicedToArray(_useState, 2),
+          visible = _useState2[0],
+          setVisible = _useState2[1];
+        useEffect(function () {
+          setVisible(true);
+        }, []);
+        return /*#__PURE__*/_jsx(Comp, _objectSpread(_objectSpread({}, props), {}, {
+          visible: visible,
+          onConfirm: function onConfirm(val) {
+            var _props$onConfirm;
+            (_props$onConfirm = props.onConfirm) === null || _props$onConfirm === void 0 || _props$onConfirm.call(props, val);
+            resolve(val);
+          },
+          onCancel: function onCancel() {
+            // TODO: global error type
+            // TODO: locale
+            reject(Error('user cancel'));
+          },
+          onClose: function onClose() {
+            var _props$onClose;
+            (_props$onClose = props.onClose) === null || _props$onClose === void 0 || _props$onClose.call(props);
+            setVisible(false);
+          },
+          afterClose: function afterClose() {
+            var _props$afterClose, _unmount;
+            (_props$afterClose = props.afterClose) === null || _props$afterClose === void 0 || _props$afterClose.call(props);
+            (_unmount = unmount) === null || _unmount === void 0 || _unmount();
+          }
+        }));
+      };
+      unmount = renderToBody( /*#__PURE__*/_jsx(Wrapper, {}));
+    });
+  };
+}
+export default createPrompt;

package/dist/es/components/popup-picker-base/style.less

@@ -0,0 +1,11 @@
+@import '../styles/variable.less';
+@class-prefix-picker-popup: ~'@{suid-prefix}-picker-popup';
+
+.@{class-prefix-picker-popup} {
+  --border-radius: var(--suid-popup-picker-border-radius, 8px);
+
+  &__body {
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
+  }
+}

package/dist/es/components/popup-picker-base/use-popup-picker-mixin.d.ts

@@ -0,0 +1,73 @@
+import { CSSProperties, ForwardedRef, ReactNode } from 'react';
+import { PopupPickerBaseProps } from './popup-picker-base';
+export interface PopupPickerValue<T> {
+    value?: T | null;
+    defaultValue?: T | null;
+    onSelect?(value: T | null): void;
+    onConfirm?(value: T | null): void;
+    beforeConfirm?(value: T | null): Promise<void>;
+    children?(value: T | null, text: string, action: PopupPickerActions): ReactNode;
+    /**
+     * 配置相应的属性名称
+     */
+    fieldNames?: {
+        /**
+         * 用于显示的属性名称，对应`children`渲染函数的`text`参数，默认: `'name'`
+         */
+        label?: string;
+        /**
+         * 用于取值的属性名称，若不传此参数，值将会是对象，对应`children`渲染函数的`value`参数
+         */
+        value?: string;
+    };
+}
+export type PopupPickerMixinProps<T = any> = Omit<PopupPickerBaseProps, 'className' | 'style' | 'children' | 'onConfirm'> & {
+    popupClassName?: string;
+    popupStyle?: CSSProperties;
+} & PopupPickerValue<T>;
+export type PopupPickerActions = {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+/**
+ * 封装自定义popup picker时，用来管理popup picker通用状态及行为，包括：
+ * - visible的受控/非受控
+ * - value的受控/非受控
+ * - innerValue的状态管理（需点击确认时，内部存储的临时值，提交后会同步给value）
+ * - useImperativeHandle 关联 ForwardedRef
+ * - 生成PopupPickerBaseProps
+ *
+ * 返回值包括三部分：
+ * - popup属性，用于传入给PopupPickerBase组件
+ * - 状态及更新状态的方法，及 actions
+ * - children 渲染函数返回值
+ *
+ * @example
+ *
+ * const MyPopupPicker = (props, ref) => {
+ *   const [popupProps, states, children] = usePopupPickerMixin(props, ref)
+ *   return (
+ *     <>
+ *       <PopupPickerBase {...popupProps}>
+ *         <div>implementations of picker</div>
+ *       </PopupPickerBase>
+ *       {children}
+ *     </>
+ *   )
+ * }
+ */
+declare function usePopupPickerMixin<T>({ confirm, fieldNames, ...props }: PopupPickerMixinProps<T>, ref: ForwardedRef<PopupPickerActions>): readonly [Omit<PopupPickerBaseProps, "children">, {
+    readonly actions: {
+        toggle: () => void;
+        open: () => void;
+        close: () => void;
+    };
+    readonly visible: boolean;
+    readonly setVisible: (updater: boolean | ((origin: boolean) => boolean), ignoreDestroy?: boolean | undefined) => void;
+    readonly value: T | null;
+    readonly setValue: (updater: T | ((origin: T | null) => T | null) | null, ignoreDestroy?: boolean | undefined) => void;
+    readonly innerValue: T | null;
+    readonly setInnerValue: import("react").Dispatch<import("react").SetStateAction<T | null>>;
+}, ReactNode];
+export default usePopupPickerMixin;

package/dist/es/components/popup-picker-base/use-popup-picker-mixin.js

@@ -0,0 +1,152 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+var _excluded = ["confirm", "fieldNames"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { isReactNode, useMergedState } from '@nickeylin/rc-utils';
+import { pick } from 'lodash';
+import { useEffect, useImperativeHandle, useMemo, useState } from 'react';
+function getLabel(item, labelKey) {
+  if (!item) return '';
+  if (Array.isArray(item)) {
+    return item.map(function (v) {
+      return getLabel(v, labelKey);
+    }).join(',');
+  }
+  if (_typeof(item) === 'object') {
+    var _item$labelKey;
+    return (_item$labelKey = item === null || item === void 0 ? void 0 : item[labelKey]) !== null && _item$labelKey !== void 0 ? _item$labelKey : '';
+  }
+  return "".concat(item);
+}
+
+/**
+ * 封装自定义popup picker时，用来管理popup picker通用状态及行为，包括：
+ * - visible的受控/非受控
+ * - value的受控/非受控
+ * - innerValue的状态管理（需点击确认时，内部存储的临时值，提交后会同步给value）
+ * - useImperativeHandle 关联 ForwardedRef
+ * - 生成PopupPickerBaseProps
+ *
+ * 返回值包括三部分：
+ * - popup属性，用于传入给PopupPickerBase组件
+ * - 状态及更新状态的方法，及 actions
+ * - children 渲染函数返回值
+ *
+ * @example
+ *
+ * const MyPopupPicker = (props, ref) => {
+ *   const [popupProps, states, children] = usePopupPickerMixin(props, ref)
+ *   return (
+ *     <>
+ *       <PopupPickerBase {...popupProps}>
+ *         <div>implementations of picker</div>
+ *       </PopupPickerBase>
+ *       {children}
+ *     </>
+ *   )
+ * }
+ */
+function usePopupPickerMixin(_ref, ref) {
+  var _props$defaultValue, _props$children, _fieldNames$label;
+  var confirm = _ref.confirm,
+    fieldNames = _ref.fieldNames,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useMergedState = useMergedState(false, {
+      value: props.visible,
+      onChange: function onChange(v) {
+        var _props$onClose;
+        if (v === false) (_props$onClose = props.onClose) === null || _props$onClose === void 0 || _props$onClose.call(props);
+      }
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    visible = _useMergedState2[0],
+    setVisible = _useMergedState2[1];
+  var _useMergedState3 = useMergedState((_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 ? _props$defaultValue : null, {
+      value: props.value,
+      onChange: props.onConfirm
+    }),
+    _useMergedState4 = _slicedToArray(_useMergedState3, 2),
+    value = _useMergedState4[0],
+    setValue = _useMergedState4[1];
+
+  // 需要点确定按钮时，内部存储的临时值
+  var _useState = useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    innerValue = _useState2[0],
+    setInnerValue = _useState2[1];
+  var confirmProps = useMemo(function () {
+    if (confirm === false) return false;
+    if (isReactNode(confirm)) {
+      return {
+        children: confirm,
+        disabled: !innerValue
+      };
+    }
+    return _objectSpread({
+      disabled: !innerValue
+    }, confirm);
+  }, [confirm, innerValue]);
+  var actions = useMemo(function () {
+    return {
+      toggle: function toggle() {
+        setVisible(function (v) {
+          return !v;
+        });
+      },
+      open: function open() {
+        setVisible(true);
+      },
+      close: function close() {
+        setVisible(false);
+      }
+    };
+  }, [setVisible]);
+  useImperativeHandle(ref, function () {
+    return actions;
+  });
+  useEffect(function () {
+    if (visible) {
+      setInnerValue(value);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible]);
+  var popupProps = _objectSpread({
+    style: props.popupStyle,
+    className: props.popupClassName,
+    visible: visible,
+    onClose: function onClose() {
+      setVisible(false);
+    },
+    confirm: confirmProps,
+    onConfirm: function onConfirm() {
+      if (props.beforeConfirm) {
+        return props.beforeConfirm(innerValue).then(function () {
+          setValue(innerValue);
+          setVisible(false);
+        });
+      } else {
+        setValue(innerValue);
+        setVisible(false);
+      }
+    },
+    clearable: props.clearable && !!value,
+    onClear: function onClear() {
+      setValue(null);
+      setVisible(false);
+    }
+  }, pick(props, 'title', 'afterClose', 'afterShow', 'getContainer', 'stopPropagation', 'closeOnMaskClick', 'safearea', 'onCancel', 'clear', 'cancel'));
+  return [popupProps, {
+    actions: actions,
+    visible: visible,
+    setVisible: setVisible,
+    value: value,
+    setValue: setValue,
+    innerValue: innerValue,
+    setInnerValue: setInnerValue
+  }, // children
+  (_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.call(props, value, getLabel(value, (_fieldNames$label = fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) !== null && _fieldNames$label !== void 0 ? _fieldNames$label : 'name'), actions)];
+}
+export default usePopupPickerMixin;

package/dist/es/components/pro-calendar-picker/index.d.ts

@@ -0,0 +1,3 @@
+import ProCalendarPicker from './picker';
+export default ProCalendarPicker;
+export type { ProCalendarPickerActions, ProCalendarPickerProps, } from './picker';

package/dist/es/components/pro-calendar-picker/index.js

@@ -0,0 +1,2 @@
+import ProCalendarPicker from "./picker";
+export default ProCalendarPicker;

package/dist/es/components/pro-calendar-picker/picker.d.ts

@@ -0,0 +1,25 @@
+import { CalendarPickerProps, CalendarPickerRef } from 'antd-mobile';
+import { PickerActions } from 'antd-mobile/es/components/picker';
+import { ReactNode } from 'react';
+export interface ProCalendarPickerActions extends Partial<CalendarPickerRef>, PickerActions {
+}
+type ValueProps<V extends string | [string, string]> = {
+    value?: V | null;
+    defaultValue?: V | null;
+    onChange?(value: V | null): void;
+    onConfirm?(value: V | null): void;
+    children?(value: V | null, actionRef: ProCalendarPickerActions): ReactNode;
+};
+export type ProCalendarPickerProps = Omit<CalendarPickerProps, 'selectionMode' | 'value' | 'defaultValue' | 'onChange' | 'onConfirm'> & {
+    onVisibleChange?(visible: boolean): void;
+    /**
+     * 日期格式，默认值：YYYY-MM-DD
+     */
+    format?: string;
+} & (({
+    mode?: 'single';
+} & ValueProps<string>) | ({
+    mode: 'range';
+} & ValueProps<[string, string]>));
+declare const ProCalendarPicker: import("react").ForwardRefExoticComponent<ProCalendarPickerProps & import("react").RefAttributes<ProCalendarPickerActions>>;
+export default ProCalendarPicker;

package/dist/es/components/pro-calendar-picker/picker.js

@@ -0,0 +1,168 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["visible", "onVisibleChange", "mode", "format", "value", "defaultValue", "onChange", "onConfirm", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { CalendarPicker } from 'antd-mobile';
+import { useMergedState } from '@nickeylin/rc-utils';
+import dayjs from 'dayjs';
+import { isDate } from 'lodash';
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function toDateValue(val, option) {
+  var _option$mode = option.mode,
+    mode = _option$mode === void 0 ? 'single' : _option$mode,
+    _option$format = option.format,
+    format = _option$format === void 0 ? 'YYYY-MM-DD' : _option$format;
+  if (val === undefined || val === null) return val;
+  if (!val) return null;
+  if (mode === 'range' && Array.isArray(val) && val.length == 2) {
+    var dayjsValues = val.map(function (v) {
+      return dayjs(v, format);
+    });
+    if (dayjsValues.some(function (d) {
+      return !d.isValid();
+    })) {
+      return null;
+    }
+    return dayjsValues.map(function (d) {
+      return d.toDate();
+    });
+  }
+  if (mode === 'single' && typeof val === 'string') {
+    var dayjsValue = dayjs(val, format);
+    if (!dayjsValue.isValid()) return null;
+    return dayjsValue.toDate();
+  }
+  return null;
+}
+function toStringValue(val, option) {
+  var _option$mode2 = option.mode,
+    mode = _option$mode2 === void 0 ? 'single' : _option$mode2,
+    _option$format2 = option.format,
+    format = _option$format2 === void 0 ? 'YYYY-MM-DD' : _option$format2;
+  if (!val) return val;
+  if (mode === 'range' && Array.isArray(val) && val.length == 2) {
+    return val.map(function (v) {
+      return dayjs(v).format(format);
+    });
+  }
+  if (mode === 'single' && isDate(val)) {
+    return dayjs(val).format(format);
+  }
+  return null;
+}
+var ProCalendarPicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var visibleProp = _ref.visible,
+    onVisibleChange = _ref.onVisibleChange,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'single' : _ref$mode,
+    _ref$format = _ref.format,
+    format = _ref$format === void 0 ? 'YYYY-MM-DD' : _ref$format,
+    valueProp = _ref.value,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    onConfirm = _ref.onConfirm,
+    children = _ref.children,
+    pickerProps = _objectWithoutProperties(_ref, _excluded);
+  var calendarPickerRef = useRef(null);
+  var _useMergedState = useMergedState(visibleProp !== null && visibleProp !== void 0 ? visibleProp : false, {
+      value: visibleProp,
+      onChange: onVisibleChange
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    visible = _useMergedState2[0],
+    setVisible = _useMergedState2[1];
+  var dateValue = useMemo(function () {
+    return toDateValue(valueProp, {
+      mode: mode,
+      format: format
+    });
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [mode, format, JSON.stringify(valueProp)]);
+  var _useMergedState3 = useMergedState(function () {
+      return toDateValue(defaultValue, {
+        mode: mode,
+        format: format
+      });
+    }, {
+      value: dateValue,
+      onChange: function onChange(val) {
+        var stringVal = toStringValue(val, {
+          mode: mode,
+          format: format
+        });
+        onConfirm === null || onConfirm === void 0 || onConfirm(stringVal !== null && stringVal !== void 0 ? stringVal : null);
+      }
+    }),
+    _useMergedState4 = _slicedToArray(_useMergedState3, 2),
+    value = _useMergedState4[0],
+    setValue = _useMergedState4[1];
+  var _useState = useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    localValue = _useState2[0],
+    setLocalValue = _useState2[1];
+  useEffect(function () {
+    if (visible) {
+      setLocalValue(value);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible]);
+  var pickerValueProps = {
+    value: localValue,
+    selectionMode: mode,
+    onChange: function (_onChange) {
+      function onChange(_x) {
+        return _onChange.apply(this, arguments);
+      }
+      onChange.toString = function () {
+        return _onChange.toString();
+      };
+      return onChange;
+    }(function (val) {
+      setLocalValue(val);
+      onChange === null || onChange === void 0 || onChange(toStringValue(val, {
+        mode: mode,
+        format: format
+      }));
+    }),
+    onConfirm: function onConfirm(val) {
+      setValue(val);
+    }
+  };
+  var action = useMemo(function () {
+    return _objectSpread(_objectSpread({}, calendarPickerRef.current), {}, {
+      open: function open() {
+        setVisible(true);
+      },
+      close: function close() {
+        setVisible(false);
+      },
+      toggle: function toggle() {
+        setVisible(function (v) {
+          return !v;
+        });
+      }
+    });
+  }, [setVisible]);
+  useImperativeHandle(ref, function () {
+    return action;
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(CalendarPicker, _objectSpread(_objectSpread({
+      ref: calendarPickerRef,
+      visible: visible,
+      onClose: function onClose() {
+        return setVisible(false);
+      }
+    }, pickerValueProps), pickerProps)), children === null || children === void 0 ? void 0 : children(toStringValue(value !== null && value !== void 0 ? value : null, {
+      mode: mode,
+      format: format
+    }), action)]
+  });
+});
+export default ProCalendarPicker;