diginet-core-ui 1.3.34 → 1.3.35

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

@@ -8,7 +8,29 @@ import { getGlobal } from '../../../global';
 import locale from '../../../locale';
 import theme from '../../../theme/settings';
 import { date as moment } from '../../../utils';
-import { typography } from "../../../styles/typography";
+import { color as colors } from '../../../styles/colors';
+import { typography } from '../../../styles/typography';
+import { alignCenter, border, borderBox, borderRadius4px, cursorPointer, flexCol, flexRow, inlineFlex, justifyBetween, pointerEventsNone, positionAbsolute, positionRelative, textCenter, userSelectNone } from '../../../styles/general';
+const {
+  heading6
+} = typography;
+const {
+  system: {
+    active,
+    white
+  },
+  fill: {
+    hover: fillHover,
+    focus: fillFocus,
+    pressed: fillPressed
+  },
+  text: {
+    main,
+    normal_label
+  },
+  danger8,
+  info8
+} = colors;
 /**
  * START STYLE
  */
@@ -21,39 +43,36 @@ import { typography } from "../../../styles/typography";
  */
 
 const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) => css`
-	background-color: ${theme.colors.white};
-	border-radius   : ${theme.border.radius};
+	${borderRadius4px}
+	${borderBox}
+	${flexCol}
+	background-color: ${white};
 	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;
+		${flexRow}
+		${justifyBetween}
 		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;
+			${flexRow}
+			${userSelectNone}
 			height        : 28px;
-			user-select   : none;
 			width         : 64px;
 		}
 		.${unique.navigator.center} {
-			align-items: center;
-			display    : inline-flex;
+			${inlineFlex}
+			${alignCenter}
+			${textCenter}
+			${userSelectNone}
 			height     : 28px;
 			margin     : 0 4px;
 			min-width  : 150px;
-			text-align : center;
-			user-select: none;
 			width	   : 100%;
 			button {
 				height: 28px;
@@ -68,11 +87,11 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
 		margin: 0 2px;
 		width : 28px;
 		svg, path, g {
-			pointer-events: none;
+			${pointerEventsNone}
 		}
 	}
 	.${unique.table.container} {
-		display: flex;
+		${flexRow}
 		margin : 10px 0;
 		margin-top: 6px;
 		width  : 100%;
@@ -84,46 +103,48 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
 		table-layout   : fixed;
 		width          : calc(100% - 32px);
 		.${unique.table.data} {
-			color      : ${theme.colors.input};
-			cursor     : pointer;
+			${cursorPointer}
+			${positionRelative}
+			${textCenter}
+			${userSelectNone}
+			color      : ${main};
 			height     : 24px;
 			min-width  : 24px;
 			padding    : 1px;
-			position   : relative;
-			text-align : center;
-			user-select: none;
 			&:nth-of-type(7n - 1) {
-				color: ${theme.colors.info8} !important;
+				color: ${info8} !important;
 			}
 			&:nth-of-type(7n) {
-				color: ${theme.colors.danger8} !important;
+				color: ${danger8} !important;
 			}
 			&.next_month, &.previous_month, &.${unique.day.limit} {
-				cursor        : default;
 				opacity       : 0.25;
-				pointer-events: none;
+			}
+			&.${unique.day.limit} {
+				${pointerEventsNone}
+				cursor: default;
 			}
 			&:hover {
 				span.${unique.day.day} {
-					background-color: ${theme.colors.hover};
+					background-color: ${fillHover};
 				}
 			}
 			${onClickActive ? `&:active {
 				span.${unique.day.day} {
-					background-color: ${theme.colors.blue6};
+					background-color: ${fillPressed};
 				}
 			}` : ''}
 			&.${unique.day.active} {
 				span.${unique.day.day} {
-					background-color: ${theme.colors.focus};
-					${typography.heading5};
+					${heading6};
+					background-color: ${fillFocus};
 				}
 			}
 			&.${unique.day.today} {
 				span {
-					border					 : ${theme.border.style} 1px ${theme.colors.primary};
-					box-sizing				 : border-box;
-					${typography.heading5}
+					${heading6}
+					${borderBox}
+					${border(1, active)}
 					/* text-decoration-line     : underline;
 					text-decoration-thickness: 2px;
 					text-underline-offset    : 1px */
@@ -132,13 +153,13 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
 			&.${unique.day.between} {
 				opacity: 1;
 				&::before{
-					background-color: ${theme.colors.hover};
+					background-color: ${fillHover};
 				}
 			}
 			&.${unique.day.from} {
 				opacity: 1;
 				&::before{
-					background-color         : ${theme.colors.hover};
+					background-color         : ${fillHover};
 					border-bottom-left-radius: 12px;
 					border-top-left-radius   : 12px;
 					left					 : calc((100% - 24px)/2);
@@ -147,31 +168,31 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
 			&.${unique.day.to} {
 				opacity: 1;
 				&::before{
-					background-color          : ${theme.colors.hover};
+					background-color          : ${fillHover};
 					border-bottom-right-radius: 12px;
 					border-top-right-radius   : 12px;
 					right					  : calc((100% - 24px)/2);
 				}
 			}
 			::before {
-				position: absolute;
+				${positionAbsolute}
 				inset: 1px -2px;
 				content: '';
 			}	
 		}
 		.${unique.table.header} {
-			color         : ${theme.colors.label};
+			${userSelectNone}
+			${textCenter}
+			color         : ${normal_label};
 			height        : 24px;
 			min-width     : 24px;
 			padding       : 0;
 			padding-bottom: 6px;
-			user-select   : none;
-			text-align    : center;
 			&:nth-of-type(6) {
-				color: ${theme.colors.info8} !important;
+				color: ${info8} !important;
 			}
 			&:nth-of-type(7) {
-				color: ${theme.colors.danger8} !important;
+				color: ${danger8} !important;
 			}
 		}
 	}
@@ -200,7 +221,7 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
 				margin: 0 2px;
 				width : 24px;
 				svg, path, g {
-					pointer-events: none;
+					${pointerEventsNone}
 				}
 			}
 		}
@@ -469,7 +490,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       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(' ')}`
+        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)
       }, displayAnotherMonth ? prevDate - i + 1 : '')));
     }
