@alfalab/core-components-steps 1.7.5 → 1.8.1-snapshot-f57d3d0
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 +11 -38
- package/Component.js +10 -8
- package/Component.js.map +1 -0
- package/components/step/Component.d.ts +11 -35
- package/components/step/Component.js +54 -43
- package/components/step/Component.js.map +1 -0
- package/components/step/index.css +46 -59
- package/components/step/index.d.ts +1 -1
- package/components/step/index.js +3 -2
- package/components/step/index.js.map +1 -0
- package/components/step/index.module.css.js +8 -0
- package/components/step/index.module.css.js.map +1 -0
- package/components/step-indicator/Component.d.ts +3 -5
- package/components/step-indicator/Component.js +3 -4
- package/components/step-indicator/Component.js.map +1 -0
- package/components/step-indicator/index.css +3 -22
- package/components/step-indicator/index.d.ts +1 -1
- package/components/step-indicator/index.js +3 -2
- package/components/step-indicator/index.js.map +1 -0
- package/components/step-indicator/index.module.css.js +8 -0
- package/components/step-indicator/index.module.css.js.map +1 -0
- package/cssm/Component.d.ts +11 -38
- package/cssm/Component.js +7 -3
- package/cssm/Component.js.map +1 -0
- package/cssm/components/step/Component.d.ts +11 -35
- package/cssm/components/step/Component.js +33 -20
- package/cssm/components/step/Component.js.map +1 -0
- package/cssm/components/step/index.d.ts +1 -1
- package/cssm/components/step/index.js +3 -2
- package/cssm/components/step/index.js.map +1 -0
- package/cssm/components/step/index.module.css +24 -36
- package/cssm/components/step-indicator/Component.d.ts +3 -5
- package/cssm/components/step-indicator/Component.js +3 -2
- package/cssm/components/step-indicator/Component.js.map +1 -0
- package/cssm/components/step-indicator/index.d.ts +1 -1
- package/cssm/components/step-indicator/index.js +3 -2
- package/cssm/components/step-indicator/index.js.map +1 -0
- package/cssm/components/step-indicator/index.module.css +3 -21
- package/cssm/index.d.ts +1 -1
- package/cssm/index.js +1 -0
- package/cssm/index.js.map +1 -0
- package/cssm/index.module.css +1 -20
- package/cssm/shared/index.d.ts +1 -0
- package/cssm/shared/index.js +10 -0
- package/cssm/shared/index.js.map +1 -0
- package/cssm/types/common-props.d.ts +40 -0
- package/cssm/types/common-props.js +3 -0
- package/cssm/types/common-props.js.map +1 -0
- package/cssm/utils/getStepsTestIds.d.ts +4 -0
- package/cssm/utils/getStepsTestIds.js +15 -0
- package/cssm/utils/getStepsTestIds.js.map +1 -0
- package/esm/Component.d.ts +11 -38
- package/esm/Component.js +7 -5
- package/esm/Component.js.map +1 -0
- package/esm/components/step/Component.d.ts +11 -35
- package/esm/components/step/Component.js +27 -16
- package/esm/components/step/Component.js.map +1 -0
- package/esm/components/step/index.css +46 -59
- package/esm/components/step/index.d.ts +1 -1
- package/esm/components/step/index.js +1 -0
- package/esm/components/step/index.js.map +1 -0
- package/esm/components/step/index.module.css.js +6 -0
- package/esm/components/step/index.module.css.js.map +1 -0
- package/esm/components/step-indicator/Component.d.ts +3 -5
- package/esm/components/step-indicator/Component.js +2 -3
- package/esm/components/step-indicator/Component.js.map +1 -0
- package/esm/components/step-indicator/index.css +3 -22
- package/esm/components/step-indicator/index.d.ts +1 -1
- package/esm/components/step-indicator/index.js +1 -0
- package/esm/components/step-indicator/index.js.map +1 -0
- package/esm/components/step-indicator/index.module.css.js +6 -0
- package/esm/components/step-indicator/index.module.css.js.map +1 -0
- package/esm/index.css +2 -22
- package/esm/index.d.ts +1 -1
- 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 -0
- package/esm/shared/index.js +2 -0
- package/esm/shared/index.js.map +1 -0
- package/esm/types/common-props.d.ts +40 -0
- package/esm/types/common-props.js +2 -0
- package/esm/types/common-props.js.map +1 -0
- package/esm/utils/getStepsTestIds.d.ts +4 -0
- package/esm/utils/getStepsTestIds.js +11 -0
- package/esm/utils/getStepsTestIds.js.map +1 -0
- package/index.css +2 -22
- package/index.d.ts +1 -1
- 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 +11 -38
- package/modern/Component.js +7 -5
- package/modern/Component.js.map +1 -0
- package/modern/components/step/Component.d.ts +11 -35
- package/modern/components/step/Component.js +28 -15
- package/modern/components/step/Component.js.map +1 -0
- package/modern/components/step/index.css +46 -59
- package/modern/components/step/index.d.ts +1 -1
- package/modern/components/step/index.js +1 -0
- package/modern/components/step/index.js.map +1 -0
- package/modern/components/step/index.module.css.js +6 -0
- package/modern/components/step/index.module.css.js.map +1 -0
- package/modern/components/step-indicator/Component.d.ts +3 -5
- package/modern/components/step-indicator/Component.js +2 -3
- package/modern/components/step-indicator/Component.js.map +1 -0
- package/modern/components/step-indicator/index.css +3 -22
- package/modern/components/step-indicator/index.d.ts +1 -1
- package/modern/components/step-indicator/index.js +1 -0
- package/modern/components/step-indicator/index.js.map +1 -0
- package/modern/components/step-indicator/index.module.css.js +6 -0
- package/modern/components/step-indicator/index.module.css.js.map +1 -0
- package/modern/index.css +2 -22
- package/modern/index.d.ts +1 -1
- 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 -0
- package/modern/shared/index.js +2 -0
- package/modern/shared/index.js.map +1 -0
- package/modern/types/common-props.d.ts +40 -0
- package/modern/types/common-props.js +2 -0
- package/modern/types/common-props.js.map +1 -0
- package/modern/utils/getStepsTestIds.d.ts +4 -0
- package/modern/utils/getStepsTestIds.js +11 -0
- package/modern/utils/getStepsTestIds.js.map +1 -0
- package/moderncssm/Component.d.ts +11 -38
- package/moderncssm/Component.js +6 -2
- package/moderncssm/Component.js.map +1 -0
- package/moderncssm/components/step/Component.d.ts +11 -35
- package/moderncssm/components/step/Component.js +27 -12
- package/moderncssm/components/step/Component.js.map +1 -0
- package/moderncssm/components/step/index.d.ts +1 -1
- package/moderncssm/components/step/index.js +1 -0
- package/moderncssm/components/step/index.js.map +1 -0
- package/moderncssm/components/step/index.module.css +19 -20
- package/moderncssm/components/step-indicator/Component.d.ts +3 -5
- package/moderncssm/components/step-indicator/Component.js +1 -0
- package/moderncssm/components/step-indicator/Component.js.map +1 -0
- package/moderncssm/components/step-indicator/index.d.ts +1 -1
- package/moderncssm/components/step-indicator/index.js +1 -0
- package/moderncssm/components/step-indicator/index.js.map +1 -0
- package/moderncssm/components/step-indicator/index.module.css +0 -2
- package/moderncssm/index.d.ts +1 -1
- package/moderncssm/index.js +1 -0
- package/moderncssm/index.js.map +1 -0
- package/moderncssm/index.module.css +0 -2
- package/moderncssm/shared/index.d.ts +1 -0
- package/moderncssm/shared/index.js +2 -0
- package/moderncssm/shared/index.js.map +1 -0
- package/moderncssm/types/common-props.d.ts +40 -0
- package/moderncssm/types/common-props.js +2 -0
- package/moderncssm/types/common-props.js.map +1 -0
- package/moderncssm/utils/getStepsTestIds.d.ts +4 -0
- package/moderncssm/utils/getStepsTestIds.js +11 -0
- package/moderncssm/utils/getStepsTestIds.js.map +1 -0
- package/package.json +5 -4
- package/shared/index.d.ts +1 -0
- package/shared/index.js +10 -0
- package/shared/index.js.map +1 -0
- package/shared/package.json +3 -0
- package/src/Component.tsx +18 -40
- package/src/components/step/Component.tsx +49 -57
- package/src/components/step/index.module.css +19 -17
- package/src/shared/index.ts +1 -0
- package/src/shared/package.json +3 -0
- package/src/types/common-props.ts +48 -0
- package/src/utils/getStepsTestIds.ts +8 -0
- package/types/common-props.d.ts +40 -0
- package/types/common-props.js +3 -0
- package/types/common-props.js.map +1 -0
- package/utils/getStepsTestIds.d.ts +4 -0
- package/utils/getStepsTestIds.js +15 -0
- package/utils/getStepsTestIds.js.map +1 -0
package/Component.d.ts
CHANGED
|
@@ -1,16 +1,11 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import React from 'react';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
type StepsProps = {
|
|
2
|
+
import { StepIndicatorProps } from './components/step-indicator';
|
|
3
|
+
import { CommonProps } from './types/common-props';
|
|
4
|
+
export declare type StepsProps = {
|
|
6
5
|
/**
|
|
7
6
|
* Дополнительный класс
|
|
8
7
|
*/
|
|
9
8
|
className?: string;
|
|
10
|
-
/**
|
|
11
|
-
* Дочерние элементы
|
|
12
|
-
*/
|
|
13
|
-
children: ReactNode;
|
|
14
9
|
/**
|
|
15
10
|
* Активный шаг, указанный по умолчанию
|
|
16
11
|
* @default 1
|
|
@@ -25,29 +20,6 @@ type StepsProps = {
|
|
|
25
20
|
* @default true
|
|
26
21
|
*/
|
|
27
22
|
isMarkCompletedSteps?: boolean;
|
|
28
|
-
/**
|
|
29
|
-
* Управление ориентацией компонента
|
|
30
|
-
* @default false
|
|
31
|
-
*/
|
|
32
|
-
isVerticalAlign?: boolean;
|
|
33
|
-
/**
|
|
34
|
-
* Управление отображением номера шага
|
|
35
|
-
*/
|
|
36
|
-
ordered?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
* Включение / отключение интерактивности шагов
|
|
39
|
-
*/
|
|
40
|
-
interactive?: boolean;
|
|
41
|
-
/**
|
|
42
|
-
* Растягивание шагов на всю ширину блока для вертикальной ориентации
|
|
43
|
-
* @default false
|
|
44
|
-
*/
|
|
45
|
-
fullWidth?: boolean;
|
|
46
|
-
/**
|
|
47
|
-
* Минимальное расстояние между шагами
|
|
48
|
-
* @default 24
|
|
49
|
-
*/
|
|
50
|
-
minSpaceBetweenSteps?: 8 | 16 | 24;
|
|
51
23
|
/**
|
|
52
24
|
* Кастомный метод для управления состоянием disabled шага и
|
|
53
25
|
* возможностью перехода на этот шаг
|
|
@@ -61,6 +33,12 @@ type StepsProps = {
|
|
|
61
33
|
* @return Флаг состояния error
|
|
62
34
|
*/
|
|
63
35
|
checkIsStepError?: (stepNumber: number) => boolean;
|
|
36
|
+
/**
|
|
37
|
+
* Кастомный метод для управления состоянием шага criticalError
|
|
38
|
+
* @param stepNumber - номер шага
|
|
39
|
+
* @return Флаг состояния error
|
|
40
|
+
*/
|
|
41
|
+
checkIsStepCriticalError?: (stepNumber: number) => boolean;
|
|
64
42
|
/**
|
|
65
43
|
* Кастомный метод для управления состоянием шага warning
|
|
66
44
|
* @param stepNumber - номер шага
|
|
@@ -90,10 +68,5 @@ type StepsProps = {
|
|
|
90
68
|
* @param stepNumber - номер активного шага
|
|
91
69
|
*/
|
|
92
70
|
onChange?: (stepNumber: number) => void;
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
*/
|
|
96
|
-
dataTestId?: string;
|
|
97
|
-
};
|
|
98
|
-
declare const Steps: React.FC<StepsProps>;
|
|
99
|
-
export { StepsProps, Steps };
|
|
71
|
+
} & CommonProps;
|
|
72
|
+
export declare const Steps: React.FC<StepsProps>;
|
package/Component.js
CHANGED
|
@@ -4,19 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var cn = require('classnames');
|
|
7
|
-
var
|
|
7
|
+
var Component = require('./components/step/Component.js');
|
|
8
|
+
var index_module = require('./index.module.css.js');
|
|
8
9
|
|
|
9
10
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
10
11
|
|
|
11
12
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
12
13
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
13
14
|
|
|
14
|
-
var styles = {"component":"steps__component_eyi6g","vertical":"steps__vertical_eyi6g"};
|
|
15
|
-
require('./index.css')
|
|
16
|
-
|
|
17
15
|
var Steps = function (_a) {
|
|
18
16
|
var _b;
|
|
19
|
-
var className = _a.className, children = _a.children, _c = _a.defaultActiveStep, defaultActiveStep = _c === void 0 ? 1 : _c, activeStepProp = _a.activeStep, _d = _a.isMarkCompletedSteps, isMarkCompletedSteps = _d === void 0 ? true : _d, _e = _a.isVerticalAlign, isVerticalAlign = _e === void 0 ? false : _e, _f = _a.ordered, ordered = _f === void 0 ? true : _f, _g = _a.interactive, interactive = _g === void 0 ? true : _g, _h = _a.fullWidth, fullWidth = _h === void 0 ? false : _h, _j = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _j === void 0 ? 24 : _j, checkIsStepDisabled = _a.checkIsStepDisabled, checkIsStepError = _a.checkIsStepError, checkIsStepWarning = _a.checkIsStepWarning, checkIsStepWaiting = _a.checkIsStepWaiting, checkIsStepPositive = _a.checkIsStepPositive, checkIsStepCustom = _a.checkIsStepCustom, onChange = _a.onChange, dataTestId = _a.dataTestId;
|
|
17
|
+
var className = _a.className, children = _a.children, _c = _a.defaultActiveStep, defaultActiveStep = _c === void 0 ? 1 : _c, activeStepProp = _a.activeStep, _d = _a.isMarkCompletedSteps, isMarkCompletedSteps = _d === void 0 ? true : _d, _e = _a.isVerticalAlign, isVerticalAlign = _e === void 0 ? false : _e, _f = _a.ordered, ordered = _f === void 0 ? true : _f, _g = _a.interactive, interactive = _g === void 0 ? true : _g, _h = _a.fullWidth, fullWidth = _h === void 0 ? false : _h, _j = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _j === void 0 ? 24 : _j, checkIsStepDisabled = _a.checkIsStepDisabled, checkIsStepError = _a.checkIsStepError, checkIsStepCriticalError = _a.checkIsStepCriticalError, checkIsStepWarning = _a.checkIsStepWarning, checkIsStepWaiting = _a.checkIsStepWaiting, checkIsStepPositive = _a.checkIsStepPositive, checkIsStepCustom = _a.checkIsStepCustom, onChange = _a.onChange, dataTestId = _a.dataTestId, completedDashColor = _a.completedDashColor;
|
|
20
18
|
var uncontrolled = activeStepProp === undefined;
|
|
21
19
|
var _k = React.useState(defaultActiveStep), activeStep = _k[0], setActiveStep = _k[1];
|
|
22
20
|
var stepsLength = React__default.default.Children.count(children);
|
|
@@ -31,8 +29,8 @@ var Steps = function (_a) {
|
|
|
31
29
|
if (!stepsLength)
|
|
32
30
|
return null;
|
|
33
31
|
var visibleActiveStep = uncontrolled ? activeStep : activeStepProp;
|
|
34
|
-
return (React__default.default.createElement("div", { className: cn__default.default(className,
|
|
35
|
-
_b[
|
|
32
|
+
return (React__default.default.createElement("div", { className: cn__default.default(className, index_module.component, (_b = {},
|
|
33
|
+
_b[index_module.vertical] = isVerticalAlign,
|
|
36
34
|
_b)), "data-test-id": dataTestId }, React__default.default.Children.map(children, function (step, index) {
|
|
37
35
|
var stepNumber = index + 1;
|
|
38
36
|
var isSelected = stepNumber === visibleActiveStep;
|
|
@@ -40,13 +38,17 @@ var Steps = function (_a) {
|
|
|
40
38
|
var disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;
|
|
41
39
|
var isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;
|
|
42
40
|
var isError = checkIsStepError ? checkIsStepError(stepNumber) : false;
|
|
41
|
+
var isCriticalError = checkIsStepCriticalError
|
|
42
|
+
? checkIsStepCriticalError(stepNumber)
|
|
43
|
+
: false;
|
|
43
44
|
var isWarning = checkIsStepWarning ? checkIsStepWarning(stepNumber) : false;
|
|
44
45
|
var isWaiting = checkIsStepWaiting ? checkIsStepWaiting(stepNumber) : false;
|
|
45
46
|
var customStepIndicator = checkIsStepCustom && checkIsStepCustom(stepNumber);
|
|
46
47
|
var isNotLastStep = stepsLength !== stepNumber;
|
|
47
48
|
var isInteractive = !disabled && interactive;
|
|
48
|
-
return (React__default.default.createElement(
|
|
49
|
+
return (React__default.default.createElement(Component.Step, { stepNumber: stepNumber, isSelected: isSelected, isStepCompleted: isStepCompleted, disabled: disabled, isPositive: isPositive, isError: isError, isCriticalError: isCriticalError, isWarning: isWarning, isWaiting: isWaiting, customStepIndicator: customStepIndicator, onClick: handleStepClick, ordered: ordered, interactive: isInteractive, isVerticalAlign: isVerticalAlign, isNotLastStep: isNotLastStep, key: stepNumber, fullWidth: fullWidth, minSpaceBetweenSteps: minSpaceBetweenSteps, completedDashColor: completedDashColor, dataTestId: dataTestId }, step));
|
|
49
50
|
})));
|
|
50
51
|
};
|
|
51
52
|
|
|
52
53
|
exports.Steps = Steps;
|
|
54
|
+
//# sourceMappingURL=Component.js.map
|
package/Component.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport cn from 'classnames';\n\nimport { Step } from './components/step';\nimport { StepIndicatorProps } from './components/step-indicator';\nimport { CommonProps } from './types/common-props';\n\nimport styles from './index.module.css';\n\nexport type StepsProps = {\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Активный шаг, указанный по умолчанию\n * @default 1\n */\n defaultActiveStep?: number;\n\n /**\n * Активный шаг\n */\n activeStep?: number;\n\n /**\n * Управление возможностью отключения пометки пройденного шага\n * @default true\n */\n isMarkCompletedSteps?: boolean;\n\n /**\n * Кастомный метод для управления состоянием disabled шага и\n * возможностью перехода на этот шаг\n * @param stepNumber - номер шага\n * @return Флаг состояния disabled\n */\n checkIsStepDisabled?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага error\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага criticalError\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepCriticalError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага warning\n * @param stepNumber - номер шага\n * @return Флаг состояния warning\n */\n checkIsStepWarning?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага waiting\n * @param stepNumber - номер шага\n * @return Флаг состояния waiting\n */\n checkIsStepWaiting?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага positive\n * @param stepNumber - номер шага\n * @return Флаг состояния positive\n */\n checkIsStepPositive?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для установки кастомного индикатора шага\n * @param stepNumber - номер шага\n * @return Объект StepIndicatorProps { className, content, iconColor } или null\n */\n checkIsStepCustom?: (stepNumber: number) => StepIndicatorProps | null;\n\n /**\n * Обработчик клика на шаг\n * @param stepNumber - номер активного шага\n */\n onChange?: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Steps: React.FC<StepsProps> = ({\n className,\n children,\n defaultActiveStep = 1,\n activeStep: activeStepProp,\n isMarkCompletedSteps = true,\n isVerticalAlign = false,\n ordered = true,\n interactive = true,\n fullWidth = false,\n minSpaceBetweenSteps = 24,\n checkIsStepDisabled,\n checkIsStepError,\n checkIsStepCriticalError,\n checkIsStepWarning,\n checkIsStepWaiting,\n checkIsStepPositive,\n checkIsStepCustom,\n onChange,\n dataTestId,\n completedDashColor,\n}) => {\n const uncontrolled = activeStepProp === undefined;\n const [activeStep, setActiveStep] = useState(defaultActiveStep);\n\n const stepsLength = React.Children.count(children);\n\n const handleStepClick = (stepNumber: number) => {\n if (uncontrolled) {\n setActiveStep(stepNumber);\n }\n\n if (onChange) {\n onChange(stepNumber);\n }\n };\n\n if (!stepsLength) return null;\n\n const visibleActiveStep = uncontrolled ? activeStep : activeStepProp;\n\n return (\n <div\n className={cn(className, styles.component, {\n [styles.vertical]: isVerticalAlign,\n })}\n data-test-id={dataTestId}\n >\n {React.Children.map(children, (step, index) => {\n const stepNumber = index + 1;\n const isSelected = stepNumber === visibleActiveStep;\n const isStepCompleted = isMarkCompletedSteps && stepNumber < visibleActiveStep;\n const disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;\n const isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;\n const isError = checkIsStepError ? checkIsStepError(stepNumber) : false;\n const isCriticalError = checkIsStepCriticalError\n ? checkIsStepCriticalError(stepNumber)\n : false;\n const isWarning = checkIsStepWarning ? checkIsStepWarning(stepNumber) : false;\n const isWaiting = checkIsStepWaiting ? checkIsStepWaiting(stepNumber) : false;\n const customStepIndicator = checkIsStepCustom && checkIsStepCustom(stepNumber);\n const isNotLastStep = stepsLength !== stepNumber;\n const isInteractive = !disabled && interactive;\n\n return (\n <Step\n stepNumber={stepNumber}\n isSelected={isSelected}\n isStepCompleted={isStepCompleted}\n disabled={disabled}\n isPositive={isPositive}\n isError={isError}\n isCriticalError={isCriticalError}\n isWarning={isWarning}\n isWaiting={isWaiting}\n customStepIndicator={customStepIndicator}\n onClick={handleStepClick}\n ordered={ordered}\n interactive={isInteractive}\n isVerticalAlign={isVerticalAlign}\n isNotLastStep={isNotLastStep}\n key={stepNumber}\n fullWidth={fullWidth}\n minSpaceBetweenSteps={minSpaceBetweenSteps}\n completedDashColor={completedDashColor}\n dataTestId={dataTestId}\n >\n {step}\n </Step>\n );\n })}\n </div>\n );\n};\n"],"names":["useState","React","cn","styles","Step"],"mappings":"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"}
|
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
type StepProps = {
|
|
6
|
-
/**
|
|
7
|
-
* Название шага
|
|
8
|
-
*/
|
|
9
|
-
children: ReactNode;
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { CommonProps } from '../../types/common-props';
|
|
3
|
+
import { StepIndicatorProps } from '../step-indicator';
|
|
4
|
+
declare type StepProps = {
|
|
10
5
|
/**
|
|
11
6
|
* Номер шага
|
|
12
7
|
*/
|
|
@@ -19,14 +14,6 @@ type StepProps = {
|
|
|
19
14
|
* Маркер того, что текущий шаг доступен для клика
|
|
20
15
|
*/
|
|
21
16
|
disabled: boolean;
|
|
22
|
-
/**
|
|
23
|
-
* Управление отображением номера шага
|
|
24
|
-
*/
|
|
25
|
-
ordered?: boolean;
|
|
26
|
-
/**
|
|
27
|
-
* Включение / отключение интерактивности шагов
|
|
28
|
-
*/
|
|
29
|
-
interactive?: boolean;
|
|
30
17
|
/**
|
|
31
18
|
* Маркер того, что текущий шаг находится в состоянии "Positive"
|
|
32
19
|
*/
|
|
@@ -35,6 +22,10 @@ type StepProps = {
|
|
|
35
22
|
* Маркер того, что текущий шаг находится в состоянии "Error"
|
|
36
23
|
*/
|
|
37
24
|
isError: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Маркер того, что текущий шаг находится в состоянии "isCriticalError"
|
|
27
|
+
*/
|
|
28
|
+
isCriticalError: boolean;
|
|
38
29
|
/**
|
|
39
30
|
* Маркер того, что текущий шаг находится в состоянии "Warning"
|
|
40
31
|
*/
|
|
@@ -51,30 +42,15 @@ type StepProps = {
|
|
|
51
42
|
* Свойства кастомного индикатора текущего шага
|
|
52
43
|
*/
|
|
53
44
|
customStepIndicator?: StepIndicatorProps | null;
|
|
54
|
-
/**
|
|
55
|
-
* Управление ориентацией компонента
|
|
56
|
-
* @default false
|
|
57
|
-
*/
|
|
58
|
-
isVerticalAlign?: boolean;
|
|
59
45
|
/**
|
|
60
46
|
* Указывает, является ли текущий шаг последним в списке
|
|
61
47
|
*/
|
|
62
48
|
isNotLastStep?: boolean;
|
|
63
|
-
/**
|
|
64
|
-
* Маркер того, что шаг растягивается на всю ширину блока
|
|
65
|
-
* для вертикальной ориентации
|
|
66
|
-
*/
|
|
67
|
-
fullWidth?: boolean;
|
|
68
|
-
/**
|
|
69
|
-
* Минимальное расстояние между шагами
|
|
70
|
-
* @default 24
|
|
71
|
-
*/
|
|
72
|
-
minSpaceBetweenSteps?: 8 | 16 | 24;
|
|
73
49
|
/**
|
|
74
50
|
* Обработчик нажатия на текущей шаг
|
|
75
51
|
* @param stepNumber - номер шага
|
|
76
52
|
*/
|
|
77
53
|
onClick: (stepNumber: number) => void;
|
|
78
|
-
};
|
|
79
|
-
declare const Step:
|
|
80
|
-
export {
|
|
54
|
+
} & CommonProps;
|
|
55
|
+
export declare const Step: FC<StepProps>;
|
|
56
|
+
export {};
|
|
@@ -5,28 +5,23 @@ 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 coreComponentsShared = require('@alfalab/core-components-shared');
|
|
8
9
|
var hooks = require('@alfalab/hooks');
|
|
9
10
|
var CheckmarkCircleMIcon = require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
|
|
10
11
|
var ClockMIcon = require('@alfalab/icons-glyph/ClockMIcon');
|
|
12
|
+
var CrossCompactMIcon = require('@alfalab/icons-glyph/CrossCompactMIcon');
|
|
11
13
|
var ExclamationCircleMIcon = require('@alfalab/icons-glyph/ExclamationCircleMIcon');
|
|
12
|
-
var
|
|
14
|
+
var Component = require('../step-indicator/Component.js');
|
|
15
|
+
var index_module = require('./index.module.css.js');
|
|
13
16
|
|
|
14
17
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
15
18
|
|
|
16
19
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
17
20
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
18
21
|
|
|
19
|
-
var styles = {"step":"steps__step_13yrt","vertical":"steps__vertical_13yrt","interactive":"steps__interactive_13yrt","disabled":"steps__disabled_13yrt","text":"steps__text_13yrt","indicator":"steps__indicator_13yrt","option":"steps__option_13yrt","dash":"steps__dash_13yrt","size-16":"steps__size-16_13yrt","size-8":"steps__size-8_13yrt","completed":"steps__completed_13yrt","focused":"steps__focused_13yrt","selected":"steps__selected_13yrt","checkbox":"steps__checkbox_13yrt","dot":"steps__dot_13yrt","error":"steps__error_13yrt","unordered":"steps__unordered_13yrt","completedIndicator":"steps__completedIndicator_13yrt","fullWidth":"steps__fullWidth_13yrt"};
|
|
20
|
-
require('./index.css')
|
|
21
|
-
|
|
22
|
-
var SIZE_TO_CLASSNAME_MAP = {
|
|
23
|
-
8: 'size-8',
|
|
24
|
-
16: 'size-16',
|
|
25
|
-
24: 'size-24',
|
|
26
|
-
};
|
|
27
22
|
var Step = function (_a) {
|
|
28
|
-
var _b, _c, _d, _e;
|
|
29
|
-
var children = _a.children, stepNumber = _a.stepNumber, isSelected = _a.isSelected, disabled = _a.disabled, ordered = _a.ordered, isPositive = _a.isPositive, isError = _a.isError, isWarning = _a.isWarning, isWaiting = _a.isWaiting, customStepIndicator = _a.customStepIndicator, isStepCompleted = _a.isStepCompleted, onClick = _a.onClick, interactive = _a.interactive, isVerticalAlign = _a.isVerticalAlign, isNotLastStep = _a.isNotLastStep, fullWidth = _a.fullWidth,
|
|
23
|
+
var _b, _c, _d, _e, _f;
|
|
24
|
+
var children = _a.children, stepNumber = _a.stepNumber, isSelected = _a.isSelected, disabled = _a.disabled, ordered = _a.ordered, isPositive = _a.isPositive, isError = _a.isError, isCriticalError = _a.isCriticalError, isWarning = _a.isWarning, isWaiting = _a.isWaiting, customStepIndicator = _a.customStepIndicator, isStepCompleted = _a.isStepCompleted, onClick = _a.onClick, interactive = _a.interactive, isVerticalAlign = _a.isVerticalAlign, isNotLastStep = _a.isNotLastStep, fullWidth = _a.fullWidth, _g = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _g === void 0 ? 24 : _g, completedDashColor = _a.completedDashColor, dataTestId = _a.dataTestId;
|
|
30
25
|
var stepRef = React.useRef(null);
|
|
31
26
|
var focused = hooks.useFocus(stepRef, 'keyboard')[0];
|
|
32
27
|
var handleButtonClick = function () {
|
|
@@ -46,61 +41,77 @@ var Step = function (_a) {
|
|
|
46
41
|
};
|
|
47
42
|
var getStepIndicator = function () {
|
|
48
43
|
if (customStepIndicator) {
|
|
49
|
-
return React__default.default.createElement(
|
|
44
|
+
return React__default.default.createElement(Component.StepIndicator, tslib.__assign({}, customStepIndicator));
|
|
45
|
+
}
|
|
46
|
+
if (isCriticalError) {
|
|
47
|
+
return React__default.default.createElement(Component.StepIndicator, { iconColor: 'negative', content: React__default.default.createElement(CrossCompactMIcon.CrossCompactMIcon, null) });
|
|
50
48
|
}
|
|
51
49
|
if (isError) {
|
|
52
|
-
return React__default.default.createElement(
|
|
50
|
+
return React__default.default.createElement(Component.StepIndicator, { iconColor: 'negative', content: React__default.default.createElement(ExclamationCircleMIcon.ExclamationCircleMIcon, null) });
|
|
53
51
|
}
|
|
54
52
|
if (isWarning) {
|
|
55
|
-
return React__default.default.createElement(
|
|
53
|
+
return React__default.default.createElement(Component.StepIndicator, { iconColor: 'attention', content: React__default.default.createElement(ExclamationCircleMIcon.ExclamationCircleMIcon, null) });
|
|
56
54
|
}
|
|
57
55
|
if (isWaiting) {
|
|
58
|
-
return React__default.default.createElement(
|
|
56
|
+
return React__default.default.createElement(Component.StepIndicator, { iconColor: 'secondary', content: React__default.default.createElement(ClockMIcon.ClockMIcon, null) });
|
|
59
57
|
}
|
|
60
58
|
if (isPositive) {
|
|
61
|
-
return React__default.default.createElement(
|
|
59
|
+
return React__default.default.createElement(Component.StepIndicator, { iconColor: 'positive', content: React__default.default.createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, null) });
|
|
62
60
|
}
|
|
63
61
|
if (isStepCompleted) {
|
|
64
|
-
return (React__default.default.createElement(
|
|
62
|
+
return (React__default.default.createElement(Component.StepIndicator, { iconColor: 'positive', content: React__default.default.createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, null), className: index_module.completedIndicator }));
|
|
65
63
|
}
|
|
66
64
|
if (!ordered) {
|
|
67
|
-
return (React__default.default.createElement("div", { className:
|
|
68
|
-
React__default.default.createElement("span", { className:
|
|
65
|
+
return (React__default.default.createElement("div", { className: index_module.checkbox },
|
|
66
|
+
React__default.default.createElement("span", { className: index_module.dot })));
|
|
69
67
|
}
|
|
70
68
|
return stepNumber;
|
|
71
69
|
};
|
|
70
|
+
var getCustomDashColor = function () {
|
|
71
|
+
if (isStepCompleted && completedDashColor) {
|
|
72
|
+
return {
|
|
73
|
+
borderColor: completedDashColor,
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
return {};
|
|
77
|
+
};
|
|
72
78
|
var renderDash = function () {
|
|
73
79
|
var _a;
|
|
74
|
-
return (React__default.default.createElement("div", { className: cn__default.default(
|
|
75
|
-
_a[
|
|
76
|
-
_a[
|
|
77
|
-
_a),
|
|
80
|
+
return (React__default.default.createElement("div", { className: cn__default.default(index_module.dash, (_a = {},
|
|
81
|
+
_a[index_module.vertical] = isVerticalAlign,
|
|
82
|
+
_a[index_module.completed] = isStepCompleted,
|
|
83
|
+
_a)), style: tslib.__assign({}, getCustomDashColor()) }));
|
|
78
84
|
};
|
|
79
|
-
return (React__default.default.createElement("div", { role: 'button', tabIndex: 0, ref: stepRef, className: cn__default.default(
|
|
80
|
-
_b[
|
|
81
|
-
_b[
|
|
82
|
-
_b[
|
|
83
|
-
_b[
|
|
84
|
-
_b[
|
|
85
|
-
_b[
|
|
86
|
-
_b[
|
|
87
|
-
_b[
|
|
85
|
+
return (React__default.default.createElement("div", { "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'step'), role: 'button', tabIndex: 0, ref: stepRef, className: cn__default.default(index_module.step, (_b = {},
|
|
86
|
+
_b[index_module.completed] = isStepCompleted,
|
|
87
|
+
_b[index_module.error] = isError,
|
|
88
|
+
_b[index_module.selected] = isSelected,
|
|
89
|
+
_b[index_module.disabled] = disabled,
|
|
90
|
+
_b[index_module.focused] = focused,
|
|
91
|
+
_b[index_module.vertical] = isVerticalAlign,
|
|
92
|
+
_b[index_module.interactive] = interactive,
|
|
93
|
+
_b[index_module.fullWidth] = fullWidth && isVerticalAlign,
|
|
94
|
+
_b[index_module.horizontal] = !isVerticalAlign,
|
|
88
95
|
_b)), onClick: handleButtonClick, onKeyDown: handleKeyDown },
|
|
89
|
-
React__default.default.createElement("div", { className: cn__default.default(
|
|
90
|
-
_c[
|
|
91
|
-
_c[
|
|
96
|
+
React__default.default.createElement("div", { className: cn__default.default(index_module.indicator, (_c = {},
|
|
97
|
+
_c[index_module.vertical] = isVerticalAlign,
|
|
98
|
+
_c[index_module.interactive] = interactive,
|
|
92
99
|
_c)) },
|
|
93
|
-
React__default.default.createElement("div", { className: cn__default.default(
|
|
94
|
-
_d[
|
|
95
|
-
_d[
|
|
96
|
-
_d[
|
|
100
|
+
React__default.default.createElement("div", { className: cn__default.default(index_module.option, (_d = {},
|
|
101
|
+
_d[index_module.unordered] = !ordered,
|
|
102
|
+
_d[index_module.vertical] = isVerticalAlign,
|
|
103
|
+
_d[index_module.error] = isError,
|
|
97
104
|
_d)) }, getStepIndicator()),
|
|
98
105
|
isNotLastStep && isVerticalAlign && renderDash()),
|
|
99
|
-
React__default.default.createElement("div", { className: cn__default.default(
|
|
100
|
-
_e[
|
|
101
|
-
_e
|
|
102
|
-
|
|
106
|
+
React__default.default.createElement("div", { className: cn__default.default(index_module.textWrapper, index_module["gap-".concat(minSpaceBetweenSteps)], (_e = {},
|
|
107
|
+
_e[index_module.vertical] = isVerticalAlign,
|
|
108
|
+
_e)) },
|
|
109
|
+
React__default.default.createElement("div", { className: cn__default.default(index_module.text, (_f = {},
|
|
110
|
+
_f[index_module.interactive] = interactive,
|
|
111
|
+
_f[index_module.fullWidth] = fullWidth && isVerticalAlign,
|
|
112
|
+
_f)), onClick: handleTextClick }, children)),
|
|
103
113
|
isNotLastStep && !isVerticalAlign && renderDash()));
|
|
104
114
|
};
|
|
105
115
|
|
|
106
116
|
exports.Step = Step;
|
|
117
|
+
//# sourceMappingURL=Component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/components/step/Component.tsx"],"sourcesContent":["import React, { FC, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\nimport { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';\nimport { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';\nimport { CrossCompactMIcon } from '@alfalab/icons-glyph/CrossCompactMIcon';\nimport { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';\n\nimport { CommonProps } from '../../types/common-props';\nimport { StepIndicator, StepIndicatorProps } from '../step-indicator';\n\nimport styles from './index.module.css';\n\ntype StepProps = {\n /**\n * Номер шага\n */\n stepNumber: number;\n\n /**\n * Маркер того, что текущий шаг выбран\n */\n isSelected: boolean;\n\n /**\n * Маркер того, что текущий шаг доступен для клика\n */\n disabled: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Positive\"\n */\n isPositive: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Error\"\n */\n isError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"isCriticalError\"\n */\n isCriticalError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Warning\"\n */\n isWarning: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Waiting\"\n */\n isWaiting: boolean;\n\n /**\n * Маркер того, что текущий шаг нужно пометить как завершенный\n */\n isStepCompleted: boolean;\n\n /**\n * Свойства кастомного индикатора текущего шага\n */\n customStepIndicator?: StepIndicatorProps | null;\n\n /**\n * Указывает, является ли текущий шаг последним в списке\n */\n isNotLastStep?: boolean;\n\n /**\n * Обработчик нажатия на текущей шаг\n * @param stepNumber - номер шага\n */\n onClick: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Step: FC<StepProps> = ({\n children,\n stepNumber,\n isSelected,\n disabled,\n ordered,\n isPositive,\n isError,\n isCriticalError,\n isWarning,\n isWaiting,\n customStepIndicator,\n isStepCompleted,\n onClick,\n interactive,\n isVerticalAlign,\n isNotLastStep,\n fullWidth,\n minSpaceBetweenSteps = 24,\n completedDashColor,\n dataTestId,\n}) => {\n const stepRef = useRef<HTMLDivElement>(null);\n\n const [focused] = useFocus(stepRef, 'keyboard');\n\n const handleButtonClick = () => {\n if (!disabled && interactive && onClick) {\n onClick(stepNumber);\n }\n };\n\n const handleTextClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!interactive) {\n e.stopPropagation();\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n handleButtonClick();\n }\n };\n\n const getStepIndicator = () => {\n if (customStepIndicator) {\n return <StepIndicator {...customStepIndicator} />;\n }\n if (isCriticalError) {\n return <StepIndicator iconColor='negative' content={<CrossCompactMIcon />} />;\n }\n if (isError) {\n return <StepIndicator iconColor='negative' content={<ExclamationCircleMIcon />} />;\n }\n if (isWarning) {\n return <StepIndicator iconColor='attention' content={<ExclamationCircleMIcon />} />;\n }\n if (isWaiting) {\n return <StepIndicator iconColor='secondary' content={<ClockMIcon />} />;\n }\n if (isPositive) {\n return <StepIndicator iconColor='positive' content={<CheckmarkCircleMIcon />} />;\n }\n if (isStepCompleted) {\n return (\n <StepIndicator\n iconColor='positive'\n content={<CheckmarkCircleMIcon />}\n className={styles.completedIndicator}\n />\n );\n }\n if (!ordered) {\n return (\n <div className={styles.checkbox}>\n <span className={styles.dot} />\n </div>\n );\n }\n\n return stepNumber;\n };\n\n const getCustomDashColor = () => {\n if (isStepCompleted && completedDashColor) {\n return {\n borderColor: completedDashColor,\n };\n }\n\n return {};\n };\n\n const renderDash = () => (\n <div\n className={cn(styles.dash, {\n [styles.vertical]: isVerticalAlign,\n [styles.completed]: isStepCompleted,\n })}\n style={{\n ...getCustomDashColor(),\n }}\n />\n );\n\n return (\n <div\n data-test-id={getDataTestId(dataTestId, 'step')}\n role='button'\n tabIndex={0}\n ref={stepRef}\n className={cn(styles.step, {\n [styles.completed]: isStepCompleted,\n [styles.error]: isError,\n [styles.selected]: isSelected,\n [styles.disabled]: disabled,\n [styles.focused]: focused,\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n [styles.horizontal]: !isVerticalAlign,\n })}\n onClick={handleButtonClick}\n onKeyDown={handleKeyDown}\n >\n <div\n className={cn(styles.indicator, {\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n })}\n >\n <div\n className={cn(styles.option, {\n [styles.unordered]: !ordered,\n [styles.vertical]: isVerticalAlign,\n [styles.error]: isError,\n })}\n >\n {getStepIndicator()}\n </div>\n {isNotLastStep && isVerticalAlign && renderDash()}\n </div>\n <div\n className={cn(styles.textWrapper, styles[`gap-${minSpaceBetweenSteps}`], {\n [styles.vertical]: isVerticalAlign,\n })}\n >\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n <div\n className={cn(styles.text, {\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n })}\n onClick={handleTextClick}\n >\n {children}\n </div>\n </div>\n {isNotLastStep && !isVerticalAlign && renderDash()}\n </div>\n );\n};\n"],"names":["useRef","useFocus","React","StepIndicator","__assign","CrossCompactMIcon","ExclamationCircleMIcon","ClockMIcon","CheckmarkCircleMIcon","styles","cn","getDataTestId"],"mappings":"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"}
|