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

package/components/datePicker/components/MobileCalendar.esm.js

@@ -0,0 +1,522 @@
+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 { ChevronDownOutline, ChevronUpOutline, ChevronLeftOutline, ChevronRightOutline } from '@majoo-ui/icons';
+import moment from 'moment';
+import { useState, useEffect } from 'react';
+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 { 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 { DATE_PICKER, MONTH_PICKER, YEAR_PICKER, YEAR_RANGE_PICKER } from './Calendar.esm.js';
+import DateNumber from './DateNumber.esm.js';
+import { useTranslation } from 'react-i18next';
+
+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: '$white'
+  },
+  cursor: 'pointer',
+  '&:disabled': {
+    backgroundColor: '$btnDisable',
+    color: '$iconDisable',
+    cursor: 'default'
+  }
+});
+const WeekdayBox = styled(Box, {
+  display: 'inline-block',
+  width: '45.5px',
+  textAlign: 'center',
+  marginBottom: '$spacing-04',
+  '@md': {
+    width: '32px'
+  }
+});
+const DatePickerContainer = styled(Box, {
+  width: '100%',
+  height: '100%',
+  boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
+  backgroundColor: '$white',
+  '@md': {
+    width: 'unset'
+  }
+});
+const CalendarsContainer = styled(Box, {
+  width: '100%',
+  overflow: 'auto',
+  padding: '$spacing-02 20px $spacing-05',
+  display: 'inline-flex',
+  position: 'absolute',
+  bottom: 0,
+  borderRadius: '$lg',
+  backgroundColor: '$white',
+  // alignItems: 'center',
+  justifyContent: 'center',
+  gap: '$spacing-04',
+  maxHeight: '90vh',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  '-ms-overflow-style': 'none',
+  scrollbarWidth: 'none',
+  '&::-webkit-scrollbar': {
+    display: 'none'
+  }
+});
+const CalendarItemContainer = styled(Flex, {
+  height: '100%',
+  paddingBottom: '160px'
+});
+const DateContainer = styled(Box, {
+  width: '100%',
+  position: 'relative',
+  display: 'inline-block',
+  '@md': {
+    maxWidth: '334px',
+    width: 'unset'
+  }
+});
+const FooterContainer = styled(Flex, {
+  position: 'relative',
+  backgroundColor: '$white',
+  boxShadow: '0px -1px 8px rgba(0, 0, 0, 0.12)',
+  padding: '$spacing-05 $spacing-04'
+});
+const TitleButton = styled(Heading, {
+  padding: '2px $spacing-04',
+  color: '$textPrimary',
+  '&:hover': {
+    backgroundColor: '$bgSelectedLight',
+    color: '$textBrand'
+  },
+  '&:active': {
+    backgroundColor: '$bgBrand',
+    color: '$white'
+  },
+  cursor: 'pointer',
+  '&:disabled': {
+    backgroundColor: '$btnDisable',
+    color: '$iconDisable',
+    cursor: 'default'
+  },
+  variants: {
+    disabled: {
+      true: {
+        pointerEvents: 'none'
+      }
+    }
+  }
+});
+const MonthButton = styled(Text, {
+  minWidth: '90px',
+  textAlign: 'center !important',
+  borderRadius: '$md',
+  padding: '$spacing-05 0',
+  cursor: 'pointer',
+  fontSize: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  letterSpacing: '$short-content-regular',
+  fontWeight: '400',
+  color: '$textPrimary',
+  '&:hover': {
+    backgroundColor: '$bgSelectedLight',
+    color: '$textBrand'
+  },
+  '&:active': {
+    backgroundColor: '$bgBrand',
+    color: '$white'
+  },
+  '&:disabled': {
+    backgroundColor: '$btnDisable',
+    color: '$iconDisable',
+    cursor: 'default'
+  },
+  variants: {
+    isSelected: {
+      true: {
+        backgroundColor: '$bgBrand',
+        color: '$white'
+      }
+    }
+  }
+});
+const AdvanceViewToggleButton = styled(Flex, {
+  cursor: 'pointer',
+  padding: '0px 12px'
+});
+const MobileCalendar = ({
+  calendars,
+  getDateProps,
+  advanceView,
+  onCalendarDateChange,
+  onIsMultiDateChange,
+  onUpdate,
+  onCancel,
+  onReset,
+  selected,
+  containerStyle,
+  disabled,
+  minDate,
+  maxDate,
+  allowReset,
+  maxRange = 0,
+  overMaxRange = false
+}) => {
+  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;
+  const [expandAdvanceView, setExpandAdvanceView] = useState(false);
+  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 multiDatePicker = calendars.length > 1;
+  const renderTitleButton = index => {
+    return multiDatePicker ? jsxs(TitleButton, {
+      heading: "sectionTitle",
+      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, {
+      heading: "sectionTitle",
+      onClick: () => {
+        if (pickerState.type < YEAR_RANGE_PICKER) setPickerState(current => Object.assign(Object.assign({}, current), {
+          type: current.type + 1
+        }));
+      },
+      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]
+      })]
+    });
+  };
+  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 + 1 : current.selectedMonth,
+            selectedYear: pickerState.type === MONTH_PICKER && current.selectedYear < 2100 ? 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 = index => {
+    return jsx(Flex, {
+      justify: "between",
+      align: "center",
+      css: {
+        height: '44px'
+      },
+      children: jsxs(Fragment, {
+        children: [renderBackButton(), renderTitleButton(index), renderForwardButton()]
+      })
+    });
+  };
+  const renderDateNumber = calendar => {
+    return jsx(Grid, {
+      columns: 7,
+      css: {
+        gridRowGap: '$spacing-04'
+      },
+      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({
+          size: "small"
+        }, dateProps, {
+          variant: disabled ? 'disabled' : getVariant(dateObj, calendar.month, selected),
+          isSunday: date.getDay() === 0,
+          children: date.getDate()
+        }), key);
+      }))
+    });
+  };
+  const renderYearRangesList = () => {
+    return jsx(Grid, {
+      columns: 3,
+      css: {
+        gridRowGap: '$spacing-06',
+        gridColumnGap: '20px'
+      },
+      children: yearRangesList(pickerState.selectedYearRangeStart).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-06',
+        gridColumnGap: '20px'
+      },
+      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-06',
+        gridColumnGap: '20px'
+      },
+      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 jsx(Flex, {
+      children: weekdayNamesShort.map(weekday => jsx(WeekdayBox, {
+        children: jsx(Paragraph, {
+          paragraph: "shortContentBold",
+          css: {
+            color: '$textSecondary',
+            textAlign: 'center !important'
+          },
+          children: weekday
+        })
+      }, `${calendar.month}${calendar.year}${weekday}`))
+    });
+  };
+  const renderFooter = () => {
+    return jsxs(FooterContainer, {
+      direction: "column",
+      justify: "center",
+      gap: 4,
+      children: [advanceView && jsxs(Fragment, {
+        children: [jsxs(AdvanceViewToggleButton, {
+          gap: 3,
+          align: "center",
+          justify: "between",
+          onClick: () => setExpandAdvanceView(!expandAdvanceView),
+          children: [jsx(Text, {
+            variant: "contentButton",
+            css: {
+              color: '$textPrimary'
+            },
+            children: t('selectTimeRangeText', 'Pilih Rentang Waktu')
+          }), expandAdvanceView ? jsx(ChevronDownOutline, {}) : jsx(ChevronUpOutline, {})]
+        }), expandAdvanceView && advanceView, jsx(Separator, {
+          css: {
+            marginBottom: '$spacing-05'
+          }
+        })]
+      }), jsx(Text, {
+        css: {
+          textAlign: 'center !important'
+        },
+        variant: "status",
+        color: overMaxRange ? 'red' : selected && selected.length > 1 ? 'primary' : 'disable',
+        children: overMaxRange ? t('label.maxRangeDate', `Maksimal range adalah ${maxRange} hari`, {
+          maxRange
+        }) : selected && selected.length > 1 && !disabled ? `${toDateFormat(selected[0], language)} - ${toDateFormat(selected[1], language)}` : t('notSelectedDateText', 'Tanggal belum dipilih')
+      }), jsxs(Flex, {
+        gap: 3,
+        children: [allowReset ? jsx(Button, {
+          buttonType: "ghost",
+          size: "md",
+          onClick: onReset,
+          disabled: disabled || !selected || selected.length <= 1,
+          type: "button",
+          block: true,
+          children: "Reset"
+        }) : jsx(Button, {
+          buttonType: "ghost",
+          size: "md",
+          onClick: onCancel,
+          disabled: disabled,
+          type: "button",
+          block: true,
+          children: t('label.cancel', 'Batal', {
+            ns: 'translation'
+          })
+        }), jsx(Button, {
+          size: "md",
+          onClick: onUpdate,
+          disabled: disabled || !selected || selected.length <= 1 || overMaxRange,
+          type: "button",
+          block: true,
+          children: t('label.process', 'Proses', {
+            ns: 'translation'
+          })
+        })]
+      })]
+    });
+  };
+  if (calendars.length) {
+    return jsxs(DatePickerContainer, {
+      children: [jsx(CalendarsContainer, {
+        css: containerStyle,
+        children: jsx(CalendarItemContainer, {
+          direction: "column",
+          gap: 5,
+          children: calendars.map((calendar, index) => jsxs(DateContainer, {
+            children: [renderHeader(index), jsx(Separator, {
+              css: {
+                marginBottom: '$spacing-05'
+              }
+            }), 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}`))
+        })
+      }), multiDatePicker && renderFooter()]
+    });
+  }
+  return null;
+};
+
+export { MobileCalendar as default };