diginet-core-ui 1.3.24 → 1.3.29

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

@@ -1,5 +1,3 @@
-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 */
@@ -10,6 +8,7 @@ import { getGlobal } from '../../../global';
 import locale from '../../../locale';
 import theme from '../../../theme/settings';
 import { date as moment } from '../../../utils';
+import { typography } from "../../../styles/typography";
 /**
  * START STYLE
  */
@@ -117,14 +116,14 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
 			&.${unique.day.active} {
 				span.${unique.day.day} {
 					background-color: ${theme.colors.focus};
-					font-family: ${theme.typography.fontFamilyBold};
+					${typography.heading5};
 				}
 			}
 			&.${unique.day.today} {
 				span {
 					border					 : ${theme.border.style} 1px ${theme.colors.primary};
 					box-sizing				 : border-box;
-					font-weight              : 700;
+					${typography.heading5}
 					/* text-decoration-line     : underline;
 					text-decoration-thickness: 2px;
 					text-underline-offset    : 1px */
@@ -293,12 +292,7 @@ const buttonTextProps = fn => {
 
 
 const isValidDate = value => {
-  if (!!value && value !== null && !isNaN(Date.parse(new Date(value)))) {
-    return true;
-  }
-
-  ;
-  return false;
+  return new Date(value) instanceof Date && !isNaN(new Date(value));
 };
 /**
  *
@@ -431,7 +425,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
         /*(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
@@ -445,7 +440,8 @@ 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), i + 1)));
+      }, jsx(Typography, { ...typographyProps(className.day.day)
+      }, i + 1)));
     }
     /**
      * days of next month
@@ -461,7 +457,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
         /*(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 {
     /**
@@ -473,7 +470,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
         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 : '')));
+      }, jsx(Typography, { ...typographyProps(className.day.day)
+      }, displayAnotherMonth ? prevDate - i + 1 : '')));
     }
     /**
      * days of this month
@@ -487,7 +485,8 @@ 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), i + 1)));
+      }, jsx(Typography, { ...typographyProps(className.day.day)
+      }, i + 1)));
     }
     /**
      * days of next month
@@ -500,7 +499,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
         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 : '')));
+      }, jsx(Typography, { ...typographyProps(className.day.day)
+      }, displayAnotherMonth ? i + 1 : '')));
     }
   }
 
@@ -560,31 +560,32 @@ const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn,
   className: className.navigator.navigator
 }, jsx("div", {
   className: className.navigator.around
-}, jsx(ButtonIcon, _extends({}, buttonIconProps(className.icon), {
+}, jsx(ButtonIcon, { ...buttonIconProps(className.icon),
   name: 'ArrowDoubleLeft',
   onClick: dbLeftFn,
   ref: refs.doubleLeft
-})), jsx(ButtonIcon, _extends({}, buttonIconProps(className.icon), {
+}), jsx(ButtonIcon, { ...buttonIconProps(className.icon),
   name: 'ArrowLeft',
   onClick: leftFn,
   ref: refs.left
-}))), jsx("div", {
+})), jsx("div", {
   className: className.navigator.center
-}, jsx(Button, buttonTextProps(fn), jsx(Typography, {
+}, 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), {
+}, jsx(ButtonIcon, { ...buttonIconProps(className.icon),
   name: 'ArrowRight',
   onClick: rightFn,
   ref: refs.right
-})), jsx(ButtonIcon, _extends({}, buttonIconProps(className.icon), {
+}), jsx(ButtonIcon, { ...buttonIconProps(className.icon),
   name: 'ArrowDoubleRight',
   onClick: dbRightFn,
   ref: refs.doubleRight
-}))));
+})));
 /**
  * 
  * @param {Date} time 

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

@@ -1,5 +1,3 @@
-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 */
@@ -209,11 +207,11 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
    * END COMPONENT
    */
 
-  return jsx("div", _extends({}, props, {
+  return jsx("div", { ...props,
     className: [unique.container, className].join(' '),
     css: generateCalendarCSS(unique),
     ref: ref
-  }), renderNavigator(unique, navigatorRefs, setPrevYear, setPrevMonth, setNextMonth, setNextYear), tableMemo, actions);
+  }, renderNavigator(unique, navigatorRefs, setPrevYear, setPrevMonth, setNextMonth, setNextYear), tableMemo, actions);
 }));
 Calendar.defaultProps = {
   actions: null,

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

@@ -1,5 +1,3 @@
-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 */
@@ -256,12 +254,13 @@ const CalendarRange = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onUpdate(defaultValue);
     }
   }, []);
