diginet-core-ui 1.4.39 → 1.4.40

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

@@ -0,0 +1,782 @@
+/** @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 = memo(
+    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 && <span css={styles.label.required(theme)}>*</span>, [
+                required,
+            ]);
+            const LabelMemo = useMemo(
+                () => (
+                    <div css={styles.label.container(theme)}>
+                        <label className={IDs.label} id={IDs.label} htmlFor={IDs.inputTypeText}>
+                            {label}
+                        </label>
+                        {RequireMemo}
+                    </div>
+                ),
+                [label, required, error, disabled]
+            );
+            const InputMemo = useMemo(
+                () => (
+                    <input
+                        {...inputProps}
+                        css={styles.input[viewType](theme)}
+                        disabled={disabled}
+                        id={IDs.inputTypeText}
+                        onFocus={onFocus}
+                        placeholder={'hh:mm:ss'}
+                        readOnly
+                        ref={inputRef}
+                        type={'text'}
+                    />
+                ),
+                [allowSeconds, disabled, viewType]
+            );
+            const IconMemo = useMemo(
+                () => (
+                    <React.Fragment>
+                        <span css={styles.icon[viewType](theme)} className={`${IDs.icon} svg-default`} onClick={onOpen}>
+                            <ClockIcon color={'currentColor'} />
+                        </span>
+                        <span css={styles.icon[viewType](theme)} className={`${IDs.icon} svg-active`} onClick={onClose}>
+                            <CancelIcon color={'currentColor'} width={'16'} height={'16'} />
+                        </span>
+                    </React.Fragment>
+                ),
+                [allowSeconds, disabled, error, viewType]
+            );
+            const ClockMemo = useMemo(
+                () => (
+                    <div css={styles.clock.container} ref={clockContainerRef} className={IDs.clock}>
+                        <div css={styles.clock.wrapper} ref={swiperWrapperHoursRef}>
+                            <Swiper
+                                containerStyle={{ borderRadius: '4px' }}
+                                data={getHours()}
+                                defaultValue={getDefaultValue() && getDefaultValue().getHours()}
+                                value={getDefaultValue() && getDefaultValue().getHours()}
+                                height={formatDimension(activeHeight)}
+                                onChange={selected => setInputHour(selected)}
+                                parentNode={swiperWrapperHoursRef}
+                            />
+                        </div>
+                        <div css={styles.clock.wrapper} ref={swiperWrapperMinutesRef}>
+                            <Swiper
+                                containerStyle={{ borderRadius: '4px' }}
+                                data={getMinutes()}
+                                defaultValue={getDefaultValue() && getDefaultValue().getMinutes()}
+                                value={getDefaultValue() && getDefaultValue().getMinutes()}
+                                height={formatDimension(activeHeight)}
+                                onChange={selected => setInputMinute(selected)}
+                                parentNode={swiperWrapperMinutesRef}
+                            />
+                        </div>
+                        {allowSeconds ? (
+                            <div css={styles.clock.wrapper} ref={swiperWrapperSecondsRef}>
+                                <Swiper
+                                    containerStyle={{ borderRadius: '4px' }}
+                                    data={getMinutes()}
+                                    defaultValue={getDefaultValue() && getDefaultValue().getSeconds()}
+                                    value={getDefaultValue() && getDefaultValue().getSeconds()}
+                                    height={formatDimension(activeHeight)}
+                                    onChange={selected => setInputSecond(selected)}
+                                    parentNode={swiperWrapperSecondsRef}
+                                />
+                            </div>
+                        ) : null}
+                    </div>
+                ),
+                [activeHeight, activeWidth, allowSeconds, defaultValue, disabled, error, value, viewType]
+            );
+            const ErrorMemo = useMemo(
+                () =>
+                    error && (
+                        <HelperText css={styles.error} disabled={disabled}>
+                            {error}
+                        </HelperText>
+                    ),
+                [error, disabled]
+            );
+            const MainMemo = useMemo(
+                () => (
+                    <div className={IDs.main} css={styles.main[viewType](theme)} ref={mainRef}>
+                        {InputMemo}
+                        {IconMemo}
+                        {ErrorMemo}
+                    </div>
+                ),
+                [activeHeight, activeWidth, allowSeconds, defaultValue, disabled, error, value, viewType]
+            );
+
+            return (
+                <div {...props} css={styles.container[viewType](theme)} ref={ref}>
+                    {LabelMemo}
+                    {MainMemo}
+                    {ClockMemo}
+                </div>
+            );
+        }
+    )
+);
+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;