@alfalab/core-components-circular-progress-bar 3.9.4 → 4.0.0-snapshot-6a9d3fc
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 +5 -8
- package/Component.js +18 -19
- package/Component.js.map +1 -0
- package/consts.d.ts +9 -10
- package/consts.js +1 -0
- package/consts.js.map +1 -0
- package/cssm/Component.d.ts +5 -8
- package/cssm/Component.js +13 -12
- package/cssm/Component.js.map +1 -0
- package/cssm/consts.d.ts +9 -10
- package/cssm/consts.js +1 -0
- package/cssm/consts.js.map +1 -0
- package/cssm/index.d.ts +2 -2
- package/cssm/index.js +1 -0
- package/cssm/index.js.map +1 -0
- package/cssm/index.module.css +4 -29
- package/cssm/shared/index.d.ts +1 -1
- package/cssm/shared/index.js +3 -2
- package/cssm/shared/index.js.map +1 -0
- package/cssm/types/component-size.d.ts +1 -2
- package/cssm/types/component-size.js +1 -0
- package/cssm/types/component-size.js.map +1 -0
- package/cssm/types/typography-color.d.ts +1 -2
- package/cssm/types/typography-color.js +1 -0
- package/cssm/types/typography-color.js.map +1 -0
- package/cssm/use-timer.d.ts +1 -2
- package/cssm/use-timer.js +3 -2
- package/cssm/use-timer.js.map +1 -0
- package/cssm/utils/get-circular-progress-bar-test-ids.d.ts +1 -2
- package/cssm/utils/get-circular-progress-bar-test-ids.js +6 -5
- package/cssm/utils/get-circular-progress-bar-test-ids.js.map +1 -0
- package/cssm/utils/is-typography-color.d.ts +2 -3
- package/cssm/utils/is-typography-color.js +1 -0
- package/cssm/utils/is-typography-color.js.map +1 -0
- package/esm/Component.d.ts +5 -8
- package/esm/Component.js +3 -4
- package/esm/Component.js.map +1 -0
- package/esm/consts.d.ts +9 -10
- package/esm/consts.js +1 -0
- package/esm/consts.js.map +1 -0
- package/esm/index.css +56 -82
- package/esm/index.d.ts +2 -2
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -0
- package/esm/index.module.css.js +6 -0
- package/esm/index.module.css.js.map +1 -0
- package/esm/shared/index.d.ts +1 -1
- package/esm/shared/index.js +1 -0
- package/esm/shared/index.js.map +1 -0
- package/esm/types/component-size.d.ts +1 -2
- package/esm/types/component-size.js +1 -0
- package/esm/types/component-size.js.map +1 -0
- package/esm/types/typography-color.d.ts +1 -2
- package/esm/types/typography-color.js +1 -0
- package/esm/types/typography-color.js.map +1 -0
- package/esm/use-timer.d.ts +1 -2
- package/esm/use-timer.js +1 -0
- package/esm/use-timer.js.map +1 -0
- package/esm/utils/get-circular-progress-bar-test-ids.d.ts +1 -2
- package/esm/utils/get-circular-progress-bar-test-ids.js +1 -0
- package/esm/utils/get-circular-progress-bar-test-ids.js.map +1 -0
- package/esm/utils/is-typography-color.d.ts +2 -3
- package/esm/utils/is-typography-color.js +1 -0
- package/esm/utils/is-typography-color.js.map +1 -0
- package/index.css +56 -82
- package/index.d.ts +2 -2
- package/index.js +1 -0
- package/index.js.map +1 -0
- package/index.module.css.js +8 -0
- package/index.module.css.js.map +1 -0
- package/modern/Component.d.ts +5 -8
- package/modern/Component.js +5 -6
- package/modern/Component.js.map +1 -0
- package/modern/consts.d.ts +9 -10
- package/modern/consts.js +1 -0
- package/modern/consts.js.map +1 -0
- package/modern/index.css +56 -82
- package/modern/index.d.ts +2 -2
- package/modern/index.js +1 -0
- package/modern/index.js.map +1 -0
- package/modern/index.module.css.js +6 -0
- package/modern/index.module.css.js.map +1 -0
- package/modern/shared/index.d.ts +1 -1
- package/modern/shared/index.js +1 -0
- package/modern/shared/index.js.map +1 -0
- package/modern/types/component-size.d.ts +1 -2
- package/modern/types/component-size.js +1 -0
- package/modern/types/component-size.js.map +1 -0
- package/modern/types/typography-color.d.ts +1 -2
- package/modern/types/typography-color.js +1 -0
- package/modern/types/typography-color.js.map +1 -0
- package/modern/use-timer.d.ts +1 -2
- package/modern/use-timer.js +1 -0
- package/modern/use-timer.js.map +1 -0
- package/modern/utils/get-circular-progress-bar-test-ids.d.ts +1 -2
- package/modern/utils/get-circular-progress-bar-test-ids.js +1 -0
- package/modern/utils/get-circular-progress-bar-test-ids.js.map +1 -0
- package/modern/utils/is-typography-color.d.ts +2 -3
- package/modern/utils/is-typography-color.js +1 -0
- package/modern/utils/is-typography-color.js.map +1 -0
- package/moderncssm/Component.d.ts +5 -8
- package/moderncssm/Component.js +4 -3
- package/moderncssm/Component.js.map +1 -0
- package/moderncssm/consts.d.ts +9 -10
- package/moderncssm/consts.js +1 -0
- package/moderncssm/consts.js.map +1 -0
- package/moderncssm/index.d.ts +2 -2
- package/moderncssm/index.js +1 -0
- package/moderncssm/index.js.map +1 -0
- package/moderncssm/index.module.css +0 -9
- package/moderncssm/shared/index.d.ts +1 -1
- package/moderncssm/shared/index.js +1 -0
- package/moderncssm/shared/index.js.map +1 -0
- package/moderncssm/types/component-size.d.ts +1 -2
- package/moderncssm/types/component-size.js +1 -0
- package/moderncssm/types/component-size.js.map +1 -0
- package/moderncssm/types/typography-color.d.ts +1 -2
- package/moderncssm/types/typography-color.js +1 -0
- package/moderncssm/types/typography-color.js.map +1 -0
- package/moderncssm/use-timer.d.ts +1 -2
- package/moderncssm/use-timer.js +1 -0
- package/moderncssm/use-timer.js.map +1 -0
- package/moderncssm/utils/get-circular-progress-bar-test-ids.d.ts +1 -2
- package/moderncssm/utils/get-circular-progress-bar-test-ids.js +1 -0
- package/moderncssm/utils/get-circular-progress-bar-test-ids.js.map +1 -0
- package/moderncssm/utils/is-typography-color.d.ts +2 -3
- package/moderncssm/utils/is-typography-color.js +1 -0
- package/moderncssm/utils/is-typography-color.js.map +1 -0
- package/package.json +7 -6
- package/shared/index.d.ts +1 -1
- package/shared/index.js +3 -2
- package/shared/index.js.map +1 -0
- package/types/component-size.d.ts +1 -2
- package/types/component-size.js +1 -0
- package/types/component-size.js.map +1 -0
- package/types/typography-color.d.ts +1 -2
- package/types/typography-color.js +1 -0
- package/types/typography-color.js.map +1 -0
- package/use-timer.d.ts +1 -2
- package/use-timer.js +1 -0
- package/use-timer.js.map +1 -0
- package/utils/get-circular-progress-bar-test-ids.d.ts +1 -2
- package/utils/get-circular-progress-bar-test-ids.js +1 -0
- package/utils/get-circular-progress-bar-test-ids.js.map +1 -0
- package/utils/is-typography-color.d.ts +2 -3
- package/utils/is-typography-color.js +1 -0
- package/utils/is-typography-color.js.map +1 -0
- package/shared/package.json +0 -3
- package/src/shared/package.json +0 -3
package/Component.d.ts
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
import { TypographyColor } from "./types/typography-color";
|
|
6
|
-
type CircularProgressBarProps = {
|
|
1
|
+
import React, { ElementType, ReactNode } from 'react';
|
|
2
|
+
import { ComponentSize } from './types/component-size';
|
|
3
|
+
import { TypographyColor } from './types/typography-color';
|
|
4
|
+
export declare type CircularProgressBarProps = {
|
|
7
5
|
/**
|
|
8
6
|
* Уровень прогресса, %
|
|
9
7
|
*/
|
|
@@ -142,5 +140,4 @@ type CircularProgressBarProps = {
|
|
|
142
140
|
/**
|
|
143
141
|
* Компонент круглого прогресс бара.
|
|
144
142
|
*/
|
|
145
|
-
declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
|
|
146
|
-
export { CircularProgressBarProps, CircularProgressBar };
|
|
143
|
+
export declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
|
package/Component.js
CHANGED
|
@@ -7,18 +7,16 @@ var React = require('react');
|
|
|
7
7
|
var cn = require('classnames');
|
|
8
8
|
var coreComponentsShared = require('@alfalab/core-components-shared');
|
|
9
9
|
var coreComponentsTypography = require('@alfalab/core-components-typography');
|
|
10
|
-
var
|
|
10
|
+
var isTypographyColor = require('./utils/is-typography-color.js');
|
|
11
11
|
var consts = require('./consts.js');
|
|
12
12
|
var useTimer = require('./use-timer.js');
|
|
13
|
+
var index_module = require('./index.module.css.js');
|
|
13
14
|
|
|
14
15
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
15
16
|
|
|
16
17
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
17
18
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
18
19
|
|
|
19
|
-
var styles = {"component":"circular-progress-bar__component_ajrib","bg-positive":"circular-progress-bar__bg-positive_ajrib","bg-negative":"circular-progress-bar__bg-negative_ajrib","svg":"circular-progress-bar__svg_ajrib","title":"circular-progress-bar__title_ajrib","subtitle":"circular-progress-bar__subtitle_ajrib","labelWrapper":"circular-progress-bar__labelWrapper_ajrib","label":"circular-progress-bar__label_ajrib","typography":"circular-progress-bar__typography_ajrib","size-144":"circular-progress-bar__size-144_ajrib","size-128":"circular-progress-bar__size-128_ajrib","size-96":"circular-progress-bar__size-96_ajrib","size-80":"circular-progress-bar__size-80_ajrib","size-64":"circular-progress-bar__size-64_ajrib","size-48":"circular-progress-bar__size-48_ajrib","size-24":"circular-progress-bar__size-24_ajrib","backgroundCircle":"circular-progress-bar__backgroundCircle_ajrib","progressCircle":"circular-progress-bar__progressCircle_ajrib","positive":"circular-progress-bar__positive_ajrib","negative":"circular-progress-bar__negative_ajrib","stroke":"circular-progress-bar__stroke_ajrib","iconWrapper":"circular-progress-bar__iconWrapper_ajrib","icon-tertiary":"circular-progress-bar__icon-tertiary_ajrib","icon-positive":"circular-progress-bar__icon-positive_ajrib","icon-negative":"circular-progress-bar__icon-negative_ajrib","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_ajrib","icon-primary":"circular-progress-bar__icon-primary_ajrib","icon-secondary":"circular-progress-bar__icon-secondary_ajrib","icon":"circular-progress-bar__icon_ajrib"};
|
|
20
|
-
require('./index.css')
|
|
21
|
-
|
|
22
20
|
/**
|
|
23
21
|
* Компонент круглого прогресс бара.
|
|
24
22
|
*/
|
|
@@ -73,13 +71,13 @@ var CircularProgressBar = function (_a) {
|
|
|
73
71
|
return completeTextColor;
|
|
74
72
|
}
|
|
75
73
|
if (color) {
|
|
76
|
-
return
|
|
74
|
+
return isTypographyColor.isTypographyColor(color) ? color : undefined;
|
|
77
75
|
}
|
|
78
76
|
return typographyContentColor;
|
|
79
77
|
};
|
|
80
78
|
var getTextStyleColor = function (color) {
|
|
81
79
|
if (color) {
|
|
82
|
-
if (!
|
|
80
|
+
if (!isTypographyColor.isTypographyColor(color)) {
|
|
83
81
|
return { color: color };
|
|
84
82
|
}
|
|
85
83
|
return {};
|
|
@@ -87,36 +85,37 @@ var CircularProgressBar = function (_a) {
|
|
|
87
85
|
return tslib.__assign({}, (!typographyContentColor && { color: contentColor }));
|
|
88
86
|
};
|
|
89
87
|
var renderTitleString = function () {
|
|
90
|
-
return consts.SIZES[size] > 64 ? (React__default.default.createElement(coreComponentsTypography.TitleMobile, { className: cn__default.default(
|
|
88
|
+
return consts.SIZES[size] > 64 ? (React__default.default.createElement(coreComponentsTypography.TitleMobile, { className: cn__default.default(index_module.typography, index_module.title), color: getTextColor(titleColor), tag: 'div', font: 'system', view: consts.VIEW_TITLE[size], style: tslib.__assign({}, getTextStyleColor(titleColor)), dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'title') }, titleContent)) : (React__default.default.createElement(coreComponentsTypography.Text, { className: index_module.title, color: getTextColor(titleColor), tag: 'div', weight: 'bold', view: consts.VIEW_TEXT[size], style: tslib.__assign({}, getTextStyleColor(titleColor)), dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'title') }, titleContent));
|
|
91
89
|
};
|
|
92
90
|
var renderTitle = function () { return (typeof title === 'string' ? renderTitleString() : titleContent); };
|
|
93
91
|
var renderSubTitle = function () {
|
|
94
|
-
return typeof subtitle === 'string' ? (React__default.default.createElement(coreComponentsTypography.Text, { tag: 'div', className:
|
|
92
|
+
return typeof subtitle === 'string' ? (React__default.default.createElement(coreComponentsTypography.Text, { tag: 'div', className: index_module.subtitle, color: getTextColor(subtitleColor), view: 'primary-small', dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'subtitle'), style: tslib.__assign({}, getTextStyleColor(subtitleColor)) }, subtitleContent)) : (subtitleContent);
|
|
95
93
|
};
|
|
96
94
|
var renderIcon = function () {
|
|
97
95
|
var _a;
|
|
98
|
-
return (React__default.default.createElement("span", { className: cn__default.default(
|
|
99
|
-
_a[
|
|
100
|
-
_a)) }, IconComponent && React__default.default.createElement(IconComponent, { className:
|
|
96
|
+
return (React__default.default.createElement("span", { className: cn__default.default(index_module.iconWrapper, index_module[consts.SIZE_TO_CLASSNAME_MAP[size]], index_module.tertiary, index_module["icon-".concat(contentColor)], (_a = {},
|
|
97
|
+
_a[index_module["icon-".concat(completeIconColor)]] = completeIconColor,
|
|
98
|
+
_a)) }, IconComponent && React__default.default.createElement(IconComponent, { className: index_module.icon })));
|
|
101
99
|
};
|
|
102
100
|
var renderContent = function () {
|
|
103
101
|
return Icon || (IconComplete && isComplete) ? (renderIcon()) : (React__default.default.createElement(React__default.default.Fragment, null,
|
|
104
102
|
consts.SIZES[size] > 24 && renderTitle(),
|
|
105
103
|
consts.SIZES[size] > 64 && renderSubTitle()));
|
|
106
104
|
};
|
|
107
|
-
return (React__default.default.createElement("div", { className: cn__default.default(
|
|
108
|
-
_b[
|
|
105
|
+
return (React__default.default.createElement("div", { className: cn__default.default(index_module.component, index_module[consts.SIZE_TO_CLASSNAME_MAP[size]], className, (_b = {},
|
|
106
|
+
_b[index_module["bg-".concat(view)]] = fillComplete && isComplete,
|
|
109
107
|
_b)), style: tslib.__assign(tslib.__assign({}, (height && { height: height, width: height })), (circleColor && { backgroundColor: circleColor })), "data-test-id": dataTestId },
|
|
110
|
-
React__default.default.createElement("svg", { viewBox: "0 0 ".concat(memorized.widthSVG, " ").concat(memorized.heightSVG), className:
|
|
111
|
-
React__default.default.createElement("circle", { className: cn__default.default(
|
|
112
|
-
_c[
|
|
108
|
+
React__default.default.createElement("svg", { viewBox: "0 0 ".concat(memorized.widthSVG, " ").concat(memorized.heightSVG), className: index_module.svg, xmlns: 'http://www.w3.org/2000/svg' },
|
|
109
|
+
React__default.default.createElement("circle", { className: cn__default.default(index_module.backgroundCircle, index_module[consts.SIZE_TO_CLASSNAME_MAP[size]], (_c = {},
|
|
110
|
+
_c[index_module.stroke] = !stroke,
|
|
113
111
|
_c)), style: tslib.__assign({}, (strokeColor && stroke && { stroke: strokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size], "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'circle-progress-bar') }),
|
|
114
|
-
React__default.default.createElement("circle", { className: cn__default.default(
|
|
112
|
+
React__default.default.createElement("circle", { className: cn__default.default(index_module.progressCircle, index_module[view], index_module[consts.SIZE_TO_CLASSNAME_MAP[size]]), style: tslib.__assign({}, (progressStrokeColor && { stroke: progressStrokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
|
|
115
113
|
? -memorized.strokeDashoffset
|
|
116
114
|
: memorized.strokeDashoffset, transform: "rotate(".concat(-90, " ").concat(memorized.center, " ").concat(memorized.center, ")"), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'circle-progress-value') })),
|
|
117
|
-
React__default.default.createElement("div", { className: cn__default.default(
|
|
118
|
-
_d[
|
|
115
|
+
React__default.default.createElement("div", { className: cn__default.default(index_module.labelWrapper, (_d = {},
|
|
116
|
+
_d[index_module.label] = Icon || IconComplete,
|
|
119
117
|
_d)) }, children || renderContent())));
|
|
120
118
|
};
|
|
121
119
|
|
|
122
120
|
exports.CircularProgressBar = CircularProgressBar;
|
|
121
|
+
//# sourceMappingURL=Component.js.map
|
package/Component.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { ElementType, ReactNode, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId, isObject, noop } from '@alfalab/core-components-shared';\nimport { Text, TitleMobile } from '@alfalab/core-components-typography';\n\nimport { ComponentSize } from './types/component-size';\nimport { 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\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 * Размер (xxl — 144×144px, xl — 128×128px, l — 80×80px, m — 64×64px, s — 48×48px, xs — 24×24px)\n * @description xs, s, m, l, xl, xxl deprecated, используйте вместо них 24, 48, 64, 80, 128, 144 соответственно\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 * xxl от 144\n * xl от 128 до 143\n * l от 80 до 127\n * m от 64 до 79\n * s от 48 до 63\n * xs от 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 <TitleMobile\n className={cn(styles.typography, 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 </TitleMobile>\n ) : (\n <Text\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 </Text>\n );\n\n const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);\n\n const renderSubTitle = () =>\n typeof subtitle === 'string' ? (\n <Text\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 </Text>\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","TitleMobile","cn","styles","VIEW_TITLE","getDataTestId","Text","VIEW_TEXT","SIZE_TO_CLASSNAME_MAP"],"mappings":"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"}
|
package/consts.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const SIZES: {
|
|
1
|
+
export declare const SIZES: {
|
|
2
2
|
xs: number;
|
|
3
3
|
s: number;
|
|
4
4
|
m: number;
|
|
@@ -13,7 +13,7 @@ declare const SIZES: {
|
|
|
13
13
|
128: number;
|
|
14
14
|
144: number;
|
|
15
15
|
};
|
|
16
|
-
declare const STROKE: {
|
|
16
|
+
export declare const STROKE: {
|
|
17
17
|
xs: number;
|
|
18
18
|
s: number;
|
|
19
19
|
m: number;
|
|
@@ -28,7 +28,7 @@ declare const STROKE: {
|
|
|
28
28
|
128: number;
|
|
29
29
|
144: number;
|
|
30
30
|
};
|
|
31
|
-
declare const VIEW_TITLE: {
|
|
31
|
+
export declare const VIEW_TITLE: {
|
|
32
32
|
readonly xs: "small";
|
|
33
33
|
readonly s: "small";
|
|
34
34
|
readonly m: "small";
|
|
@@ -43,7 +43,7 @@ declare const VIEW_TITLE: {
|
|
|
43
43
|
readonly 128: "medium";
|
|
44
44
|
readonly 144: "medium";
|
|
45
45
|
};
|
|
46
|
-
declare const VIEW_TEXT: {
|
|
46
|
+
export declare const VIEW_TEXT: {
|
|
47
47
|
readonly xs: "secondary-small";
|
|
48
48
|
readonly s: "secondary-small";
|
|
49
49
|
readonly m: "secondary-large";
|
|
@@ -58,8 +58,8 @@ declare const VIEW_TEXT: {
|
|
|
58
58
|
readonly 128: "secondary-large";
|
|
59
59
|
readonly 144: "secondary-large";
|
|
60
60
|
};
|
|
61
|
-
declare const TYPOGRAPHY_COLOR: string[];
|
|
62
|
-
declare const SIZE_TO_CLASSNAME_MAP: {
|
|
61
|
+
export declare const TYPOGRAPHY_COLOR: string[];
|
|
62
|
+
export declare const SIZE_TO_CLASSNAME_MAP: {
|
|
63
63
|
xs: string;
|
|
64
64
|
s: string;
|
|
65
65
|
m: string;
|
|
@@ -74,7 +74,6 @@ declare const SIZE_TO_CLASSNAME_MAP: {
|
|
|
74
74
|
128: string;
|
|
75
75
|
144: string;
|
|
76
76
|
};
|
|
77
|
-
declare const MAX_PROGRESS_VALUE = 100;
|
|
78
|
-
declare const MIN_TIMER_VALUE = 0;
|
|
79
|
-
declare const MAX_TIMER_VALUE = 3599;
|
|
80
|
-
export { SIZES, STROKE, VIEW_TITLE, VIEW_TEXT, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP, MAX_PROGRESS_VALUE, MIN_TIMER_VALUE, MAX_TIMER_VALUE };
|
|
77
|
+
export declare const MAX_PROGRESS_VALUE = 100;
|
|
78
|
+
export declare const MIN_TIMER_VALUE = 0;
|
|
79
|
+
export declare const MAX_TIMER_VALUE = 3599;
|
package/consts.js
CHANGED
package/consts.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"consts.js","sources":["src/consts.ts"],"sourcesContent":["export const SIZES = {\n xs: 24,\n s: 48,\n m: 64,\n l: 80,\n xl: 128,\n xxl: 144,\n 24: 24,\n 48: 48,\n 64: 64,\n 80: 80,\n 96: 96,\n 128: 128,\n 144: 144,\n};\n\nexport const STROKE = {\n xs: 4,\n s: 4,\n m: 6,\n l: 8,\n xl: 10,\n xxl: 12,\n 24: 4,\n 48: 4,\n 64: 6,\n 80: 8,\n 96: 8,\n 128: 10,\n 144: 12,\n};\n\nexport const VIEW_TITLE = {\n xs: 'small',\n s: 'small',\n m: 'small',\n l: 'xsmall',\n xl: 'medium',\n xxl: 'medium',\n 24: 'small',\n 48: 'small',\n 64: 'small',\n 80: 'xsmall',\n 96: 'xsmall',\n 128: 'medium',\n 144: 'medium',\n} as const;\n\nexport const VIEW_TEXT = {\n xs: 'secondary-small',\n s: 'secondary-small',\n m: 'secondary-large',\n l: 'secondary-large',\n xl: 'secondary-large',\n xxl: 'secondary-large',\n 24: 'secondary-small',\n 48: 'secondary-small',\n 64: 'secondary-large',\n 80: 'secondary-large',\n 96: 'secondary-large',\n 128: 'secondary-large',\n 144: 'secondary-large',\n} as const;\n\nexport const TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];\n\nexport const SIZE_TO_CLASSNAME_MAP = {\n xs: 'size-24',\n s: 'size-48',\n m: 'size-64',\n l: 'size-80',\n xl: 'size-128',\n xxl: 'size-144',\n 24: 'size-24',\n 48: 'size-48',\n 64: 'size-64',\n 80: 'size-80',\n 96: 'size-96',\n 128: 'size-128',\n 144: 'size-144',\n};\n\nexport const MAX_PROGRESS_VALUE = 100;\n\nexport const MIN_TIMER_VALUE = 0;\nexport const MAX_TIMER_VALUE = 3599;\n"],"names":[],"mappings":";;;;AAAa,IAAA,KAAK,GAAG;AACjB,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,CAAC,EAAE,EAAE;AACL,IAAA,CAAC,EAAE,EAAE;AACL,IAAA,CAAC,EAAE,EAAE;AACL,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,GAAG,EAAE,GAAG;AACR,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,GAAG,EAAE,GAAG;AACR,IAAA,GAAG,EAAE,GAAG;;AAGC,IAAA,MAAM,GAAG;AAClB,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,CAAC,EAAE,CAAC;AACJ,IAAA,CAAC,EAAE,CAAC;AACJ,IAAA,CAAC,EAAE,CAAC;AACJ,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,GAAG,EAAE,EAAE;AACP,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,GAAG,EAAE,EAAE;AACP,IAAA,GAAG,EAAE,EAAE;;AAGE,IAAA,UAAU,GAAG;AACtB,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,CAAC,EAAE,OAAO;AACV,IAAA,CAAC,EAAE,OAAO;AACV,IAAA,CAAC,EAAE,QAAQ;AACX,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,GAAG,EAAE,QAAQ;AACb,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,GAAG,EAAE,QAAQ;AACb,IAAA,GAAG,EAAE,QAAQ;;AAGJ,IAAA,SAAS,GAAG;AACrB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,CAAC,EAAE,iBAAiB;AACpB,IAAA,CAAC,EAAE,iBAAiB;AACpB,IAAA,CAAC,EAAE,iBAAiB;AACpB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,GAAG,EAAE,iBAAiB;AACtB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,GAAG,EAAE,iBAAiB;AACtB,IAAA,GAAG,EAAE,iBAAiB;;AAGnB,IAAM,gBAAgB,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU;AAE9E,IAAA,qBAAqB,GAAG;AACjC,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,CAAC,EAAE,SAAS;AACZ,IAAA,CAAC,EAAE,SAAS;AACZ,IAAA,CAAC,EAAE,SAAS;AACZ,IAAA,EAAE,EAAE,UAAU;AACd,IAAA,GAAG,EAAE,UAAU;AACf,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,GAAG,EAAE,UAAU;AACf,IAAA,GAAG,EAAE,UAAU;;AAGZ,IAAM,kBAAkB,GAAG;AAE3B,IAAM,eAAe,GAAG;AACxB,IAAM,eAAe,GAAG;;;;;;;;;;;;"}
|
package/cssm/Component.d.ts
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
import { TypographyColor } from "./types/typography-color";
|
|
6
|
-
type CircularProgressBarProps = {
|
|
1
|
+
import React, { ElementType, ReactNode } from 'react';
|
|
2
|
+
import { ComponentSize } from './types/component-size';
|
|
3
|
+
import { TypographyColor } from './types/typography-color';
|
|
4
|
+
export declare type CircularProgressBarProps = {
|
|
7
5
|
/**
|
|
8
6
|
* Уровень прогресса, %
|
|
9
7
|
*/
|
|
@@ -142,5 +140,4 @@ type CircularProgressBarProps = {
|
|
|
142
140
|
/**
|
|
143
141
|
* Компонент круглого прогресс бара.
|
|
144
142
|
*/
|
|
145
|
-
declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
|
|
146
|
-
export { CircularProgressBarProps, CircularProgressBar };
|
|
143
|
+
export declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
|
package/cssm/Component.js
CHANGED
|
@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var tslib = require('tslib');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var cn = require('classnames');
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
var
|
|
8
|
+
var cssm = require('@alfalab/core-components-shared/cssm');
|
|
9
|
+
var cssm$1 = require('@alfalab/core-components-typography/cssm');
|
|
10
|
+
var isTypographyColor = require('./utils/is-typography-color.js');
|
|
11
11
|
var consts = require('./consts.js');
|
|
12
12
|
var useTimer = require('./use-timer.js');
|
|
13
13
|
var styles = require('./index.module.css');
|
|
@@ -24,9 +24,9 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
|
|
|
24
24
|
var CircularProgressBar = function (_a) {
|
|
25
25
|
var _b, _c, _d;
|
|
26
26
|
var _e, _f;
|
|
27
|
-
var valueFromProps = _a.value, _g = _a.view, view = _g === void 0 ? 'positive' : _g, _h = _a.size, size = _h === void 0 ? 64 : _h, className = _a.className, dataTestId = _a.dataTestId, _j = _a.title, titleFromProps = _j === void 0 ?
|
|
28
|
-
var isTimer =
|
|
29
|
-
var _q = useTimer.useTimer(isTimer ? Math.min(Math.max(valueFromProps.timer, consts.MIN_TIMER_VALUE), consts.MAX_TIMER_VALUE) : -1, isTimer, isTimer ? (_e = valueFromProps.counting) !== null && _e !== void 0 ? _e : 'backward' : 'backward', isTimer ? (_f = valueFromProps.onFinish) !== null && _f !== void 0 ? _f :
|
|
27
|
+
var valueFromProps = _a.value, _g = _a.view, view = _g === void 0 ? 'positive' : _g, _h = _a.size, size = _h === void 0 ? 64 : _h, className = _a.className, dataTestId = _a.dataTestId, _j = _a.title, titleFromProps = _j === void 0 ? cssm.isObject(valueFromProps) ? null : "".concat(valueFromProps) : _j, titleComplete = _a.titleComplete, subtitle = _a.subtitle, _k = _a.contentColor, contentColor = _k === void 0 ? 'secondary' : _k, subtitleComplete = _a.subtitleComplete, _l = _a.stroke, stroke = _l === void 0 ? true : _l, fillComplete = _a.fillComplete, Icon = _a.icon, IconComplete = _a.iconComplete, completeTextColor = _a.completeTextColor, _m = _a.completeIconColor, completeIconColor = _m === void 0 ? 'tertiary' : _m, _o = _a.direction, direction = _o === void 0 ? 'clockwise' : _o, height = _a.height, children = _a.children, progressStrokeColor = _a.progressStrokeColor, circleColor = _a.circleColor, strokeColor = _a.strokeColor, _p = _a.directionType, directionType = _p === void 0 ? 'asc' : _p, titleColor = _a.titleColor, subtitleColor = _a.subtitleColor;
|
|
28
|
+
var isTimer = cssm.isObject(valueFromProps);
|
|
29
|
+
var _q = useTimer.useTimer(isTimer ? Math.min(Math.max(valueFromProps.timer, consts.MIN_TIMER_VALUE), consts.MAX_TIMER_VALUE) : -1, isTimer, isTimer ? (_e = valueFromProps.counting) !== null && _e !== void 0 ? _e : 'backward' : 'backward', isTimer ? (_f = valueFromProps.onFinish) !== null && _f !== void 0 ? _f : cssm.noop : cssm.noop), timerValue = _q[0], timerTitle = _q[1];
|
|
30
30
|
var value;
|
|
31
31
|
var title;
|
|
32
32
|
if (isTimer) {
|
|
@@ -72,13 +72,13 @@ var CircularProgressBar = function (_a) {
|
|
|
72
72
|
return completeTextColor;
|
|
73
73
|
}
|
|
74
74
|
if (color) {
|
|
75
|
-
return
|
|
75
|
+
return isTypographyColor.isTypographyColor(color) ? color : undefined;
|
|
76
76
|
}
|
|
77
77
|
return typographyContentColor;
|
|
78
78
|
};
|
|
79
79
|
var getTextStyleColor = function (color) {
|
|
80
80
|
if (color) {
|
|
81
|
-
if (!
|
|
81
|
+
if (!isTypographyColor.isTypographyColor(color)) {
|
|
82
82
|
return { color: color };
|
|
83
83
|
}
|
|
84
84
|
return {};
|
|
@@ -86,11 +86,11 @@ var CircularProgressBar = function (_a) {
|
|
|
86
86
|
return tslib.__assign({}, (!typographyContentColor && { color: contentColor }));
|
|
87
87
|
};
|
|
88
88
|
var renderTitleString = function () {
|
|
89
|
-
return consts.SIZES[size] > 64 ? (React__default.default.createElement(
|
|
89
|
+
return consts.SIZES[size] > 64 ? (React__default.default.createElement(cssm$1.TitleMobile, { className: cn__default.default(styles__default.default.typography, styles__default.default.title), color: getTextColor(titleColor), tag: 'div', font: 'system', view: consts.VIEW_TITLE[size], style: tslib.__assign({}, getTextStyleColor(titleColor)), dataTestId: cssm.getDataTestId(dataTestId, 'title') }, titleContent)) : (React__default.default.createElement(cssm$1.Text, { className: styles__default.default.title, color: getTextColor(titleColor), tag: 'div', weight: 'bold', view: consts.VIEW_TEXT[size], style: tslib.__assign({}, getTextStyleColor(titleColor)), dataTestId: cssm.getDataTestId(dataTestId, 'title') }, titleContent));
|
|
90
90
|
};
|
|
91
91
|
var renderTitle = function () { return (typeof title === 'string' ? renderTitleString() : titleContent); };
|
|
92
92
|
var renderSubTitle = function () {
|
|
93
|
-
return typeof subtitle === 'string' ? (React__default.default.createElement(
|
|
93
|
+
return typeof subtitle === 'string' ? (React__default.default.createElement(cssm$1.Text, { tag: 'div', className: styles__default.default.subtitle, color: getTextColor(subtitleColor), view: 'primary-small', dataTestId: cssm.getDataTestId(dataTestId, 'subtitle'), style: tslib.__assign({}, getTextStyleColor(subtitleColor)) }, subtitleContent)) : (subtitleContent);
|
|
94
94
|
};
|
|
95
95
|
var renderIcon = function () {
|
|
96
96
|
var _a;
|
|
@@ -109,13 +109,14 @@ var CircularProgressBar = function (_a) {
|
|
|
109
109
|
React__default.default.createElement("svg", { viewBox: "0 0 ".concat(memorized.widthSVG, " ").concat(memorized.heightSVG), className: styles__default.default.svg, xmlns: 'http://www.w3.org/2000/svg' },
|
|
110
110
|
React__default.default.createElement("circle", { className: cn__default.default(styles__default.default.backgroundCircle, styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]], (_c = {},
|
|
111
111
|
_c[styles__default.default.stroke] = !stroke,
|
|
112
|
-
_c)), style: tslib.__assign({}, (strokeColor && stroke && { stroke: strokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size], "data-test-id":
|
|
112
|
+
_c)), style: tslib.__assign({}, (strokeColor && stroke && { stroke: strokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size], "data-test-id": cssm.getDataTestId(dataTestId, 'circle-progress-bar') }),
|
|
113
113
|
React__default.default.createElement("circle", { className: cn__default.default(styles__default.default.progressCircle, styles__default.default[view], styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]]), style: tslib.__assign({}, (progressStrokeColor && { stroke: progressStrokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
|
|
114
114
|
? -memorized.strokeDashoffset
|
|
115
|
-
: memorized.strokeDashoffset, transform: "rotate(".concat(-90, " ").concat(memorized.center, " ").concat(memorized.center, ")"), "data-test-id":
|
|
115
|
+
: memorized.strokeDashoffset, transform: "rotate(".concat(-90, " ").concat(memorized.center, " ").concat(memorized.center, ")"), "data-test-id": cssm.getDataTestId(dataTestId, 'circle-progress-value') })),
|
|
116
116
|
React__default.default.createElement("div", { className: cn__default.default(styles__default.default.labelWrapper, (_d = {},
|
|
117
117
|
_d[styles__default.default.label] = Icon || IconComplete,
|
|
118
118
|
_d)) }, children || renderContent())));
|
|
119
119
|
};
|
|
120
120
|
|
|
121
121
|
exports.CircularProgressBar = CircularProgressBar;
|
|
122
|
+
//# sourceMappingURL=Component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { ElementType, ReactNode, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId, isObject, noop } from '@alfalab/core-components-shared';\nimport { Text, TitleMobile } from '@alfalab/core-components-typography';\n\nimport { ComponentSize } from './types/component-size';\nimport { 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\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 * Размер (xxl — 144×144px, xl — 128×128px, l — 80×80px, m — 64×64px, s — 48×48px, xs — 24×24px)\n * @description xs, s, m, l, xl, xxl deprecated, используйте вместо них 24, 48, 64, 80, 128, 144 соответственно\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 * xxl от 144\n * xl от 128 до 143\n * l от 80 до 127\n * m от 64 до 79\n * s от 48 до 63\n * xs от 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 <TitleMobile\n className={cn(styles.typography, 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 </TitleMobile>\n ) : (\n <Text\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 </Text>\n );\n\n const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);\n\n const renderSubTitle = () =>\n typeof subtitle === 'string' ? (\n <Text\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 </Text>\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","TitleMobile","cn","styles","VIEW_TITLE","getDataTestId","Text","VIEW_TEXT","SIZE_TO_CLASSNAME_MAP"],"mappings":"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"}
|
package/cssm/consts.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const SIZES: {
|
|
1
|
+
export declare const SIZES: {
|
|
2
2
|
xs: number;
|
|
3
3
|
s: number;
|
|
4
4
|
m: number;
|
|
@@ -13,7 +13,7 @@ declare const SIZES: {
|
|
|
13
13
|
128: number;
|
|
14
14
|
144: number;
|
|
15
15
|
};
|
|
16
|
-
declare const STROKE: {
|
|
16
|
+
export declare const STROKE: {
|
|
17
17
|
xs: number;
|
|
18
18
|
s: number;
|
|
19
19
|
m: number;
|
|
@@ -28,7 +28,7 @@ declare const STROKE: {
|
|
|
28
28
|
128: number;
|
|
29
29
|
144: number;
|
|
30
30
|
};
|
|
31
|
-
declare const VIEW_TITLE: {
|
|
31
|
+
export declare const VIEW_TITLE: {
|
|
32
32
|
readonly xs: "small";
|
|
33
33
|
readonly s: "small";
|
|
34
34
|
readonly m: "small";
|
|
@@ -43,7 +43,7 @@ declare const VIEW_TITLE: {
|
|
|
43
43
|
readonly 128: "medium";
|
|
44
44
|
readonly 144: "medium";
|
|
45
45
|
};
|
|
46
|
-
declare const VIEW_TEXT: {
|
|
46
|
+
export declare const VIEW_TEXT: {
|
|
47
47
|
readonly xs: "secondary-small";
|
|
48
48
|
readonly s: "secondary-small";
|
|
49
49
|
readonly m: "secondary-large";
|
|
@@ -58,8 +58,8 @@ declare const VIEW_TEXT: {
|
|
|
58
58
|
readonly 128: "secondary-large";
|
|
59
59
|
readonly 144: "secondary-large";
|
|
60
60
|
};
|
|
61
|
-
declare const TYPOGRAPHY_COLOR: string[];
|
|
62
|
-
declare const SIZE_TO_CLASSNAME_MAP: {
|
|
61
|
+
export declare const TYPOGRAPHY_COLOR: string[];
|
|
62
|
+
export declare const SIZE_TO_CLASSNAME_MAP: {
|
|
63
63
|
xs: string;
|
|
64
64
|
s: string;
|
|
65
65
|
m: string;
|
|
@@ -74,7 +74,6 @@ declare const SIZE_TO_CLASSNAME_MAP: {
|
|
|
74
74
|
128: string;
|
|
75
75
|
144: string;
|
|
76
76
|
};
|
|
77
|
-
declare const MAX_PROGRESS_VALUE = 100;
|
|
78
|
-
declare const MIN_TIMER_VALUE = 0;
|
|
79
|
-
declare const MAX_TIMER_VALUE = 3599;
|
|
80
|
-
export { SIZES, STROKE, VIEW_TITLE, VIEW_TEXT, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP, MAX_PROGRESS_VALUE, MIN_TIMER_VALUE, MAX_TIMER_VALUE };
|
|
77
|
+
export declare const MAX_PROGRESS_VALUE = 100;
|
|
78
|
+
export declare const MIN_TIMER_VALUE = 0;
|
|
79
|
+
export declare const MAX_TIMER_VALUE = 3599;
|
package/cssm/consts.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"consts.js","sources":["../src/consts.ts"],"sourcesContent":["export const SIZES = {\n xs: 24,\n s: 48,\n m: 64,\n l: 80,\n xl: 128,\n xxl: 144,\n 24: 24,\n 48: 48,\n 64: 64,\n 80: 80,\n 96: 96,\n 128: 128,\n 144: 144,\n};\n\nexport const STROKE = {\n xs: 4,\n s: 4,\n m: 6,\n l: 8,\n xl: 10,\n xxl: 12,\n 24: 4,\n 48: 4,\n 64: 6,\n 80: 8,\n 96: 8,\n 128: 10,\n 144: 12,\n};\n\nexport const VIEW_TITLE = {\n xs: 'small',\n s: 'small',\n m: 'small',\n l: 'xsmall',\n xl: 'medium',\n xxl: 'medium',\n 24: 'small',\n 48: 'small',\n 64: 'small',\n 80: 'xsmall',\n 96: 'xsmall',\n 128: 'medium',\n 144: 'medium',\n} as const;\n\nexport const VIEW_TEXT = {\n xs: 'secondary-small',\n s: 'secondary-small',\n m: 'secondary-large',\n l: 'secondary-large',\n xl: 'secondary-large',\n xxl: 'secondary-large',\n 24: 'secondary-small',\n 48: 'secondary-small',\n 64: 'secondary-large',\n 80: 'secondary-large',\n 96: 'secondary-large',\n 128: 'secondary-large',\n 144: 'secondary-large',\n} as const;\n\nexport const TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];\n\nexport const SIZE_TO_CLASSNAME_MAP = {\n xs: 'size-24',\n s: 'size-48',\n m: 'size-64',\n l: 'size-80',\n xl: 'size-128',\n xxl: 'size-144',\n 24: 'size-24',\n 48: 'size-48',\n 64: 'size-64',\n 80: 'size-80',\n 96: 'size-96',\n 128: 'size-128',\n 144: 'size-144',\n};\n\nexport const MAX_PROGRESS_VALUE = 100;\n\nexport const MIN_TIMER_VALUE = 0;\nexport const MAX_TIMER_VALUE = 3599;\n"],"names":[],"mappings":";;;;AAAa,IAAA,KAAK,GAAG;AACjB,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,CAAC,EAAE,EAAE;AACL,IAAA,CAAC,EAAE,EAAE;AACL,IAAA,CAAC,EAAE,EAAE;AACL,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,GAAG,EAAE,GAAG;AACR,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,GAAG,EAAE,GAAG;AACR,IAAA,GAAG,EAAE,GAAG;;AAGC,IAAA,MAAM,GAAG;AAClB,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,CAAC,EAAE,CAAC;AACJ,IAAA,CAAC,EAAE,CAAC;AACJ,IAAA,CAAC,EAAE,CAAC;AACJ,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,GAAG,EAAE,EAAE;AACP,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,GAAG,EAAE,EAAE;AACP,IAAA,GAAG,EAAE,EAAE;;AAGE,IAAA,UAAU,GAAG;AACtB,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,CAAC,EAAE,OAAO;AACV,IAAA,CAAC,EAAE,OAAO;AACV,IAAA,CAAC,EAAE,QAAQ;AACX,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,GAAG,EAAE,QAAQ;AACb,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,GAAG,EAAE,QAAQ;AACb,IAAA,GAAG,EAAE,QAAQ;;AAGJ,IAAA,SAAS,GAAG;AACrB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,CAAC,EAAE,iBAAiB;AACpB,IAAA,CAAC,EAAE,iBAAiB;AACpB,IAAA,CAAC,EAAE,iBAAiB;AACpB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,GAAG,EAAE,iBAAiB;AACtB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,GAAG,EAAE,iBAAiB;AACtB,IAAA,GAAG,EAAE,iBAAiB;;AAGnB,IAAM,gBAAgB,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU;AAE9E,IAAA,qBAAqB,GAAG;AACjC,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,CAAC,EAAE,SAAS;AACZ,IAAA,CAAC,EAAE,SAAS;AACZ,IAAA,CAAC,EAAE,SAAS;AACZ,IAAA,EAAE,EAAE,UAAU;AACd,IAAA,GAAG,EAAE,UAAU;AACf,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,GAAG,EAAE,UAAU;AACf,IAAA,GAAG,EAAE,UAAU;;AAGZ,IAAM,kBAAkB,GAAG;AAE3B,IAAM,eAAe,GAAG;AACxB,IAAM,eAAe,GAAG;;;;;;;;;;;;"}
|
package/cssm/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
1
|
+
export * from './Component';
|
|
2
|
+
export * from './types/typography-color';
|
package/cssm/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
package/cssm/index.module.css
CHANGED
|
@@ -1,47 +1,22 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
} /* deprecated */ :root {
|
|
1
|
+
:root {
|
|
3
2
|
--color-light-neutral-500: #babbc2;
|
|
4
3
|
--color-light-neutral-700: #898991;
|
|
5
4
|
--color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
|
|
6
5
|
--color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
|
|
7
6
|
--color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
|
|
8
7
|
--color-light-status-negative: #ff4837;
|
|
9
|
-
--color-light-status-positive: #0cc44d;
|
|
10
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
11
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
8
|
+
--color-light-status-positive: #0cc44d;
|
|
12
9
|
} :root {
|
|
13
|
-
|
|
14
|
-
/* Hard */
|
|
15
|
-
|
|
16
|
-
/* Up */
|
|
17
|
-
|
|
18
|
-
/* Hard up */
|
|
19
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
20
10
|
--border-radius-pill: 99px;
|
|
21
|
-
|
|
22
|
-
/* новые значения, используйте их */
|
|
23
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
24
|
-
|
|
25
|
-
/* новые значения, используйте их */
|
|
26
|
-
|
|
27
|
-
/* no-unit может приводить к проблемам в calc (#1559) */
|
|
28
|
-
/* stylelint-disable-next-line length-zero-no-unit */
|
|
11
|
+
} :root {
|
|
29
12
|
--gap-0: 0px;
|
|
30
13
|
} :root {
|
|
31
14
|
--font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
|
|
32
15
|
sans-serif;
|
|
33
|
-
}
|
|
34
|
-
} /* сбрасывает синюю подсветку при нажатии */ :root {
|
|
35
|
-
/* stroke */
|
|
16
|
+
} :root {
|
|
36
17
|
--circular-progress-bar-stroke-color: var(--color-light-neutral-translucent-300);
|
|
37
|
-
|
|
38
|
-
/* positive */
|
|
39
18
|
--circular-progress-bar-positive-color: var(--color-light-status-positive);
|
|
40
|
-
|
|
41
|
-
/* negative */
|
|
42
19
|
--circular-progress-bar-negative-color: var(--color-light-status-negative);
|
|
43
|
-
|
|
44
|
-
/* theme */
|
|
45
20
|
--circular-progress-bar-font-family: var(--font-family-system);
|
|
46
21
|
--circular-progress-bar-font-weight: 600;
|
|
47
22
|
} .component {
|
package/cssm/shared/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { getCircularProgressBarTestIds } from
|
|
1
|
+
export { getCircularProgressBarTestIds } from '../utils/get-circular-progress-bar-test-ids';
|
package/cssm/shared/index.js
CHANGED
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var getCircularProgressBarTestIds = require('../utils/get-circular-progress-bar-test-ids.js');
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
exports.getCircularProgressBarTestIds =
|
|
9
|
+
exports.getCircularProgressBarTestIds = getCircularProgressBarTestIds.getCircularProgressBarTestIds;
|
|
10
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|