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

package/components/datePicker/CustomDatePicker.esm.js

@@ -0,0 +1,121 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useState, useEffect, useReducer } from 'react';
+import useMediaQuery from '../../utils/useMediaQuery.esm.js';
+import { Drawer, DrawerContent } from '../drawer/Drawer.esm.js';
+import { AdvancedOption } from './AdvancedOption.esm.js';
+import { SINGLE_PICKER, DatePicker, ADVANCE_PICKER } from './DatePicker.esm.js';
+import { pickerReducer, UPDATE_PICKER, advancePickerOptionsId, advancePickerDate } from './state/reducer.esm.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../popover/Popover.esm.js';
+
+function CustomDatePicker({
+  children,
+  type = SINGLE_PICKER,
+  disabled,
+  onChange,
+  defaultValue: defaultDateValue,
+  value: dateValue,
+  defaultDate,
+  date,
+  advanceView,
+  placement = 'bottom-start',
+  showTimePicker,
+  minDate,
+  maxDate,
+  allowReset,
+  sideOffset = 8
+}) {
+  const [value, setValue] = useState(date || dateValue);
+  const [defaultValue, setDefaultValue] = useState(defaultDate || defaultDateValue);
+  useEffect(() => {
+    setValue(date || dateValue);
+  }, [date, dateValue]);
+  useEffect(() => {
+    setDefaultValue(defaultDate || defaultDateValue);
+  }, [defaultDate, defaultDateValue]);
+  const [{
+    selectedDate
+  }, dispatch] = useReducer(pickerReducer, {
+    selectedDate: defaultValue !== null && defaultValue !== void 0 ? defaultValue : value
+  });
+  const [openPicker, setOpenPicker] = useState(false);
+  useEffect(() => {
+    if (value) {
+      dispatch({
+        type: UPDATE_PICKER,
+        payload: value
+      });
+    }
+  }, [value]);
+  const isMobile = useMediaQuery(`(max-width: ${type === SINGLE_PICKER ? '480px' : '767px'})`);
+  function handleOpenChange() {
+    if (!disabled) {
+      setOpenPicker(!openPicker);
+    }
+  }
+  const handleDatePickerChange = value => {
+    dispatch({
+      type: 'UPDATE',
+      payload: value
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+  };
+  const renderDatePicker = () => {
+    return jsx(DatePicker, {
+      advanceView: type === ADVANCE_PICKER && (!advanceView ? jsx(AdvancedOption, {
+        options: advancePickerOptionsId,
+        disabled: disabled,
+        optionHandler: value => {
+          dispatch({
+            type: 'UPDATE',
+            payload: advancePickerDate(value, undefined)
+          });
+          if (onChange) onChange(advancePickerDate(value, undefined));
+          setOpenPicker(false);
+        }
+      }) : {
+        advanceView
+      }),
+      type: type,
+      disabled: disabled,
+      date: value ? value === null || value === void 0 ? void 0 : value[1] : selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate[1],
+      selected: selectedDate,
+      isMultiDatePicker: type !== SINGLE_PICKER,
+      onChange: handleDatePickerChange,
+      onClose: () => setOpenPicker(false),
+      showTimePicker: showTimePicker,
+      minDate: minDate,
+      maxDate: maxDate,
+      allowReset: allowReset
+    });
+  };
+  return !isMobile ? jsxs(Popover, {
+    open: openPicker,
+    onOpenChange: setOpenPicker,
+    placement: placement,
+    sideOffset: sideOffset,
+    children: [jsx(PopoverTrigger, {
+      disabled: disabled,
+      children: children
+    }), jsx(PopoverContent, {
+      children: renderDatePicker()
+    })]
+  }) : jsxs(Fragment, {
+    children: [/*#__PURE__*/React.cloneElement(children, Object.assign(Object.assign({}, children.props), {
+      onClick: handleOpenChange
+    })), jsx(Drawer, {
+      open: openPicker,
+      onOpenChange: handleOpenChange,
+      side: "bottom",
+      children: jsx(DrawerContent, {
+        css: {
+          position: 'fixed',
+          left: 0
+        },
+        children: renderDatePicker()
+      })
+    })]
+  });
+}
+
+export { CustomDatePicker };

package/components/datePicker/DatePicker.esm.js

@@ -0,0 +1,244 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { useDayzed } from 'dayzed';
+import Calendar from './components/Calendar.esm.js';
+import MobileCalendar from './components/MobileCalendar.esm.js';
+import './components/DateNumber.esm.js';
+import './components/CalendarMulti.esm.js';
+import useMediaQuery from '../../utils/useMediaQuery.esm.js';
+import moment from 'moment';
+import { useMountedLayoutEffect } from 'react-table';
+
+const DEFAULT = 'default';
+const SINGLE_PICKER = 'single';
+const RANGE_PICKER = 'range';
+const DATE_RANGE_PICKER = 'range_picker';
+const ADVANCE_PICKER = 'advance';
+const RANGE_CONTROL = 'range_control';
+const WEEKLY = 'weekly';
+const MONTHLY = 'monthly';
+const CalendarPicker = _a => {
+  var {
+      isMultiDatePicker,
+      onChange,
+      onClose,
+      advanceView,
+      selected,
+      disabled,
+      showTimePicker,
+      timePickerProps,
+      minDate,
+      maxDate
+    } = _a,
+    props = __rest(_a, ["isMultiDatePicker", "onChange", "onClose", "advanceView", "selected", "disabled", "showTimePicker", "timePickerProps", "minDate", "maxDate"]);
+  const [dateValue, setDateValue] = useState(selected);
+  const [calendarDate, setCalendarDate] = useState(selected !== null && selected !== void 0 ? selected : new Date());
+  const onDateSelected = selectedDate => {
+    if (timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.minDate) {
+      if (moment(selectedDate.date).isBefore(timePickerProps.minDate)) {
+        setDateValue(timePickerProps.minDate);
+      } else {
+        setDateValue(selectedDate.date);
+      }
+    } else {
+      setDateValue(selectedDate.date);
+    }
+    if (!showTimePicker) {
+      onClose();
+    }
+  };
+  const updateHandler = () => {
+    if (dateValue && onChange) {
+      onChange(dateValue);
+    }
+    onClose();
+  };
+  const dayzedData = useDayzed(Object.assign(Object.assign({}, props), {
+    date: calendarDate,
+    selected: dateValue,
+    monthsToDisplay: isMultiDatePicker ? 2 : 1,
+    showOutsideDays: true,
+    onDateSelected,
+    minDate: minDate,
+    maxDate
+  }));
+  useMountedLayoutEffect(() => {
+    if (selected) {
+      setDateValue(selected);
+    }
+  }, [selected]);
+  useMountedLayoutEffect(() => {
+    if (dateValue && !(isMultiDatePicker || showTimePicker) && onChange) {
+      onChange(dateValue);
+    }
+  }, [dateValue]);
+  return jsx(Calendar, Object.assign({
+    onUpdate: isMultiDatePicker || showTimePicker ? updateHandler : undefined,
+    onCancel: onClose,
+    selected: dateValue ? [dateValue] : undefined,
+    advanceView: advanceView,
+    disabled: disabled,
+    onCalendarDateChange: setCalendarDate,
+    showTimePicker: showTimePicker,
+    minDate: minDate,
+    maxDate: maxDate,
+    timePickerProps: timePickerProps
+  }, showTimePicker && {
+    onSetDateValue: setDateValue,
+    timePickerProps
+  }, dayzedData));
+};
+const CalendarRangePicker = _a => {
+  var {
+      isMultiDatePicker,
+      isRangeControl,
+      onChange,
+      onDateSelected: onSelectedDate,
+      onClose,
+      onReset,
+      advanceView,
+      selected,
+      disabled,
+      minDate: minDateProps,
+      maxDate: maxDateProps,
+      allowReset,
+      showTimePicker,
+      maxRange,
+      timePickerProps
+    } = _a,
+    props = __rest(_a, ["isMultiDatePicker", "isRangeControl", "onChange", "onDateSelected", "onClose", "onReset", "advanceView", "selected", "disabled", "minDate", "maxDate", "allowReset", "showTimePicker", "maxRange", "timePickerProps"]);
+  const today = new Date();
+  const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
+  const nowMonth = new Date(today.getFullYear(), today.getMonth(), 1, 0);
+  let initMonth = prevMonth;
+  if (selected && selected.length > 1) {
+    const selectedMonthStart = new Date(selected[0].getFullYear(), selected[0].getMonth(), 1, 0);
+    const selectedMonthEnd = new Date(selected[1].getFullYear(), selected[1].getMonth(), 1, 0);
+    if (selectedMonthStart < nowMonth || selectedMonthEnd > nowMonth) initMonth = selectedMonthStart;
+  }
+  const [dateValue, setDateValue] = useState(selected || []);
+  const [calendarDate, setCalendarDate] = useState(initMonth);
+  const [isMultiDate, setIsMultiDate] = useState(isMultiDatePicker);
+  const {
+    overMaxRange,
+    minDate,
+    maxDate
+  } = useMemo(() => {
+    let overMaxRange = false;
+    let diff = 0;
+    const minDate = minDateProps;
+    const maxDate = maxDateProps;
+    if (dateValue && (dateValue === null || dateValue === void 0 ? void 0 : dateValue.length) > 1 && maxRange) {
+      const startDate = moment(dateValue[0]).startOf('day');
+      const endDate = moment(dateValue[1]).startOf('day');
+      diff = endDate.diff(startDate, 'days') + 1;
+      if (diff > maxRange) overMaxRange = true;
+      // ga jadi dipakai di simpan dulu aja code nya
+      // if (diff === maxRange) {
+      //   minDate = dateValue[0];
+      //   maxDate = dateValue[1];
+      // }
+    }
+    return {
+      overMaxRange,
+      minDate,
+      maxDate
+    };
+  }, [maxRange, dateValue, minDateProps, maxDateProps]);
+  const isMobile = useMediaQuery('(max-width: 767px)');
+  const onDateSelected = selectedDate => {
+    if (isRangeControl) {
+      onChange === null || onChange === void 0 ? void 0 : onChange([selectedDate.date]);
+      onClose();
+    }
+    if (!dateValue.length || dateValue.length === 2) {
+      setDateValue([selectedDate.date]);
+      onSelectedDate === null || onSelectedDate === void 0 ? void 0 : onSelectedDate([selectedDate.date]);
+    } else {
+      if (new Date(dateValue[0]) > selectedDate.date) {
+        const dateAsString = moment(dateValue[0]).format('YYYY-MM-DD');
+        const newValue = [selectedDate.date, moment(`${dateAsString} 23:59`, 'YYYY-MM-DD HH:mm').toDate()];
+        setDateValue(newValue);
+        onSelectedDate === null || onSelectedDate === void 0 ? void 0 : onSelectedDate(newValue);
+      } else {
+        const dateAsString = moment(selectedDate.date).format('YYYY-MM-DD');
+        const newValue = [dateValue[0], moment(`${dateAsString} 23:59`, 'YYYY-MM-DD HH:mm').toDate()];
+        setDateValue(newValue);
+        onSelectedDate === null || onSelectedDate === void 0 ? void 0 : onSelectedDate(newValue);
+      }
+    }
+  };
+  const dayzedData = useDayzed(Object.assign(Object.assign({}, props), {
+    date: calendarDate,
+    selected: dateValue,
+    monthsToDisplay: isMultiDate ? 2 : 1,
+    onDateSelected,
+    minDate,
+    maxDate
+  }));
+  const updateHandler = () => {
+    if (dateValue && onChange && dateValue.length > 1) {
+      onChange(dateValue);
+    }
+    onClose();
+  };
+  const resetHandler = () => {
+    if (dateValue && onChange && dateValue.length > 1) {
+      onChange(null);
+    }
+    onClose();
+  };
+  useMountedLayoutEffect(() => {
+    if (selected) {
+      setDateValue(selected);
+    }
+  }, [selected]);
+  return isMobile ? jsx(MobileCalendar, Object.assign({
+    onUpdate: isMultiDatePicker ? updateHandler : undefined,
+    onCancel: onClose,
+    selected: dateValue,
+    advanceView: isMultiDate ? advanceView : undefined,
+    disabled: disabled,
+    onCalendarDateChange: setCalendarDate,
+    onIsMultiDateChange: setIsMultiDate,
+    minDate: minDate,
+    maxDate: maxDate,
+    allowReset: allowReset,
+    onReset: isMultiDatePicker ? resetHandler : undefined,
+    maxRange: maxRange,
+    overMaxRange: overMaxRange
+  }, dayzedData)) : jsx(Calendar, Object.assign({
+    onUpdate: isMultiDatePicker ? updateHandler : undefined,
+    onCancel: onClose,
+    selected: dateValue,
+    advanceView: isMultiDate ? advanceView : undefined,
+    disabled: disabled,
+    onCalendarDateChange: setCalendarDate,
+    onIsMultiDateChange: setIsMultiDate,
+    minDate: minDate,
+    maxDate: maxDate,
+    allowReset: allowReset,
+    onReset: isMultiDatePicker ? resetHandler : undefined,
+    showTimePicker: showTimePicker,
+    maxRange: maxRange,
+    overMaxRange: overMaxRange,
+    timePickerProps: timePickerProps,
+    onSetDateValue: setDateValue
+  }, dayzedData));
+};
+const DatePicker = props => {
+  const {
+      type
+    } = props,
+    otherProps = __rest(props, ["type"]);
+  const isDateRangePicker = type === DATE_RANGE_PICKER;
+  if (type !== SINGLE_PICKER || isDateRangePicker) {
+    return jsx(CalendarRangePicker, Object.assign({}, otherProps, {
+      isRangeControl: isDateRangePicker
+    }));
+  }
+  return jsx(CalendarPicker, Object.assign({}, otherProps));
+};
+
+export { ADVANCE_PICKER, DATE_RANGE_PICKER, DEFAULT, DatePicker, MONTHLY, RANGE_CONTROL, RANGE_PICKER, SINGLE_PICKER, WEEKLY };

package/components/datePicker/DatePickerMulti.esm.js

@@ -0,0 +1,70 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.filter.js';
+import 'core-js/modules/es.iterator.find.js';
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { useDayzed } from 'dayzed';
+import './components/Calendar.esm.js';
+import './components/MobileCalendar.esm.js';
+import './components/DateNumber.esm.js';
+import CalendarMulti from './components/CalendarMulti.esm.js';
+import { useMountedLayoutEffect } from 'react-table';
+
+const DatePickerMulti = _a => {
+  var {
+      onChange,
+      onClose,
+      selected,
+      disabled,
+      minDate,
+      maxDate,
+      disabledDate
+    } = _a,
+    props = __rest(_a, ["onChange", "onClose", "selected", "disabled", "minDate", "maxDate", "disabledDate"]);
+  const today = new Date();
+  const nowMonth = new Date(today.getFullYear(), today.getMonth(), 1, 0);
+  let initMonth = nowMonth;
+  if (selected && selected.length > 1) {
+    const selectedMonthStart = new Date(selected[0].getFullYear(), selected[0].getMonth(), 1, 0);
+    if (selectedMonthStart > nowMonth) initMonth = selectedMonthStart;
+  }
+  const [dateValue, setDateValue] = useState(selected) || [];
+  const [calendarDate, setCalendarDate] = useState(initMonth);
+  const onDateSelected = ({
+    date
+  }) => {
+    let newDate = [];
+    if ((dateValue || []).find(x => x.getTime() === date.getTime())) {
+      newDate = (dateValue || []).filter(x => x.getTime() !== date.getTime());
+    } else {
+      newDate = [...(dateValue || []), date];
+    }
+    setDateValue(newDate);
+    if (onChange && !disabled) onChange(newDate);
+  };
+  const dayzedData = useDayzed(Object.assign(Object.assign({}, props), {
+    date: calendarDate,
+    selected: dateValue,
+    monthsToDisplay: 1,
+    showOutsideDays: false,
+    onDateSelected,
+    minDate,
+    maxDate
+  }));
+  useMountedLayoutEffect(() => {
+    if (selected) {
+      setDateValue(selected);
+    }
+  }, [selected]);
+  return jsx(CalendarMulti, Object.assign({
+    selected: dateValue,
+    disabled: disabled,
+    onCalendarDateChange: setCalendarDate,
+    minDate: minDate,
+    maxDate: maxDate,
+    disabledDate: disabledDate
+  }, dayzedData));
+};
+
+export { DatePickerMulti };