@pisell/date-picker 1.0.74 → 1.0.76

package/es/ActionBar/index.js

@@ -13,7 +13,7 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import React, { useMemo, useContext } from "react";
 import classNames from "classnames";
-import { Button, Space, TimePicker } from "antd";
+import { Button } from "antd";
 import { MuiPickersAdapterContext } from "@mui/x-date-pickers";
 import { isArr, isMobile } from "@pisell/utils";
 import dayjs from "dayjs";
@@ -52,6 +52,15 @@ var ActionBar = function ActionBar(props) {
     onChange(newValue, "time");
   };
   var spaceStyle = useMemo(function () {
+    return isMobile() ? {
+      display: "flex",
+      justifyContent: "end",
+      gap: 16
+    } : {
+      display: "flex"
+    };
+  }, []);
+  var buttonStyle = useMemo(function () {
     return isMobile() ? {
       display: "flex",
       justifyContent: "end",
@@ -74,40 +83,22 @@ var ActionBar = function ActionBar(props) {
   }, [showTime]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(props.className, "date-picker-action-bar")
-  }, hasShortcuts && /*#__PURE__*/React.createElement("div", {
-    className: "date-picker-action-bar-left"
-  }), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "date-picker-action-bar-right",
-    style: isMobile() ? {
-      display: "block"
-    } : {}
-  }, /*#__PURE__*/React.createElement(Space, {
-    split: "-",
-    style: _objectSpread({}, spaceStyle)
-  }, showTime ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TimePicker, _extends({
-    placeholder: getText("action-bar-start.time", pLocaleMap[locale])
-  }, startTimeProps, {
-    value: value[0],
-    popupClassName: "date-picker-action-bar-time-picker-popup",
-    onChange: handleStartChange,
-    inputReadOnly: true
-  })), /*#__PURE__*/React.createElement(TimePicker, _extends({
-    placeholder: getText("action-bar-end.time", pLocaleMap[locale])
-  }, endTimeProps, {
-    value: value[1],
-    popupClassName: "date-picker-action-bar-time-picker-popup",
-    onChange: handleEndChange,
-    inputReadOnly: true
-  }))) : /*#__PURE__*/React.createElement("div", null)), /*#__PURE__*/React.createElement(Space, {
     style: _objectSpread(_objectSpread({}, spaceStyle), {}, {
       margin: 0
     })
-  }, /*#__PURE__*/React.createElement(Button, _extends({}, cancelButtonProps || {}, {
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    block: isMobile(),
+    size: "large"
+  }, cancelButtonProps || {}, {
     onClick: onCancel
   }), getText("action-bar-cancel", pLocaleMap[locale])), /*#__PURE__*/React.createElement(Button, _extends({
-    type: "primary"
+    type: "primary",
+    size: "large",
+    block: isMobile()
   }, okButtonProps || {}, {
     onClick: onOk
-  }), getText("action-bar-apply", pLocaleMap[locale])))));
+  }), getText("action-bar-apply", pLocaleMap[locale]))));
 };
 export default ActionBar;

package/es/ActionBar/index.less

@@ -7,9 +7,10 @@
   .date-picker-action-bar-right {
     flex: 1;
     display: flex;
-    justify-content: space-between;
+    justify-content: end;
     padding: 16px;
     border-top: 1px solid rgba(0, 0, 0, 0.12);
+    gap: 16px;
   }
 }
 

