diginet-core-ui 1.3.87 → 1.3.88

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

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -13,13 +14,16 @@ import { useTheme } from "../../../theme";
 const {
   zIndex
 } = useTheme();
+
 const formatDimension = x => {
   const regexPercent = /^\d+%$/;
   const regexPixel = /^\d+px$/;
+
   if (isNaN(x)) {
     if (regexPercent.test(x)) {
       return x;
     }
+
     if (regexPixel.test(x)) {
       return +x.split('px')[0];
     }
@@ -27,6 +31,7 @@ const formatDimension = x => {
     return x;
   }
 };
+
 const addZero = i => {
   if (isNaN(i) && +i < 10) {
     return `0${parseInt(i, 10)}`;
@@ -35,36 +40,45 @@ const addZero = i => {
   } else {
     return i;
   }
-};
-//array data
+}; //array data
+
+
 const getHours = () => {
   let hours = [],
-    i = 0;
+      i = 0;
+
   for (i; i < 24; i++) {
     hours.push({
       value: i,
       text: i
     });
   }
+
   return hours;
 };
+
 const getMinutes = () => {
   let minutes = [],
-    i = 0;
+      i = 0;
+
   for (i; i < 60; i++) {
     minutes.push({
       value: i,
       text: i
     });
   }
+
   return minutes;
 };
+
 const checkValue = value => {
   if (!isNaN(Date.parse(value))) {
     return true;
   }
+
   return false;
 };
+
 const getValue = value => {
   if (typeof value === 'string') {
     const date = new Date();
@@ -73,11 +87,14 @@ const getValue = value => {
     date.setHours(...value);
     value = date;
   }
+
   if (checkValue(value)) {
     return new Date(value);
   }
+
   return new Date();
 };
+
 const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   activeHeight,
   activeWidth,
@@ -107,12 +124,15 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     main: 'DCUI-time-picker-main' + Id,
     label: 'DCUI-time-picker-label' + Id
   };
+
   if (!ref) {
     ref = useRef(null);
   }
+
   if (!inputRef) {
     inputRef = useRef(null);
   }
+
   const mainRef = useRef(null);
   const clockContainerRef = useRef(null);
   const swiperWrapperHoursRef = useRef(null);
@@ -439,11 +459,13 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     `
     }
   };
+
   const updateValue = value => {
     const time = getValue(value);
     values = [addZero(time.getHours()), addZero(time.getMinutes()), addZero(time.getSeconds())];
     setInputValue(values);
   };
+
   const getDefaultValue = () => {
     if (value && checkValue(value)) {
       return new Date(value);
@@ -453,21 +475,26 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       return null;
     }
   };
+
   const escKeyFunc = ev => {
     //call the useOnClickOutside when press esc key
     if (ev.keyCode === 27) {
-      onBlur();
-      // eslint-disable-next-line no-undef
+      onBlur(); // eslint-disable-next-line no-undef
+
       inputContainerRef.current.childNodes[0].blur();
     }
   };
+
   const getScrollParent = element => {
     const style = getComputedStyle(element);
     let scrollParent = window;
+
     if (style.position !== 'fixed') {
       let parent = element.parentElement;
+
       while (parent) {
         const parentStyle = getComputedStyle(parent);
+
         if (/(auto|scroll)/.test(parentStyle.overflow + parentStyle.overflowY + parentStyle.overflowX)) {
           scrollParent = parent;
           parent = undefined;
@@ -476,19 +503,24 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }
     }
+
     return scrollParent;
   };
+
   const setPositionClock = () => {
     const clock = clockContainerRef.current;
     const container = ref.current;
+
     if (!clock || !container) {
       return;
     }
+
     const {
       bottom,
       left,
       top
     } = container.getBoundingClientRect();
+
     if (top > window.innerHeight) {
       clock.style.top = 'auto';
       clock.style.bottom = '5px';
@@ -514,6 +546,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         clock.style.transformOrigin = 'top left';
       }
     }
+
     if (left < 0) {
       clock.style.left = '5px';
     } else if (left + activeWidth > window.innerWidth) {
@@ -522,71 +555,84 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       clock.style.left = left + 'px';
     }
   };
+
   const setInputValue = values => {
     if (!inputRef.current) return;
     const input = inputRef.current;
+
     if (allowSeconds) {
       input.value = values[0] + ':' + values[1] + ':' + values[2];
     } else {
       input.value = values[0] + ':' + values[1] + ':00';
     }
+
     if (onChange) onChange(input);
   };
+
   const onFocus = () => {
     document.body.style.overflow = 'hidden';
     mainRef.current.classList.add('focused');
     setPositionClock();
   };
+
   const onBlur = () => {
     mainRef.current.classList.remove('focused');
     inputRef.current.blur();
     document.body.style.overflow = null;
   };
+
   const onOpen = () => {
     inputRef.current.focus();
   };
+
   const onClose = () => onBlur();
-  useOnClickOutside(ref, onBlur);
 
-  // const validateValue = (text) => {
+  useOnClickOutside(ref, onBlur); // const validateValue = (text) => {
   // 	const timeRegex = /^(0?[0-9]|1[0-9]|2[0-3])(:(0?[0-9]|[1-5][0-9]))?(:(0?[0-9]|[1-5][0-9]))$/;
   // 	if (timeRegex.test(text)) return true;
   // 	return false;
   // };
+
   const validateKeyboard = e => {
     if (!/[0-9:]/.test(e.key)) {
       e.preventDefault();
     }
   };
+
   const setInputHour = e => {
     if (!inputRef.current) return;
     values = inputRef.current.value.split(':');
     values.splice(0, 1, addZero(e.text));
     setInputValue(values);
   };
+
   const setInputMinute = e => {
     if (!inputRef.current) return;
     values = inputRef.current.value.split(':');
     values.splice(1, 1, addZero(e.text));
     setInputValue(values);
   };
+
   const setInputSecond = e => {
     if (!inputRef.current) return;
     values = inputRef.current.value.split(':');
     values.splice(2, 1, addZero(e.text));
     setInputValue(values);
   };
+
   useEffect(() => {
     const parent = ref.current;
     const scrollParent = getScrollParent(parent);
+
     if (defaultValue) {
       updateValue(defaultValue);
     } else {
       inputRef.current.value = '';
-    }
-    // if (value) {
+    } // if (value) {
     // 	updateValue(value);
     // }
+
+
     window.addEventListener('resize', setPositionClock);
     document.addEventListener('keydown', e => escKeyFunc(e));
     scrollParent.addEventListener('scroll', setPositionClock);
@@ -611,6 +657,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref.current.disabled = true;
       ref.current.classList.add('disabled');
     }
+
     return () => {
       if (ref.current) {
         ref.current.disabled = false;
@@ -622,6 +669,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (error && error !== '') {
       mainRef.current.classList.add('error');
     }
+
     return () => {
       !!mainRef.current && mainRef.current.classList.remove('error');
     };
@@ -636,8 +684,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     id: IDs.label,
     htmlFor: IDs.inputTypeText
   }, label), RequireMemo), [label, required, error, disabled]);
-  const InputMemo = useMemo(() => jsx("input", {
-    ...inputProps,
+  const InputMemo = useMemo(() => jsx("input", { ...inputProps,
     css: styles.input[viewType],
     disabled: disabled,
     id: IDs.inputTypeText,
@@ -715,8 +762,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: styles.main[viewType],
     ref: mainRef
   }, InputMemo, IconMemo, ErrorMemo), [activeHeight, activeWidth, allowSeconds, defaultValue, disabled, error, value, viewType]);
-  return jsx("div", {
-    ...props,
+  return jsx("div", { ...props,
     css: styles.container[viewType],
     ref: ref
   }, LabelMemo, MainMemo, ClockMemo);
@@ -732,26 +778,37 @@ TimePicker.defaultProps = {
 TimePicker.propTypes = {
   /** height of the clock when display */
   activeHeight: PropTypes.number,
+
   /** width of the clock when display */
   activeWidth: PropTypes.number,
+
   /** allow second field on clock */
   allowSeconds: PropTypes.bool,
+
   /** the default value when the clock is open */
   defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+
   /** if 'true' the form control will be disabled */
   disabled: PropTypes.bool,
+
   /** error of the form control */
   error: PropTypes.string,
+
   /** label of the form control */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
   /** properties of the input element */
   inputProps: PropTypes.object,
+
   /** a callback function when value input change */
   onChange: PropTypes.func,
+
   /** required state of the form control */
   required: PropTypes.bool,
+
   /** the default value when the clock is open */
   value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+
   /** view type of the form control */
   viewType: PropTypes.oneOf(['outlined', 'underlined'])
 };