diginet-core-ui 1.3.78 → 1.3.79

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';
@@ -55,29 +54,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 +83,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 +100,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", {
@@ -163,7 +149,6 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   }, "*"))))));
 }));
-
 const CheckBoxSquareCSS = (width, clMain) => css`
     ${flexRow};
     ${positionRelative};
@@ -222,7 +207,6 @@ const CheckBoxSquareCSS = (width, clMain) => css`
         ${cursorNoDrop};
     }
 `;
-
 const CheckBoxInputCSS = (CheckBoxSquareCSSName, clMain) => css`
     &:checked + label > span.css-${CheckBoxSquareCSSName} {
         &.determinate {
@@ -260,7 +244,6 @@ const CheckBoxInputCSS = (CheckBoxSquareCSSName, clMain) => css`
         }
     }
 `;
-
 const CheckBoxLabelCSS = css`
     ${flexRow};
     ${positionRelative};
@@ -294,56 +277,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,6 +1,6 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
+
 import { forwardRef, memo, useImperativeHandle, useLayoutEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -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
 };

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

@@ -7,6 +7,7 @@
 // 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);
 // };
@@ -35,8 +36,10 @@
 // 		}
 // 	}
 // 	// if (/^(mm|MM)[\/\-](dd|DD)[\/\-]((y|Y){4})$/.test(format)) {
+
 // 	// }
 // 	// if (/^((y|Y){4})[\/\-](mm|MM)[\/\-](dd|DD)$/.test(format)) {
+
 // 	// }
 // };
 // // const cutPX = (x) => {
@@ -46,6 +49,7 @@
 // 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 = {
@@ -69,6 +73,7 @@
 // 	const inputContainerRef = useRef(null);
 // 	const nowDate 			= !isNaN(Date.parse(defaultValue)) ? new Date(defaultValue) : new Date();
 // 	useOnClickOutside(inputContainerRef, () => onClickOutside());
+
 // 	const styles = {
 // 		container: css`
 // 			* {
@@ -520,6 +525,7 @@
 // 			}
 // 		`,
 // 	};
+
 // 	const getScrollParent = element => {
 //         const style = getComputedStyle (element);
 //         let scrollParent = window;
@@ -544,6 +550,7 @@
 // 			return;
 // 		}
 // 		const { bottom, left, top } = target.getBoundingClientRect();
+
 // 		if (top > window.innerHeight) {
 // 			el.style.top             = null;
 //             el.style.bottom          = '5px';
@@ -613,6 +620,7 @@
 // 		const lastDayIndex    = changeDayOfWeek(lastTime);
 // 		const firstDayIndex   = changeDayOfWeek(date);
 // 		const daysOfNextMonth = 7 - lastDayIndex;
+
 // 		let days = [];
 // 		let x = firstDayIndex;
 // 		for (x; x > 0; x--) {
@@ -622,6 +630,7 @@
 // 			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()) {
@@ -636,7 +645,9 @@
 // 			} 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++){
@@ -656,6 +667,7 @@
 // 		}
 // 		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));
 // 			});
@@ -817,13 +829,16 @@
 // 			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));
@@ -843,6 +858,7 @@
 // 	useEffect(() => {
 // 		renderCalendar(nowDate)
 // 	}, [size]);
+
 // 	const RequireMemo = useMemo(() => ( required && <span css={styles.require}>*</span> ), [error, required]);
 // 	const LabelMemo = useMemo(() => (
 // 		<label css={styles.label} disabled={disabled}>
@@ -906,6 +922,7 @@
 // 			{CalendarMemo}
 // 		</div>
 // 	), [defaultValue, disabled, error, size, viewType]);
+
 // 	return (
 // 		<div {...props} css={styles.container} ref={ref}>
 // 			{LabelMemo}
@@ -948,4 +965,5 @@
 //     /** view type of the form control */
 // 	viewType     : PropTypes.oneOf(['outlined', 'underlined']),
 // };
+
 // export default DatePicker;