diginet-core-ui 1.3.88 → 1.3.89

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

@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
+
 import { jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
@@ -41,10 +41,10 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       limit: 'DGN-UI-Calendar-Day-limit'
     }
   };
-  /**
-   * START REFERENCE
-   */
 
+  /**
+   * START REFERENCE
+   */
   const ref = useRef(null);
   const tableRef = useRef(null);
   const activeValue = useRef(null);
@@ -61,14 +61,13 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const firstDayOfMax = new Date(new Date(max).setDate(1)).setHours(0, 0, 0, 0);
   const firstDayOfMin = new Date(new Date(min).setDate(1)).setHours(0, 0, 0, 0);
-  /**
-   * END REFERENCE
+  /**
+   * END REFERENCE
    */
 
-  /**
-   * START FUNCTION
+  /**
+   * START FUNCTION
    */
-
   const onUpdateNavigatorValue = useCallback(value => {
     navigatorValue.current = value;
     setNavigatorValue();
@@ -77,18 +76,15 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     activeValue.current = value;
     setActiveValue();
   }, [activeValue]);
-
   const onUpdate = value => {
     const newValue = new Date(value).setHours(0, 0, 0, 0);
     onUpdateActiveValue(newValue);
     onUpdateCalendar(newValue, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, onDayClick, onUpdateNavigatorValue);
   };
-
   const getCurrentTime = () => {
     const time = new Date(navigatorValue.current);
     return [time.getDate(), time.getMonth(), time.getFullYear()];
   };
-
   const onDayClick = e => {
     const node = e.currentTarget;
     tableRef.current.querySelectorAll(`td.${unique.day.active}`).forEach(element => {
@@ -97,70 +93,57 @@ 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
     });
   };
-
   const setPrevYear = e => {
     const time = new Date(getCurrentTime()[2] - 1, getCurrentTime()[1]);
-
     if (min && isValidDate(min) && moment(time).diff(firstDayOfMin) < 0) {
       e.preventDefault();
     } else {
       onUpdateCalendar(time, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, onDayClick, onUpdateNavigatorValue);
     }
   };
-
   const setNextYear = e => {
     const time = new Date(getCurrentTime()[2] + 1, getCurrentTime()[1]);
-
     if (max && isValidDate(max) && moment(time).diff(firstDayOfMax) > 0) {
       e.preventDefault();
     } else {
       onUpdateCalendar(time, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, onDayClick, onUpdateNavigatorValue);
     }
   };
-
   const setPrevMonth = e => {
     const time = new Date(getCurrentTime()[2], getCurrentTime()[1] - 1);
-
     if (min && isValidDate(min) && moment(time).diff(firstDayOfMin) < 0) {
       e.preventDefault();
     } else {
       onUpdateCalendar(time, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, onDayClick, onUpdateNavigatorValue);
     }
   };
-
   const setNextMonth = e => {
     const time = new Date(getCurrentTime()[2], getCurrentTime()[1] + 1);
-
     if (max && isValidDate(max) && moment(time).diff(firstDayOfMax) > 0) {
       e.preventDefault();
     } else {
       onUpdateCalendar(time, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, onDayClick, onUpdateNavigatorValue);
     }
   };
-  /**
-   * END FUNCTION
-   */
 
-  /**
-   * START EFFECT
+  /**
+   * END FUNCTION
    */
 