@@ -498,7 +520,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       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(' ')}`
+        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)
       }, displayAnotherMonth ? i + 1 : '')));
     }

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

@@ -4,8 +4,7 @@
 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 { date as moment } from '../../../utils';
 import { isAfterLimit, isBeforeLimit, onUpdateCalendar, renderHeader, renderNavigator, isValidDate, generateCalendarCSS } from './function';
 const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   actions,
@@ -98,7 +97,17 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     node.classList.add(unique.day.active);
     const timeStamp = Number(node.dataset.time);
     const objNewDate = new Date(timeStamp);
+
+    const _navigatorValue = new Date(navigatorValue.current);
+
+    const objNewDateMonth = objNewDate.getMonth() + 1;
+    const objNewDateYear = objNewDate.getFullYear();
+    const navigatorMonth = _navigatorValue.getMonth() + 1;
+
+    const navigatorYear = _navigatorValue.getFullYear();
+
     onUpdateActiveValue(objNewDate);
+    if (objNewDateMonth > navigatorMonth || objNewDateYear > navigatorYear) setNextMonth();else if (objNewDateMonth < navigatorMonth || objNewDateYear < navigatorYear) setPrevMonth();
     !!onClick && onClick({
       value: objNewDate
     });
@@ -208,7 +217,7 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
    */
 
   return jsx("div", { ...props,
-    className: [unique.container, className].join(' '),
+    className: [unique.container, className].join(' ').trim().replace(/\s+/g, ' '),
     css: generateCalendarCSS(unique),
     ref: ref
   }, renderNavigator(unique, navigatorRefs, setPrevYear, setPrevMonth, setNextMonth, setNextYear), tableMemo, actions);

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

@@ -1,14 +1,16 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
+import { forwardRef, memo, useImperativeHandle, useLayoutEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { Children, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef } from 'react';
-import theme from '../../../theme/settings';
-import { typography } from "../../../styles/typography";
+import { displayBlock, pointerEventsNone, positionRelative, userSelectNone } from '../../../styles/general';
+import { color as colors } from '../../../styles/colors';
 const {
-  colors
-} = theme;
+  semantic: {
+    danger
+  }
+} = colors;
 const Control = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
@@ -18,26 +20,10 @@ const Control = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   ...props
 }, reference) => {
   const ref = useRef(null);
-  useImperativeHandle(reference, () => ref.current);
   const classes = {
     disabled: 'DGN-UI-Control-disabled',
     error: 'DGN-UI-Control-error'
   };
-  const controlRootCSS = css`
-        ${typography.paragraph3};
-        margin-bottom: 20px;
-        position     : relative;
-        &.${classes.disabled} {
-            pointer-events: none;
-            user-select   : none;
-        }
-        &.${classes.error} {
-            * :not(label) {
-                color: ${colors.danger};
-            }
-        }
-        
-    `;
   useLayoutEffect(() => {
     if (disabled) {
       ref.current.classList.add(classes.disabled);
@@ -59,15 +45,41 @@ const Control = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     };
   }, [disabled, error]);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return jsx("div", { ...props,
-    className: ['DGN-UI-Control', className].join(' '),
-    css: controlRootCSS,
+    className: ['DGN-UI-Control', className].join(' ').trim().replace(/\s+/g, ' '),
+    css: controlRootCSS(classes),
     style: style,
     ref: ref
   }, children);
 }));
+
+const controlRootCSS = classes => css`
+    ${displayBlock}
+    ${positionRelative}
+    margin-bottom: 20px;
+    &.${classes.disabled} {
+        ${pointerEventsNone}
+        ${userSelectNone}
+    }
+    &.${classes.error} {
+        * :not(label) {
+            color: ${danger};
+        }
+    }
+`;
+
 Control.defaultProps = {
   className: '',
+  style: {},
   disabled: false,
   error: ''
 };

package/components/form-control/date-picker/index.js

@@ -90,21 +90,22 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const confirmText = getGlobal(['confirm']);
   const cancelText = getGlobal(['cancel']);
   const iconAreaCSS = css`
