@nickeylin/antd-mobile-pro 2.0.2 → 2.1.0

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import './style.less';
+import { computeDays, formatProCalendarDateValues } from './utils';
+declare const ProCalendar: import("react").ForwardRefExoticComponent<import("./pro-calendar").ProCalendarProps & import("react").RefAttributes<import("antd-mobile").CalendarRef>> & {
+    defaultFormat: typeof formatProCalendarDateValues;
+    computeDays: typeof computeDays;
+};
+export default ProCalendar;
+export type { ProCalendarProps } from './pro-calendar';
+export type { PickerDate as ProCalendarDate } from './utils';

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

@@ -0,0 +1,8 @@
+import _ProCalendar from "./pro-calendar";
+import "./style.less";
+import { computeDays, formatProCalendarDateValues } from "./utils";
+var ProCalendar = Object.assign(_ProCalendar, {
+  defaultFormat: formatProCalendarDateValues,
+  computeDays: computeDays
+});
+export default ProCalendar;

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

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { CalendarProps, CalendarRef } from 'antd-mobile';
+import { PickerDate } from './utils';
+interface ProCalendarPropsInner {
+    /**
+     * 是否开启半日选择
+     * @default false
+     */
+    enableHalfDay?: boolean;
+    /**
+     * 是否开启晚上选择
+     * @default false
+     */
+    enableHalfDayNight?: boolean;
+}
+interface ProCalendarNormalProps {
+    selectionMode?: undefined;
+    value?: undefined;
+    defaultValue?: undefined;
+    onChange?: undefined;
+}
+interface ProCalendarSingleProps {
+    selectionMode: 'single';
+    value?: PickerDate | null;
+    defaultValue?: PickerDate | null;
+    onChange?: (value: PickerDate | null) => void;
+}
+interface ProCalendarRangeProps {
+    selectionMode?: 'range';
+    value?: PickerDate[] | null;
+    defaultValue?: PickerDate[] | null;
+    onChange?: (value: PickerDate[] | null) => void;
+}
+export type ProCalendarProps = ProCalendarPropsInner & (ProCalendarNormalProps | ProCalendarSingleProps | ProCalendarRangeProps) & Omit<CalendarProps, 'value' | 'onChange' | 'defaultValue' | 'selectionMode'>;
+export declare function convertValueToRange(value: PickerDate | PickerDate[] | null): PickerDate[] | null;
+declare const ProCalendar: import("react").ForwardRefExoticComponent<ProCalendarProps & import("react").RefAttributes<CalendarRef>>;
+export default ProCalendar;

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

