@pisell/date-picker 1.0.75 → 1.0.77

package/lib/Drawer/index.js

@@ -0,0 +1,62 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Drawer/index.tsx
+var Drawer_exports = {};
+__export(Drawer_exports, {
+  default: () => Drawer_default
+});
+module.exports = __toCommonJS(Drawer_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_index = require("./index.less");
+var Drawer = (props) => {
+  const { open, className, onClose, children, height = 375 } = props;
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, open && /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-drawer-overlay", onClick: onClose }), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)("date-picker-drawer", className, {
+        open
+      }),
+      onClick: () => {
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "date-picker-drawer-content",
+        style: { height }
+      },
+      children
+    )
+  ));
+};
+var Drawer_default = Drawer;

package/lib/Drawer/index.less

@@ -0,0 +1,40 @@
+.date-picker-drawer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: white;
+  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
+  transform: translateY(100%);
+  transition: transform 0.3s ease-out;
+  z-index: 1000;
+  border-radius: 8px 8px 0 0;
+}
+
+.date-picker-drawer-content {
+  //transform: translateY(100%);
+  //transition: transform 0.3s ease-out;
+  //position: absolute;
+  //padding: 20px;
+  //bottom: 0;
+  //width: 100vw;
+  //background-color: #fff;
+  //z-index: 1000;
+  //box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
+  //border-radius: 8px 8px 0px 0px;
+  //height: 650px;
+}
+
+.date-picker-drawer.open {
+  transform: translateY(0);
+}
+
+.date-picker-drawer-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+}

package/lib/PisellDateRangePicker/LocaleContext.d.ts

@@ -0,0 +1,2 @@
+export declare const LocaleContext: any;
+export declare const LocaleProvider: any;

package/lib/PisellDateRangePicker/index.d.ts

@@ -0,0 +1,81 @@
+import { Dayjs } from "dayjs";
+import React from "react";
+import { ButtonProps } from "antd";
+import { PopperPlacementType } from "@mui/base/Popper/Popper.types";
+import { PresetType } from "../Shortcuts";
+import "dayjs/locale/zh-cn";
+import "dayjs/locale/en";
+import "dayjs/locale/zh-tw";
+import "./index.less";
+export interface PisellDateRangePickerProps {
+    /** 再次选择日期时是否清除结束时间 */
+    clearEndOnSelection?: boolean;
+    /** 日期选择确认回调 */
+    onChange?: (day: (Dayjs | null)[] | string) => void;
+    /** 日期改变回调 此处只为了组件外拿到当前日期项进行状态操作 通常情况下只使用onChange来拿value */
+    onDateChange?: (day: (Dayjs | null)[]) => void;
+    /** 日期选择值 */
+    value?: Dayjs[] | string;
+    /** 日期选择默认值 */
+    defaultValue?: Dayjs[];
+    /** 快捷选择项 */
+    presets?: PresetType[];
+    /** 类名 */
+    className?: string;
+    /** 是否显示时间选择 这里参数为antd TimePickerProps */
+    showTime?: boolean | {
+        defaultValue: Dayjs;
+        [key: string]: any;
+    }[];
+    /** 占位符 */
+    placeholder?: string;
+    /** 是否禁用日期 */
+    disabledDate?: (day: Dayjs, position: "start" | "end", value: Dayjs[]) => boolean;
+    /** 日期格式 */
+    format?: string;
+    /** 后缀图标 */
+    suffixIcon?: React.ReactNode;
+    /** 是否显示边框 */
+    bordered?: boolean;
+    /** 是否打开日期选择 */
+    open?: boolean;
+    /** 关闭回调 */
+    onClose?: () => void;
+    /** 打开回调 */
+    onOpen?: () => void;
+    /** 弹窗宽度 */
+    popupWidth?: number;
+    /** 最小日期 */
+    minDate?: Dayjs;
+    /** 最大日期 */
+    maxDate?: Dayjs;
+    /** 月份切换事件 */
+    onMonthChange?: (value: Dayjs) => void;
+    /** 额外的弹出日历 className	 */
+    popupClassName?: string;
+    /** 默认显示月份	 */
+    defaultCalendarMonth?: Dayjs;
+    /** ok 按钮 props		 */
+    okButtonProps?: ButtonProps;
+    /** cancel 按钮 props		 */
+    cancelButtonProps?: ButtonProps;
+    /**
+     * CSS media query when `Mobile` mode will be changed to `Desktop`.
+     * @default '@media (pointer: fine)'
+     * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
+     */
+    desktopModeMediaQuery?: string;
+    style?: React.CSSProperties;
+    /** 是否展示清除按钮 */
+    allowClear?: boolean;
+    /** true 将弹窗当前DOM层次结构下 false 追加到body */
+    disablePortal?: boolean;
+    /** 弹窗放置位置 */
+    placement?: PopperPlacementType;
+    /** 输入框只读 */
+    inputReadOnly: boolean;
+    /** 使用快捷筛选时返回快捷字符串 */
+    returnShortcutString?: boolean;
+}
+declare const PisellDateRangePicker: (props: PisellDateRangePickerProps) => JSX.Element;
+export default PisellDateRangePicker;

