diginet-core-ui 1.3.88 → 1.3.89

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

@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/core';
 import { render } from 'react-dom';
 import { Button, ButtonIcon, Typography } from "../..";
@@ -8,7 +8,7 @@ import { getGlobal } from "../../../global";
 import locale from "../../../locale";
 import theme from "../../../theme/settings";
 import { date as moment } from "../../../utils";
-import { color as colors } from "../../../styles/colors";
+import { useColor as colors } from "../../../theme";
 import { typography } from "../../../styles/typography";
 import { itemsCenter, border, boxBorder, borderRadius4px, cursorPointer, flexCol, flexRow, displayInlineFlex, justifyBetween, pointerEventsNone, positionAbsolute, positionRelative, textCenter, userSelectNone } from "../../../styles/general";
 const {
@@ -31,17 +31,17 @@ const {
   danger8,
   info8
 } = colors;
-/**
- * START STYLE
- */
 
-/**
- *
- * @param {Object} unique
- * @param {Boolean} boxShadow
- * @returns
+/**
+ * START STYLE
  */
 
+/**
+ *
+ * @param {Object} unique
+ * @param {Boolean} boxShadow
+ * @returns
+ */
 const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) => css`
     ${borderRadius4px}
     ${boxBorder}
@@ -243,18 +243,16 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
         }
     }
 `;
-/**
- * END STYLE
+/**
+ * END STYLE
  */
 
-/**
- *
- * @description return props of the typography.
- * @param {String} className
- * @returns {Object} props of the typography
+/**
+ *
+ * @description return props of the typography.
+ * @param {String} className
+ * @returns {Object} props of the typography
  */