@@ -0,0 +1,138 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["enableHalfDay", "enableHalfDayNight", "weekStartsOn", "value", "onChange", "defaultValue", "selectionMode", "className"];
+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 { useControllableValue } from 'ahooks';
+import { Calendar, Popover } from 'antd-mobile';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import { pickBy } from 'lodash';
+import { cloneElement, forwardRef, useCallback, useMemo } from 'react';
+import { cn } from "../../utils/bem";
+import { HALF_DAY_PERIOD, HALF_DAY_PERIOD_NAMES, classesForDate, mergeDates } from "./utils";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+import { jsx as _jsx } from "react/jsx-runtime";
+var bem = cn('calendar');
+export function convertValueToRange(value) {
+  if (!value) return null;
+  if (Array.isArray(value)) {
+    if (value.length <= 1) return value;
+    return value;
+  }
+  return [value];
+}
+var ProCalendarRaw = function ProCalendarRaw(_ref, ref) {
+  var _ref$enableHalfDay = _ref.enableHalfDay,
+    enableHalfDay = _ref$enableHalfDay === void 0 ? false : _ref$enableHalfDay,
+    _ref$enableHalfDayNig = _ref.enableHalfDayNight,
+    enableHalfDayNight = _ref$enableHalfDayNig === void 0 ? false : _ref$enableHalfDayNig,
+    _ref$weekStartsOn = _ref.weekStartsOn,
+    weekStartsOn = _ref$weekStartsOn === void 0 ? 'Monday' : _ref$weekStartsOn,
+    valueProp = _ref.value,
+    onChangeProp = _ref.onChange,
+    defaultValueProp = _ref.defaultValue,
+    selectionMode = _ref.selectionMode,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useControllableValue = useControllableValue(pickBy({
+      value: valueProp,
+      defaultValue: defaultValueProp,
+      onChange: onChangeProp
+    }, function (v) {
+      return v !== undefined;
+    })),
+    _useControllableValue2 = _slicedToArray(_useControllableValue, 2),
+    value = _useControllableValue2[0],
+    setValue_ = _useControllableValue2[1];
+  var rangeValue = useMemo(function () {
+    var _convertValueToRange;
+    return (_convertValueToRange = convertValueToRange(value)) !== null && _convertValueToRange !== void 0 ? _convertValueToRange : [];
+  }, [value]);
+  var setValue = useCallback(function (v) {
+    if (selectionMode === 'range' && enableHalfDay) {
+      setValue_(function (prev) {
+        if (!v) return v;
+        if (!prev || !Array.isArray(prev) || !prev[0] || prev.length >= 2) {
+          return [v];
+        }
+        return mergeDates([].concat(_toConsumableArray(prev), [v]));
+      });
+      return;
+    }
+    setValue_(v);
+  }, [enableHalfDay, selectionMode, setValue_]);
+  return /*#__PURE__*/_jsx(Calendar, _objectSpread({
+    ref: ref,
+    className: classNames(bem(), className),
+    weekStartsOn: weekStartsOn,
+    selectionMode: enableHalfDay ? undefined : selectionMode,
+    value: value,
+    onChange: function onChange(v) {
+      if (enableHalfDay) return;
+      setValue(v);
+    },
+    cellRender: function cellRender(oriNode, _ref2) {
+      var date = _ref2.date;
+      var dd = dayjs(date);
+      var isWeekend = dd.day() === 0 || dd.day() === 6;
+      if (!enableHalfDay) {
+        var _node = /*#__PURE__*/cloneElement(oriNode, {
+          className: classNames(oriNode.props.className, bem('cell', {
+            weekend: isWeekend
+          }))
+        });
+        return _node;
+      }
+      var nextValue = new Date(date);
+      var classes = classesForDate(date, rangeValue);
+      var node = /*#__PURE__*/cloneElement(oriNode, {
+        className: classNames(oriNode.props.className, bem('cell', classes)),
+        onClick: function onClick() {}
+      });
+      var acts = [HALF_DAY_PERIOD.AM, HALF_DAY_PERIOD.PM];
+      if (enableHalfDayNight) {
+        acts.push(HALF_DAY_PERIOD.NIGHT);
+      }
+      acts.unshift(HALF_DAY_PERIOD.ALL);
+      var actions = acts.map(function (act) {
+        return {
+          key: act,
+          text: HALF_DAY_PERIOD_NAMES[act]
+        };
+      });
+      return /*#__PURE__*/_jsx(Popover.Menu, {
+        actions: actions,
+        placement: "top",
+        className: bem('period-menu'),
+        onAction: function onAction(node) {
+          switch (node.key) {
+            case HALF_DAY_PERIOD.AM:
+              // 上午
+              nextValue.period = HALF_DAY_PERIOD.AM;
+              break;
+            case HALF_DAY_PERIOD.PM:
+              // 下午
+              nextValue.period = HALF_DAY_PERIOD.PM;
+              break;
+            case HALF_DAY_PERIOD.NIGHT:
+              // 晚上
+              nextValue.period = HALF_DAY_PERIOD.NIGHT;
+              break;
+            default:
+              // 全天
+              break;
+          }
+          setValue(nextValue);
+        },
+        trigger: "click",
+        children: node
+      });
+    }
+  }, props));
+};
+var ProCalendar = /*#__PURE__*/forwardRef(ProCalendarRaw);
+export default ProCalendar;

package/dist/es/components/pro-calendar/style.less

