diginet-core-ui 1.3.88 → 1.3.89

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;

package/components/form-control/date-picker/index.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';
@@ -26,11 +26,9 @@ const {
 } = theme;
 const confirmText = getGlobal(['confirm']);
 const cancelText = getGlobal(['cancel']);
-
 const formatValue = (value, format, utc = false) => {
   return moment(value).format(format, utc);
 };
-
 const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   actionIconAt,
   clearAble,
@@ -60,7 +58,6 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   ...props
 }, reference) => {
   var _ipRef$current, _ipRef$current2;
-
   const [id] = useState(randomString(6, {
     allowSymbol: false
   }));
@@ -87,9 +84,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [, setDisplayValue] = useState(Date.now());
   const [, setFocusedValue] = useState(Date.now());
   const [value, setValue] = useState(valueProp || defaultValue);
-
   const _IconAreaCSS = IconAreaCSS(unique);
-
   const handleDisplayValue = useCallback(value => {
     displayValue.current = new Date(value);
     setDisplayValue();
@@ -98,14 +93,12 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     focusedValue.current = new Date(value);
     setFocusedValue();
   }, [focusedValue]);
-
   const setButtonState = () => {
     if (!footerRef.current || focusedValue.current === undefined || !isValidDate(focusedValue.current)) return;
     const isEqual = focusedValue.current === null || Date.parse(new Date(focusedValue.current)) === Date.parse(new Date(displayValue.current));
     footerRef.current.querySelector(`.${unique.cancel}`).disabled = isEqual;
     footerRef.current.querySelector(`.${unique.confirm}`).disabled = isEqual;
   };
-
   const onConfirm = () => {
     displayValue.current = focusedValue.current;
     setButtonState();
@@ -114,35 +107,29 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     });
     closePicker();
   };
-
   const onCancel = () => {
     focusedValue.current = null;
     setButtonState();
     closePicker();
   };
-
   const setInputValue = e => {
     ipRef.current.value = capitalizeSentenceCase(formatValue(e.value, displayFormat));
     if (clearAble) onSwap(false);
   };
-
   const onChangeValue = e => {
     if (valueProp) {
       closePicker();
     } else {
       setValue(e.value);
     }
-
     !!onChange && onChange({
       value: formatValue(e.value, returnFormat)
     });
   };
-
   const onCalendarClick = e => {
     handleFocusedValue(e.value);
     controls ? setButtonState() : onChangeValue(e);
   };
-
   const getPickerStyle = () => {
     const {
       innerHeight,
@@ -158,16 +145,15 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     let style = {};
     style.top = top + height + 4;
     style.transformOrigin = '50% 20%';
-
     if (style.top + pickerHeight > innerHeight) {
       if (top - pickerHeight > 0) {
         style.top = top - pickerHeight - 4;
         style.transformOrigin = '50% 80%';
       }
     }
-
     return PickerCSS.picker(style, left + 400 > innerWidth ? innerWidth - 400 : left, width).styles;
-  }; // const createPortal = () => {
+  };
+  // const createPortal = () => {
   //     let portal = document.getElementById(unique.portal);
   //     if (!portal) {
   //         portal = document.createElement('div');
@@ -177,29 +163,23 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   //     portal.style.cssText = pickerCSS.portal;
   //     return portal;
   // };
-
-
   const createBackground = () => {
     let background = document.getElementById(unique.backGr);
-
     if (!background) {
       background = document.createElement('div');
       background.id = unique.backGr;
       background.classList.add(unique.portal, unique.backGr);
       document.body.appendChild(background);
     }
-
     background.style.cssText = PickerCSS.backGr;
     return background;
   };
-
   const createPicker = () => {
     const picker = document.createElement('div');
     picker.id = unique.picker;
     picker.style.cssText = getPickerStyle();
     return picker;
   };
