@alfalab/core-components-circular-progress-bar 2.3.4 → 2.4.3

package/dist/modern/Component.js

@@ -1,47 +0,0 @@
-import cn from 'classnames';
-import React, { useMemo } from 'react';
-import { Typography } from '@alfalab/core-components-typography/dist/modern';
-
-var styles = {"component":"circular-progress-bar__component_17pfh","svg":"circular-progress-bar__svg_17pfh","title":"circular-progress-bar__title_17pfh","subtitle":"circular-progress-bar__subtitle_17pfh","l":"circular-progress-bar__l_17pfh","label":"circular-progress-bar__label_17pfh","m":"circular-progress-bar__m_17pfh","s":"circular-progress-bar__s_17pfh","backgroundCircle":"circular-progress-bar__backgroundCircle_17pfh","progressCircle":"circular-progress-bar__progressCircle_17pfh","positive":"circular-progress-bar__positive_17pfh","negative":"circular-progress-bar__negative_17pfh"};
-require('./index.css')
-
-const SIZES = {
-    s: 96,
-    m: 120,
-    l: 144,
-};
-/**
- * Компонент круглого прогресс бара.
- */
-const CircularProgressBar = ({ value, view = 'positive', size = 'm', className, dataTestId, title = value.toString(), subtitle, children, }) => {
-    const memorized = useMemo(() => {
-        const strokeWidth = 8;
-        const maxProgress = 100;
-        const minProgress = 0;
-        const width = SIZES[size];
-        const height = SIZES[size];
-        const center = width / 2;
-        const radius = center - strokeWidth / 2;
-        const circumference = Math.PI * radius * 2;
-        const progress = Math.min(Math.max(value, minProgress), maxProgress);
-        const strokeDasharray = circumference.toFixed(3);
-        const strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);
-        return {
-            width,
-            height,
-            center,
-            radius,
-            strokeDasharray,
-            strokeDashoffset,
-        };
-    }, [value, size]);
-    return (React.createElement("div", { className: cn(styles.component, styles[size], className), "data-test-id": dataTestId },
-        React.createElement("svg", { viewBox: `0 0 ${memorized.width} ${memorized.height}`, className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
-            React.createElement("circle", { className: styles.backgroundCircle, cx: memorized.center, cy: memorized.center, r: memorized.radius }),
-            React.createElement("circle", { className: cn(styles.progressCircle, styles[view]), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeDasharray: memorized.strokeDasharray, strokeDashoffset: memorized.strokeDashoffset, transform: `rotate(${-90} ${memorized.center} ${memorized.center})` })),
-        React.createElement("div", { className: styles.label }, children || (React.createElement(React.Fragment, null,
-            typeof title === 'string' ? (React.createElement(Typography.Title, { className: styles.title, color: 'secondary', tag: 'div', view: size === 'l' ? 'small' : 'xsmall' }, title)) : (title),
-            typeof subtitle === 'string' ? (React.createElement(Typography.Text, { tag: 'div', className: styles.subtitle, color: 'primary', view: 'primary-small' }, subtitle)) : (subtitle))))));
-};
-
-export { CircularProgressBar };

package/dist/modern/index.css

@@ -1,107 +0,0 @@
-/* hash: 1jvf0 */
-:root {
-    --color-light-bg-tertiary: #e7e9eb;
-    --color-light-graphic-negative: #f15045;
-    --color-light-graphic-positive: #2fc26e;
-}
-
-:root {
-    /* bg */
-    --circular-progress-bar-bg-color: var(--color-light-bg-tertiary);
-
-    /* positive */
-    --circular-progress-bar-positive-color: var(--color-light-graphic-positive);
-
-    /* negative */
-    --circular-progress-bar-negative-color: var(--color-light-graphic-negative);
-}
-
-.circular-progress-bar__component_17pfh {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.circular-progress-bar__svg_17pfh {
-    display: block;
-    width: 100%;
-}
-
-.circular-progress-bar__title_17pfh,
-.circular-progress-bar__subtitle_17pfh {
-    overflow: hidden;
-    word-break: break-word;
-}
-
-.circular-progress-bar__subtitle_17pfh {
-    max-height: 40px;
-}
-
-.circular-progress-bar__l_17pfh {
-    width: 144px;
-    height: 144px
-}
-
-.circular-progress-bar__l_17pfh .circular-progress-bar__label_17pfh {
-        max-width: 120px;
-    }
-
-.circular-progress-bar__l_17pfh .circular-progress-bar__title_17pfh {
-        max-height: 32px;
-    }
-
-.circular-progress-bar__m_17pfh {
-    width: 120px;
-    height: 120px
-}
-
-.circular-progress-bar__m_17pfh .circular-progress-bar__label_17pfh {
-        max-width: 96px;
-    }
-
-.circular-progress-bar__m_17pfh .circular-progress-bar__title_17pfh {
-        max-height: 24px;
-    }
-
-.circular-progress-bar__s_17pfh {
-    width: 96px;
-    height: 96px
-}
-
-.circular-progress-bar__s_17pfh .circular-progress-bar__label_17pfh {
-        max-width: 72px;
-    }
-
-.circular-progress-bar__s_17pfh .circular-progress-bar__title_17pfh {
-        max-height: 24px;
-    }
-
-.circular-progress-bar__label_17pfh {
-    text-align: center;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    transform: translate(-50%, -50%);
-}
-
-.circular-progress-bar__backgroundCircle_17pfh,
-.circular-progress-bar__progressCircle_17pfh {
-    width: 100%;
-    height: 100%;
-    fill: transparent;
-    stroke-width: 8;
-}
-
-.circular-progress-bar__positive_17pfh {
-    stroke: var(--circular-progress-bar-positive-color);
-}
-
-.circular-progress-bar__negative_17pfh {
-    stroke: var(--circular-progress-bar-negative-color);
-}
-
-.circular-progress-bar__backgroundCircle_17pfh {
-    stroke: var(--circular-progress-bar-bg-color);
-}