diginet-core-ui 1.3.87 → 1.3.88

package/components/form-control/date-picker/index.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';
@@ -26,9 +26,11 @@ 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,
@@ -58,6 +60,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   ...props
 }, reference) => {
   var _ipRef$current, _ipRef$current2;
+
   const [id] = useState(randomString(6, {
     allowSymbol: false
   }));
@@ -84,7 +87,9 @@ 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();
@@ -93,12 +98,14 @@ 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();
@@ -107,29 +114,35 @@ 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,
@@ -145,15 +158,16 @@ 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');
@@ -163,23 +177,29 @@ 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({
@@ -187,25 +207,32 @@ 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();
@@ -220,43 +247,47 @@ 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}`);
@@ -276,43 +307,46 @@ 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();
@@ -322,6 +356,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     }
   };
+
   const onClear = () => {
     if (!clearAble && !ipRef.current) return;
     ipRef.current.value = '';
@@ -333,6 +368,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     !!onChange && onChange(e);
     onSwap(true);
   };
+
   const iconComp = jsx("div", {
     css: _IconAreaCSS,
     ref: iconRef
@@ -373,6 +409,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         value: displayValue.current
       });
     }
+
     return () => {
       closePicker();
     };
@@ -396,9 +433,11 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       closePicker();
     } else {
       if (ipRef.current) ipRef.current.value = '';
+
       if (clearAble) {
         onSwap(true);
       }
+
       setButtonState();
       closePicker();
     }
@@ -410,8 +449,10 @@ 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);
       }
@@ -424,6 +465,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       };
       setInputValue(e, displayFormat);
     }
+
     if (disabled) {
       iconRef.current.childNodes[0].style.pointerEvents = 'none';
       closePicker();
@@ -433,8 +475,10 @@ 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) {
@@ -442,6 +486,7 @@ 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]);
@@ -464,17 +509,24 @@ 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,
@@ -502,8 +554,7 @@ 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',
@@ -521,6 +572,7 @@ const activeStyle = {
   pointerEvents: 'none',
   display: 'block'
 };
+
 const IconAreaCSS = unique => css`
     ${flexRow};
     ${itemsCenter};
@@ -537,6 +589,7 @@ const IconAreaCSS = unique => css`
         opacity: 1;
     }
 `;
+
 const ControlContainerCSS = css`
     ${flexRow};
     ${justifyEnd};
@@ -587,50 +640,73 @@ 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'])
 };