@majoo-ui/react 1.61.3-rc.2 → 1.61.3-rc.3

package/components/datePicker/components/MobileCalendar.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { CalendarProps } from './Calendar';
-declare const MobileCalendarBox: ({ calendars, getDateProps, advanceView, onCalendarDateChange, onIsMultiDateChange, onUpdate, onCancel, onReset, selected, containerStyle, disabled, minDate, maxDate, allowReset, }: CalendarProps) => JSX.Element | null;
+declare const MobileCalendarBox: ({ calendars, getDateProps, advanceView, onCalendarDateChange, onIsMultiDateChange, onUpdate, onCancel, onReset, selected, containerStyle, disabled, minDate, maxDate, allowReset, maxRange, overMaxRange, }: CalendarProps) => JSX.Element | null;
 export default MobileCalendarBox;

package/index.esm.js

@@ -18987,7 +18987,9 @@ const MobileCalendarBox = ({
   disabled,
   minDate,
   maxDate,
-  allowReset
+  allowReset,
+  maxRange: _maxRange = 0,
+  overMaxRange: _overMaxRange = false
 }) => {
   const {
     t,
@@ -19258,9 +19260,11 @@ const MobileCalendarBox = ({
           textAlign: 'center !important'
         },
         variant: "status",
-        color: selected && selected.length > 1 ? 'primary' : 'disable'
+        color: _overMaxRange ? 'red' : selected && selected.length > 1 ? 'primary' : 'disable'
       }, {
-        children: selected && selected.length > 1 && !disabled ? `${toDateFormat(selected[0], language)} - ${toDateFormat(selected[1], language)}` : t('notSelectedDateText', 'Tanggal belum dipilih')
+        children: _overMaxRange ? t('label.maxRangeDate', `Maksimal range adalah ${_maxRange} hari`, {
+          maxRange: _maxRange
+        }) : selected && selected.length > 1 && !disabled ? `${toDateFormat(selected[0], language)} - ${toDateFormat(selected[1], language)}` : t('notSelectedDateText', 'Tanggal belum dipilih')
       }), void 0), jsxs(Flex$1, Object.assign({
         gap: 3
       }, {
@@ -19287,7 +19291,7 @@ const MobileCalendarBox = ({
         }), void 0), jsx(Button$4, Object.assign({
           size: "md",
           onClick: onUpdate,
-          disabled: disabled || !selected || selected.length <= 1,
+          disabled: disabled || !selected || selected.length <= 1 || _overMaxRange,
           type: "button",
           block: true
         }, {
@@ -19509,7 +19513,9 @@ const CalendarRangePicker = _a => {
     minDate: minDate,
     maxDate: maxDate,
     allowReset: allowReset,
-    onReset: isMultiDatePicker ? resetHandler : undefined
+    onReset: isMultiDatePicker ? resetHandler : undefined,
+    maxRange: maxRange,
+    overMaxRange: overMaxRange
   }, dayzedData), void 0) : jsx(CalendarBox, Object.assign({
     onUpdate: isMultiDatePicker ? updateHandler : undefined,
     onCancel: onClose,

package/index.umd.js

@@ -19230,25 +19230,29 @@
       disabled = _a.disabled,
       minDate = _a.minDate,
       maxDate = _a.maxDate,
-      allowReset = _a.allowReset;
-    var _b = reactI18next.useTranslation(['MajooUI/datePicker', 'translation']),
-      t = _b.t,
-      i18n = _b.i18n;
-    var _c = React.useState({
+      allowReset = _a.allowReset,
+      _b = _a.maxRange,
+      maxRange = _b === void 0 ? 0 : _b,
+      _c = _a.overMaxRange,
+      overMaxRange = _c === void 0 ? false : _c;
+    var _d = reactI18next.useTranslation(['MajooUI/datePicker', 'translation']),
+      t = _d.t,
+      i18n = _d.i18n;
+    var _e = React.useState({
         type: DATE_PICKER,
         selectedMonth: Number(calendars[0].month),
         selectedYear: Number(calendars[0].year),
         selectedYearRange: getCalendarStartYear(calendars[0].year),
         selectedYearRangeStart: getCalendarStartYearRange(calendars[0].year)
       }),
-      pickerState = _c[0],
-      setPickerState = _c[1];
+      pickerState = _e[0],
+      setPickerState = _e[1];
     var language = i18n.language;
     var monthNamesFull = language === 'en' ? monthNamesFullEng : monthNamesFullId;
     var weekdayNamesShort = language === 'en' ? weekdayNamesShortEng : weekdayNamesShortId;
-    var _d = React.useState(false),
-      expandAdvanceView = _d[0],
-      setExpandAdvanceView = _d[1];
+    var _f = React.useState(false),
+      expandAdvanceView = _f[0],
+      setExpandAdvanceView = _f[1];
     React.useEffect(function () {
       var selectedDate = new Date(pickerState.selectedYear, pickerState.selectedMonth, 1, 0);
       if (pickerState.selectedMonth < 0) {
@@ -19531,9 +19535,11 @@
             textAlign: 'center !important'
           },
           variant: "status",
-          color: selected && selected.length > 1 ? 'primary' : 'disable'
+          color: overMaxRange ? 'red' : selected && selected.length > 1 ? 'primary' : 'disable'
         }, {
-          children: selected && selected.length > 1 && !disabled ? "".concat(toDateFormat(selected[0], language), " - ").concat(toDateFormat(selected[1], language)) : t('notSelectedDateText', 'Tanggal belum dipilih')
+          children: overMaxRange ? t('label.maxRangeDate', "Maksimal range adalah ".concat(maxRange, " hari"), {
+            maxRange: maxRange
+          }) : selected && selected.length > 1 && !disabled ? "".concat(toDateFormat(selected[0], language), " - ").concat(toDateFormat(selected[1], language)) : t('notSelectedDateText', 'Tanggal belum dipilih')
         }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
           gap: 3
         }, {
@@ -19560,7 +19566,7 @@
           }), void 0), jsxRuntime.jsx(Button$4, __assign({
             size: "md",
             onClick: onUpdate,
-            disabled: disabled || !selected || selected.length <= 1,
+            disabled: disabled || !selected || selected.length <= 1 || overMaxRange,
             type: "button",
             block: true
           }, {
@@ -19789,7 +19795,9 @@
       minDate: minDate,
       maxDate: maxDate,
       allowReset: allowReset,
-      onReset: isMultiDatePicker ? resetHandler : undefined
+      onReset: isMultiDatePicker ? resetHandler : undefined,
+      maxRange: maxRange,
+      overMaxRange: overMaxRange
     }, dayzedData), void 0) : jsxRuntime.jsx(CalendarBox, __assign({
       onUpdate: isMultiDatePicker ? updateHandler : undefined,
       onCancel: onClose,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.61.3-rc.2",
+  "version": "1.61.3-rc.3",
   "dependencies": {
     "@majoo-ui/core": "^1.31.3",
     "@majoo-ui/helpers": "^1.30.5",