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

package/components/datePicker/state/reducer.esm.js

@@ -0,0 +1,286 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.every.js';
+import moment from 'moment';
+
+moment.updateLocale('id', {
+  week: {
+    dow: 1
+  }
+});
+const UPDATE_PICKER = 'UPDATE';
+const TODAY = 'TODAY';
+const YESTERDAY = 'YESTERDAY';
+const LAST_7_DAYS = 'LAST_7_DAYS';
+const LAST_WEEK = 'LAST_WEEK';
+const PREV_WEEK = 'PREV_WEEK';
+const RANGE_WEEK = 'RANGE_WEEK';
+const NEXT_WEEK = 'NEXT_WEEK';
+const PREV_MONTH = 'PREV_MONTH';
+const RANGE_MONTH = 'RANGE_MONTH';
+const NEXT_MONTH = 'NEXT_MONTH';
+const THIS_WEEK = 'THIS_WEEK';
+const LAST_30_DAYS = 'LAST_30_DAYS';
+const LAST_MONTH = 'LAST_MONTH';
+const LAST_TWO_MONTHS = 'LAST_TWO_MONTH';
+const THIS_MONTH = 'THIS_MONTH';
+const advancePickerOptionsId = [{
+  label: 'Hari Ini',
+  value: TODAY
+}, {
+  label: 'Kemarin',
+  value: YESTERDAY
+}, {
+  label: '7 Hari Terakhir',
+  value: LAST_7_DAYS
+}, {
+  label: 'Minggu Ini',
+  value: THIS_WEEK
+}, {
+  label: 'Minggu Lalu',
+  value: LAST_WEEK
+}, {
+  label: '30 Hari Terakhir',
+  value: LAST_30_DAYS
+}, {
+  label: 'Bulan Ini',
+  value: THIS_MONTH
+}, {
+  label: 'Bulan Lalu',
+  value: LAST_MONTH
+}];
+const advancePickerOptionsEn = [{
+  label: 'Today',
+  value: TODAY
+}, {
+  label: 'Yesterday',
+  value: YESTERDAY
+}, {
+  label: 'Last 7 Days',
+  value: LAST_7_DAYS
+}, {
+  label: 'This Week',
+  value: THIS_WEEK
+}, {
+  label: 'Last Week',
+  value: LAST_WEEK
+}, {
+  label: 'Last 30 Days',
+  value: LAST_30_DAYS
+}, {
+  label: 'This Month',
+  value: THIS_MONTH
+}, {
+  label: 'Last Month',
+  value: LAST_MONTH
+}];
+function pickerReducer(state, action) {
+  const tempDate = new Date();
+  const today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(), 0, 0, 0, 0);
+  switch (action.type) {
+    case UPDATE_PICKER:
+      {
+        const current = state.selectedDate;
+        const next = action.payload;
+        // Bail out if the value hasn't changed — prevents infinite re-render loops
+        // caused by the circular: dispatch → selectedDate → DatePicker effect → onChange → dispatch
+        if (current === next) return state;
+        if (current instanceof Date && next instanceof Date && current.getTime() === next.getTime()) {
+          return state;
+        }
+        if (Array.isArray(current) && Array.isArray(next) && current.length === next.length && current.every((d, i) => d instanceof Date && next[i] instanceof Date && d.getTime() === next[i].getTime())) {
+          return state;
+        }
+        return Object.assign(Object.assign({}, state), {
+          selectedDate: next
+        });
+      }
+    case TODAY:
+      {
+        return Object.assign(Object.assign({}, state), {
+          selectedDate: [today, today]
+        });
+      }
+    case YESTERDAY:
+      {
+        const yesterday = new Date(today);
+        yesterday.setDate(today.getDate() - 1);
+        return Object.assign(Object.assign({}, state), {
+          selectedDate: [yesterday, yesterday]
+        });
+      }
+    case LAST_7_DAYS:
+      {
+        const last7Days = new Date(today);
+        last7Days.setDate(today.getDate() - 6);
+        return Object.assign(Object.assign({}, state), {
+          selectedDate: [last7Days, today]
+        });
+      }
+    case LAST_WEEK:
+      {
+        const startThisWeek = new Date(today);
+        startThisWeek.setDate(today.getDate() - today.getDay() - 7);
+        const endThisWeek = new Date(today);
+        endThisWeek.setDate(today.getDate() - today.getDay() - 1);
+        return Object.assign(Object.assign({}, state), {
+          selectedDate: [startThisWeek, endThisWeek]
+        });
+      }
+    case THIS_WEEK:
+      {
+        const startThisWeek = new Date(today);
+        startThisWeek.setDate(today.getDate() - today.getDay());
+        const endThisWeek = new Date(today);
+        endThisWeek.setDate(today.getDate() - today.getDay() + 6);
+        return Object.assign(Object.assign({}, state), {
+          selectedDate: [startThisWeek, endThisWeek]
+        });
+      }
+    case LAST_30_DAYS:
+      {
+        const last30Days = new Date(today);
+        last30Days.setDate(today.getDate() - 29);
+        return Object.assign(Object.assign({}, state), {
+          selectedDate: [last30Days, today]
+        });
+      }
+    case LAST_MONTH:
+      {
+        const startThisMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
+        const endThisMonth = new Date(today.getFullYear(), today.getMonth(), 0, 0);
+        return Object.assign(Object.assign({}, state), {
+          selectedDate: [startThisMonth, endThisMonth]
+        });
+      }
+    case LAST_TWO_MONTHS:
+      {
+        const last2Months = moment().subtract(2, 'months').startOf('day');
+        const prev2Months = last2Months.add(1, 'day').toDate();
+        return Object.assign(Object.assign({}, state), {
+          selectedDate: [prev2Months, today]
+        });
+      }
+    case THIS_MONTH:
+      {
+        const startThisMonth = new Date(today.getFullYear(), today.getMonth(), 1, 0);
+        const endThisMonth = new Date(startThisMonth.getFullYear(), startThisMonth.getMonth() + 1, 0, 0);
+        return Object.assign(Object.assign({}, state), {
+          selectedDate: [startThisMonth, endThisMonth]
+        });
+      }
+    default:
+      {
+        throw new Error(`Unhandled action type: ${action.type}`);
+      }
+  }
+}
+function advancePickerDate(type, date) {
+  const tempDate = new Date();
+  const today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(), 0, 0, 0, 0);
+  switch (type) {
+    case TODAY:
+      {
+        return [today, today];
+      }
+    case YESTERDAY:
+      {
+        const yesterday = new Date(today);
+        yesterday.setDate(today.getDate() - 1);
+        return [yesterday, yesterday];
+      }
+    case LAST_7_DAYS:
+      {
+        const last7Days = new Date(today);
+        last7Days.setDate(today.getDate() - 6);
+        return [last7Days, today];
+      }
+    case LAST_WEEK:
+      {
+        const startThisWeek = new Date(today);
+        startThisWeek.setDate(today.getDate() - today.getDay() - 7);
+        const endThisWeek = new Date(today);
+        endThisWeek.setDate(today.getDate() - today.getDay() - 1);
+        return [startThisWeek, endThisWeek];
+      }
+    case THIS_WEEK:
+      {
+        const startThisWeek = new Date(today);
+        startThisWeek.setDate(today.getDate() - today.getDay());
+        const endThisWeek = new Date(today);
+        endThisWeek.setDate(today.getDate() - today.getDay() + 6);
+        return [startThisWeek, endThisWeek];
+      }
+    case NEXT_WEEK:
+      {
+        const currentDate = moment(date === null || date === void 0 ? void 0 : date[1]).add(1, 'day');
+        const startThisWeek = currentDate.startOf('isoWeek').toDate();
+        const endThisWeek = currentDate.endOf('isoWeek').toDate();
+        return [startThisWeek, endThisWeek];
+      }
+    case RANGE_WEEK:
+      {
+        const currentDate = moment(date === null || date === void 0 ? void 0 : date[0]);
+        const startThisWeek = currentDate.startOf('isoWeek').toDate();
+        const endThisWeek = currentDate.endOf('isoWeek').toDate();
+        return [startThisWeek, endThisWeek];
+      }
+    case PREV_WEEK:
+      {
+        const currentDate = moment(date === null || date === void 0 ? void 0 : date[0]).subtract(1, 'day');
+        const startThisWeek = currentDate.startOf('isoWeek').toDate();
+        const endThisWeek = currentDate.endOf('isoWeek').toDate();
+        return [startThisWeek, endThisWeek];
+      }
+    case LAST_30_DAYS:
+      {
+        const last30Days = new Date(today);
+        last30Days.setDate(today.getDate() - 29);
+        return [last30Days, today];
+      }
+    case RANGE_MONTH:
+      {
+        const currentDate = moment(date === null || date === void 0 ? void 0 : date[0]);
+        const startThisMonth = currentDate.startOf('month').toDate();
+        const endThisMonth = currentDate.endOf('month').toDate();
+        return [startThisMonth, endThisMonth];
+      }
+    case NEXT_MONTH:
+      {
+        const currentDate = moment(date === null || date === void 0 ? void 0 : date[1]).add(1, 'day');
+        const startThisMonth = currentDate.startOf('month').toDate();
+        const endThisMonth = currentDate.endOf('month').toDate();
+        return [startThisMonth, endThisMonth];
+      }
+    case PREV_MONTH:
+      {
+        const currentDate = moment(date === null || date === void 0 ? void 0 : date[0]).subtract(1, 'day');
+        const startThisMonth = currentDate.startOf('month').toDate();
+        const endThisMonth = currentDate.endOf('month').toDate();
+        return [startThisMonth, endThisMonth];
+      }
+    case LAST_MONTH:
+      {
+        const startThisMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
+        const endThisMonth = new Date(today.getFullYear(), today.getMonth(), 0, 0);
+        return [startThisMonth, endThisMonth];
+      }
+    case LAST_TWO_MONTHS:
+      {
+        const last2Months = moment().subtract(2, 'months').startOf('day');
+        const prev2Months = last2Months.add(1, 'day').toDate();
+        return [prev2Months, today];
+      }
+    case THIS_MONTH:
+      {
+        const startThisMonth = new Date(today.getFullYear(), today.getMonth(), 1, 0);
+        const endThisMonth = new Date(startThisMonth.getFullYear(), startThisMonth.getMonth() + 1, 0, 0);
+        return [startThisMonth, endThisMonth];
+      }
+    default:
+      {
+        throw new Error(`Unhandled action type: ${type}`);
+      }
+  }
+}
+
+export { LAST_30_DAYS, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, NEXT_MONTH, NEXT_WEEK, PREV_MONTH, PREV_WEEK, RANGE_MONTH, RANGE_WEEK, THIS_MONTH, THIS_WEEK, TODAY, UPDATE_PICKER, YESTERDAY, advancePickerDate, advancePickerOptionsEn, advancePickerOptionsId, pickerReducer };

