diginet-core-ui 1.3.24

package/components/form-control/calendar/index.js

@@ -0,0 +1,248 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import theme from '../../../theme/settings';
+import { date as moment, randomString } from '../../../utils';
+import { isAfterLimit, isBeforeLimit, onUpdateCalendar, renderHeader, renderNavigator, isValidDate, generateCalendarCSS } from './function';
+const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  actions,
+  className,
+  defaultValue,
+  displayAnotherMonth,
+  max,
+  min,
+  onClick,
+  value,
+  ...props
+}, reference) => {
+  // const [id] = useState(randomString(6, { allowSymbol: false }));
+  const unique = {
+    container: 'DGN-UI-Calendar',
+    icon: 'DGN-UI-Calendar-Icon',
+    navigator: {
+      navigator: 'DGN-UI-Calendar-Navigator',
+      around: 'DGN-UI-Calendar-Navigator-Around',
+      center: 'DGN-UI-Calendar-Navigator-Center'
+    },
+    table: {
+      container: 'DGN-UI-Calendar-Table-Container',
+      table: 'DGN-UI-Calendar-Table-Table',
+      header: 'DGN-UI-Calendar-Table-Header',
+      raw: 'DGN-UI-Calendar-Table-Raw',
+      data: 'DGN-UI-Calendar-Table-Data'
+    },
+    day: {
+      day: 'DGN-UI-Calendar-Day',
+      week: 'DGN-UI-Calendar-Week',
+      today: 'DGN-UI-Calendar-Day-today',
+      active: 'DGN-UI-Calendar-Day-active',
+      limit: 'DGN-UI-Calendar-Day-limit'
+    }
+  };
+  /**
+   * START REFERENCE
+   */
+
+  const ref = useRef(null);
+  const tableRef = useRef(null);
+  const activeValue = useRef(null);
+  const navigatorValue = useRef(null);
+  useImperativeHandle(reference, () => ref.current);
+  const [, setActiveValue] = useState(Date.now());
+  const [, setNavigatorValue] = useState(Date.now());
+  const navigatorRefs = {
+    doubleLeft: useRef(null),
+    doubleRight: useRef(null),
+    left: useRef(null),
+    right: useRef(null),
+    content: useRef(null)
+  };
+  const firstDayOfMax = new Date(new Date(max).setDate(1)).setHours(0, 0, 0, 0);
+  const firstDayOfMin = new Date(new Date(min).setDate(1)).setHours(0, 0, 0, 0);
+  /**
+   * END REFERENCE
+   */
+
+  /**
+   * START FUNCTION
+   */
+
+  const onUpdateNavigatorValue = useCallback(value => {
+    navigatorValue.current = value;
+    setNavigatorValue();
+  }, [navigatorValue]);
+  const onUpdateActiveValue = useCallback(value => {
+    activeValue.current = value;
+    setActiveValue();
+  }, [activeValue]);
+
+  const onUpdate = value => {
+    const newValue = new Date(value).setHours(0, 0, 0, 0);
+    onUpdateActiveValue(newValue);
+    onUpdateCalendar(newValue, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, onDayClick, onUpdateNavigatorValue);
+  };
+
+  const getCurrentTime = () => {
+    const time = new Date(navigatorValue.current);
+    return [time.getDate(), time.getMonth(), time.getFullYear()];
+  };
+
+  const onDayClick = e => {
+    const node = e.currentTarget;
+    tableRef.current.querySelectorAll(`td.${unique.day.active}`).forEach(element => {
+      element.classList.remove(unique.day.active);
+    });
+    node.classList.add(unique.day.active);
+    const timeStamp = Number(node.dataset.time);
+    const objNewDate = new Date(timeStamp);
+    onUpdateActiveValue(objNewDate);
+    !!onClick && onClick({
+      value: objNewDate
+    });
+  };
+
+  const setPrevYear = e => {
+    const time = new Date(getCurrentTime()[2] - 1, getCurrentTime()[1]);
+
+    if (min && isValidDate(min) && moment(time).diff(firstDayOfMin) < 0) {
+      e.preventDefault();
+    } else {
+      onUpdateCalendar(time, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, onDayClick, onUpdateNavigatorValue);
+    }
+  };
+
+  const setNextYear = e => {
+    const time = new Date(getCurrentTime()[2] + 1, getCurrentTime()[1]);
+
+    if (max && isValidDate(max) && moment(time).diff(firstDayOfMax) > 0) {
+      e.preventDefault();
+    } else {
+      onUpdateCalendar(time, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, onDayClick, onUpdateNavigatorValue);
+    }
+  };
+
+  const setPrevMonth = e => {
+    const time = new Date(getCurrentTime()[2], getCurrentTime()[1] - 1);
+
+    if (min && isValidDate(min) && moment(time).diff(firstDayOfMin) < 0) {
+      e.preventDefault();
+    } else {
+      onUpdateCalendar(time, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, onDayClick, onUpdateNavigatorValue);
+    }
+  };
+
+  const setNextMonth = e => {
+    const time = new Date(getCurrentTime()[2], getCurrentTime()[1] + 1);
+
+    if (max && isValidDate(max) && moment(time).diff(firstDayOfMax) > 0) {
+      e.preventDefault();
+    } else {
+      onUpdateCalendar(time, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, onDayClick, onUpdateNavigatorValue);
+    }
+  };
+  /**
+   * END FUNCTION
+   */
+
+  /**
+   * START EFFECT
+   */
+
+
+  useEffect(() => {
+    if (defaultValue && defaultValue !== '' && isValidDate(defaultValue)) {
+      if (isBeforeLimit(min, defaultValue)) {
+        onUpdate(min);
+      } else if (isAfterLimit(max, defaultValue)) {
+        onUpdate(max);
+      } else {
+        onUpdate(defaultValue);
+      }
+    }
+  }, []);
+  useEffect(() => {
+    if (value && value !== '' && isValidDate(value)) {
+      if (isBeforeLimit(min, value)) {
+        onUpdate(min);
+      } else if (isAfterLimit(max, value)) {
+        onUpdate(max);
+      } else {
+        onUpdate(value);
+      }
+    }
+  }, [value]);
+  useEffect(() => {
+    if (min && isBeforeLimit(min, activeValue.current)) {
+      onUpdate(min);
+      !!onClick && onClick({
+        value: new Date(min)
+      });
+    } else if (max && isAfterLimit(max, activeValue.current)) {
+      onUpdate(max);
+      !!onClick && onClick({
+        value: new Date(max)
+      });
+    } else {
+      onUpdate(activeValue.current);
+    }
+  }, [onClick, min, max]);
+  /**
+   * END FUNCTION
+   */
+
+  /**
+   * START COMPONENT
+   */
+
+  const tableMemo = jsx("div", {
+    className: unique.table.container
+  }, jsx("table", {
+    className: unique.table.table,
+    ref: tableRef
+  }, renderHeader(unique), jsx("tbody", null)));
+  /**
+   * END COMPONENT
+   */
+
+  return jsx("div", _extends({}, props, {
+    className: [unique.container, className].join(' '),
+    css: generateCalendarCSS(unique),
+    ref: ref
+  }), renderNavigator(unique, navigatorRefs, setPrevYear, setPrevMonth, setNextMonth, setNextYear), tableMemo, actions);
+}));
+Calendar.defaultProps = {
+  actions: null,
+  defaultValue: new Date(),
+  displayAnotherMonth: true
+};
+Calendar.propTypes = {
+  /** the footer actions */
+  actions: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
+
+  /** class for calendar */
+  className: PropTypes.string,
+
+  /** the default value of the calendar */
+  defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
+
+  /** display days of previous or next month */
+  displayAnotherMonth: PropTypes.bool,
+
+  /** the last date that can be selected within the UI component. */
+  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
+
+  /** the minimum date that can be selected within the UI component. */
+  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
+
+  /** a callback function when click on a day of calendar */
+  onClick: PropTypes.func,
+
+  /** value of the calendar */
+  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array])
+};
+export default Calendar;

