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

package/components/datePicker/InputDatePicker.esm.js

@@ -0,0 +1,290 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect, useReducer } from 'react';
+import { CalendarOutline } from '@majoo-ui/icons';
+import Box from '../../layout/box/Box.esm.js';
+import useMediaQuery from '../../utils/useMediaQuery.esm.js';
+import { Drawer, DrawerContent } from '../drawer/Drawer.esm.js';
+import { InputGroup } from '../form/components/InputGroup/InputGroup.esm.js';
+import { InputLeftElement } from '../form/components/InputElement/InputElement.esm.js';
+import { InputText } from '../form/components/InputText/InputText.esm.js';
+import { AdvancedOption } from './AdvancedOption.esm.js';
+import { SINGLE_PICKER, WEEKLY, DatePicker, DATE_RANGE_PICKER, ADVANCE_PICKER } from './DatePicker.esm.js';
+import { pickerReducer, UPDATE_PICKER, advancePickerDate, advancePickerOptionsId, advancePickerOptionsEn } from './state/reducer.esm.js';
+import moment from 'moment';
+import { ContainerDateRangePicker, InputDateRangePicker } from './InputDateRangePicker.esm.js';
+import { ConditionalWrapper } from '../../wrapper/ConditionalWrapper.esm.js';
+import { useTranslation } from 'react-i18next';
+import { Popover, PopoverTrigger, PopoverContent } from '../popover/Popover.esm.js';
+
+const getInputPickerValue = (type, date, isTimePicker) => {
+  if (!date) return '';
+  if (type === SINGLE_PICKER) {
+    return `${moment(date).format(isTimePicker ? 'DD MMMM YYYY, HH:mm' : 'DD MMMM YYYY')}`;
+  } else {
+    return `${moment(date[0]).format('DD MMM YYYY')} - ${moment(date[1]).format('DD MMM YYYY')}`;
+  }
+};
+function InputDatePicker({
+  type = SINGLE_PICKER,
+  showRangeControl,
+  rangePickerType = WEEKLY,
+  placeholder,
+  size = 'sm',
+  disabled,
+  onChange,
+  onDateSelected,
+  defaultValue: defaultDateValue,
+  value: dateValue,
+  defaultDate,
+  date,
+  advanceView,
+  placement = 'bottom-start',
+  css,
+  showTimePicker,
+  timePickerProps,
+  minDate,
+  maxDate,
+  readOnly,
+  isInvalid,
+  allowReset,
+  portalled,
+  portalledMobile = false,
+  onClose,
+  mobileOnly,
+  desktopOnly,
+  drawerCss,
+  drawerContentCss = {},
+  isMobile = false,
+  maxRange
+}) {
+  const {
+    t,
+    i18n
+  } = useTranslation('MajooUI/datePicker');
+  const [value, setValue] = useState(date || dateValue);
+  const [defaultValue, setDefaultValue] = useState(defaultDate || defaultDateValue);
+  const language = i18n.language;
+  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 isMobileView = useMediaQuery(`(max-width: ${type === SINGLE_PICKER ? '480px' : '1090px'})`);
+  function handleChange() {
+    if (!disabled && !readOnly) {
+      setOpenPicker(!openPicker);
+    }
+  }
+  function handleRangeChange(type) {
+    if (selectedDate && !disabled && !readOnly && !isInvalid) {
+      const actionType = rangePickerType === 'monthly' ? 'MONTH' : 'WEEK';
+      if (type === 'prev') {
+        dispatch({
+          type: 'UPDATE',
+          payload: advancePickerDate('PREV_' + actionType, selectedDate)
+        });
+        onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('PREV_' + actionType, selectedDate));
+      } else {
+        dispatch({
+          type: 'UPDATE',
+          payload: advancePickerDate('NEXT_' + actionType, selectedDate)
+        });
+        onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('NEXT_' + actionType, selectedDate));
+      }
+    }
+  }
+  const renderInputGroup = () => {
+    if (!showRangeControl) {
+      return jsxs(InputGroup, {
+        disabled: disabled,
+        readOnly: readOnly,
+        onClick: handleChange,
+        size: size,
+        isInvalid: isInvalid,
+        mobileOnly: mobileOnly,
+        desktopOnly: desktopOnly,
+        children: [jsx(InputLeftElement, {
+          children: jsx(CalendarOutline, {
+            color: "currentColor"
+          })
+        }), jsx(InputText, {
+          placeholder: placeholder || t('datePickerPlaceholder', 'Pilih Tanggal'),
+          value: getInputPickerValue(type, selectedDate, showTimePicker),
+          // eslint-disable-next-line @typescript-eslint/no-empty-function
+          onChange: () => {},
+          isPicker: true,
+          autoComplete: "false"
+        })]
+      });
+    } else {
+      return jsx(InputDateRangePicker, {
+        value: getInputPickerValue(ADVANCE_PICKER, selectedDate, false),
+        placeholder: placeholder || t('datePickerPlaceholder', 'Pilih Tanggal'),
+        disabled: disabled,
+        readOnly: readOnly,
+        size: size,
+        isInvalid: isInvalid,
+        onClick: handleChange,
+        mobileOnly: mobileOnly,
+        desktopOnly: desktopOnly
+      });
+    }
+  };
+  const renderDatePicker = () => {
+    const handleDatePickerChange = value => {
+      if (showRangeControl || type === 'range_picker') {
+        if (rangePickerType === 'monthly') {
+          dispatch({
+            type: 'UPDATE',
+            payload: advancePickerDate('RANGE_MONTH', value)
+          });
+          onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('RANGE_MONTH', value));
+        } else {
+          dispatch({
+            type: 'UPDATE',
+            payload: advancePickerDate('RANGE_WEEK', value)
+          });
+          onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('RANGE_WEEK', value));
+        }
+      } else {
+        dispatch({
+          type: 'UPDATE',
+          payload: value
+        });
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+      }
+    };
+    return jsx(DatePicker, {
+      advanceView: type === ADVANCE_PICKER && (!advanceView ? jsx(AdvancedOption, {
+        options: language === 'id' ? advancePickerOptionsId : advancePickerOptionsEn,
+        disabled: disabled,
+        optionHandler: value => {
+          const reducedResult = advancePickerDate(value, undefined);
+          const dateAsString = moment(reducedResult[1]).format('YYYY-MM-DD');
+          const payload = [reducedResult[0], moment(`${dateAsString} 23:59`, 'YYYY-MM-DD HH:mm').toDate()];
+          dispatch({
+            type: 'UPDATE',
+            payload
+          });
+          if (onChange) onChange(payload);
+          setOpenPicker(false);
+        }
+      }) : {
+        advanceView
+      }),
+      type: showRangeControl ? DATE_RANGE_PICKER : 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 || showRangeControl,
+      onChange: handleDatePickerChange,
+      onDateSelected: e => onDateSelected === null || onDateSelected === void 0 ? void 0 : onDateSelected(e),
+      onClose: () => {
+        setOpenPicker(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+      },
+      showTimePicker: showTimePicker,
+      timePickerProps: timePickerProps,
+      minDate: minDate,
+      maxDate: maxDate,
+      allowReset: allowReset,
+      maxRange: maxRange
+    });
+  };
+  return !isMobile && !isMobileView ? jsxs(Popover, {
+    flip: false,
+    open: openPicker,
+    onOpenChange: setOpenPicker,
+    onClose: onClose,
+    placement: placement,
+    children: [disabled || readOnly ? jsx(Box, {
+      css: css,
+      children: jsx(ConditionalWrapper, {
+        condition: showRangeControl,
+        wrapper: children => jsx(ContainerDateRangePicker, {
+          disabled: disabled,
+          readOnly: readOnly,
+          isInvalid: isInvalid,
+          onRangeChange: handleRangeChange,
+          mobileOnly: mobileOnly,
+          desktopOnly: desktopOnly,
+          children: children
+        }),
+        children: renderInputGroup()
+      })
+    }) : jsx(ConditionalWrapper, {
+      condition: showRangeControl,
+      wrapper: children => jsx(Box, {
+        css: css,
+        children: jsx(ContainerDateRangePicker, {
+          disabled: disabled,
+          readOnly: readOnly,
+          isInvalid: isInvalid,
+          onRangeChange: handleRangeChange,
+          mobileOnly: mobileOnly,
+          desktopOnly: desktopOnly,
+          children: children
+        })
+      }),
+      children: jsx(PopoverTrigger, {
+        children: showRangeControl ? renderInputGroup() : jsx(Box, {
+          css: css,
+          children: renderInputGroup()
+        })
+      })
+    }), jsx(PopoverContent, {
+      portalled: portalled,
+      children: renderDatePicker()
+    })]
+  }) : jsxs(Fragment, {
+    children: [jsx(Box, {
+      css: css,
+      children: jsx(ConditionalWrapper, {
+        condition: showRangeControl,
+        wrapper: children => jsx(ContainerDateRangePicker, {
+          disabled: disabled,
+          readOnly: readOnly,
+          isInvalid: isInvalid,
+          onRangeChange: handleRangeChange,
+          mobileOnly: mobileOnly,
+          desktopOnly: desktopOnly,
+          children: children
+        }),
+        children: renderInputGroup()
+      })
+    }), jsx(Drawer, {
+      open: openPicker,
+      onOpenChange: isOpen => {
+        handleChange();
+        !isOpen && (onClose === null || onClose === void 0 ? void 0 : onClose());
+      },
+      side: "bottom",
+      portalled: portalledMobile,
+      css: drawerCss,
+      children: jsx(DrawerContent, {
+        size: "full",
+        css: Object.assign(Object.assign({}, drawerContentCss), {
+          height: 'unset !important'
+        }),
+        children: renderDatePicker()
+      })
+    })]
+  });
+}
+
+export { InputDatePicker };

