diginet-core-ui 1.3.88 → 1.3.89

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);
@@ -149,7 +129,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         padding: 0;
                         &.disabled {
                             .${IDs.label} {
-                                color: ${theme.colors.disabled} !important;
+                                color: ${theme.colors.text.disabled} !important;
                                 pointer-events: none;
                                 user-select: none;
                             }
@@ -157,11 +137,11 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                                 pointer-events: none;
                                 user-select: none;
                                 ::placeholder {
-                                    color: ${theme.colors.input};
+                                    color: ${theme.colors.text.main};
                                 }
                             }
                             .${IDs.icon}.svg-default {
-                                color: ${theme.colors.disabled} !important;
+                                color: ${theme.colors.text.disabled} !important;
                                 pointer-events: none;
                                 user-select: none;
                             }
@@ -169,7 +149,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                                 background-color: ${theme.colors.dark12};
                                 pointer-events: none;
                                 ::before {
-                                    border-color: ${theme.colors.disabled} !important;
+                                    border-color: ${theme.colors.system.disabled} !important;
                                 }
                             }
                         }
@@ -182,7 +162,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         padding: 0;
                         &.disabled {
                             .${IDs.label} {
-                                color: ${theme.colors.disabled} !important;
+                                color: ${theme.colors.text.disabled} !important;
                                 pointer-events: none;
                                 user-select: none;
                             }
@@ -190,11 +170,11 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                                 pointer-events: none;
                                 user-select: none;
                                 ::placeholder {
-                                    color: ${theme.colors.input};
+                                    color: ${theme.colors.text.main};
                                 }
                             }
                             .${IDs.icon}.svg-default {
-                                color: ${theme.colors.disabled} !important;
+                                color: ${theme.colors.text.disabled} !important;
                                 pointer-events: none;
                                 user-select: none;
                             }
@@ -202,7 +182,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                                 pointer-events: none;
                                 ::after,
                                 ::before {
-                                    border-color: ${theme.colors.disabled} !important;
+                                    border-color: ${theme.colors.line.disabled} !important;
                                 }
                             }
                         }
@@ -213,14 +193,14 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         display: flex;
                         margin-bottom: 4px;
                         label {
-                            color: ${theme.colors.label};
+                            color: ${theme.colors.text.normal_label};
                             ${typography.heading6};
                             pointer-events: initial;
                             user-select: initial;
                         }
                     `,
       required: css`
-                        color: ${theme.colors.danger};
+                        color: ${theme.colors.semantic.danger};
                         ${typography.heading6};
                     `
     },
@@ -237,7 +217,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         ::before {
                             background-color: transparent;
                             border-radius: 4px;
-                            border: solid 1px ${theme.colors.border};
+                            border: solid 1px ${theme.colors.system.rest};
                             bottom: 0;
                             content: '\\00a0';
                             left: 0;
@@ -249,19 +229,19 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                             user-select: none;
                         }
                         :hover:not(.focused):not(.error) {
-                            background-color: ${theme.colors.hover};
+                            background-color: ${theme.colors.fill.hover};
                             ::before {
-                                border-color: ${theme.colors.primary};
+                                border-color: ${theme.colors.system.active};
                             }
                             input::placeholder,
                             .${IDs.icon}.svg-default {
-                                color: ${theme.colors.primary};
+                                color: ${theme.colors.system.active};
                             }
                         }
 
                         &.focused {
                             ::before {
-                                border: 2px solid ${theme.colors.info};
+                                border: 2px solid ${theme.colors.semantic.info};
                             }
                             .${IDs.icon}.svg-default {
                                 opacity: 0;
@@ -278,10 +258,10 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         }
                         &.error {
                             ::before {
-                                border-color: ${theme.colors.danger};
+                                border-color: ${theme.colors.semantic.danger};
                             }
                             .${IDs.icon}.svg-default {
-                                color: ${theme.colors.danger};
+                                color: ${theme.colors.semantic.danger};
                             }
                         }
                     `,
@@ -294,7 +274,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         width: 100%;
                         :after {
                             background-color: transparent;
-                            border-bottom: 2px solid ${theme.colors.info};
+                            border-bottom: 2px solid ${theme.colors.semantic.info};
                             bottom: 0;
                             content: '';
                             left: 0;
@@ -308,7 +288,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         }
                         ::before {
                             background-color: transparent;
-                            border-bottom: solid 1px ${theme.colors.border};
+                            border-bottom: solid 1px ${theme.colors.system.rest};
                             bottom: 0;
                             content: '\\00a0';
                             left: 0;
@@ -321,11 +301,11 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         }
                         :hover:not(.focused):not(.error) {
                             ::before {
-                                border-color: ${theme.colors.primary};
+                                border-color: ${theme.colors.system.active};
                             }
                             input::placeholder,
                             .${IDs.icon}.svg-default {
-                                color: ${theme.colors.primary};
+                                color: ${theme.colors.system.active};
                             }
                         }
 
@@ -349,10 +329,10 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         &.error {
                             ::after,
                             ::before {
-                                border-color: ${theme.colors.danger};
+                                border-color: ${theme.colors.semantic.danger};
                             }
                             .${IDs.icon}.svg-default {
-                                color: ${theme.colors.danger};
+                                color: ${theme.colors.semantic.danger};
                             }
                         }
                     `
@@ -368,7 +348,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         position: relative;
                         width: 100%;
                         &::placeholder {
-                            color: ${theme.colors.placeholder};
+                            color: ${theme.colors.text.sub};
                             letter-spacing: 0.0675em;
                             transition: color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) 0ms;
                         }
@@ -383,7 +363,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         position: relative;
                         width: 100%;
                         &::placeholder {
-                            color: ${theme.colors.placeholder};
+                            color: ${theme.colors.text.sub};
                             letter-spacing: 0.0675em;
                             transition: color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) 0ms;
                         }
@@ -392,7 +372,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     icon: {
       outlined: css`
                         align-items: center;
-                        color: ${theme.colors.border};
+                        color: ${theme.colors.system.rest};
                         cursor: pointer;
                         display: flex;
                         height: 24px;
@@ -407,13 +387,13 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                             opacity: 0;
                             visibility: hidden;
                             :hover {
-                                color: ${theme.colors.primary};
+                                color: ${theme.colors.system.active};
                             }
                         }
                     `,
       underlined: css`
                         align-items: center;
-                        color: ${theme.colors.border};
+                        color: ${theme.colors.system.rest};
                         cursor: pointer;
                         display: flex;
                         height: 24px;
@@ -428,7 +408,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                             opacity: 0;
                             visibility: hidden;
                             :hover {
-                                color: ${theme.colors.primary};
+                                color: ${theme.colors.system.active};
                             }
                         }
                     `
@@ -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'])
 };