@alfalab/core-components-circular-progress-bar 2.4.2 → 2.6.0

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.
Files changed (17) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/Component.d.ts +62 -3
  3. package/Component.js +102 -18
  4. package/cssm/Component.d.ts +62 -3
  5. package/cssm/Component.js +101 -17
  6. package/cssm/index.js +1 -1
  7. package/cssm/index.module.css +146 -41
  8. package/esm/Component.d.ts +62 -3
  9. package/esm/Component.js +102 -18
  10. package/esm/index.css +160 -55
  11. package/esm/index.js +1 -1
  12. package/index.css +160 -55
  13. package/index.js +1 -1
  14. package/modern/Component.d.ts +62 -3
  15. package/modern/Component.js +71 -18
  16. package/modern/index.css +160 -55
  17. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,36 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [2.6.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-circular-progress-bar@2.5.0...@alfalab/core-components-circular-progress-bar@2.6.0) (2022-08-04)
7
+
8
+
9
+ ### Features
10
+
11
+ * react 18 support ([#159](https://github.com/core-ds/core-components/issues/159)) ([2e6693c](https://github.com/core-ds/core-components/commit/2e6693c62f534e333aadb7d3fff4ffd78ac84c63))
12
+
13
+
14
+
15
+
16
+
17
+ # [2.5.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-circular-progress-bar@2.4.3...@alfalab/core-components-circular-progress-bar@2.5.0) (2022-07-22)
18
+
19
+
20
+ ### Features
21
+
22
+ * **circular-progress-bar:** added new sizes and props ([#122](https://github.com/core-ds/core-components/issues/122)) ([9b1c412](https://github.com/core-ds/core-components/commit/9b1c4126aabc516349655a51c6302d6af84aa129))
23
+
24
+
25
+
26
+
27
+
28
+ ## [2.4.3](https://github.com/core-ds/core-components/compare/@alfalab/core-components-circular-progress-bar@2.4.2...@alfalab/core-components-circular-progress-bar@2.4.3) (2022-07-18)
29
+
30
+ **Note:** Version bump only for package @alfalab/core-components-circular-progress-bar
31
+
32
+
33
+
34
+
35
+
6
36
  ## [2.4.2](https://github.com/core-ds/core-components/compare/@alfalab/core-components-circular-progress-bar@2.4.1...@alfalab/core-components-circular-progress-bar@2.4.2) (2022-07-15)
7
37
 
8
38
 
package/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ReactNode } from "react";
3
+ import { ReactNode, ElementType } from "react";
4
4
  type CircularProgressBarProps = {
5
5
  /**
6
6
  * Уровень прогресса, %
@@ -14,22 +14,81 @@ type CircularProgressBarProps = {
14
14
  * Основной текст
15
15
  */
16
16
  title?: ReactNode;
17
+ /**
18
+ * Цвет контента
19
+ */
20
+ contentColor?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
17
21
  /**
18
22
  * Дополнительный текст
19
23
  */
20
24
  subtitle?: ReactNode;
25
+ /**
26
+ * Основной текст при 100%
27
+ */
28
+ titleComplete?: ReactNode;
29
+ /**
30
+ * Дополнительный текст при 100%
31
+ */
32
+ subtitleComplete?: ReactNode;
21
33
  /**
22
34
  * Цвет заполнения
23
35
  */
24
36
  view?: 'positive' | 'negative';
25
37
  /**
26
- * Размер (l — 144×144px, m — 120×120px, s — 96×96px)
38
+ * Размер (xxl — 144×144px, xl — 128×128px, l — 80×80px, m — 64×64px, s — 48×48px, xs — 24×24px)
39
+ */
40
+ size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
41
+ /**
42
+ * Наличие желоба
43
+ */
44
+ stroke?: boolean;
45
+ /**
46
+ * Заливка при 100%
47
+ */
48
+ fillComplete?: boolean;
49
+ /**
50
+ * Цвет текста при 100%
27
51
  */
28
- size?: 'l' | 'm' | 's';
52
+ completeTextColor?: 'primary' | 'primary-inverted' | 'positive' | 'negative';
53
+ /**
54
+ * Цвет иконки при 100%
55
+ */
56
+ completeIconColor?: 'primary-inverted' | 'positive' | 'negative' | 'tertiary';
57
+ /**
58
+ * Компонент иконки
59
+ */
60
+ icon?: ElementType<{
61
+ className?: string;
62
+ }>;
63
+ /**
64
+ * Компонент иконки при 100%
65
+ */
66
+ iconComplete?: ElementType<{
67
+ className?: string;
68
+ }>;
69
+ /**
70
+ * Направление прогресса (clockwise - по часовой стрелке, counter-clockwise - против часовой стрелки)
71
+ */
72
+ direction?: 'clockwise' | 'counter-clockwise';
73
+ /**
74
+ * Высота компонента, min = 24; max = 144
75
+ * использовать совместно с size :
76
+ * xxl от 144
77
+ * xl от 128 до 143
78
+ * l от 80 до 127
79
+ * m от 64 до 79
80
+ * s от 48 до 63
81
+ * xs от 24 до 47
82
+ */
83
+ height?: number;
29
84
  /**
30
85
  * Id компонента для тестов
31
86
  */
32
87
  dataTestId?: string;
88
+ /**
89
+ * Дочерние элементы.
90
+ */
91
+ children?: ReactNode;
33
92
  };
34
93
  /**
35
94
  * Компонент круглого прогресс бара.
package/Component.js CHANGED
@@ -11,47 +11,131 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
11
11
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
12
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
 
14
- var styles = {"component":"circular-progress-bar__component_mot4l","svg":"circular-progress-bar__svg_mot4l","title":"circular-progress-bar__title_mot4l","subtitle":"circular-progress-bar__subtitle_mot4l","l":"circular-progress-bar__l_mot4l","label":"circular-progress-bar__label_mot4l","m":"circular-progress-bar__m_mot4l","s":"circular-progress-bar__s_mot4l","backgroundCircle":"circular-progress-bar__backgroundCircle_mot4l","progressCircle":"circular-progress-bar__progressCircle_mot4l","positive":"circular-progress-bar__positive_mot4l","negative":"circular-progress-bar__negative_mot4l"};
14
+ /*! *****************************************************************************
15
+ Copyright (c) Microsoft Corporation.
16
+
17
+ Permission to use, copy, modify, and/or distribute this software for any
18
+ purpose with or without fee is hereby granted.
19
+
20
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
21
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
22
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
23
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
24
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
25
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
26
+ PERFORMANCE OF THIS SOFTWARE.
27
+ ***************************************************************************** */
28
+ var __assign = function () {
29
+ __assign = Object.assign || function __assign(t) {
30
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
31
+ s = arguments[i];
32
+ for (var p in s)
33
+ if (Object.prototype.hasOwnProperty.call(s, p))
34
+ t[p] = s[p];
35
+ }
36
+ return t;
37
+ };
38
+ return __assign.apply(this, arguments);
39
+ };
40
+
41
+ var styles = {"component":"circular-progress-bar__component_bskt5","svg":"circular-progress-bar__svg_bskt5","title":"circular-progress-bar__title_bskt5","subtitle":"circular-progress-bar__subtitle_bskt5","labelWrapper":"circular-progress-bar__labelWrapper_bskt5","label":"circular-progress-bar__label_bskt5","typography":"circular-progress-bar__typography_bskt5","xxl":"circular-progress-bar__xxl_bskt5","xl":"circular-progress-bar__xl_bskt5","l":"circular-progress-bar__l_bskt5","m":"circular-progress-bar__m_bskt5","s":"circular-progress-bar__s_bskt5","xs":"circular-progress-bar__xs_bskt5","backgroundCircle":"circular-progress-bar__backgroundCircle_bskt5","progressCircle":"circular-progress-bar__progressCircle_bskt5","positive":"circular-progress-bar__positive_bskt5","negative":"circular-progress-bar__negative_bskt5","stroke":"circular-progress-bar__stroke_bskt5","bg-positive":"circular-progress-bar__bg-positive_bskt5","bg-negative":"circular-progress-bar__bg-negative_bskt5","iconWrapper":"circular-progress-bar__iconWrapper_bskt5","icon-tertiary":"circular-progress-bar__icon-tertiary_bskt5","icon-positive":"circular-progress-bar__icon-positive_bskt5","icon-negative":"circular-progress-bar__icon-negative_bskt5","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_bskt5","icon-primary":"circular-progress-bar__icon-primary_bskt5","icon-secondary":"circular-progress-bar__icon-secondary_bskt5","icon":"circular-progress-bar__icon_bskt5"};
15
42
  require('./index.css')
16
43
 
17
44
  var SIZES = {
18
- s: 96,
19
- m: 120,
20
- l: 144,
45
+ xs: 24,
46
+ s: 48,
47
+ m: 64,
48
+ l: 80,
49
+ xl: 128,
50
+ xxl: 144,
51
+ };
52
+ var STROKE = {
53
+ xs: 4,
54
+ s: 4,
55
+ m: 6,
56
+ l: 8,
57
+ xl: 10,
58
+ xxl: 12,
59
+ };
60
+ var VIEW_TITLE = {
61
+ xs: 'small',
62
+ s: 'small',
63
+ m: 'small',
64
+ l: 'xsmall',
65
+ xl: 'medium',
66
+ xxl: 'medium',
67
+ };
68
+ var VIEW_TEXT = {
69
+ xs: 'secondary-small',
70
+ s: 'secondary-small',
71
+ m: 'secondary-large',
72
+ l: 'secondary-large',
73
+ xl: 'secondary-large',
74
+ xxl: 'secondary-large',
21
75
  };
22
76
  /**
23
77
  * Компонент круглого прогресс бара.
24
78
  */
25
79
  var CircularProgressBar = function (_a) {
26
- var value = _a.value, _b = _a.view, view = _b === void 0 ? 'positive' : _b, _c = _a.size, size = _c === void 0 ? 'm' : _c, className = _a.className, dataTestId = _a.dataTestId, _d = _a.title, title = _d === void 0 ? value.toString() : _d, subtitle = _a.subtitle, children = _a.children;
80
+ var _b, _c, _d;
81
+ var value = _a.value, _e = _a.view, view = _e === void 0 ? 'positive' : _e, _f = _a.size, size = _f === void 0 ? 'm' : _f, className = _a.className, dataTestId = _a.dataTestId, _g = _a.title, title = _g === void 0 ? value ? value.toString() : '0' : _g, titleComplete = _a.titleComplete, subtitle = _a.subtitle, _h = _a.contentColor, contentColor = _h === void 0 ? 'secondary' : _h, subtitleComplete = _a.subtitleComplete, _j = _a.stroke, stroke = _j === void 0 ? true : _j, fillComplete = _a.fillComplete, Icon = _a.icon, IconComplete = _a.iconComplete, completeTextColor = _a.completeTextColor, _k = _a.completeIconColor, completeIconColor = _k === void 0 ? 'tertiary' : _k, _l = _a.direction, direction = _l === void 0 ? 'clockwise' : _l, height = _a.height, children = _a.children;
27
82
  var memorized = React.useMemo(function () {
28
- var strokeWidth = 8;
83
+ var strokeWidth = STROKE[size];
29
84
  var maxProgress = 100;
30
85
  var minProgress = 0;
31
- var width = SIZES[size];
32
- var height = SIZES[size];
33
- var center = width / 2;
86
+ var widthSVG = SIZES[size];
87
+ var heightSVG = SIZES[size];
88
+ var center = widthSVG / 2;
34
89
  var radius = center - strokeWidth / 2;
35
90
  var circumference = Math.PI * radius * 2;
36
91
  var progress = Math.min(Math.max(value, minProgress), maxProgress);
37
92
  var strokeDasharray = circumference.toFixed(3);
38
93
  var strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);
39
94
  return {
40
- width: width,
41
- height: height,
95
+ widthSVG: widthSVG,
96
+ heightSVG: heightSVG,
42
97
  center: center,
43
98
  radius: radius,
44
99
  strokeDasharray: strokeDasharray,
45
100
  strokeDashoffset: strokeDashoffset,
46
101
  };
47
102
  }, [value, size]);
48
- return (React__default['default'].createElement("div", { className: cn__default['default'](styles.component, styles[size], className), "data-test-id": dataTestId },
49
- React__default['default'].createElement("svg", { viewBox: "0 0 " + memorized.width + " " + memorized.height, className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
50
- React__default['default'].createElement("circle", { className: styles.backgroundCircle, cx: memorized.center, cy: memorized.center, r: memorized.radius }),
51
- React__default['default'].createElement("circle", { className: cn__default['default'](styles.progressCircle, styles[view]), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeDasharray: memorized.strokeDasharray, strokeDashoffset: memorized.strokeDashoffset, transform: "rotate(" + -90 + " " + memorized.center + " " + memorized.center + ")" })),
52
- React__default['default'].createElement("div", { className: styles.label }, children || (React__default['default'].createElement(React__default['default'].Fragment, null,
53
- typeof title === 'string' ? (React__default['default'].createElement(coreComponentsTypography.Typography.Title, { className: styles.title, color: 'secondary', tag: 'div', view: size === 'l' ? 'small' : 'xsmall' }, title)) : (title),
54
- typeof subtitle === 'string' ? (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { tag: 'div', className: styles.subtitle, color: 'primary', view: 'primary-small' }, subtitle)) : (subtitle))))));
103
+ var isComplete = value === 100;
104
+ var isCompleteTextColor = isComplete && completeTextColor;
105
+ var titleContent = titleComplete && isComplete ? titleComplete : title;
106
+ var subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
107
+ var IconComponent = IconComplete && isComplete ? IconComplete : Icon;
108
+ var renderTitleString = function () {
109
+ return (React__default['default'].createElement(React__default['default'].Fragment, null, SIZES[size] > 64 ? (React__default['default'].createElement(coreComponentsTypography.Typography.TitleMobile, { className: cn__default['default'](styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size] }, titleContent)) : (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size] }, titleContent))));
110
+ };
111
+ var renderTitle = function () { return (typeof title === 'string' ? renderTitleString() : titleContent); };
112
+ var renderSubTitle = function () {
113
+ return typeof subtitle === 'string' ? (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : contentColor, view: 'primary-small' }, subtitleContent)) : (subtitleContent);
114
+ };
115
+ var renderIcon = function () {
116
+ var _a;
117
+ return (React__default['default'].createElement("span", { className: cn__default['default'](styles.iconWrapper, styles[size], styles.tertiary, styles["icon-" + contentColor], (_a = {},
118
+ _a[styles["icon-" + completeIconColor]] = completeIconColor,
119
+ _a)) }, IconComponent && React__default['default'].createElement(IconComponent, { className: styles.icon })));
120
+ };
121
+ var renderContent = function () {
122
+ return Icon || (IconComplete && isComplete) ? (renderIcon()) : (React__default['default'].createElement(React__default['default'].Fragment, null,
123
+ SIZES[size] > 24 && renderTitle(),
124
+ SIZES[size] > 64 && renderSubTitle()));
125
+ };
126
+ return (React__default['default'].createElement("div", { className: cn__default['default'](styles.component, styles[size], className), style: __assign({}, (height && { height: height, width: height })), "data-test-id": dataTestId },
127
+ React__default['default'].createElement("svg", { viewBox: "0 0 " + memorized.widthSVG + " " + memorized.heightSVG, className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
128
+ React__default['default'].createElement("circle", { className: cn__default['default'](styles.backgroundCircle, styles[size], (_b = {},
129
+ _b[styles.stroke] = !stroke,
130
+ _b)), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size] }),
131
+ React__default['default'].createElement("circle", { className: cn__default['default'](styles.progressCircle, styles[view], styles[size], (_c = {},
132
+ _c[styles["bg-" + view]] = fillComplete && isComplete,
133
+ _c)), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
134
+ ? -memorized.strokeDashoffset
135
+ : memorized.strokeDashoffset, transform: "rotate(" + -90 + " " + memorized.center + " " + memorized.center + ")" })),
136
+ React__default['default'].createElement("div", { className: cn__default['default'](styles.labelWrapper, (_d = {},
137
+ _d[styles.label] = Icon || IconComplete,
138
+ _d)) }, children || renderContent())));
55
139
  };