-        align-items : center;
-        color       : inherit;
-        display     : flex;
-        .${unique.icon} {
-            cursor     : pointer;
-            opacity    : 0;
-            transition : display 50ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 50ms;
-            display : none;
-            will-change: display, opacity;
-        }
-        .${unique.icon}-accept {
-            opacity	  : 1;
-            display: block;
-        }
-    `;
+                align-items: center;
+                color: inherit;
+                display: flex;
+                .${unique.icon} {
+                    cursor: pointer;
+                    opacity: 0;
+                    transition: display 50ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+                        opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 50ms;
+                    display: none;
+                    will-change: display, opacity;
+                }
+                .${unique.icon}-accept {
+                    opacity: 1;
+                    display: block;
+                }
+            `;
   const hiddenStyle = {
     opacity: 0,
     display: 'none'
@@ -117,21 +118,22 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const pickerCSS = {
     backGr: 'background-color: transparent; inset: 0px; pointer-events: auto; position: fixed; z-index: 9001;',
     picker: (position, left, width) => css`
-            background-color: ${theme.colors.white};
-            border-radius   : ${theme.border.radius};
-            height          : max-content;
-            left            : ${left}px;
-            max-width       : 400px;
-            min-width       : ${window.innerWidth <= 599 ? 280 : 314}px;
-            opacity         : 0;
-            position        : fixed;
-            top             : ${position.top}px;
-            transform       : scale(0);
-            transform-origin: ${position.transformOrigin};
-            transition      : opacity 120ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-            width           : ${width}px;
-            z-index         : 9002;
-        `,
+                    background-color: ${theme.colors.white};
+                    border-radius: ${theme.border.radius};
+                    height: max-content;
+                    left: ${left}px;
+                    max-width: 400px;
+                    min-width: ${window.innerWidth <= 599 ? 280 : 314}px;
+                    opacity: 0;
+                    position: fixed;
+                    top: ${position.top}px;
+                    transform: scale(0);
+                    transform-origin: ${position.transformOrigin};
+                    transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+                        transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+                    width: ${width}px;
+                    z-index: 9002;
+                `,
     active: {
       opacity: 1,
       transform: 'scale(1)'
@@ -143,10 +145,10 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
   const controlContainerCSS = css`
-        display        : flex;
-        justify-content: flex-end;
-        margin         : 0 16px 16px;
-    `;
+                display: flex;
+                justify-content: flex-end;
+                margin: 0 16px 16px;
+            `;
   const buttonProps = {
     style: {
       margin: '0 2px',
@@ -267,8 +269,6 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         target: null
       });
     }
-
-    ;
   };
 
   const onScroll = () => {