@megafon/ui-shared 8.5.0 → 8.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.
- package/dist/es/components/Stepper/Stepper.css +1 -1
- package/dist/es/components/Stepper/Stepper.d.ts +4 -0
- package/dist/es/components/Stepper/Stepper.js +38 -23
- package/dist/es/components/Stepper/StepperItem.css +1 -1
- package/dist/es/components/Stepper/StepperItem.d.ts +7 -0
- package/dist/es/components/Stepper/StepperItem.js +15 -5
- package/dist/es/components/Stepper/img/separator-mobile.png +0 -0
- package/dist/lib/components/Stepper/Stepper.css +1 -1
- package/dist/lib/components/Stepper/Stepper.d.ts +4 -0
- package/dist/lib/components/Stepper/Stepper.js +37 -22
- package/dist/lib/components/Stepper/StepperItem.css +1 -1
- package/dist/lib/components/Stepper/StepperItem.d.ts +7 -0
- package/dist/lib/components/Stepper/StepperItem.js +16 -6
- package/dist/lib/components/Stepper/img/separator-mobile.png +0 -0
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-stepper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-stepper{gap:16px}.mfui-stepper,.mfui-stepper__items-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-stepper__items-wrap{gap:12px;overflow-x:auto}.mfui-stepper::-webkit-scrollbar{height:8px}.mfui-stepper::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:8px}.mfui-stepper_is-horizontal .mfui-stepper__items-wrap{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}
|
|
@@ -8,6 +8,7 @@ export interface IStepperProps {
|
|
|
8
8
|
/** Дополнительные классы элементов */
|
|
9
9
|
classes?: {
|
|
10
10
|
root?: string;
|
|
11
|
+
itemsWrap?: string;
|
|
11
12
|
item?: string;
|
|
12
13
|
itemIconButton?: string;
|
|
13
14
|
itemTitle?: string;
|
|
@@ -30,11 +31,14 @@ export interface IStepperProps {
|
|
|
30
31
|
isDisabled?: boolean;
|
|
31
32
|
/** Все шаги пройдены */
|
|
32
33
|
isAllChecked?: boolean;
|
|
34
|
+
/** Отображение контента только активного шага */
|
|
35
|
+
showActiveStepContent?: boolean;
|
|
33
36
|
/** Выравнивание */
|
|
34
37
|
align?: 'center' | 'left';
|
|
35
38
|
/** Дополнительные data атрибуты к внутренним элементам */
|
|
36
39
|
dataAttrs?: {
|
|
37
40
|
root?: Record<string, string>;
|
|
41
|
+
itemsWrap?: Record<string, string>;
|
|
38
42
|
item?: Record<string, string>;
|
|
39
43
|
itemIconButton?: Record<string, string>;
|
|
40
44
|
itemTitle?: Record<string, string>;
|
|
@@ -5,7 +5,7 @@ import "core-js/modules/es.array.map.js";
|
|
|
5
5
|
import "core-js/modules/es.string.iterator.js";
|
|
6
6
|
import * as React from 'react';
|
|
7
7
|
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
|
8
|
-
import StepperItem, { STEPPER_ITEM_THEME_ENUM } from "./StepperItem";
|
|
8
|
+
import StepperItem, { STEPPER_ITEM_THEME_ENUM, STEPPER_ITEM_VIEW_ENUM } from "./StepperItem";
|
|
9
9
|
import "./Stepper.css";
|
|
10
10
|
var CheckedIcon = function CheckedIcon(props) {
|
|
11
11
|
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
@@ -20,6 +20,7 @@ var Stepper = function Stepper(_ref) {
|
|
|
20
20
|
_ref$classes = _ref.classes,
|
|
21
21
|
_ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
|
|
22
22
|
rootClassName = _ref$classes2.root,
|
|
23
|
+
itemsWrapClassName = _ref$classes2.itemsWrap,
|
|
23
24
|
itemClassName = _ref$classes2.item,
|
|
24
25
|
itemIconButtonClassName = _ref$classes2.itemIconButton,
|
|
25
26
|
itemTitleClassName = _ref$classes2.itemTitle,
|
|
@@ -37,11 +38,14 @@ var Stepper = function Stepper(_ref) {
|
|
|
37
38
|
isNumeric = _ref.isNumeric,
|
|
38
39
|
isDisabled = _ref.isDisabled,
|
|
39
40
|
isAllChecked = _ref.isAllChecked,
|
|
41
|
+
_ref$showActiveStepCo = _ref.showActiveStepContent,
|
|
42
|
+
showActiveStepContent = _ref$showActiveStepCo === void 0 ? false : _ref$showActiveStepCo,
|
|
40
43
|
_ref$align = _ref.align,
|
|
41
44
|
align = _ref$align === void 0 ? 'center' : _ref$align,
|
|
42
45
|
_ref$dataAttrs = _ref.dataAttrs,
|
|
43
46
|
_ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
|
|
44
47
|
rootAttrs = _ref$dataAttrs2.root,
|
|
48
|
+
itemsWrapAttrs = _ref$dataAttrs2.itemsWrap,
|
|
45
49
|
itemAttrs = _ref$dataAttrs2.item,
|
|
46
50
|
itemIconButtonAttrs = _ref$dataAttrs2.itemIconButton,
|
|
47
51
|
itemTitleAttrs = _ref$dataAttrs2.itemTitle,
|
|
@@ -56,6 +60,7 @@ var Stepper = function Stepper(_ref) {
|
|
|
56
60
|
currentIndex = _React$useState2[0],
|
|
57
61
|
setCurrentIndex = _React$useState2[1];
|
|
58
62
|
var hasCustomItems = !!items.length;
|
|
63
|
+
var isHorizontalContent = isHorizontal || showActiveStepContent;
|
|
59
64
|
var currentItems = hasCustomItems ? items : Array.from({
|
|
60
65
|
length: stepCount
|
|
61
66
|
});
|
|
@@ -98,43 +103,53 @@ var Stepper = function Stepper(_ref) {
|
|
|
98
103
|
}
|
|
99
104
|
return /*#__PURE__*/React.createElement(CheckedIcon, null);
|
|
100
105
|
}, [isNumeric]);
|
|
106
|
+
var renderItem = React.useCallback(function (props) {
|
|
107
|
+
return /*#__PURE__*/React.createElement(StepperItem, _extends({}, props, {
|
|
108
|
+
className: itemClassName,
|
|
109
|
+
classes: {
|
|
110
|
+
iconButton: itemIconButtonClassName,
|
|
111
|
+
title: itemTitleClassName,
|
|
112
|
+
text: itemTextClassname,
|
|
113
|
+
link: itemLinkClassName
|
|
114
|
+
},
|
|
115
|
+
dataAttrs: {
|
|
116
|
+
root: itemAttrs,
|
|
117
|
+
iconButton: itemIconButtonAttrs,
|
|
118
|
+
title: itemTitleAttrs,
|
|
119
|
+
text: itemTextAttrs,
|
|
120
|
+
link: itemLinkAttrs
|
|
121
|
+
}
|
|
122
|
+
}));
|
|
123
|
+
}, [itemAttrs, itemIconButtonAttrs, itemIconButtonClassName, itemClassName, itemLinkAttrs, itemLinkClassName, itemTextAttrs, itemTextClassname, itemTitleAttrs, itemTitleClassName]);
|
|
101
124
|
var renderItems = React.useMemo(function () {
|
|
102
125
|
return currentItems.map(function (elem, i) {
|
|
103
126
|
var item = elem || {};
|
|
104
127
|
var itemTheme = defineItemTheme(i);
|
|
105
128
|
var itemIcon = item.icon || renderIcon(i, itemTheme);
|
|
106
|
-
|
|
107
|
-
return /*#__PURE__*/React.createElement(StepperItem, _extends({}, item, {
|
|
108
|
-
className: itemClassName,
|
|
109
|
-
classes: {
|
|
110
|
-
iconButton: itemIconButtonClassName,
|
|
111
|
-
title: itemTitleClassName,
|
|
112
|
-
text: itemTextClassname,
|
|
113
|
-
link: itemLinkClassName
|
|
114
|
-
},
|
|
115
|
-
dataAttrs: {
|
|
116
|
-
root: itemAttrs,
|
|
117
|
-
iconButton: itemIconButtonAttrs,
|
|
118
|
-
title: itemTitleAttrs,
|
|
119
|
-
text: itemTextAttrs,
|
|
120
|
-
link: itemLinkAttrs
|
|
121
|
-
},
|
|
122
|
-
key: i,
|
|
129
|
+
return renderItem(_extends(_extends({}, item), {
|
|
123
130
|
icon: itemIcon,
|
|
124
|
-
hasSeparator:
|
|
125
|
-
isHorizontal:
|
|
131
|
+
hasSeparator: i < currentItems.length - 1,
|
|
132
|
+
isHorizontal: isHorizontalContent,
|
|
126
133
|
isDisabled: isDisabled,
|
|
127
134
|
align: align,
|
|
128
135
|
theme: itemTheme,
|
|
136
|
+
view: showActiveStepContent ? STEPPER_ITEM_VIEW_ENUM.ICON : STEPPER_ITEM_VIEW_ENUM.DEFAULT,
|
|
129
137
|
onClick: handleClickItem(i)
|
|
130
138
|
}));
|
|
131
139
|
});
|
|
132
|
-
}, [align, currentItems, isDisabled,
|
|
140
|
+
}, [align, currentItems, isDisabled, showActiveStepContent, isHorizontalContent, defineItemTheme, handleClickItem, renderIcon, renderItem]);
|
|
141
|
+
var renderSingleItem = renderItem(_extends(_extends({}, currentItems[currentIndex]), {
|
|
142
|
+
isDisabled: isDisabled,
|
|
143
|
+
align: align,
|
|
144
|
+
view: STEPPER_ITEM_VIEW_ENUM.CONTENT
|
|
145
|
+
}));
|
|
133
146
|
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(rootAttrs), {
|
|
134
147
|
className: cn([className, rootClassName], {
|
|
135
|
-
'is-horizontal':
|
|
148
|
+
'is-horizontal': isHorizontalContent
|
|
136
149
|
}),
|
|
137
150
|
ref: rootRef
|
|
138
|
-
}),
|
|
151
|
+
}), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(itemsWrapAttrs), {
|
|
152
|
+
className: cn('items-wrap', [itemsWrapClassName])
|
|
153
|
+
}), renderItems), showActiveStepContent && renderSingleItem);
|
|
139
154
|
};
|
|
140
155
|
export default Stepper;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-stepper-item{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:16px}.mfui-stepper-item_is-horizontal{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{-o-border-image:url(img/separator.png) 2
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-stepper-item{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:16px}.mfui-stepper-item_is-horizontal{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{-o-border-image:url(img/separator-mobile.png) 2 round;border-image:url(img/separator-mobile.png) 2 round;border-left:none;border-radius:100px;border-top:2px solid transparent;height:2px;left:calc(50% + 22px);min-height:2px;position:absolute;top:19px;width:calc(100% - 32px)}@media screen and (min-width:768px){.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{-o-border-image:url(img/separator.png) 2 repeat;border-image:url(img/separator.png) 2 repeat}}@media screen and (min-width:1024px){.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{left:calc(50% + 32px);width:calc(100% - 52px)}}.mfui-stepper-item_theme_active .mfui-stepper-item__icon-button{background-color:var(--night20)}.mfui-stepper-item_theme_active .mfui-stepper-item__icon{background-color:var(--night)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon-button{background-color:var(--brandGreen20)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon{background-color:var(--brandGreen)}.mfui-stepper-item_theme_checked .mfui-stepper-item__separator{border-color:var(--brandGreen);-o-border-image:none;border-image:none}.mfui-stepper-item_align_left{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item_align_left .mfui-stepper-item__separator{left:42px;right:0}@media screen and (min-width:1024px){.mfui-stepper-item_align_left .mfui-stepper-item__separator{left:auto}}.mfui-stepper-item_align_left .mfui-stepper-item__content,.mfui-stepper-item_align_left .mfui-stepper-item__icon-button-area{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item__icon-button-area{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;-ms-flex-align:center;-ms-flex-item-align:stretch;align-self:stretch}.mfui-stepper-item__icon-button,.mfui-stepper-item__icon-button-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.mfui-stepper-item__icon-button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky0);border-radius:100%;height:40px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:40px}.mfui-stepper-item__icon-button:disabled{cursor:default}.mfui-stepper-item__icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky2);border-radius:100%;color:var(--stcWhite);font-weight:500;height:24px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:24px}.mfui-stepper-item__icon svg{width:20px;fill:var(--stcWhite)}.mfui-stepper-item__separator{-o-border-image:url(img/separator-vertical.png) 2 repeat;border-image:url(img/separator-vertical.png) 2 repeat;border-left:2px solid transparent;border-top:none;height:100%;min-height:20px;position:static;-webkit-transition:border-color .25s ease-out;transition:border-color .25s ease-out;width:2px}.mfui-stepper-item__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:160px;padding-bottom:20px}.mfui-stepper-item__link{margin-top:13px}
|
|
@@ -5,6 +5,11 @@ export declare enum STEPPER_ITEM_THEME_ENUM {
|
|
|
5
5
|
ACTIVE = "active",
|
|
6
6
|
DEFAULT = "default"
|
|
7
7
|
}
|
|
8
|
+
export declare enum STEPPER_ITEM_VIEW_ENUM {
|
|
9
|
+
ICON = "icon",
|
|
10
|
+
CONTENT = "content",
|
|
11
|
+
DEFAULT = "default"
|
|
12
|
+
}
|
|
8
13
|
export interface IStepperItemProps {
|
|
9
14
|
/** Дополнительный класс корневого элемента */
|
|
10
15
|
className?: string;
|
|
@@ -35,6 +40,8 @@ export interface IStepperItemProps {
|
|
|
35
40
|
isDisabled?: boolean;
|
|
36
41
|
/** Выравнивание */
|
|
37
42
|
align?: 'center' | 'left';
|
|
43
|
+
/** Варианты отображения */
|
|
44
|
+
view?: STEPPER_ITEM_VIEW_ENUM;
|
|
38
45
|
/** Дополнительные data атрибуты к внутренним элементам */
|
|
39
46
|
dataAttrs?: {
|
|
40
47
|
root?: Record<string, string>;
|
|
@@ -10,6 +10,12 @@ export var STEPPER_ITEM_THEME_ENUM;
|
|
|
10
10
|
STEPPER_ITEM_THEME_ENUM["ACTIVE"] = "active";
|
|
11
11
|
STEPPER_ITEM_THEME_ENUM["DEFAULT"] = "default";
|
|
12
12
|
})(STEPPER_ITEM_THEME_ENUM || (STEPPER_ITEM_THEME_ENUM = {}));
|
|
13
|
+
export var STEPPER_ITEM_VIEW_ENUM;
|
|
14
|
+
(function (STEPPER_ITEM_VIEW_ENUM) {
|
|
15
|
+
STEPPER_ITEM_VIEW_ENUM["ICON"] = "icon";
|
|
16
|
+
STEPPER_ITEM_VIEW_ENUM["CONTENT"] = "content";
|
|
17
|
+
STEPPER_ITEM_VIEW_ENUM["DEFAULT"] = "default";
|
|
18
|
+
})(STEPPER_ITEM_VIEW_ENUM || (STEPPER_ITEM_VIEW_ENUM = {}));
|
|
13
19
|
var cn = cnCreate('mfui-stepper-item');
|
|
14
20
|
var StepperItem = function StepperItem(_ref) {
|
|
15
21
|
var className = _ref.className,
|
|
@@ -20,7 +26,7 @@ var StepperItem = function StepperItem(_ref) {
|
|
|
20
26
|
textClassName = _ref$classes2.text,
|
|
21
27
|
linkClassName = _ref$classes2.link,
|
|
22
28
|
_ref$theme = _ref.theme,
|
|
23
|
-
theme = _ref$theme === void 0 ?
|
|
29
|
+
theme = _ref$theme === void 0 ? STEPPER_ITEM_THEME_ENUM.DEFAULT : _ref$theme,
|
|
24
30
|
title = _ref.title,
|
|
25
31
|
text = _ref.text,
|
|
26
32
|
linkText = _ref.linkText,
|
|
@@ -32,6 +38,8 @@ var StepperItem = function StepperItem(_ref) {
|
|
|
32
38
|
isDisabled = _ref.isDisabled,
|
|
33
39
|
_ref$align = _ref.align,
|
|
34
40
|
align = _ref$align === void 0 ? 'center' : _ref$align,
|
|
41
|
+
_ref$view = _ref.view,
|
|
42
|
+
view = _ref$view === void 0 ? STEPPER_ITEM_VIEW_ENUM.DEFAULT : _ref$view,
|
|
35
43
|
_ref$dataAttrs = _ref.dataAttrs,
|
|
36
44
|
_ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
|
|
37
45
|
rootAttrs = _ref$dataAttrs2.root,
|
|
@@ -42,6 +50,8 @@ var StepperItem = function StepperItem(_ref) {
|
|
|
42
50
|
onClick = _ref.onClick;
|
|
43
51
|
var hasLink = !!linkText && !!linkUrl;
|
|
44
52
|
var hasContent = !!title || !!text || hasLink;
|
|
53
|
+
var showContent = view !== STEPPER_ITEM_VIEW_ENUM.ICON && hasContent;
|
|
54
|
+
var showIcon = view !== STEPPER_ITEM_VIEW_ENUM.CONTENT;
|
|
45
55
|
var renderContent = /*#__PURE__*/React.createElement("div", {
|
|
46
56
|
className: cn('content')
|
|
47
57
|
}, title && /*#__PURE__*/React.createElement(Header, {
|
|
@@ -69,11 +79,11 @@ var StepperItem = function StepperItem(_ref) {
|
|
|
69
79
|
}, linkText));
|
|
70
80
|
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(rootAttrs), {
|
|
71
81
|
className: cn([className], {
|
|
72
|
-
'is-horizontal': isHorizontal,
|
|
73
82
|
theme: theme,
|
|
74
|
-
align: align
|
|
83
|
+
align: align,
|
|
84
|
+
'is-horizontal': isHorizontal
|
|
75
85
|
})
|
|
76
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
86
|
+
}), showIcon && /*#__PURE__*/React.createElement("div", {
|
|
77
87
|
className: cn('icon-button-area')
|
|
78
88
|
}, /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(iconButtonAttrs), {
|
|
79
89
|
className: cn('icon-button', [iconButtonClassName]),
|
|
@@ -84,6 +94,6 @@ var StepperItem = function StepperItem(_ref) {
|
|
|
84
94
|
className: cn('icon')
|
|
85
95
|
}, icon)), hasSeparator && /*#__PURE__*/React.createElement("span", {
|
|
86
96
|
className: cn('separator')
|
|
87
|
-
})),
|
|
97
|
+
})), showContent && renderContent);
|
|
88
98
|
};
|
|
89
99
|
export default StepperItem;
|
|
Binary file
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-stepper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-stepper{gap:16px}.mfui-stepper,.mfui-stepper__items-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-stepper__items-wrap{gap:12px;overflow-x:auto}.mfui-stepper::-webkit-scrollbar{height:8px}.mfui-stepper::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:8px}.mfui-stepper_is-horizontal .mfui-stepper__items-wrap{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}
|
|
@@ -8,6 +8,7 @@ export interface IStepperProps {
|
|
|
8
8
|
/** Дополнительные классы элементов */
|
|
9
9
|
classes?: {
|
|
10
10
|
root?: string;
|
|
11
|
+
itemsWrap?: string;
|
|
11
12
|
item?: string;
|
|
12
13
|
itemIconButton?: string;
|
|
13
14
|
itemTitle?: string;
|
|
@@ -30,11 +31,14 @@ export interface IStepperProps {
|
|
|
30
31
|
isDisabled?: boolean;
|
|
31
32
|
/** Все шаги пройдены */
|
|
32
33
|
isAllChecked?: boolean;
|
|
34
|
+
/** Отображение контента только активного шага */
|
|
35
|
+
showActiveStepContent?: boolean;
|
|
33
36
|
/** Выравнивание */
|
|
34
37
|
align?: 'center' | 'left';
|
|
35
38
|
/** Дополнительные data атрибуты к внутренним элементам */
|
|
36
39
|
dataAttrs?: {
|
|
37
40
|
root?: Record<string, string>;
|
|
41
|
+
itemsWrap?: Record<string, string>;
|
|
38
42
|
item?: Record<string, string>;
|
|
39
43
|
itemIconButton?: Record<string, string>;
|
|
40
44
|
itemTitle?: Record<string, string>;
|
|
@@ -29,6 +29,7 @@ var Stepper = function Stepper(_ref) {
|
|
|
29
29
|
_ref$classes = _ref.classes,
|
|
30
30
|
_ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
|
|
31
31
|
rootClassName = _ref$classes2.root,
|
|
32
|
+
itemsWrapClassName = _ref$classes2.itemsWrap,
|
|
32
33
|
itemClassName = _ref$classes2.item,
|
|
33
34
|
itemIconButtonClassName = _ref$classes2.itemIconButton,
|
|
34
35
|
itemTitleClassName = _ref$classes2.itemTitle,
|
|
@@ -46,11 +47,14 @@ var Stepper = function Stepper(_ref) {
|
|
|
46
47
|
isNumeric = _ref.isNumeric,
|
|
47
48
|
isDisabled = _ref.isDisabled,
|
|
48
49
|
isAllChecked = _ref.isAllChecked,
|
|
50
|
+
_ref$showActiveStepCo = _ref.showActiveStepContent,
|
|
51
|
+
showActiveStepContent = _ref$showActiveStepCo === void 0 ? false : _ref$showActiveStepCo,
|
|
49
52
|
_ref$align = _ref.align,
|
|
50
53
|
align = _ref$align === void 0 ? 'center' : _ref$align,
|
|
51
54
|
_ref$dataAttrs = _ref.dataAttrs,
|
|
52
55
|
_ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
|
|
53
56
|
rootAttrs = _ref$dataAttrs2.root,
|
|
57
|
+
itemsWrapAttrs = _ref$dataAttrs2.itemsWrap,
|
|
54
58
|
itemAttrs = _ref$dataAttrs2.item,
|
|
55
59
|
itemIconButtonAttrs = _ref$dataAttrs2.itemIconButton,
|
|
56
60
|
itemTitleAttrs = _ref$dataAttrs2.itemTitle,
|
|
@@ -65,6 +69,7 @@ var Stepper = function Stepper(_ref) {
|
|
|
65
69
|
currentIndex = _React$useState2[0],
|
|
66
70
|
setCurrentIndex = _React$useState2[1];
|
|
67
71
|
var hasCustomItems = !!items.length;
|
|
72
|
+
var isHorizontalContent = isHorizontal || showActiveStepContent;
|
|
68
73
|
var currentItems = hasCustomItems ? items : Array.from({
|
|
69
74
|
length: stepCount
|
|
70
75
|
});
|
|
@@ -107,43 +112,53 @@ var Stepper = function Stepper(_ref) {
|
|
|
107
112
|
}
|
|
108
113
|
return /*#__PURE__*/React.createElement(CheckedIcon, null);
|
|
109
114
|
}, [isNumeric]);
|
|
115
|
+
var renderItem = React.useCallback(function (props) {
|
|
116
|
+
return /*#__PURE__*/React.createElement(_StepperItem["default"], (0, _extends2["default"])({}, props, {
|
|
117
|
+
className: itemClassName,
|
|
118
|
+
classes: {
|
|
119
|
+
iconButton: itemIconButtonClassName,
|
|
120
|
+
title: itemTitleClassName,
|
|
121
|
+
text: itemTextClassname,
|
|
122
|
+
link: itemLinkClassName
|
|
123
|
+
},
|
|
124
|
+
dataAttrs: {
|
|
125
|
+
root: itemAttrs,
|
|
126
|
+
iconButton: itemIconButtonAttrs,
|
|
127
|
+
title: itemTitleAttrs,
|
|
128
|
+
text: itemTextAttrs,
|
|
129
|
+
link: itemLinkAttrs
|
|
130
|
+
}
|
|
131
|
+
}));
|
|
132
|
+
}, [itemAttrs, itemIconButtonAttrs, itemIconButtonClassName, itemClassName, itemLinkAttrs, itemLinkClassName, itemTextAttrs, itemTextClassname, itemTitleAttrs, itemTitleClassName]);
|
|
110
133
|
var renderItems = React.useMemo(function () {
|
|
111
134
|
return currentItems.map(function (elem, i) {
|
|
112
135
|
var item = elem || {};
|
|
113
136
|
var itemTheme = defineItemTheme(i);
|
|
114
137
|
var itemIcon = item.icon || renderIcon(i, itemTheme);
|
|
115
|
-
|
|
116
|
-
return /*#__PURE__*/React.createElement(_StepperItem["default"], (0, _extends2["default"])({}, item, {
|
|
117
|
-
className: itemClassName,
|
|
118
|
-
classes: {
|
|
119
|
-
iconButton: itemIconButtonClassName,
|
|
120
|
-
title: itemTitleClassName,
|
|
121
|
-
text: itemTextClassname,
|
|
122
|
-
link: itemLinkClassName
|
|
123
|
-
},
|
|
124
|
-
dataAttrs: {
|
|
125
|
-
root: itemAttrs,
|
|
126
|
-
iconButton: itemIconButtonAttrs,
|
|
127
|
-
title: itemTitleAttrs,
|
|
128
|
-
text: itemTextAttrs,
|
|
129
|
-
link: itemLinkAttrs
|
|
130
|
-
},
|
|
131
|
-
key: i,
|
|
138
|
+
return renderItem((0, _extends2["default"])((0, _extends2["default"])({}, item), {
|
|
132
139
|
icon: itemIcon,
|
|
133
|
-
hasSeparator:
|
|
134
|
-
isHorizontal:
|
|
140
|
+
hasSeparator: i < currentItems.length - 1,
|
|
141
|
+
isHorizontal: isHorizontalContent,
|
|
135
142
|
isDisabled: isDisabled,
|
|
136
143
|
align: align,
|
|
137
144
|
theme: itemTheme,
|
|
145
|
+
view: showActiveStepContent ? _StepperItem.STEPPER_ITEM_VIEW_ENUM.ICON : _StepperItem.STEPPER_ITEM_VIEW_ENUM.DEFAULT,
|
|
138
146
|
onClick: handleClickItem(i)
|
|
139
147
|
}));
|
|
140
148
|
});
|
|
141
|
-
}, [align, currentItems, isDisabled,
|
|
149
|
+
}, [align, currentItems, isDisabled, showActiveStepContent, isHorizontalContent, defineItemTheme, handleClickItem, renderIcon, renderItem]);
|
|
150
|
+
var renderSingleItem = renderItem((0, _extends2["default"])((0, _extends2["default"])({}, currentItems[currentIndex]), {
|
|
151
|
+
isDisabled: isDisabled,
|
|
152
|
+
align: align,
|
|
153
|
+
view: _StepperItem.STEPPER_ITEM_VIEW_ENUM.CONTENT
|
|
154
|
+
}));
|
|
142
155
|
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(rootAttrs), {
|
|
143
156
|
className: cn([className, rootClassName], {
|
|
144
|
-
'is-horizontal':
|
|
157
|
+
'is-horizontal': isHorizontalContent
|
|
145
158
|
}),
|
|
146
159
|
ref: rootRef
|
|
147
|
-
}),
|
|
160
|
+
}), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(itemsWrapAttrs), {
|
|
161
|
+
className: cn('items-wrap', [itemsWrapClassName])
|
|
162
|
+
}), renderItems), showActiveStepContent && renderSingleItem);
|
|
148
163
|
};
|
|
149
164
|
var _default = exports["default"] = Stepper;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-stepper-item{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:16px}.mfui-stepper-item_is-horizontal{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{-o-border-image:url(img/separator.png) 2
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-stepper-item{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:16px}.mfui-stepper-item_is-horizontal{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{-o-border-image:url(img/separator-mobile.png) 2 round;border-image:url(img/separator-mobile.png) 2 round;border-left:none;border-radius:100px;border-top:2px solid transparent;height:2px;left:calc(50% + 22px);min-height:2px;position:absolute;top:19px;width:calc(100% - 32px)}@media screen and (min-width:768px){.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{-o-border-image:url(img/separator.png) 2 repeat;border-image:url(img/separator.png) 2 repeat}}@media screen and (min-width:1024px){.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{left:calc(50% + 32px);width:calc(100% - 52px)}}.mfui-stepper-item_theme_active .mfui-stepper-item__icon-button{background-color:var(--night20)}.mfui-stepper-item_theme_active .mfui-stepper-item__icon{background-color:var(--night)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon-button{background-color:var(--brandGreen20)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon{background-color:var(--brandGreen)}.mfui-stepper-item_theme_checked .mfui-stepper-item__separator{border-color:var(--brandGreen);-o-border-image:none;border-image:none}.mfui-stepper-item_align_left{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item_align_left .mfui-stepper-item__separator{left:42px;right:0}@media screen and (min-width:1024px){.mfui-stepper-item_align_left .mfui-stepper-item__separator{left:auto}}.mfui-stepper-item_align_left .mfui-stepper-item__content,.mfui-stepper-item_align_left .mfui-stepper-item__icon-button-area{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item__icon-button-area{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;-ms-flex-align:center;-ms-flex-item-align:stretch;align-self:stretch}.mfui-stepper-item__icon-button,.mfui-stepper-item__icon-button-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.mfui-stepper-item__icon-button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky0);border-radius:100%;height:40px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:40px}.mfui-stepper-item__icon-button:disabled{cursor:default}.mfui-stepper-item__icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky2);border-radius:100%;color:var(--stcWhite);font-weight:500;height:24px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:24px}.mfui-stepper-item__icon svg{width:20px;fill:var(--stcWhite)}.mfui-stepper-item__separator{-o-border-image:url(img/separator-vertical.png) 2 repeat;border-image:url(img/separator-vertical.png) 2 repeat;border-left:2px solid transparent;border-top:none;height:100%;min-height:20px;position:static;-webkit-transition:border-color .25s ease-out;transition:border-color .25s ease-out;width:2px}.mfui-stepper-item__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:160px;padding-bottom:20px}.mfui-stepper-item__link{margin-top:13px}
|
|
@@ -5,6 +5,11 @@ export declare enum STEPPER_ITEM_THEME_ENUM {
|
|
|
5
5
|
ACTIVE = "active",
|
|
6
6
|
DEFAULT = "default"
|
|
7
7
|
}
|
|
8
|
+
export declare enum STEPPER_ITEM_VIEW_ENUM {
|
|
9
|
+
ICON = "icon",
|
|
10
|
+
CONTENT = "content",
|
|
11
|
+
DEFAULT = "default"
|
|
12
|
+
}
|
|
8
13
|
export interface IStepperItemProps {
|
|
9
14
|
/** Дополнительный класс корневого элемента */
|
|
10
15
|
className?: string;
|
|
@@ -35,6 +40,8 @@ export interface IStepperItemProps {
|
|
|
35
40
|
isDisabled?: boolean;
|
|
36
41
|
/** Выравнивание */
|
|
37
42
|
align?: 'center' | 'left';
|
|
43
|
+
/** Варианты отображения */
|
|
44
|
+
view?: STEPPER_ITEM_VIEW_ENUM;
|
|
38
45
|
/** Дополнительные data атрибуты к внутренним элементам */
|
|
39
46
|
dataAttrs?: {
|
|
40
47
|
root?: Record<string, string>;
|
|
@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports["default"] = exports.STEPPER_ITEM_THEME_ENUM = void 0;
|
|
7
|
+
exports["default"] = exports.STEPPER_ITEM_VIEW_ENUM = exports.STEPPER_ITEM_THEME_ENUM = void 0;
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
9
|
require("core-js/modules/es.string.link.js");
|
|
10
10
|
var React = _interopRequireWildcard(require("react"));
|
|
@@ -19,6 +19,12 @@ var STEPPER_ITEM_THEME_ENUM;
|
|
|
19
19
|
STEPPER_ITEM_THEME_ENUM["ACTIVE"] = "active";
|
|
20
20
|
STEPPER_ITEM_THEME_ENUM["DEFAULT"] = "default";
|
|
21
21
|
})(STEPPER_ITEM_THEME_ENUM || (exports.STEPPER_ITEM_THEME_ENUM = STEPPER_ITEM_THEME_ENUM = {}));
|
|
22
|
+
var STEPPER_ITEM_VIEW_ENUM;
|
|
23
|
+
(function (STEPPER_ITEM_VIEW_ENUM) {
|
|
24
|
+
STEPPER_ITEM_VIEW_ENUM["ICON"] = "icon";
|
|
25
|
+
STEPPER_ITEM_VIEW_ENUM["CONTENT"] = "content";
|
|
26
|
+
STEPPER_ITEM_VIEW_ENUM["DEFAULT"] = "default";
|
|
27
|
+
})(STEPPER_ITEM_VIEW_ENUM || (exports.STEPPER_ITEM_VIEW_ENUM = STEPPER_ITEM_VIEW_ENUM = {}));
|
|
22
28
|
var cn = (0, _uiHelpers.cnCreate)('mfui-stepper-item');
|
|
23
29
|
var StepperItem = function StepperItem(_ref) {
|
|
24
30
|
var className = _ref.className,
|
|
@@ -29,7 +35,7 @@ var StepperItem = function StepperItem(_ref) {
|
|
|
29
35
|
textClassName = _ref$classes2.text,
|
|
30
36
|
linkClassName = _ref$classes2.link,
|
|
31
37
|
_ref$theme = _ref.theme,
|
|
32
|
-
theme = _ref$theme === void 0 ?
|
|
38
|
+
theme = _ref$theme === void 0 ? STEPPER_ITEM_THEME_ENUM.DEFAULT : _ref$theme,
|
|
33
39
|
title = _ref.title,
|
|
34
40
|
text = _ref.text,
|
|
35
41
|
linkText = _ref.linkText,
|
|
@@ -41,6 +47,8 @@ var StepperItem = function StepperItem(_ref) {
|
|
|
41
47
|
isDisabled = _ref.isDisabled,
|
|
42
48
|
_ref$align = _ref.align,
|
|
43
49
|
align = _ref$align === void 0 ? 'center' : _ref$align,
|
|
50
|
+
_ref$view = _ref.view,
|
|
51
|
+
view = _ref$view === void 0 ? STEPPER_ITEM_VIEW_ENUM.DEFAULT : _ref$view,
|
|
44
52
|
_ref$dataAttrs = _ref.dataAttrs,
|
|
45
53
|
_ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
|
|
46
54
|
rootAttrs = _ref$dataAttrs2.root,
|
|
@@ -51,6 +59,8 @@ var StepperItem = function StepperItem(_ref) {
|
|
|
51
59
|
onClick = _ref.onClick;
|
|
52
60
|
var hasLink = !!linkText && !!linkUrl;
|
|
53
61
|
var hasContent = !!title || !!text || hasLink;
|
|
62
|
+
var showContent = view !== STEPPER_ITEM_VIEW_ENUM.ICON && hasContent;
|
|
63
|
+
var showIcon = view !== STEPPER_ITEM_VIEW_ENUM.CONTENT;
|
|
54
64
|
var renderContent = /*#__PURE__*/React.createElement("div", {
|
|
55
65
|
className: cn('content')
|
|
56
66
|
}, title && /*#__PURE__*/React.createElement(_uiCore.Header, {
|
|
@@ -78,11 +88,11 @@ var StepperItem = function StepperItem(_ref) {
|
|
|
78
88
|
}, linkText));
|
|
79
89
|
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(rootAttrs), {
|
|
80
90
|
className: cn([className], {
|
|
81
|
-
'is-horizontal': isHorizontal,
|
|
82
91
|
theme: theme,
|
|
83
|
-
align: align
|
|
92
|
+
align: align,
|
|
93
|
+
'is-horizontal': isHorizontal
|
|
84
94
|
})
|
|
85
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
95
|
+
}), showIcon && /*#__PURE__*/React.createElement("div", {
|
|
86
96
|
className: cn('icon-button-area')
|
|
87
97
|
}, /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(iconButtonAttrs), {
|
|
88
98
|
className: cn('icon-button', [iconButtonClassName]),
|
|
@@ -93,6 +103,6 @@ var StepperItem = function StepperItem(_ref) {
|
|
|
93
103
|
className: cn('icon')
|
|
94
104
|
}, icon)), hasSeparator && /*#__PURE__*/React.createElement("span", {
|
|
95
105
|
className: cn('separator')
|
|
96
|
-
})),
|
|
106
|
+
})), showContent && renderContent);
|
|
97
107
|
};
|
|
98
108
|
var _default = exports["default"] = StepperItem;
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@megafon/ui-shared",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.6.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist"
|
|
6
6
|
],
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"lodash.throttle": "^4.1.1",
|
|
86
86
|
"swiper": "^11.1.1"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "af9a564fdf22e9eb215fb59d36d45bb0c44570c4"
|
|
89
89
|
}
|