diginet-core-ui 1.3.87 → 1.3.88

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

@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */
-/** @jsx jsx */
 
+/** @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,13 +61,14 @@ 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();
@@ -76,15 +77,18 @@ 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 => {
@@ -93,57 +97,70 @@ 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
+  /**
+   * END FUNCTION
    */
 
-  /**
-   * START EFFECT
+  /**
+   * START EFFECT
    */
+
+
   useEffect(() => {
     if (defaultValue && defaultValue !== '' && isValidDate(defaultValue)) {
       if (isBeforeLimit(min, defaultValue)) {
@@ -181,24 +198,25 @@ 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
@@ -212,18 +230,25 @@ 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 */
 
+/** @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,32 +145,37 @@ 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);
@@ -180,9 +185,12 @@ 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));
@@ -191,6 +199,7 @@ 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);
@@ -205,12 +214,14 @@ 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)
@@ -237,18 +248,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 = {
@@ -259,16 +270,22 @@ 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,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -54,22 +55,29 @@ 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
     }
@@ -83,11 +91,13 @@ 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]);
@@ -100,11 +110,15 @@ 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", {
@@ -149,6 +163,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   }, "*"))))));
 }));
+
 const CheckBoxSquareCSS = (width, clMain) => css`
     ${flexRow};
     ${positionRelative};
@@ -207,6 +222,7 @@ const CheckBoxSquareCSS = (width, clMain) => css`
         ${cursorNoDrop};
     }
 `;
+
 const CheckBoxInputCSS = (CheckBoxSquareCSSName, clMain) => css`
     &:checked + label > span.css-${CheckBoxSquareCSSName} {
         &.determinate {
@@ -244,6 +260,7 @@ const CheckBoxInputCSS = (CheckBoxSquareCSSName, clMain) => css`
         }
     }
 `;
+
 const CheckBoxLabelCSS = css`
     ${flexRow};
     ${positionRelative};
@@ -277,40 +294,56 @@ 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,6 +1,6 @@
 /** @jsxRuntime classic */
-/** @jsx jsx */
 
+/** @jsx jsx */
 import { forwardRef, memo, useImperativeHandle, useLayoutEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -28,14 +28,17 @@ 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');
@@ -45,18 +48,20 @@ 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}
@@ -71,6 +76,7 @@ const controlRootCSS = classes => css`
         }
     }
 `;
+
 Control.defaultProps = {
   className: '',
   style: {},
@@ -80,12 +86,16 @@ 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
 };

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

@@ -7,7 +7,6 @@
 // import { randomString, useOnClickOutside } from '../../../utils';
 // import { blue4, blue13, brand, danger5, danger8, dark, dark4, dark6, dark8, info5, info8, success5, white } from '../../../styles/colors';
 // // import CalendarNavigator from './calendar-navigator'
-
 // const getElById = (id) => {
 // 	return document.getElementById(id);
 // };
@@ -36,10 +35,8 @@
 // 		}
 // 	}
 // 	// if (/^(mm|MM)[\/\-](dd|DD)[\/\-]((y|Y){4})$/.test(format)) {
-
 // 	// }
 // 	// if (/^((y|Y){4})[\/\-](mm|MM)[\/\-](dd|DD)$/.test(format)) {
-
 // 	// }
 // };
 // // const cutPX = (x) => {
@@ -49,7 +46,6 @@
 // const weekdaysShort = ['H', 'B', 'T', 'N', 'S', 'B', 'CN'];
 // const months = ['tháng 01', 'tháng 02', 'tháng 03', 'tháng 04', 'tháng 05', 'tháng 06', 'tháng 07', 'tháng 08', 'tháng 09', 'tháng 10', 'tháng 11', 'tháng 12'];
 // const validateAlert = 'Invalidate value';
-
 // const DatePicker = memo(forwardRef(({defaultValue, disabled, error, helperInvalid, helperValid, inputProps, inputRef, label, onChange, required, size, viewType, ...props}, ref) => {
 // 	const Id = randomString(7, { allowSymbol: false, allowNumber: false });
 // 	const IDs = {
@@ -73,7 +69,6 @@
 // 	const inputContainerRef = useRef(null);
 // 	const nowDate 			= !isNaN(Date.parse(defaultValue)) ? new Date(defaultValue) : new Date();
 // 	useOnClickOutside(inputContainerRef, () => onClickOutside());
-
 // 	const styles = {
 // 		container: css`
 // 			* {
@@ -525,7 +520,6 @@
 // 			}
 // 		`,
 // 	};
-
 // 	const getScrollParent = element => {
 //         const style = getComputedStyle (element);
 //         let scrollParent = window;
@@ -550,7 +544,6 @@
 // 			return;
 // 		}
 // 		const { bottom, left, top } = target.getBoundingClientRect();
-
 // 		if (top > window.innerHeight) {
 // 			el.style.top             = null;
 //             el.style.bottom          = '5px';
@@ -620,7 +613,6 @@
 // 		const lastDayIndex    = changeDayOfWeek(lastTime);
 // 		const firstDayIndex   = changeDayOfWeek(date);
 // 		const daysOfNextMonth = 7 - lastDayIndex;
-
 // 		let days = [];
 // 		let x = firstDayIndex;
 // 		for (x; x > 0; x--) {
@@ -630,7 +622,6 @@
 // 			else {
 // 				days.push(`<td id='${IDs.daysOfPrevMonth + '-' + (prevLastDay - x + 1)}' class='days-of-month prev-date'>${prevLastDay - x + 1}</td>`);
 // 			}
-
 // 		}
 // 		for (let i = 1; i <= lastDay; i++) {
 // 			if (i === new Date().getDate() && date.getMonth() === new Date().getMonth() && date.getFullYear() === new Date().getFullYear()) {
@@ -645,9 +636,7 @@
 // 			} else {
 // 				days.push(`<td id='${IDs.daysOfNextMonth + '-' + j}' class='days-of-month next-date'>${j}</td>`);
 // 			}
-
 // 		}
-
 // 		let table = '';
 // 		table += '<tr>';
 // 		for (let i = 0; i < weekdaysLong.length; i++){
@@ -667,7 +656,6 @@
 // 		}
 // 		monthDays.innerHTML = table;
 // 		header.innerHTML = size === 'medium' ? `${months[date.getMonth()]} năm ${date.getFullYear()}` : addZeroToText(date.getMonth() + 1) + '/' + date.getFullYear();
-
 // 		monthDays.querySelectorAll('.days-of-month.this-month').forEach((dc) => {
 // 				dc.addEventListener('click', (e) => setActiveDay(e, date));
 // 			});
@@ -829,16 +817,13 @@
 // 			getElById(`${IDs.daysOfThisMonth + '-' + defaultTime.getDate()}`).classList.add('day-active');
 // 		}
 // 	};
-
 // 	useEffect(() => {
 // 		const input      = inputRef.current;
 // 		const container  = ref.current;
 // 		const scrollArea = getScrollParent(container);
-
 // 		setPosition();
 // 		renderCalendar(nowDate);
 // 		checkDefaultValue(nowDate, input);
-
 // 		scrollArea.addEventListener('scroll', setPosition);
 // 		window.addEventListener('resize', setPosition);
 // 		document.addEventListener('keydown', e => escKeyFunc(e));
@@ -858,7 +843,6 @@
 // 	useEffect(() => {
 // 		renderCalendar(nowDate)
 // 	}, [size]);
-
 // 	const RequireMemo = useMemo(() => ( required && <span css={styles.require}>*</span> ), [error, required]);
 // 	const LabelMemo = useMemo(() => (
 // 		<label css={styles.label} disabled={disabled}>
@@ -922,7 +906,6 @@
 // 			{CalendarMemo}
 // 		</div>
 // 	), [defaultValue, disabled, error, size, viewType]);
-
 // 	return (
 // 		<div {...props} css={styles.container} ref={ref}>
 // 			{LabelMemo}
@@ -965,5 +948,4 @@
 //     /** view type of the form control */
 // 	viewType     : PropTypes.oneOf(['outlined', 'underlined']),
 // };
-
 // export default DatePicker;