diginet-core-ui 1.3.37 → 1.3.39

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

@@ -31,221 +31,227 @@ const {
   danger8,
   info8
 } = colors;
-/**
- * START STYLE
+/**
+ * START STYLE
  */
 
-/**
- * 
- * @param {Object} unique 
- * @param {Boolean} boxShadow 
- * @returns 
+/**
+ *
+ * @param {Object} unique
+ * @param {Boolean} boxShadow
+ * @returns
  */
 
 const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) => css`
-	${borderRadius4px}
-	${borderBox}
+    ${borderRadius4px}
+    ${borderBox}
 	${flexCol}
 	background-color: ${white};
-	box-shadow      : ${boxShadow ? theme.boxShadows.large : 'none'};
-	max-width       : 400px;
-	min-width       : 260px;
-	width           : 100%;
-	.${unique.navigator.navigator} {
-		${flexRow}
-		${justifyBetween}
+    box-shadow: ${boxShadow ? theme.boxShadows.large : 'none'};
+    max-width: 400px;
+    min-width: 260px;
+    width: 100%;
+    .${unique.navigator.navigator} {
+        ${flexRow}
+        ${justifyBetween}
 		height         : 28px;
-		margin		   : 0px 14px;
-		margin-top     : 14px;
-		max-width      : 400px;
-		width          : calc(100% - 28px);
-		.${unique.navigator.around} {
-			${flexRow}
-			${userSelectNone}
+        margin: 0px 14px;
+        margin-top: 14px;
+        max-width: 400px;
+        width: calc(100% - 28px);
+        .${unique.navigator.around} {
+            ${flexRow}
+            ${userSelectNone}
 			height        : 28px;
-			width         : 64px;
-		}
-		.${unique.navigator.center} {
-			${inlineFlex}
-			${alignCenter}
+            width: 64px;
+        }
+        .${unique.navigator.center} {
+            ${inlineFlex}
+            ${alignCenter}
 			${textCenter}
 			${userSelectNone}
 			height     : 28px;
-			margin     : 0 4px;
-			min-width  : 150px;
-			width	   : 100%;
-			button {
-				height: 28px;
-			}
-			.DGN-UI-Typography {
-				min-width  : 150px;
-			}
-		}
-	}
-	.${unique.icon} {
-		height: 28px;
-		margin: 0 2px;
-		width : 28px;
-		svg, path, g {
-			${pointerEventsNone}
-		}
-	}
-	.${unique.table.container} {
-		${flexRow}
-		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} {
-			${cursorPointer}
-			${positionRelative}
+            margin: 0 4px;
+            min-width: 150px;
+            width: 100%;
+            button {
+                height: 28px;
+            }
+            .DGN-UI-Typography {
+                min-width: 150px;
+            }
+        }
+    }
+    .${unique.icon} {
+        height: 28px;
+        margin: 0 2px;
+        width: 28px;
+        svg,
+        path,
+        g {
+            ${pointerEventsNone}
+        }
+    }
+    .${unique.table.container} {
+        ${flexRow}
+        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} {
+            ${cursorPointer}
+            ${positionRelative}
 			${textCenter}
 			${userSelectNone}
 			color      : ${main};
-			height     : 24px;
-			min-width  : 24px;
-			padding    : 1px;
-			&:nth-of-type(7n - 1) {
-				color: ${info8} !important;
-			}
-			&:nth-of-type(7n) {
-				color: ${danger8} !important;
-			}
-			&.next_month, &.previous_month, &.${unique.day.limit} {
-				opacity       : 0.25;
-			}
-			&.${unique.day.limit} {
-				${pointerEventsNone}
-				cursor: default;
-			}
-			&:hover {
-				span.${unique.day.day} {
-					background-color: ${fillHover};
-				}
-			}
-			${onClickActive ? `&:active {
+            height: 24px;
+            min-width: 24px;
+            padding: 1px;
+            &:nth-of-type(7n - 1) {
+                color: ${info8} !important;
+            }
+            &:nth-of-type(7n) {
+                color: ${danger8} !important;
+            }
+            &.next_month,
+            &.previous_month,
+            &.${unique.day.limit} {
+                opacity: 0.25;
+            }
+            &.${unique.day.limit} {
+                ${pointerEventsNone}
+                cursor: default;
+            }
+            &:hover {
+                span.${unique.day.day} {
+                    background-color: ${fillHover};
+                }
+            }
+            ${onClickActive ? `&:active {
 				span.${unique.day.day} {
 					background-color: ${fillPressed};
 				}
 			}` : ''}
-			&.${unique.day.active} {
-				span.${unique.day.day} {
-					${heading6};
-					background-color: ${fillFocus};
-				}
-			}
-			&.${unique.day.today} {
-				span {
-					${heading6}
-					${borderBox}
+            &.${unique.day.active} {
+                span.${unique.day.day} {
+                    ${heading6};
+                    background-color: ${fillFocus};
+                }
+            }
+            &.${unique.day.today} {
+                span {
+                    ${heading6}
+                    ${borderBox}
 					${border(1, active)}
 					/* text-decoration-line     : underline;
 					text-decoration-thickness: 2px;
 					text-underline-offset    : 1px */
-				}
-			}
-			&.${unique.day.between} {
-				opacity: 1;
-				&::before{
-					background-color: ${fillHover};
-				}
-			}
-			&.${unique.day.from} {
-				opacity: 1;
-				&::before{
-					background-color         : ${fillHover};
-					border-bottom-left-radius: 12px;
-					border-top-left-radius   : 12px;
-					left					 : calc((100% - 24px)/2);
-				}
-			}
-			&.${unique.day.to} {
-				opacity: 1;
-				&::before{
-					background-color          : ${fillHover};
-					border-bottom-right-radius: 12px;
-					border-top-right-radius   : 12px;
-					right					  : calc((100% - 24px)/2);
-				}
-			}
-			::before {
-				${positionAbsolute}
-				inset: 1px -2px;
-				content: '';
-			}	
-		}
-		.${unique.table.header} {
-			${userSelectNone}
-			${textCenter}
+                }
+            }
+            &.${unique.day.between} {
+                opacity: 1;
+                &::before {
+                    background-color: ${fillHover};
+                }
+            }
+            &.${unique.day.from} {
+                opacity: 1;
+                &::before {
+                    background-color: ${fillHover};
+                    border-bottom-left-radius: 12px;
+                    border-top-left-radius: 12px;
+                    left: calc((100% - 24px) / 2);
+                }
+            }
+            &.${unique.day.to} {
+                opacity: 1;
+                &::before {
+                    background-color: ${fillHover};
+                    border-bottom-right-radius: 12px;
+                    border-top-right-radius: 12px;
+                    right: calc((100% - 24px) / 2);
+                }
+            }
+            ::before {
+                ${positionAbsolute}
+                inset: 1px -2px;
+                content: '';
+            }
+        }
+        .${unique.table.header} {
+            ${userSelectNone}
+            ${textCenter}
 			color         : ${normal_label};
-			height        : 24px;
-			min-width     : 24px;
-			padding       : 0;
-			padding-bottom: 6px;
-			&:nth-of-type(6) {
-				color: ${info8} !important;
-			}
-			&:nth-of-type(7) {
-				color: ${danger8} !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 {
-					${pointerEventsNone}
-				}
-			}
-		}
-		.${unique.table.container} {
-			margin: 6px 0;
-		}
-		.${unique.table.table} {
-			margin: 0 10px;
-			width : calc(100% - 20px);
-			.DGN-UI-Typography {
-				font-size: 14px;
-			}
-		}
-	}
+            height: 24px;
+            min-width: 24px;
+            padding: 0;
+            padding-bottom: 6px;
+            &:nth-of-type(6) {
+                color: ${info8} !important;
+            }
+            &:nth-of-type(7) {
+                color: ${danger8} !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 {
+                    ${pointerEventsNone}
+                }
+            }
+        }
+        .${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
+/**
+ * END STYLE
+ */
+
+/**
+ *
+ * @description return props of the typography.
+ * @param {String} className
+ * @returns {Object} props of the typography
  */
 
 
@@ -266,11 +272,11 @@ 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
  */
 
 
@@ -284,11 +290,11 @@ 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
  */
 
 
@@ -305,21 +311,21 @@ 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).
  */
 
 
