diginet-core-ui 1.4.39 → 1.4.40

package/src/components/progress/linear.js

@@ -0,0 +1,361 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx, keyframes } from '@emotion/core';
+import { Typography } from 'components';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import {
+    bgColor,
+    borderRadius,
+    insetY,
+    left,
+    overflowHidden,
+    parseWidth,
+    parseWidthHeight,
+    positionAbsolute,
+    positionRelative,
+    shadowSmall,
+    textColor,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import { getProp } from 'utils';
+
+const cutPX = x => {
+    return isNaN(x) ? x : x + 'px';
+};
+
+const validatePercent = p => {
+    let per = +p.toString().replace('%', '');
+    return Math.max(Math.min(per, 100), 0);
+};
+
+const Indeterminate = forwardRef(
+    ({ background: backgroundProp, className, color: colorProp, height, width, ...props }, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const ref = useRef(null);
+        const firstBarRef = useRef(null);
+        const secondBarRef = useRef(null);
+
+        const theme = useTheme();
+
+        const background = getProp(theme.colors, backgroundProp, backgroundProp);
+        const color = getProp(theme.colors, colorProp, colorProp);
+
+        const unique = {
+            container: 'DGN-UI-LinearProgress-Determinate',
+            firstBar: 'DGN-UI-LinearProgress-Determinate-BarFirst',
+            secondBar: 'DGN-UI-LinearProgress-Determinate-BarSecond',
+        };
+        const animation = {
+            keyframeStart: keyframes`
+            from {
+                max-height: 0;
+                opacity: 0;
+            }
+            to {
+                max-height: 20px;
+                opacity: 1;
+            }
+        `,
+            keyframeMove: keyframes`
+            0% {
+                left: -100%;
+            }
+            50% {
+                left: 100%;
+            }
+            100% {
+                left: 100%;
+            }
+        `,
+        };
+        const ContainerCSS = css`
+            animation: ${animation.keyframeStart} 0.3s ease-in;
+            ${bgColor(background)};
+            ${borderRadius(4)};
+            ${shadowSmall};
+            ${parseWidthHeight(cutPX(width), cutPX(height))}
+            ${overflowHidden};
+            ${positionRelative};
+            .${unique.firstBar} {
+                animation: ${animation.keyframeMove} 3s infinite;
+                ${bgColor(color)};
+                ${borderRadius(4)};
+                ${insetY(0)};
+                ${left(0)};
+                ${positionAbsolute};
+                transition: transform 0.3s ease-in-out;
+                ${parseWidth('100%')};
+            }
+            .${unique.secondBar} {
+                animation-delay: 1.5s;
+                animation: ${animation.keyframeMove} 3s infinite;
+                ${bgColor(color)};
+                ${borderRadius(4)};
+                ${insetY(0)};
+                ${left('-100%')};
+                ${positionAbsolute};
+                transition: transform 0.3s ease-in-out;
+                ${parseWidth('100%')};
+            }
+        `;
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {}; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        const FirstBar = useMemo(() => <div className={unique.firstBar} ref={firstBarRef} />, [color, theme]);
+        const SecondBar = useMemo(() => <div className={unique.secondBar} ref={secondBarRef} />, [color, theme]);
+
+        return (
+            <div {...props} className={[unique.container, className].join(' ').trimEnd()} css={ContainerCSS} ref={ref}>
+                {FirstBar}
+                {SecondBar}
+            </div>
+        );
+    }
+);
+Indeterminate.defaultProps = {
+    background: 'line/category',
+    color: 'semantic/info',
+    height: 8,
+    width: '100%',
+};
+Indeterminate.propTypes = {
+    background: PropTypes.string,
+    className: PropTypes.string,
+    color: PropTypes.string,
+    height: PropTypes.number,
+    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+export const IndeterminateLinearProgress = memo(Indeterminate);
+
+const Determinate = forwardRef(
+    (
+        {
+            background: backgroundProp,
+            color: colorProp,
+            className,
+            duration,
+            height,
+            percent,
+            percentColor: percentColorProp,
+            showValue,
+            valuePosition,
+            width,
+            ...props
+        },
+        ref
+    ) => {
+        if (!ref) ref = useRef(null);
+        const barRef = useRef(null);
+        const valueRef = useRef(null);
+
+        const theme = useTheme();
+
+        const background = getProp(theme.colors, backgroundProp, backgroundProp);
+        const color = getProp(theme.colors, colorProp, colorProp);
+        const percentColor = getProp(theme.colors, percentColorProp, percentColorProp);
+
+        const unique = {
+            container: 'DGN-UI-LinearProgress-Determinate',
+            bar: 'DGN-UI-LinearProgress-Determinate-Bar',
+            value: 'DGN-UI-LinearProgress-Determinate-Value',
+        };
+        const keyframeStart = keyframes`
+        from {
+            max-height: 0;
+            opacity: 0;
+        }
+        to {
+            max-height: 20px;
+            opacity: 1;
+        }
+    `;
+        const containerCSS = css`
+            animation: ${keyframeStart} 0.3s ease-in;
+            ${bgColor(background)};
+            border-radius: 4px;
+            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+            height: ${cutPX(height)};
+            position: relative;
+            width: ${cutPX(width)};
+            .${unique.bar} {
+                ${bgColor(color)};
+                border-radius: 4px;
+                bottom: 0;
+                left: 0;
+                position: absolute;
+                top: 0;
+                transition: width ${duration}s cubic-bezier(0.77, 0, 0.175, 1); /* easeInOutQuart */
+            }
+            .${unique.value} {
+                ${textColor(percentColor ? percentColor : color)};
+                margin: 4px 0;
+                min-width: max-content;
+                position: absolute;
+                transform: translateX(-50%);
+                transition: left ${duration}s cubic-bezier(0.77, 0, 0.175, 1); /* easeInOutQuart */
+                user-select: none;
+                ${valuePosition === 'bottom' ? 'top: 100%;' : 'bottom: 100%;'};
+            }
+        `;
+
+        const updateValuePosition = value => {
+            valueRef.current.firstChild.innerText = value + '%';
+            const valHalfWidth = valueRef.current.getBoundingClientRect().width / 2;
+            if (value > 90) {
+                valueRef.current.style.left = `calc(${value + '%'} - ${valHalfWidth}px)`;
+            } else if (value < 10) {
+                valueRef.current.style.left = `calc(${value + '%'} + ${valHalfWidth}px)`;
+            } else {
+                valueRef.current.style.left = value + '%';
+            }
+        };
+
+        const Bar = useMemo(() => <div className={unique.bar} ref={barRef} />, [color, duration, percent, theme]);
+        const Value = useMemo(
+            () =>
+                showValue && (
+                    <span className={unique.value} ref={valueRef}>
+                        <Typography
+                            type={'p2'}
+                            color={'inherit'}
+                            style={{ textShadow: '0px 2px 4px rgba(0,0,0,0.3)' }}
+                        ></Typography>
+                    </span>
+                ),
+            [duration, percentColor, showValue, valuePosition, theme]
+        );
+
+        useEffect(() => {
+            const value = validatePercent(percent);
+            barRef.current.style.width = value + '%';
+            if (showValue) {
+                updateValuePosition(value);
+            }
+        }, [percent, showValue]);
+
+        return (
+            <div {...props} className={[unique.container, className].join(' ').trim()} css={containerCSS} ref={ref}>
+                {Bar}
+                {Value}
+            </div>
+        );
+    }
+);
+Determinate.defaultProps = {
+    background: 'line/category',
+    color: 'semantic/info',
+    duration: 0.1,
+    height: 8,
+    percent: 69,
+    showValue: false,
+    valuePosition: 'bottom',
+    width: '100%',
+};
+Determinate.propTypes = {
+    background: PropTypes.string,
+    className: PropTypes.string,
+    color: PropTypes.string,
+    duration: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    percent: PropTypes.number,
+    percentColor: PropTypes.string,
+    showValue: PropTypes.bool,
+    valuePosition: PropTypes.oneOf(['bottom', 'top']),
+    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+export const DeterminateLinearProgress = memo(Determinate);
+
+const LinearProgress = memo(
+    forwardRef(
+        (
+            {
+                background,
+                className,
+                color,
+                determinate,
+                duration,
+                height,
+                percent,
+                percentColor,
+                showValue,
+                valuePosition,
+                width,
+                ...props
+            },
+            ref
+        ) => {
+            if (!ref) ref = useRef(null);
+            return determinate ? (
+                <DeterminateLinearProgress
+                    background={background}
+                    className={className}
+                    color={color}
+                    duration={duration}
+                    height={height}
+                    percent={percent}
+                    percentColor={percentColor}
+                    showValue={showValue}
+                    valuePosition={valuePosition}
+                    width={width}
+                    {...props}
+                    ref={ref}
+                />
+            ) : (
+                <IndeterminateLinearProgress
+                    background={background}
+                    className={className}
+                    color={color}
+                    height={height}
+                    width={width}
+                    {...props}
+                    ref={ref}
+                />
+            );
+        }
+    )
+);
+LinearProgress.defaultProps = {
+    background: 'line/category',
+    color: 'semantic/info',
+    determinate: false,
+    duration: 0.1,
+    height: 8,
+    percent: 69,
+    showValue: false,
+    width: '100%',
+};
+LinearProgress.propTypes = {
+    /** Color for background stroke of the linear progress. */
+    background: PropTypes.string,
+    /** className use in linear progress. */
+    className: PropTypes.string,
+    /** color of liner progress. */
+    color: PropTypes.string,
+    /** Determinate or Indeterminate. */
+    determinate: PropTypes.bool,
+    /** Time to processing. */
+    duration: PropTypes.number,
+    /** Dynamic height dimensions of the container. */
+    height: PropTypes.number,
+    /** The percent of the determinate progress. */
+    percent: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Color percent-label of the progress. */
+    percentColor: PropTypes.string,
+    /** It's boolean to show the percent-label. */
+    showValue: PropTypes.bool,
+    /** Dynamic position of the progress value. */
+    valuePosition: PropTypes.oneOf(['bottom', 'top']),
+    /** Dynamic width dimensions of the container. */
+    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+export default LinearProgress;

package/src/components/rating/index.js

@@ -0,0 +1,309 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { StarHalf, StarOutline } from 'icons';
+import PropTypes from 'prop-types';
+import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import {
+    bgColor,
+    border,
+    borderColor,
+    cursorPointer,
+    displayInlineFlex,
+    flexRow,
+    flexRowReverse,
+    itemsCenter,
+    outlineNone,
+    overflowHidden,
+    parseWidth,
+    pointerEventsNone,
+    positionAbsolute,
+    positionRelative,
+    textColor,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import { classNames, getProp, hexToRGBA, randomString } from 'utils';
+
+const Rating = memo(
+    forwardRef(
+        (
+            {
+                id,
+                disabled,
+                readOnly,
+                half,
+                width,
+                height,
+                selector,
+                quantity,
+                defaultValue,
+                value,
+                color: colorProp,
+                className,
+                style,
+                onRating,
+            },
+            reference
+        ) => {
+            if (height === undefined) height = width;
+
+            const ref = useRef(null);
+            const [unique] = useState(randomString(6, { allowSymbol: false, allowNumber: false }));
+            const [valueState, setValueState] = useState(value || defaultValue);
+
+            const theme = useTheme();
+
+            const color = getProp(theme.colors, colorProp, colorProp);
+
+            const _RatingItemHaftCSS = RatingItemHaftCSS(color, theme);
+            const _RatingItemCSS = RatingItemCSS(_RatingItemHaftCSS.name, color, half, theme);
+            const _RatingSelectCSS = RatingSelectCSS(theme);
+
+            const onSelectValue = e => {
+                if (disabled || readOnly) return;
+                const newValue = +e.target.value;
+                e.value = newValue;
+                setValueState(newValue);
+                !!onRating && onRating(e, newValue);
+            };
+
+            const _onRating = (e, value, isHalf = false) => {
+                if (disabled || readOnly || (half && !isHalf)) return;
+                setValueState(value);
+                !!onRating && onRating(e, value);
+            };
+
+            useEffect(() => {
+                setValueState(value);
+            }, [value]);
+
+            useImperativeHandle(reference, () => {
+                const currentRef = ref.current || {};
+                const _instance = {}; // methods
+                _instance.__proto__ = {}; // hidden methods
+                currentRef.instance = _instance;
+                return currentRef;
+            });
+
+            return useMemo(() => {
+                let ArrayRating = [];
+                [...Array(quantity).keys()].reverse().forEach(item => (ArrayRating = [...ArrayRating, item + 1]));
+                return (
+                    <div
+                        id={id}
+                        css={RatingRootCSS}
+                        ref={ref}
+                        style={style}
+                        className={classNames(
+                            'DGN-UI-Rating',
+                            className,
+                            disabled && 'disabled',
+                            readOnly && 'read-only'
+                        )}
+                    >
+                        {selector && (
+                            <select
+                                css={_RatingSelectCSS}
+                                name={`DGN-UI-Rating-Select-${unique}`}
+                                id={`DGN-UI-Rating-Select-${unique}`}
+                                disabled={disabled}
+                                value={valueState}
+                                onChange={onSelectValue}
+                            >
+                                <option value={''} id={unique + '-0'}>
+                                    {0}
+                                </option>
+                                {ArrayRating.map((i, idx) =>
+                                    half ? (
+                                        <Fragment key={i}>
+                                            <option value={idx + 0.5}>{idx + 0.5}</option>
+                                            <option value={idx + 1}>{idx + 1}</option>
+                                        </Fragment>
+                                    ) : (
+                                        <option key={i} value={idx + 1}>
+                                            {idx + 1}
+                                        </option>
+                                    )
+                                )}
+                            </select>
+                        )}
+                        {ArrayRating.map(i => (
+                            <span
+                                css={_RatingItemCSS}
+                                key={i}
+                                className={classNames(
+                                    'DGN-UI-Rating-Item',
+                                    disabled && 'disabled',
+                                    i <= valueState && 'chosen'
+                                )}
+                                onClick={e => _onRating(e, i)}
+                            >
+                                <StarOutline
+                                    width={width}
+                                    height={height}
+                                    color={disabled ? getProp(theme.colors, 'system/rest') : color || 'currentColor'}
+                                />
+                                <span
+                                    css={_RatingItemHaftCSS}
+                                    className={classNames(
+                                        'DGN-UI-Rating-Item-Star right',
+                                        disabled && 'disabled',
+                                        half && 'half',
+                                        i <= valueState ? 'chosen' : ''
+                                    )}
+                                    onClick={e => half && _onRating(e, i, true)}
+                                >
+                                    <StarHalf width={width} height={height} color={'currentColor'} />
+                                </span>
+                                <span
+                                    css={_RatingItemHaftCSS}
+                                    className={classNames(
+                                        'DGN-UI-Rating-Item-Star left',
+                                        disabled && 'disabled',
+                                        half && 'half',
+                                        i - 0.5 <= valueState ? 'chosen' : ''
+                                    )}
+                                    onClick={e => half && _onRating(e, i - 0.5, true)}
+                                >
+                                    <StarHalf width={width} height={height} color={'currentColor'} />
+                                </span>
+                            </span>
+                        ))}
+                    </div>
+                );
+            }, [half, color, quantity, readOnly, disabled, selector, width, height, onRating, theme, valueState]);
+        }
+    )
+);
+
+const RatingRootCSS = css`
+    ${displayInlineFlex};
+    ${flexRowReverse};
+    &.disabled,
+    &.read-only {
+        ${pointerEventsNone};
+    }
+`;
+
+const RatingSelectCSS = ({ colors, spacing, typography }) => css`
+    ${outlineNone};
+    ${typography.paragraph3};
+    ${border(1, getProp(colors, 'line/normal'))};
+    margin-left: ${spacing([1])};
+    ${textColor(getProp(colors, 'system/active'))};
+    &:hover {
+        ${borderColor(getProp(colors, 'system/active'))};
+        ${bgColor(hexToRGBA(getProp(colors, 'system/active'), 0.2))};
+    }
+    &:active,
+    &:focus {
+        ${borderColor(getProp(colors, 'semantic/info'))};
+    }
+    option {
+        ${bgColor(getProp(colors, 'system/standard'))};
+    }
+`;
+
+const RatingItemHaftCSS = (color, theme) => css`
+    ${flexRow};
+    ${positionAbsolute};
+    ${overflowHidden};
+    ${parseWidth('50%')};
+    svg {
+        ${cursorPointer};
+        ${textColor('transparent')};
+        transition: color 0.15s linear;
+        transform: scale(2);
+        transform-origin: left;
+    }
+    &.right {
+        transform: rotateY(180deg);
+        right: 0;
+    }
+    &.half {
+        svg:hover,
+        &.right:hover + span svg,
+        &.chosen svg {
+            ${textColor(color)};
+        }
+        &.chosen {
+            &.disabled svg {
+                ${textColor(getProp(theme.colors, 'system/rest'))};
+            }
+        }
+    }
+`;
+
+const RatingItemCSS = (RatingItemHaftCSSName, color, half, theme) => css`
+    ${displayInlineFlex};
+    ${positionRelative};
+    ${itemsCenter};
+    svg {
+        transition: color 0.15s linear;
+    }
+    &:hover ~ span > span.css-${RatingItemHaftCSSName}, ${half ? '' : `&:hover,`} &:hover ~ span.full,
+    &.chosen ~ span > span.css-${RatingItemHaftCSSName}, ${half ? '' : `&.chosen,`} &.chosen ~ span.full {
+        svg {
+            ${textColor(color)};
+        }
+    }
+    &.disabled {
+        &.chosen {
+            svg {
+                color: ${getProp(theme.colors, 'system/active')} !important;
+            }
+        }
+    }
+`;
+
+Rating.defaultProps = {
+    disabled: false,
+    readOnly: false,
+    half: false,
+    selector: false,
+    width: 20,
+    quantity: 5,
+    defaultValue: 0,
+    color: 'primary',
+    className: '',
+};
+
+Rating.propTypes = {
+    /** If true, the component is disabled. */
+    disabled: PropTypes.bool,
+    /** Removes all hover effects and pointer events. */
+    readOnly: PropTypes.bool,
+    /** Allows rating with an odd number of stars. */
+    half: PropTypes.bool,
+    /** Display select box to select by number. */
+    selector: PropTypes.bool,
+    /** The default number of stars is selected. */
+    defaultValue: PropTypes.number,
+    /** The number of stars is selected. */
+    value: PropTypes.number,
+    /** The maximum number of stars allowed to rate. */
+    quantity: PropTypes.number,
+    /** Width of star icon. */
+    width: PropTypes.number,
+    /** Height of star icon. */
+    height: PropTypes.number,
+    /** Color of stars, ['primary', 'info', 'success', 'warning', 'danger', #hex, rgb(#, #, #)]. */
+    color: PropTypes.string,
+    /** Class for component. */
+    className: PropTypes.string,
+    /** Style inline of component. */
+    style: PropTypes.object,
+    /**
+    * Callback fired when the value changes.
+    * 
+
+    function(event: React.SyntheticEvent, value: number) => void
+    *
+    * event: The event source of the callback.
+    * 
+    * value: The new value.
+    */
+    onRating: PropTypes.func,
+};
+
+export default Rating;