package/components/datePicker/timePicker/InputTimePicker.esm.js

@@ -0,0 +1,205 @@
+import { useState } from 'react';
+import { TimeOutline } from '@majoo-ui/icons';
+import PropTypes from 'prop-types';
+import Box from '../../../layout/box/Box.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 { TimePicker } from './TimePicker.esm.js';
+import moment from 'moment';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Popover, PopoverTrigger, PopoverContent } from '../../popover/Popover.esm.js';
+
+const getInputPickerValue = date => {
+  if (!date) return;
+  return moment(date).format('HH:mm');
+};
+function InputTimePicker({
+  size,
+  onChange,
+  defaultValue,
+  value,
+  placeholder,
+  placement,
+  css,
+  disabled,
+  disabledHour,
+  disabledHourIncrease,
+  disabledHourDecrease,
+  disabledMinute,
+  disabledMinuteIncrease,
+  disabledMinuteDecrease,
+  readOnly,
+  minDate,
+  maxDate,
+  isInvalid,
+  portalled,
+  contentCss,
+  onInputOpenChange
+}) {
+  const [openPicker, setOpenPicker] = useState(false);
+  function handleChange() {
+    if (!disabled && !readOnly) {
+      setOpenPicker(!openPicker);
+    }
+  }
+  const renderInputGroup = () => /*#__PURE__*/jsxs(InputGroup, {
+    size: size,
+    disabled: disabled,
+    onClick: handleChange,
+    readOnly: readOnly,
+    isInvalid: isInvalid,
+    children: [/*#__PURE__*/jsx(InputLeftElement, {
+      color: disabled ? 'disabled' : 'primary',
+      children: /*#__PURE__*/jsx(TimeOutline, {
+        color: "currentColor"
+      })
+    }), /*#__PURE__*/jsx(InputText, {
+      placeholder: placeholder,
+      value: getInputPickerValue(value),
+      defaultValue: defaultValue,
+      onChange: () => {
+        /* noop: read-only picker input, value set via picker */
+      },
+      isPicker: true,
+      autoComplete: "false",
+      readOnly: true
+      // tabIndex="-1"
+    })]
+  });
+  const renderTimePicker = ({
+    css
+  }) => /*#__PURE__*/jsx(TimePicker, {
+    size: size,
+    disabled: disabled,
+    disabledHour: disabledHour,
+    disabledHourIncrease: disabledHourIncrease,
+    disabledHourDecrease: disabledHourDecrease,
+    disabledMinute: disabledMinute,
+    disabledMinuteIncrease: disabledMinuteIncrease,
+    disabledMinuteDecrease: disabledMinuteDecrease,
+    defaultValue: defaultValue,
+    value: value,
+    onChange: onChange,
+    minDate: minDate,
+    maxDate: maxDate,
+    css: css
+  });
+  return /*#__PURE__*/jsxs(Popover, {
+    open: openPicker,
+    onOpenChange: open => {
+      setOpenPicker(open);
+      if (onInputOpenChange) {
+        onInputOpenChange(open);
+      }
+    },
+    placement: placement,
+    children: [disabled || readOnly ? /*#__PURE__*/jsx(Box, {
+      css: css,
+      children: renderInputGroup()
+    }) : /*#__PURE__*/jsx(PopoverTrigger, {
+      children: /*#__PURE__*/jsx(Box, {
+        css: css,
+        children: renderInputGroup()
+      })
+    }), /*#__PURE__*/jsx(PopoverContent, {
+      portalled: portalled,
+      children: renderTimePicker({
+        css: contentCss
+      })
+    })]
+  });
+}
+InputTimePicker.defaultProps = {
+  placement: 'bottom-start',
+  placeholder: 'Select Time'
+};
+InputTimePicker.propTypes = {
+  /**
+   Additional styles.
+  */
+  css: PropTypes.object,
+  /**
+   Disabled state.
+  */
+  disabled: PropTypes.bool,
+  /**
+   Disabled hour state.
+  */
+  disabledHour: PropTypes.bool,
+  /**
+    Disabled increase hour state.
+   */
+  disabledHourIncrease: PropTypes.bool,
+  /**
+        Disabled decrease hour state.
+       */
+  disabledHourDecrease: PropTypes.bool,
+  /**
+    Disabled minute state.
+   */
+  disabledMinute: PropTypes.bool,
+  /**
+    Disabled increase minute state.
+   */
+  disabledMinuteIncrease: PropTypes.bool,
+  /**
+        Disabled decrease minute state.
+       */
+  disabledMinuteDecrease: PropTypes.bool,
+  /**
+   ReadOnly state.
+  */
+  readOnly: PropTypes.bool,
+  /**
+   Resize time picker.
+  */
+  size: PropTypes.oneOf(['sm', 'lg']),
+  /**
+   Custom placeholder input time picker.
+  */
+  placeholder: PropTypes.string,
+  /**
+   Time picker default value, support moment format.
+  */
+  defaultValue: PropTypes.instanceOf(Date),
+  /**
+   Time picker value, support moment format.
+  */
+  value: PropTypes.instanceOf(Date),
+  /**
+   Change handler.
+  */
+  onChange: PropTypes.func,
+  /**
+   Placement popover input time picker.
+  */
+  placement: PropTypes.string,
+  /**
+    Specify the minimum date.
+   */
+  minDate: PropTypes.instanceOf(Date),
+  /**
+       Specify the maximum date.
+  */
+  maxDate: PropTypes.instanceOf(Date),
+  /**
+   * Invalid state input.
+   */
+  isInvalid: PropTypes.bool,
+  /**
+    If true, the component will rendered on portal element
+   */
+  portalled: PropTypes.bool,
+  /**
+   Additional TimePicker styles.
+  */
+  contentCss: PropTypes.object,
+  /**
+   Input open change callback.
+  */
+  onInputOpenChange: PropTypes.func
+};
+InputTimePicker.displayName = 'InputTimePicker';
+
+export { InputTimePicker, InputTimePicker as default };