@@ -328,26 +334,26 @@ const getDateOfWeek = date => {
   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
  */
 
 
@@ -364,14 +370,14 @@ const isActive = (day, active, 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
  */
 
 
@@ -402,17 +408,17 @@ const isBeforeLimit = (min, time) => {
 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}
  */
 
 
@@ -432,8 +438,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       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;
 
@@ -449,8 +455,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       }, jsx(Typography, { ...typographyProps(className.day.day)
       }, '')));
     }
-    /**
-     * days of this month
+    /**
+     * days of this month
      */
 
 
@@ -464,8 +470,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       }, jsx(Typography, { ...typographyProps(className.day.day)
       }, i + 1)));
     }
-    /**
-     * days of next month
+    /**
+     * days of next month
      */
 
 
@@ -482,8 +488,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       }, '')));
     }
   } 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);
@@ -495,8 +501,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       }, jsx(Typography, { ...typographyProps(className.day.day)
       }, displayAnotherMonth ? prevDate - i + 1 : '')));
     }
-    /**
-     * days of this month
+    /**
+     * days of this month
      */
 
 
@@ -510,8 +516,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       }, jsx(Typography, { ...typographyProps(className.day.day)
       }, i + 1)));
     }
-    /**
-     * days of next month
+    /**
+     * days of next month
      */
 
 
@@ -541,10 +547,10 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
 
   return tableBody;
 };
-/**
- * 
- * @param {Object} className 
- * @returns 
+/**
+ *
+ * @param {Object} className
+ * @returns
  */
 
 
@@ -567,15 +573,15 @@ const renderHeader = className => {
   }, 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
  */
 
 
@@ -609,10 +615,10 @@ const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn,
   onClick: dbRightFn,
   ref: refs.doubleRight
 })));
-/**
- * 
- * @param {Date} time 
- * @returns {String} month year
+/**
+ *
+ * @param {Date} time
+ * @returns {String} month year
  */
 
 
@@ -621,12 +627,12 @@ const renderNavigatorContent = 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
  */
 
 
@@ -668,18 +674,18 @@ const onUpdateNavigator = (time, refs, min, max) => {
     }
   }
 };
-/**
- * 
- * @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
  */