package/components/form-control/calendar/range.js

@@ -0,0 +1,293 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { render } from 'react-dom';
+import { Divider } from '../..';
+import { getGlobal } from '../../../global';
+import Icon from '../../../icons';
+import locale from '../../../locale';
+import theme from '../../../theme/settings';
+import { date as moment, randomString } from '../../../utils';
+import Typography from '../../typography';
+import { generateCalendarCSS, isValidDate, onUpdateCalendar, renderHeader, renderNavigator } from './function';
+import Calendar from './index';
+const CalendarRange = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  actions,
+  defaultValue,
+  displayAnotherMonth,
+  max,
+  min,
+  ...props
+}, reference) => {
+  const ref = useRef(null);
+  const tableFrRef = useRef(null);
+  const tableToRef = useRef(null);
+  const navigatorFromRefs = {
+    doubleLeft: useRef(null),
+    doubleRight: useRef(null),
+    left: useRef(null),
+    right: useRef(null),
+    content: useRef(null)
+  };
+  const navigatorToRefs = {
+    doubleLeft: useRef(null),
+    doubleRight: useRef(null),
+    left: useRef(null),
+    right: useRef(null),
+    content: useRef(null)
+  };
+  const activeValueFr = useRef(new Date());
+  const activeValueTo = useRef(new Date(new Date().getFullYear(), new Date().getMonth() + 1));
+  const navigatorValueFr = useRef(null);
+  const navigatorValueTo = useRef(null);
+  const values = useRef([]);
+  const [, setActiveValueFr] = useState(Date.now());
+  const [, setActiveValueTo] = useState(Date.now());
+  const [, setNavigatorValueFr] = useState(Date.now());
+  const [, setNavigatorValueTo] = useState(Date.now());
+  const [, setValues] = useState(Date.now()); // const [id] = useState(randomString(6, { allowSymbol: false }));
+
+  const unique = {
+    container: 'DGN-UI-Calendar-Range',
+    divider: 'DGN-UI-Calendar-Range-Divider',
+    from: {
+      container: 'DGN-UI-Calendar-Range-From',
+      icon: 'DGN-UI-Calendar-Range-From-Icon',
+      navigator: {
+        navigator: 'DGN-UI-Calendar-Range-From-Navigator',
+        around: 'DGN-UI-Calendar-Range-From-Navigator-Around',
+        center: 'DGN-UI-Calendar-Range-From-Navigator-Center'
+      },
+      table: {
+        container: 'DGN-UI-Calendar-Range-From-Table-Container',
+        table: 'DGN-UI-Calendar-Range-From-Table-Table',
+        header: 'DGN-UI-Calendar-Range-From-Table-Header',
+        raw: 'DGN-UI-Calendar-Range-From-Table-Raw',
+        data: 'DGN-UI-Calendar-Range-From-Table-Data'
+      },
+      day: {
+        day: 'DGN-UI-Calendar-Range-From-Day',
+        week: 'DGN-UI-Calendar-Range-From-Week',
+        today: 'DGN-UI-Calendar-Range-From-Day-today',
+        active: 'DGN-UI-Calendar-Range-From-Day-active',
+        limit: 'DGN-UI-Calendar-Range-From-Day-limit',
+        from: 'DGN-UI-Calendar-Range-From-Day-from',
+        to: 'DGN-UI-Calendar-Range-From-Day-to',
+        between: 'DGN-UI-Calendar-Range-From-Day-between'
+      }
+    },
+    to: {
+      container: 'DGN-UI-Calendar-Range-To',
+      icon: 'DGN-UI-Calendar-Range-To-Icon',
+      navigator: {
+        navigator: 'DGN-UI-Calendar-Range-To-Navigator',
+        around: 'DGN-UI-Calendar-Range-To-Navigator-Around',
+        center: 'DGN-UI-Calendar-Range-To-Navigator-Center'
+      },
+      table: {
+        container: 'DGN-UI-Calendar-Range-To-Table-Container',
+        table: 'DGN-UI-Calendar-Range-To-Table-Table',
+        header: 'DGN-UI-Calendar-Range-To-Table-Header',
+        raw: 'DGN-UI-Calendar-Range-To-Table-Raw',
+        data: 'DGN-UI-Calendar-Range-To-Table-Data'
+      },
+      day: {
+        day: 'DGN-UI-Calendar-Range-To-Day',
+        week: 'DGN-UI-Calendar-Range-To-Week',
+        today: 'DGN-UI-Calendar-Range-To-Day-today',
+        active: 'DGN-UI-Calendar-Range-To-Day-active',
+        limit: 'DGN-UI-Calendar-Range-To-Day-limit'
+      }
+    }
+  };
+  const containerCSS = css`
+        background-color: ${theme.colors.white};
+        border-radius   : ${theme.border.radius};
+        box-shadow      : ${theme.boxShadows.large};
+        display         : flex;
+        @media only screen and (max-width: 599px) {
+            flex-direction: column;
+            .${unique.divider} {
+                height: 1px !important;
+                margin: 0px 16px !important;
+                width: calc(100% - 32px) !important;
+            }
+        }
+    `;
+  const dividerProps = {
+    direction: 'vertical',
+    className: unique.divider,
+    height: '100%',
+    style: {
+      height: '226px',
+      margin: '18px 2px 0px'
+    }
+  };
+  const onUpdateActiveValueFr = useCallback(value => {
+    activeValueFr.current = Date.parse(new Date(value));
+    setActiveValueFr();
+  }, [activeValueFr]);
+  const onUpdateActiveValueTo = useCallback(value => {
+    activeValueTo.current = Date.parse(new Date(value));
+    setActiveValueTo();
+  }, [activeValueTo]);
+  const onUpdateNavigatorValueFr = useCallback(value => {
+    navigatorValueFr.current = Date.parse(new Date(value));
+    setNavigatorValueFr();
+  }, [navigatorValueFr]);
+  const onUpdateNavigatorValueTo = useCallback(value => {
+    navigatorValueTo.current = Date.parse(new Date(value));
+    setNavigatorValueTo();
+  }, [navigatorValueTo]);
+  const onUpdateValues = useCallback((v, unshift) => {
+    if (values.current.length < 2) {
+      if (unshift) {
+        values.current.unshift(Date.parse(new Date(v)));
+      } else {
+        values.current.push(Date.parse(new Date(v)));
+      }
+    } else {
+      values.current.splice(0, 2, Date.parse(new Date(v)));
+    }
+
+    setValues();
+  }, [values]);
+
+  const onCalFrClick = e => {
+    console.log(e.currentTarget.dataset.time);
+  };
+
+  const onCalToClick = e => {
+    console.log(e.currentTarget.dataset.time);
+  };
+
+  const clearHovering = e => {
+    const arr = Array.from(e.getElementsByTagName('td'));
+
+    for (let i in arr) {
+      arr[i].classList.remove('hover-start', 'hover-between', 'hover-end');
+    }
+  };
+
+  const onDayHover = e => {
+    const hoverTime = parseInt(e.target.dataset.time, 10); // console.log(hoverTime);
+  };
+
+  const onPickerHover = e => {
+    if (e.target.tagName && e.target.tagName.toLowerCase() === 'td') {
+      onDayHover(e);
+    } else {
+      clearHovering(e.currentTarget);
+    }
+  };
+
+  const onUpdateFrom = value => {
+    const newValue = new Date(value).setHours(0, 0, 0, 0);
+    onUpdateActiveValueFr(newValue);
+    onUpdateCalendar(newValue, navigatorFromRefs, min, max, tableFrRef.current, [activeValueFr.current, activeValueTo.current], unique.from, displayAnotherMonth, onCalFrClick, onUpdateNavigatorValueFr);
+  };
+
+  const onUpdateTo = value => {
+    const newValue = new Date(value).setHours(0, 0, 0, 0);
+    onUpdateActiveValueTo(newValue);
+    onUpdateCalendar(newValue, navigatorToRefs, min, max, tableToRef.current, [activeValueFr.current, activeValueTo.current], unique.to, displayAnotherMonth, onCalToClick, onUpdateNavigatorValueTo);
+  };
+
+  const onUpdateNavigatorValue = values => {
+    const fr = new Date(values[0]);
+    const to = new Date(values[1]);
+
+    if (fr.getFullYear() === to.getFullYear() && fr.getMonth() === to.getMonth()) {
+      onUpdateNavigatorValueFr(new Date(fr.getFullYear(), fr.getMonth()));
+      onUpdateNavigatorValueTo(new Date(to.getFullYear(), to.getMonth() + 1));
+    } else {
+      onUpdateNavigatorValueFr(new Date(fr.getFullYear(), fr.getMonth()));
+      onUpdateNavigatorValueTo(new Date(to.getFullYear(), to.getMonth()));
+    }
+  };
+
+  const onUpdateActiveValue = values => {
+    if (values[1] && isValidDate(values[1])) {
+      onUpdateValues(values[0], false);
+      onUpdateValues(values[1], false);
+      onUpdateActiveValueFr(values[0]);
+      onUpdateActiveValueTo(values[1]);
+    } else {
+      const newDateFr = new Date(values[0]);
+      values.push(newDateFr);
+      onUpdateValues(values[0], false);
+      onUpdateActiveValueFr(values[0]);
+      onUpdateActiveValueTo(values[1]);
+    }
+  };
+
+  const onUpdate = array => {
+    onUpdateActiveValue(array);
+    onUpdateNavigatorValue(array);
+    onUpdateCalendar(navigatorValueFr.current, navigatorFromRefs, min, max, tableFrRef.current, values.current, unique.from, displayAnotherMonth, onCalFrClick, onUpdateNavigatorValueFr);
+    onUpdateCalendar(navigatorValueTo.current, navigatorToRefs, min, max, tableToRef.current, values.current, unique.to, displayAnotherMonth, onCalToClick, onUpdateNavigatorValueTo);
+  };
+
+  const calendarFrom = jsx("div", {
+    className: unique.from.container,
+    css: generateCalendarCSS(unique.from, false, false)
+  }, renderNavigator(unique.from, navigatorFromRefs), jsx("div", {
+    className: unique.from.table.container
+  }, jsx("table", {
+    className: unique.from.table.table,
+    ref: tableFrRef
+  }, renderHeader(unique.from), jsx("tbody", null))));
+  const calendarTo = jsx("div", {
+    className: unique.to.container,
+    css: generateCalendarCSS(unique.to, false, false)
+  }, renderNavigator(unique.to, navigatorToRefs), jsx("div", {
+    className: unique.to.table.container
+  }, jsx("table", {
+    className: unique.to.table.table,
+    ref: tableToRef
+  }, renderHeader(unique.to), jsx("tbody", null))));
+  useEffect(() => {
+    if (defaultValue && defaultValue.length !== 0 && isValidDate(defaultValue[0])) {
+      onUpdate(defaultValue);
+    }
+  }, []);
+  return jsx("div", _extends({}, props, {
+    className: unique.container,
+    onMouseOver: onPickerHover,
+    css: containerCSS,
+    ref: ref
+  }), calendarFrom, jsx(Divider, dividerProps), calendarTo, actions);
+}));
+CalendarRange.defaultProps = {
+  actions: null,
+  // defaultValue       : [new Date(), ],
+  displayAnotherMonth: true
+};
+CalendarRange.propTypes = {
+  /** the footer actions */
+  actions: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
+
+  /** the default value of the calendar */
+  defaultValue: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
+
+  /** display days of previous or next month */
+  displayAnotherMonth: PropTypes.bool,
+
+  /** the last date that can be selected within the UI component. */
+  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
+
+  /** the minimum date that can be selected within the UI component. */
+  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
+
+  /** a callback function when click on a day of calendar */
+  onClick: PropTypes.func,
+
+  /** value of the calendar */
+  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array])
+};
+export default CalendarRange;