package/components/datePicker/InputDateRangePicker.esm.js

@@ -0,0 +1,174 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import Flex from '../../layout/flex/Flex.esm.js';
+import { styled, colors } from '../../config/stitches.config.esm.js';
+import { CalendarOutline, ChevronRightOutline, ChevronLeftOutline } from '@majoo-ui/icons';
+import { InputGroup } from '../form/components/InputGroup/InputGroup.esm.js';
+import { InputLeftElement } from '../form/components/InputElement/InputElement.esm.js';
+import { InputText } from '../form/components/InputText/InputText.esm.js';
+
+const Container = styled(Flex, {
+  flexDirection: 'row',
+  alignItems: 'center',
+  userSelect: 'none',
+  border: '1px solid $bgOutline',
+  borderRadius: 6,
+  '&:hover': {
+    border: '1px solid $primary400'
+  },
+  variants: {
+    readOnly: {
+      true: {
+        backgroundColor: '$formDisable'
+      }
+    },
+    disabled: {
+      true: {
+        backgroundColor: '$formDisable',
+        color: '$textDisable',
+        cursor: 'not-allowed',
+        '&::placeholder': {
+          color: '$textDisable'
+        },
+        '&:hover': {
+          border: '1px solid $colors$gray300'
+        },
+        '& > input': {
+          color: '$textSecondary',
+          cursor: 'not-allowed'
+        }
+      }
+    },
+    isInvalid: {
+      true: {
+        border: '1px solid $colors$red400',
+        '&:focus': {
+          border: '1px solid $colors$red400'
+        },
+        '&:hover': {
+          border: '1px solid $colors$red400'
+        }
+      }
+    },
+    mobileOnly: {
+      true: {
+        '@lg': {
+          display: 'none !important'
+        }
+      }
+    },
+    desktopOnly: {
+      true: {
+        display: 'none !important',
+        '@lg': {
+          display: 'flex !important'
+        }
+      }
+    }
+  }
+});
+const Button = styled(Flex, {
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+  userSelect: 'none',
+  margin: 4,
+  padding: '0px 4px'
+});
+const IconStateFull = props => {
+  const [isHover, setIsHover] = useState(false);
+  function handleHover() {
+    setIsHover(true);
+  }
+  function handleUnHover() {
+    setIsHover(false);
+  }
+  return props.type === 'next' ? jsx(ChevronRightOutline, Object.assign({}, props, {
+    color: isHover && !props.disabled ? colors.primary400 : colors.iconPrimary,
+    onMouseEnter: handleHover,
+    onMouseLeave: handleUnHover
+  })) : jsx(ChevronLeftOutline, Object.assign({}, props, {
+    color: isHover && !props.disabled ? colors.primary400 : colors.iconPrimary,
+    onMouseEnter: handleHover,
+    onMouseLeave: handleUnHover
+  }));
+};
+function ContainerDateRangePicker(props) {
+  const {
+    css,
+    children,
+    disabled,
+    readOnly,
+    onRangeChange,
+    isInvalid,
+    mobileOnly,
+    desktopOnly
+  } = props;
+  return jsxs(Container, {
+    css: css,
+    disabled: disabled,
+    readOnly: readOnly,
+    isInvalid: isInvalid,
+    mobileOnly: mobileOnly,
+    desktopOnly: desktopOnly,
+    children: [jsx(Button, {
+      css: {
+        borderRight: '1px solid $bgBorder'
+      },
+      onClick: () => onRangeChange('prev'),
+      children: jsx(IconStateFull, {
+        type: "prev",
+        disabled: disabled || readOnly || isInvalid
+      })
+    }), children, jsx(Button, {
+      css: {
+        borderLeft: '1px solid $bgBorder'
+      },
+      onClick: () => onRangeChange('next'),
+      children: jsx(IconStateFull, {
+        type: "next",
+        disabled: disabled || readOnly || isInvalid
+      })
+    })]
+  });
+}
+function InputDateRangePicker(props) {
+  const {
+    value,
+    disabled,
+    readOnly,
+    onClick,
+    size,
+    isInvalid,
+    placeholder,
+    mobileOnly,
+    desktopOnly
+  } = props;
+  return jsxs(InputGroup, {
+    css: {
+      border: 'none',
+      '&:hover': {
+        border: 'none'
+      }
+    },
+    disabled: disabled,
+    readOnly: readOnly,
+    isInvalid: isInvalid,
+    onClick: onClick,
+    size: size,
+    mobileOnly: mobileOnly,
+    desktopOnly: desktopOnly,
+    children: [jsx(InputLeftElement, {
+      children: jsx(CalendarOutline, {})
+    }), jsx(InputText, {
+      placeholder: placeholder,
+      value: value,
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onChange: () => {},
+      isPicker: true,
+      autoComplete: "false"
+    })]
+  });
+}
+
+export { ContainerDateRangePicker, InputDateRangePicker };