package/es/CustomCalendarHeader/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import Stack from '@mui/material/Stack';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import ChevronLeft from "../icon/ChevronLeft";
+import ChevronLeftDouble from "../icon/ChevronLeftDouble";
+import ChevronRight from "../icon/ChevronRight";
+import ChevronRightDouble from "../icon/ChevronRightDouble";
+var CustomCalendarHeaderRoot = styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '8px 16px',
+  alignItems: 'center'
+});
+var CustomCalendarHeader = function CustomCalendarHeader(props) {
+  var currentMonth = props.currentMonth,
+    onMonthChange = props.onMonthChange;
+  var selectNextMonth = function selectNextMonth() {
+    return onMonthChange(currentMonth.add(1, 'month'), 'left');
+  };
+  var selectNextYear = function selectNextYear() {
+    return onMonthChange(currentMonth.add(1, 'year'), 'left');
+  };
+  var selectPreviousMonth = function selectPreviousMonth() {
+    return onMonthChange(currentMonth.subtract(1, 'month'), 'right');
+  };
+  var selectPreviousYear = function selectPreviousYear() {
+    return onMonthChange(currentMonth.subtract(1, 'year'), 'right');
+  };
+  return /*#__PURE__*/React.createElement(CustomCalendarHeaderRoot, null, /*#__PURE__*/React.createElement(Stack, {
+    spacing: 1,
+    direction: "row"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: selectPreviousYear,
+    title: "Previous year"
+  }, /*#__PURE__*/React.createElement(ChevronLeftDouble, null)), /*#__PURE__*/React.createElement(IconButton, {
+    onClick: selectPreviousMonth,
+    title: "Previous month"
+  }, /*#__PURE__*/React.createElement(ChevronLeft, null))), /*#__PURE__*/React.createElement(Typography, {
+    variant: "body2"
+  }, currentMonth.format('MMMM YYYY')), /*#__PURE__*/React.createElement(Stack, {
+    spacing: 1,
+    direction: "row"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: selectNextMonth,
+    title: "Next month"
+  }, /*#__PURE__*/React.createElement(ChevronRight, null)), /*#__PURE__*/React.createElement(IconButton, {
+    onClick: selectNextYear,
+    title: "Next year"
+  }, /*#__PURE__*/React.createElement(ChevronRightDouble, null))));
+};
+export default CustomCalendarHeader;

package/es/Dialog/index.js

@@ -0,0 +1,22 @@
+import React from "react";
+// import Drawer from "../Drawer";
+
+import Drawer from "@mui/material/Drawer";
+var Dialog = function Dialog(props) {
+  var open = props.open,
+    onClose = props.onClose,
+    children = props.children;
+
+  // return <MuiDialog open={open}>
+  //   {children}
+  // </MuiDialog>
+  return /*#__PURE__*/React.createElement(Drawer, {
+    anchor: "bottom",
+    open: open,
+    onClose: onClose,
+    height: 650,
+    autoFocus: true,
+    className: window.innerWidth > 800 ? 'date-picker-paid-drawer' : 'date-picker-custom-drawer'
+  }, children);
+};
+export default Dialog;

package/es/Drawer/index.js

@@ -0,0 +1,35 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.less";
+var Drawer = function Drawer(props) {
+  var open = props.open,
+    className = props.className,
+    onClose = props.onClose,
+    children = props.children,
+    _props$height = props.height,
+    height = _props$height === void 0 ? 375 : _props$height;
+
+  // return ReactDOM.createPortal(
+  //   drawerElement,
+  //   document.body
+  // );
+
+  if (!open) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, open && /*#__PURE__*/React.createElement("div", {
+    className: "date-picker-drawer-overlay",
+    onClick: onClose
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames("date-picker-drawer", className, {
+      open: open
+    }),
+    onClick: function onClick() {}
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "date-picker-drawer-content",
+    style: {
+      height: height
+    }
+  }, children)));
+};
+export default Drawer;

package/es/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/es/PisellDateRangePicker/LocaleContext.d.ts

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

package/es/PisellDateRangePicker/index.js

@@ -10,24 +10,30 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useState, useEffect, useMemo, useContext } from "react";
+import React, { useState, useEffect, useMemo, useContext, useRef } from "react";
 import { DateRangePicker } from "../DateRangePicker";
 import ActionBar from "../ActionBar";
 import Shortcuts from "../Shortcuts";
 import { SingleInputDateRangeField } from "../SingleInputDateRangeField";
 import classNames from "classnames";
-import { isArr, isBoolean } from "@pisell/utils";
+import { isArr, isBoolean, isString } from "@pisell/utils";
 import useCssVariables from "./useCssVariables";
-import CloseCircle from "./CloseCircle";
+import CloseCircle from "../icon/CloseCircle";
 import "dayjs/locale/zh-cn";
 import "dayjs/locale/en";
 import "dayjs/locale/zh-tw";
 import "./index.less";
-import { getCurrentLocale, isMobile } from "../utils";
+import { formatPresets, getCurrentLocale, getPresetLabel, getShortcutValue } from "../utils";
 import { LocaleContext } from "./LocaleContext";
 import { pLocaleMap } from "../locales";
