diginet-core-ui 1.3.24

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

@@ -0,0 +1,673 @@
+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 { render } from 'react-dom';
+import { Button, ButtonIcon, Typography } from '../..';
+import { getGlobal } from '../../../global';
+import locale from '../../../locale';
+import theme from '../../../theme/settings';
+import { date as moment } from '../../../utils';
+/**
+ * START STYLE
+ */
+
+/**
+ * 
+ * @param {Object} unique 
+ * @param {Boolean} boxShadow 
+ * @returns 
+ */
+
+const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) => css`
+	background-color: ${theme.colors.calendar.table.bgDefault};
+	border-radius   : ${theme.border.radius};
+	box-shadow      : ${boxShadow ? theme.boxShadows.large : 'none'};
+	box-sizing      : border-box;
+	display         : flex;
+	flex-direction  : column;
+	max-width       : 400px;
+	min-width       : 260px;
+	width           : 100%;
+	.${unique.navigator.navigator} {
+		display        : flex;
+		flex-direction : row;
+		height         : 28px;
+		justify-content: space-between;
+		margin		   : 0px 14px;
+		margin-top     : 14px;
+		max-width      : 400px;
+		width          : calc(100% - 28px);
+		.${unique.navigator.around} {
+			display       : flex;
+			flex-direction: row;
+			height        : 28px;
+			user-select   : none;
+			width         : 64px;
+		}
+		.${unique.navigator.center} {
+			align-items: center;
+			display    : inline-flex;
+			height     : 28px;
+			margin     : 0 4px;
+			min-width  : 150px;
+			text-align : center;
+			user-select: none;
+			width	   : 100%;
+			button {
+				height: 28px;
+			}
+			.DGN-UI-Typography {
+				min-width  : 150px;
+			}
+		}
+	}
+	.${unique.icon} {
+		height: 28px;
+		margin: 0 2px;
+		width : 28px;
+		svg, path, g {
+			pointer-events: none;
+		}
+	}
+	.${unique.table.container} {
+		display: flex;
+		margin : 10px 0;
+		margin-top: 6px;
+		width  : 100%;
+	}
+	.${unique.table.table} {
+		border-collapse: separate;
+		margin         : 0 16px;
+		padding        : 0;
+		table-layout   : fixed;
+		width          : calc(100% - 32px);
+		.${unique.table.data} {
+			color      : ${theme.colors.input};
+			cursor     : pointer;
+			height     : 24px;
+			min-width  : 24px;
+			padding    : 1px;
+			position   : relative;
+			text-align : center;
+			user-select: none;
+			&:nth-of-type(7n - 1) {
+				color: ${theme.colors.calendar.day.saturday} !important;
+			}
+			&:nth-of-type(7n) {
+				color: ${theme.colors.calendar.day.sunday} !important;
+			}
+			&.next_month, &.previous_month, &.${unique.day.limit} {
+				cursor        : default;
+				opacity       : 0.25;
+				pointer-events: none;
+			}
+			&:hover {
+				span.${unique.day.day} {
+					background-color: ${theme.colors.hover};
+				}
+			}
+			${onClickActive ? `&:active {
+				span.${unique.day.day} {
+					background-color: ${theme.colors.pressing};
+				}
+			}` : ''}
+			&.${unique.day.active} {
+				span.${unique.day.day} {
+					background-color: ${theme.colors.focus};
+					font-family: ${theme.typography.fontFamilyBold};
+				}
+			}
+			&.${unique.day.today} {
+				span {
+					border					 : ${theme.border.style} 1px ${theme.colors.primary};
+					box-sizing				 : border-box;
+					font-weight              : 700;
+					/* text-decoration-line     : underline;
+					text-decoration-thickness: 2px;
+					text-underline-offset    : 1px */
+				}
+			}
+			&.${unique.day.between} {
+				opacity: 1;
+				&::before{
+					background-color: ${theme.colors.hover};
+				}
+			}
+			&.${unique.day.from} {
+				opacity: 1;
+				&::before{
+					background-color         : ${theme.colors.hover};
+					border-bottom-left-radius: 12px;
+					border-top-left-radius   : 12px;
+					left					 : calc((100% - 24px)/2);
+				}
+			}
+			&.${unique.day.to} {
+				opacity: 1;
+				&::before{
+					background-color          : ${theme.colors.hover};
+					border-bottom-right-radius: 12px;
+					border-top-right-radius   : 12px;
+					right					  : calc((100% - 24px)/2);
+				}
+			}
+			::before {
+				position: absolute;
+				inset: 1px -2px;
+				content: '';
+			}	
+		}
+		.${unique.table.header} {
+			color         : ${theme.colors.label};
+			height        : 24px;
+			min-width     : 24px;
+			padding       : 0;
+			padding-bottom: 6px;
+			user-select   : none;
+			text-align    : center;
+			&:nth-of-type(6) {
+				color: ${theme.colors.calendar.day.saturday} !important;
+			}
+			&:nth-of-type(7) {
+				color: ${theme.colors.calendar.day.sunday} !important;
+			}
+		}
+	}
+	@media only screen and (max-width: 599px) {
+		.${unique.navigator.navigator} {
+			height	  : 24px;
+			margin-top: 14px;
+			.${unique.navigator.center} {
+				height	 : 24px;
+				margin   : 0;
+				min-width: 130px;
+				button {
+					height: 24px;
+				}
+				.DGN-UI-Typography {
+					font-size: 18px;
+					min-width: 130px;
+				}
+			}
+			.${unique.navigator.around} {
+				height: 24px;
+				width : 56px;
+			}
+			.${unique.icon} {
+				height: 24px;
+				margin: 0 2px;
+				width : 24px;
+				svg, path, g {
+					pointer-events: none;
+				}
+			}
+		}
+		.${unique.table.container} {
+			margin: 6px 0;
+		}
+		.${unique.table.table} {
+			margin: 0 10px;
+			width : calc(100% - 20px);
+			.DGN-UI-Typography {
+				font-size: 14px;
+			}
+		}
+	}
+`;
+/**
+* END STYLE
+*/
+
+/**
+ *
+ * @description return props of the typography.
+ * @param {String} className
+ * @returns {Object} props of the typography
+ */
+
+
+const typographyProps = className => {
+  return {
+    className,
+    color: 'inherit',
+    style: {
+      alignItems: 'center',
+      borderRadius: '50%',
+      display: 'flex',
+      height: 24,
+      justifyContent: 'center',
+      margin: 'auto',
+      transition: 'background-color 150ms linear',
+      width: 24
+    },
+    type: 'h6'
+  };
+};
+/**
+ * 
+ * @description return props of the button icon.
+ * @param {String} className 
+ * @returns {Object} props of the button icon
+ */
+
+
+const buttonIconProps = className => {
+  return {
+    className,
+    circular: true,
+    height: 28,
+    viewBox: true,
+    viewType: 'text',
+    width: 28
+  };
+};
+/**
+ * 
+ * @description return props of the button icon.
+ * @param {Function} fn 
+ * @returns {Object} props of the button text
+ */
+
+
+const buttonTextProps = fn => {
+  return {
+    onClick: fn,
+    color: 'primary',
+    style: {
+      borderRadius: 20,
+      margin: 0,
+      padding: '2px 4px',
+      textTransform: 'initial',
+      width: '100%'
+    }
+  };
+};
+/**
+ * @description detect value is a Date object
+ * @param {String | Number | Array} value 
+ * @returns boolean
+ */
+
+
+const isValidDate = value => {
+  if (!!value && value !== null && !isNaN(Date.parse(new Date(value)))) {
+    return true;
+  }
+
+  ;
+  return false;
+};
+/**
+ *
+ * @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
+ */
+
+
+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
+ */
+
+
+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
+ */
+
+
+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}
+ */
+
+
+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();
+  let active = Array.isArray(activeValue) ? new Date(activeValue[0]) : new Date(activeValue);
+  let tableBody = [],
+      tableRaw = [],
+      tableData = [],
+      weekDateFirst = getDateOfWeek(firstDay),
+      weekDateLast = getDateOfWeek(lastDay);
+
+  if (activeValue && Array.isArray(activeValue) && activeValue.length === 2 && activeValue[0] !== activeValue[1]) {
+    /**
+     * 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
+      1);
+      tableData.push(jsx("td", {
+        key: `previous_month-${prevDate - i + 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), '')));
+    }
+    /**
+     * 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", {
+        key: `this_month-${i + 1}`,
+        "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), i + 1)));
+    }
+    /**
+     * 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
+      6 - weekDateLast);
+      tableData.push(jsx("td", {
+        key: `next_month-${i + 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), '')));
+    }
+  } else {
+    /**
+     * 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);
+      tableData.push(jsx("td", {
+        key: `previous_month-${prevDate - i + 1}`,
+        "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)].join(' ')}`
+      }, jsx(Typography, typographyProps(className.day.day), displayAnotherMonth ? prevDate - i + 1 : '')));
+    }
+    /**
+     * 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", {
+        key: `this_month-${i + 1}`,
+        "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), i + 1)));
+    }
+    /**
+     * 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", {
+        key: `next_month-${i + 1}`,
+        "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)].join(' ')}`
+      }, 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 
+ */
+
+
+const renderHeader = className => {
+  const weekdays = getGlobal(['weekdaysLong']);
+  const tableHeader = [];
+
+  for (let i in weekdays) {
+    tableHeader.push(jsx("th", {
+      key: i,
+      className: className.table.header
+    }, jsx(Typography, {
+      color: 'inherit',
+      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
+ */
+
+
+const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn, fn) => jsx("div", {
+  className: className.navigator.navigator
+}, jsx("div", {
+  className: className.navigator.around
+}, jsx(ButtonIcon, _extends({}, buttonIconProps(className.icon), {
+  name: 'ArrowDoubleLeft',
+  onClick: dbLeftFn,
+  ref: refs.doubleLeft
+})), jsx(ButtonIcon, _extends({}, buttonIconProps(className.icon), {
+  name: 'ArrowLeft',
+  onClick: leftFn,
+  ref: refs.left
+}))), jsx("div", {
+  className: className.navigator.center
+}, jsx(Button, buttonTextProps(fn), jsx(Typography, {
+  color: 'primary',
+  type: 'h3',
+  ref: refs.content
+}))), jsx("div", {
+  className: className.navigator.around
+}, jsx(ButtonIcon, _extends({}, buttonIconProps(className.icon), {
+  name: 'ArrowRight',
+  onClick: rightFn,
+  ref: refs.right
+})), jsx(ButtonIcon, _extends({}, buttonIconProps(className.icon), {
+  name: 'ArrowDoubleRight',
+  onClick: dbRightFn,
+  ref: refs.doubleRight
+}))));
+/**
+ * 
+ * @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 
+ */
+
+
+const onUpdateNavigator = (time, refs, min, max) => {
+  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.current.disabled = false;
+  refs.doubleRight.current.disabled = false;
+  refs.left.current.disabled = false;
+  refs.right.current.disabled = false;
+
+  if (min && isValidDate(min)) {
+    if (moment(time).diff(firstDayOfMin) < 365) {
+      refs.doubleLeft.current.disabled = true;
+    }
+
+    if (moment(time).diff(firstDayOfMin) <= 28) {
+      refs.doubleLeft.current.disabled = true;
+      refs.left.current.disabled = true;
+    }
+  }
+
+  if (max && isValidDate(max)) {
+    if (moment(time).diff(firstDayOfMax) > -334) {
+      refs.doubleRight.current.disabled = true;
+    }
+
+    if (moment(time).diff(firstDayOfMax) > -1) {
+      refs.doubleRight.current.disabled = true;
+      refs.right.current.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 
+ */
+
+
+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 };