@alfalab/core-components-circular-progress-bar 5.0.2 → 5.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/Component.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { type ElementType, type ReactNode } from 'react';
2
2
  import { type ComponentSize } from './types/component-size';
3
3
  import { type TypographyColor } from './types/typography-color';
4
- export declare type CircularProgressBarProps = {
4
+ export type CircularProgressBarProps = {
5
5
  /**
6
6
  * Уровень прогресса, %
7
7
  */
package/Component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { type ElementType, type ReactNode, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId, isObject, noop } from '@alfalab/core-components-shared';\nimport { TypographyText, TypographyTitleMobile } from '@alfalab/core-components-typography';\n\nimport { type ComponentSize } from './types/component-size';\nimport { type TypographyColor } from './types/typography-color';\nimport { isTypographyColor } from './utils/is-typography-color';\nimport {\n MAX_PROGRESS_VALUE,\n MAX_TIMER_VALUE,\n MIN_TIMER_VALUE,\n SIZE_TO_CLASSNAME_MAP,\n SIZES,\n STROKE,\n TYPOGRAPHY_COLOR,\n VIEW_TEXT,\n VIEW_TITLE,\n} from './consts';\nimport { useTimer } from './use-timer';\n\nimport styles from './index.module.css';\n\nexport type CircularProgressBarProps = {\n /**\n * Уровень прогресса, %\n */\n value:\n | number\n | {\n /**\n * Время таймера в секундах\n * Минимальное значение 0\n * Максимальное значение 3600\n */\n timer: number;\n /**\n * Направлние отсчета таймера\n * forward: считаем от 0 до указанного значения\n * backward: считаем от указанного значения до 0\n * @default backward\n */\n counting?: 'forward' | 'backward';\n /**\n * Обработчик завершения таймера\n */\n onFinish?: () => void;\n };\n\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Основной текст\n */\n title?: ReactNode;\n\n /**\n * Цвет контента\n */\n contentColor?: TypographyColor | string;\n\n /**\n * Цвет заголовка\n * Приоритет выше чем у `contentColor`\n */\n titleColor?: TypographyColor | string;\n\n /**\n * Цвет подзаголовка\n * Приоритет выше чем у `contentColor`\n */\n subtitleColor?: TypographyColor | string;\n\n /**\n * Дополнительный текст\n */\n subtitle?: ReactNode;\n\n /**\n * Основной текст при 100%\n */\n titleComplete?: ReactNode;\n\n /**\n * Дополнительный текст при 100%\n */\n subtitleComplete?: ReactNode;\n\n /**\n * Цвет заполнения\n */\n view?: 'positive' | 'negative';\n\n /**\n * Размер (144 — 144×144px, 128 — 128×128px, 80 — 80×80px, 64 — 64×64px, 48 — 48×48px, 24 — 24×24px)\n * @default 64\n */\n size?: ComponentSize;\n\n /**\n * Наличие желоба\n */\n stroke?: boolean;\n\n /**\n * Заливка при 100%\n */\n fillComplete?: boolean;\n\n /**\n * Цвет текста при 100%\n */\n completeTextColor?: 'primary' | 'primary-inverted' | 'positive' | 'negative';\n\n /**\n * Цвет иконки при 100%\n */\n completeIconColor?: 'primary-inverted' | 'positive' | 'negative' | 'tertiary';\n\n /**\n * Компонент иконки\n */\n icon?: ElementType<{ className?: string }>;\n\n /**\n * Компонент иконки при 100%\n */\n iconComplete?: ElementType<{ className?: string }>;\n\n /**\n * Направление прогресса (clockwise - по часовой стрелке, counter-clockwise - против часовой стрелки)\n */\n direction?: 'clockwise' | 'counter-clockwise';\n\n /**\n * Высота компонента, min = 24; max = 144\n * использовать совместно с size :\n * 144 от 144\n * 128 от 128 до 143\n * 80 от 80 до 127\n * 64 от 64 до 79\n * 48 от 48 до 63\n * 24 от 24 до 47\n */\n height?: number;\n\n /**\n * Id компонента для тестов\n */\n dataTestId?: string;\n\n /**\n * Дочерние элементы\n */\n children?: ReactNode;\n\n /**\n * Цвет прогресса\n */\n progressStrokeColor?: string;\n\n /**\n * Цвет заливки внутри круга\n */\n circleColor?: string;\n\n /**\n * Цвет желоба\n */\n strokeColor?: string;\n\n /**\n * Направление заполнения круга\n * @default desc\n */\n directionType?: 'asc' | 'desc';\n};\n\n/**\n * Компонент круглого прогресс бара.\n */\nexport const CircularProgressBar: React.FC<CircularProgressBarProps> = ({\n value: valueFromProps,\n view = 'positive',\n size = 64,\n className,\n dataTestId,\n title: titleFromProps = isObject(valueFromProps) ? null : `${valueFromProps}`,\n titleComplete,\n subtitle,\n contentColor = 'secondary',\n subtitleComplete,\n stroke = true,\n fillComplete,\n icon: Icon,\n iconComplete: IconComplete,\n completeTextColor,\n completeIconColor = 'tertiary',\n direction = 'clockwise',\n height,\n children,\n progressStrokeColor,\n circleColor,\n strokeColor,\n directionType = 'asc',\n titleColor,\n subtitleColor,\n}) => {\n const isTimer = isObject(valueFromProps);\n const [timerValue, timerTitle] = useTimer(\n isTimer ? Math.min(Math.max(valueFromProps.timer, MIN_TIMER_VALUE), MAX_TIMER_VALUE) : -1,\n isTimer,\n isTimer ? (valueFromProps.counting ?? 'backward') : 'backward',\n isTimer ? (valueFromProps.onFinish ?? noop) : noop,\n );\n let value: number;\n let title: React.ReactNode;\n\n if (isTimer) {\n value = timerValue;\n title = timerTitle;\n } else {\n value = valueFromProps;\n title = titleFromProps;\n }\n\n value = directionType === 'desc' ? MAX_PROGRESS_VALUE - value : value;\n\n const memorized = useMemo(() => {\n const strokeWidth = STROKE[size];\n const maxProgress = 100;\n const minProgress = 0;\n const widthSVG = SIZES[size];\n const heightSVG = SIZES[size];\n const center = widthSVG / 2;\n const radius = center - strokeWidth / 2;\n const circumference = Math.PI * radius * 2;\n const progress = Math.min(Math.max(value, minProgress), maxProgress);\n const strokeDasharray = circumference.toFixed(3);\n const strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);\n\n return {\n widthSVG,\n heightSVG,\n center,\n radius,\n strokeDasharray,\n strokeDashoffset,\n };\n }, [size, value]);\n\n const isComplete = value === 100;\n const isCompleteTextColor = isComplete && completeTextColor;\n const titleContent = titleComplete && isComplete ? titleComplete : title;\n const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;\n const IconComponent = IconComplete && isComplete ? IconComplete : Icon;\n\n const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)\n ? (contentColor as TypographyColor)\n : undefined;\n\n const getTextColor = (color?: TypographyColor | string) => {\n if (isCompleteTextColor) {\n return completeTextColor;\n }\n\n if (color) {\n return isTypographyColor(color) ? color : undefined;\n }\n\n return typographyContentColor;\n };\n\n const getTextStyleColor = (color?: TypographyColor | string) => {\n if (color) {\n if (!isTypographyColor(color)) {\n return { color };\n }\n\n return {};\n }\n\n return {\n ...(!typographyContentColor && { color: contentColor }),\n };\n };\n\n const renderTitleString = () =>\n SIZES[size] > 64 ? (\n <TypographyTitleMobile\n className={styles.title}\n color={getTextColor(titleColor)}\n tag='div'\n font='system'\n view={VIEW_TITLE[size]}\n style={{\n ...getTextStyleColor(titleColor),\n }}\n dataTestId={getDataTestId(dataTestId, 'title')}\n >\n {titleContent}\n </TypographyTitleMobile>\n ) : (\n <TypographyText\n className={styles.title}\n color={getTextColor(titleColor)}\n tag='div'\n weight='bold'\n view={VIEW_TEXT[size]}\n style={{\n ...getTextStyleColor(titleColor),\n }}\n dataTestId={getDataTestId(dataTestId, 'title')}\n >\n {titleContent}\n </TypographyText>\n );\n\n const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);\n\n const renderSubTitle = () =>\n typeof subtitle === 'string' ? (\n <TypographyText\n tag='div'\n className={styles.subtitle}\n color={getTextColor(subtitleColor)}\n view='primary-small'\n dataTestId={getDataTestId(dataTestId, 'subtitle')}\n style={{\n ...getTextStyleColor(subtitleColor),\n }}\n >\n {subtitleContent}\n </TypographyText>\n ) : (\n subtitleContent\n );\n\n const renderIcon = () => (\n <span\n className={cn(\n styles.iconWrapper,\n styles[SIZE_TO_CLASSNAME_MAP[size]],\n styles.tertiary,\n styles[`icon-${contentColor}`],\n {\n [styles[`icon-${completeIconColor}`]]: completeIconColor,\n },\n )}\n >\n {IconComponent && <IconComponent className={styles.icon} />}\n </span>\n );\n\n const renderContent = () =>\n Icon || (IconComplete && isComplete) ? (\n renderIcon()\n ) : (\n <React.Fragment>\n {SIZES[size] > 24 && renderTitle()}\n {SIZES[size] > 64 && renderSubTitle()}\n </React.Fragment>\n );\n\n return (\n <div\n className={cn(styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]], className, {\n [styles[`bg-${view}`]]: fillComplete && isComplete,\n })}\n style={{\n ...(height && { height, width: height }),\n ...(circleColor && { backgroundColor: circleColor }),\n }}\n data-test-id={dataTestId}\n >\n <svg\n viewBox={`0 0 ${memorized.widthSVG} ${memorized.heightSVG}`}\n className={styles.svg}\n xmlns='http://www.w3.org/2000/svg'\n >\n <circle\n className={cn(styles.backgroundCircle, styles[SIZE_TO_CLASSNAME_MAP[size]], {\n [styles.stroke]: !stroke,\n })}\n style={{\n ...(strokeColor && stroke && { stroke: strokeColor }),\n }}\n cx={memorized.center}\n cy={memorized.center}\n r={memorized.radius}\n strokeWidth={STROKE[size]}\n data-test-id={getDataTestId(dataTestId, 'circle-progress-bar')}\n />\n <circle\n className={cn(\n styles.progressCircle,\n styles[view],\n styles[SIZE_TO_CLASSNAME_MAP[size]],\n )}\n style={{\n ...(progressStrokeColor && { stroke: progressStrokeColor }),\n }}\n cx={memorized.center}\n cy={memorized.center}\n r={memorized.radius}\n strokeWidth={STROKE[size]}\n strokeDasharray={memorized.strokeDasharray}\n strokeDashoffset={\n direction === 'counter-clockwise'\n ? -memorized.strokeDashoffset\n : memorized.strokeDashoffset\n }\n transform={`rotate(${-90} ${memorized.center} ${memorized.center})`}\n data-test-id={getDataTestId(dataTestId, 'circle-progress-value')}\n />\n </svg>\n <div\n className={cn(styles.labelWrapper, {\n [styles.label]: Icon || IconComplete,\n })}\n >\n {children || renderContent()}\n </div>\n </div>\n );\n};\n"],"names":["isObject","useTimer","MIN_TIMER_VALUE","MAX_TIMER_VALUE","noop","MAX_PROGRESS_VALUE","useMemo","STROKE","SIZES","TYPOGRAPHY_COLOR","isTypographyColor","__assign","React","TypographyTitleMobile","styles","VIEW_TITLE","getDataTestId","TypographyText","VIEW_TEXT","cn","SIZE_TO_CLASSNAME_MAP"],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { type ElementType, type ReactNode, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId, isObject, noop } from '@alfalab/core-components-shared';\nimport { TypographyText, TypographyTitleMobile } from '@alfalab/core-components-typography';\n\nimport { type ComponentSize } from './types/component-size';\nimport { type TypographyColor } from './types/typography-color';\nimport { isTypographyColor } from './utils/is-typography-color';\nimport {\n MAX_PROGRESS_VALUE,\n MAX_TIMER_VALUE,\n MIN_TIMER_VALUE,\n SIZE_TO_CLASSNAME_MAP,\n SIZES,\n STROKE,\n TYPOGRAPHY_COLOR,\n VIEW_TEXT,\n VIEW_TITLE,\n} from './consts';\nimport { useTimer } from './use-timer';\n\nimport styles from './index.module.css';\n\nexport type CircularProgressBarProps = {\n /**\n * Уровень прогресса, %\n */\n value:\n | number\n | {\n /**\n * Время таймера в секундах\n * Минимальное значение 0\n * Максимальное значение 3600\n */\n timer: number;\n /**\n * Направлние отсчета таймера\n * forward: считаем от 0 до указанного значения\n * backward: считаем от указанного значения до 0\n * @default backward\n */\n counting?: 'forward' | 'backward';\n /**\n * Обработчик завершения таймера\n */\n onFinish?: () => void;\n };\n\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Основной текст\n */\n title?: ReactNode;\n\n /**\n * Цвет контента\n */\n contentColor?: TypographyColor | string;\n\n /**\n * Цвет заголовка\n * Приоритет выше чем у `contentColor`\n */\n titleColor?: TypographyColor | string;\n\n /**\n * Цвет подзаголовка\n * Приоритет выше чем у `contentColor`\n */\n subtitleColor?: TypographyColor | string;\n\n /**\n * Дополнительный текст\n */\n subtitle?: ReactNode;\n\n /**\n * Основной текст при 100%\n */\n titleComplete?: ReactNode;\n\n /**\n * Дополнительный текст при 100%\n */\n subtitleComplete?: ReactNode;\n\n /**\n * Цвет заполнения\n */\n view?: 'positive' | 'negative';\n\n /**\n * Размер (144 — 144×144px, 128 — 128×128px, 80 — 80×80px, 64 — 64×64px, 48 — 48×48px, 24 — 24×24px)\n * @default 64\n */\n size?: ComponentSize;\n\n /**\n * Наличие желоба\n */\n stroke?: boolean;\n\n /**\n * Заливка при 100%\n */\n fillComplete?: boolean;\n\n /**\n * Цвет текста при 100%\n */\n completeTextColor?: 'primary' | 'primary-inverted' | 'positive' | 'negative';\n\n /**\n * Цвет иконки при 100%\n */\n completeIconColor?: 'primary-inverted' | 'positive' | 'negative' | 'tertiary';\n\n /**\n * Компонент иконки\n */\n icon?: ElementType<{ className?: string }>;\n\n /**\n * Компонент иконки при 100%\n */\n iconComplete?: ElementType<{ className?: string }>;\n\n /**\n * Направление прогресса (clockwise - по часовой стрелке, counter-clockwise - против часовой стрелки)\n */\n direction?: 'clockwise' | 'counter-clockwise';\n\n /**\n * Высота компонента, min = 24; max = 144\n * использовать совместно с size :\n * 144 от 144\n * 128 от 128 до 143\n * 80 от 80 до 127\n * 64 от 64 до 79\n * 48 от 48 до 63\n * 24 от 24 до 47\n */\n height?: number;\n\n /**\n * Id компонента для тестов\n */\n dataTestId?: string;\n\n /**\n * Дочерние элементы\n */\n children?: ReactNode;\n\n /**\n * Цвет прогресса\n */\n progressStrokeColor?: string;\n\n /**\n * Цвет заливки внутри круга\n */\n circleColor?: string;\n\n /**\n * Цвет желоба\n */\n strokeColor?: string;\n\n /**\n * Направление заполнения круга\n * @default desc\n */\n directionType?: 'asc' | 'desc';\n};\n\n/**\n * Компонент круглого прогресс бара.\n */\nexport const CircularProgressBar: React.FC<CircularProgressBarProps> = ({\n value: valueFromProps,\n view = 'positive',\n size = 64,\n className,\n dataTestId,\n title: titleFromProps = isObject(valueFromProps) ? null : `${valueFromProps}`,\n titleComplete,\n subtitle,\n contentColor = 'secondary',\n subtitleComplete,\n stroke = true,\n fillComplete,\n icon: Icon,\n iconComplete: IconComplete,\n completeTextColor,\n completeIconColor = 'tertiary',\n direction = 'clockwise',\n height,\n children,\n progressStrokeColor,\n circleColor,\n strokeColor,\n directionType = 'asc',\n titleColor,\n subtitleColor,\n}) => {\n const isTimer = isObject(valueFromProps);\n const [timerValue, timerTitle] = useTimer(\n isTimer ? Math.min(Math.max(valueFromProps.timer, MIN_TIMER_VALUE), MAX_TIMER_VALUE) : -1,\n isTimer,\n isTimer ? (valueFromProps.counting ?? 'backward') : 'backward',\n isTimer ? (valueFromProps.onFinish ?? noop) : noop,\n );\n let value: number;\n let title: React.ReactNode;\n\n if (isTimer) {\n value = timerValue;\n title = timerTitle;\n } else {\n value = valueFromProps;\n title = titleFromProps;\n }\n\n value = directionType === 'desc' ? MAX_PROGRESS_VALUE - value : value;\n\n const memorized = useMemo(() => {\n const strokeWidth = STROKE[size];\n const maxProgress = 100;\n const minProgress = 0;\n const widthSVG = SIZES[size];\n const heightSVG = SIZES[size];\n const center = widthSVG / 2;\n const radius = center - strokeWidth / 2;\n const circumference = Math.PI * radius * 2;\n const progress = Math.min(Math.max(value, minProgress), maxProgress);\n const strokeDasharray = circumference.toFixed(3);\n const strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);\n\n return {\n widthSVG,\n heightSVG,\n center,\n radius,\n strokeDasharray,\n strokeDashoffset,\n };\n }, [size, value]);\n\n const isComplete = value === 100;\n const isCompleteTextColor = isComplete && completeTextColor;\n const titleContent = titleComplete && isComplete ? titleComplete : title;\n const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;\n const IconComponent = IconComplete && isComplete ? IconComplete : Icon;\n\n const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)\n ? (contentColor as TypographyColor)\n : undefined;\n\n const getTextColor = (color?: TypographyColor | string) => {\n if (isCompleteTextColor) {\n return completeTextColor;\n }\n\n if (color) {\n return isTypographyColor(color) ? color : undefined;\n }\n\n return typographyContentColor;\n };\n\n const getTextStyleColor = (color?: TypographyColor | string) => {\n if (color) {\n if (!isTypographyColor(color)) {\n return { color };\n }\n\n return {};\n }\n\n return {\n ...(!typographyContentColor && { color: contentColor }),\n };\n };\n\n const renderTitleString = () =>\n SIZES[size] > 64 ? (\n <TypographyTitleMobile\n className={styles.title}\n color={getTextColor(titleColor)}\n tag='div'\n font='system'\n view={VIEW_TITLE[size]}\n style={{\n ...getTextStyleColor(titleColor),\n }}\n dataTestId={getDataTestId(dataTestId, 'title')}\n >\n {titleContent}\n </TypographyTitleMobile>\n ) : (\n <TypographyText\n className={styles.title}\n color={getTextColor(titleColor)}\n tag='div'\n weight='bold'\n view={VIEW_TEXT[size]}\n style={{\n ...getTextStyleColor(titleColor),\n }}\n dataTestId={getDataTestId(dataTestId, 'title')}\n >\n {titleContent}\n </TypographyText>\n );\n\n const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);\n\n const renderSubTitle = () =>\n typeof subtitle === 'string' ? (\n <TypographyText\n tag='div'\n className={styles.subtitle}\n color={getTextColor(subtitleColor)}\n view='primary-small'\n dataTestId={getDataTestId(dataTestId, 'subtitle')}\n style={{\n ...getTextStyleColor(subtitleColor),\n }}\n >\n {subtitleContent}\n </TypographyText>\n ) : (\n subtitleContent\n );\n\n const renderIcon = () => (\n <span\n className={cn(\n styles.iconWrapper,\n styles[SIZE_TO_CLASSNAME_MAP[size]],\n styles.tertiary,\n styles[`icon-${contentColor}`],\n {\n [styles[`icon-${completeIconColor}`]]: completeIconColor,\n },\n )}\n >\n {IconComponent && <IconComponent className={styles.icon} />}\n </span>\n );\n\n const renderContent = () =>\n Icon || (IconComplete && isComplete) ? (\n renderIcon()\n ) : (\n <React.Fragment>\n {SIZES[size] > 24 && renderTitle()}\n {SIZES[size] > 64 && renderSubTitle()}\n </React.Fragment>\n );\n\n return (\n <div\n className={cn(styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]], className, {\n [styles[`bg-${view}`]]: fillComplete && isComplete,\n })}\n style={{\n ...(height && { height, width: height }),\n ...(circleColor && { backgroundColor: circleColor }),\n }}\n data-test-id={dataTestId}\n >\n <svg\n viewBox={`0 0 ${memorized.widthSVG} ${memorized.heightSVG}`}\n className={styles.svg}\n xmlns='http://www.w3.org/2000/svg'\n >\n <circle\n className={cn(styles.backgroundCircle, styles[SIZE_TO_CLASSNAME_MAP[size]], {\n [styles.stroke]: !stroke,\n })}\n style={{\n ...(strokeColor && stroke && { stroke: strokeColor }),\n }}\n cx={memorized.center}\n cy={memorized.center}\n r={memorized.radius}\n strokeWidth={STROKE[size]}\n data-test-id={getDataTestId(dataTestId, 'circle-progress-bar')}\n />\n <circle\n className={cn(\n styles.progressCircle,\n styles[view],\n styles[SIZE_TO_CLASSNAME_MAP[size]],\n )}\n style={{\n ...(progressStrokeColor && { stroke: progressStrokeColor }),\n }}\n cx={memorized.center}\n cy={memorized.center}\n r={memorized.radius}\n strokeWidth={STROKE[size]}\n strokeDasharray={memorized.strokeDasharray}\n strokeDashoffset={\n direction === 'counter-clockwise'\n ? -memorized.strokeDashoffset\n : memorized.strokeDashoffset\n }\n transform={`rotate(${-90} ${memorized.center} ${memorized.center})`}\n data-test-id={getDataTestId(dataTestId, 'circle-progress-value')}\n />\n </svg>\n <div\n className={cn(styles.labelWrapper, {\n [styles.label]: Icon || IconComplete,\n })}\n >\n {children || renderContent()}\n </div>\n </div>\n );\n};\n"],"names":["isObject","useTimer","MIN_TIMER_VALUE","MAX_TIMER_VALUE","noop","MAX_PROGRESS_VALUE","useMemo","STROKE","SIZES","TYPOGRAPHY_COLOR","isTypographyColor","__assign","React","TypographyTitleMobile","styles","VIEW_TITLE","getDataTestId","TypographyText","VIEW_TEXT","cn","SIZE_TO_CLASSNAME_MAP"],"mappings":"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"}
@@ -1,7 +1,7 @@
1
1
  import React, { type ElementType, type ReactNode } from 'react';
