diginet-core-ui 1.3.78 → 1.3.79

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

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -14,16 +13,13 @@ 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];
     }
@@ -31,7 +27,6 @@ const formatDimension = x => {
     return x;
   }
 };
-
 const addZero = i => {
   if (isNaN(i) && +i < 10) {
     return `0${parseInt(i, 10)}`;
@@ -40,45 +35,36 @@ 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();
@@ -87,14 +73,11 @@ 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,
@@ -124,15 +107,12 @@ 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);
@@ -459,13 +439,11 @@ 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);
@@ -475,26 +453,21 @@ 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;
@@ -503,24 +476,19 @@ 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';
@@ -546,7 +514,6 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         clock.style.transformOrigin = 'top left';
       }
     }
-
     if (left < 0) {
       clock.style.left = '5px';
     } else if (left + activeWidth > window.innerWidth) {
@@ -555,84 +522,71 @@ 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);
 
-  useOnClickOutside(ref, onBlur); // const validateValue = (text) => {
+  // 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);
@@ -657,7 +611,6 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref.current.disabled = true;
       ref.current.classList.add('disabled');
     }
-
     return () => {
       if (ref.current) {
         ref.current.disabled = false;
@@ -669,7 +622,6 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (error && error !== '') {
       mainRef.current.classList.add('error');
     }
-
     return () => {
       !!mainRef.current && mainRef.current.classList.remove('error');
     };
@@ -684,7 +636,8 @@ 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,
@@ -762,7 +715,8 @@ 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);
@@ -778,37 +732,26 @@ 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'])
 };