@@ -0,0 +1,105 @@
+@import '../styles/variable.less';
+
+@class-prefix-pro-calendar:~ '@{adm-pro-prefix}-calendar';
+
+.@{class-prefix-pro-calendar} {
+  .adm-calendar-cell {
+    &-selected:not(&-selected-begin):not(&-selected-end) {
+      background-color: rgba(22, 119, 255, 0.1);
+      color: var(--adm-color-text);
+    }
+  }
+  .adm-calendar-cell.adm-calendar-cell-disabled {
+    color: var(--adm-color-border);
+  }
+  .adm-calendar-cell.adm-calendar-cell-today {
+    color: var(--adm-color-text);
+    border: 1px solid var(--adm-color-primary);
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+
+  &__cell {
+    position: relative;
+    overflow: hidden;
+    & > div {
+      position: relative;
+    }
+    // &&--weekend {
+    //   color: var(--adm-color-weak);
+    // }
+    &&--allday,
+    &&--allday.adm-calendar-cell-today {
+      background-color: var(--adm-color-primary);
+      color: var(--adm-color-white);
+    }
+    &--begin {
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+    }
+    &--end {
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
+    &--am::before,
+    &--pm::before,
+    &--night::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      background-color: var(--adm-color-primary);
+    }
+
+    &--am {
+      &::before {
+        top: 0;
+        height: 50%;
+        // border-top-left-radius: 4px;
+        // border-top-right-radius: 4px;
+      }
+    }
+    &--pm {
+      &::before {
+        bottom: 0;
+        height: 50%;
+        // border-bottom-left-radius: 4px;
+        // border-bottom-right-radius: 4px;
+      }
+    }
+    &--night {
+      &::before {
+        bottom: 0;
+        height: 6px;
+        // border-bottom-left-radius: 4px;
+        // border-bottom-right-radius: 4px;
+      }
+    }
+    &--cover {
+      background-color: rgba(22, 119, 255, 0.1);
+    }
+  }
+
+  &__period-menu {
+    .adm-popover-menu-list {
+      min-width: 80px;
+    }
+    .adm-popover-menu-item {
+      padding: 0;
+    }
+    .adm-popover-menu-item-text {
+      padding: 10px 20px 10px 20px;
+      text-align: center;
+    }
+  }
+}
+
+html[data-prefers-color-scheme='dark'] {
+  .@{class-prefix-pro-calendar} {
+    &__period-menu {
+      --background: rgba(0, 0, 0, 0.75);
+      --adm-color-text: #ffffff;
+      backdrop-filter: blur(10px);
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+export declare enum HALF_DAY_PERIOD {
+    ALL = 0,
+    AM = 1,
+    PM = 2,
+    NIGHT = 3
+}
+export declare const HALF_DAY_PERIOD_NAMES: {
+    readonly 0: "全天";
+    readonly 1: "上午";
+    readonly 2: "下午";
+    readonly 3: "晚上";
+};
+export type PickerDate = Date & {
+    period?: HALF_DAY_PERIOD;
+};
+/**
+ * 将选择的起止日期合并为有效的日期范围
+ */
+export declare function mergeDates(dates: PickerDate[]): PickerDate[];
+export declare function classesForDate(date: Date, rangeValue: PickerDate[]): {
+    am: boolean;
+    pm: boolean;
+    night: boolean;
+    allday: boolean;
+    begin: boolean;
+    end: boolean;
+    cover: boolean;
+    weekend: boolean;
+};
+export declare function formatProCalendarDate(date?: PickerDate): string;
+export declare function formatProCalendarDateValues(dates?: PickerDate | PickerDate[] | null): string;
+export declare function computeDays(value: PickerDate | PickerDate[] | null | undefined): number;

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

@@ -0,0 +1,138 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import dayjs from 'dayjs';
+export var HALF_DAY_PERIOD = /*#__PURE__*/function (HALF_DAY_PERIOD) {
+  HALF_DAY_PERIOD[HALF_DAY_PERIOD["ALL"] = 0] = "ALL";
+  HALF_DAY_PERIOD[HALF_DAY_PERIOD["AM"] = 1] = "AM";
+  HALF_DAY_PERIOD[HALF_DAY_PERIOD["PM"] = 2] = "PM";
+  HALF_DAY_PERIOD[HALF_DAY_PERIOD["NIGHT"] = 3] = "NIGHT";
+  return HALF_DAY_PERIOD;
+}({});
+export var HALF_DAY_PERIOD_NAMES = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, HALF_DAY_PERIOD.ALL, '全天'), HALF_DAY_PERIOD.AM, '上午'), HALF_DAY_PERIOD.PM, '下午'), HALF_DAY_PERIOD.NIGHT, '晚上');
+/**
+ * 将选择的起止日期合并为有效的日期范围
+ */
+export function mergeDates(dates) {
+  var sortedDates = dates.slice().sort(function (a, b) {
+    return dayjs(a).diff(b, 'day');
+  });
+  var _sortedDates = _slicedToArray(sortedDates, 2),
+    begin = _sortedDates[0],
+    end = _sortedDates[1];
+  var beginDay = dayjs(begin);
+  if (beginDay.isSame(end, 'day')) {
+    // 起始和结束在同一天
+
+    if (!begin.period || !end.period) {
+      // 若其中一个为整天，合并为整天
+      begin.period = undefined;
+      return [end];
+    }
+    if (begin.period === end.period) {
+      // 若时段一样，只取其中一个
+      return [begin];
+    }
+    if ([begin.period, end.period].includes(HALF_DAY_PERIOD.AM)) {
+      // 若时段不一样，其中一个为上午，合并为整天(另外一个一定为下午或晚上)
+      begin.period = undefined;
+      return [begin];
+    }
+    return sortedDates;
+  }
+
+  // 不在同一天
+  if (begin.period === HALF_DAY_PERIOD.AM) {
+    begin.period = undefined;
+  }
+  if (end.period && end.period >= HALF_DAY_PERIOD.PM) {
+    end.period = undefined;
+  }
+  return [begin, end];
+}
+export function classesForDate(date, rangeValue) {
+  var dd = dayjs(date);
+  var _rangeValue = _slicedToArray(rangeValue, 2),
+    begin = _rangeValue[0],
+    end = _rangeValue[1];
+  var isAm = false;
+  var isPm = false;
+  var isNight = false;
+  var isAllDay = false;
+  var isCover = false;
+  var isBegin = false;
+  var isEnd = false;
+  if (begin) {
+    if (dd.isSame(begin, 'day')) {
+      isAm = begin.period === HALF_DAY_PERIOD.AM;
+      isPm = begin.period === HALF_DAY_PERIOD.PM;
+      isNight = begin.period === HALF_DAY_PERIOD.NIGHT;
+      isAllDay = !begin.period;
+      isBegin = true;
+      if (!end) {
+        isEnd = true;
+      } else if (!begin.period || begin.period === HALF_DAY_PERIOD.AM) {
+        isCover = true;
+      }
+    } else if (end && dd.isSame(end, 'day')) {
+      isAm = end.period === HALF_DAY_PERIOD.AM;
+      isPm = end.period === HALF_DAY_PERIOD.PM;
+      isNight = end.period === HALF_DAY_PERIOD.NIGHT;
+      isAllDay = !end.period;
+      isEnd = true;
+      isCover = !!end.period && end.period >= HALF_DAY_PERIOD.PM;
+    } else if (end) {
+      isCover = dd.isAfter(begin, 'day') && dd.isBefore(end, 'day');
+    }
+  }
+  return {
+    am: isAm,
+    pm: isPm,
+    night: isNight,
+    allday: isAllDay,
+    begin: isBegin,
+    end: isEnd,
+    cover: isCover,
+    weekend: dd.day() === 0 || dd.day() === 6
+  };
+}
+export function formatProCalendarDate(date) {
+  if (!date) {
+    return '';
+  }
+  var dateStr = dayjs(date).format('YYYY-MM-DD');
+  var periodStr = !date.period ? '' : HALF_DAY_PERIOD_NAMES[date.period];
+  return [dateStr, periodStr].filter(function (v) {
+    return !!v;
+  }).join(' ');
+}
+export function formatProCalendarDateValues(dates) {
+  if (!dates) {
+    return '';
+  }
+  var arr = Array.isArray(dates) ? dates : [dates];
+  return arr.map(formatProCalendarDate).join(' ~ ');
+}
+export function computeDays(value) {
+  if (!value) {
+    return 0;
+  }
+  var rangeValue = Array.isArray(value) ? value : [value];
+  var _rangeValue2 = _slicedToArray(rangeValue, 2),
+    begin = _rangeValue2[0],
+    end = _rangeValue2[1];
+  if (!end) {
+    if (!begin.period) return 1;
+    if (begin.period === HALF_DAY_PERIOD.NIGHT) return 0;
+    return 0.5;
+  }
+  var days = dayjs(end).diff(dayjs(begin), 'day') + 1;
+  if (begin.period === HALF_DAY_PERIOD.PM) {
+    days -= 0.5;
+  } else if (begin.period === HALF_DAY_PERIOD.NIGHT) {
+    days -= 1;
+  }
+  if (end.period === HALF_DAY_PERIOD.AM) {
+    days -= 0.5;
+  }
+  return days;
+}

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

