diginet-core-ui 1.4.39 → 1.4.40

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

@@ -1,781 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { Cancel as CancelIcon, Clock as ClockIcon } from "../../../icons";
-import PropTypes from 'prop-types';
-import React, { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
-import { useTheme } from "../../../theme";
-import { getProp, randomString, useOnClickOutside } from "../../../utils";
-import HelperText from "../helper-text";
-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 theme = useTheme();
-  const {
-    zIndex
-  } = theme;
-  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: ({
-        colors
-      }) => css`
-                        * {
-                            box-sizing: border-box;
-                        }
-                        margin: 0;
-                        padding: 0;
-                        &.disabled {
-                            .${IDs.label} {
-                                color: ${getProp(colors, 'system/disabled')} !important;
-                                pointer-events: none;
-                                user-select: none;
-                            }
-                            #${IDs.inputTypeText} {
-                                pointer-events: none;
-                                user-select: none;
-                                ::placeholder {
-                                    color: ${getProp(colors, 'text/main')};
-                                }
-                            }
-                            .${IDs.icon}.svg-default {
-                                color: ${getProp(colors, 'system/disabled')} !important;
-                                pointer-events: none;
-                                user-select: none;
-                            }
-                            .${IDs.main} {
-                                background-color: ${getProp(colors, 'dark12')};
-                                pointer-events: none;
-                                ::before {
-                                    border-color: ${getProp(colors, 'system/disabled')} !important;
-                                }
-                            }
-                        }
-                    `,
-      underlined: ({
-        colors
-      }) => css`
-                        * {
-                            box-sizing: border-box;
-                        }
-                        margin: 0;
-                        padding: 0;
-                        &.disabled {
-                            .${IDs.label} {
-                                color: ${getProp(colors, 'system/disabled')} !important;
-                                pointer-events: none;
-                                user-select: none;
-                            }
-                            #${IDs.inputTypeText} {
-                                pointer-events: none;
-                                user-select: none;
-                                ::placeholder {
-                                    color: ${getProp(colors, 'text/main')};
-                                }
-                            }
-                            .${IDs.icon}.svg-default {
-                                color: ${getProp(colors, 'system/disabled')} !important;
-                                pointer-events: none;
-                                user-select: none;
-                            }
-                            .${IDs.main} {
-                                pointer-events: none;
-                                ::after,
-                                ::before {
-                                    border-color: ${getProp(colors, 'system/disabled')} !important;
-                                }
-                            }
-                        }
-                    `
-    },
-    label: {
-      container: ({
-        colors,
-        typography
-      }) => css`
-                        display: flex;
-                        margin-bottom: 4px;
-                        label {
-                            color: ${getProp(colors, 'text/label')};
-                            ${typography.heading6};
-                            pointer-events: initial;
-                            user-select: initial;
-                        }
-                    `,
-      required: ({
-        colors,
-        typography
-      }) => css`
-                        color: ${getProp(colors, 'semantic/danger')};
-                        ${typography.heading6};
-                    `
-    },
-    main: {
-      outlined: ({
-        colors
-      }) => 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 ${getProp(colors, 'system/rest')};
-                            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: ${getProp(colors, 'fill/hover')};
-                            ::before {
-                                border-color: ${getProp(colors, 'system/active')};
-                            }
-                            input::placeholder,
-                            .${IDs.icon}.svg-default {
-                                color: ${getProp(colors, 'system/active')};
-                            }
-                        }
-
-                        &.focused {
-                            ::before {
-                                border: 2px solid ${getProp(colors, 'semantic/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: ${getProp(colors, 'semantic/danger')};
-                            }
-                            .${IDs.icon}.svg-default {
-                                color: ${getProp(colors, 'semantic/danger')};
-                            }
-                        }
-                    `,
-      underlined: ({
-        colors
-      }) => css`
-                        display: flex;
-                        flex-direction: column;
-                        height: 40px;
-                        pointer-events: initial;
-                        position: relative;
-                        width: 100%;
-                        :after {
-                            background-color: transparent;
-                            border-bottom: 2px solid ${getProp(colors, 'semantic/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 ${getProp(colors, 'system/rest')};
-                            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: ${getProp(colors, 'system/active')};
-                            }
-                            input::placeholder,
-                            .${IDs.icon}.svg-default {
-                                color: ${getProp(colors, 'system/active')};
-                            }
-                        }
-
-                        &.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: ${getProp(colors, 'semantic/danger')};
-                            }
-                            .${IDs.icon}.svg-default {
-                                color: ${getProp(colors, 'semantic/danger')};
-                            }
-                        }
-                    `
-    },
-    input: {
-      outlined: ({
-        colors,
-        typography
-      }) => css`
-                        background-color: transparent;
-                        border: 0;
-                        ${typography.paragraph1};
-                        margin: 0;
-                        outline: none;
-                        padding: 10px 16px;
-                        position: relative;
-                        width: 100%;
-                        &::placeholder {
-                            color: ${getProp(colors, 'text/sub')};
-                            letter-spacing: 0.0675em;
-                            transition: color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) 0ms;
-                        }
-                    `,
-      underlined: ({
-        colors,
-        typography
-      }) => css`
-                        background-color: white;
-                        border: 0;
-                        ${typography.paragraph1};
-                        margin: auto 0;
-                        outline: none;
-                        padding: 0;
-                        position: relative;
-                        width: 100%;
-                        &::placeholder {
-                            color: ${getProp(colors, 'text/sub')};
-                            letter-spacing: 0.0675em;
-                            transition: color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) 0ms;
-                        }
-                    `
-    },
-    icon: {
-      outlined: ({
-        colors
-      }) => css`
-                        align-items: center;
-                        color: ${getProp(colors, 'system/rest')};
-                        cursor: pointer;
-                        display: flex;
-                        height: 24px;
-                        justify-content: center;
-                        position: absolute;
-                        top: 50%;
-                        right: 20px;
-                        transform: translateY(-50%);
-                        transition: opacity 0.2s ease, color 0.2s ease;
-                        width: 24px;
-                        &.svg-active {
-                            opacity: 0;
-                            visibility: hidden;
-                            :hover {
-                                color: ${getProp(colors, 'system/active')};
-                            }
-                        }
-                    `,
-      underlined: ({
-        colors
-      }) => css`
-                        align-items: center;
-                        color: ${getProp(colors, 'system/rest')};
-                        cursor: pointer;
-                        display: flex;
-                        height: 24px;
-                        justify-content: center;
-                        position: absolute;
-                        top: 50%;
-                        right: 6px;
-                        transform: translateY(-50%);
-                        transition: opacity 0.2s ease, color 0.2s ease;
-                        width: 24px;
-                        &.svg-active {
-                            opacity: 0;
-                            visibility: hidden;
-                            :hover {
-                                color: ${getProp(colors, 'system/active')};
-                            }
-                        }
-                    `
-    },
-    error: css`
-                    position: absolute;
-                    top: 100%;
-                `,
-    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: ${zIndex(1)};
-                    `,
-      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();
-      // 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;
-        } 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(theme)
-  }, "*"), [required]);
-  const LabelMemo = useMemo(() => jsx("div", {
-    css: styles.label.container(theme)
-  }, jsx("label", {
-    className: IDs.label,
-    id: IDs.label,
-    htmlFor: IDs.inputTypeText
-  }, label), RequireMemo), [label, required, error, disabled]);
-  const InputMemo = useMemo(() => jsx("input", {
-    ...inputProps,
-    css: styles.input[viewType](theme),
-    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](theme),
-    className: `${IDs.icon} svg-default`,
-    onClick: onOpen
-  }, jsx(ClockIcon, {
-    color: 'currentColor'
-  })), jsx("span", {
-    css: styles.icon[viewType](theme),
-    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(HelperText, {
-    css: styles.error,
-    disabled: disabled
-  }, error), [error, disabled]);
-  const MainMemo = useMemo(() => jsx("div", {
-    className: IDs.main,
-    css: styles.main[viewType](theme),
-    ref: mainRef
-  }, InputMemo, IconMemo, ErrorMemo), [activeHeight, activeWidth, allowSeconds, defaultValue, disabled, error, value, viewType]);
-  return jsx("div", {
-    ...props,
-    css: styles.container[viewType](theme),
-    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;