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

package/components/datePicker/components/CalendarMulti.esm.js

@@ -0,0 +1,407 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.find.js';
+import 'core-js/modules/es.iterator.map.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ChevronLeftOutline, ChevronRightOutline } from '@majoo-ui/icons';
+import moment from 'moment';
+import React__default, { useState, useEffect } from 'react';
+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, monthNamesFullEng, monthNamesFullId, yearRangesList, weekdayNamesShortEng, weekdayNamesShortId } from '../../../utils/calendar.esm.js';
+import DateNumber from './DateNumber.esm.js';
+import { useTranslation } from 'react-i18next';
+
+const getVariant = ({
+  selectable,
+  selected,
+  date
+}, month, selectedDate) => {
+  let variant = 'defaultv2';
+  if (selected) {
+    variant = 'selectedv2';
+  }
+  if (!selectable) {
+    variant = 'disabled';
+  }
+  if (date.getMonth() !== month) {
+    variant = 'neutral';
+  }
+  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, {
+  width: '$full',
+  display: 'inline-block',
+  textAlign: 'center',
+  marginBottom: '$spacing-03'
+});
+const CalendarsContainer = styled(Box, {
+  width: '100%'
+});
+const CalendarItemContainer = styled(Flex, {});
+const DateContainer = styled(Box, {
+  width: '100%',
+  position: 'relative',
+  display: 'inline-block'
+});
+const TitleButton = styled('p', {
+  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'
+      }
+    }
+  }
+});
+const DATE_PICKER = 0;
+const MONTH_PICKER = 1;
+const YEAR_PICKER = 2;
+const YEAR_RANGE_PICKER = 3;
+const CalendarMulti = ({
+  calendars,
+  getDateProps,
+  onCalendarDateChange,
+  selected,
+  containerStyle,
+  disabled,
+  minDate,
+  maxDate,
+  disabledDate
+}) => {
+  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 multiDatePicker = calendars.length > 1;
+  const renderTitleButton = (index = 0) => {
+    return multiDatePicker ? jsxs(TitleButton, {
+      onClick: () => {
+        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
+        }));
+      },
+      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, {
+      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, {
+      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 jsxs(Flex, {
+      justify: "between",
+      align: "baseline",
+      css: {
+        height: '32px'
+      },
+      children: [renderTitleButton(), jsxs(Flex, {
+        align: "center",
+        gap: 3,
+        children: [renderBackButton(), renderForwardButton()]
+      })]
+    });
+  };
+  const renderDateNumber = calendar => {
+    return jsxs(Grid, {
+      columns: 7,
+      css: {
+        gridRowGap: '$spacing-02'
+      },
+      children: [renderWeekLabel(calendar), 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;
+        const findDisabledDate = (disabledDate || []).find(x => x.getTime() === date.getTime());
+        let dateProps = disabled || findDisabledDate ? {} : getDateProps({
+          dateObj
+        });
+        dateProps = dateProps['disabled'] ? {} : dateProps;
+        return jsx(DateNumber, Object.assign({}, dateProps, {
+          variant: disabled && findDisabledDate ? 'disabled' : getVariant(dateObj, calendar.month),
+          isSunday: date.getDay() === 0,
+          css: Object.assign({
+            width: '$full'
+          }, disabled && Object.assign({
+            cursor: 'unset'
+          }, !findDisabledDate && {
+            '&:hover': {
+              backgroundColor: 'unset'
+            }
+          })),
+          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)))) {
+            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}`));
+  };
+  if (calendars.length) {
+    return jsx(CalendarsContainer, {
+      css: containerStyle,
+      children: 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 && renderDateNumber(calendar), pickerState.type === MONTH_PICKER && renderMonthsList(), pickerState.type === YEAR_PICKER && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER && renderYearRangesList()]
+            })]
+          }, `${calendar.month}${calendar.year}`))
+        })]
+      })
+    });
+  }
+  return null;
+};
+
+export { DATE_PICKER, MONTH_PICKER, YEAR_PICKER, YEAR_RANGE_PICKER, CalendarMulti as default };

package/components/datePicker/components/CalendarTimePicker.esm.js

@@ -0,0 +1,104 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import moment from 'moment';
+import Flex from '../../../layout/flex/Flex.esm.js';
+import Text from '../../text/Text.esm.js';
+import { InputTimePicker } from '../timePicker/InputTimePicker.esm.js';
+import { Separator } from '../../separator/Separator.esm.js';
+import { toDateFormat } from '../../../utils/calendar.esm.js';
+import { useTranslation } from 'react-i18next';
+
+const CalendarTimePicker = ({
+  selected,
+  disabled,
+  language,
+  onSetDateValue,
+  isSingle,
+  timePickerProps
+}) => {
+  const {
+    t
+  } = useTranslation('MajooUI/datePicker');
+  let startTime = moment('00:00', 'HH:mm').toDate();
+  let endTime = moment('00:00', 'HH:mm').toDate();
+  if (isSingle && selected && selected.length) {
+    startTime = selected[0];
+  }
+  if (!isSingle && selected && selected.length > 1) {
+    startTime = selected[0];
+    endTime = selected[1];
+  }
+  const formattedStartDate = selected && selected.length > 0 && !disabled ? toDateFormat(selected[0], language) : '-';
+  const formattedEndDate = selected && selected.length > 1 && !disabled ? toDateFormat(selected[1], language) : '-';
+  return jsxs(Flex, {
+    direction: "column",
+    gap: 4,
+    css: {
+      width: 150
+    },
+    children: [jsxs(Flex, {
+      direction: "column",
+      gap: 3,
+      children: [jsx(Text, {
+        variant: "label",
+        color: "primary",
+        children: isSingle ? t('label.date', 'Tanggal') : t('dateFromLabel', 'Dari Tanggal')
+      }), jsx(Text, {
+        variant: "label",
+        color: "disable",
+        children: formattedStartDate
+      })]
+    }), jsxs(Flex, {
+      direction: "column",
+      gap: 3,
+      children: [jsx(Text, {
+        variant: "label",
+        color: "primary",
+        children: isSingle ? t('time', 'Waktu') : t('timeFromLabel', 'Dari Pukul')
+      }), jsx(InputTimePicker, Object.assign({
+        onChange: val => {
+          if (isSingle && selected && selected.length && !!onSetDateValue) onSetDateValue(val.toDate());else if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([val.toDate(), selected[1]]);
+        },
+        size: "sm",
+        value: startTime,
+        disabled: isSingle ? !(selected && selected.length) : !(selected && selected.length > 1)
+      }, timePickerProps))]
+    }), isSingle ? null : jsxs(React__default.Fragment, {
+      children: [jsx(Separator, {
+        orientation: "horizontal"
+      }), jsxs(Flex, {
+        direction: "column",
+        gap: 3,
+        children: [jsx(Text, {
+          variant: "label",
+          color: "primary",
+          children: t('dateUntilLabel', 'Hingga Tanggal')
+        }), jsx(Text, {
+          variant: "label",
+          color: "disable",
+          children: formattedEndDate
+        })]
+      }), jsxs(Flex, {
+        direction: "column",
+        gap: 3,
+        children: [jsx(Text, {
+          variant: "label",
+          color: "primary",
+          children: t('timeUntilLabel', 'Hingga Pukul')
+        }), jsx(InputTimePicker, {
+          onChange: val => {
+            const endDate = moment(endTime).format('YYYY-MM-DD');
+            const newTime = val.format('HH:mm');
+            const newValue = moment(`${endDate} ${newTime}`, 'YYYY-MM-DD HH:mm').toDate();
+            if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([selected[0], newValue]);
+          },
+          size: "sm",
+          value: endTime,
+          disabled: !(selected && selected.length > 1)
+        })]
+      })]
+    })]
+  });
+};
+
+export { CalendarTimePicker as default };

package/components/datePicker/components/DateNumber.esm.js

@@ -0,0 +1,89 @@
+import { styled } from '../../../config/stitches.config.esm.js';
+
+const DateNumber = styled('div', {
+  width: '32px',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+  fontSize: '$label',
+  lineHeight: '$label',
+  letterSpacing: '$label',
+  fontWeight: '400',
+  color: '$textPrimary',
+  variants: {
+    variant: {
+      default: {
+        '&:hover': {
+          backgroundColor: '$bgSelectedLight',
+          color: '$textBrand'
+        }
+      },
+      disabled: {
+        backgroundColor: '$btnDisable',
+        color: '$textDisable'
+      },
+      neutral: {
+        backgroundColor: 'transparent',
+        color: "$gray400"
+      },
+      selected: {
+        backgroundColor: '$bgBrand',
+        color: '$white',
+        borderRadius: '$round',
+        width: 30,
+        height: 30,
+        margin: 'auto'
+      },
+      defaultv2: {
+        '&:hover': {
+          backgroundColor: '$bgSelectedLight'
+        }
+      },
+      selectedv2: {
+        backgroundColor: '$bgSelectedLight'
+      },
+      start: {
+        backgroundColor: '$bgBrand',
+        borderRadius: '42px 0px 0px 42px',
+        color: '$white'
+      },
+      end: {
+        backgroundColor: '$bgBrand',
+        borderRadius: '0px 42px 42px 0px',
+        color: '$white'
+      },
+      road: {
+        backgroundColor: '$bgSelectedLight'
+      }
+    },
+    size: {
+      large: {
+        padding: '8px 6px 8px 6px'
+      },
+      small: {
+        height: '32px',
+        width: '45.5px'
+      }
+    },
+    isSunday: {
+      true: {
+        color: '$textDisable'
+      }
+    }
+  },
+  compoundVariants: [{
+    variant: 'selected',
+    size: 'small',
+    css: {
+      borderRadius: '80px'
+    }
+  }],
+  defaultVariants: {
+    variant: 'default',
+    size: 'large'
+  }
+});
+DateNumber.displayName = 'DateNumber';
+
+export { DateNumber as default };