@@ -1,3 +1,4 @@
-import ProCalendarPicker from './picker';
+import ProCalendarPicker from './pro-calendar-picker';
+import './style.less';
 export default ProCalendarPicker;
-export type { ProCalendarPickerActions, ProCalendarPickerProps, } from './picker';
+export type { ProCalendarPickerActions, ProCalendarPickerProps, } from './pro-calendar-picker';

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

@@ -1,2 +1,3 @@
-import ProCalendarPicker from "./picker";
+import ProCalendarPicker from "./pro-calendar-picker";
+import "./style.less";
 export default ProCalendarPicker;

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

@@ -0,0 +1,13 @@
+import { CalendarRef } from 'antd-mobile';
+import { PickerActions } from 'antd-mobile/es/components/picker';
+import { ReactNode } from 'react';
+import { ProCalendarDate, ProCalendarProps } from '../pro-calendar';
+export interface ProCalendarPickerActions extends Partial<CalendarRef>, PickerActions {
+}
+export type ProCalendarPickerValue = ProCalendarDate | ProCalendarDate[] | null | undefined;
+export type ProCalendarPickerProps = ProCalendarProps & {
+    allowClear?: boolean;
+    children?: (value: ProCalendarPickerValue, action: ProCalendarPickerActions) => ReactNode;
+};
+declare const ProCalendarPicker: import("react").ForwardRefExoticComponent<ProCalendarPickerProps & import("react").RefAttributes<ProCalendarPickerActions>>;
+export default ProCalendarPicker;

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

