diginet-core-ui 1.4.39 → 1.4.40

package/src/components/progress/circular.js

@@ -0,0 +1,326 @@
+/* eslint-disable no-unused-vars */
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx, keyframes } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { displayInlineBlock, fill, parseWidthHeight, userSelectNone } from 'styles/general';
+import { useTheme } from 'theme';
+import { classNames, getProp } from 'utils';
+
+const validatePercent = percent => {
+    let per = +percent.toString().replace('%', '');
+    return Math.max(Math.min(per, 100), 0);
+};
+
+const getDimensionOld = (size, theme) => {
+    let width, labelStyle, rect, strokeWidth;
+    switch (size) {
+        case 'xl':
+        case 'extraLarge':
+            labelStyle = theme.typography.heading1;
+            width = 240;
+            rect = 120;
+            strokeWidth = 16;
+            break;
+        case 'lg':
+        case 'large':
+            labelStyle = theme.typography.heading2;
+            width = 160;
+            rect = 80;
+            strokeWidth = 12;
+            break;
+        case 'md':
+        case 'medium':
+            labelStyle = theme.typography.paragraph1;
+            width = 120;
+            rect = 60;
+            strokeWidth = 8;
+            break;
+        case 'sm':
+        case 'small':
+            labelStyle = theme.typography.paragraph2;
+            width = 80;
+            rect = 40;
+            strokeWidth = 6;
+            break;
+        case 'xs':
+        case 'extraSmall':
+            labelStyle = theme.typography.paragraph3;
+            width = 40;
+            rect = 20;
+            strokeWidth = 4;
+            break;
+        default:
+            return null;
+    }
+    return { labelStyle, rect, strokeWidth, width };
+};
+
+const getDimension = (size, theme) => {
+    const sizeObj = { width: Number(size), rect: size / 2 };
+
+    const designTemplate = [
+        { width: 16, labelStyle: theme.typography.paragraph3, rect: 8, strokeWidth: 2 },
+        { width: 24, labelStyle: theme.typography.paragraph3, rect: 12, strokeWidth: 2 },
+        { width: 40, labelStyle: theme.typography.paragraph3, rect: 20, strokeWidth: 4 },
+        { width: 80, labelStyle: theme.typography.paragraph2, rect: 40, strokeWidth: 6 },
+        { width: 120, labelStyle: theme.typography.paragraph1, rect: 60, strokeWidth: 8 },
+        { width: 160, labelStyle: theme.typography.heading2, rect: 80, strokeWidth: 12 },
+        { width: 240, labelStyle: theme.typography.heading1, rect: 120, strokeWidth: 16 },
+    ];
+
+    if (size <= 16) {
+        return { ...designTemplate[0], ...sizeObj };
+    } else if (size >= 240) {
+        return { ...designTemplate[designTemplate.length - 1], ...sizeObj };
+    } else {
+        const templateObj = designTemplate.reduce((acc, obj) =>
+            // Math.abs(size - obj.width) < Math.abs(size - acc.width) ? obj : acc
+            size > obj.width ? obj : acc
+        );
+        return { ...templateObj, ...sizeObj };
+    }
+};
+
+const directionAngleMap = new Map([
+    ['top', -90],
+    ['bottom', 90],
+    ['right', 0],
+    ['left', -180],
+]);
+
+const CircularProgress = memo(
+    forwardRef(
+        (
+            {
+                action = {},
+                background: backgroundProp,
+                circleRef,
+                className,
+                color: colorProp,
+                determinate,
+                direction,
+                duration,
+                id,
+                percent,
+                percentColor: percentColorProp,
+                showValue,
+                size,
+                strokeWidth,
+                style,
+                width,
+            },
+            reference
+        ) => {
+            const ref = useRef(null);
+            if (!circleRef) circleRef = useRef(null);
+
+            const theme = useTheme();
+
+            const directionAngle = directionAngleMap.get(direction);
+            const dimension = getDimensionOld(size, theme) || getDimension(size, theme);
+            const containerW = width ? Math.max(determinate ? 24 : 16, width) : dimension.width;
+            const circleStrokeW = strokeWidth ? Math.max(2, strokeWidth) : dimension.strokeWidth;
+            const radius = Math.max(0, (containerW - circleStrokeW) / 2);
+            const radiusX10 = radius * 10;
+            const circumference = radius * 2 * Math.PI;
+
+            const background = getProp(theme.colors, backgroundProp, backgroundProp);
+            const color = getProp(theme.colors, colorProp, colorProp);
+            const percentColor = getProp(theme.colors, percentColorProp, percentColorProp);
+
+            const _ContainerCSS = ContainerCSS(containerW, directionAngle);
+            const _CircleBackgroundCSS = CircleBackgroundCSS(background, !determinate, theme);
+            const _CircleMainCSS = CircleMainCSS(color, theme);
+            const _CircleMainIndeterminateCSS = CircleMainIndeterminateCSS(radiusX10);
+            const _CircleMainDeterminateCSS = CircleMainDeterminateCSS(circumference, percent, duration);
+            const _TextCSS = TextCSS(percentColor, color, dimension, directionAngle, theme);
+
+            useImperativeHandle(reference, () => {
+                const currentRef = ref.current || {};
+                currentRef.element = ref.current;
+                const _instance = {
+                    ...action,
+                }; // methods
+                _instance.__proto__ = {}; // hidden methods
+                currentRef.instance = _instance;
+                return currentRef;
+            });
+
+            const CircleBackgroundView = (
+                <circle
+                    css={_CircleBackgroundCSS}
+                    cx={containerW / 2}
+                    cy={containerW / 2}
+                    r={radius}
+                    strokeWidth={circleStrokeW}
+                />
+            );
+
+            const CircleMainView = (
+                <circle
+                    css={[_CircleMainCSS, determinate ? _CircleMainDeterminateCSS : _CircleMainIndeterminateCSS]}
+                    cx={containerW / 2}
+                    cy={containerW / 2}
+                    r={radius}
+                    strokeWidth={circleStrokeW}
+                    ref={circleRef}
+                />
+            );
+
+            const PercentTextView =
+                showValue && determinate && containerW >= 40 ? (
+                    <text
+                        css={_TextCSS}
+                        dominantBaseline={'middle'}
+                        x={containerW / 2}
+                        y={containerW / 2 + containerW / 80}
+                    >
+                        {validatePercent(percent)}%
+                    </text>
+                ) : null;
+
+            return useMemo(() => {
+                return (
+                    <span
+                        ref={ref}
+                        css={[_ContainerCSS, !determinate && AnimationRotateCSS]}
+                        id={id}
+                        style={style}
+                        className={classNames('DGN-UI-Circular-Progress', className)}
+                    >
+                        <svg width={'100%'} height={'100%'}>
+                            {CircleBackgroundView}
+                            {CircleMainView}
+                            {PercentTextView}
+                        </svg>
+                    </span>
+                );
+            }, [
+                backgroundProp,
+                className,
+                colorProp,
+                determinate,
+                direction,
+                duration,
+                id,
+                percent,
+                percentColorProp,
+                showValue,
+                size,
+                strokeWidth,
+                style,
+                width,
+                theme,
+            ]);
+        }
+    )
+);
+
+const keyframeRotate = keyframes`
+	100%{ transform: rotate(360deg);}
+`;
+
+const keyframeDash = r => keyframes`
+	0%{
+		stroke-dasharray: 1, ${r};
+		stroke-dashoffset: 0;
+	}
+	40%{
+		stroke-dasharray: ${(r * 89) / 200}, ${r};
+		stroke-dashoffset: -${(r * 35) / 200};
+	}
+	100%{
+		stroke-dasharray: ${(r * 89) / 200}, ${r};
+		stroke-dashoffset: -${(r * 124) / 200};
+	}
+`;
+
+const ContainerCSS = (containerW, directionAngle) => css`
+    ${displayInlineBlock};
+    ${parseWidthHeight(containerW)};
+    transform: rotate(${directionAngle}deg);
+    transform-origin: center;
+`;
+
+const AnimationRotateCSS = css`
+    animation: ${keyframeRotate} 2s linear infinite;
+`;
+
+const CircleBackgroundCSS = (background, isIndeterminate, theme) => css`
+    ${fill('transparent')};
+    stroke: ${background};
+    ${isIndeterminate && 'stroke-linecap: round'};
+`;
+
+const CircleMainCSS = (color, theme) => css`
+    ${fill('transparent')};
+    stroke: ${color};
+    stroke-linecap: round;
+`;
+
+const CircleMainDeterminateCSS = (circumference, percent, duration) => css`
+    stroke-dasharray: ${`${circumference} ${circumference}`};
+    stroke-dashoffset: ${circumference - (validatePercent(percent) / 100) * circumference};
+    transition: stroke-dashoffset ${duration}s cubic-bezier(0.77, 0, 0.175, 1); /* easeInOutQuart */
+`;
+
+const CircleMainIndeterminateCSS = radiusX10 => css`
+    stroke-dasharray: 10, ${radiusX10};
+    stroke-dashoffset: 0;
+    animation: ${keyframeDash(radiusX10)} 2s ease-in-out infinite;
+`;
+
+const TextCSS = (percentColor, color, dimension, directionAngle, theme) => css`
+    ${userSelectNone};
+    ${fill(percentColor ? percentColor : color)};
+    ${dimension.labelStyle}
+    text-anchor: middle;
+    transform: rotate(${-directionAngle}deg);
+    transform-origin: center;
+`;
+
+CircularProgress.defaultProps = {
+    background: 'line/category',
+    className: '',
+    color: 'semantic/info',
+    determinate: false,
+    direction: 'top',
+    duration: 1,
+    percent: 25,
+    percentColor: 'semantic/info',
+    showValue: true,
+    size: 'medium',
+    style: {},
+};
+
+CircularProgress.propTypes = {
+    /** Color for background stroke of the circular progress. */
+    background: PropTypes.string,
+    /** Class for component. */
+    className: PropTypes.string,
+    /** Color for main stroke of the circular progress. */
+    color: PropTypes.string,
+    /** Determinate or Indeterminate. */
+    determinate: PropTypes.bool,
+    /** Direction of the start point. */
+    direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+    /** Time to processing. */
+    duration: PropTypes.number,
+    /** The percent of the determinate progress. */
+    percent: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Color percent-label of the progress. */
+    percentColor: PropTypes.string,
+    /** If `true, show the percent-label. */
+    showValue: PropTypes.bool,
+    /** The size of the component. */
+    size: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string,
+        PropTypes.oneOf(['xl', 'lg', 'md', 'sm', 'xs', 'extraLarge', 'large', 'medium', 'small', 'extraSmall']),
+    ]),
+    /** Style inline of component. */
+    style: PropTypes.object,
+};
+export default CircularProgress;

