@pisell/date-picker 1.0.83 → 1.0.85

package/es/PisellDateRangePicker/index.js

@@ -92,6 +92,10 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     currentShortcut = _useState4[0],
     setCurrentShortcut = _useState4[1];
+  var _useState5 = useState('start'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    rangePosition = _useState6[0],
+    setRangePosition = _useState6[1];
   var lastConfirmShortcut = useRef(isString(propsValue) ? propsValue : null);
   useEffect(function () {
     isBoolean(propsOpen) && setOpen(propsOpen);
@@ -99,12 +103,12 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
   var _presets = useMemo(function () {
     return formatPresets(presets || defaultPresets, locale);
   }, [presets]);
-  var _useState5 = useState(function () {
+  var _useState7 = useState(function () {
       return transDayjsArr(propsValue, defaultValue, _presets);
     }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    _value = _useState6[0],
-    setValue = _useState6[1];
+    _useState8 = _slicedToArray(_useState7, 2),
+    _value = _useState8[0],
+    setValue = _useState8[1];
   useEffect(function () {
     setValue(transDayjsArr(propsValue, defaultValue, _presets));
     if (isString(propsValue)) {
@@ -159,11 +163,12 @@ 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 !== "shortcuts") {
+      if (rangePosition === 'start') {
+        newVal = [newVal[0], newVal[0]];
+      }
+      if (!newVal[1]) {
+        newVal = [newVal[0], newVal[0]];
       }
     }
     if (clearEndOnSelection && type !== "set" && _value.filter(Boolean).length === 2) {
@@ -243,7 +248,12 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
   // defaultValue={defaultValue}
   // key={`${_value?.[0]?.valueOf()}-${_value?.[1]?.valueOf()}`}
   , {
-    desktopModeMediaQuery: desktopModeMediaQuery,
+    desktopModeMediaQuery: desktopModeMediaQuery
+    // onSelectedSectionsChange={(val) => {
+    //   console.log(val,'valval');
+    // }}
+    // selectedSections={null}
+    ,
     onMonthChange: onMonthChange,
     minDate: minDate,
     maxDate: maxDate,
@@ -254,18 +264,13 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
     onClose: handleClose,
     onChange: handleChange,
     onOpen: handleOpen,
-    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}
+    open: open,
+    onRangePositionChange: function onRangePositionChange(rp) {
+      setRangePosition(rp);
+    }
+    // defaultRangePosition="start"
     ,
+    rangePosition: rangePosition,
     defaultCalendarMonth: defaultCalendarMonth,
     shouldDisableDate: function shouldDisableDate(current, position) {
       return disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(current, position, _value);
@@ -282,6 +287,7 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
     dayOfWeekFormatter: function dayOfWeekFormatter(day) {
       return day;
     },
+    disableDragEditing: true,
     slotProps: {
       shortcuts: {
         items: [],
@@ -320,7 +326,26 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
       popper: {
         className: popupClassName,
         disablePortal: disablePortal,
-        placement: placement
+        placement: placement,
+        modifiers: [{
+          name: 'flip',
+          enabled: true,
+          options: {
+            altBoundary: true,
+            rootBoundary: 'viewport',
+            padding: 8
+          }
+        }, {
+          name: 'preventOverflow',
+          enabled: true,
+          options: {
+            altAxis: true,
+            altBoundary: true,
+            tether: true,
+            rootBoundary: 'viewport',
+            padding: 8
+          }
+        }]
       },
       dialog: {
         disablePortal: disablePortal

package/es/PisellDateRangePicker/index.less

@@ -60,6 +60,7 @@
         }
         .MuiPickersSlideTransition-root {
           min-width: 200px;
+          min-height: 235px;
           //min-height: auto;
           &::before {
             content: "";

package/es/Toolbar/index.js

@@ -35,14 +35,24 @@ var Toolbar = function Toolbar(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     endStr = _useState4[0],
     setEndStr = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    startError = _useState6[0],
+    setStartError = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    endError = _useState8[0],
+    setEndError = _useState8[1];
   useEffect(function () {
     if (value !== null && value !== void 0 && value[0]) {
       setStartStr(value[0].format(format));
+      setStartError(false);
     } else {
       setStartStr('');
     }
     if (value !== null && value !== void 0 && value[1]) {
       setEndStr(value[1].format(format));
+      setEndError(false);
     } else {
       setEndStr('');
     }
@@ -52,11 +62,14 @@ var Toolbar = function Toolbar(props) {
     setStartStr(val);
     if (isValidDate(val, format)) {
       var _start$set, _start$set$set;
+      setStartError(false);
       var valDate = dayjs(val, format);
       var newValue = _toConsumableArray(value);
       var start = newValue[0] || dayjs();
       newValue[0] = (start === null || start === void 0 ? void 0 : (_start$set = start.set('year', (valDate === null || valDate === void 0 ? void 0 : valDate.get('year')) || 0)) === null || _start$set === void 0 ? void 0 : (_start$set$set = _start$set.set('month', (valDate === null || valDate === void 0 ? void 0 : valDate.get('month')) || 0)) === null || _start$set$set === void 0 ? void 0 : _start$set$set.set('date', (valDate === null || valDate === void 0 ? void 0 : valDate.get('date')) || 0)) || null;
       onChange(newValue);
+    } else {
+      setStartError(true);
     }
   };
   var handleEndChange = function handleEndChange(e) {
@@ -64,11 +77,14 @@ var Toolbar = function Toolbar(props) {
     setEndStr(val);
     if (isValidDate(val, format)) {
       var _end$set, _end$set$set;
+      setEndError(false);
       var valDate = dayjs(val, format);
       var newValue = _toConsumableArray(value);
       var end = newValue[1] || dayjs();
       newValue[1] = (end === null || end === void 0 ? void 0 : (_end$set = end.set('year', (valDate === null || valDate === void 0 ? void 0 : valDate.get('year')) || 0)) === null || _end$set === void 0 ? void 0 : (_end$set$set = _end$set.set('month', (valDate === null || valDate === void 0 ? void 0 : valDate.get('month')) || 0)) === null || _end$set$set === void 0 ? void 0 : _end$set$set.set('date', (valDate === null || valDate === void 0 ? void 0 : valDate.get('date')) || 0)) || null;
       onChange(newValue);
+    } else {
+      setEndError(true);
     }
   };
   var handleSelectChange = function handleSelectChange(e) {
@@ -106,17 +122,23 @@ var Toolbar = function Toolbar(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "date-picker-toolbar-start-wrap"
   }, /*#__PURE__*/React.createElement("span", null, getText('toolbar-date-range-shortcut-starting', pLocaleMap[locale])), /*#__PURE__*/React.createElement(Input, {
+    status: startError ? "error" : "",
     size: "large",
     value: startStr,
     onChange: handleStartChange,
     placeholder: dayjs().format(format)
-  })), /*#__PURE__*/React.createElement("div", {
+  }), startError && /*#__PURE__*/React.createElement("span", {
+    className: "date-picker-error"
+  }, getText('toolbar-date-range-invalid-start-date', pLocaleMap[locale]))), /*#__PURE__*/React.createElement("div", {
     className: "date-picker-toolbar-end-wrap"
   }, /*#__PURE__*/React.createElement("span", null, getText('toolbar-date-range-shortcut-ending', pLocaleMap[locale])), /*#__PURE__*/React.createElement(Input, {
+    status: endError ? "error" : "",
     size: "large",
     value: endStr,
     onChange: handleEndChange,
     placeholder: dayjs().format(format)
-  }))));
+  }), endError && /*#__PURE__*/React.createElement("span", {
+    className: "date-picker-error"
+  }, getText('toolbar-date-range-invalid-end-date', pLocaleMap[locale])))));
 };
 export default Toolbar;

package/es/Toolbar/index.less

@@ -29,4 +29,7 @@
     gap: 8px;
     flex: 1;
   }
+  .date-picker-error {
+    color: #d4163a;
+  }
 }

package/es/internals/utils/date-fields-utils.d.ts

@@ -5,7 +5,7 @@ export declare const splitDateRangeSections: (sections: RangeFieldSection[]) =>
 };
 export declare const removeLastSeparator: (dateSections: RangeFieldSection[]) => (RangeFieldSection | {
     separator: null;
-    dateName: "end" | "start";
+    dateName: "start" | "end";
     value: string;
     format: string;
     maxLength: number | null;

package/es/locales/en-US.d.ts

@@ -20,5 +20,7 @@ declare const _default: {
     "toolbar-date-range-shortcut-next-30-days": string;
     "toolbar-date-range-shortcut-next-90-days": string;
     "toolbar-date-range-shortcut-next-180-days": string;
+    "toolbar-date-range-invalid-start-date": string;
+    "toolbar-date-range-invalid-end-date": string;
 };
 export default _default;

package/es/locales/en-US.js

@@ -19,5 +19,7 @@ export default {
   "toolbar-date-range-shortcut-next-7-days": "Next 7 days",
   "toolbar-date-range-shortcut-next-30-days": "Next 30 days",
   "toolbar-date-range-shortcut-next-90-days": "Next 90 days",
-  "toolbar-date-range-shortcut-next-180-days": "Next 180 days"
+  "toolbar-date-range-shortcut-next-180-days": "Next 180 days",
+  "toolbar-date-range-invalid-start-date": "Invalid start date",
+  "toolbar-date-range-invalid-end-date": "Invalid end date"
 };

package/es/locales/zh-CN.d.ts

@@ -20,5 +20,7 @@ declare const _default: {
     "toolbar-date-range-shortcut-next-30-days": string;
     "toolbar-date-range-shortcut-next-90-days": string;
     "toolbar-date-range-shortcut-next-180-days": string;
+    "toolbar-date-range-invalid-start-date": string;
+    "toolbar-date-range-invalid-end-date": string;
 };
 export default _default;

package/es/locales/zh-CN.js

@@ -19,5 +19,7 @@ export default {
   "toolbar-date-range-shortcut-next-7-days": "未来7天",
   "toolbar-date-range-shortcut-next-30-days": "未来30天",
   "toolbar-date-range-shortcut-next-90-days": "未来90天",
-  "toolbar-date-range-shortcut-next-180-days": "未来180天"
+  "toolbar-date-range-shortcut-next-180-days": "未来180天",
+  "toolbar-date-range-invalid-start-date": "开始日期无效",
+  "toolbar-date-range-invalid-end-date": "结束日期无效"
 };

package/es/locales/zh-TW.d.ts

@@ -20,5 +20,7 @@ declare const _default: {
     "toolbar-date-range-shortcut-next-30-days": string;
     "toolbar-date-range-shortcut-next-90-days": string;
     "toolbar-date-range-shortcut-next-180-days": string;
+    "toolbar-date-range-invalid-start-date": string;
+    "toolbar-date-range-invalid-end-date": string;
 };
 export default _default;

package/es/locales/zh-TW.js

@@ -19,5 +19,7 @@ export default {
   "toolbar-date-range-shortcut-next-7-days": "未來7天",
   "toolbar-date-range-shortcut-next-30-days": "未來30天",
   "toolbar-date-range-shortcut-next-90-days": "未來90天",
-  "toolbar-date-range-shortcut-next-180-days": "未來180天"
+  "toolbar-date-range-shortcut-next-180-days": "未來180天",
+  "toolbar-date-range-invalid-start-date": "開始日期無效",
+  "toolbar-date-range-invalid-end-date": "結束日期無效"
 };

package/lib/PisellDateRangePicker/index.js

@@ -101,6 +101,7 @@ var PisellDateRangePicker = (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 [rangePosition, setRangePosition] = (0, import_react.useState)("start");
   const lastConfirmShortcut = (0, import_react.useRef)((0, import_utils.isString)(propsValue) ? propsValue : null);
   (0, import_react.useEffect)(() => {
     (0, import_utils.isBoolean)(propsOpen) && setOpen(propsOpen);
@@ -164,11 +165,12 @@ 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 !== "shortcuts") {
+      if (rangePosition === "start") {
+        newVal = [newVal[0], newVal[0]];
+      }
+      if (!newVal[1]) {
+        newVal = [newVal[0], newVal[0]];
       }
     }
     if (clearEndOnSelection && type !== "set" && _value.filter(Boolean).length === 2) {
@@ -262,6 +264,10 @@ var PisellDateRangePicker = (props) => {
         onChange: handleChange,
         onOpen: handleOpen,
         open,
+        onRangePositionChange: (rp) => {
+          setRangePosition(rp);
+        },
+        rangePosition,
         defaultCalendarMonth,
         shouldDisableDate: (current, position) => disabledDate == null ? void 0 : disabledDate(current, position, _value),
         slots: {
@@ -276,6 +282,7 @@ var PisellDateRangePicker = (props) => {
         dayOfWeekFormatter: (day) => {
           return day;
         },
+        disableDragEditing: true,
         slotProps: {
           shortcuts: {
             items: [],
@@ -315,7 +322,29 @@ var PisellDateRangePicker = (props) => {
           popper: {
             className: popupClassName,
             disablePortal,
-            placement
+            placement,
+            modifiers: [
+              {
+                name: "flip",
+                enabled: true,
+                options: {
+                  altBoundary: true,
+                  rootBoundary: "viewport",
+                  padding: 8
+                }
+              },
+              {
+                name: "preventOverflow",
+                enabled: true,
+                options: {
+                  altAxis: true,
+                  altBoundary: true,
+                  tether: true,
+                  rootBoundary: "viewport",
+                  padding: 8
+                }
+              }
+            ]
           },
           dialog: {
             disablePortal

package/lib/PisellDateRangePicker/index.less

@@ -60,6 +60,7 @@
         }
         .MuiPickersSlideTransition-root {
           min-width: 200px;
+          min-height: 235px;
           //min-height: auto;
           &::before {
             content: "";

package/lib/Toolbar/index.js

@@ -54,14 +54,18 @@ var Toolbar = (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)("");
+  const [startError, setStartError] = (0, import_react.useState)(false);
+  const [endError, setEndError] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(() => {
     if (value == null ? void 0 : value[0]) {
       setStartStr(value[0].format(format));
+      setStartError(false);
     } else {
       setStartStr("");
     }
     if (value == null ? void 0 : value[1]) {
       setEndStr(value[1].format(format));
+      setEndError(false);
     } else {
       setEndStr("");
     }
@@ -71,11 +75,14 @@ var Toolbar = (props) => {
     const val = e.target.value;
     setStartStr(val);
     if (isValidDate(val, format)) {
+      setStartError(false);
       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);
+    } else {
+      setStartError(true);
     }
   };
   const handleEndChange = (e) => {
@@ -83,11 +90,14 @@ var Toolbar = (props) => {
     const val = e.target.value;
     setEndStr(val);
     if (isValidDate(val, format)) {
+      setEndError(false);
       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);
+    } else {
+      setEndError(true);
     }
   };
   const handleSelectChange = (e) => {
@@ -135,19 +145,27 @@ var Toolbar = (props) => {
   )), /* @__PURE__ */ import_react.default.createElement(
     import_antd.Input,
     {
+      status: startError ? "error" : "",
       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", import_locales.pLocaleMap[locale])), /* @__PURE__ */ import_react.default.createElement(
+  ), startError && /* @__PURE__ */ import_react.default.createElement("span", { className: "date-picker-error" }, (0, import_locales.getText)(
+    "toolbar-date-range-invalid-start-date",
+    import_locales.pLocaleMap[locale]
+  ))), /* @__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", import_locales.pLocaleMap[locale])), /* @__PURE__ */ import_react.default.createElement(
     import_antd.Input,
     {
+      status: endError ? "error" : "",
       size: "large",
       value: endStr,
       onChange: handleEndChange,
       placeholder: (0, import_dayjs.default)().format(format)
     }
-  ))));
+  ), endError && /* @__PURE__ */ import_react.default.createElement("span", { className: "date-picker-error" }, (0, import_locales.getText)(
+    "toolbar-date-range-invalid-end-date",
+    import_locales.pLocaleMap[locale]
+  )))));
 };
 var Toolbar_default = Toolbar;

package/lib/Toolbar/index.less

@@ -29,4 +29,7 @@
     gap: 8px;
     flex: 1;
   }
+  .date-picker-error {
+    color: #d4163a;
+  }
 }

package/lib/internals/utils/date-fields-utils.d.ts

@@ -5,7 +5,7 @@ export declare const splitDateRangeSections: (sections: RangeFieldSection[]) =>
 };
 export declare const removeLastSeparator: (dateSections: RangeFieldSection[]) => (RangeFieldSection | {
     separator: null;
-    dateName: "end" | "start";
+    dateName: "start" | "end";
     value: string;
     format: string;
     maxLength: number | null;

package/lib/locales/en-US.d.ts

@@ -20,5 +20,7 @@ declare const _default: {
     "toolbar-date-range-shortcut-next-30-days": string;
     "toolbar-date-range-shortcut-next-90-days": string;
     "toolbar-date-range-shortcut-next-180-days": string;
+    "toolbar-date-range-invalid-start-date": string;
+    "toolbar-date-range-invalid-end-date": string;
 };
 export default _default;

package/lib/locales/en-US.js

@@ -43,5 +43,7 @@ var en_US_default = {
   "toolbar-date-range-shortcut-next-7-days": "Next 7 days",
   "toolbar-date-range-shortcut-next-30-days": "Next 30 days",
   "toolbar-date-range-shortcut-next-90-days": "Next 90 days",
-  "toolbar-date-range-shortcut-next-180-days": "Next 180 days"
+  "toolbar-date-range-shortcut-next-180-days": "Next 180 days",
+  "toolbar-date-range-invalid-start-date": "Invalid start date",
+  "toolbar-date-range-invalid-end-date": "Invalid end date"
 };

package/lib/locales/zh-CN.d.ts

@@ -20,5 +20,7 @@ declare const _default: {
     "toolbar-date-range-shortcut-next-30-days": string;
     "toolbar-date-range-shortcut-next-90-days": string;
     "toolbar-date-range-shortcut-next-180-days": string;
+    "toolbar-date-range-invalid-start-date": string;
+    "toolbar-date-range-invalid-end-date": string;
 };
 export default _default;

package/lib/locales/zh-CN.js

@@ -43,5 +43,7 @@ var zh_CN_default = {
   "toolbar-date-range-shortcut-next-7-days": "未来7天",
   "toolbar-date-range-shortcut-next-30-days": "未来30天",
   "toolbar-date-range-shortcut-next-90-days": "未来90天",
-  "toolbar-date-range-shortcut-next-180-days": "未来180天"
+  "toolbar-date-range-shortcut-next-180-days": "未来180天",
+  "toolbar-date-range-invalid-start-date": "开始日期无效",
+  "toolbar-date-range-invalid-end-date": "结束日期无效"
 };

package/lib/locales/zh-TW.d.ts

@@ -20,5 +20,7 @@ declare const _default: {
     "toolbar-date-range-shortcut-next-30-days": string;
     "toolbar-date-range-shortcut-next-90-days": string;
     "toolbar-date-range-shortcut-next-180-days": string;
+    "toolbar-date-range-invalid-start-date": string;
+    "toolbar-date-range-invalid-end-date": string;
 };
 export default _default;

package/lib/locales/zh-TW.js

@@ -43,5 +43,7 @@ var zh_TW_default = {
   "toolbar-date-range-shortcut-next-7-days": "未來7天",
   "toolbar-date-range-shortcut-next-30-days": "未來30天",
   "toolbar-date-range-shortcut-next-90-days": "未來90天",
-  "toolbar-date-range-shortcut-next-180-days": "未來180天"
+  "toolbar-date-range-shortcut-next-180-days": "未來180天",
+  "toolbar-date-range-invalid-start-date": "開始日期無效",
+  "toolbar-date-range-invalid-end-date": "結束日期無效"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/date-picker",
-  "version": "1.0.83",
+  "version": "1.0.85",
   "sideEffects": [
     "*.less"
   ],