2
2
  import { type ComponentSize } from './types/component-size';
3
3
  import { type TypographyColor } from './types/typography-color';
4
- export declare type CircularProgressBarProps = {
4
+ export type CircularProgressBarProps = {
5
5
  /**
6
6
  * Уровень прогресса, %
7
7
  */
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { type ElementType, type ReactNode, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId, isObject, noop } from '@alfalab/core-components-shared';\nimport { TypographyText, TypographyTitleMobile } from '@alfalab/core-components-typography';\n\nimport { type ComponentSize } from './types/component-size';\nimport { type TypographyColor } from './types/typography-color';\nimport { isTypographyColor } from './utils/is-typography-color';\nimport {\n MAX_PROGRESS_VALUE,\n MAX_TIMER_VALUE,\n MIN_TIMER_VALUE,\n SIZE_TO_CLASSNAME_MAP,\n SIZES,\n STROKE,\n TYPOGRAPHY_COLOR,\n VIEW_TEXT,\n VIEW_TITLE,\n} from './consts';\nimport { useTimer } from './use-timer';\n\nimport styles from './index.module.css';\n\nexport type CircularProgressBarProps = {\n /**\n * Уровень прогресса, %\n */\n value:\n | number\n | {\n /**\n * Время таймера в секундах\n * Минимальное значение 0\n * Максимальное значение 3600\n */\n timer: number;\n /**\n * Направлние отсчета таймера\n * forward: считаем от 0 до указанного значения\n * backward: считаем от указанного значения до 0\n * @default backward\n */\n counting?: 'forward' | 'backward';\n /**\n * Обработчик завершения таймера\n */\n onFinish?: () => void;\n };\n\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Основной текст\n */\n title?: ReactNode;\n\n /**\n * Цвет контента\n */\n contentColor?: TypographyColor | string;\n\n /**\n * Цвет заголовка\n * Приоритет выше чем у `contentColor`\n */\n titleColor?: TypographyColor | string;\n\n /**\n * Цвет подзаголовка\n * Приоритет выше чем у `contentColor`\n */\n subtitleColor?: TypographyColor | string;\n\n /**\n * Дополнительный текст\n */\n subtitle?: ReactNode;\n\n /**\n * Основной текст при 100%\n */\n titleComplete?: ReactNode;\n\n /**\n * Дополнительный текст при 100%\n */\n subtitleComplete?: ReactNode;\n\n /**\n * Цвет заполнения\n */\n view?: 'positive' | 'negative';\n\n /**\n * Размер (144 — 144×144px, 128 — 128×128px, 80 — 80×80px, 64 — 64×64px, 48 — 48×48px, 24 — 24×24px)\n * @default 64\n */\n size?: ComponentSize;\n\n /**\n * Наличие желоба\n */\n stroke?: boolean;\n\n /**\n * Заливка при 100%\n */\n fillComplete?: boolean;\n\n /**\n * Цвет текста при 100%\n */\n completeTextColor?: 'primary' | 'primary-inverted' | 'positive' | 'negative';\n\n /**\n * Цвет иконки при 100%\n */\n completeIconColor?: 'primary-inverted' | 'positive' | 'negative' | 'tertiary';\n\n /**\n * Компонент иконки\n */\n icon?: ElementType<{ className?: string }>;\n\n /**\n * Компонент иконки при 100%\n */\n iconComplete?: ElementType<{ className?: string }>;\n\n /**\n * Направление прогресса (clockwise - по часовой стрелке, counter-clockwise - против часовой стрелки)\n */\n direction?: 'clockwise' | 'counter-clockwise';\n\n /**\n * Высота компонента, min = 24; max = 144\n * использовать совместно с size :\n * 144 от 144\n * 128 от 128 до 143\n * 80 от 80 до 127\n * 64 от 64 до 79\n * 48 от 48 до 63\n * 24 от 24 до 47\n */\n height?: number;\n\n /**\n * Id компонента для тестов\n */\n dataTestId?: string;\n\n /**\n * Дочерние элементы\n */\n children?: ReactNode;\n\n /**\n * Цвет прогресса\n */\n progressStrokeColor?: string;\n\n /**\n * Цвет заливки внутри круга\n */\n circleColor?: string;\n\n /**\n * Цвет желоба\n */\n strokeColor?: string;\n\n /**\n * Направление заполнения круга\n * @default desc\n */\n directionType?: 'asc' | 'desc';\n};\n\n/**\n * Компонент круглого прогресс бара.\n */\nexport const CircularProgressBar: React.FC<CircularProgressBarProps> = ({\n value: valueFromProps,\n view = 'positive',\n size = 64,\n className,\n dataTestId,\n title: titleFromProps = isObject(valueFromProps) ? null : `${valueFromProps}`,\n titleComplete,\n subtitle,\n contentColor = 'secondary',\n subtitleComplete,\n stroke = true,\n fillComplete,\n icon: Icon,\n iconComplete: IconComplete,\n completeTextColor,\n completeIconColor = 'tertiary',\n direction = 'clockwise',\n height,\n children,\n progressStrokeColor,\n circleColor,\n strokeColor,\n directionType = 'asc',\n titleColor,\n subtitleColor,\n}) => {\n const isTimer = isObject(valueFromProps);\n const [timerValue, timerTitle] = useTimer(\n isTimer ? Math.min(Math.max(valueFromProps.timer, MIN_TIMER_VALUE), MAX_TIMER_VALUE) : -1,\n isTimer,\n isTimer ? (valueFromProps.counting ?? 'backward') : 'backward',\n isTimer ? (valueFromProps.onFinish ?? noop) : noop,\n );\n let value: number;\n let title: React.ReactNode;\n\n if (isTimer) {\n value = timerValue;\n title = timerTitle;\n } else {\n value = valueFromProps;\n title = titleFromProps;\n }\n\n value = directionType === 'desc' ? MAX_PROGRESS_VALUE - value : value;\n\n const memorized = useMemo(() => {\n const strokeWidth = STROKE[size];\n const maxProgress = 100;\n const minProgress = 0;\n const widthSVG = SIZES[size];\n const heightSVG = SIZES[size];\n const center = widthSVG / 2;\n const radius = center - strokeWidth / 2;\n const circumference = Math.PI * radius * 2;\n const progress = Math.min(Math.max(value, minProgress), maxProgress);\n const strokeDasharray = circumference.toFixed(3);\n const strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);\n\n return {\n widthSVG,\n heightSVG,\n center,\n radius,\n strokeDasharray,\n strokeDashoffset,\n };\n }, [size, value]);\n\n const isComplete = value === 100;\n const isCompleteTextColor = isComplete && completeTextColor;\n const titleContent = titleComplete && isComplete ? titleComplete : title;\n const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;\n const IconComponent = IconComplete && isComplete ? IconComplete : Icon;\n\n const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)\n ? (contentColor as TypographyColor)\n : undefined;\n\n const getTextColor = (color?: TypographyColor | string) => {\n if (isCompleteTextColor) {\n return completeTextColor;\n }\n\n if (color) {\n return isTypographyColor(color) ? color : undefined;\n }\n\n return typographyContentColor;\n };\n\n const getTextStyleColor = (color?: TypographyColor | string) => {\n if (color) {\n if (!isTypographyColor(color)) {\n return { color };\n }\n\n return {};\n }\n\n return {\n ...(!typographyContentColor && { color: contentColor }),\n };\n };\n\n const renderTitleString = () =>\n SIZES[size] > 64 ? (\n <TypographyTitleMobile\n className={styles.title}\n color={getTextColor(titleColor)}\n tag='div'\n font='system'\n view={VIEW_TITLE[size]}\n style={{\n ...getTextStyleColor(titleColor),\n }}\n dataTestId={getDataTestId(dataTestId, 'title')}\n >\n {titleContent}\n </TypographyTitleMobile>\n ) : (\n <TypographyText\n className={styles.title}\n color={getTextColor(titleColor)}\n tag='div'\n weight='bold'\n view={VIEW_TEXT[size]}\n style={{\n ...getTextStyleColor(titleColor),\n }}\n dataTestId={getDataTestId(dataTestId, 'title')}\n >\n {titleContent}\n </TypographyText>\n );\n\n const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);\n\n const renderSubTitle = () =>\n typeof subtitle === 'string' ? (\n <TypographyText\n tag='div'\n className={styles.subtitle}\n color={getTextColor(subtitleColor)}\n view='primary-small'\n dataTestId={getDataTestId(dataTestId, 'subtitle')}\n style={{\n ...getTextStyleColor(subtitleColor),\n }}\n >\n {subtitleContent}\n </TypographyText>\n ) : (\n subtitleContent\n );\n\n const renderIcon = () => (\n <span\n className={cn(\n styles.iconWrapper,\n styles[SIZE_TO_CLASSNAME_MAP[size]],\n styles.tertiary,\n styles[`icon-${contentColor}`],\n {\n [styles[`icon-${completeIconColor}`]]: completeIconColor,\n },\n )}\n >\n {IconComponent && <IconComponent className={styles.icon} />}\n </span>\n );\n\n const renderContent = () =>\n Icon || (IconComplete && isComplete) ? (\n renderIcon()\n ) : (\n <React.Fragment>\n {SIZES[size] > 24 && renderTitle()}\n {SIZES[size] > 64 && renderSubTitle()}\n </React.Fragment>\n );\n\n return (\n <div\n className={cn(styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]], className, {\n [styles[`bg-${view}`]]: fillComplete && isComplete,\n })}\n style={{\n ...(height && { height, width: height }),\n ...(circleColor && { backgroundColor: circleColor }),\n }}\n data-test-id={dataTestId}\n >\n <svg\n viewBox={`0 0 ${memorized.widthSVG} ${memorized.heightSVG}`}\n className={styles.svg}\n xmlns='http://www.w3.org/2000/svg'\n >\n <circle\n className={cn(styles.backgroundCircle, styles[SIZE_TO_CLASSNAME_MAP[size]], {\n [styles.stroke]: !stroke,\n })}\n style={{\n ...(strokeColor && stroke && { stroke: strokeColor }),\n }}\n cx={memorized.center}\n cy={memorized.center}\n r={memorized.radius}\n strokeWidth={STROKE[size]}\n data-test-id={getDataTestId(dataTestId, 'circle-progress-bar')}\n />\n <circle\n className={cn(\n styles.progressCircle,\n styles[view],\n styles[SIZE_TO_CLASSNAME_MAP[size]],\n )}\n style={{\n ...(progressStrokeColor && { stroke: progressStrokeColor }),\n }}\n cx={memorized.center}\n cy={memorized.center}\n r={memorized.radius}\n strokeWidth={STROKE[size]}\n strokeDasharray={memorized.strokeDasharray}\n strokeDashoffset={\n direction === 'counter-clockwise'\n ? -memorized.strokeDashoffset\n : memorized.strokeDashoffset\n }\n transform={`rotate(${-90} ${memorized.center} ${memorized.center})`}\n data-test-id={getDataTestId(dataTestId, 'circle-progress-value')}\n />\n </svg>\n <div\n className={cn(styles.labelWrapper, {\n [styles.label]: Icon || IconComplete,\n })}\n >\n {children || renderContent()}\n </div>\n </div>\n );\n};\n"],"names":["isObject","useTimer","MIN_TIMER_VALUE","MAX_TIMER_VALUE","noop","MAX_PROGRESS_VALUE","useMemo","STROKE","SIZES","TYPOGRAPHY_COLOR","isTypographyColor","__assign","React","TypographyTitleMobile","styles","VIEW_TITLE","getDataTestId","TypographyText","VIEW_TEXT","cn","SIZE_TO_CLASSNAME_MAP"],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { type ElementType, type ReactNode, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId, isObject, noop } from '@alfalab/core-components-shared';\nimport { TypographyText, TypographyTitleMobile } from '@alfalab/core-components-typography';\n\nimport { type ComponentSize } from './types/component-size';\nimport { type TypographyColor } from './types/typography-color';\nimport { isTypographyColor } from './utils/is-typography-color';\nimport {\n MAX_PROGRESS_VALUE,\n MAX_TIMER_VALUE,\n MIN_TIMER_VALUE,\n SIZE_TO_CLASSNAME_MAP,\n SIZES,\n STROKE,\n TYPOGRAPHY_COLOR,\n VIEW_TEXT,\n VIEW_TITLE,\n} from './consts';\nimport { useTimer } from './use-timer';\n\nimport styles from './index.module.css';\n\nexport type CircularProgressBarProps = {\n /**\n * Уровень прогресса, %\n */\n value:\n | number\n | {\n /**\n * Время таймера в секундах\n * Минимальное значение 0\n * Максимальное значение 3600\n */\n timer: number;\n /**\n * Направлние отсчета таймера\n * forward: считаем от 0 до указанного значения\n * backward: считаем от указанного значения до 0\n * @default backward\n */\n counting?: 'forward' | 'backward';\n /**\n * Обработчик завершения таймера\n */\n onFinish?: () => void;\n };\n\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Основной текст\n */\n title?: ReactNode;\n\n /**\n * Цвет контента\n */\n contentColor?: TypographyColor | string;\n\n /**\n * Цвет заголовка\n * Приоритет выше чем у `contentColor`\n */\n titleColor?: TypographyColor | string;\n\n /**\n * Цвет подзаголовка\n * Приоритет выше чем у `contentColor`\n */\n subtitleColor?: TypographyColor | string;\n\n /**\n * Дополнительный текст\n */\n subtitle?: ReactNode;\n\n /**\n * Основной текст при 100%\n */\n titleComplete?: ReactNode;\n\n /**\n * Дополнительный текст при 100%\n */\n subtitleComplete?: ReactNode;\n\n /**\n * Цвет заполнения\n */\n view?: 'positive' | 'negative';\n\n /**\n * Размер (144 — 144×144px, 128 — 128×128px, 80 — 80×80px, 64 — 64×64px, 48 — 48×48px, 24 — 24×24px)\n * @default 64\n */\n size?: ComponentSize;\n\n /**\n * Наличие желоба\n */\n stroke?: boolean;\n\n /**\n * Заливка при 100%\n */\n fillComplete?: boolean;\n\n /**\n * Цвет текста при 100%\n */\n completeTextColor?: 'primary' | 'primary-inverted' | 'positive' | 'negative';\n\n /**\n * Цвет иконки при 100%\n */\n completeIconColor?: 'primary-inverted' | 'positive' | 'negative' | 'tertiary';\n\n /**\n * Компонент иконки\n */\n icon?: ElementType<{ className?: string }>;\n\n /**\n * Компонент иконки при 100%\n */\n iconComplete?: ElementType<{ className?: string }>;\n\n /**\n * Направление прогресса (clockwise - по часовой стрелке, counter-clockwise - против часовой стрелки)\n */\n direction?: 'clockwise' | 'counter-clockwise';\n\n /**\n * Высота компонента, min = 24; max = 144\n * использовать совместно с size :\n * 144 от 144\n * 128 от 128 до 143\n * 80 от 80 до 127\n * 64 от 64 до 79\n * 48 от 48 до 63\n * 24 от 24 до 47\n */\n height?: number;\n\n /**\n * Id компонента для тестов\n */\n dataTestId?: string;\n\n /**\n * Дочерние элементы\n */\n children?: ReactNode;\n\n /**\n * Цвет прогресса\n */\n progressStrokeColor?: string;\n\n /**\n * Цвет заливки внутри круга\n */\n circleColor?: string;\n\n /**\n * Цвет желоба\n */\n strokeColor?: string;\n\n /**\n * Направление заполнения круга\n * @default desc\n */\n directionType?: 'asc' | 'desc';\n};\n\n/**\n * Компонент круглого прогресс бара.\n */\nexport const CircularProgressBar: React.FC<CircularProgressBarProps> = ({\n value: valueFromProps,\n view = 'positive',\n size = 64,\n className,\n dataTestId,\n title: titleFromProps = isObject(valueFromProps) ? null : `${valueFromProps}`,\n titleComplete,\n subtitle,\n contentColor = 'secondary',\n subtitleComplete,\n stroke = true,\n fillComplete,\n icon: Icon,\n iconComplete: IconComplete,\n completeTextColor,\n completeIconColor = 'tertiary',\n direction = 'clockwise',\n height,\n children,\n progressStrokeColor,\n circleColor,\n strokeColor,\n directionType = 'asc',\n titleColor,\n subtitleColor,\n}) => {\n const isTimer = isObject(valueFromProps);\n const [timerValue, timerTitle] = useTimer(\n isTimer ? Math.min(Math.max(valueFromProps.timer, MIN_TIMER_VALUE), MAX_TIMER_VALUE) : -1,\n isTimer,\n isTimer ? (valueFromProps.counting ?? 'backward') : 'backward',\n isTimer ? (valueFromProps.onFinish ?? noop) : noop,\n );\n let value: number;\n let title: React.ReactNode;\n\n if (isTimer) {\n value = timerValue;\n title = timerTitle;\n } else {\n value = valueFromProps;\n title = titleFromProps;\n }\n\n value = directionType === 'desc' ? MAX_PROGRESS_VALUE - value : value;\n\n const memorized = useMemo(() => {\n const strokeWidth = STROKE[size];\n const maxProgress = 100;\n const minProgress = 0;\n const widthSVG = SIZES[size];\n const heightSVG = SIZES[size];\n const center = widthSVG / 2;\n const radius = center - strokeWidth / 2;\n const circumference = Math.PI * radius * 2;\n const progress = Math.min(Math.max(value, minProgress), maxProgress);\n const strokeDasharray = circumference.toFixed(3);\n const strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);\n\n return {\n widthSVG,\n heightSVG,\n center,\n radius,\n strokeDasharray,\n strokeDashoffset,\n };\n }, [size, value]);\n\n const isComplete = value === 100;\n const isCompleteTextColor = isComplete && completeTextColor;\n const titleContent = titleComplete && isComplete ? titleComplete : title;\n const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;\n const IconComponent = IconComplete && isComplete ? IconComplete : Icon;\n\n const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)\n ? (contentColor as TypographyColor)\n : undefined;\n\n const getTextColor = (color?: TypographyColor | string) => {\n if (isCompleteTextColor) {\n return completeTextColor;\n }\n\n if (color) {\n return isTypographyColor(color) ? color : undefined;\n }\n\n return typographyContentColor;\n };\n\n const getTextStyleColor = (color?: TypographyColor | string) => {\n if (color) {\n if (!isTypographyColor(color)) {\n return { color };\n }\n\n return {};\n }\n\n return {\n ...(!typographyContentColor && { color: contentColor }),\n };\n };\n\n const renderTitleString = () =>\n SIZES[size] > 64 ? (\n <TypographyTitleMobile\n className={styles.title}\n color={getTextColor(titleColor)}\n tag='div'\n font='system'\n view={VIEW_TITLE[size]}\n style={{\n ...getTextStyleColor(titleColor),\n }}\n dataTestId={getDataTestId(dataTestId, 'title')}\n >\n {titleContent}\n </TypographyTitleMobile>\n ) : (\n <TypographyText\n className={styles.title}\n color={getTextColor(titleColor)}\n tag='div'\n weight='bold'\n view={VIEW_TEXT[size]}\n style={{\n ...getTextStyleColor(titleColor),\n }}\n dataTestId={getDataTestId(dataTestId, 'title')}\n >\n {titleContent}\n </TypographyText>\n );\n\n const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);\n\n const renderSubTitle = () =>\n typeof subtitle === 'string' ? (\n <TypographyText\n tag='div'\n className={styles.subtitle}\n color={getTextColor(subtitleColor)}\n view='primary-small'\n dataTestId={getDataTestId(dataTestId, 'subtitle')}\n style={{\n ...getTextStyleColor(subtitleColor),\n }}\n >\n {subtitleContent}\n </TypographyText>\n ) : (\n subtitleContent\n );\n\n const renderIcon = () => (\n <span\n className={cn(\n styles.iconWrapper,\n styles[SIZE_TO_CLASSNAME_MAP[size]],\n styles.tertiary,\n styles[`icon-${contentColor}`],\n {\n [styles[`icon-${completeIconColor}`]]: completeIconColor,\n },\n )}\n >\n {IconComponent && <IconComponent className={styles.icon} />}\n </span>\n );\n\n const renderContent = () =>\n Icon || (IconComplete && isComplete) ? (\n renderIcon()\n ) : (\n <React.Fragment>\n {SIZES[size] > 24 && renderTitle()}\n {SIZES[size] > 64 && renderSubTitle()}\n </React.Fragment>\n );\n\n return (\n <div\n className={cn(styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]], className, {\n [styles[`bg-${view}`]]: fillComplete && isComplete,\n })}\n style={{\n ...(height && { height, width: height }),\n ...(circleColor && { backgroundColor: circleColor }),\n }}\n data-test-id={dataTestId}\n >\n <svg\n viewBox={`0 0 ${memorized.widthSVG} ${memorized.heightSVG}`}\n className={styles.svg}\n xmlns='http://www.w3.org/2000/svg'\n >\n <circle\n className={cn(styles.backgroundCircle, styles[SIZE_TO_CLASSNAME_MAP[size]], {\n [styles.stroke]: !stroke,\n })}\n style={{\n ...(strokeColor && stroke && { stroke: strokeColor }),\n }}\n cx={memorized.center}\n cy={memorized.center}\n r={memorized.radius}\n strokeWidth={STROKE[size]}\n data-test-id={getDataTestId(dataTestId, 'circle-progress-bar')}\n />\n <circle\n className={cn(\n styles.progressCircle,\n styles[view],\n styles[SIZE_TO_CLASSNAME_MAP[size]],\n )}\n style={{\n ...(progressStrokeColor && { stroke: progressStrokeColor }),\n }}\n cx={memorized.center}\n cy={memorized.center}\n r={memorized.radius}\n strokeWidth={STROKE[size]}\n strokeDasharray={memorized.strokeDasharray}\n strokeDashoffset={\n direction === 'counter-clockwise'\n ? -memorized.strokeDashoffset\n : memorized.strokeDashoffset\n }\n transform={`rotate(${-90} ${memorized.center} ${memorized.center})`}\n data-test-id={getDataTestId(dataTestId, 'circle-progress-value')}\n />\n </svg>\n <div\n className={cn(styles.labelWrapper, {\n [styles.label]: Icon || IconComplete,\n })}\n >\n {children || renderContent()}\n </div>\n </div>\n );\n};\n"],"names":["isObject","useTimer","MIN_TIMER_VALUE","MAX_TIMER_VALUE","noop","MAX_PROGRESS_VALUE","useMemo","STROKE","SIZES","TYPOGRAPHY_COLOR","isTypographyColor","__assign","React","TypographyTitleMobile","styles","VIEW_TITLE","getDataTestId","TypographyText","VIEW_TEXT","cn","SIZE_TO_CLASSNAME_MAP"],"mappings":"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"}
@@ -1 +1 @@
1
- export declare type ComponentSize = 24 | 48 | 64 | 80 | 128 | 144;
1
+ export type ComponentSize = 24 | 48 | 64 | 80 | 128 | 144;
@@ -1 +1 @@
1
- export declare type TypographyColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
1
+ export type TypographyColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
@@ -1 +1 @@
1
- {"version":3,"file":"use-timer.js","sources":["../src/use-timer.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { noop } from '@alfalab/core-components-shared';\n\nconst MAX_PERSENT_VALUE = 100;\n\nfunction makeTitle(time: number) {\n return `${Math.trunc(time / 60)}:${`${time % 60}`.padStart(2, '0')}`;\n}\n\n// eslint-disable-next-line max-params\nexport function useTimer(\n time: number,\n active = true,\n counting: 'forward' | 'backward',\n onFinish: () => void,\n interval = 1000,\n step = 1,\n): [value: number, title: string] {\n const [passedTime, setPassedTime] = useState(0);\n const isCompleted = passedTime === time;\n const persentValue = Math.trunc((passedTime / time) * MAX_PERSENT_VALUE);\n\n useEffect(() => {\n if (!active || isCompleted) {\n if (isCompleted) {\n onFinish();\n }\n\n return noop;\n }\n\n const timer = setInterval(() => {\n setPassedTime((prevPassed) => prevPassed + step);\n }, interval);\n\n return () => clearInterval(timer);\n }, [interval, isCompleted, active, step, onFinish]);\n\n return [persentValue, makeTitle(counting === 'backward' ? time - passedTime : passedTime)];\n}\n"],"names":["useState","useEffect","noop"],"mappings":";;;;;;;AAIA,IAAM,iBAAiB,GAAG,GAAG;AAE7B,SAAS,SAAS,CAAC,IAAY,EAAA;IAC3B,OAAO,EAAA,CAAA,MAAA,CAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC,EAAI,GAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,MAAA,CAAG,IAAI,GAAG,EAAE,CAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAE;AACxE;AAEA;AACgB,SAAA,QAAQ,CACpB,IAAY,EACZ,MAAa,EACb,QAAgC,EAChC,QAAoB,EACpB,QAAe,EACf,IAAQ,EAAA;AAJR,IAAA,IAAA,MAAA,KAAA,MAAA,EAAA,EAAA,MAAa,GAAA,IAAA,CAAA;AAGb,IAAA,IAAA,QAAA,KAAA,MAAA,EAAA,EAAA,QAAe,GAAA,IAAA,CAAA;AACf,IAAA,IAAA,IAAA,KAAA,MAAA,EAAA,EAAA,IAAQ,GAAA,CAAA,CAAA;IAEF,IAAA,EAAA,GAA8BA,cAAQ,CAAC,CAAC,CAAC,EAAxC,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAAe;AAC/C,IAAA,IAAM,WAAW,GAAG,UAAU,KAAK,IAAI;AACvC,IAAA,IAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,GAAG,IAAI,IAAI,iBAAiB,CAAC;AAExE,IAAAC,eAAS,CAAC,YAAA;AACN,QAAA,IAAI,CAAC,MAAM,IAAI,WAAW,EAAE;AACxB,YAAA,IAAI,WAAW,EAAE;AACb,gBAAA,QAAQ,EAAE;AACb;AAED,YAAA,OAAOC,SAAI;AACd;QAED,IAAM,KAAK,GAAG,WAAW,CAAC,YAAA;YACtB,aAAa,CAAC,UAAC,UAAU,EAAK,EAAA,OAAA,UAAU,GAAG,IAAI,CAAA,EAAA,CAAC;SACnD,EAAE,QAAQ,CAAC;QAEZ,OAAO,YAAA,EAAM,OAAA,aAAa,CAAC,KAAK,CAAC,CAAA,EAAA;AACrC,KAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;IAEnD,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC,QAAQ,KAAK,UAAU,GAAG,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;AAC9F;;;;"}
1
+ {"version":3,"file":"use-timer.js","sources":["../src/use-timer.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { noop } from '@alfalab/core-components-shared';\n\nconst MAX_PERSENT_VALUE = 100;\n\nfunction makeTitle(time: number) {\n return `${Math.trunc(time / 60)}:${`${time % 60}`.padStart(2, '0')}`;\n}\n\n// eslint-disable-next-line max-params\nexport function useTimer(\n time: number,\n active = true,\n counting: 'forward' | 'backward',\n onFinish: () => void,\n interval = 1000,\n step = 1,\n): [value: number, title: string] {\n const [passedTime, setPassedTime] = useState(0);\n const isCompleted = passedTime === time;\n const persentValue = Math.trunc((passedTime / time) * MAX_PERSENT_VALUE);\n\n useEffect(() => {\n if (!active || isCompleted) {\n if (isCompleted) {\n onFinish();\n }\n\n return noop;\n }\n\n const timer = setInterval(() => {\n setPassedTime((prevPassed) => prevPassed + step);\n }, interval);\n\n return () => clearInterval(timer);\n }, [interval, isCompleted, active, step, onFinish]);\n\n return [persentValue, makeTitle(counting === 'backward' ? time - passedTime : passedTime)];\n}\n"],"names":["useState","useEffect","noop"],"mappings":";;;;;;;AAIA,IAAM,iBAAiB,GAAG,GAAG;AAE7B,SAAS,SAAS,CAAC,IAAY,EAAA;IAC3B,OAAO,EAAA,CAAA,MAAA,CAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC,EAAI,GAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,MAAA,CAAG,IAAI,GAAG,EAAE,CAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAE;AACxE;AAEA;AACgB,SAAA,QAAQ,CACpB,IAAY,EACZ,MAAa,EACb,QAAgC,EAChC,QAAoB,EACpB,QAAe,EACf,IAAQ,EAAA;AAJR,IAAA,IAAA,MAAA,KAAA,MAAA,EAAA,EAAA,MAAa,GAAA,IAAA,CAAA;AAGb,IAAA,IAAA,QAAA,KAAA,MAAA,EAAA,EAAA,QAAe,GAAA,IAAA,CAAA;AACf,IAAA,IAAA,IAAA,KAAA,MAAA,EAAA,EAAA,IAAQ,GAAA,CAAA,CAAA;IAEF,IAAA,EAAA,GAA8BA,cAAQ,CAAC,CAAC,CAAC,EAAxC,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAAe;AAC/C,IAAA,IAAM,WAAW,GAAG,UAAU,KAAK,IAAI;AACvC,IAAA,IAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,GAAG,IAAI,IAAI,iBAAiB,CAAC;AAExE,IAAAC,eAAS,CAAC,YAAA;AACN,QAAA,IAAI,CAAC,MAAM,IAAI,WAAW,EAAE;YACxB,IAAI,WAAW,EAAE;AACb,gBAAA,QAAQ,EAAE;;AAGd,YAAA,OAAOC,SAAI;;QAGf,IAAM,KAAK,GAAG,WAAW,CAAC,YAAA;YACtB,aAAa,CAAC,UAAC,UAAU,EAAK,EAAA,OAAA,UAAU,GAAG,IAAI,CAAA,EAAA,CAAC;SACnD,EAAE,QAAQ,CAAC;QAEZ,OAAO,YAAA,EAAM,OAAA,aAAa,CAAC,KAAK,CAAC,CAAA,EAAA;AACrC,KAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;IAEnD,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC,QAAQ,KAAK,UAAU,GAAG,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;AAC9F;;;;"}
@@ -1,7 +1,7 @@
1
1
  import React, { type ElementType, type ReactNode } from 'react';
