diginet-core-ui 1.4.39 → 1.4.40

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

@@ -0,0 +1,49 @@
+import {ArgsTable} from '@storybook/addon-docs/blocks';
+import TimePicker from './';
+
+# DigiNet-Core-Ui / Time Picker
+
+Time Picker is a plugin to enhance standard form input fields, helping users to select times.
+
+## Installation:
+
+```jsx
+npm install diginet-core-ui --save
+```
+
+<!-- ############################################################################# -->
+
+## TimePicker
+
+The Component `<TimePicker />` is designed according to design guidelines of DigiNet
+
+##### Usage
+
+You can use `<TimePicker />` by the following way, such as:
+
+```jsx
+import { TimePicker } from 'diginet-core-ui/components/';
+```
+
+##### Examples
+
+You can use `<TimePicker />` to display any information that you pass in, such as:
+
+```jsx
+<TimePicker
+    activeWidth={activeWidth}
+    activeHeight={activeHeight}
+    allowSeconds={allowSeconds}
+    defaultValue={defaultValue}
+    disabled={disabled}
+    error={error}
+    label={label}
+    ref={ref}
+    required={required}
+    viewType={viewType}
+/>
+```
+
+##### Component PropTypes
+
+<ArgsTable of={TimePicker}/>

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

@@ -0,0 +1,69 @@
+import React, { useRef, useState } from 'react';
+import { brand } from '../../../styles/colors';
+import Typography from '../../typography';
+import Clock from './';
+
+// export default {
+//     title: 'FORM CONTROL / DATE-TIME / TimePicker',
+//     component: Clock,
+// };
+
+const Template = args => {
+    const ref = useRef(null);
+    const [values, setValue] = useState('00:00:00');
+
+    const handleClick = value => {
+        setValue(value);
+    };
+    return (
+        <div style={{ color: brand, fontFamily: 'sans-serif' }}>
+            <Typography type={'h1'} color={'danger'} center>
+                DEVELOPING
+            </Typography>
+            <div style={{ alignItems: 'center', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+                <h1 style={{ margin: '40px 0 0', textAlign: 'start', width: '100%' }}>Time Picker</h1>
+                <h1>{values}</h1>
+            </div>
+            <div>
+                <Clock
+                    activeWidth={args.activeWidth}
+                    activeHeight={args.activeHeight}
+                    allowSeconds={args.allowSeconds}
+                    defaultValue={args.defaultValue}
+                    disabled={args.disabled}
+                    error={args.error}
+                    label={args.label}
+                    onChange={e => handleClick(e.value)}
+                    ref={ref}
+                    required={args.required}
+                    value={args.value}
+                    viewType={args.viewType}
+                />
+                <br />
+                <hr />
+                <p>{`activeWidth: 200, activeHeight: 300, allowSeconds = true, label = 'Time Picker Sample', required = true, viewType = underlined`}</p>
+                <br />
+                <Clock
+                    activeWidth={200}
+                    activeHeight={300}
+                    allowSeconds={true}
+                    label={'Time Picker Sample'}
+                    required={true}
+                    viewType={'underlined'}
+                />
+            </div>
+        </div>
+    );
+};
+
+export const TimePicker = Template.bind({});
+TimePicker.args = {
+    activeHeight: 300,
+    activeWidth: 260,
+    allowSeconds: false,
+    defaultValue: `${new Date('02/25/2021 11:06:00')}`,
+    disabled: false,
+    label: 'Thời gian',
+    required: false,
+    value: `${new Date('02/25/2021 16:20:00')}`,
+};

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

@@ -0,0 +1,568 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/prop-types */
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { useEffect, useRef } from 'react';
+import { jsx, css } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { randomString } from '../../../utils';
+
+const easing = {
+    easingOutCubic: pos => {
+        return Math.pow(pos - 1, 3) + 1;
+    },
+    easingOutQuart: pos => {
+        return Math.pow(pos - 1, 3) - 1;
+    },
+};
+
+const addZero = i => {
+    if (i < 10) {
+        i = '0' + i;
+    }
+    return i;
+};
+
+//get hours of day
+
+const getHours = () => {
+    let hours = [],
+        i = 0;
+
+    for (i; i < 24; i++) {
+        hours.push({ value: i, text: addZero(i) });
+    }
+    return hours;
+};
+const gradient = 'rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)';
+const Swiper = props => {
+    //properties
+    const {
+        containerStyle,
+        count,
+        data,
+        defaultValue,
+        direction,
+        height,
+        mainSelectorStyle,
+        onChange,
+        parentNode,
+        sensitivity,
+        type,
+        value,
+        width,
+        ...other
+    } = props;
+
+    //id + class
+    const Id = randomString({ allowSymbol: false, allowNumber: false });
+    const IDs = {
+        container: 'DCUI-swiper-container' + Id,
+        highlight: 'DCUI-swiper-highlight' + Id,
+        highlightSelector: 'DCUI-swiper-highlight-selector' + Id,
+        highlightOption: 'DCUI-swiper-highlight-option' + Id,
+        mainSelector: 'DCUI-swiper-main-selector' + Id,
+        mainOption: 'DCUI-swiper-main-option' + Id,
+    };
+
+    //reference
+    const containerRef = useRef(null);
+    const mainSelectorRef = useRef(null);
+    const highlightSelectorRef = useRef(null);
+
+    //variables
+    const thisCount = count - (count % 4);
+    const itemAngle = 360 / thisCount;
+    const itemHeight = Math.ceil((height * 3) / thisCount);
+    const itemWidth = Math.ceil((width * 3) / thisCount);
+    const radius = (direction === 'vertical' ? itemHeight : itemWidth) / Math.tan((itemAngle * Math.PI) / 180);
+    let thisMoving = false;
+    let thisScroll = 0;
+    let thisMoveT = 0;
+    let thisValue = defaultValue || data[0].value;
+    let thisSelected = data[0];
+    let thisA = sensitivity * 10;
+    let thisExceedA = 10;
+
+    const events = {
+        touchstart: null,
+        touchmove: null,
+        touchend: null,
+    };
+    //style
+    const styles = {
+        container: css`
+            * {
+                box-sizing: border-box;
+            }
+            background-color: #fff;
+            border-radius: 0;
+            color: #111d5e;
+            height: 100%;
+            overflow: hidden;
+            position: relative;
+            text-align: center;
+            width: 100%;
+            ::before,
+            ::after {
+                border-radius: 0px;
+                content: '';
+                display: block;
+                height: 50%;
+                pointer-events: none;
+                position: absolute;
+                width: 100%;
+                /* z-index: 9003; */
+                z-index: 1;
+            }
+            ::before {
+                top: 0;
+                background-image: linear-gradient(to bottom, ${gradient});
+            }
+            ::after {
+                bottom: 0;
+                background-image: linear-gradient(to top, ${gradient});
+            }
+        `,
+        mainSelector: css`
+            -webkit-font-smoothing: subpixel-antialiased;
+            color: #111d53;
+            list-style: none;
+            margin: 0 auto;
+            position: absolute;
+            top: 50%;
+            transform-style: preserve-3d;
+            transform: translate3d(0, 0, ${-radius}px) rotateX(0deg);
+            width: 100%;
+            .${IDs.mainOption} {
+                -webkit-font-smoothing: subpixel-antialiased;
+                backface-visibility: hidden;
+                cursor: pointer;
+                position: absolute;
+                user-select: none;
+            }
+        `,
+        highlightContainer: css`
+            background-color: #fff;
+            border-bottom: 1px solid #7f828e;
+            border-top: 1px solid #7f828e;
+            color: #111d53;
+            font-size: 24px;
+            font-weight: 500;
+            height: ${itemHeight}px;
+            left: 50%;
+            line-height: ${itemHeight}px;
+            overflow: hidden;
+            position: absolute;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            vertical-align: middle;
+            width: 70%;
+        `,
+        highlightSelector: css`
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            position: absolute;
+            width: 100%;
+            .${IDs.highlightOption} {
+                cursor: pointer;
+                user-select: none;
+            }
+        `,
+    };
+
+    const renderSwiper = data => {
+        if (!data.length) return;
+
+        if (type === 'infinite') {
+            let concatData = [].concat(data);
+            while (concatData.length < data) {
+                concatData = concatData.concat(data);
+            }
+            data = concatData;
+        }
+        let lengthData = data.length,
+            mainOptions = '',
+            highlightOptions = '';
+        for (let i in data) {
+            mainOptions += `<li
+				class="${IDs.mainOption}"
+				style="
+					height: ${direction === 'vertical' ? itemHeight + 'px' : '100%'};
+					left: ${direction === 'vertical' ? '0' : itemWidth * -0.5 + 'px'};
+					line-height: ${itemHeight + 'px' || 'normal'};
+					top: ${direction === 'vertical' ? itemHeight * -0.5 + 'px' : '0'};
+					width: ${direction === 'vertical' ? '100%' : itemWidth + 'px'};
+					transform: ${(direction === 'vertical' ? 'rotateX(' : 'rotateY(') + -itemAngle * i}deg) translate3d(0, 0, ${radius}px);"
+				data-index="${i}">
+				${data[i].text || data[i].value}
+			</li>`;
+
+            highlightOptions += `<li
+				class="${IDs.highlightOption}"
+				style="
+					height: ${direction === 'vertical' ? itemHeight + 'px' : '100%'};
+					width: ${direction === 'vertical' ? '100%' : itemWidth + 'px'};">
+				${data[i].text || data[i].value}
+			</li>`;
+        }
+
+        if (type === 'infinite') {
+            for (let i = 0; i < thisCount / 4; i++) {
+                mainOptions =
+                    `<li
+					class="${IDs.mainOption}"
+					style="
+						height: ${direction === 'vertical' ? itemHeight + 'px' : '100%'};
+						left: ${direction === 'vertical' ? '0' : itemWidth * -0.5 + 'px'};
+						line-height: ${itemHeight + 'px' || 'normal'};
+						top: ${direction === 'vertical' ? itemHeight * -0.5 + 'px' : '0'};
+						width: ${direction === 'vertical' ? '100%' : itemWidth + 'px'};
+						transform: ${
+                            (direction === 'vertical' ? 'rotateX(' : 'rotateY(') + itemAngle * (i + 1)
+                        }deg) translate3d(0, 0, ${radius}px);"
+					data-index="${-i - 1}">
+					${data[lengthData - i - 1].text || data[lengthData - i - 1].value}
+				</li>` + mainOptions;
+
+                mainOptions += `<li
+					class="${IDs.mainOption}"
+					style="
+						height: ${direction === 'vertical' ? itemHeight + 'px' : '100%'};
+						left: ${direction === 'vertical' ? '0' : itemWidth * -0.5 + 'px'};
+						line-height: ${itemHeight + 'px' || 'normal'};
+						top: ${direction === 'vertical' ? itemHeight * -0.5 + 'px' : '0'};
+						width: ${direction === 'vertical' ? '100%' : itemWidth + 'px'};
+						transform: ${
+                            (direction === 'vertical' ? 'rotateX(' : 'rotateY(') + -itemAngle * (i + lengthData)
+                        }deg) translate3d(0, 0, ${radius}px);"
+					data-index="${i + lengthData}">
+					${data[i].text || data[i].value}</li>`;
+            }
+            highlightOptions =
+                `<li
+				class="${IDs.highlightOption}"
+				style="
+					height: ${direction === 'vertical' ? itemHeight + 'px' : '100%'};
+					width: ${direction === 'vertical' ? '100%' : itemWidth + 'px'};">
+				${data[lengthData - 1].text || data[lengthData - 1].value}</li>` + highlightOptions;
+            highlightOptions += `<li 
+				class="${IDs.highlightOption}"
+				style="
+					height: ${direction === 'vertical' ? itemHeight + 'px' : '100%'};
+					width: ${direction === 'vertical' ? '100%' : itemWidth + 'px'};">
+				${data[0].text || data[0].value}</li>`;
+
+            highlightSelectorRef.current.style.top = direction === 'vertical' ? -itemHeight - 2 + 'px' : 'auto';
+            highlightSelectorRef.current.style.left = direction === 'vertical' ? 'auto' : -itemWidth - 2 + 'px';
+        }
+        mainSelectorRef.current.innerHTML = mainOptions;
+        highlightSelectorRef.current.innerHTML = highlightOptions;
+    };
+    const normalizeScroll = scroll => {
+        let normalizedScroll = scroll;
+
+        while (normalizedScroll < 0) {
+            normalizedScroll += data.length;
+        }
+        normalizedScroll = normalizedScroll % data.length;
+        return normalizedScroll;
+    };
+    const moveTo = scroll => {
+        if (type === 'infinite') {
+            scroll = normalizeScroll(scroll);
+        }
+        if (!mainSelectorRef.current) return;
+        mainSelectorRef.current.style.transform = `translate3d(0, 0, ${-radius}px) rotateX(${itemAngle * scroll}deg)`;
+        highlightSelectorRef.current.style.transform = `translate3d(0, ${
+            -scroll * (direction === 'vertical' ? itemHeight : itemWidth)
+        }px, 0)`;
+
+        const arrayOptions = [...mainSelectorRef.current.childNodes];
+        arrayOptions.forEach(option => {
+            if (Math.abs(option.dataset.index - scroll) > thisCount / 4) {
+                option.style.visibility = 'hidden';
+            } else {
+                option.style.visibility = 'visible';
+            }
+        });
+        return scroll;
+    };
+    const stop = () => {
+        thisMoving = false;
+        cancelAnimationFrame(thisMoveT);
+    };
+    const animateToScroll = (initScroll, finalScroll, t, easingName = 'easingOutCubic') => {
+        if (initScroll === finalScroll || t === 0) {
+            moveTo(initScroll);
+            return;
+        }
+
+        let start = new Date().getTime() / 1200;
+        let pass = 0;
+        let totalScrollLen = finalScroll - initScroll;
+
+        return new Promise(resolve => {
+            thisMoving = true;
+            let tick = () => {
+                pass = new Date().getTime() / 1200 - start;
+                if (pass < t) {
+                    thisScroll = moveTo(initScroll + easing[easingName](pass / t) * totalScrollLen);
+                    thisMoveT = requestAnimationFrame(tick);
+                } else {
+                    resolve();
+                    stop();
+                    thisScroll = moveTo(initScroll + totalScrollLen);
+                }
+            };
+            tick();
+        });
+    };
+    const selectByScroll = scroll => {
+        scroll = normalizeScroll(scroll) | 0;
+        if (scroll > data.length - 1) {
+            scroll = data.length - 1;
+            moveTo(scroll);
+        }
+        moveTo(scroll);
+        thisScroll = scroll;
+        thisSelected = data[scroll];
+        thisValue = thisSelected.value;
+        if (onChange) onChange(thisSelected);
+    };
+    const select = value => {
+        for (let i in data) {
+            if (data[i].value === value) {
+                window.cancelAnimationFrame(thisMoveT);
+
+                let initScroll = normalizeScroll(thisScroll);
+                let finalScroll = i;
+                let t = Math.sqrt(Math.abs(finalScroll - initScroll) / thisA);
+                animateToScroll(initScroll, finalScroll, t);
+                setTimeout(() => selectByScroll(i));
+                return;
+            }
+        }
+        throw new Error(`Can not select value: ${value}, ${value} match nothing in current data`);
+    };
+    const animateMoveByInitV = async initV => {
+        let initScroll;
+        let finalScroll;
+        let finalV;
+
+        let totalScrollLen;
+        let a;
+        let t;
+
+        if (type === 'infinite') {
+            initScroll = thisScroll;
+            a = initV > 0 ? -thisA : thisA;
+            t = Math.abs(initV / a);
+            totalScrollLen = initV * t + (a * t * t) / 2;
+            finalScroll = Math.round(thisScroll + totalScrollLen);
+            await animateToScroll(thisScroll, finalScroll, t);
+        } else {
+            if (thisScroll < 0 || thisScroll > data.length - 1) {
+                a = thisExceedA;
+                initScroll = thisScroll;
+                finalScroll = thisScroll < 0 ? 0 : data.length - 1;
+                totalScrollLen = initScroll - finalScroll;
+                t = Math.sqrt(Math.abs(totalScrollLen / a));
+                initV = a * t;
+                initV = thisScroll > 0 ? -initV : initV;
+                finalV = 0;
+                await animateToScroll(initScroll, finalScroll, t);
+            } else {
+                initScroll = thisScroll;
+                a = initV > 0 ? -thisA : thisA;
+                t = Math.abs(initV / a);
+                totalScrollLen = initV * a + (a * t * t) / 2;
+                finalScroll = Math.round(thisScroll + totalScrollLen);
+                finalScroll = finalScroll < 0 ? 0 : finalScroll > data.length - 1 ? data.length - 1 : finalScroll;
+                totalScrollLen = finalScroll - initScroll;
+                t = Math.sqrt(Math.abs(totalScrollLen / a));
+                await animateToScroll(thisScroll, finalScroll, t);
+            }
+        }
+
+        selectByScroll(thisScroll);
+    };
+    const touchstart = (e, touchData, parent) => {
+        parent.addEventListener('touchmove', events.touchmove, {
+            passive: true,
+        });
+        parent.addEventListener('mousemove', events.touchmove);
+
+        let event = e.clientY || e.touches[0].clientY;
+        touchData.start = event;
+        touchData.array = [[event, new Date().getTime()]];
+        touchData.touchScroll = thisScroll;
+        stop();
+    };
+    const touchmove = (e, touchData, parent) => {
+        let event = e.clientY || e.touches[0].clientY;
+        touchData.array.push([event, new Date().getTime()]);
+
+        if (touchData.array.length > 5) {
+            touchData.array.unshift();
+        }
+
+        let scrollAdd = (touchData.start - event) / (direction === 'vertical' ? itemHeight : itemWidth);
+        let moveToScroll = scrollAdd + thisScroll;
+
+        if (type === 'infinite') {
+            moveToScroll = normalizeScroll(moveToScroll);
+        } else {
+            if (moveToScroll < 0) {
+                moveToScroll *= 0.3;
+            } else if (moveToScroll > data.length) {
+                moveToScroll = data.length + (moveToScroll - data.length) * 0.3;
+            }
+        }
+        touchData.touchScroll = moveTo(moveToScroll);
+    };
+    const touchend = (e, touchData, parent) => {
+        parent.removeEventListener('touchmove', events.touchmove, {
+            passive: true,
+        });
+        parent.removeEventListener('mousemove', events.touchmove);
+
+        let v;
+
+        if (touchData.array.length === 1) {
+            v = 0;
+        } else {
+            let startT = touchData.array[touchData.array.length - 2][1];
+            let endT = touchData.array[touchData.array.length - 1][1];
+            let start = touchData.array[touchData.array.length - 2][0];
+            let end = touchData.array[touchData.array.length - 1][0];
+
+            v = (((start - end) / (direction === 'vertical' ? itemHeight : itemWidth)) * 1000) / (endT - startT);
+
+            let sign = v > 0 ? 1 : -1;
+
+            v = Math.abs(v) > 30 ? 30 * sign : v;
+        }
+
+        thisScroll = touchData.touchScroll;
+        animateMoveByInitV(v);
+    };
+    const init = parent => {
+        renderSwiper(data);
+        let touchData = { start: 0, array: [] };
+
+        events.touchstart = e => {
+            if (parent.contains(e.target) || e.target === parent) {
+                e.preventDefault();
+                if (data.length) {
+                    touchstart(e, touchData, parent);
+                }
+            }
+        };
+
+        events.touchmove = e => {
+            if (parent.contains(e.target) || e.target === parent) {
+                e.preventDefault();
+                if (data.length) {
+                    touchmove(e, touchData, parent);
+                }
+            }
+        };
+
+        events.touchend = e => {
+            if (parent.contains(e.target) || e.target === parent) {
+                e.preventDefault();
+                if (data.length) {
+                    touchend(e, touchData, parent);
+                }
+            }
+        };
+
+        parent.addEventListener('touchstart', events.touchstart, { passive: true });
+        parent.addEventListener('touchend', events.touchend, { passive: true });
+        parent.addEventListener('mousedown', events.touchstart);
+        parent.addEventListener('mouseup', events.touchend);
+        if (data.length) {
+            thisValue = defaultValue ? defaultValue : data[0].value;
+            select(thisValue);
+        }
+    };
+    const destroy = parent => {
+        stop();
+        for (let eventName in events) {
+            parent.removeEventListener(eventName, events[eventName]);
+        }
+        parent.removeEventListener('mousedown', events.touchstart);
+        parent.removeEventListener('mousemove', events.touchmove);
+        parent.removeEventListener('mouseup', events.touchend);
+
+        parent.innerHTML = '';
+    };
+    // useEffect(() => {
+    // 	const parent = (parentNode && parentNode.current) || (containerRef.current && containerRef.current.parentNode);
+    // 	init(parent);
+    // });
+
+    useEffect(() => {
+        const parent = (parentNode && parentNode.current) || (containerRef.current && containerRef.current.parentNode);
+        init(parent);
+        return () => {
+            destroy(parent);
+        };
+    }, []);
+
+    useEffect(() => {
+        if (value) {
+            select(value);
+        }
+    }, [value]);
+    return (
+        <div
+            {...other}
+            className={IDs.container}
+            css={styles.container}
+            ref={containerRef}
+            style={{ ...containerStyle }}
+        >
+            <ul
+                className={IDs.mainSelector}
+                css={styles.mainSelector}
+                ref={mainSelectorRef}
+                style={{ ...mainSelectorStyle }}
+            />
+            <div className={IDs.highlight} css={styles.highlightContainer}>
+                <ul className={IDs.highlightSelector} css={styles.highlightSelector} ref={highlightSelectorRef} />
+            </div>
+        </div>
+    );
+};
+
+Swiper.defaultProps = {
+    containerStyle: {},
+    count: 18,
+    data: getHours(),
+    defaultValue: 0,
+    direction: 'vertical',
+    height: 300,
+    mainSelectorStyle: {},
+    sensitivity: 0.8,
+    type: 'infinite',
+    width: 200,
+};
+
+Swiper.propTypes = {
+    containerStyle: PropTypes.object,
+    count: PropTypes.number,
+    data: PropTypes.array,
+    defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    direction: PropTypes.oneOf(['vertical', 'horizontal']),
+    height: PropTypes.number,
+    mainSelectorStyle: PropTypes.object,
+    sensitivity: PropTypes.number,
+    type: PropTypes.oneOf(['infinite', 'normal']),
+    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    width: PropTypes.number,
+};
+
+export default Swiper;