-  return jsx("div", _extends({}, props, {
+  return jsx("div", { ...props,
     className: unique.container,
     onMouseOver: onPickerHover,
     css: containerCSS,
     ref: ref
-  }), calendarFrom, jsx(Divider, dividerProps), calendarTo, actions);
+  }, calendarFrom, jsx(Divider, { ...dividerProps
+  }), calendarTo, actions);
 }));
 CalendarRange.defaultProps = {
   actions: null,

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

@@ -1,5 +1,3 @@
-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 */
@@ -7,15 +5,20 @@ import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useRef, useState, useImperativeHandle } from 'react';
 import { Typography } from '../..';
-import theme from '../../../theme/settings';
+import { alignCenter, alignStart, borderBox, cursorPointer, displayBlock, flexRow, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../../styles/general';
 import { randomString } from '../../../utils';
-const colors = {
-  primary: theme.colors.primary,
-  info: theme.colors.info,
-  success: theme.colors.success,
-  warning: theme.colors.warning,
-  danger: theme.colors.danger
-};
+import { color as colors } from '../../../styles/colors';
+const {
+  system: {
+    disabled: systemDisabled,
+    rest,
+    white
+  },
+  fill: {
+    hover,
+    focusshd
+  }
+} = colors;
 const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   id,
   className,
@@ -39,6 +42,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }
 
   const ref = useRef(null);