-
-
 const typographyProps = className => {
   return {
     className,
@@ -272,14 +270,12 @@ const typographyProps = className => {
     type: 'h6'
   };
 };
-/**
- *
- * @description return props of the button icon.
- * @param {String} className
- * @returns {Object} props of the button icon
+/**
+ *
+ * @description return props of the button icon.
+ * @param {String} className
+ * @returns {Object} props of the button icon
  */
-
-
 const buttonIconProps = className => {
   return {
     className,
@@ -290,14 +286,12 @@ const buttonIconProps = className => {
     width: 28
   };
 };
-/**
- *
- * @description return props of the button icon.
- * @param {Function} fn
- * @returns {Object} props of the button text
+/**
+ *
+ * @description return props of the button icon.
+ * @param {Function} fn
+ * @returns {Object} props of the button text
  */
-
-
 const buttonTextProps = fn => {
   return {
     onClick: fn,
@@ -311,155 +305,132 @@ const buttonTextProps = fn => {
     }
   };
 };
-/**
- * @description detect value is a Date object
- * @param {String | Number | Array} value
- * @returns boolean
- */
-
 
+/**
+ * @description detect value is a Date object
+ * @param {String | Number | Array} value
+ * @returns boolean
+ */
 const isValidDate = value => {
   return new Date(value) instanceof Date && !isNaN(new Date(value));
 };
-/**
- *
- * @description set Sunday (0) to the last day of week.
- * @param {Date} date
- * @returns number of day from 0 (Monday) to 6 (Sunday).
+/**
+ *
+ * @description set Sunday (0) to the last day of week.
+ * @param {Date} date
+ * @returns number of day from 0 (Monday) to 6 (Sunday).
  */
-
-
 const getDateOfWeek = date => {
   let day = date.getDay();
   if (day === 0) day = 7;
   return day - 1;
 };
-/**
- *
- * @description check day is today.
- * @param {Date} day
- * @param {Date} today
- * @param {String} className
- * @returns {Boolean} is today
+/**
+ *
+ * @description check day is today.
+ * @param {Date} day
+ * @param {Date} today
+ * @param {String} className
+ * @returns {Boolean} is today
  */
-
-
 const isToday = (day, today, className) => {
   return +moment(day).diff(today) === 0 ? className : '';
 };
-/**
- *
- * @description check day is active day.
- * @param {Date} day
- * @param {Date} active
- * @param {String} className
- * @returns {Boolean} is active day
+/**
+ *
+ * @description check day is active day.
+ * @param {Date} day
+ * @param {Date} active
+ * @param {String} className
+ * @returns {Boolean} is active day
  */
-
-
 const isActive = (day, active, className) => {
   if (Array.isArray(active)) {
     if (+moment(day).diff(active[0]) === 0 || +moment(day).diff(active[1]) === 0) {
       return className;
     }
   }
-
   if (+moment(day).diff(active) === 0) {
     return className;
   }
-
   return '';
 };
-/**
- *
- * @description check day is min/max day.
- * @param {Date} day
- * @param {Date} max
- * @param {Date} min
- * @param {Object} className
- * @returns {Boolean} is limited day
+/**
+ *
+ * @description check day is min/max day.
+ * @param {Date} day
+ * @param {Date} max
+ * @param {Date} min
+ * @param {Object} className
+ * @returns {Boolean} is limited day
  */
-
-
 const isLimit = (day, max, min, className) => {
   return isBeforeLimit(min, day) || isAfterLimit(max, day) ? className : '';
 };
-
 const isBetween = (day, from, to, className) => {
   if (from && isValidDate(from) && +moment(day).diff(from) === 0) {
     return className.from;
   }
-
   if (to && isValidDate(to) && +moment(day).diff(to) === 0) {
     return className.to;
   }
-
   if (from && to && isValidDate(from) && isValidDate(to) && +moment(day).diff(from) > 0 && +moment(day).diff(to) < 0) {
     return className.between;
   }
-
   return '';
 };
-
 const isBeforeLimit = (min, time) => {
   return min && isValidDate(min) && moment(time).diff(new Date(min).setHours(0, 0, 0, 0)) < 0;
 };
-
 const isAfterLimit = (max, time) => {
   return max && isValidDate(max) && moment(time).diff(new Date(max).setHours(0, 0, 0, 0)) > 0;
 };
-/**
- *
- * @description return the table body of the calendar.
- * @param {Date} time
- * @param {Date} activeValue
- * @param {Object} className
- * @param {Boolean} displayAnotherMonth
- * @param {Function} onTableDataClick
- * @param {Date} min
- * @param {Date} max
- * @returns {Element}
+/**
+ *
+ * @description return the table body of the calendar.
+ * @param {Date} time
+ * @param {Date} activeValue
+ * @param {Object} className
+ * @param {Boolean} displayAnotherMonth
+ * @param {Function} onTableDataClick
+ * @param {Date} min
+ * @param {Date} max
+ * @returns {Element}
  */
-
-
 const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTableDataClick, min, max) => {
   time = new Date(time);
   const firstDay = new Date(new Date(time).setDate(1)),
-        lastDay = new Date(firstDay.getFullYear(), firstDay.getMonth() + 1, 0),
-        prevDay = new Date(firstDay.getFullYear(), firstDay.getMonth(), 0),
-        today = new Date().setHours(0, 0, 0, 0),
-        lastDate = lastDay.getDate(),
-        prevDate = prevDay.getDate();
+    lastDay = new Date(firstDay.getFullYear(), firstDay.getMonth() + 1, 0),
+    prevDay = new Date(firstDay.getFullYear(), firstDay.getMonth(), 0),
+    today = new Date().setHours(0, 0, 0, 0),
+    lastDate = lastDay.getDate(),
+    prevDate = prevDay.getDate();
   let active = Array.isArray(activeValue) ? new Date(activeValue[0]) : new Date(activeValue);
   let tableBody = [],
-      tableRaw = [],
-      tableData = [],
-      weekDateFirst = getDateOfWeek(firstDay),
-      weekDateLast = getDateOfWeek(lastDay);
-
+    tableRaw = [],
+    tableData = [],
+    weekDateFirst = getDateOfWeek(firstDay),
+    weekDateLast = getDateOfWeek(lastDay);
   if (activeValue && Array.isArray(activeValue) && activeValue.length === 2 && activeValue[0] !== activeValue[1]) {
-    /**
-     * days of previous month
+    /**
+     * days of previous month
      */
     active = activeValue;
-
     for (let i = weekDateFirst; i > 0; i--) {
-      const day = new Date(time.getFullYear(), time.getMonth() - 1, // displayAnotherMonth ? prevDate - i + 1 : 1
+      const day = new Date(time.getFullYear(), time.getMonth() - 1,
+      // displayAnotherMonth ? prevDate - i + 1 : 1
       1);
       tableData.push(jsx("td", {
         key: `previous_month-${prevDate - i + 1}`,
-        "data-time": Date.parse(day) - 1
-        /*(displayAnotherMonth ? 0 : 1)*/
-        ,
+        "data-time": Date.parse(day) - 1 /*(displayAnotherMonth ? 0 : 1)*/,
         className: `${[className.table.data, 'previous_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isBetween(day, active[0], active[1], className.day)].join(' ')}`
-      }, jsx(Typography, { ...typographyProps(className.day.day)
+      }, jsx(Typography, {
+        ...typographyProps(className.day.day)
       }, '')));
     }
-    /**
-     * days of this month
+    /**
+     * days of this month
      */
-
-
     for (let i = 0; i < lastDate; i++) {
       const day = new Date(time.getFullYear(), time.getMonth(), i + 1);
       tableData.push(jsx("td", {
@@ -467,29 +438,28 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
         "data-time": Date.parse(day),
         className: `${[className.table.data, 'this_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isLimit(day, max, min, className.day.limit), isBetween(day, active[0], active[1], className.day)].join(' ')}`,
         onClick: onTableDataClick
-      }, jsx(Typography, { ...typographyProps(className.day.day)
+      }, jsx(Typography, {
+        ...typographyProps(className.day.day)
       }, i + 1)));
     }
-    /**
-     * days of next month
+    /**
+     * days of next month
      */
-
-
     for (let i = 0; i < 20 - weekDateLast; i++) {
-      const day = new Date(time.getFullYear(), time.getMonth() + 1, // displayAnotherMonth ? i + 1 : 6 - weekDateLast
+      const day = new Date(time.getFullYear(), time.getMonth() + 1,
+      // displayAnotherMonth ? i + 1 : 6 - weekDateLast
       6 - weekDateLast);
       tableData.push(jsx("td", {
         key: `next_month-${i + 1}`,
-        "data-time": Date.parse(day) + 1
-        /*(displayAnotherMonth ? 0 : 1)*/
-        ,
+        "data-time": Date.parse(day) + 1 /*(displayAnotherMonth ? 0 : 1)*/,
         className: `${[className.table.data, 'next_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isBetween(day, active[0], active[1], className.day)].join(' ')}`
-      }, jsx(Typography, { ...typographyProps(className.day.day)
+      }, jsx(Typography, {
+        ...typographyProps(className.day.day)
       }, '')));
     }
   } else {
-    /**
-     * days of previous month
+    /**
+     * days of previous month
      */
     for (let i = weekDateFirst; i > 0; i--) {
       const day = new Date(time.getFullYear(), time.getMonth() - 1, displayAnotherMonth ? prevDate - i + 1 : 1);
@@ -498,14 +468,13 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
         "data-time": Date.parse(day) - (displayAnotherMonth ? 0 : 1),
         className: `${[className.table.data, 'previous_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isLimit(day, max, min, className.day.limit)].join(' ')}`,
         onClick: onTableDataClick
-      }, jsx(Typography, { ...typographyProps(className.day.day)
+      }, jsx(Typography, {
+        ...typographyProps(className.day.day)
       }, displayAnotherMonth ? prevDate - i + 1 : '')));
     }
-    /**
-     * days of this month
+    /**
+     * days of this month
      */
-
-
     for (let i = 0; i < lastDate; i++) {
       const day = new Date(time.getFullYear(), time.getMonth(), i + 1);
       tableData.push(jsx("td", {
@@ -513,14 +482,13 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
         "data-time": Date.parse(day),
         className: `${[className.table.data, 'this_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isLimit(day, max, min, className.day.limit)].join(' ')}`,
         onClick: onTableDataClick
-      }, jsx(Typography, { ...typographyProps(className.day.day)
+      }, jsx(Typography, {
+        ...typographyProps(className.day.day)
       }, i + 1)));
     }
-    /**
-     * days of next month
+    /**
+     * days of next month
      */
-
-
     for (let i = 0; i < 20 - weekDateLast; i++) {
       const day = new Date(time.getFullYear(), time.getMonth() + 1, displayAnotherMonth ? i + 1 : 6 - weekDateLast);
       tableData.push(jsx("td", {
@@ -528,36 +496,31 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
         "data-time": Date.parse(day) + (displayAnotherMonth ? 0 : 1),
         className: `${[className.table.data, 'next_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isLimit(day, max, min, className.day.limit)].join(' ')}`,
         onClick: onTableDataClick
-      }, jsx(Typography, { ...typographyProps(className.day.day)
+      }, jsx(Typography, {
+        ...typographyProps(className.day.day)
       }, displayAnotherMonth ? i + 1 : '')));
     }
   }
-
   for (let i = 0; i < 6; i++) {
     for (let j = 0; j < 7; j++) {
       tableRaw.push(tableData[7 * i + j]);
     }
-
     tableBody.push(jsx("tr", {
       key: i,
       className: className.day.week
     }, tableRaw));
     tableRaw = [];
   }
-
   return tableBody;
 };
-/**
- *
- * @param {Object} className
- * @returns
+/**
+ *
+ * @param {Object} className
+ * @returns
  */
-
-
 const renderHeader = className => {
   const weekdays = getGlobal(['weekdaysLong']);
   const tableHeader = [];
-
   for (let i in weekdays) {
     tableHeader.push(jsx("th", {
       key: i,
@@ -567,147 +530,130 @@ const renderHeader = className => {
       type: 'h6'
     }, weekdays[i])));
   }
-
   const header = jsx("thead", null, jsx("tr", {
     className: className.table.raw
   }, tableHeader));
   return header;
 };
-/**
- *
- * @param {Object} className
- * @param {Object} refs
- * @param {Function} dbLeftFn
- * @param {Function} leftFn
- * @param {Function} rightFn
- * @param {Function} dbRightFn
- * @returns navigator
+/**
+ *
+ * @param {Object} className
+ * @param {Object} refs
+ * @param {Function} dbLeftFn
+ * @param {Function} leftFn
+ * @param {Function} rightFn
+ * @param {Function} dbRightFn
+ * @returns navigator
  */
-
-
 const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn, fn) => jsx("div", {
   className: className.navigator.navigator
 }, jsx("div", {
   className: className.navigator.around
-}, jsx(ButtonIcon, { ...buttonIconProps(className.icon),
+}, jsx(ButtonIcon, {
+  ...buttonIconProps(className.icon),
   name: 'ArrowDoubleLeft',
   onClick: dbLeftFn,
   ref: refs.doubleLeft
-}), jsx(ButtonIcon, { ...buttonIconProps(className.icon),
+}), jsx(ButtonIcon, {
+  ...buttonIconProps(className.icon),
   name: 'ArrowLeft',
   onClick: leftFn,
   ref: refs.left
 })), jsx("div", {
   className: className.navigator.center
-}, jsx(Button, { ...buttonTextProps(fn)
+}, jsx(Button, {
+  ...buttonTextProps(fn)
 }, jsx(Typography, {
   color: 'primary',
   type: 'h3',
   ref: refs.content
 }))), jsx("div", {
   className: className.navigator.around
-}, jsx(ButtonIcon, { ...buttonIconProps(className.icon),
+}, jsx(ButtonIcon, {
+  ...buttonIconProps(className.icon),
   name: 'ArrowRight',
   onClick: rightFn,
   ref: refs.right
-}), jsx(ButtonIcon, { ...buttonIconProps(className.icon),
+}), jsx(ButtonIcon, {
+  ...buttonIconProps(className.icon),
   name: 'ArrowDoubleRight',
   onClick: dbRightFn,
   ref: refs.doubleRight
 })));
-/**
- *
- * @param {Date} time
- * @returns {String} month year
+/**
+ *
+ * @param {Date} time
+ * @returns {String} month year
  */
-
-
 const renderNavigatorContent = time => {
   const value = new Date(time);
   const months = getGlobal(['months', 'full']);
   return [months[value.getMonth()], value.getFullYear()];
 };
-/**
- *
- * @param {Date} time
- * @param {Object} refs
- * @param {Date} min
- * @param {Date} max
+/**
+ *
+ * @param {Date} time
+ * @param {Object} refs
+ * @param {Date} min
+ * @param {Date} max
  */
-
-
 const onUpdateNavigator = (time, refs, min, max) => {
   var _refs$doubleLeft$curr, _refs$doubleLeft$curr2, _refs$doubleRight$cur, _refs$doubleRight$cur2, _refs$left$current, _refs$left$current$in, _refs$right$current, _refs$right$current$i;
-
   const el = refs.content.current;
   const vl = renderNavigatorContent(time);
   const year = locale.get() === 'vi' ? ` ${getGlobal(['year'])} ` : '';
-
   if (el) {
     el.innerHTML = `${vl[0]} ${year}${vl[1]}`;
   }
-
   const firstDayOfMin = new Date(new Date(new Date(min).setDate(1)).setHours(0, 0, 0, 0));
   const firstDayOfMax = new Date(new Date(new Date(max).setDate(1)).setHours(0, 0, 0, 0));
   (_refs$doubleLeft$curr = refs.doubleLeft.current) === null || _refs$doubleLeft$curr === void 0 ? void 0 : (_refs$doubleLeft$curr2 = _refs$doubleLeft$curr.instance) === null || _refs$doubleLeft$curr2 === void 0 ? void 0 : _refs$doubleLeft$curr2.option('disabled', false);
   (_refs$doubleRight$cur = refs.doubleRight.current) === null || _refs$doubleRight$cur === void 0 ? void 0 : (_refs$doubleRight$cur2 = _refs$doubleRight$cur.instance) === null || _refs$doubleRight$cur2 === void 0 ? void 0 : _refs$doubleRight$cur2.option('disabled', false);
   (_refs$left$current = refs.left.current) === null || _refs$left$current === void 0 ? void 0 : (_refs$left$current$in = _refs$left$current.instance) === null || _refs$left$current$in === void 0 ? void 0 : _refs$left$current$in.option('disabled', false);
   (_refs$right$current = refs.right.current) === null || _refs$right$current === void 0 ? void 0 : (_refs$right$current$i = _refs$right$current.instance) === null || _refs$right$current$i === void 0 ? void 0 : _refs$right$current$i.option('disabled', false);
-
   if (min && isValidDate(min)) {
     if (moment(time).diff(firstDayOfMin) < 365) {
       var _refs$doubleLeft$curr3, _refs$doubleLeft$curr4;
-
       (_refs$doubleLeft$curr3 = refs.doubleLeft.current) === null || _refs$doubleLeft$curr3 === void 0 ? void 0 : (_refs$doubleLeft$curr4 = _refs$doubleLeft$curr3.instance) === null || _refs$doubleLeft$curr4 === void 0 ? void 0 : _refs$doubleLeft$curr4.option('disabled', true);
     }
-
     if (moment(time).diff(firstDayOfMin) <= 28) {
       var _refs$doubleLeft$curr5, _refs$doubleLeft$curr6, _refs$left$current2, _refs$left$current2$i;
-
       (_refs$doubleLeft$curr5 = refs.doubleLeft.current) === null || _refs$doubleLeft$curr5 === void 0 ? void 0 : (_refs$doubleLeft$curr6 = _refs$doubleLeft$curr5.instance) === null || _refs$doubleLeft$curr6 === void 0 ? void 0 : _refs$doubleLeft$curr6.option('disabled', true);
       (_refs$left$current2 = refs.left.current) === null || _refs$left$current2 === void 0 ? void 0 : (_refs$left$current2$i = _refs$left$current2.instance) === null || _refs$left$current2$i === void 0 ? void 0 : _refs$left$current2$i.option('disabled', true);
     }
   }
-
   if (max && isValidDate(max)) {
     if (moment(time).diff(firstDayOfMax) > -334) {
       var _refs$doubleRight$cur3, _refs$doubleRight$cur4;
-
       (_refs$doubleRight$cur3 = refs.doubleRight.current) === null || _refs$doubleRight$cur3 === void 0 ? void 0 : (_refs$doubleRight$cur4 = _refs$doubleRight$cur3.instance) === null || _refs$doubleRight$cur4 === void 0 ? void 0 : _refs$doubleRight$cur4.option('disabled', true);
     }
-
     if (moment(time).diff(firstDayOfMax) > -1) {
       var _refs$doubleRight$cur5, _refs$doubleRight$cur6, _refs$right$current2, _refs$right$current2$;
-
       (_refs$doubleRight$cur5 = refs.doubleRight.current) === null || _refs$doubleRight$cur5 === void 0 ? void 0 : (_refs$doubleRight$cur6 = _refs$doubleRight$cur5.instance) === null || _refs$doubleRight$cur6 === void 0 ? void 0 : _refs$doubleRight$cur6.option('disabled', true);
       (_refs$right$current2 = refs.right.current) === null || _refs$right$current2 === void 0 ? void 0 : (_refs$right$current2$ = _refs$right$current2.instance) === null || _refs$right$current2$ === void 0 ? void 0 : _refs$right$current2$.option('disabled', true);
     }
   }
 };
-/**
- *
- * @param {Date} time
- * @param {Object} navigatorRefs
- * @param {Date} min
- * @param {Date} max
- * @param {Element} table
- * @param {Date} activeValue
- * @param {Object} className
- * @param {Boolean} displayAnotherMonth
- * @param {Function} onTableDataClick
- * @param {Function} onUpdateNavigatorValue
+/**
+ *
+ * @param {Date} time
+ * @param {Object} navigatorRefs
+ * @param {Date} min
+ * @param {Date} max
+ * @param {Element} table
+ * @param {Date} activeValue
+ * @param {Object} className
+ * @param {Boolean} displayAnotherMonth
+ * @param {Function} onTableDataClick
+ * @param {Function} onUpdateNavigatorValue
  */
-
-
 const onUpdateCalendar = (time, navigatorRefs, min, max, table, activeValue, className, displayAnotherMonth, onTableDataClick, onUpdateNavigatorValue) => {
   onUpdateNavigator(time, navigatorRefs, min, max);
   onUpdateNavigatorValue(time);
-
   if (table) {
     const child = renderTableBody(time, activeValue, className, displayAnotherMonth, onTableDataClick, min, max);
     table.querySelector('tbody').remove();
     render(child, table.appendChild(document.createElement('tbody')));
   }
 };
-
 export { renderTableBody, renderHeader, renderNavigator, onUpdateNavigator, renderNavigatorContent, onUpdateCalendar, isBeforeLimit, isAfterLimit, isValidDate, generateCalendarCSS };