-
   const pressESCHandler = event => {
     if (event.key === 'Escape' || event.key === 'Tab') {
       onClickOutside({
@@ -207,32 +187,25 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     }
   };
-
   const onScroll = () => {
     const node = document.getElementById(unique.picker);
-
     if (!ipConRef.current || !node) {
       window.removeEventListener('scroll', onScroll);
       return;
     }
-
     updatePosition(ipConRef.current, node, closePicker);
   };
-
   const onResize = () => {
     if (!ref.current) return;
     const {
       width
     } = ref.current.getBoundingClientRect();
     const node = document.getElementById(unique.picker);
-
     if (node) {
       node.style.width = width + 'px';
     }
-
     onScroll();
   };
-
   const openPicker = () => {
     const backGr = createBackground();
     const picker = createPicker();
@@ -247,47 +220,43 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: onCalendarClick
     }), backGr.appendChild(picker));
     setTimeout(() => {
-      Object.assign(picker.style, { ...PickerCSS.active
+      Object.assign(picker.style, {
+        ...PickerCSS.active
       });
       window.addEventListener('resize', onResize);
       window.addEventListener('scroll', onScroll);
       document.addEventListener('mousedown', onClickOutside);
-
       if (pressESCToClose) {
         document.addEventListener('keydown', pressESCHandler);
       }
-
       setButtonState();
     });
   };
-
   const closePicker = () => {
     const backGr = document.getElementById(unique.backGr);
     if (!backGr) return;
     const picker = backGr.querySelector(`#${unique.picker}`);
     if (!picker) return;
-    Object.assign(picker.style, { ...PickerCSS.remove
+    Object.assign(picker.style, {
+      ...PickerCSS.remove
     });
-
     if (pressESCToClose) {
       document.removeEventListener('keydown', pressESCHandler);
     }
-
     document.removeEventListener('mousedown', onClickOutside);
     window.removeEventListener('scroll', onScroll);
     window.removeEventListener('resize', onResize);
     setTimeout(() => {
       backGr.remove();
     }, 200);
-
     if (ipConRef.current) {
       ipConRef.current.classList.remove(unique.focus);
       ipConRef.current.style.zIndex = null;
-    } // iconRef.current && onSwap(true);
-
-
+    }
+    // iconRef.current && onSwap(true);
     ipRef.current && ipRef.current.blur();
-  }; // const updatePicker = () => {
+  };
+  // const updatePicker = () => {
   //     const portal = document.body.querySelector(`#${unique.portal}`);
   //     if (!portal) return;
   //     const backGr = portal.querySelector(`#${unique.backGr}`);
@@ -307,46 +276,43 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   //             onClick={onCalendarClick}
   //         />, node);
   // };
-
-
   const onSwap = open => {
     const t = iconRef.current.childNodes[+open];
-
     if (open) {
-      Object.assign(t.style, { ...hiddenStyle
+      Object.assign(t.style, {
+        ...hiddenStyle
       });
-      Object.assign(t.previousSibling.style, { ...activeStyle
+      Object.assign(t.previousSibling.style, {
+        ...activeStyle
       });
       setTimeout(() => {
         t.previousSibling.style.pointerEvents = null;
       }, 200);
     } else {
-      Object.assign(t.style, { ...hiddenStyle
+      Object.assign(t.style, {
+        ...hiddenStyle
       });
-      Object.assign(t.nextSibling.style, { ...activeStyle
+      Object.assign(t.nextSibling.style, {
+        ...activeStyle
       });
       setTimeout(() => {
         t.nextSibling.style.pointerEvents = null;
       }, 200);
     }
   };
-
   const onInputFocus = () => {
     const el = ipConRef.current;
-
     if (!el.classList.contains(unique.focus)) {
       el.classList.add(unique.focus);
       el.style.zIndex = zIndexCORE(2);
       openPicker();
     }
   };
-
   const onClickOutside = e => {
     if (ipConRef.current && !ipConRef.current.contains(e.target) && ipRef.current && !ipRef.current.contains(e.target) && calRef.current && !calRef.current.contains(e.target)) {
       controls ? onCancel() : closePicker();
     }
   };
-
   const triggerFocus = () => {
     if (!ipConRef.current.classList.contains(unique.focus)) {
       ipRef.current.focus();
@@ -356,7 +322,6 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     }
   };
-
   const onClear = () => {
     if (!clearAble && !ipRef.current) return;
     ipRef.current.value = '';
@@ -368,7 +333,6 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     !!onChange && onChange(e);
     onSwap(true);
   };
-
   const iconComp = jsx("div", {
     css: _IconAreaCSS,
     ref: iconRef
@@ -409,7 +373,6 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         value: displayValue.current
       });
     }
-
     return () => {
       closePicker();
     };
@@ -433,11 +396,9 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       closePicker();
     } else {
       if (ipRef.current) ipRef.current.value = '';
-
       if (clearAble) {
         onSwap(true);
       }
-
       setButtonState();
       closePicker();
     }
@@ -449,10 +410,8 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (!readOnly) {
       ipRef.current.addEventListener('focus', onInputFocus);
     }
-
     return () => {
       if (!ipRef.current) return;
-
       if (!readOnly) {
         ipRef.current.removeEventListener('focus', onInputFocus);
       }
@@ -465,7 +424,6 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       };
       setInputValue(e, displayFormat);
     }
-
     if (disabled) {
       iconRef.current.childNodes[0].style.pointerEvents = 'none';
       closePicker();
@@ -475,10 +433,8 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       iconRef.current.childNodes[0].style.pointerEvents = 'none';
       closePicker();
     }
-
     return () => {
       if (!iconRef.current || !ipRef.current) return;
-
       if (disabled) {
         iconRef.current.childNodes[0].style.pointerEvents = null;
       } else if (!readOnly) {
@@ -486,7 +442,6 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       } else {
         iconRef.current.childNodes[0].style.pointerEvents = null;
       }
-
       closePicker();
     };
   }, [actionIconAt, clearAble, controls, disabled, displayFormat, displayAnotherMonth, max, min, readOnly, returnFormat, viewType]);
@@ -509,24 +464,17 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         return iconRef.current;
       }
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
-
     currentRef.get = () => ref.current;
-
     currentRef.getInputContainer = () => ipConRef.current;
-
     currentRef.getInput = () => ipRef.current;
-
     currentRef.getCalendar = () => calRef.current;
-
     currentRef.getIcon = () => iconRef.current;
-
     return currentRef;
   });
-  return jsx(ControlComp, { ...props,
+  return jsx(ControlComp, {
+    ...props,
     disabled: disabled,
     error: isError,
     ref: ref,
@@ -554,7 +502,8 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     endIcon: endIcon,
     onKeyDown: e => e.preventDefault(),
     readOnly: true
-  })), isError && jsx(HelperText, { ...errorProps,
+  })), isError && jsx(HelperText, {
+    ...errorProps,
     style: {
       minHeight: 16,
       position: 'absolute',
@@ -572,7 +521,6 @@ const activeStyle = {
   pointerEvents: 'none',
   display: 'block'
 };
-
 const IconAreaCSS = unique => css`
     ${flexRow};
     ${itemsCenter};
@@ -589,7 +537,6 @@ const IconAreaCSS = unique => css`
         opacity: 1;
     }
 `;
-
 const ControlContainerCSS = css`
     ${flexRow};
     ${justifyEnd};
@@ -640,73 +587,50 @@ DatePicker.defaultProps = {
 DatePicker.propTypes = {
   /** Action icons position. */
   actionIconAt: PropTypes.oneOf(['end', 'start']),
-
   /** Display the clear icon if true. */
   clearAble: PropTypes.bool,
-
   /** If `true`, the calendar will have a footer controls. */
   controls: PropTypes.bool,
-
   /** The default value of the component. */
   defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
-
   /** If `true`, the form control will be disabled. */
   disabled: PropTypes.bool,
-
   /** Format to display value. */
   displayFormat: PropTypes.oneOfType([PropTypes.oneOf(['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY', 'MM-DD-YYYY', 'YYYY-MM-DD']), PropTypes.string]),
-
   /** View days of previous or next month. */
   displayAnotherMonth: PropTypes.bool,
-
   /** Error of the form control. */
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /** InputProps are properties of the input element. */
   inputProps: PropTypes.object,
-
   /** InputStyle is style of input element. */
   inputStyle: PropTypes.object,
-
   /** Content of the label element. */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
   /** LabelProps are properties if the label element. */
   labelProps: PropTypes.object,
-
   /** Min value of date picker. */
   min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
-
   /** Max value of date picker. */
   max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
-
   /** A callback function when value input change. */
   onChange: PropTypes.func,
-
   /** Hints for input. */
   placeholder: PropTypes.string,
-
   /** Allow close Popup when press ESC. */
   pressESCToClose: PropTypes.bool,
-
   /** Status read only of input. */
   readOnly: PropTypes.bool,
-
   /** Required state of the form control. */
   required: PropTypes.bool,
-
   /** Format of the returned value. */
   returnFormat: PropTypes.oneOfType([PropTypes.oneOf(['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY', 'MM-DD-YYYY', 'YYYY-MM-DD']), PropTypes.string]),
-
   /** Style inline of component. */
   style: PropTypes.object,
-
   /** Text align of the input. */
   textAlign: PropTypes.oneOf(['center', 'end', 'start']),
-
   /** Value of the component. */
   value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array, PropTypes.object]),
-
   /** View type of the form control. */
   viewType: PropTypes.oneOf(['outlined', 'underlined'])
 };