-
+  /**
+   * START EFFECT
+   */
   useEffect(() => {
     if (defaultValue && defaultValue !== '' && isValidDate(defaultValue)) {
       if (isBeforeLimit(min, defaultValue)) {
@@ -198,25 +181,24 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onUpdate(activeValue.current);
     }
   }, [onClick, min, max]);
-  /**
-   * END FUNCTION
+  /**
+   * END FUNCTION
    */
 
-  /**
-   * START COMPONENT
+  /**
+   * START COMPONENT
    */
-
   const tableMemo = jsx("div", {
     className: unique.table.container
   }, jsx("table", {
     className: unique.table.table,
     ref: tableRef
   }, renderHeader(unique), jsx("tbody", null)));
-  /**
-   * END COMPONENT
+  /**
+   * END COMPONENT
    */
-
-  return jsx("div", { ...props,
+  return jsx("div", {
+    ...props,
     className: [unique.container, className].join(' ').trim().replace(/\s+/g, ' '),
     css: generateCalendarCSS(unique),
     ref: ref
@@ -230,25 +212,18 @@ Calendar.defaultProps = {
 Calendar.propTypes = {
   /** the footer actions */
   actions: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
-
   /** class for calendar */
   className: PropTypes.string,
-
   /** the default value of the calendar */
   defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
-
   /** display days of previous or next month */
   displayAnotherMonth: PropTypes.bool,
-
   /** the last date that can be selected within the UI component. */
   max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
-
   /** the minimum date that can be selected within the UI component. */
   min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
-
   /** a callback function when click on a day of calendar */
   onClick: PropTypes.func,
-
   /** value of the calendar */
   value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array])
 };

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

@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
@@ -41,8 +41,8 @@ const CalendarRange = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [, setActiveValueTo] = useState(Date.now());
   const [, setNavigatorValueFr] = useState(Date.now());
   const [, setNavigatorValueTo] = useState(Date.now());
-  const [, setValues] = useState(Date.now()); // const [id] = useState(randomString(6, { allowSymbol: false }));
-
+  const [, setValues] = useState(Date.now());
+  // const [id] = useState(randomString(6, { allowSymbol: false }));
   const unique = {
     container: 'DGN-UI-Calendar-Range',
     divider: 'DGN-UI-Calendar-Range-Divider',
@@ -145,37 +145,32 @@ const CalendarRange = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } else {
       values.current.splice(0, 2, Date.parse(new Date(v)));
     }
-
     setValues();
   }, [values]);
-
   const onCalFrClick = e => {
     console.log(e.currentTarget.dataset.time);
   };
-
   const onCalToClick = e => {
     console.log(e.currentTarget.dataset.time);
   };
-
   const clearHovering = e => {
     const arr = Array.from(e.getElementsByTagName('td'));
-
     for (let i in arr) {
       arr[i].classList.remove('hover-start', 'hover-between', 'hover-end');
     }
   };
-
-  const onDayHover = () => {// const hoverTime = parseInt(e.target.dataset.time, 10);
+  const onDayHover = () => {
+    // const hoverTime = parseInt(e.target.dataset.time, 10);
     // console.log(hoverTime);
   };
-
   const onPickerHover = e => {
     if (e.target.tagName && e.target.tagName.toLowerCase() === 'td') {
       onDayHover(e);
     } else {
       clearHovering(e.currentTarget);
     }
-  }; // const onUpdateFrom = (value) => {
+  };
+  // const onUpdateFrom = (value) => {
   //     const newValue = new Date(value).setHours(0, 0, 0, 0);
   //     onUpdateActiveValueFr(newValue);
   //     onUpdateCalendar(newValue, navigatorFromRefs, min, max, tableFrRef.current, [activeValueFr.current, activeValueTo.current], unique.from, displayAnotherMonth, onCalFrClick, onUpdateNavigatorValueFr);
@@ -185,12 +180,9 @@ const CalendarRange = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   //     onUpdateActiveValueTo(newValue);
   //     onUpdateCalendar(newValue, navigatorToRefs, min, max, tableToRef.current, [activeValueFr.current, activeValueTo.current], unique.to, displayAnotherMonth, onCalToClick, onUpdateNavigatorValueTo);
   // };
-
-
   const onUpdateNavigatorValue = values => {
     const fr = new Date(values[0]);
     const to = new Date(values[1]);
-
     if (fr.getFullYear() === to.getFullYear() && fr.getMonth() === to.getMonth()) {
       onUpdateNavigatorValueFr(new Date(fr.getFullYear(), fr.getMonth()));
       onUpdateNavigatorValueTo(new Date(to.getFullYear(), to.getMonth() + 1));
@@ -199,7 +191,6 @@ const CalendarRange = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onUpdateNavigatorValueTo(new Date(to.getFullYear(), to.getMonth()));
     }
   };
-
   const onUpdateActiveValue = values => {
     if (values[1] && isValidDate(values[1])) {
       onUpdateValues(values[0], false);
@@ -214,14 +205,12 @@ const CalendarRange = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onUpdateActiveValueTo(values[1]);
     }
   };
-
   const onUpdate = array => {
     onUpdateActiveValue(array);
     onUpdateNavigatorValue(array);
     onUpdateCalendar(navigatorValueFr.current, navigatorFromRefs, min, max, tableFrRef.current, values.current, unique.from, displayAnotherMonth, onCalFrClick, onUpdateNavigatorValueFr);
     onUpdateCalendar(navigatorValueTo.current, navigatorToRefs, min, max, tableToRef.current, values.current, unique.to, displayAnotherMonth, onCalToClick, onUpdateNavigatorValueTo);
   };
-
   const calendarFrom = jsx("div", {
     className: unique.from.container,
     css: generateCalendarCSS(unique.from, false, false)
@@ -248,18 +237,18 @@ const CalendarRange = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {}; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
-  return jsx("div", { ...props,
+  return jsx("div", {
+    ...props,
     className: unique.container,
     onMouseOver: onPickerHover,
     css: containerCSS,
     ref: ref
-  }, calendarFrom, jsx(Divider, { ...dividerProps
+  }, calendarFrom, jsx(Divider, {
+    ...dividerProps
   }), calendarTo, actions);
 }));
 CalendarRange.defaultProps = {
@@ -270,22 +259,16 @@ CalendarRange.defaultProps = {
 CalendarRange.propTypes = {
   /** the footer actions */
   actions: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
-
   /** the default value of the calendar */
   defaultValue: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
-
   /** display days of previous or next month */
   displayAnotherMonth: PropTypes.bool,
-
   /** the last date that can be selected within the UI component. */
   max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
-
   /** the minimum date that can be selected within the UI component. */
   min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
-
   /** a callback function when click on a day of calendar */
   onClick: PropTypes.func,
-
   /** value of the calendar */
   value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array])
 };

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

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -7,26 +6,25 @@ import { forwardRef, memo, useEffect, useRef, useState, useImperativeHandle, Fra
 import { Typography } from "../..";
 import { itemsCenter, itemsStart, boxBorder, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative, cursorNoDrop, parseWidthHeight, border } from "../../../styles/general";
 import { classNames, randomString, refType as ref } from "../../../utils";
-import { color as colors } from "../../../styles/colors";
-import theme from "../../../theme/settings";
+import { useTheme, useColor as colors } from "../../../theme";
 const {
   colors: {
     system: {
       rest,
-      white
+      white,
+      disabled: systemDisabled
     },
     fill: {
       hover: clFillHover,
       pressed: clFillPressed
     },
-    disabled: clDisabled,
     formal2: clFormal2,
     semantic: {
       danger: clDanger
     }
   },
   spacing
-} = theme;
+} = useTheme();
 const padding = spacing(0.75);
 const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
@@ -55,29 +53,22 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!inputRef) {
     inputRef = useRef(null);
   }
-
   const ref = useRef(null);
   if (typeof width === 'number') width += 'px';
   const [checkedState, setCheckedState] = useState(checked || defaultChecked);
-
   if (!id) {
     [id] = useState('DGN-UI-' + randomString(10, {
       allowNumber: false,
       allowSymbol: false
     }));
   }
-
   const clMain = colors[color] || color;
-
   const _CheckBoxSquareCSS = CheckBoxSquareCSS(width, clMain);
-
   const _CheckBoxInputCSS = CheckBoxInputCSS(_CheckBoxSquareCSS.name, clMain);
-
   const handleChange = event => {
     stopPropagation && event.stopPropagation();
     if (readOnly || inputProps.readOnly || disabled || inputProps.disabled) return;
     const oldLogicChecked = inputRef.current.checked; //Use for TreeView
-
     if (forTreeView) {
       inputRef.current.checked = !oldLogicChecked; //Use for TreeView
     }
@@ -91,13 +82,11 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     };
     if (onChange) onChange(e, checkedState);
   };
-
   const setChecked = check => {
     if (typeof check === 'boolean') {
       setCheckedState(check);
     }
   };
-
   useEffect(() => {
     if (checked !== undefined) setCheckedState(Boolean(checked));
   }, [checked]);
@@ -110,15 +99,11 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       getChecked: () => checkedState,
       ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     currentRef.determinate = determinate;
     currentRef.setChecked = setChecked;
-
     currentRef.getChecked = () => checkedState;
-
     return currentRef;
   });
   return jsx("div", {
@@ -155,15 +140,14 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     style: {
       marginLeft: spacing(1)
     },
-    color: disabled ? clDisabled : '',
+    color: disabled ? systemDisabled : '',
     ...labelProps
   }, jsx(Fragment, null, children || label, required && jsx("span", {
     style: {
-      color: disabled ? clDisabled : clDanger
+      color: disabled ? systemDisabled : clDanger
     }
   }, "*"))))));
 }));