56
140
 
57
141
  exports.CircularProgressBar = CircularProgressBar;
package/cssm/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ReactNode } from "react";
3
+ import { ReactNode, ElementType } from "react";
4
4
  type CircularProgressBarProps = {
5
5
  /**
6
6
  * Уровень прогресса, %
@@ -14,22 +14,81 @@ type CircularProgressBarProps = {
14
14
  * Основной текст
15
15
  */
16
16
  title?: ReactNode;
17
+ /**
18
+ * Цвет контента
19
+ */
20
+ contentColor?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
17
21
  /**
18
22
  * Дополнительный текст
19
23
  */
20
24
  subtitle?: ReactNode;
25
+ /**
26
+ * Основной текст при 100%
27
+ */
28
+ titleComplete?: ReactNode;
29
+ /**
30
+ * Дополнительный текст при 100%
31
+ */
32
+ subtitleComplete?: ReactNode;
21
33
  /**
22
34
  * Цвет заполнения
23
35
  */
24
36
  view?: 'positive' | 'negative';
25
37
  /**
26
- * Размер (l — 144×144px, m — 120×120px, s — 96×96px)
38
+ * Размер (xxl — 144×144px, xl — 128×128px, l — 80×80px, m — 64×64px, s — 48×48px, xs — 24×24px)
39
+ */
40
+ size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
41
+ /**
42
+ * Наличие желоба
43
+ */
44
+ stroke?: boolean;
45
+ /**
46
+ * Заливка при 100%
47
+ */
48
+ fillComplete?: boolean;
49
+ /**
50
+ * Цвет текста при 100%
27
51
  */
28
- size?: 'l' | 'm' | 's';
52
+ completeTextColor?: 'primary' | 'primary-inverted' | 'positive' | 'negative';
53
+ /**
54
+ * Цвет иконки при 100%
55
+ */
56
+ completeIconColor?: 'primary-inverted' | 'positive' | 'negative' | 'tertiary';
57
+ /**
58
+ * Компонент иконки
59
+ */
60
+ icon?: ElementType<{
61
+ className?: string;
62
+ }>;
63
+ /**
64
+ * Компонент иконки при 100%
65
+ */
66
+ iconComplete?: ElementType<{
67
+ className?: string;
68
+ }>;
69
+ /**
70
+ * Направление прогресса (clockwise - по часовой стрелке, counter-clockwise - против часовой стрелки)
71
+ */
72
+ direction?: 'clockwise' | 'counter-clockwise';
73
+ /**
74
+ * Высота компонента, min = 24; max = 144
75
+ * использовать совместно с size :
76
+ * xxl от 144
77
+ * xl от 128 до 143
78
+ * l от 80 до 127
79
+ * m от 64 до 79
80
+ * s от 48 до 63
81
+ * xs от 24 до 47
82
+ */
83
+ height?: number;
29
84
  /**
30
85
  * Id компонента для тестов
31
86
  */
32
87
  dataTestId?: string;
88
+ /**
89
+ * Дочерние элементы.
90
+ */
91
+ children?: ReactNode;
33
92
  };