-var transDayjsArr = function transDayjsArr(dayjsArr, defaultValue) {
+import Dialog from "../Dialog";
+import Toolbar from "../Toolbar";
+import useNextDay from "../hooks/useNextDay";
+var transDayjsArr = function transDayjsArr(dayjsArr, defaultValue, _presets) {
   var _newArr;
+  if (isString(dayjsArr)) {
+    return getShortcutValue(dayjsArr, _presets);
+  }
   var newArr = dayjsArr || defaultValue || [null, null];
   if ((dayjsArr === null || dayjsArr === void 0 ? void 0 : dayjsArr.length) === 0) {
     newArr = defaultValue || [null, null];
@@ -72,25 +78,52 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
     disablePortal = props.disablePortal,
     _props$placement = props.placement,
     placement = _props$placement === void 0 ? "auto" : _props$placement,
-    inputReadOnly = props.inputReadOnly;
+    _props$inputReadOnly = props.inputReadOnly,
+    inputReadOnly = _props$inputReadOnly === void 0 ? true : _props$inputReadOnly,
+    _props$returnShortcut = props.returnShortcutString,
+    returnShortcutString = _props$returnShortcut === void 0 ? false : _props$returnShortcut;
   var _useState = useState(propsOpen !== null && propsOpen !== void 0 ? propsOpen : false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
   var _ref = useContext(LocaleContext) || {},
     locale = _ref.locale;
+  var _useState3 = useState(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentShortcut = _useState4[0],
+    setCurrentShortcut = _useState4[1];
+  var lastConfirmShortcut = useRef(isString(propsValue) ? propsValue : null);
   useEffect(function () {
     isBoolean(propsOpen) && setOpen(propsOpen);
   }, [propsOpen]);
-  var _useState3 = useState(function () {
-      return transDayjsArr(propsValue, defaultValue);
+  var _presets = useMemo(function () {
+    return formatPresets(presets);
+  }, [presets]);
+  var _useState5 = useState(function () {
+      return transDayjsArr(propsValue, defaultValue, _presets);
     }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    _value = _useState4[0],
-    setValue = _useState4[1];
+    _useState6 = _slicedToArray(_useState5, 2),
+    _value = _useState6[0],
+    setValue = _useState6[1];
   useEffect(function () {
-    setValue(transDayjsArr(propsValue, defaultValue));
+    setValue(transDayjsArr(propsValue, defaultValue, _presets));
+    if (isString(propsValue)) {
+      setCurrentShortcut(propsValue);
+    }
   }, [propsValue]);
+  var getVal = function getVal() {
+    var val = _value;
+    if (returnShortcutString) {
+      val = currentShortcut;
+    } else if (currentShortcut) {
+      val = getShortcutValue(currentShortcut, _presets);
+    }
+    return val;
+  };
+  useNextDay(function () {
+    setValue(getVal());
+    setTimeout(handleOk);
+  });
   var handleOpen = function handleOpen() {
     setOpen(true);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
@@ -98,31 +131,24 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
   var handleClose = function handleClose() {
     setOpen(false);
     onClose === null || onClose === void 0 ? void 0 : onClose();
-    onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(transDayjsArr(propsValue, defaultValue));
-    setValue(transDayjsArr(propsValue, defaultValue));
+    var v = transDayjsArr(propsValue, defaultValue, _presets);
+    onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(v);
+    setValue(v);
+    setCurrentShortcut(lastConfirmShortcut.current);
   };
   var handleOk = function handleOk() {
     setOpen(false);
     onClose === null || onClose === void 0 ? void 0 : onClose();
-    propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(_value);
+    propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(getVal());
+    lastConfirmShortcut.current = currentShortcut;
   };
-  var _presets = useMemo(function () {
-    if (isMobile()) return [];
-    return presets.map(function (item) {
-      var getValue = function getValue() {
-        if (typeof item.getValue === "function") {
-          return item.getValue();
-        }
-        return item === null || item === void 0 ? void 0 : item.value;
-      };
-      return {
-        label: item.label,
-        getValue: getValue
-      };
-    });
-  }, [presets]);
-  var handleChange = function handleChange(val, type) {
+  var handleChange = function handleChange(val, type, shortcutValue) {
     var newVal = val;
+    if (isString(shortcutValue) && type === "shortcuts") {
+      setCurrentShortcut(shortcutValue);
+    } else {
+      setCurrentShortcut(null);
+    }
     if (isArr(showTime) && type !== "time") {
       newVal = newVal.map(function (item, index) {
         var _showTime$index;
@@ -133,16 +159,22 @@ var PisellDateRangePicker = function 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 || onDateChange === void 0 ? void 0 : onDateChange(newVal);
     setValue(newVal);
   };
-  var hasPreset = (_presets === null || _presets === void 0 ? void 0 : _presets.length) > 0;
   useCssVariables({
     variables: {
-      "--pisell-date-range-picker-popup-width": "".concat(hasPreset ? popupWidth + 192 : popupWidth, "px")
+      "--pisell-date-range-picker-popup-width": "".concat(popupWidth, "px")
     },
     dom: document.body
   });
@@ -152,6 +184,8 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
     setOpen(false);
     onClose === null || onClose === void 0 ? void 0 : onClose();
     propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange([null, null]);
+    setCurrentShortcut(null);
+    lastConfirmShortcut.current = null;
   };
   var endAdornment = useMemo(function () {
     if (!allowClear) {
@@ -185,6 +219,17 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
     }
     return localeValue === "en" || localeValue === "en-US" ? "DD/MM/YYYY" : "YYYY/MM/DD";
   }, [propsFormat, locale]);
+  var inputPropsObj = useMemo(function () {
+    var obj = {
+      endAdornment: endAdornment
+    };
+    if (_value.every(Boolean) && getPresetLabel(currentShortcut, _presets)) {
+      obj = _objectSpread(_objectSpread({}, obj), {}, {
+        value: getPresetLabel(currentShortcut, _presets)
+      });
+    }
+    return obj;
+  }, [_value, endAdornment, returnShortcutString, currentShortcut]);
   return /*#__PURE__*/React.createElement("span", {
     className: classNames(className, "pisell-date-range-picker", {
       "pisell-date-range-picker-no-border": !bordered
@@ -208,7 +253,18 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
     onClose: handleClose,
     onChange: handleChange,
     onOpen: handleOpen,
-    open: open,
+    open: open
+    // onRangePositionChange={(rp) => {
+    //   console.log(rp, "rangePosition");
+    //   // if (_value.every(item => !Boolean(item))) {
+    //   //   return
+    //   // } else {
+    //     setRangePosition(rp)
+    //   // }
+    // }}
+    // // defaultRangePosition="start"
+    // rangePosition={_value.every((item) => Boolean(item)) ? "start" : undefined}
+    ,
     defaultCalendarMonth: defaultCalendarMonth,
     shouldDisableDate: function shouldDisableDate(current, position) {
       return disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(current, position, _value);
@@ -216,14 +272,18 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
     slots: {
       actionBar: ActionBar,
       shortcuts: Shortcuts,
-      field: SingleInputDateRangeField
+      field: SingleInputDateRangeField,
+      dialog: Dialog,
+      // calendarHeader: CustomCalendarHeader,
+      // calendarHeader: <div>12312</div> ,
+      toolbar: Toolbar
     },
     dayOfWeekFormatter: function dayOfWeekFormatter(day) {
       return day;
     },
     slotProps: {
       shortcuts: {
-        items: _presets,
+        items: [],
         changeImportance: "set",
         onChange: handleChange
       },
@@ -236,15 +296,25 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
         okButtonProps: okButtonProps,
         cancelButtonProps: cancelButtonProps
       },
+      toolbar: {
+        hidden: false,
+        presetItems: _presets,
+        format: format,
+        locale: locale,
+        onChange: handleChange,
+        currentShortcut: currentShortcut,
+        setCurrentShortcut: setCurrentShortcut
+      },
+      layout: {
+        orientation: "portrait"
+      },
       field: _objectSpread({
         value: _value,
         size: "small",
         fullWidth: true,
         // variant: "standard",
         // hiddenLabel: true,
-        InputProps: {
-          endAdornment: endAdornment
-        }
+        InputProps: inputPropsObj
       }, readOnlyProps),
       popper: {
         className: popupClassName,

package/es/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;
+  }
+}