@@ -0,0 +1,124 @@
+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 = ["children", "allowClear", "selectionMode", "value", "onChange"];
+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 { useControllableValue } from 'ahooks';
+import { Button, Popup, SafeArea } from 'antd-mobile';
+import { CloseOutline } from 'antd-mobile-icons';
+import { pickBy } from 'lodash';
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { cn } from "../../utils/bem";
+import ProCalendar from "../pro-calendar";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var bem = cn('calendar-picker');
+var ProCalendarPickerRaw = function ProCalendarPickerRaw(_ref, ref) {
+  var children = _ref.children,
+    _ref$allowClear = _ref.allowClear,
+    allowClear = _ref$allowClear === void 0 ? false : _ref$allowClear,
+    _ref$selectionMode = _ref.selectionMode,
+    selectionMode = _ref$selectionMode === void 0 ? 'single' : _ref$selectionMode,
+    valueProp = _ref.value,
+    onChange = _ref.onChange,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useControllableValue = useControllableValue(pickBy({
+      value: valueProp,
+      onChange: onChange
+    })),
+    _useControllableValue2 = _slicedToArray(_useControllableValue, 2),
+    value = _useControllableValue2[0],
+    setValue = _useControllableValue2[1];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useState3 = useState(valueProp),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tempValue = _useState4[0],
+    setTempValue = _useState4[1];
+  useEffect(function () {
+    if (visible) setTempValue(value !== null && value !== void 0 ? value : null);
+  }, [value, visible]);
+  var calendarRef = useRef(null);
+  var action = useMemo(function () {
+    return _objectSpread(_objectSpread({}, calendarRef.current), {}, {
+      open: function open() {
+        setVisible(true);
+      },
+      close: function close() {
+        setVisible(false);
+      },
+      toggle: function toggle() {
+        setVisible(function (v) {
+          return !v;
+        });
+      }
+    });
+  }, []);
+  useImperativeHandle(ref, function () {
+    return action;
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [children === null || children === void 0 ? void 0 : children(value, action), /*#__PURE__*/_jsxs(Popup, {
+      visible: visible,
+      onClose: function onClose() {
+        return setVisible(false);
+      },
+      className: bem('popup'),
+      destroyOnClose: true,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: bem('popup-head'),
+        children: [allowClear && /*#__PURE__*/_jsx(Button, {
+          color: "default",
+          fill: "none",
+          size: "small",
+          className: bem('popup-head__clear'),
+          onClick: function onClick() {
+            setValue(undefined);
+            setVisible(false);
+          },
+          children: "\u6E05\u9664"
+        }), /*#__PURE__*/_jsx("div", {
+          className: bem('popup-head__title'),
+          children: "\u65E5\u671F\u9009\u62E9"
+        }), /*#__PURE__*/_jsx(Button, {
+          color: "default",
+          fill: "none",
+          size: "small",
+          className: bem('popup-head__close'),
+          onClick: function onClick() {
+            setVisible(false);
+          },
+          children: /*#__PURE__*/_jsx(CloseOutline, {})
+        })]
+      }), /*#__PURE__*/_jsx(ProCalendar, _objectSpread(_objectSpread({
+        selectionMode: selectionMode,
+        value: tempValue !== null && tempValue !== void 0 ? tempValue : null,
+        onChange: function onChange(v) {
+          setTempValue(v);
+        }
+      }, props), {}, {
+        ref: calendarRef
+      })), /*#__PURE__*/_jsxs("div", {
+        className: bem('popup-footer'),
+        children: [/*#__PURE__*/_jsx(Button, {
+          block: true,
+          color: "primary",
+          onClick: function onClick() {
+            console.log('setValue', tempValue);
+            setValue(tempValue);
+            setVisible(false);
+          },
+          children: "\u786E\u5B9A"
+        }), /*#__PURE__*/_jsx(SafeArea, {
+          position: "bottom"
+        })]
+      })]
+    })]
+  });
+};
+var ProCalendarPicker = /*#__PURE__*/forwardRef(ProCalendarPickerRaw);
+export default ProCalendarPicker;