34
93
  /**
35
94
  * Компонент круглого прогресс бара.
package/cssm/Component.js CHANGED
@@ -13,44 +13,128 @@ var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
13
13
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
14
  var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
15
15
 
16
+ /*! *****************************************************************************
17
+ Copyright (c) Microsoft Corporation.
18
+
19
+ Permission to use, copy, modify, and/or distribute this software for any
20
+ purpose with or without fee is hereby granted.
21
+
22
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
23
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
24
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
25
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
26
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
27
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
28
+ PERFORMANCE OF THIS SOFTWARE.
29
+ ***************************************************************************** */
30
+ var __assign = function () {
31
+ __assign = Object.assign || function __assign(t) {
32
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
33
+ s = arguments[i];
34
+ for (var p in s)
35
+ if (Object.prototype.hasOwnProperty.call(s, p))
36
+ t[p] = s[p];
37
+ }
38
+ return t;
39
+ };
40
+ return __assign.apply(this, arguments);
41
+ };
42
+
16
43
  var SIZES = {
17
- s: 96,
18
- m: 120,
19
- l: 144,
44
+ xs: 24,
45
+ s: 48,
46
+ m: 64,
47
+ l: 80,
48
+ xl: 128,
49
+ xxl: 144,
50
+ };
51
+ var STROKE = {
52
+ xs: 4,
53
+ s: 4,
54
+ m: 6,
55
+ l: 8,
56
+ xl: 10,
57
+ xxl: 12,
58
+ };
59
+ var VIEW_TITLE = {
60
+ xs: 'small',
61
+ s: 'small',
62
+ m: 'small',
63
+ l: 'xsmall',
64
+ xl: 'medium',
65
+ xxl: 'medium',
66
+ };
67
+ var VIEW_TEXT = {
68
+ xs: 'secondary-small',
69
+ s: 'secondary-small',
70
+ m: 'secondary-large',
71
+ l: 'secondary-large',
72
+ xl: 'secondary-large',
73
+ xxl: 'secondary-large',
20
74
  };