package/lib/PisellDateRangePicker/index.js

@@ -40,7 +40,7 @@ var import_SingleInputDateRangeField = require("../SingleInputDateRangeField");
 var import_classnames = __toESM(require("classnames"));
 var import_utils = require("@pisell/utils");
 var import_useCssVariables = __toESM(require("./useCssVariables"));
-var import_CloseCircle = __toESM(require("./CloseCircle"));
+var import_CloseCircle = __toESM(require("../icon/CloseCircle"));
 var import_zh_cn = require("dayjs/locale/zh-cn");
 var import_en = require("dayjs/locale/en");
 var import_zh_tw = require("dayjs/locale/zh-tw");
@@ -48,7 +48,14 @@ var import_index = require("./index.less");
 var import_utils2 = require("../utils");
 var import_LocaleContext = require("./LocaleContext");
 var import_locales = require("../locales");
-var transDayjsArr = (dayjsArr, defaultValue) => {
+var import_Dialog = __toESM(require("../Dialog"));
+var import_Toolbar = __toESM(require("../Toolbar"));
+var import_useNextDay = __toESM(require("../hooks/useNextDay"));
+var import_constants = require("../constants");
+var transDayjsArr = (dayjsArr, defaultValue, _presets) => {
+  if ((0, import_utils.isString)(dayjsArr)) {
+    return (0, import_utils2.getShortcutValue)(dayjsArr, _presets);
+  }
   let newArr = dayjsArr || defaultValue || [null, null];
   if ((dayjsArr == null ? void 0 : dayjsArr.length) === 0) {
     newArr = defaultValue || [null, null];
@@ -61,7 +68,7 @@ var PisellDateRangePicker = (props) => {
   const {
     onChange: propsOnChange,
     value: propsValue,
-    presets = [],
+    presets,
     className,
     showTime,
     placeholder,
@@ -88,19 +95,41 @@ var PisellDateRangePicker = (props) => {
     allowClear,
     disablePortal,
     placement = "auto",
-    inputReadOnly
+    inputReadOnly = true,
+    returnShortcutString = false
   } = props;
   const [open, setOpen] = (0, import_react.useState)(propsOpen ?? false);
   const { locale } = (0, import_react.useContext)(import_LocaleContext.LocaleContext) || {};
+  const [currentShortcut, setCurrentShortcut] = (0, import_react.useState)("");
+  const lastConfirmShortcut = (0, import_react.useRef)((0, import_utils.isString)(propsValue) ? propsValue : null);
   (0, import_react.useEffect)(() => {
     (0, import_utils.isBoolean)(propsOpen) && setOpen(propsOpen);
   }, [propsOpen]);
+  const _presets = (0, import_react.useMemo)(() => {
+    return (0, import_utils2.formatPresets)(presets || import_constants.defaultPresets);
+  }, [presets]);
   const [_value, setValue] = (0, import_react.useState)(
-    () => transDayjsArr(propsValue, defaultValue)
+    () => transDayjsArr(propsValue, defaultValue, _presets)
   );
   (0, import_react.useEffect)(() => {
-    setValue(transDayjsArr(propsValue, defaultValue));
+    setValue(transDayjsArr(propsValue, defaultValue, _presets));
+    if ((0, import_utils.isString)(propsValue)) {
+      setCurrentShortcut(propsValue);
+    }
   }, [propsValue]);
+  const getVal = () => {
+    let val = _value;
+    if (returnShortcutString) {
+      val = currentShortcut;
+    } else if (currentShortcut) {
+      val = (0, import_utils2.getShortcutValue)(currentShortcut, _presets);
+    }
+    return val;
+  };
+  (0, import_useNextDay.default)(() => {
+    setValue(getVal());
+    setTimeout(handleOk);
+  });
   const handleOpen = () => {
     setOpen(true);
     onOpen == null ? void 0 : onOpen();
@@ -108,32 +137,24 @@ var PisellDateRangePicker = (props) => {
   const handleClose = () => {
     setOpen(false);
     onClose == null ? void 0 : onClose();
-    onDateChange == null ? void 0 : onDateChange(transDayjsArr(propsValue, defaultValue));
-    setValue(transDayjsArr(propsValue, defaultValue));
+    const v = transDayjsArr(propsValue, defaultValue, _presets);
+    onDateChange == null ? void 0 : onDateChange(v);
+    setValue(v);
+    setCurrentShortcut(lastConfirmShortcut.current);
   };
   const handleOk = () => {
     setOpen(false);
     onClose == null ? void 0 : onClose();
-    propsOnChange == null ? void 0 : propsOnChange(_value);
+    propsOnChange == null ? void 0 : propsOnChange(getVal());
+    lastConfirmShortcut.current = currentShortcut;
   };
-  const _presets = (0, import_react.useMemo)(() => {
-    if ((0, import_utils2.isMobile)())
-      return [];
-    return presets.map((item) => {
-      const getValue = () => {
-        if (typeof item.getValue === "function") {
-          return item.getValue();
-        }
-        return item == null ? void 0 : item.value;
-      };
-      return {
-        label: item.label,
-        getValue
-      };
-    });
-  }, [presets]);
-  const handleChange = (val, type) => {
+  const handleChange = (val, type, shortcutValue) => {
     let newVal = val;
+    if ((0, import_utils.isString)(shortcutValue) && type === "shortcuts") {
+      setCurrentShortcut(shortcutValue);
+    } else {
+      setCurrentShortcut(null);
+    }
     if ((0, import_utils.isArr)(showTime) && type !== "time") {
       newVal = newVal.map((item, index) => {
         var _a, _b, _c, _d, _e, _f, _g;
@@ -143,16 +164,22 @@ var PisellDateRangePicker = (props) => {
         return item || null;
       });
     }
+    if (!clearEndOnSelection) {
+      if (newVal[0] && !newVal[1]) {
+        newVal[1] = newVal[0];
+      } else if (newVal[1] && !newVal[0]) {
+        newVal[0] = newVal[1];
+      }
+    }
     if (clearEndOnSelection && type !== "set" && _value.filter(Boolean).length === 2) {
       newVal = [newVal[0], null];
     }
     onDateChange == null ? void 0 : onDateChange(newVal);
     setValue(newVal);
   };
-  const hasPreset = (_presets == null ? void 0 : _presets.length) > 0;
   (0, import_useCssVariables.default)({
     variables: {
-      "--pisell-date-range-picker-popup-width": `${hasPreset ? popupWidth + 192 : popupWidth}px`
+      "--pisell-date-range-picker-popup-width": `${popupWidth}px`
     },
     dom: document.body
   });
@@ -162,6 +189,8 @@ var PisellDateRangePicker = (props) => {
     setOpen(false);
     onClose == null ? void 0 : onClose();
     propsOnChange == null ? void 0 : propsOnChange([null, null]);
+    setCurrentShortcut(null);
+    lastConfirmShortcut.current = null;
   };
   const endAdornment = (0, import_react.useMemo)(() => {
     if (!allowClear) {
@@ -196,6 +225,19 @@ var PisellDateRangePicker = (props) => {
     }
     return localeValue === "en" || localeValue === "en-US" ? "DD/MM/YYYY" : "YYYY/MM/DD";
   }, [propsFormat, locale]);
+  const inputPropsObj = (0, import_react.useMemo)(() => {
+    var _a;
+    let obj = {
+      endAdornment
+    };
+    if (((_a = _value == null ? void 0 : _value.every) == null ? void 0 : _a.call(_value, Boolean)) && (0, import_utils2.getPresetLabel)(currentShortcut, _presets)) {
+      obj = {
+        ...obj,
+        value: (0, import_utils2.getPresetLabel)(currentShortcut, _presets)
+      };
+    }
+    return obj;
+  }, [_value, endAdornment, returnShortcutString, currentShortcut]);
   return /* @__PURE__ */ import_react.default.createElement(
     "span",
     {
@@ -225,14 +267,18 @@ var PisellDateRangePicker = (props) => {
         slots: {
           actionBar: import_ActionBar.default,
           shortcuts: import_Shortcuts.default,
-          field: import_SingleInputDateRangeField.SingleInputDateRangeField
+          field: import_SingleInputDateRangeField.SingleInputDateRangeField,
+          dialog: import_Dialog.default,
+          // calendarHeader: CustomCalendarHeader,
+          // calendarHeader: <div>12312</div> ,
+          toolbar: import_Toolbar.default
         },
         dayOfWeekFormatter: (day) => {
           return day;
         },
         slotProps: {
           shortcuts: {
-            items: _presets,
+            items: [],
             changeImportance: "set",
             onChange: handleChange
           },
@@ -245,15 +291,25 @@ var PisellDateRangePicker = (props) => {
             okButtonProps,
             cancelButtonProps
           },
+          toolbar: {
+            hidden: false,
+            presetItems: _presets,
+            format,
+            locale,
+            onChange: handleChange,
+            currentShortcut,
+            setCurrentShortcut
+          },
+          layout: {
+            orientation: "portrait"
+          },
           field: {
             value: _value,
             size: "small",
             fullWidth: true,
             // variant: "standard",
             // hiddenLabel: true,
-            InputProps: {
-              endAdornment
-            },
+            InputProps: inputPropsObj,
             ...readOnlyProps
           },
           popper: {

package/lib/PisellDateRangePicker/index.less

@@ -5,6 +5,7 @@
   //.MuiInputBase-input {
   //  padding: 10px;
   //}
+
   label {
     font-size: 14px;
   }
@@ -42,11 +43,13 @@
 .MuiPickersPopper-root {
   .MuiPickersLayout-root {
     width: var(--pisell-date-range-picker-popup-width, 625px);
+    display: block;
     .MuiDateRangeCalendar-root {
       width: 100%;
       flex: 1;
       .MuiDateRangeCalendar-monthContainer {
         width: 50%;
+        border: none;
         .MuiDayCalendar-header {
           padding: 0 20px;
           .MuiDayCalendar-weekDayLabel {
@@ -95,3 +98,56 @@
   grid-column: 1 !important;
   grid-row: 1/3 !important;
 }
+
+.date-picker-paid-drawer {
+  .MuiPickersLayout-root {
+    display: block;
+  }
+}
+
+.date-picker-custom-drawer {
+  .MuiPickersCalendarHeader-root {
+    padding-left: 35px;
+    padding-right: 22px;
+  }
+  .MuiPickersLayout-root {
+    display: block;
+  }
+  .MuiPickersLayout-toolbar {
+    display: none;
+  }
+  .MuiDayCalendar-header {
+    padding: 0 20px;
+    .MuiDayCalendar-weekDayLabel {
+      flex: 1;
+      max-width: 46px;
+    }
+  }
+  .MuiDayCalendar-slideTransition {
+    height: 315px;
+    .MuiDayCalendar-monthContainer {
+      padding: 0 20px;
+    }
+  }
+  .MuiDateRangeCalendar-monthContainer {
+    width: 100%;
+    .MuiDateRangePickerDay-root {
+      flex: 1;
+      max-width: 50px;
+      max-height: 50px;
+      .MuiDateRangePickerDay-day {
+        width: 100%;
+        height: auto;
+        &::before {
+          content: "";
+          display: block;
+          padding-top: 100%;
+        }
+      }
+    }
+  }
+  .MuiDrawer-paperAnchorBottom {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+}

package/lib/Shortcuts/index.d.ts

@@ -1,9 +1,10 @@
 import "./index.less";
 import { Dayjs } from "dayjs";
 export declare type PresetType = {
-    label: string;
-    getValue: () => [Dayjs, Dayjs];
-    value: [Dayjs, Dayjs];
+    label?: string;
+    getValue?: () => [Dayjs, Dayjs];
+    value: [Dayjs, Dayjs] | "today" | "yesterday" | "last_3_days" | "last_7_days" | "last_30_days" | "last_90_days" | "last_180_days" | "tomorrow" | "next_3_days" | "next_7_days" | "next_30_days" | "next_90_days" | "next_180_days";
+    key?: string;
 };
 interface ShortcutsProps {
     items: PresetType[];

package/lib/Toolbar/index.d.ts

@@ -0,0 +1,3 @@
+import "./index.less";
+declare const Toolbar: (props: any) => JSX.Element;
+export default Toolbar;

package/lib/Toolbar/index.js

@@ -0,0 +1,139 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Toolbar/index.tsx
+var Toolbar_exports = {};
+__export(Toolbar_exports, {
+  default: () => Toolbar_default
+});
+module.exports = __toCommonJS(Toolbar_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_dayjs = __toESM(require("dayjs"));
+var import_browserSelect = __toESM(require("../browserSelect"));
+var import_locales = require("../locales");
+var import_index = require("./index.less");
+var isValidDate = (dateString, format) => {
+  const date = (0, import_dayjs.default)(dateString, format, true);
+  return date.isValid();
+};
+var Toolbar = (props) => {
+  const {
+    presetItems,
+    value = [],
+    locale,
+    onChange,
+    currentShortcut,
+    setCurrentShortcut
+  } = props;
+  const format = locale === "en" || locale === "en-US" ? "DD/MM/YYYY" : "YYYY/MM/DD";
+  const [startStr, setStartStr] = (0, import_react.useState)("");
+  const [endStr, setEndStr] = (0, import_react.useState)("");
+  (0, import_react.useEffect)(() => {
+    if (value == null ? void 0 : value[0]) {
+      setStartStr(value[0].format(format));
+    } else {
+      setStartStr("");
+    }
+    if (value == null ? void 0 : value[1]) {
+      setEndStr(value[1].format(format));
+    } else {
+      setEndStr("");
+    }
+  }, [value]);
+  const handleStartChange = (e) => {
+    var _a, _b;
+    const val = e.target.value;
+    setStartStr(val);
+    if (isValidDate(val, format)) {
+      const valDate = (0, import_dayjs.default)(val, format);
+      const newValue = [...value];
+      const start = newValue[0] || (0, import_dayjs.default)();
+      newValue[0] = ((_b = (_a = start == null ? void 0 : start.set("year", (valDate == null ? void 0 : valDate.get("year")) || 0)) == null ? void 0 : _a.set("month", (valDate == null ? void 0 : valDate.get("month")) || 0)) == null ? void 0 : _b.set("date", (valDate == null ? void 0 : valDate.get("date")) || 0)) || null;
+      onChange(newValue);
+    }
+  };
+  const handleEndChange = (e) => {
+    var _a, _b;
+    const val = e.target.value;
+    setEndStr(val);
+    if (isValidDate(val, format)) {
+      const valDate = (0, import_dayjs.default)(val, format);
+      const newValue = [...value];
+      const end = newValue[1] || (0, import_dayjs.default)();
+      newValue[1] = ((_b = (_a = end == null ? void 0 : end.set("year", (valDate == null ? void 0 : valDate.get("year")) || 0)) == null ? void 0 : _a.set("month", (valDate == null ? void 0 : valDate.get("month")) || 0)) == null ? void 0 : _b.set("date", (valDate == null ? void 0 : valDate.get("date")) || 0)) || null;
+      onChange(newValue);
+    }
+  };
+  const handleSelectChange = (e) => {
+    const val = e.target.value;
+    const detail = presetItems.find((item) => item.value === val || item.label === val);
+    if (!detail)
+      return;
+    const dateVal = detail.getValue();
+    onChange(dateVal, "shortcuts", val);
+  };
+  const customPresetItems = (0, import_react.useMemo)(() => {
+    if (!currentShortcut) {
+      return presetItems.concat([
+        {
+          label: (0, import_locales.getText)("toolbar-date-range-shortcut-custom"),
+          value: (0, import_locales.getText)("toolbar-date-range-shortcut-custom")
+        }
+      ]);
+    }
+    return presetItems;
+  }, [presetItems]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-toolbar" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-content-top" }, /* @__PURE__ */ import_react.default.createElement("span", null, (0, import_locales.getText)("toolbar-date-range-shortcut-date-range")), /* @__PURE__ */ import_react.default.createElement(
+    import_browserSelect.default,
+    {
+      value: currentShortcut || (0, import_locales.getText)("toolbar-date-range-shortcut-custom"),
+      className: "date-picker-toolbar-select",
+      options: customPresetItems,
+      size: "large",
+      onChange: handleSelectChange
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-content-bottom" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-toolbar-start-wrap" }, /* @__PURE__ */ import_react.default.createElement("span", null, (0, import_locales.getText)("toolbar-date-range-shortcut-starting")), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Input,
+    {
+      size: "large",
+      value: startStr,
+      onChange: handleStartChange,
+      placeholder: (0, import_dayjs.default)().format(format)
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-toolbar-end-wrap" }, /* @__PURE__ */ import_react.default.createElement("span", null, (0, import_locales.getText)("toolbar-date-range-shortcut-ending")), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Input,
+    {
+      size: "large",
+      value: endStr,
+      onChange: handleEndChange,
+      placeholder: (0, import_dayjs.default)().format(format)
+    }
+  ))));
+};
+var Toolbar_default = Toolbar;

package/lib/Toolbar/index.less

@@ -0,0 +1,32 @@
+.date-picker-toolbar {
+  padding: 20px 20px 0;
+  color: var(--Gray-700, #344054);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px; /* 142.857% */
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  .date-picker-content-top {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .date-picker-content-bottom {
+    display: flex;
+    gap: 16px;
+  }
+  .date-picker-toolbar-start-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1;
+  }
+  .date-picker-toolbar-end-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1;
+  }
+}