2
2
  import { type ComponentSize } from './types/component-size';
3
3
  import { type TypographyColor } from './types/typography-color';
4
- export declare type CircularProgressBarProps = {
4
+ export type CircularProgressBarProps = {
5
5
  /**
6
6
  * Уровень прогресса, %
7
7
  */
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { type ElementType, type ReactNode, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId, isObject, noop } from '@alfalab/core-components-shared';\nimport { TypographyText, TypographyTitleMobile } from '@alfalab/core-components-typography';\n\nimport { type ComponentSize } from './types/component-size';\nimport { type TypographyColor } from './types/typography-color';\nimport { isTypographyColor } from './utils/is-typography-color';\nimport {\n MAX_PROGRESS_VALUE,\n MAX_TIMER_VALUE,\n MIN_TIMER_VALUE,\n SIZE_TO_CLASSNAME_MAP,\n SIZES,\n STROKE,\n TYPOGRAPHY_COLOR,\n VIEW_TEXT,\n VIEW_TITLE,\n} from './consts';\nimport { useTimer } from './use-timer';\n\nimport styles from './index.module.css';\n\nexport type CircularProgressBarProps = {\n /**\n * Уровень прогресса, %\n */\n value:\n | number\n | {\n /**\n * Время таймера в секундах\n * Минимальное значение 0\n * Максимальное значение 3600\n */\n timer: number;\n /**\n * Направлние отсчета таймера\n * forward: считаем от 0 до указанного значения\n * backward: считаем от указанного значения до 0\n * @default backward\n */\n counting?: 'forward' | 'backward';\n /**\n * Обработчик завершения таймера\n */\n onFinish?: () => void;\n };\n\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Основной текст\n */\n title?: ReactNode;\n\n /**\n * Цвет контента\n */\n contentColor?: TypographyColor | string;\n\n /**\n * Цвет заголовка\n * Приоритет выше чем у `contentColor`\n */\n titleColor?: TypographyColor | string;\n\n /**\n * Цвет подзаголовка\n * Приоритет выше чем у `contentColor`\n */\n subtitleColor?: TypographyColor | string;\n\n /**\n * Дополнительный текст\n */\n subtitle?: ReactNode;\n\n /**\n * Основной текст при 100%\n */\n titleComplete?: ReactNode;\n\n /**\n * Дополнительный текст при 100%\n */\n subtitleComplete?: ReactNode;\n\n /**\n * Цвет заполнения\n */\n view?: 'positive' | 'negative';\n\n /**\n * Размер (144 — 144×144px, 128 — 128×128px, 80 — 80×80px, 64 — 64×64px, 48 — 48×48px, 24 — 24×24px)\n * @default 64\n */\n size?: ComponentSize;\n\n /**\n * Наличие желоба\n */\n stroke?: boolean;\n\n /**\n * Заливка при 100%\n */\n fillComplete?: boolean;\n\n /**\n * Цвет текста при 100%\n */\n completeTextColor?: 'primary' | 'primary-inverted' | 'positive' | 'negative';\n\n /**\n * Цвет иконки при 100%\n */\n completeIconColor?: 'primary-inverted' | 'positive' | 'negative' | 'tertiary';\n\n /**\n * Компонент иконки\n */\n icon?: ElementType<{ className?: string }>;\n\n /**\n * Компонент иконки при 100%\n */\n iconComplete?: ElementType<{ className?: string }>;\n\n /**\n * Направление прогресса (clockwise - по часовой стрелке, counter-clockwise - против часовой стрелки)\n */\n direction?: 'clockwise' | 'counter-clockwise';\n\n /**\n * Высота компонента, min = 24; max = 144\n * использовать совместно с size :\n * 144 от 144\n * 128 от 128 до 143\n * 80 от 80 до 127\n * 64 от 64 до 79\n * 48 от 48 до 63\n * 24 от 24 до 47\n */\n height?: number;\n\n /**\n * Id компонента для тестов\n */\n dataTestId?: string;\n\n /**\n * Дочерние элементы\n */\n children?: ReactNode;\n\n /**\n * Цвет прогресса\n */\n progressStrokeColor?: string;\n\n /**\n * Цвет заливки внутри круга\n */\n circleColor?: string;\n\n /**\n * Цвет желоба\n */\n strokeColor?: string;\n\n /**\n * Направление заполнения круга\n * @default desc\n */\n directionType?: 'asc' | 'desc';\n};\n\n/**\n * Компонент круглого прогресс бара.\n */\nexport const CircularProgressBar: React.FC<CircularProgressBarProps> = ({\n value: valueFromProps,\n view = 'positive',\n size = 64,\n className,\n dataTestId,\n title: titleFromProps = isObject(valueFromProps) ? null : `${valueFromProps}`,\n titleComplete,\n subtitle,\n contentColor = 'secondary',\n subtitleComplete,\n stroke = true,\n fillComplete,\n icon: Icon,\n iconComplete: IconComplete,\n completeTextColor,\n completeIconColor = 'tertiary',\n direction = 'clockwise',\n height,\n children,\n progressStrokeColor,\n circleColor,\n strokeColor,\n directionType = 'asc',\n titleColor,\n subtitleColor,\n}) => {\n const isTimer = isObject(valueFromProps);\n const [timerValue, timerTitle] = useTimer(\n isTimer ? Math.min(Math.max(valueFromProps.timer, MIN_TIMER_VALUE), MAX_TIMER_VALUE) : -1,\n isTimer,\n isTimer ? (valueFromProps.counting ?? 'backward') : 'backward',\n isTimer ? (valueFromProps.onFinish ?? noop) : noop,\n );\n let value: number;\n let title: React.ReactNode;\n\n if (isTimer) {\n value = timerValue;\n title = timerTitle;\n } else {\n value = valueFromProps;\n title = titleFromProps;\n }\n\n value = directionType === 'desc' ? MAX_PROGRESS_VALUE - value : value;\n\n const memorized = useMemo(() => {\n const strokeWidth = STROKE[size];\n const maxProgress = 100;\n const minProgress = 0;\n const widthSVG = SIZES[size];\n const heightSVG = SIZES[size];\n const center = widthSVG / 2;\n const radius = center - strokeWidth / 2;\n const circumference = Math.PI * radius * 2;\n const progress = Math.min(Math.max(value, minProgress), maxProgress);\n const strokeDasharray = circumference.toFixed(3);\n const strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);\n\n return {\n widthSVG,\n heightSVG,\n center,\n radius,\n strokeDasharray,\n strokeDashoffset,\n };\n }, [size, value]);\n\n const isComplete = value === 100;\n const isCompleteTextColor = isComplete && completeTextColor;\n const titleContent = titleComplete && isComplete ? titleComplete : title;\n const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;\n const IconComponent = IconComplete && isComplete ? IconComplete : Icon;\n\n const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)\n ? (contentColor as TypographyColor)\n : undefined;\n\n const getTextColor = (color?: TypographyColor | string) => {\n if (isCompleteTextColor) {\n return completeTextColor;\n }\n\n if (color) {\n return isTypographyColor(color) ? color : undefined;\n }\n\n return typographyContentColor;\n };\n\n const getTextStyleColor = (color?: TypographyColor | string) => {\n if (color) {\n if (!isTypographyColor(color)) {\n return { color };\n }\n\n return {};\n }\n\n return {\n ...(!typographyContentColor && { color: contentColor }),\n };\n };\n\n const renderTitleString = () =>\n SIZES[size] > 64 ? (\n <TypographyTitleMobile\n className={styles.title}\n color={getTextColor(titleColor)}\n tag='div'\n font='system'\n view={VIEW_TITLE[size]}\n style={{\n ...getTextStyleColor(titleColor),\n }}\n dataTestId={getDataTestId(dataTestId, 'title')}\n >\n {titleContent}\n </TypographyTitleMobile>\n ) : (\n <TypographyText\n className={styles.title}\n color={getTextColor(titleColor)}\n tag='div'\n weight='bold'\n view={VIEW_TEXT[size]}\n style={{\n ...getTextStyleColor(titleColor),\n }}\n dataTestId={getDataTestId(dataTestId, 'title')}\n >\n {titleContent}\n </TypographyText>\n );\n\n const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);\n\n const renderSubTitle = () =>\n typeof subtitle === 'string' ? (\n <TypographyText\n tag='div'\n className={styles.subtitle}\n color={getTextColor(subtitleColor)}\n view='primary-small'\n dataTestId={getDataTestId(dataTestId, 'subtitle')}\n style={{\n ...getTextStyleColor(subtitleColor),\n }}\n >\n {subtitleContent}\n </TypographyText>\n ) : (\n subtitleContent\n );\n\n const renderIcon = () => (\n <span\n className={cn(\n styles.iconWrapper,\n styles[SIZE_TO_CLASSNAME_MAP[size]],\n styles.tertiary,\n styles[`icon-${contentColor}`],\n {\n [styles[`icon-${completeIconColor}`]]: completeIconColor,\n },\n )}\n >\n {IconComponent && <IconComponent className={styles.icon} />}\n </span>\n );\n\n const renderContent = () =>\n Icon || (IconComplete && isComplete) ? (\n renderIcon()\n ) : (\n <React.Fragment>\n {SIZES[size] > 24 && renderTitle()}\n {SIZES[size] > 64 && renderSubTitle()}\n </React.Fragment>\n );\n\n return (\n <div\n className={cn(styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]], className, {\n [styles[`bg-${view}`]]: fillComplete && isComplete,\n })}\n style={{\n ...(height && { height, width: height }),\n ...(circleColor && { backgroundColor: circleColor }),\n }}\n data-test-id={dataTestId}\n >\n <svg\n viewBox={`0 0 ${memorized.widthSVG} ${memorized.heightSVG}`}\n className={styles.svg}\n xmlns='http://www.w3.org/2000/svg'\n >\n <circle\n className={cn(styles.backgroundCircle, styles[SIZE_TO_CLASSNAME_MAP[size]], {\n [styles.stroke]: !stroke,\n })}\n style={{\n ...(strokeColor && stroke && { stroke: strokeColor }),\n }}\n cx={memorized.center}\n cy={memorized.center}\n r={memorized.radius}\n strokeWidth={STROKE[size]}\n data-test-id={getDataTestId(dataTestId, 'circle-progress-bar')}\n />\n <circle\n className={cn(\n styles.progressCircle,\n styles[view],\n styles[SIZE_TO_CLASSNAME_MAP[size]],\n )}\n style={{\n ...(progressStrokeColor && { stroke: progressStrokeColor }),\n }}\n cx={memorized.center}\n cy={memorized.center}\n r={memorized.radius}\n strokeWidth={STROKE[size]}\n strokeDasharray={memorized.strokeDasharray}\n strokeDashoffset={\n direction === 'counter-clockwise'\n ? -memorized.strokeDashoffset\n : memorized.strokeDashoffset\n }\n transform={`rotate(${-90} ${memorized.center} ${memorized.center})`}\n data-test-id={getDataTestId(dataTestId, 'circle-progress-value')}\n />\n </svg>\n <div\n className={cn(styles.labelWrapper, {\n [styles.label]: Icon || IconComplete,\n })}\n >\n {children || renderContent()}\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { type ElementType, type ReactNode, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId, isObject, noop } from '@alfalab/core-components-shared';\nimport { TypographyText, TypographyTitleMobile } from '@alfalab/core-components-typography';\n\nimport { type ComponentSize } from './types/component-size';\nimport { type TypographyColor } from './types/typography-color';\nimport { isTypographyColor } from './utils/is-typography-color';\nimport {\n MAX_PROGRESS_VALUE,\n MAX_TIMER_VALUE,\n MIN_TIMER_VALUE,\n SIZE_TO_CLASSNAME_MAP,\n SIZES,\n STROKE,\n TYPOGRAPHY_COLOR,\n VIEW_TEXT,\n VIEW_TITLE,\n} from './consts';\nimport { useTimer } from './use-timer';\n\nimport styles from './index.module.css';\n\nexport type CircularProgressBarProps = {\n /**\n * Уровень прогресса, %\n */\n value:\n | number\n | {\n /**\n * Время таймера в секундах\n * Минимальное значение 0\n * Максимальное значение 3600\n */\n timer: number;\n /**\n * Направлние отсчета таймера\n * forward: считаем от 0 до указанного значения\n * backward: считаем от указанного значения до 0\n * @default backward\n */\n counting?: 'forward' | 'backward';\n /**\n * Обработчик завершения таймера\n */\n onFinish?: () => void;\n };\n\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Основной текст\n */\n title?: ReactNode;\n\n /**\n * Цвет контента\n */\n contentColor?: TypographyColor | string;\n\n /**\n * Цвет заголовка\n * Приоритет выше чем у `contentColor`\n */\n titleColor?: TypographyColor | string;\n\n /**\n * Цвет подзаголовка\n * Приоритет выше чем у `contentColor`\n */\n subtitleColor?: TypographyColor | string;\n\n /**\n * Дополнительный текст\n */\n subtitle?: ReactNode;\n\n /**\n * Основной текст при 100%\n */\n titleComplete?: ReactNode;\n\n /**\n * Дополнительный текст при 100%\n */\n subtitleComplete?: ReactNode;\n\n /**\n * Цвет заполнения\n */\n view?: 'positive' | 'negative';\n\n /**\n * Размер (144 — 144×144px, 128 — 128×128px, 80 — 80×80px, 64 — 64×64px, 48 — 48×48px, 24 — 24×24px)\n * @default 64\n */\n size?: ComponentSize;\n\n /**\n * Наличие желоба\n */\n stroke?: boolean;\n\n /**\n * Заливка при 100%\n */\n fillComplete?: boolean;\n\n /**\n * Цвет текста при 100%\n */\n completeTextColor?: 'primary' | 'primary-inverted' | 'positive' | 'negative';\n\n /**\n * Цвет иконки при 100%\n */\n completeIconColor?: 'primary-inverted' | 'positive' | 'negative' | 'tertiary';\n\n /**\n * Компонент иконки\n */\n icon?: ElementType<{ className?: string }>;\n\n /**\n * Компонент иконки при 100%\n */\n iconComplete?: ElementType<{ className?: string }>;\n\n /**\n * Направление прогресса (clockwise - по часовой стрелке, counter-clockwise - против часовой стрелки)\n */\n direction?: 'clockwise' | 'counter-clockwise';\n\n /**\n * Высота компонента, min = 24; max = 144\n * использовать совместно с size :\n * 144 от 144\n * 128 от 128 до 143\n * 80 от 80 до 127\n * 64 от 64 до 79\n * 48 от 48 до 63\n * 24 от 24 до 47\n */\n height?: number;\n\n /**\n * Id компонента для тестов\n */\n dataTestId?: string;\n\n /**\n * Дочерние элементы\n */\n children?: ReactNode;\n\n /**\n * Цвет прогресса\n */\n progressStrokeColor?: string;\n\n /**\n * Цвет заливки внутри круга\n */\n circleColor?: string;\n\n /**\n * Цвет желоба\n */\n strokeColor?: string;\n\n /**\n * Направление заполнения круга\n * @default desc\n */\n directionType?: 'asc' | 'desc';\n};\n\n/**\n * Компонент круглого прогресс бара.\n */\nexport const CircularProgressBar: React.FC<CircularProgressBarProps> = ({\n value: valueFromProps,\n view = 'positive',\n size = 64,\n className,\n dataTestId,\n title: titleFromProps = isObject(valueFromProps) ? null : `${valueFromProps}`,\n titleComplete,\n subtitle,\n contentColor = 'secondary',\n subtitleComplete,\n stroke = true,\n fillComplete,\n icon: Icon,\n iconComplete: IconComplete,\n completeTextColor,\n completeIconColor = 'tertiary',\n direction = 'clockwise',\n height,\n children,\n progressStrokeColor,\n circleColor,\n strokeColor,\n directionType = 'asc',\n titleColor,\n subtitleColor,\n}) => {\n const isTimer = isObject(valueFromProps);\n const [timerValue, timerTitle] = useTimer(\n isTimer ? Math.min(Math.max(valueFromProps.timer, MIN_TIMER_VALUE), MAX_TIMER_VALUE) : -1,\n isTimer,\n isTimer ? (valueFromProps.counting ?? 'backward') : 'backward',\n isTimer ? (valueFromProps.onFinish ?? noop) : noop,\n );\n let value: number;\n let title: React.ReactNode;\n\n if (isTimer) {\n value = timerValue;\n title = timerTitle;\n } else {\n value = valueFromProps;\n title = titleFromProps;\n }\n\n value = directionType === 'desc' ? MAX_PROGRESS_VALUE - value : value;\n\n const memorized = useMemo(() => {\n const strokeWidth = STROKE[size];\n const maxProgress = 100;\n const minProgress = 0;\n const widthSVG = SIZES[size];\n const heightSVG = SIZES[size];\n const center = widthSVG / 2;\n const radius = center - strokeWidth / 2;\n const circumference = Math.PI * radius * 2;\n const progress = Math.min(Math.max(value, minProgress), maxProgress);\n const strokeDasharray = circumference.toFixed(3);\n const strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);\n\n return {\n widthSVG,\n heightSVG,\n center,\n radius,\n strokeDasharray,\n strokeDashoffset,\n };\n }, [size, value]);\n\n const isComplete = value === 100;\n const isCompleteTextColor = isComplete && completeTextColor;\n const titleContent = titleComplete && isComplete ? titleComplete : title;\n const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;\n const IconComponent = IconComplete && isComplete ? IconComplete : Icon;\n\n const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)\n ? (contentColor as TypographyColor)\n : undefined;\n\n const getTextColor = (color?: TypographyColor | string) => {\n if (isCompleteTextColor) {\n return completeTextColor;\n }\n\n if (color) {\n return isTypographyColor(color) ? color : undefined;\n }\n\n return typographyContentColor;\n };\n\n const getTextStyleColor = (color?: TypographyColor | string) => {\n if (color) {\n if (!isTypographyColor(color)) {\n return { color };\n }\n\n return {};\n }\n\n return {\n ...(!typographyContentColor && { color: contentColor }),\n };\n };\n\n const renderTitleString = () =>\n SIZES[size] > 64 ? (\n <TypographyTitleMobile\n className={styles.title}\n color={getTextColor(titleColor)}\n tag='div'\n font='system'\n view={VIEW_TITLE[size]}\n style={{\n ...getTextStyleColor(titleColor),\n }}\n dataTestId={getDataTestId(dataTestId, 'title')}\n >\n {titleContent}\n </TypographyTitleMobile>\n ) : (\n <TypographyText\n className={styles.title}\n color={getTextColor(titleColor)}\n tag='div'\n weight='bold'\n view={VIEW_TEXT[size]}\n style={{\n ...getTextStyleColor(titleColor),\n }}\n dataTestId={getDataTestId(dataTestId, 'title')}\n >\n {titleContent}\n </TypographyText>\n );\n\n const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);\n\n const renderSubTitle = () =>\n typeof subtitle === 'string' ? (\n <TypographyText\n tag='div'\n className={styles.subtitle}\n color={getTextColor(subtitleColor)}\n view='primary-small'\n dataTestId={getDataTestId(dataTestId, 'subtitle')}\n style={{\n ...getTextStyleColor(subtitleColor),\n }}\n >\n {subtitleContent}\n </TypographyText>\n ) : (\n subtitleContent\n );\n\n const renderIcon = () => (\n <span\n className={cn(\n styles.iconWrapper,\n styles[SIZE_TO_CLASSNAME_MAP[size]],\n styles.tertiary,\n styles[`icon-${contentColor}`],\n {\n [styles[`icon-${completeIconColor}`]]: completeIconColor,\n },\n )}\n >\n {IconComponent && <IconComponent className={styles.icon} />}\n </span>\n );\n\n const renderContent = () =>\n Icon || (IconComplete && isComplete) ? (\n renderIcon()\n ) : (\n <React.Fragment>\n {SIZES[size] > 24 && renderTitle()}\n {SIZES[size] > 64 && renderSubTitle()}\n </React.Fragment>\n );\n\n return (\n <div\n className={cn(styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]], className, {\n [styles[`bg-${view}`]]: fillComplete && isComplete,\n })}\n style={{\n ...(height && { height, width: height }),\n ...(circleColor && { backgroundColor: circleColor }),\n }}\n data-test-id={dataTestId}\n >\n <svg\n viewBox={`0 0 ${memorized.widthSVG} ${memorized.heightSVG}`}\n className={styles.svg}\n xmlns='http://www.w3.org/2000/svg'\n >\n <circle\n className={cn(styles.backgroundCircle, styles[SIZE_TO_CLASSNAME_MAP[size]], {\n [styles.stroke]: !stroke,\n })}\n style={{\n ...(strokeColor && stroke && { stroke: strokeColor }),\n }}\n cx={memorized.center}\n cy={memorized.center}\n r={memorized.radius}\n strokeWidth={STROKE[size]}\n data-test-id={getDataTestId(dataTestId, 'circle-progress-bar')}\n />\n <circle\n className={cn(\n styles.progressCircle,\n styles[view],\n styles[SIZE_TO_CLASSNAME_MAP[size]],\n )}\n style={{\n ...(progressStrokeColor && { stroke: progressStrokeColor }),\n }}\n cx={memorized.center}\n cy={memorized.center}\n r={memorized.radius}\n strokeWidth={STROKE[size]}\n strokeDasharray={memorized.strokeDasharray}\n strokeDashoffset={\n direction === 'counter-clockwise'\n ? -memorized.strokeDashoffset\n : memorized.strokeDashoffset\n }\n transform={`rotate(${-90} ${memorized.center} ${memorized.center})`}\n data-test-id={getDataTestId(dataTestId, 'circle-progress-value')}\n />\n </svg>\n <div\n className={cn(styles.labelWrapper, {\n [styles.label]: Icon || IconComplete,\n })}\n >\n {children || renderContent()}\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
package/esm/index.css CHANGED
@@ -19,35 +19,35 @@
19
19
  --circular-progress-bar-positive-color: var(--color-light-status-positive);