21
75
  /**
22
76
  * Компонент круглого прогресс бара.
23
77
  */
24
78
  var CircularProgressBar = function (_a) {
25
- var value = _a.value, _b = _a.view, view = _b === void 0 ? 'positive' : _b, _c = _a.size, size = _c === void 0 ? 'm' : _c, className = _a.className, dataTestId = _a.dataTestId, _d = _a.title, title = _d === void 0 ? value.toString() : _d, subtitle = _a.subtitle, children = _a.children;
79
+ var _b, _c, _d;
80
+ var value = _a.value, _e = _a.view, view = _e === void 0 ? 'positive' : _e, _f = _a.size, size = _f === void 0 ? 'm' : _f, className = _a.className, dataTestId = _a.dataTestId, _g = _a.title, title = _g === void 0 ? value ? value.toString() : '0' : _g, titleComplete = _a.titleComplete, subtitle = _a.subtitle, _h = _a.contentColor, contentColor = _h === void 0 ? 'secondary' : _h, subtitleComplete = _a.subtitleComplete, _j = _a.stroke, stroke = _j === void 0 ? true : _j, fillComplete = _a.fillComplete, Icon = _a.icon, IconComplete = _a.iconComplete, completeTextColor = _a.completeTextColor, _k = _a.completeIconColor, completeIconColor = _k === void 0 ? 'tertiary' : _k, _l = _a.direction, direction = _l === void 0 ? 'clockwise' : _l, height = _a.height, children = _a.children;
26
81
  var memorized = React.useMemo(function () {
27
- var strokeWidth = 8;
82
+ var strokeWidth = STROKE[size];
28
83
  var maxProgress = 100;
29
84
  var minProgress = 0;
30
- var width = SIZES[size];
31
- var height = SIZES[size];
32
- var center = width / 2;
85
+ var widthSVG = SIZES[size];
86
+ var heightSVG = SIZES[size];
87
+ var center = widthSVG / 2;
33
88
  var radius = center - strokeWidth / 2;
34
89
  var circumference = Math.PI * radius * 2;
35
90
  var progress = Math.min(Math.max(value, minProgress), maxProgress);
36
91
  var strokeDasharray = circumference.toFixed(3);
37
92
  var strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);
38
93
  return {
39
- width: width,
40
- height: height,
94
+ widthSVG: widthSVG,
95
+ heightSVG: heightSVG,
41
96
  center: center,
42
97
  radius: radius,
43
98
  strokeDasharray: strokeDasharray,
44
99
  strokeDashoffset: strokeDashoffset,
45
100
  };
46
101
  }, [value, size]);