+  const [checkedState, setCheckedState] = useState(checked || defaultChecked);
 
   if (!id) {
     [id] = useState('DGN-UI-' + randomString(10, {
@@ -55,8 +59,8 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 				&::after {
 					transform: translate(-50%, -66%) scale(1) rotate(-45deg);
 					background:
-						linear-gradient(${theme.colors.white}, ${theme.colors.white}) left bottom/2px 100%,
-						linear-gradient(${theme.colors.white}, ${theme.colors.white}) left bottom/100% 2px;
+						linear-gradient(${white}, ${white}) left bottom/2px 100%,
+						linear-gradient(${white}, ${white}) left bottom/100% 2px;
 					background-repeat: no-repeat;
 				}
 			}
@@ -68,21 +72,23 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 		}
 	`;
   const CheckBoxSquare = css`
-		display: flex;
-		position: relative;
+		${flexRow}
+		${positionRelative}
+		${borderBox}
 		width: 18px;
+		min-width: 18px;
 		height: 18px;
-		background-color: ${theme.colors.white};
-		border: 2px solid ${theme.colors.border};
-		box-sizing: border-box;
+		min-height: 18px;
+		background-color: ${white};
+		border: 2px solid ${rest};
 		border-radius: 2px;
 		&.determinate {
 			&::after {
+				${displayBlock}
+				${positionAbsolute}
 				content   : '';
-				display   : block;
 				height    : 7px;
 				left	  : 50%;
-				position  : absolute;
 				top		  : 43%;
 				transform : translate(-50%, -50%) scale(0) rotate(45deg);
 				transition: transform 0.3s;
@@ -91,9 +97,9 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 		}
 		&.indeterminate {
 			&::after {
+				${flexRow}
+				${positionAbsolute}
 				content: "";
-				display: flex;
-				position: absolute;
 				background-color: white;
 				left: 2px;
 				top: 6px;
@@ -105,55 +111,55 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 		}
 		&:hover {
 			box-shadow:
-                0 0 2px 2px ${theme.colors.focus};
-			background-color:${theme.colors.focus};
+                0 0 2px 2px ${focusshd};
+			background-color:${focusshd};
 		}
 		
 	`;
   const CheckBoxLabel = css`
-		display: flex;
-		position: relative;
-		align-items: center;
+		${flexRow}
+		${positionRelative}
+		${alignCenter}
+		${borderBox}
 		padding-left: 8px;
-		box-sizing: border-box;
 	`;
   const CheckBoxRoot = css`
-		display: flex;
-		position: relative;
-		align-items: center;
+		${flexRow}
+		${positionRelative}
+		${alignStart}
+		${cursorPointer}
+		${userSelectNone}
+		${borderBox}
 		margin: 3px 0;
-		cursor: pointer;
-		user-select: none;
-		box-sizing: border-box;
 		&.disabled {
-			pointer-events: none;
+			${pointerEventsNone}
 			.css-${CheckBoxSquare.name} {
-				border-color:${theme.colors.disabled};
+				border-color:${systemDisabled};
 			}
 			.css-${CheckBoxInput.name} {
 				&:checked {
 					&.determinate + span::after {
 						background:
-							linear-gradient(${theme.colors.white},${theme.colors.white}) left bottom/2px 100%,
-							linear-gradient(${theme.colors.white},${theme.colors.white}) left bottom/ 100% 2px;
+							linear-gradient(${white},${white}) left bottom/2px 100%,
+							linear-gradient(${white},${white}) left bottom/ 100% 2px;
 						background-repeat: no-repeat;
 					}
 					&.indeterminate + span::after {
-						background-color: ${theme.colors.white};
+						background-color: ${white};
 					}
 					& + span {
-						background-color:${theme.colors.disabled};
+						background-color:${systemDisabled};
 					}
 				}
 			}
 		}
 		&.read-only {
-			pointer-events: none;
-			user-select: none;
+			${pointerEventsNone}
+			${userSelectNone}
 		}
 		&:not(.disabled):hover {
 			.css-${CheckBoxSquare.name} {
-				background-color:${theme.colors.hover};
+				background-color:${hover};
 				border-color:${colors[color] || color};
 			}
 			.css-${CheckBoxInput.name} {
@@ -172,8 +178,8 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 		}
 	`;
   const CheckboxContainer = css`
-		display: block;
-		position: relative;
+		${displayBlock}
+		${positionRelative}
 		width: max-content;
 		&.disabled {
 			cursor: no-drop;
@@ -182,10 +188,9 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const handleChange = () => {
     if (readOnly || inputProps.readOnly || disabled || inputProps.disabled) return;
-    const checked = !inputRef.current.checked;
-    inputRef.current.checked = checked;
+    setChecked(checked !== undefined ? checked : !checkedState);
     const e = {
-      value: checked,
+      value: !checkedState,
       target: inputRef.current
     };
     if (onChange) onChange(e, checked);
@@ -193,35 +198,45 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const setChecked = check => {
     if (typeof check === 'boolean') {
-      inputRef.current.checked = check;
+      setCheckedState(check);
     }
   };
 
   useEffect(() => {
-    setChecked(checked);
+    if (checked !== undefined) setChecked(checked);
   }, [checked]);
   useImperativeHandle(reference, () => {
-    ref.current.determinate = determinate;
-    ref.current.setChecked = setChecked;
+    const currentRef = ref.current || {};
+    const _instance = {
+      determinate: determinate,
+      setChecked: setChecked,
+      getChecked: () => inputRef.current.checked
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    currentRef.determinate = determinate;
+    currentRef.setChecked = setChecked;
 
-    ref.current.getChecked = () => inputRef.current.checked;
+    currentRef.getChecked = () => inputRef.current.checked;
 
-    return ref.current;
+    return currentRef;
   });
-  return jsx("div", _extends({
+  return jsx("div", {
     id: 'DGN-UI-Checkbox-' + id.replace('DGN-UI-', ''),
     css: CheckboxContainer,
-    className: ['DGN-UI-Checkbox', disabled ? 'disabled' : '', className].join(' ').trim(),
-    ref: ref
-  }, props, {
+    className: ['DGN-UI-Checkbox', disabled ? 'disabled' : '', className].join(' ').trim().replace(/\s+/g, ' '),
+    ref: ref,
+    ...props,
     onClick: handleChange
-  }), jsx("div", {
+  }, jsx("div", {
     css: CheckBoxRoot,
     className: disabled ? 'disabled' : readOnly ? 'read-only' : ''
-  }, jsx("input", _extends({
-    value: value
-  }, inputProps, {
-    className: [determinate ? 'determinate' : 'indeterminate', inputProps.className || ''].join(' ').trim(),
+  }, jsx("input", {
+    value: value,
+    ...inputProps,
+    className: [determinate ? 'determinate' : 'indeterminate', inputProps.className || ''].join(' ').trim().replace(/\s+/g, ' '),
     readOnly: readOnly || inputProps.readOnly,
     disabled: disabled || inputProps.disabled,
     ref: inputRef,
@@ -229,9 +244,10 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     id: id,
     name: name,
     type: "checkbox",
-    defaultChecked: checked || defaultChecked,
+    checked: checkedState,
+    onChange: handleChange,
     hidden: true
-  })), jsx("span", {
+  }), jsx("span", {
     css: CheckBoxSquare,
     className: determinate ? 'determinate' : 'indeterminate'
   }), (children || label) && jsx("div", {
@@ -294,13 +310,11 @@ Checkbox.propTypes = {
   onChange: PropTypes.func,
 
   /**
-   * named ref: get ref of Checkbox component, insist:<br />
-   * * element<br />
-   * * setChecked: the method to set checked for input<br />
-   * * getChecked: the method to get checked of input<br />
+   * ref methods
+  * 
+   * * setChecked: Set check for input
+   * * getChecked: Get check of input
    */
-  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(PropTypes.elementType)
-  })])
+  ref: PropTypes.any
 };
 export default Checkbox;

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

@@ -1,5 +1,3 @@
-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 */
@@ -7,8 +5,8 @@ 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";
 const {
-  typography,
   colors
 } = theme;
 const Control = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -26,7 +24,7 @@ const Control = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     error: 'DGN-UI-Control-error'
   };
   const controlRootCSS = css`
-        font-family  : ${typography.fontFamily};
+        ${typography.paragraph3};
         margin-bottom: 20px;
         position     : relative;
         &.${classes.disabled} {
@@ -61,12 +59,12 @@ const Control = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     };
   }, [disabled, error]);
-  return jsx("div", _extends({}, props, {
+  return jsx("div", { ...props,
     className: ['DGN-UI-Control', className].join(' '),
     css: controlRootCSS,
     style: style,
     ref: ref
-  }), children);
+  }, children);
 }));
 Control.defaultProps = {
   className: '',

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

@@ -6,7 +6,6 @@
 // import { Calendar as CalendarIcon, Cancel as CancelIcon } from '../../../icons';
 // import { randomString, useOnClickOutside } from '../../../utils';
 // import { blue4, blue13, brand, danger5, danger8, dark, dark4, dark6, dark8, info5, info8, success5, white } from '../../../styles/colors';
-// import { fontFamily } from '../../../styles/typography';
 // // import CalendarNavigator from './calendar-navigator'
 // const getElById = (id) => {
 // 	return document.getElementById(id);
@@ -74,7 +73,6 @@
 // 		container: css`
 // 			* {
 // 				box-sizing: border-box;
-// 				font-family: ${fontFamily};
 // 			}
 // 			border-radius: 4px;
 // 			box-sizing: border-box;