20
20
  --circular-progress-bar-negative-color: var(--color-light-status-negative);
21
21
  }
22
- .circular-progress-bar__component_lvg3f {
22
+ .circular-progress-bar__component_617m8 {
23
23
  position: relative;
24
24
  display: flex;
25
25
  justify-content: center;
26
26
  align-items: center;
27
27
  border-radius: var(--border-radius-pill);
28
28
  }
29
- .circular-progress-bar__component_lvg3f.circular-progress-bar__bg-positive_lvg3f {
29
+ .circular-progress-bar__component_617m8.circular-progress-bar__bg-positive_617m8 {
30
30
  background: var(--circular-progress-bar-positive-color);
31
31
  }
32
- .circular-progress-bar__component_lvg3f.circular-progress-bar__bg-negative_lvg3f {
32
+ .circular-progress-bar__component_617m8.circular-progress-bar__bg-negative_617m8 {
33
33
  background: var(--circular-progress-bar-negative-color);
34
34
  }
35
- .circular-progress-bar__svg_lvg3f {
35
+ .circular-progress-bar__svg_617m8 {
36
36
  display: block;
37
37
  width: 100%;
38
38
  }
39
- .circular-progress-bar__title_lvg3f,
40
- .circular-progress-bar__subtitle_lvg3f {
39
+ .circular-progress-bar__title_617m8,
40
+ .circular-progress-bar__subtitle_617m8 {
41
41
  overflow: hidden;
42
42
  word-break: break-word;
43
43
  white-space: nowrap;
44
44
  text-overflow: ellipsis;
45
45
  margin: var(--gap-0) var(--gap-6);
46
46
  }
47
- .circular-progress-bar__subtitle_lvg3f {
47
+ .circular-progress-bar__subtitle_617m8 {
48
48
  max-height: 40px;
49
49
  }
50
- .circular-progress-bar__labelWrapper_lvg3f {
50
+ .circular-progress-bar__labelWrapper_617m8 {
51
51
  text-align: center;
52
52
  position: absolute;
53
53
  top: 50%;
@@ -55,153 +55,153 @@
55
55
  width: 100%;
56
56
  transform: translate(-50%, -50%);
57
57
  }
58
- .circular-progress-bar__labelWrapper_lvg3f.circular-progress-bar__label_lvg3f {
58
+ .circular-progress-bar__labelWrapper_617m8.circular-progress-bar__label_617m8 {
59
59
  display: flex;
60
60
  align-items: center;
61
61
  justify-content: center;
62
62
  }
63
- .circular-progress-bar__size-144_lvg3f {
63
+ .circular-progress-bar__size-144_617m8 {
64
64
  width: 144px;
65
65
  height: 144px;
66
66
  }
67
- .circular-progress-bar__size-144_lvg3f .circular-progress-bar__labelWrapper_lvg3f {
67
+ .circular-progress-bar__size-144_617m8 .circular-progress-bar__labelWrapper_617m8 {
68
68
  max-width: 128px;
69
69
  }
70
- .circular-progress-bar__size-144_lvg3f .circular-progress-bar__title_lvg3f {
70
+ .circular-progress-bar__size-144_617m8 .circular-progress-bar__title_617m8 {
71
71
  max-height: 32px;
72
72
  }
73
- .circular-progress-bar__size-128_lvg3f {
73
+ .circular-progress-bar__size-128_617m8 {
74
74
  width: 128px;
75
75
  height: 128px;
76
76
  }
77
- .circular-progress-bar__size-128_lvg3f .circular-progress-bar__labelWrapper_lvg3f {
77
+ .circular-progress-bar__size-128_617m8 .circular-progress-bar__labelWrapper_617m8 {
78
78
  max-width: 108px;
79
79
  }
80
- .circular-progress-bar__size-128_lvg3f .circular-progress-bar__title_lvg3f {
80
+ .circular-progress-bar__size-128_617m8 .circular-progress-bar__title_617m8 {
81
81
  max-height: 32px;
82
82
  }
83
- .circular-progress-bar__size-96_lvg3f {
83
+ .circular-progress-bar__size-96_617m8 {
84
84
  width: 96px;
85
85
  height: 96px;
86
86
  }
87
- .circular-progress-bar__size-96_lvg3f .circular-progress-bar__labelWrapper_lvg3f {
87
+ .circular-progress-bar__size-96_617m8 .circular-progress-bar__labelWrapper_617m8 {
88
88
  max-width: 64px;
89
89
  }
90
- .circular-progress-bar__size-96_lvg3f .circular-progress-bar__title_lvg3f {
90
+ .circular-progress-bar__size-96_617m8 .circular-progress-bar__title_617m8 {
91
91
  max-height: 20px;
92
92
  }
93
- .circular-progress-bar__size-80_lvg3f {
93
+ .circular-progress-bar__size-80_617m8 {
94
94
  width: 80px;
95
95
  height: 80px;
96
96
  }
97
- .circular-progress-bar__size-80_lvg3f .circular-progress-bar__labelWrapper_lvg3f {
97
+ .circular-progress-bar__size-80_617m8 .circular-progress-bar__labelWrapper_617m8 {
98
98
  max-width: 64px;
99
99
  }
100
- .circular-progress-bar__size-80_lvg3f .circular-progress-bar__title_lvg3f {
100
+ .circular-progress-bar__size-80_617m8 .circular-progress-bar__title_617m8 {
101
101
  max-height: 24px;
102
102
  }
103
- .circular-progress-bar__size-64_lvg3f {
103
+ .circular-progress-bar__size-64_617m8 {
104
104
  width: 64px;
105
105
  height: 64px;
106
106
  }
107
- .circular-progress-bar__size-64_lvg3f .circular-progress-bar__labelWrapper_lvg3f {
107
+ .circular-progress-bar__size-64_617m8 .circular-progress-bar__labelWrapper_617m8 {
108
108
  max-width: 48px;
109
109
  }
110
- .circular-progress-bar__size-64_lvg3f .circular-progress-bar__title_lvg3f {
110
+ .circular-progress-bar__size-64_617m8 .circular-progress-bar__title_617m8 {
111
111
  max-height: 16px;
112
112
  margin: var(--gap-0);
113
113
  }
114
- .circular-progress-bar__size-48_lvg3f {
114
+ .circular-progress-bar__size-48_617m8 {
115
115
  width: 48px;
116
116
  height: 48px;
117
117
  }
118
- .circular-progress-bar__size-48_lvg3f .circular-progress-bar__labelWrapper_lvg3f {
118
+ .circular-progress-bar__size-48_617m8 .circular-progress-bar__labelWrapper_617m8 {
119
119
  max-width: 40px;
120
120
  }
121
- .circular-progress-bar__size-48_lvg3f .circular-progress-bar__title_lvg3f {
121
+ .circular-progress-bar__size-48_617m8 .circular-progress-bar__title_617m8 {
122
122
  max-height: 16px;
123
123
  margin: var(--gap-0);
124
124
  }
125
- .circular-progress-bar__size-24_lvg3f {
125
+ .circular-progress-bar__size-24_617m8 {
126
126
  width: 24px;
127
127
  height: 24px;
128
128
  }
129
- .circular-progress-bar__size-24_lvg3f .circular-progress-bar__labelWrapper_lvg3f {
129
+ .circular-progress-bar__size-24_617m8 .circular-progress-bar__labelWrapper_617m8 {
130
130
  max-width: 24px;
131
131
  }
132
- .circular-progress-bar__backgroundCircle_lvg3f,
133
- .circular-progress-bar__progressCircle_lvg3f {
132
+ .circular-progress-bar__backgroundCircle_617m8,
133
+ .circular-progress-bar__progressCircle_617m8 {
134
134
  width: 100%;
135
135
  height: 100%;
136
136
  fill: transparent;
137
137
  }
138
- .circular-progress-bar__positive_lvg3f {
138
+ .circular-progress-bar__positive_617m8 {
139
139
  stroke: var(--circular-progress-bar-positive-color);
140
140
  }
141
- .circular-progress-bar__negative_lvg3f {
141
+ .circular-progress-bar__negative_617m8 {
142
142
  stroke: var(--circular-progress-bar-negative-color);
143
143
  }
144
- .circular-progress-bar__backgroundCircle_lvg3f {
144
+ .circular-progress-bar__backgroundCircle_617m8 {
145
145
  stroke: var(--circular-progress-bar-stroke-color);
146
146
  }
147
- .circular-progress-bar__backgroundCircle_lvg3f.circular-progress-bar__stroke_lvg3f {
147
+ .circular-progress-bar__backgroundCircle_617m8.circular-progress-bar__stroke_617m8 {
148
148
  stroke: transparent;
149
149
  }
150
- .circular-progress-bar__progressCircle_lvg3f {
150
+ .circular-progress-bar__progressCircle_617m8 {
151
151
  stroke-linecap: round;
152
152
  }
153
- .circular-progress-bar__iconWrapper_lvg3f {
153
+ .circular-progress-bar__iconWrapper_617m8 {
154
154
  display: flex;
155
155
  align-items: center;
156
156
  justify-content: center;
157
157
  }
158
- .circular-progress-bar__iconWrapper_lvg3f.circular-progress-bar__size-144_lvg3f {
158
+ .circular-progress-bar__iconWrapper_617m8.circular-progress-bar__size-144_617m8 {
159
159
  max-width: 64px;
160
160
  max-height: 64px;
161
161
  }
162
- .circular-progress-bar__iconWrapper_lvg3f.circular-progress-bar__size-128_lvg3f {
162
+ .circular-progress-bar__iconWrapper_617m8.circular-progress-bar__size-128_617m8 {
163
163
  max-width: 64px;
164
164
  max-height: 64px;
165
165
  }
166
- .circular-progress-bar__iconWrapper_lvg3f.circular-progress-bar__size-96_lvg3f {
166
+ .circular-progress-bar__iconWrapper_617m8.circular-progress-bar__size-96_617m8 {
167
167
  max-width: 48px;
168
168
  max-height: 48px;
169
169
  }
170
- .circular-progress-bar__iconWrapper_lvg3f.circular-progress-bar__size-80_lvg3f {
170
+ .circular-progress-bar__iconWrapper_617m8.circular-progress-bar__size-80_617m8 {
171
171
  max-width: 48px;
172
172
  max-height: 48px;
173
173
  }
174
- .circular-progress-bar__iconWrapper_lvg3f.circular-progress-bar__size-64_lvg3f {
174
+ .circular-progress-bar__iconWrapper_617m8.circular-progress-bar__size-64_617m8 {
175
175
  max-width: 36px;
176
176
  max-height: 36px;
177
177
  }
178
- .circular-progress-bar__iconWrapper_lvg3f.circular-progress-bar__size-48_lvg3f {
178
+ .circular-progress-bar__iconWrapper_617m8.circular-progress-bar__size-48_617m8 {
179
179
  max-width: 24px;
180
180
  max-height: 24px;
181
181
  }
182
- .circular-progress-bar__iconWrapper_lvg3f.circular-progress-bar__size-24_lvg3f {
182
+ .circular-progress-bar__iconWrapper_617m8.circular-progress-bar__size-24_617m8 {
183
183
  max-width: 16px;
184
184
  max-height: 16px;
185
185
  }
186
- .circular-progress-bar__iconWrapper_lvg3f.circular-progress-bar__icon-tertiary_lvg3f {
186
+ .circular-progress-bar__iconWrapper_617m8.circular-progress-bar__icon-tertiary_617m8 {
187
187
  color: var(--color-light-neutral-500);
188
188
  }
189
- .circular-progress-bar__iconWrapper_lvg3f.circular-progress-bar__icon-positive_lvg3f {
189
+ .circular-progress-bar__iconWrapper_617m8.circular-progress-bar__icon-positive_617m8 {
190
190
  color: var(--color-light-status-positive);
191
191
  }
192
- .circular-progress-bar__iconWrapper_lvg3f.circular-progress-bar__icon-negative_lvg3f {
192
+ .circular-progress-bar__iconWrapper_617m8.circular-progress-bar__icon-negative_617m8 {
193
193
  color: var(--color-light-status-negative);
194
194
  }
195
- .circular-progress-bar__iconWrapper_lvg3f.circular-progress-bar__icon-primary-inverted_lvg3f {
195
+ .circular-progress-bar__iconWrapper_617m8.circular-progress-bar__icon-primary-inverted_617m8 {
196
196
  color: var(--color-light-neutral-translucent-1300-inverted);
197
197
  }
198
- .circular-progress-bar__iconWrapper_lvg3f.circular-progress-bar__icon-primary_lvg3f {
198
+ .circular-progress-bar__iconWrapper_617m8.circular-progress-bar__icon-primary_617m8 {
199
199
  color: var(--color-light-neutral-translucent-1300);
200
200
  }
201
- .circular-progress-bar__iconWrapper_lvg3f.circular-progress-bar__icon-secondary_lvg3f {
201
+ .circular-progress-bar__iconWrapper_617m8.circular-progress-bar__icon-secondary_617m8 {
202
202
  color: var(--color-light-neutral-700);
203
203
  }
204
- .circular-progress-bar__icon_lvg3f {
204
+ .circular-progress-bar__icon_617m8 {
205
205
  width: 100%;
206
206
  height: 100%;
207
207
  }