47
- return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][size], className), "data-test-id": dataTestId },
48
- React__default['default'].createElement("svg", { viewBox: "0 0 " + memorized.width + " " + memorized.height, className: styles__default['default'].svg, xmlns: 'http://www.w3.org/2000/svg' },
49
- React__default['default'].createElement("circle", { className: styles__default['default'].backgroundCircle, cx: memorized.center, cy: memorized.center, r: memorized.radius }),
50
- React__default['default'].createElement("circle", { className: cn__default['default'](styles__default['default'].progressCircle, styles__default['default'][view]), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeDasharray: memorized.strokeDasharray, strokeDashoffset: memorized.strokeDashoffset, transform: "rotate(" + -90 + " " + memorized.center + " " + memorized.center + ")" })),
51
- React__default['default'].createElement("div", { className: styles__default['default'].label }, children || (React__default['default'].createElement(React__default['default'].Fragment, null,
52
- typeof title === 'string' ? (React__default['default'].createElement(coreComponentsTypography.Typography.Title, { className: styles__default['default'].title, color: 'secondary', tag: 'div', view: size === 'l' ? 'small' : 'xsmall' }, title)) : (title),
53
- typeof subtitle === 'string' ? (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { tag: 'div', className: styles__default['default'].subtitle, color: 'primary', view: 'primary-small' }, subtitle)) : (subtitle))))));
102
+ var isComplete = value === 100;
103
+ var isCompleteTextColor = isComplete && completeTextColor;
104
+ var titleContent = titleComplete && isComplete ? titleComplete : title;
105
+ var subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
106
+ var IconComponent = IconComplete && isComplete ? IconComplete : Icon;
107
+ var renderTitleString = function () {
108
+ return (React__default['default'].createElement(React__default['default'].Fragment, null, SIZES[size] > 64 ? (React__default['default'].createElement(coreComponentsTypography.Typography.TitleMobile, { className: cn__default['default'](styles__default['default'].typography, styles__default['default'].title), color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size] }, titleContent)) : (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { className: styles__default['default'].title, color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size] }, titleContent))));
109
+ };
110
+ var renderTitle = function () { return (typeof title === 'string' ? renderTitleString() : titleContent); };
111
+ var renderSubTitle = function () {
112
+ return typeof subtitle === 'string' ? (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { tag: 'div', className: styles__default['default'].subtitle, color: isCompleteTextColor ? completeTextColor : contentColor, view: 'primary-small' }, subtitleContent)) : (subtitleContent);
113
+ };
114
+ var renderIcon = function () {
115
+ var _a;
116
+ return (React__default['default'].createElement("span", { className: cn__default['default'](styles__default['default'].iconWrapper, styles__default['default'][size], styles__default['default'].tertiary, styles__default['default']["icon-" + contentColor], (_a = {},
117
+ _a[styles__default['default']["icon-" + completeIconColor]] = completeIconColor,
118
+ _a)) }, IconComponent && React__default['default'].createElement(IconComponent, { className: styles__default['default'].icon })));
119
+ };
120
+ var renderContent = function () {
121
+ return Icon || (IconComplete && isComplete) ? (renderIcon()) : (React__default['default'].createElement(React__default['default'].Fragment, null,
122
+ SIZES[size] > 24 && renderTitle(),
123
+ SIZES[size] > 64 && renderSubTitle()));
124
+ };
125
+ return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][size], className), style: __assign({}, (height && { height: height, width: height })), "data-test-id": dataTestId },
126
+ React__default['default'].createElement("svg", { viewBox: "0 0 " + memorized.widthSVG + " " + memorized.heightSVG, className: styles__default['default'].svg, xmlns: 'http://www.w3.org/2000/svg' },
127
+ React__default['default'].createElement("circle", { className: cn__default['default'](styles__default['default'].backgroundCircle, styles__default['default'][size], (_b = {},
128
+ _b[styles__default['default'].stroke] = !stroke,
129
+ _b)), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size] }),
130
+ React__default['default'].createElement("circle", { className: cn__default['default'](styles__default['default'].progressCircle, styles__default['default'][view], styles__default['default'][size], (_c = {},
131
+ _c[styles__default['default']["bg-" + view]] = fillComplete && isComplete,
132
+ _c)), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
133
+ ? -memorized.strokeDashoffset
134
+ : memorized.strokeDashoffset, transform: "rotate(" + -90 + " " + memorized.center + " " + memorized.center + ")" })),
135
+ React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].labelWrapper, (_d = {},
136
+ _d[styles__default['default'].label] = Icon || IconComplete,
137
+ _d)) }, children || renderContent())));
54
138
  };
55
139
 
56
140
  exports.CircularProgressBar = CircularProgressBar;
package/cssm/index.js CHANGED
@@ -2,11 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var Component = require('./Component.js');
5
6
  require('classnames');
6
7
  require('react');
7
8
  require('@alfalab/core-components-typography/cssm');
8
9
  require('./index.module.css');
9
- var Component = require('./Component.js');
10
10
 
11
11
 
12
12