-
 const CheckBoxSquareCSS = (width, clMain) => css`
     ${flexRow};
     ${positionRelative};
@@ -222,7 +206,6 @@ const CheckBoxSquareCSS = (width, clMain) => css`
         ${cursorNoDrop};
     }
 `;
-
 const CheckBoxInputCSS = (CheckBoxSquareCSSName, clMain) => css`
     &:checked + label > span.css-${CheckBoxSquareCSSName} {
         &.determinate {
@@ -246,7 +229,7 @@ const CheckBoxInputCSS = (CheckBoxSquareCSSName, clMain) => css`
     &:checked:disabled {
         & + label > span.css-${CheckBoxSquareCSSName} {
             &:not(.indeterminate) {
-                background-color: ${clDisabled} !important;
+                background-color: ${systemDisabled} !important;
             }
             &.indeterminate {
                 background-color: ${clFormal2} !important;
@@ -256,11 +239,10 @@ const CheckBoxInputCSS = (CheckBoxSquareCSSName, clMain) => css`
     }
     &:disabled {
         & + label > span.css-${CheckBoxSquareCSSName} {
-            border-color: ${clDisabled};
+            border-color: ${systemDisabled};
         }
     }
 `;
-
 const CheckBoxLabelCSS = css`
     ${flexRow};
     ${positionRelative};
@@ -294,56 +276,40 @@ Checkbox.defaultProps = {
 Checkbox.propTypes = {
   /** If `true`, the component is checked. */
   checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([0, 1])]),
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** The main color of the component. ['primary', 'info', 'success', 'warning', 'danger', #hex, rgb(#, #, #)] */
   color: PropTypes.string,
-
   /** The default checked state. Use when the component is not controlled. */
   defaultChecked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([0, 1])]),