package/dist/es/components/pro-calendar-picker/style.less

@@ -0,0 +1,38 @@
+@import '../styles/variable.less';
+
+@class-prefix-pro-calendar-picker:~ '@{adm-pro-prefix}-calendar-picker';
+.@{class-prefix-pro-calendar-picker} {
+  &__popup-head {
+    font-size: var(--adm-font-size-9);
+    color: var(--adm-color-text);
+    position: relative;
+    border-bottom: 1px solid var(--adm-color-border);
+    margin-bottom: 10px;
+    & &__clear {
+      position: absolute;
+      left: 6px;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      padding: 6px 12px;
+      height: 30px;
+    }
+    &__title {
+      text-align: center;
+      line-height: 45px;
+    }
+    & &__close {
+      position: absolute;
+      right: 6px;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      padding: 6px 12px;
+      height: 30px;
+    }
+  }
+  &__popup-footer {
+    padding: var(--adm-padding-m) var(--adm-padding-l);
+    border-top: 1px solid var(--adm-color-border);
+  }
+}

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

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { ProCalendarPickerProps } from '../pro-calendar-picker';
 import { ProFormItemFieldProps } from './pro-form-item';
-export type ProFormCalendarPickerProps = ProFormItemFieldProps<ProCalendarPickerProps> & Pick<ProCalendarPickerProps, 'mode' | 'min' | 'max' | 'format'>;
+export type ProFormCalendarPickerProps = ProFormItemFieldProps<ProCalendarPickerProps> & Pick<ProCalendarPickerProps, 'selectionMode' | 'min' | 'max' | 'enableHalfDay'>;
 declare const ProFormCalendarPicker: FC<ProFormCalendarPickerProps>;
 export default ProFormCalendarPicker;