diginet-core-ui 1.3.24

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

@@ -0,0 +1,829 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import PropTypes from 'prop-types';
+import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { Cancel as CancelIcon, Clock as ClockIcon } from '../../../icons';
+import { randomString, useOnClickOutside } from '../../../utils';
+import theme from '../../../theme/settings';
+import Swiper from './swiper';
+
+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];
+    }
+  } else {
+    return x;
+  }
+};
+
+const addZero = i => {
+  if (isNaN(i) && +i < 10) {
+    return `0${parseInt(i, 10)}`;
+  } else if (!isNaN(i) && i < 10) {
+    return `0${i}`;
+  } else {
+    return i;
+  }
+}; //array data
+
+
+const getHours = () => {
+  let hours = [],
+      i = 0;
+
+  for (i; i < 24; i++) {
+    hours.push({
+      value: i,
+      text: i
+    });
+  }
+
+  return hours;
+};
+
+const getMinutes = () => {
+  let minutes = [],
+      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();
+    value = value.split(/\D+/);
+    value[2] = value[2] || 0;
+    date.setHours(...value);
+    value = date;
+  }
+
+  if (checkValue(value)) {
+    return new Date(value);
+  }
+
+  return new Date();
+};
+
+const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  activeHeight,
+  activeWidth,
+  allowSeconds,
+  defaultValue,
+  disabled,
+  error,
+  label,
+  inputProps,
+  inputRef,
+  onChange,
+  required,
+  value,
+  viewType,
+  ...props
+}, ref) => {
+  const Id = randomString(7, {
+    allowSymbol: false,
+    allowNumber: false
+  });
+  const IDs = {
+    clock: 'DCUI-time-picker-clock' + Id,
+    container: 'DCUI-time-picker-container' + Id,
+    icon: 'DCUI-time-picker-icon' + Id,
+    inputTypeText: 'DCUI-time-picker-input-type-text' + Id,
+    inputWrapper: 'DCUI-time-picker-input-wrapper' + Id,
+    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);
+  const swiperWrapperMinutesRef = useRef(null);
+  const swiperWrapperSecondsRef = useRef(null);
+  let values = [];
+  const styles = {
+    container: {
+      outlined: css`
+				* {
+					box-sizing: border-box;
+					font-family: ${theme.typography.fontFamily};
+				}
+				margin: 0;
+				padding: 0;
+				&.disabled {
+					.${IDs.label} {
+						color: ${theme.colors.disabled} !important;
+						pointer-events: none;
+						user-select: none;
+					}
+					#${IDs.inputTypeText} {
+						pointer-events: none;
+						user-select: none;
+						::placeholder {
+							color: ${theme.colors.input};
+						}
+					}
+					.${IDs.icon}.svg-default {
+						color: ${theme.colors.disabled} !important;
+						pointer-events: none;
+						user-select: none;
+					}
+					.${IDs.main} {
+						background-color: ${theme.colors.bgDisabled};
+						pointer-events: none;
+						::before {
+							border-color: ${theme.colors.disabled} !important;
+						}
+					}
+				}
+			`,
+      underlined: css`
+				* {
+					box-sizing: border-box;
+				}
+				margin: 0;
+				padding: 0;
+				&.disabled {
+					.${IDs.label} {
+						color: ${theme.colors.disabled} !important;
+						pointer-events: none;
+						user-select: none;
+					}
+					#${IDs.inputTypeText} {
+						pointer-events: none;
+						user-select: none;
+						::placeholder {
+							color: ${theme.colors.input};
+						}
+					}
+					.${IDs.icon}.svg-default {
+						color: ${theme.colors.disabled} !important;
+						pointer-events: none;
+						user-select: none;
+					}
+					.${IDs.main} {
+						pointer-events: none;
+						::after, ::before {
+							border-color: ${theme.colors.disabled} !important;
+						}
+					}
+				}
+			`
+    },
+    label: {
+      container: css`
+				display: flex;
+				margin-bottom: 4px;
+				label {
+					color: ${theme.colors.label};
+					font-size: 12px;
+					font-weight: 700;
+					pointer-events: initial;
+					user-select: initial;
+				}
+			`,
+      required: css`
+				color: ${theme.colors.danger};
+				font-size: 12px;
+				font-weight: bold;
+			`
+    },
+    main: {
+      outlined: css`
+				background-color: white;
+				border-radius: 4px;
+				display: flex;
+				flex-direction: column;
+				height: 40px;
+				pointer-events: initial;
+				position: relative;
+				width: 100%;
+				::before {
+					background-color: transparent;
+					border-radius: 4px;
+					border: solid 1px ${theme.colors.border};
+					bottom: 0;
+					content: '\\00a0';
+					left: 0;
+					pointer-events: none;
+					position: absolute;
+					right: 0;
+					top: 0;
+					transition: border-color 0.2s ease;
+					user-select: none;
+				}
+				:hover:not(.focused):not(.error) {
+					background-color: ${theme.colors.hover};
+					::before {
+						border-color: ${theme.colors.primary};
+					}
+					input::placeholder,
+					.${IDs.icon}.svg-default {
+						color: ${theme.colors.primary};
+					}
+				}
+				
+				&.focused {
+					::before {
+						border: 2px solid ${theme.colors.info};
+					}
+					.${IDs.icon}.svg-default {
+						opacity: 0;
+						visibility: hidden;
+					}
+					.${IDs.icon}.svg-active {
+						opacity: 1;
+						visibility: visible;
+					}
+					~ .${IDs.clock} {
+						opacity: 1;
+						transform: scale(1);
+					}
+				}
+				&.error {
+					::before {
+						border-color: ${theme.colors.danger};
+					}
+					.${IDs.icon}.svg-default {
+						color: ${theme.colors.danger};
+					}
+					
+				}
+			`,
+      underlined: css`
+				display: flex;
+				flex-direction: column;
+				height: 40px;
+				pointer-events: initial;
+				position: relative;
+				width: 100%;
+				:after {
+					background-color: transparent;
+					border-bottom: 2px solid ${theme.colors.info};
+					bottom: 0;
+					content: '';
+					left: 0;
+					pointer-events: none;
+					position: absolute;
+					right: 0;
+					top: 0;
+					transform: scaleX(0);
+					transform-origin: left;
+					transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+				}
+				::before {
+					background-color: transparent;
+					border-bottom: solid 1px ${theme.colors.border};
+					bottom: 0;
+					content: '\\00a0';
+					left: 0;
+					pointer-events: none;
+					position: absolute;
+					right: 0;
+					top: 0;
+					transition: border-color 0.2s ease;
+					user-select: none;
+				}
+				:hover:not(.focused):not(.error) {
+					::before {
+						border-color: ${theme.colors.primary};
+					}
+					input::placeholder,
+					.${IDs.icon}.svg-default {
+						color: ${theme.colors.primary};
+					}
+				}
+				
+				&.focused {
+					::after {
+						transform: scale(1);
+					}
+					.${IDs.icon}.svg-default {
+						opacity: 0;
+						visibility: hidden;
+					}
+					.${IDs.icon}.svg-active {
+						opacity: 1;
+						visibility: visible;
+					}
+					~ .${IDs.clock} {
+						opacity: 1;
+						transform: scale(1);
+					}
+				}
+				&.error {
+					::after, ::before {
+						border-color: ${theme.colors.danger};
+					}
+					.${IDs.icon}.svg-default {
+						color: ${theme.colors.danger};
+					}
+					
+				}
+			`
+    },
+    input: {
+      outlined: css`
+				background-color: transparent;
+				border: 0;
+				font-size: 16px;
+				margin: 0;
+				outline: none;
+				padding: 10px 16px;
+				position: relative;
+				width: 100%;
+				&::placeholder {
+					color: ${theme.colors.placeholder};
+					letter-spacing: 0.0675em;
+					transition: color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) 0ms;
+				}
+			`,
+      underlined: css`
+				background-color: white;
+				border: 0;
+				font-size: 16px;
+				line-height: 20px;
+				margin: auto 0;
+				outline: none;
+				padding: 0;
+				position: relative;
+				width: 100%;
+				&::placeholder {
+					color: ${theme.colors.placeholder};
+					letter-spacing: 0.0675em;
+					transition: color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) 0ms;
+				}
+			`
+    },
+    icon: {
+      outlined: css`
+				align-items: center;
+				color: ${theme.colors.border};
+				cursor: pointer;
+				display: flex;
+				font-size: 20px;
+				height: 20px;
+				justify-content: center;
+				position: absolute;
+				top: 50%;
+				right: 20px;
+				transform: translateY(-50%);
+				transition: opacity 0.2s ease, color 0.2s ease;
+				width: 20px;
+				&.svg-active {
+					opacity: 0;
+					visibility: hidden;
+					:hover {
+						color: ${theme.colors.primary};
+					}
+				}
+			`,
+      underlined: css`
+				align-items: center;
+				color: ${theme.colors.border};
+				cursor: pointer;
+				display: flex;
+				font-size: 20px;
+				height: 20px;
+				justify-content: center;
+				position: absolute;
+				top: 50%;
+				right: 6px;
+				transform: translateY(-50%);
+				transition: opacity 0.2s ease, color 0.2s ease;
+				width: 20px;
+				&.svg-active {
+					opacity: 0;
+					visibility: hidden;
+					:hover {
+						color: ${theme.colors.primary};
+					}
+				}
+			`
+    },
+    error: {
+      outlined: css`
+				color: ${theme.colors.danger};
+				font-size: 12px;
+				font-weight: 400;
+				line-height: 12px;
+				margin-top: 8px;
+				pointer-events: none;
+			`,
+      underlined: css`
+				color: ${theme.colors.danger};
+				font-size: 12px;
+				font-weight: 400;
+				line-height: 12px;
+				bottom: -20px;
+				position: absolute;
+				pointer-events: none;
+			`
+    },
+    clock: {
+      container: css`
+				background-color: white;
+				border-radius: 4px;
+				box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25);
+				display: flex;
+				height: ${formatDimension(activeHeight)}px;
+				min-width: 120px;
+				opacity: 0;
+				position: fixed;
+				transform: scale(0);
+				transition: transform 0.2s ease-in-out, opacity 0.2s ease-out, top 0.1s linear, bottom 0.1s linear;
+				width: ${formatDimension(activeWidth)}px;
+				z-index: 9001;
+			`,
+      wrapper: css`
+				border-radius: 4px;
+				flex: 1;
+			`
+    }
+  };
+
+  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);
+    } else if (defaultValue && checkValue(defaultValue)) {
+      return new Date(defaultValue);
+    } else {
+      return null;
+    }
+  };
+
+  const escKeyFunc = ev => {
+    //call the useOnClickOutside when press esc key
+    if (ev.keyCode === 27) {
+      onBlur();
+      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;
+        } else {
+          parent = parent.parentElement;
+        }
+      }
+    }
+
+    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';
+      clock.style.transformOrigin = 'bottom left';
+    } else if (bottom < 0) {
+      clock.style.top = '5px';
+      clock.style.bottom = 'auto';
+      clock.style.transformOrigin = 'top left';
+    } else {
+      if (window.innerHeight - bottom < activeHeight + 10) {
+        if (top < activeHeight + 10) {
+          clock.style.top = (window.innerHeight - activeHeight) / 2 + 'px';
+          clock.style.bottom = 'auto';
+          clock.style.transformOrigin = 'center center';
+        } else {
+          clock.style.top = top - activeHeight - 10 + 'px';
+          clock.style.bottom = 'auto';
+          clock.style.transformOrigin = 'bottom left';
+        }
+      } else {
+        clock.style.bottom = 'auto';
+        clock.style.top = bottom + 5 + 'px';
+        clock.style.transformOrigin = 'top left';
+      }
+    }
+
+    if (left < 0) {
+      clock.style.left = '5px';
+    } else if (left + activeWidth > window.innerWidth) {
+      clock.style.left = (window.innerWidth - activeWidth) / 2 + 'px';
+    } else {
+      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) => {
+  // 	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) {
+    // 	updateValue(value);
+    // }
+
+
+    window.addEventListener('resize', setPositionClock);
+    document.addEventListener('keydown', e => escKeyFunc(e));
+    scrollParent.addEventListener('scroll', setPositionClock);
+    inputRef.current.addEventListener('keypress', e => validateKeyboard(e));
+    return () => {
+      window.removeEventListener('resize', setPositionClock);
+      document.removeEventListener('keydown', e => escKeyFunc(e));
+      scrollParent.removeEventListener('scroll', setPositionClock);
+      !!inputRef.current && inputRef.current.removeEventListener('keypress', e => validateKeyboard(e));
+    };
+  }, []);
+  useEffect(() => {
+    if (value) {
+      updateValue(value);
+    }
+  }, [value]);
+  useEffect(() => {
+    setPositionClock();
+  }, [activeHeight, activeWidth, allowSeconds]);
+  useEffect(() => {
+    if (disabled) {
+      ref.current.disabled = true;
+      ref.current.classList.add('disabled');
+    }
+
+    return () => {
+      if (ref.current) {
+        ref.current.disabled = false;
+        ref.current.classList.remove('disabled');
+      }
+    };
+  }, [disabled]);
+  useEffect(() => {
+    if (error && error !== '') {
+      mainRef.current.classList.add('error');
+    }
+
+    return () => {
+      !!mainRef.current && mainRef.current.classList.remove('error');
+    };
+  }, [error]);
+  const RequireMemo = useMemo(() => required && jsx("span", {
+    css: styles.label.required
+  }, "*"), [required]);
+  const LabelMemo = useMemo(() => jsx("div", {
+    css: styles.label.container
+  }, jsx("label", {
+    className: IDs.label,
+    id: IDs.label,
+    htmlFor: IDs.inputTypeText
+  }, label), RequireMemo), [label, required, error, disabled]);
+  const InputMemo = useMemo(() => jsx("input", _extends({}, inputProps, {
+    css: styles.input[viewType],
+    disabled: disabled,
+    id: IDs.inputTypeText,
+    onFocus: onFocus,
+    placeholder: 'hh:mm:ss',
+    readOnly: true,
+    ref: inputRef,
+    type: 'text'
+  })), [allowSeconds, disabled, viewType]);
+  const IconMemo = useMemo(() => jsx(React.Fragment, null, jsx("span", {
+    css: styles.icon[viewType],
+    className: `${IDs.icon} svg-default`,
+    onClick: onOpen
+  }, jsx(ClockIcon, {
+    color: 'currentColor'
+  })), jsx("span", {
+    css: styles.icon[viewType],
+    className: `${IDs.icon} svg-active`,
+    onClick: onClose
+  }, jsx(CancelIcon, {
+    color: 'currentColor',
+    width: '16',
+    height: '16'
+  }))), [allowSeconds, disabled, error, viewType]);
+  const ClockMemo = useMemo(() => jsx("div", {
+    css: styles.clock.container,
+    ref: clockContainerRef,
+    className: IDs.clock
+  }, jsx("div", {
+    css: styles.clock.wrapper,
+    ref: swiperWrapperHoursRef
+  }, jsx(Swiper, {
+    containerStyle: {
+      borderRadius: '4px'
+    },
+    data: getHours(),
+    defaultValue: getDefaultValue() && getDefaultValue().getHours(),
+    value: getDefaultValue() && getDefaultValue().getHours(),
+    height: formatDimension(activeHeight),
+    onChange: selected => setInputHour(selected),
+    parentNode: swiperWrapperHoursRef
+  })), jsx("div", {
+    css: styles.clock.wrapper,
+    ref: swiperWrapperMinutesRef
+  }, jsx(Swiper, {
+    containerStyle: {
+      borderRadius: '4px'
+    },
+    data: getMinutes(),
+    defaultValue: getDefaultValue() && getDefaultValue().getMinutes(),
+    value: getDefaultValue() && getDefaultValue().getMinutes(),
+    height: formatDimension(activeHeight),
+    onChange: selected => setInputMinute(selected),
+    parentNode: swiperWrapperMinutesRef
+  })), allowSeconds ? jsx("div", {
+    css: styles.clock.wrapper,
+    ref: swiperWrapperSecondsRef
+  }, jsx(Swiper, {
+    containerStyle: {
+      borderRadius: '4px'
+    },
+    data: getMinutes(),
+    defaultValue: getDefaultValue() && getDefaultValue().getSeconds(),
+    value: getDefaultValue() && getDefaultValue().getSeconds(),
+    height: formatDimension(activeHeight),
+    onChange: selected => setInputSecond(selected),
+    parentNode: swiperWrapperSecondsRef
+  })) : null), [activeHeight, activeWidth, allowSeconds, defaultValue, disabled, error, value, viewType]);
+  const ErrorMemo = useMemo(() => error && jsx("span", {
+    css: styles.error[viewType]
+  }, error), [error]);
+  const MainMemo = useMemo(() => jsx("div", {
+    className: IDs.main,
+    css: styles.main[viewType],
+    ref: mainRef
+  }, InputMemo, IconMemo, ErrorMemo), [activeHeight, activeWidth, allowSeconds, defaultValue, disabled, error, value, viewType]);
+  return jsx("div", _extends({}, props, {
+    css: styles.container[viewType],
+    ref: ref
+  }), LabelMemo, MainMemo, ClockMemo);
+}));
+TimePicker.defaultProps = {
+  activeHeight: 200,
+  activeWidth: 150,
+  allowSeconds: false,
+  disabled: false,
+  required: true,
+  viewType: 'outlined'
+};
+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'])
+};
+export default TimePicker;