package/src/components/progress/index.stories.js

@@ -0,0 +1,51 @@
+import { CircularProgress, LinearProgress } from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+import React from 'react';
+
+export default {
+    title: 'Components/Progress',
+    subcomponents: { CircularProgress, LinearProgress },
+    parameters: {
+        componentSubtitle:
+            'Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process.',
+    },
+    argTypes: {
+        color: { control: 'color' },
+        percentColor: { control: 'color' },
+    },
+};
+const TemplateCircular = args => (
+    <>
+        <ImportComp components={'CircularProgress'} />
+        <CircularProgress {...args} />
+    </>
+);
+
+export const BasicCircular = TemplateCircular.bind({});
+export const DeterminateCircular = TemplateCircular.bind({});
+DeterminateCircular.args = {
+    determinate: true,
+    showValue: true,
+};
+
+const TemplateLinear = args => (
+    <>
+        <ImportComp components={'LinearProgress'} />
+        <h1 />
+        <LinearProgress height={20} />
+        <h1 />
+        <LinearProgress {...args} height={20} determinate />
+        <h1 />
+        <LinearProgress {...args} determinate />
+        <h1 />
+        <LinearProgress {...args} />
+    </>
+);
+export const Linear = TemplateLinear.bind({});
+Linear.args = {
+    duration: 1,
+    height: 10,
+    percent: 75,
+    showValue: true,
+    valuePosition: 'top',
+};