-
   /** If `true` display tick or indeterminate if `false`. */
   determinate: PropTypes.bool,
-
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-
   /** The id of the component. */
   id: PropTypes.string,
-
   /** [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. */
   inputProps: PropTypes.object,
-
   /** Pass a ref to the input element. */
   inputRef: ref,
-
   /** The name of the Radio is displayed on the interface. */
   label: PropTypes.string,
-
   /** [Props](https://core.diginet.com.vn/ui/?path=/docs/typography--title) applied to the `Typography` label. */
   labelProps: PropTypes.object,
-
   /** The name of the Checkbox corresponds to the label displayed on the interface. */
   name: PropTypes.string,
-
-  /**
-   * Callback fired when the state is changed.
-   *
-   * You can pull out the new checked state by accessing `event.value` or `event.target.checked` (boolean).
+  /**
+   * Callback fired when the state is changed.
+   *
+   * You can pull out the new checked state by accessing `event.value` or `event.target.checked` (boolean).
    */
   onChange: PropTypes.func,
-
   /** If `true`, the component is readonly. */
   readOnly: PropTypes.bool,
-
   /** If `true`, the label will indicate that the checkbox is required. */
   required: PropTypes.bool,
-
   /** The value of input */
   value: PropTypes.any,
-
   /** The width of checkbox. */
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };

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

@@ -1,11 +1,11 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
+
 import { forwardRef, memo, useImperativeHandle, useLayoutEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { displayBlock, pointerEventsNone, positionRelative, userSelectNone } from "../../../styles/general";
-import { color as colors } from "../../../styles/colors";
+import { useColor as colors } from "../../../theme";
 const {
   semantic: {
     danger
@@ -28,17 +28,14 @@ const Control = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (disabled) {
       ref.current.classList.add(classes.disabled);
     }
-
     if (!disabled && error) {
       ref.current.classList.add(classes.error);
       ref.current.querySelector('div.DGN-UI-InputBase').classList.add('danger');
     }
-
     return () => {
       if (disabled) {
         ref.current.classList.remove(classes.disabled);
       }
-
       if (!disabled && error) {
         ref.current.classList.remove(classes.error);
         ref.current.querySelector('div.DGN-UI-InputBase').classList.remove('danger');
@@ -48,20 +45,18 @@ const Control = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {}; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
-  return jsx("div", { ...props,
+  return jsx("div", {
+    ...props,
     className: ['DGN-UI-Control', className].join(' ').trim().replace(/\s+/g, ' '),
     css: controlRootCSS(classes),
     style: style,
     ref: ref
   }, children);
 }));
-
 const controlRootCSS = classes => css`
     ${displayBlock}
     ${positionRelative}
@@ -76,7 +71,6 @@ const controlRootCSS = classes => css`
         }
     }
 `;
-
 Control.defaultProps = {
   className: '',
   style: {},
@@ -86,16 +80,12 @@ Control.defaultProps = {
 Control.propTypes = {
   /** children of the form control */
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.node]).isRequired,
-
   /** the class for the form control */
   className: PropTypes.string,
-
   /** prevent all event if true, hide all icon */
   disabled: PropTypes.bool,
-
   /** error for input */
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /** style of the component */
   style: PropTypes.object
 };