@majoo-ui/react 2.0.1 → 2.1.0-rc.1

package/components/datePicker/components/Calendar.esm.js

@@ -0,0 +1,654 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.map.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { ChevronLeftOutline, ChevronRightOutline } from '@majoo-ui/icons';
+import moment from 'moment';
+import React__default, { useState, useEffect, useMemo, Fragment as Fragment$1 } from 'react';
+import { Button } from '../../button/Button.esm.js';
+import Heading from '../../heading/Heading.esm.js';
+import Paragraph from '../../paragraph/Paragraph.esm.js';
+import { Separator } from '../../separator/Separator.esm.js';
+import Text from '../../text/Text.esm.js';
+import { styled } from '../../../config/stitches.config.esm.js';
+import Box from '../../../layout/box/Box.esm.js';
+import Flex from '../../../layout/flex/Flex.esm.js';
+import { Grid } from '../../../layout/grid/Grid.esm.js';
+import { getCalendarStartYearRange, getCalendarStartYear, weekdayNamesShortEng, weekdayNamesShortId, monthNamesFullEng, monthNamesFullId, yearRangesList, toDateFormat } from '../../../utils/calendar.esm.js';
+import DateNumber from './DateNumber.esm.js';
+import { useTranslation } from 'react-i18next';
+import CalendarTimePicker from './CalendarTimePicker.esm.js';
+
+const getVariant = ({
+  selectable,
+  selected,
+  date
+}, month, selectedDate) => {
+  let variant = 'default';
+  if (selected) {
+    variant = 'selected';
+  }
+  if (!selectable) {
+    variant = 'disabled';
+  }
+  if (date.getMonth() !== month) {
+    variant = 'neutral';
+  }
+  if (selectedDate && selectedDate.length === 2 && selectedDate[0].toDateString() !== selectedDate[1].toDateString()) {
+    if (selectedDate[0].toDateString() === date.toDateString()) {
+      variant = 'start';
+    } else if (selectedDate[1].toDateString() === date.toDateString()) {
+      variant = 'end';
+    } else if (selectedDate[0] < date && date < selectedDate[1]) {
+      variant = 'road';
+    }
+  }
+  return variant;
+};
+const ArrowButton = styled('button', {
+  all: 'unset',
+  size: '32px',
+  borderRadius: '$md',
+  backgroundColor: 'transparent',
+  border: 'none',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: '$iconPrimary',
+  '&:hover': {
+    backgroundColor: '$bgSelectedLight',
+    color: '$textBrand'
+  },
+  '&:active': {
+    backgroundColor: '$bgBrand',
+    color: '$bgWhite'
+  },
+  cursor: 'pointer',
+  '&:disabled': {
+    backgroundColor: '$btnDisable',
+    color: '$iconDisable',
+    cursor: 'default'
+  }
+});
+const WeekdayBox = styled(Box, {
+  display: 'inline-block',
+  width: '32px',
+  textAlign: 'center',
+  marginBottom: '$spacing-03'
+});
+const CalendarsContainer = styled(Box, {
+  width: '100%',
+  display: 'inline-flex',
+  borderRadius: '$lg',
+  justifyContent: 'center',
+  gap: '$spacing-03',
+  '@md': {
+    width: 'unset'
+  }
+});
+const CalenderBoxContainer = styled(Box, {
+  display: 'flex',
+  flexDirection: 'column',
+  boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
+  borderRadius: '$lg',
+  backgroundColor: '$bgWhite',
+  padding: '$spacing-03'
+});
+const CalendarItemContainer = styled(Flex, {});
+const DateContainer = styled(Box, {
+  width: '100%',
+  position: 'relative',
+  display: 'inline-block',
+  '@md': {
+    maxWidth: '334px',
+    width: 'unset'
+  }
+});
+const TitleButton = styled('p', {
+  padding: '4px $spacing-05',
+  marginTop: 6,
+  fontWeight: 600,
+  fontStyle: 'normal',
+  fontSize: 16,
+  color: '$textPrimary',
+  '&:hover': {
+    backgroundColor: '$bgSelectedLight',
+    color: '$textBrand'
+  },
+  '&:active': {
+    backgroundColor: '$bgBrand',
+    color: '$bgWhite'
+  },
+  cursor: 'pointer',
+  '&:disabled': {
+    backgroundColor: '$btnDisable',
+    color: '$iconDisable',
+    cursor: 'default'
+  },
+  variants: {
+    disabled: {
+      true: {
+        pointerEvents: 'none'
+      }
+    }
+  }
+});
+const MonthButton = styled(Text, {
+  minWidth: '70px',
+  textAlign: 'center !important',
+  borderRadius: '$md',
+  padding: '$spacing-03 0',
+  cursor: 'pointer',
+  fontSize: '$label',
+  lineHeight: '$label',
+  letterSpacing: '$label',
+  fontWeight: '400',
+  color: '$textPrimary',
+  '&:hover': {
+    backgroundColor: '$bgSelectedLight',
+    color: '$textBrand'
+  },
+  '&:active': {
+    backgroundColor: '$bgBrand',
+    color: '$bgWhite'
+  },
+  '&:disabled': {
+    backgroundColor: '$btnDisable',
+    color: '$iconDisable',
+    cursor: 'default'
+  },
+  variants: {
+    isSelected: {
+      true: {
+        backgroundColor: '$bgBrand',
+        color: '$bgWhite'
+      }
+    }
+  }
+});
+styled('button', {
+  fontWeight: 600,
+  fontStyle: 'normal',
+  fontSize: 14,
+  letterSpacing: 2,
+  textAlign: 'center',
+  padding: 8,
+  width: '100%',
+  outline: 'none',
+  border: 'none',
+  background: 'transparent',
+  cursor: 'pointer',
+  transition: '0.2s',
+  borderRadius: 2,
+  color: '$textPrimary',
+  '&:hover': {
+    background: '$bgSelectedLight',
+    color: '$textBrand'
+  },
+  variants: {
+    disabled: {
+      true: {
+        pointerEvents: 'none',
+        background: '$btnDisable',
+        color: '$textDisable'
+      }
+    }
+  }
+});
+const DATE_PICKER = 0;
+const MONTH_PICKER = 1;
+const YEAR_PICKER = 2;
+const YEAR_RANGE_PICKER = 3;
+const TIME_PICKER = 4;
+const Calendar = ({
+  calendars,
+  getDateProps,
+  advanceView,
+  onCalendarDateChange,
+  onIsMultiDateChange,
+  onUpdate,
+  onCancel,
+  onReset,
+  selected,
+  containerStyle,
+  disabled,
+  showTimePicker,
+  renderTimePicker,
+  minDate,
+  maxDate,
+  allowReset,
+  onSetDateValue,
+  maxRange = 0,
+  overMaxRange = false,
+  timePickerProps
+}) => {
+  const {
+    t,
+    i18n
+  } = useTranslation(['MajooUI/datePicker', 'translation']);
+  const [pickerState, setPickerState] = useState({
+    type: DATE_PICKER,
+    selectedMonth: Number(calendars[0].month),
+    selectedYear: Number(calendars[0].year),
+    selectedYearRange: getCalendarStartYear(calendars[0].year),
+    selectedYearRangeStart: getCalendarStartYearRange(calendars[0].year)
+  });
+  const language = i18n.language;
+  const monthNamesFull = language === 'en' ? monthNamesFullEng : monthNamesFullId;
+  const weekdayNamesShort = language === 'en' ? weekdayNamesShortEng : weekdayNamesShortId;
+  useEffect(() => {
+    const selectedDate = new Date(pickerState.selectedYear, pickerState.selectedMonth, 1, 0);
+    if (pickerState.selectedMonth < 0) {
+      setPickerState(current => Object.assign(Object.assign({}, current), {
+        selectedMonth: selectedDate.getMonth(),
+        selectedYear: selectedDate.getFullYear(),
+        selectedYearRange: getCalendarStartYear(selectedDate.getFullYear()),
+        selectedYearRangeStart: getCalendarStartYearRange(selectedDate.getFullYear())
+      }));
+    } else {
+      onCalendarDateChange(selectedDate);
+    }
+  }, [`${pickerState.selectedMonth}/${pickerState.selectedYear}`]);
+  const isDisableSaveMinDate = useMemo(() => {
+    if ((selected === null || selected === void 0 ? void 0 : selected.length) && (timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.minDate) instanceof Date) {
+      return moment(selected[0]).isBefore(timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.minDate);
+    } else return false;
+  }, [selected, minDate, showTimePicker]);
+  const multiDatePicker = calendars.length > 1;
+  const renderTitleButton = (index = 0) => {
+    return multiDatePicker ? jsxs(TitleButton, {
+      onClick: () => {
+        if (onIsMultiDateChange) onIsMultiDateChange(false);
+        setPickerState(current => Object.assign(Object.assign({}, current), {
+          type: MONTH_PICKER
+        }));
+      },
+      children: [monthNamesFull[calendars[index].month], " ", calendars[index].year]
+    }) : jsxs(TitleButton, {
+      onClick: () => {
+        if (pickerState.type < YEAR_RANGE_PICKER) setPickerState(current => Object.assign(Object.assign({}, current), {
+          type: current.type + 1
+        }));
+        if (pickerState.type === TIME_PICKER) {
+          setPickerState(current => Object.assign(Object.assign({}, current), {
+            type: DATE_PICKER
+          }));
+        }
+      },
+      disabled: disabled || pickerState.type === YEAR_RANGE_PICKER,
+      children: [pickerState.type === DATE_PICKER && jsxs(Fragment, {
+        children: [monthNamesFull[calendars[0].month], " ", calendars[0].year]
+      }), pickerState.type === MONTH_PICKER && pickerState.selectedYear, pickerState.type === YEAR_PICKER && jsxs(Fragment, {
+        children: [pickerState.selectedYearRange, " - ", pickerState.selectedYearRange + 9]
+      }), pickerState.type === YEAR_RANGE_PICKER && jsxs(Fragment, {
+        children: [pickerState.selectedYearRangeStart, " - ", pickerState.selectedYearRangeStart + 99]
+      }), pickerState.type === TIME_PICKER && jsxs(Fragment, {
+        children: [selected && moment(selected === null || selected === void 0 ? void 0 : selected[0]).format('DD'), " ", monthNamesFull[calendars[0].month], " ", calendars[0].year]
+      })]
+    });
+  };
+  const renderBackButton = () => {
+    return jsx(ArrowButton, {
+      disabled: disabled,
+      onClick: () => {
+        if (!minDate || pickerState.type === DATE_PICKER && moment(minDate).isBefore(moment().date(1).month(pickerState.selectedMonth).year(pickerState.selectedYear)) || pickerState.type === MONTH_PICKER && new Date(minDate).getFullYear() < pickerState.selectedYear) {
+          setPickerState(current => Object.assign(Object.assign({}, current), {
+            selectedMonth: pickerState.type === DATE_PICKER ? current.selectedMonth - 1 : current.selectedMonth,
+            selectedYear: pickerState.type === MONTH_PICKER ? current.selectedYear - 1 : current.selectedYear,
+            selectedYearRange: pickerState.type === YEAR_PICKER ? current.selectedYearRange - 10 : current.selectedYearRange,
+            selectedYearRangeStart: pickerState.type === YEAR_RANGE_PICKER ? current.selectedYearRangeStart - 100 : current.selectedYearRangeStart
+          }));
+        }
+      },
+      type: "button",
+      children: jsx(ChevronLeftOutline, {
+        color: "currentColor"
+      })
+    });
+  };
+  const renderForwardButton = () => {
+    return jsx(ArrowButton, {
+      disabled: disabled,
+      onClick: () => {
+        if (!maxDate || pickerState.type === DATE_PICKER && moment(maxDate).isAfter(moment().date(1).month(pickerState.selectedMonth + 1).year(pickerState.selectedYear)) || pickerState.type === MONTH_PICKER && new Date(maxDate).getFullYear() > pickerState.selectedYear) {
+          setPickerState(current => Object.assign(Object.assign({}, current), {
+            selectedMonth: pickerState.type === DATE_PICKER ? current.selectedMonth === 11 ? 0 : current.selectedMonth + 1 : current.selectedMonth,
+            selectedYear: pickerState.type === MONTH_PICKER && current.selectedYear < 2100 || current.selectedMonth === 11 ? current.selectedYear + 1 : current.selectedYear,
+            selectedYearRange: pickerState.type === YEAR_PICKER && current.selectedYearRange < 2091 ? current.selectedYearRange + 10 : current.selectedYearRange,
+            selectedYearRangeStart: pickerState.type === YEAR_RANGE_PICKER && current.selectedYearRangeStart < 2001 ? current.selectedYearRangeStart + 100 : current.selectedYearRangeStart
+          }));
+        }
+      },
+      type: "button",
+      children: jsx(ChevronRightOutline, {
+        color: "currentColor"
+      })
+    });
+  };
+  const renderHeader = () => {
+    return jsx(Flex, {
+      justify: "between",
+      align: "center",
+      css: {
+        height: '32px'
+      },
+      children: multiDatePicker ? jsxs(Fragment, {
+        children: [jsxs(Flex, {
+          justify: "between",
+          align: "center",
+          css: {
+            width: '50%',
+            height: '100%'
+          },
+          children: [renderBackButton(), renderTitleButton(0), jsx(Box, {
+            css: {
+              size: '32px'
+            }
+          })]
+        }), jsx(Separator, {
+          orientation: "vertical",
+          css: {
+            alignSelf: 'stretch'
+          }
+        }), jsxs(Flex, {
+          justify: "between",
+          align: "center",
+          css: {
+            width: '50%',
+            height: '100%'
+          },
+          children: [jsx(Box, {
+            css: {
+              size: '32px'
+            }
+          }), renderTitleButton(1), renderForwardButton()]
+        })]
+      }) : jsxs(Fragment, {
+        children: [renderBackButton(), renderTitleButton(), renderForwardButton()]
+      })
+    });
+  };
+  const renderDateNumber = calendar => {
+    return jsx(Grid, {
+      columns: 7,
+      css: {
+        gridRowGap: '$spacing-02'
+      },
+      children: calendar.weeks.map((week, weekIndex) => week.map((dateObj, index) => {
+        const key = `${calendar.month}${calendar.year}${weekIndex}${index}`;
+        if (!dateObj) {
+          return jsx("div", {
+            style: {
+              display: 'inline-block',
+              width: '32px',
+              border: 'none',
+              background: 'transparent'
+            }
+          }, key);
+        }
+        const {
+          date
+        } = dateObj;
+        // let background = today ? 'cornflowerblue' : '';
+        // background = selected ? 'purple' : background;
+        // background = !selectable ? 'teal' : background;
+        let dateProps = disabled ? {} : getDateProps({
+          dateObj
+        });
+        dateProps = dateProps['disabled'] ? {} : dateProps;
+        return jsx(DateNumber, Object.assign({}, dateProps, {
+          variant: disabled ? 'disabled' : getVariant(dateObj, calendar.month, selected),
+          isSunday: date.getDay() === 0,
+          children: date.getDate()
+        }), key);
+      }))
+    });
+  };
+  const renderYearRangesList = () => {
+    const yearsRangeList = yearRangesList(pickerState.selectedYearRangeStart);
+    return jsx(Grid, {
+      columns: 3,
+      css: {
+        gridRowGap: '$spacing-05',
+        gridColumnGap: '$spacing-04',
+        padding: '6px 4px 8px 4px'
+      },
+      children: yearsRangeList.map(range => jsxs(MonthButton, {
+        isSelected: pickerState.selectedYearRange === range.start,
+        onClick: () => {
+          if ((!maxDate || new Date(maxDate).getFullYear() <= range.end) && (!minDate || new Date(minDate).getFullYear() >= range.start)) {
+            setPickerState(current => Object.assign(Object.assign({}, current), {
+              selectedYearRange: range.start,
+              type: YEAR_PICKER
+            }));
+          }
+        },
+        children: [range.start, "-", range.end]
+      }, range.start))
+    });
+  };
+  const renderYearsList = () => {
+    const startYear = pickerState.selectedYearRange;
+    const yearsArray = Array.from(new Array(10), (val, index) => index + startYear);
+    return jsx(Grid, {
+      columns: 3,
+      css: {
+        gridRowGap: '$spacing-05',
+        gridColumnGap: '$spacing-04',
+        padding: '6px 4px 8px 4px'
+      },
+      children: yearsArray.map((year, index) => jsx(MonthButton, {
+        isSelected: pickerState.selectedYear === year,
+        onClick: () => {
+          if ((!maxDate || new Date(maxDate).getFullYear() > year - 1) && (!minDate || new Date(minDate).getFullYear() < year + 1)) {
+            setPickerState(current => Object.assign(Object.assign({}, current), {
+              selectedYear: year,
+              type: MONTH_PICKER
+            }));
+          }
+        },
+        children: year
+      }, year))
+    });
+  };
+  const renderMonthsList = () => {
+    return jsx(Grid, {
+      columns: 3,
+      css: {
+        gridRowGap: '$spacing-05',
+        gridColumnGap: '$spacing-04',
+        padding: '6px 4px 8px 4px'
+      },
+      children: monthNamesFull.map((monthName, index) => jsx(MonthButton, {
+        isSelected: pickerState.selectedMonth === index,
+        onClick: () => {
+          if ((!minDate || moment(minDate).isBefore(moment().month(index).year(pickerState.selectedYear))) && (!maxDate || moment(maxDate).isAfter(moment().month(index).year(pickerState.selectedYear)))) {
+            if (onIsMultiDateChange) onIsMultiDateChange(true);
+            setPickerState(current => Object.assign(Object.assign({}, current), {
+              selectedMonth: index,
+              type: DATE_PICKER
+            }));
+          }
+        },
+        children: monthName
+      }, monthName))
+    });
+  };
+  const renderWeekLabel = calendar => {
+    return weekdayNamesShort.map(weekday => jsx(WeekdayBox, {
+      children: jsx(Paragraph, {
+        paragraph: "shortContentBold",
+        css: {
+          color: '$textSecondary',
+          fontSize: '$label',
+          textAlign: 'center !important'
+        },
+        children: weekday
+      })
+    }, `${calendar.month}${calendar.year}${weekday}`));
+  };
+  const renderFooter = () => {
+    return jsxs(Box, {
+      children: [jsx(Separator, {
+        css: {
+          my: '$spacing-03'
+        }
+      }), jsxs(Flex, {
+        justify: "between",
+        align: "center",
+        css: {
+          padding: 8
+        },
+        children: [jsx(Heading, {
+          heading: "sectionTitle",
+          color: overMaxRange ? 'red' : selected && selected.length > 1 ? 'primary' : 'disable',
+          css: {
+            lineHeight: '$short-content-regular',
+            fontSize: '$short-content-regular'
+          },
+          children: overMaxRange ? t('label.maxRangeDate', `Maksimal range adalah ${maxRange} hari`, {
+            maxRange
+          }) : selected && selected.length > 1 && !disabled ? `${toDateFormat(selected[0], language)} - ${toDateFormat(selected[1], language)}` : !selected || selected.length <= 0 ? t('notSelectedDateText', 'Tanggal belum dipilih') : toDateFormat(selected[0], language)
+        }), jsxs(Flex, {
+          gap: 3,
+          children: [allowReset ? jsx(Button, {
+            buttonType: "ghost",
+            css: {
+              fontWeight: 600
+            },
+            onClick: onReset,
+            disabled: disabled || !selected || selected.length <= 1,
+            size: "sm",
+            type: "button",
+            children: "Reset"
+          }) : jsx(Button, {
+            buttonType: "ghost",
+            css: {
+              fontWeight: 600
+            },
+            onClick: onCancel,
+            disabled: disabled,
+            size: "sm",
+            type: "button",
+            children: t('label.cancel', 'Batal', {
+              ns: 'translation'
+            })
+          }), jsx(Button, {
+            css: {
+              fontWeight: 600
+            },
+            onClick: onUpdate,
+            disabled: disabled || !selected || selected.length <= 1 || overMaxRange || isDisableSaveMinDate,
+            size: "sm",
+            type: "button",
+            children: t('label.process', 'Proses', {
+              ns: 'translation'
+            })
+          })]
+        })]
+      })]
+    });
+  };
+  const renderTime = () => {
+    return jsxs(Fragment$1, {
+      children: [jsx(Separator, {
+        orientation: "vertical"
+      }), jsx(CalendarTimePicker, {
+        selected,
+        disabled,
+        language,
+        onSetDateValue,
+        timePickerProps,
+        isSingle: !multiDatePicker
+      })]
+    });
+  };
+  const renderFooterSingleTimePicker = () => {
+    return jsxs(Box, {
+      css: {
+        width: '$full'
+      },
+      children: [jsx(Separator, {
+        css: {
+          my: '$spacing-03'
+        }
+      }), jsx(Flex, {
+        justify: "end",
+        align: "center",
+        css: {
+          padding: 8
+        },
+        children: jsxs(Flex, {
+          gap: 3,
+          children: [jsx(Button, {
+            buttonType: "ghost",
+            css: {
+              fontWeight: 600
+            },
+            onClick: onCancel,
+            disabled: disabled,
+            size: "sm",
+            type: "button",
+            children: t('label.cancel', 'Batal', {
+              ns: 'translation'
+            })
+          }), jsx(Button, {
+            css: {
+              fontWeight: 600
+            },
+            onClick: onUpdate,
+            disabled: disabled || !(selected && selected.length) || isDisableSaveMinDate,
+            size: "sm",
+            type: "button",
+            children: t('label.save', 'Simpan', {
+              ns: 'translation'
+            })
+          })]
+        })
+      })]
+    });
+  };
+  if (calendars.length) {
+    return jsxs(CalenderBoxContainer, {
+      children: [jsxs(CalendarsContainer, {
+        css: containerStyle,
+        children: [advanceView, advanceView && jsx(Separator, {
+          orientation: "vertical"
+        }), jsxs(Box, {
+          children: [renderHeader(), jsx(CalendarItemContainer, {
+            gap: 5,
+            children: calendars.map((calendar, index) => jsxs(React__default.Fragment, {
+              children: [index > 0 && jsx(Separator, {
+                orientation: "vertical",
+                css: {
+                  height: 'auto'
+                }
+              }), jsxs(DateContainer, {
+                children: [jsx(Separator, {
+                  css: {
+                    mb: '$spacing-04',
+                    mt: '$spacing-02'
+                  }
+                }), pickerState.type === DATE_PICKER && jsxs(Fragment, {
+                  children: [renderWeekLabel(calendar), renderDateNumber(calendar)]
+                }), pickerState.type === MONTH_PICKER && renderMonthsList(), pickerState.type === YEAR_PICKER && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER && renderYearRangesList()]
+              })]
+            }, `${calendar.month}${calendar.year}`))
+          })]
+        }), !advanceView && showTimePicker && renderTime(), showTimePicker && pickerState.type === DATE_PICKER && !!advanceView && jsxs(Fragment$1, {
+          children: [jsx(Separator, {
+            orientation: "vertical"
+          }), jsx(CalendarTimePicker, {
+            selected,
+            disabled,
+            language,
+            onSetDateValue,
+            timePickerProps
+          })]
+        })]
+      }), !multiDatePicker && showTimePicker && renderFooterSingleTimePicker(), multiDatePicker && renderFooter()]
+    });
+  }
+  return null;
+};
+
+export { DATE_PICKER, MONTH_PICKER, TIME_PICKER, YEAR_PICKER, YEAR_RANGE_PICKER, Calendar as default };