@megafon/ui-shared 9.0.0-alpha.2 → 9.0.0-alpha.21
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/AccordionBox/AccordionBox.d.ts +3 -1
- package/dist/es/components/BenefitCards/BenefitCard/BenefitCard.css +1 -0
- package/dist/es/components/BenefitCards/BenefitCard/BenefitCard.d.ts +13 -0
- package/dist/es/components/BenefitCards/BenefitCard/BenefitCard.js +59 -0
- package/dist/es/components/BenefitCards/BenefitCards.css +1 -0
- package/dist/es/components/BenefitCards/BenefitCards.d.ts +27 -0
- package/dist/es/components/BenefitCards/BenefitCards.js +35 -0
- package/dist/es/components/BenefitCards/helpers.d.ts +1 -0
- package/dist/es/components/BenefitCards/helpers.js +19 -0
- package/dist/es/components/BenefitCards/types.d.ts +24 -0
- package/dist/es/components/BenefitCards/types.js +1 -0
- package/dist/es/components/BlogBox/BlogBox.d.ts +3 -0
- package/dist/es/components/BlogBox/BlogBox.js +8 -3
- package/dist/es/components/BlogBox/components/BlogBoxTile.css +1 -1
- package/dist/es/components/BlogBox/components/BlogBoxTile.d.ts +5 -1
- package/dist/es/components/BlogBox/components/BlogBoxTile.js +3 -2
- package/dist/es/components/Breadcrumbs/Breadcrumbs.d.ts +2 -0
- package/dist/es/components/Breadcrumbs/Breadcrumbs.js +3 -0
- package/dist/es/components/Breadcrumbs/components/BreadcrumbsItem.d.ts +1 -0
- package/dist/es/components/Breadcrumbs/components/BreadcrumbsItem.js +18 -13
- package/dist/es/components/Card/Card.css +1 -1
- package/dist/es/components/Card/Card.d.ts +2 -1
- package/dist/es/components/Card/Card.js +23 -16
- package/dist/es/components/Card/types.d.ts +3 -5
- package/dist/es/components/CardsOnBackground/CardsOnBackground.css +1 -0
- package/dist/es/components/CardsOnBackground/CardsOnBackground.d.ts +34 -0
- package/dist/es/components/CardsOnBackground/CardsOnBackground.js +99 -0
- package/dist/es/components/CardsOnBackground/components/CardOnBackground.css +1 -0
- package/dist/es/components/CardsOnBackground/components/CardOnBackground.d.ts +22 -0
- package/dist/es/components/CardsOnBackground/components/CardOnBackground.js +94 -0
- package/dist/es/components/CardsOnBackground/types.d.ts +42 -0
- package/dist/es/components/CardsOnBackground/types.js +6 -0
- package/dist/es/components/CardsOnBackground/useUniformHeights.d.ts +9 -0
- package/dist/es/components/CardsOnBackground/useUniformHeights.js +88 -0
- package/dist/es/components/Container/Container.css +1 -1
- package/dist/es/components/Container/Container.d.ts +4 -0
- package/dist/es/components/Container/Container.js +4 -1
- package/dist/es/components/DarkGradientCards/DarkGradientCards.d.ts +5 -0
- package/dist/es/components/DarkGradientCards/DarkGradientCards.js +9 -4
- package/dist/es/components/DarkGradientCards/components/DarkGradientCard.css +1 -1
- package/dist/es/components/DarkGradientCards/components/DarkGradientCard.d.ts +1 -0
- package/dist/es/components/DarkGradientCards/components/DarkGradientCard.js +1 -1
- package/dist/es/components/DownloadLinks/DownloadLink.css +1 -1
- package/dist/es/components/DownloadLinks/DownloadLink.js +3 -1
- package/dist/es/components/InfoCards/components/InfoCard/InfoCard.css +1 -1
- package/dist/es/components/InfoCards/components/InfoCard/InfoCard.js +4 -2
- package/dist/es/components/Instructions/Instructions.css +1 -1
- package/dist/es/components/Instructions/Instructions.d.ts +0 -2
- package/dist/es/components/Instructions/Instructions.js +19 -22
- package/dist/es/components/NotificationBox/NotificationBox.d.ts +1 -1
- package/dist/es/components/NotificationBox/NotificationBox.js +1 -4
- package/dist/es/components/Partners/Partners.css +1 -1
- package/dist/es/components/Partners/Partners.d.ts +3 -8
- package/dist/es/components/Partners/Partners.js +20 -31
- package/dist/es/components/Partners/components/PartnersItem/PartnersItem.css +1 -0
- package/dist/es/components/Partners/components/PartnersItem/PartnersItem.d.ts +12 -0
- package/dist/es/components/Partners/components/PartnersItem/PartnersItem.js +33 -0
- package/dist/es/components/Partners/types.d.ts +7 -0
- package/dist/es/components/Partners/types.js +1 -0
- package/dist/es/components/PictureBox/PictureBox.d.ts +1 -0
- package/dist/es/components/PictureBox/PictureBox.js +2 -0
- package/dist/es/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.d.ts +2 -0
- package/dist/es/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.js +2 -0
- package/dist/es/components/PromoCards/PromoCards.d.ts +3 -0
- package/dist/es/components/PromoCards/PromoCards.js +6 -1
- package/dist/es/components/PromoCards/components/PromoCard/PromoCard.css +1 -1
- package/dist/es/components/PromoCards/components/PromoCard/PromoCard.d.ts +2 -0
- package/dist/es/components/PromoCards/components/PromoCard/PromoCard.js +17 -9
- package/dist/es/components/ServiceCards/components/ServiceCard/ServiceCard.css +1 -1
- package/dist/es/components/ServiceCards/components/ServiceCard/ServiceCard.js +1 -1
- package/dist/es/components/SidePictureCards/SidePictureCards.d.ts +5 -0
- package/dist/es/components/SidePictureCards/SidePictureCards.js +5 -2
- package/dist/es/components/SidePictureCards/components/SidePictureCard.d.ts +2 -0
- package/dist/es/components/SidePictureCards/components/SidePictureCard.js +8 -3
- package/dist/es/components/SidePictureCards/types.d.ts +3 -1
- package/dist/es/components/StepperBox/StepperBox.d.ts +11 -0
- package/dist/es/components/StepperBox/StepperBox.js +36 -0
- package/dist/es/components/Steps/Steps.css +1 -1
- package/dist/es/components/Steps/Steps.d.ts +2 -2
- package/dist/es/components/Steps/Steps.js +1 -1
- package/dist/es/components/StoreBanner/StoreBanner.css +1 -1
- package/dist/es/components/StoreBanner/StoreBanner.d.ts +1 -5
- package/dist/es/components/StoreBanner/StoreBanner.js +1 -5
- package/dist/es/components/StoreButton/StoreButton.css +1 -1
- package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.css +1 -1
- package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.d.ts +27 -1
- package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.js +31 -24
- package/dist/es/hooks/useIsomorphicLayoutEffect.d.ts +3 -0
- package/dist/es/hooks/useIsomorphicLayoutEffect.js +6 -0
- package/dist/es/index.d.ts +7 -2
- package/dist/es/index.js +7 -2
- package/dist/lib/components/AccordionBox/AccordionBox.d.ts +3 -1
- package/dist/lib/components/BenefitCards/BenefitCard/BenefitCard.css +1 -0
- package/dist/lib/components/BenefitCards/BenefitCard/BenefitCard.d.ts +13 -0
- package/dist/lib/components/BenefitCards/BenefitCard/BenefitCard.js +68 -0
- package/dist/lib/components/BenefitCards/BenefitCards.css +1 -0
- package/dist/lib/components/BenefitCards/BenefitCards.d.ts +27 -0
- package/dist/lib/components/BenefitCards/BenefitCards.js +44 -0
- package/dist/lib/components/BenefitCards/helpers.d.ts +1 -0
- package/dist/lib/components/BenefitCards/helpers.js +26 -0
- package/dist/lib/components/BenefitCards/types.d.ts +24 -0
- package/dist/lib/components/BenefitCards/types.js +5 -0
- package/dist/lib/components/BlogBox/BlogBox.d.ts +3 -0
- package/dist/lib/components/BlogBox/BlogBox.js +8 -3
- package/dist/lib/components/BlogBox/components/BlogBoxTile.css +1 -1
- package/dist/lib/components/BlogBox/components/BlogBoxTile.d.ts +5 -1
- package/dist/lib/components/BlogBox/components/BlogBoxTile.js +3 -2
- package/dist/lib/components/Breadcrumbs/Breadcrumbs.d.ts +2 -0
- package/dist/lib/components/Breadcrumbs/Breadcrumbs.js +3 -0
- package/dist/lib/components/Breadcrumbs/components/BreadcrumbsItem.d.ts +1 -0
- package/dist/lib/components/Breadcrumbs/components/BreadcrumbsItem.js +18 -13
- package/dist/lib/components/Card/Card.css +1 -1
- package/dist/lib/components/Card/Card.d.ts +2 -1
- package/dist/lib/components/Card/Card.js +22 -15
- package/dist/lib/components/Card/types.d.ts +3 -5
- package/dist/lib/components/CardsOnBackground/CardsOnBackground.css +1 -0
- package/dist/lib/components/CardsOnBackground/CardsOnBackground.d.ts +34 -0
- package/dist/lib/components/CardsOnBackground/CardsOnBackground.js +108 -0
- package/dist/lib/components/CardsOnBackground/components/CardOnBackground.css +1 -0
- package/dist/lib/components/CardsOnBackground/components/CardOnBackground.d.ts +22 -0
- package/dist/lib/components/CardsOnBackground/components/CardOnBackground.js +100 -0
- package/dist/lib/components/CardsOnBackground/types.d.ts +42 -0
- package/dist/lib/components/CardsOnBackground/types.js +12 -0
- package/dist/lib/components/CardsOnBackground/useUniformHeights.d.ts +9 -0
- package/dist/lib/components/CardsOnBackground/useUniformHeights.js +95 -0
- package/dist/lib/components/Container/Container.css +1 -1
- package/dist/lib/components/Container/Container.d.ts +4 -0
- package/dist/lib/components/Container/Container.js +4 -1
- package/dist/lib/components/DarkGradientCards/DarkGradientCards.d.ts +5 -0
- package/dist/lib/components/DarkGradientCards/DarkGradientCards.js +9 -4
- package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.css +1 -1
- package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.d.ts +1 -0
- package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.js +1 -1
- package/dist/lib/components/DownloadLinks/DownloadLink.css +1 -1
- package/dist/lib/components/DownloadLinks/DownloadLink.js +3 -1
- package/dist/lib/components/InfoCards/components/InfoCard/InfoCard.css +1 -1
- package/dist/lib/components/InfoCards/components/InfoCard/InfoCard.js +4 -2
- package/dist/lib/components/Instructions/Instructions.css +1 -1
- package/dist/lib/components/Instructions/Instructions.d.ts +0 -2
- package/dist/lib/components/Instructions/Instructions.js +19 -21
- package/dist/lib/components/NotificationBox/NotificationBox.d.ts +1 -1
- package/dist/lib/components/NotificationBox/NotificationBox.js +1 -5
- package/dist/lib/components/Partners/Partners.css +1 -1
- package/dist/lib/components/Partners/Partners.d.ts +3 -8
- package/dist/lib/components/Partners/Partners.js +19 -30
- package/dist/lib/components/Partners/components/PartnersItem/PartnersItem.css +1 -0
- package/dist/lib/components/Partners/components/PartnersItem/PartnersItem.d.ts +12 -0
- package/dist/lib/components/Partners/components/PartnersItem/PartnersItem.js +42 -0
- package/dist/lib/components/Partners/types.d.ts +7 -0
- package/dist/lib/components/Partners/types.js +5 -0
- package/dist/lib/components/PictureBox/PictureBox.d.ts +1 -0
- package/dist/lib/components/PictureBox/PictureBox.js +2 -0
- package/dist/lib/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.d.ts +2 -0
- package/dist/lib/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.js +2 -0
- package/dist/lib/components/PromoCards/PromoCards.d.ts +3 -0
- package/dist/lib/components/PromoCards/PromoCards.js +6 -1
- package/dist/lib/components/PromoCards/components/PromoCard/PromoCard.css +1 -1
- package/dist/lib/components/PromoCards/components/PromoCard/PromoCard.d.ts +2 -0
- package/dist/lib/components/PromoCards/components/PromoCard/PromoCard.js +16 -9
- package/dist/lib/components/ServiceCards/components/ServiceCard/ServiceCard.css +1 -1
- package/dist/lib/components/ServiceCards/components/ServiceCard/ServiceCard.js +1 -1
- package/dist/lib/components/SidePictureCards/SidePictureCards.d.ts +5 -0
- package/dist/lib/components/SidePictureCards/SidePictureCards.js +5 -2
- package/dist/lib/components/SidePictureCards/components/SidePictureCard.d.ts +2 -0
- package/dist/lib/components/SidePictureCards/components/SidePictureCard.js +8 -3
- package/dist/lib/components/SidePictureCards/types.d.ts +3 -1
- package/dist/lib/components/StepperBox/StepperBox.d.ts +11 -0
- package/dist/lib/components/StepperBox/StepperBox.js +46 -0
- package/dist/lib/components/Steps/Steps.css +1 -1
- package/dist/lib/components/Steps/Steps.d.ts +2 -2
- package/dist/lib/components/Steps/Steps.js +1 -1
- package/dist/lib/components/StoreBanner/StoreBanner.css +1 -1
- package/dist/lib/components/StoreBanner/StoreBanner.d.ts +1 -5
- package/dist/lib/components/StoreBanner/StoreBanner.js +1 -5
- package/dist/lib/components/StoreButton/StoreButton.css +1 -1
- package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.css +1 -1
- package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.d.ts +27 -1
- package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.js +30 -23
- package/dist/lib/hooks/useIsomorphicLayoutEffect.d.ts +3 -0
- package/dist/lib/hooks/useIsomorphicLayoutEffect.js +13 -0
- package/dist/lib/index.d.ts +7 -2
- package/dist/lib/index.js +45 -10
- package/package.json +6 -6
- package/dist/es/components/Stepper/Stepper.css +0 -1
- package/dist/es/components/Stepper/Stepper.d.ts +0 -52
- package/dist/es/components/Stepper/Stepper.js +0 -159
- package/dist/es/components/Stepper/StepperItem.css +0 -1
- package/dist/es/components/Stepper/StepperItem.d.ts +0 -57
- package/dist/es/components/Stepper/StepperItem.js +0 -99
- package/dist/es/components/Stepper/img/separator-mobile.png +0 -0
- package/dist/es/components/Stepper/img/separator-vertical.png +0 -0
- package/dist/es/components/Stepper/img/separator.png +0 -0
- package/dist/es/components/StoreBanner/img/black-iphone.png +0 -0
- package/dist/es/components/StoreBanner/img/iphone12.png +0 -0
- package/dist/es/components/StoreBanner/img/white-iphone.png +0 -0
- package/dist/lib/components/Stepper/Stepper.css +0 -1
- package/dist/lib/components/Stepper/Stepper.d.ts +0 -52
- package/dist/lib/components/Stepper/Stepper.js +0 -168
- package/dist/lib/components/Stepper/StepperItem.css +0 -1
- package/dist/lib/components/Stepper/StepperItem.d.ts +0 -57
- package/dist/lib/components/Stepper/StepperItem.js +0 -108
- package/dist/lib/components/Stepper/img/separator-mobile.png +0 -0
- package/dist/lib/components/Stepper/img/separator-vertical.png +0 -0
- package/dist/lib/components/Stepper/img/separator.png +0 -0
- package/dist/lib/components/StoreBanner/img/black-iphone.png +0 -0
- package/dist/lib/components/StoreBanner/img/iphone12.png +0 -0
- package/dist/lib/components/StoreBanner/img/white-iphone.png +0 -0
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import "core-js/modules/es.string.link.js";
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { Button, Header, Paragraph } from '@megafon/ui-core';
|
|
5
|
-
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
|
6
|
-
import "./StepperItem.css";
|
|
7
|
-
export var STEPPER_ITEM_THEME_ENUM;
|
|
8
|
-
(function (STEPPER_ITEM_THEME_ENUM) {
|
|
9
|
-
STEPPER_ITEM_THEME_ENUM["CHECKED"] = "checked";
|
|
10
|
-
STEPPER_ITEM_THEME_ENUM["ACTIVE"] = "active";
|
|
11
|
-
STEPPER_ITEM_THEME_ENUM["DEFAULT"] = "default";
|
|
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 = {}));
|
|
19
|
-
var cn = cnCreate('mfui-9-stepper-item');
|
|
20
|
-
var StepperItem = function StepperItem(_ref) {
|
|
21
|
-
var className = _ref.className,
|
|
22
|
-
_ref$classes = _ref.classes,
|
|
23
|
-
_ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
|
|
24
|
-
iconButtonClassName = _ref$classes2.iconButton,
|
|
25
|
-
titleClassName = _ref$classes2.title,
|
|
26
|
-
textClassName = _ref$classes2.text,
|
|
27
|
-
linkClassName = _ref$classes2.link,
|
|
28
|
-
_ref$theme = _ref.theme,
|
|
29
|
-
theme = _ref$theme === void 0 ? STEPPER_ITEM_THEME_ENUM.DEFAULT : _ref$theme,
|
|
30
|
-
title = _ref.title,
|
|
31
|
-
text = _ref.text,
|
|
32
|
-
linkText = _ref.linkText,
|
|
33
|
-
linkUrl = _ref.linkUrl,
|
|
34
|
-
icon = _ref.icon,
|
|
35
|
-
hasSeparator = _ref.hasSeparator,
|
|
36
|
-
_ref$isHorizontal = _ref.isHorizontal,
|
|
37
|
-
isHorizontal = _ref$isHorizontal === void 0 ? true : _ref$isHorizontal,
|
|
38
|
-
isDisabled = _ref.isDisabled,
|
|
39
|
-
_ref$align = _ref.align,
|
|
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,
|
|
43
|
-
_ref$dataAttrs = _ref.dataAttrs,
|
|
44
|
-
_ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
|
|
45
|
-
rootAttrs = _ref$dataAttrs2.root,
|
|
46
|
-
iconButtonAttrs = _ref$dataAttrs2.iconButton,
|
|
47
|
-
titleAttrs = _ref$dataAttrs2.title,
|
|
48
|
-
textAttrs = _ref$dataAttrs2.text,
|
|
49
|
-
linkAttrs = _ref$dataAttrs2.link,
|
|
50
|
-
onClick = _ref.onClick;
|
|
51
|
-
var hasLink = !!linkText && !!linkUrl;
|
|
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;
|
|
55
|
-
var renderContent = /*#__PURE__*/React.createElement("div", {
|
|
56
|
-
className: cn('content')
|
|
57
|
-
}, title && /*#__PURE__*/React.createElement(Header, {
|
|
58
|
-
className: cn([titleClassName]),
|
|
59
|
-
dataAttrs: {
|
|
60
|
-
root: titleAttrs
|
|
61
|
-
},
|
|
62
|
-
as: "h5",
|
|
63
|
-
align: align
|
|
64
|
-
}, title), text && /*#__PURE__*/React.createElement(Paragraph, {
|
|
65
|
-
className: cn([textClassName]),
|
|
66
|
-
dataAttrs: {
|
|
67
|
-
root: textAttrs
|
|
68
|
-
},
|
|
69
|
-
hasMargin: false,
|
|
70
|
-
align: align
|
|
71
|
-
}, text), hasLink && /*#__PURE__*/React.createElement(Button, {
|
|
72
|
-
className: cn('link', [linkClassName]),
|
|
73
|
-
dataAttrs: {
|
|
74
|
-
root: linkAttrs
|
|
75
|
-
},
|
|
76
|
-
href: linkUrl,
|
|
77
|
-
type: "text",
|
|
78
|
-
sizeAll: "extra-small"
|
|
79
|
-
}, linkText));
|
|
80
|
-
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(rootAttrs), {
|
|
81
|
-
className: cn([className], {
|
|
82
|
-
theme: theme,
|
|
83
|
-
align: align,
|
|
84
|
-
'is-horizontal': isHorizontal
|
|
85
|
-
})
|
|
86
|
-
}), showIcon && /*#__PURE__*/React.createElement("div", {
|
|
87
|
-
className: cn('icon-button-area')
|
|
88
|
-
}, /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(iconButtonAttrs), {
|
|
89
|
-
className: cn('icon-button', [iconButtonClassName]),
|
|
90
|
-
type: "button",
|
|
91
|
-
disabled: isDisabled,
|
|
92
|
-
onClick: onClick
|
|
93
|
-
}), /*#__PURE__*/React.createElement("span", {
|
|
94
|
-
className: cn('icon')
|
|
95
|
-
}, icon)), hasSeparator && /*#__PURE__*/React.createElement("span", {
|
|
96
|
-
className: cn('separator')
|
|
97
|
-
})), showContent && renderContent);
|
|
98
|
-
};
|
|
99
|
-
export default StepperItem;
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-9-stepper{gap:16px}.mfui-9-stepper,.mfui-9-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-9-stepper__items-wrap{gap:12px;overflow-x:auto}.mfui-9-stepper::-webkit-scrollbar{height:8px}.mfui-9-stepper::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:8px}.mfui-9-stepper_is-horizontal .mfui-9-stepper__items-wrap{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { IStepperItemProps } from './StepperItem';
|
|
3
|
-
import './Stepper.scss';
|
|
4
|
-
export type StepperItemType = Pick<IStepperItemProps, 'title' | 'text' | 'icon' | 'linkText' | 'linkUrl'>;
|
|
5
|
-
export interface IStepperProps {
|
|
6
|
-
/** Дополнительный класс корневого элемента */
|
|
7
|
-
className?: string;
|
|
8
|
-
/** Дополнительные классы элементов */
|
|
9
|
-
classes?: {
|
|
10
|
-
root?: string;
|
|
11
|
-
itemsWrap?: string;
|
|
12
|
-
item?: string;
|
|
13
|
-
itemIconButton?: string;
|
|
14
|
-
itemTitle?: string;
|
|
15
|
-
itemText?: string;
|
|
16
|
-
itemLink?: string;
|
|
17
|
-
};
|
|
18
|
-
/** Ссылка на корневой элемент */
|
|
19
|
-
rootRef?: React.Ref<HTMLDivElement>;
|
|
20
|
-
/** Индекс активного шага */
|
|
21
|
-
activeStep?: number;
|
|
22
|
-
/** Количество шагов */
|
|
23
|
-
stepCount?: number;
|
|
24
|
-
/** Шаги */
|
|
25
|
-
items?: StepperItemType[];
|
|
26
|
-
/** Направление */
|
|
27
|
-
isHorizontal?: boolean;
|
|
28
|
-
/** Цифры вместо галочек */
|
|
29
|
-
isNumeric?: boolean;
|
|
30
|
-
/** Отключение кнопок */
|
|
31
|
-
isDisabled?: boolean;
|
|
32
|
-
/** Все шаги пройдены */
|
|
33
|
-
isAllChecked?: boolean;
|
|
34
|
-
/** Отображение контента только активного шага */
|
|
35
|
-
showActiveStepContent?: boolean;
|
|
36
|
-
/** Выравнивание */
|
|
37
|
-
align?: 'center' | 'left';
|
|
38
|
-
/** Дополнительные data атрибуты к внутренним элементам */
|
|
39
|
-
dataAttrs?: {
|
|
40
|
-
root?: Record<string, string>;
|
|
41
|
-
itemsWrap?: Record<string, string>;
|
|
42
|
-
item?: Record<string, string>;
|
|
43
|
-
itemIconButton?: Record<string, string>;
|
|
44
|
-
itemTitle?: Record<string, string>;
|
|
45
|
-
itemText?: Record<string, string>;
|
|
46
|
-
itemLink?: Record<string, string>;
|
|
47
|
-
};
|
|
48
|
-
/** Обработчик события смены шага */
|
|
49
|
-
onChange?: (index: number) => void;
|
|
50
|
-
}
|
|
51
|
-
declare const Stepper: React.FC<IStepperProps>;
|
|
52
|
-
export default Stepper;
|
|
@@ -1,168 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports["default"] = void 0;
|
|
8
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
|
-
require("core-js/modules/es.array.from.js");
|
|
11
|
-
require("core-js/modules/es.array.map.js");
|
|
12
|
-
require("core-js/modules/es.string.iterator.js");
|
|
13
|
-
var React = _interopRequireWildcard(require("react"));
|
|
14
|
-
var _uiHelpers = require("@megafon/ui-helpers");
|
|
15
|
-
var _StepperItem = _interopRequireWildcard(require("./StepperItem"));
|
|
16
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
17
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
18
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
19
|
-
var CheckedIcon = function CheckedIcon(props) {
|
|
20
|
-
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
21
|
-
viewBox: "0 0 20 20"
|
|
22
|
-
}, props), /*#__PURE__*/React.createElement("path", {
|
|
23
|
-
d: "M8.832 11.547L6.619 9.335l-1.414 1.413 2.462 2.462 1.445 1.446 5.932-8.486-1.638-1.148-4.574 6.525z"
|
|
24
|
-
}));
|
|
25
|
-
};
|
|
26
|
-
var cn = (0, _uiHelpers.cnCreate)('mfui-9-stepper');
|
|
27
|
-
var Stepper = function Stepper(_ref) {
|
|
28
|
-
var className = _ref.className,
|
|
29
|
-
_ref$classes = _ref.classes,
|
|
30
|
-
_ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
|
|
31
|
-
rootClassName = _ref$classes2.root,
|
|
32
|
-
itemsWrapClassName = _ref$classes2.itemsWrap,
|
|
33
|
-
itemClassName = _ref$classes2.item,
|
|
34
|
-
itemIconButtonClassName = _ref$classes2.itemIconButton,
|
|
35
|
-
itemTitleClassName = _ref$classes2.itemTitle,
|
|
36
|
-
itemTextClassname = _ref$classes2.itemText,
|
|
37
|
-
itemLinkClassName = _ref$classes2.itemLink,
|
|
38
|
-
rootRef = _ref.rootRef,
|
|
39
|
-
_ref$activeStep = _ref.activeStep,
|
|
40
|
-
activeStep = _ref$activeStep === void 0 ? 0 : _ref$activeStep,
|
|
41
|
-
_ref$stepCount = _ref.stepCount,
|
|
42
|
-
stepCount = _ref$stepCount === void 0 ? 2 : _ref$stepCount,
|
|
43
|
-
_ref$items = _ref.items,
|
|
44
|
-
items = _ref$items === void 0 ? [] : _ref$items,
|
|
45
|
-
_ref$isHorizontal = _ref.isHorizontal,
|
|
46
|
-
isHorizontal = _ref$isHorizontal === void 0 ? true : _ref$isHorizontal,
|
|
47
|
-
isNumeric = _ref.isNumeric,
|
|
48
|
-
isDisabled = _ref.isDisabled,
|
|
49
|
-
isAllChecked = _ref.isAllChecked,
|
|
50
|
-
_ref$showActiveStepCo = _ref.showActiveStepContent,
|
|
51
|
-
showActiveStepContent = _ref$showActiveStepCo === void 0 ? false : _ref$showActiveStepCo,
|
|
52
|
-
_ref$align = _ref.align,
|
|
53
|
-
align = _ref$align === void 0 ? 'center' : _ref$align,
|
|
54
|
-
_ref$dataAttrs = _ref.dataAttrs,
|
|
55
|
-
_ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
|
|
56
|
-
rootAttrs = _ref$dataAttrs2.root,
|
|
57
|
-
itemsWrapAttrs = _ref$dataAttrs2.itemsWrap,
|
|
58
|
-
itemAttrs = _ref$dataAttrs2.item,
|
|
59
|
-
itemIconButtonAttrs = _ref$dataAttrs2.itemIconButton,
|
|
60
|
-
itemTitleAttrs = _ref$dataAttrs2.itemTitle,
|
|
61
|
-
itemTextAttrs = _ref$dataAttrs2.itemText,
|
|
62
|
-
itemLinkAttrs = _ref$dataAttrs2.itemLink,
|
|
63
|
-
_ref$onChange = _ref.onChange,
|
|
64
|
-
onChange = _ref$onChange === void 0 ? function () {
|
|
65
|
-
return null;
|
|
66
|
-
} : _ref$onChange;
|
|
67
|
-
var _React$useState = React.useState(activeStep),
|
|
68
|
-
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
|
69
|
-
currentIndex = _React$useState2[0],
|
|
70
|
-
setCurrentIndex = _React$useState2[1];
|
|
71
|
-
var hasCustomItems = !!items.length;
|
|
72
|
-
var isHorizontalContent = isHorizontal || showActiveStepContent;
|
|
73
|
-
var currentItems = hasCustomItems ? items : Array.from({
|
|
74
|
-
length: stepCount
|
|
75
|
-
});
|
|
76
|
-
var isCorrectDisabled = React.useMemo(function () {
|
|
77
|
-
return !!isAllChecked || !!isDisabled;
|
|
78
|
-
}, [isAllChecked, isDisabled]);
|
|
79
|
-
var defineItemTheme = React.useCallback(function (index) {
|
|
80
|
-
switch (true) {
|
|
81
|
-
case isAllChecked:
|
|
82
|
-
case index < currentIndex:
|
|
83
|
-
{
|
|
84
|
-
return _StepperItem.STEPPER_ITEM_THEME_ENUM.CHECKED;
|
|
85
|
-
}
|
|
86
|
-
case index === currentIndex:
|
|
87
|
-
{
|
|
88
|
-
return _StepperItem.STEPPER_ITEM_THEME_ENUM.ACTIVE;
|
|
89
|
-
}
|
|
90
|
-
default:
|
|
91
|
-
{
|
|
92
|
-
return _StepperItem.STEPPER_ITEM_THEME_ENUM.DEFAULT;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
}, [currentIndex, isAllChecked]);
|
|
96
|
-
var handleClickItem = React.useCallback(function (index) {
|
|
97
|
-
return function () {
|
|
98
|
-
if (isCorrectDisabled) {
|
|
99
|
-
return;
|
|
100
|
-
}
|
|
101
|
-
setCurrentIndex(index);
|
|
102
|
-
onChange(index);
|
|
103
|
-
};
|
|
104
|
-
}, [isCorrectDisabled, onChange]);
|
|
105
|
-
React.useEffect(function () {
|
|
106
|
-
if (activeStep === undefined) {
|
|
107
|
-
return;
|
|
108
|
-
}
|
|
109
|
-
setCurrentIndex(activeStep);
|
|
110
|
-
}, [activeStep]);
|
|
111
|
-
var renderIcon = React.useCallback(function (index, theme) {
|
|
112
|
-
var isChecked = theme === _StepperItem.STEPPER_ITEM_THEME_ENUM.CHECKED;
|
|
113
|
-
if (isNumeric || !isChecked) {
|
|
114
|
-
return index + 1;
|
|
115
|
-
}
|
|
116
|
-
return /*#__PURE__*/React.createElement(CheckedIcon, null);
|
|
117
|
-
}, [isNumeric]);
|
|
118
|
-
var renderItem = React.useCallback(function (props, index) {
|
|
119
|
-
return /*#__PURE__*/React.createElement(_StepperItem["default"], (0, _extends2["default"])({}, props, {
|
|
120
|
-
key: index,
|
|
121
|
-
className: itemClassName,
|
|
122
|
-
classes: {
|
|
123
|
-
iconButton: itemIconButtonClassName,
|
|
124
|
-
title: itemTitleClassName,
|
|
125
|
-
text: itemTextClassname,
|
|
126
|
-
link: itemLinkClassName
|
|
127
|
-
},
|
|
128
|
-
dataAttrs: {
|
|
129
|
-
root: itemAttrs,
|
|
130
|
-
iconButton: itemIconButtonAttrs,
|
|
131
|
-
title: itemTitleAttrs,
|
|
132
|
-
text: itemTextAttrs,
|
|
133
|
-
link: itemLinkAttrs
|
|
134
|
-
}
|
|
135
|
-
}));
|
|
136
|
-
}, [itemAttrs, itemIconButtonAttrs, itemIconButtonClassName, itemClassName, itemLinkAttrs, itemLinkClassName, itemTextAttrs, itemTextClassname, itemTitleAttrs, itemTitleClassName]);
|
|
137
|
-
var renderItems = React.useMemo(function () {
|
|
138
|
-
return currentItems.map(function (elem, i) {
|
|
139
|
-
var item = elem || {};
|
|
140
|
-
var itemTheme = defineItemTheme(i);
|
|
141
|
-
var itemIcon = item.icon || renderIcon(i, itemTheme);
|
|
142
|
-
return renderItem((0, _extends2["default"])((0, _extends2["default"])({}, item), {
|
|
143
|
-
icon: itemIcon,
|
|
144
|
-
hasSeparator: i < currentItems.length - 1,
|
|
145
|
-
isHorizontal: isHorizontalContent,
|
|
146
|
-
isDisabled: isCorrectDisabled,
|
|
147
|
-
align: align,
|
|
148
|
-
theme: itemTheme,
|
|
149
|
-
view: showActiveStepContent ? _StepperItem.STEPPER_ITEM_VIEW_ENUM.ICON : _StepperItem.STEPPER_ITEM_VIEW_ENUM.DEFAULT,
|
|
150
|
-
onClick: handleClickItem(i)
|
|
151
|
-
}), i);
|
|
152
|
-
});
|
|
153
|
-
}, [align, currentItems, isCorrectDisabled, showActiveStepContent, isHorizontalContent, defineItemTheme, handleClickItem, renderIcon, renderItem]);
|
|
154
|
-
var renderSingleItem = renderItem((0, _extends2["default"])((0, _extends2["default"])({}, currentItems[currentIndex]), {
|
|
155
|
-
isDisabled: isCorrectDisabled,
|
|
156
|
-
align: align,
|
|
157
|
-
view: _StepperItem.STEPPER_ITEM_VIEW_ENUM.CONTENT
|
|
158
|
-
}));
|
|
159
|
-
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(rootAttrs), {
|
|
160
|
-
className: cn([className, rootClassName], {
|
|
161
|
-
'is-horizontal': isHorizontalContent
|
|
162
|
-
}),
|
|
163
|
-
ref: rootRef
|
|
164
|
-
}), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(itemsWrapAttrs), {
|
|
165
|
-
className: cn('items-wrap', [itemsWrapClassName])
|
|
166
|
-
}), renderItems), showActiveStepContent && renderSingleItem);
|
|
167
|
-
};
|
|
168
|
-
var _default = exports["default"] = Stepper;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-9-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-9-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-9-stepper-item_is-horizontal .mfui-9-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-9-stepper-item_is-horizontal .mfui-9-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-9-stepper-item_is-horizontal .mfui-9-stepper-item__separator{left:calc(50% + 32px);width:calc(100% - 52px)}}.mfui-9-stepper-item_theme_active .mfui-9-stepper-item__icon-button{background-color:var(--night20)}.mfui-9-stepper-item_theme_active .mfui-9-stepper-item__icon{background-color:var(--night)}.mfui-9-stepper-item_theme_checked .mfui-9-stepper-item__icon-button{background-color:var(--brandGreen20)}.mfui-9-stepper-item_theme_checked .mfui-9-stepper-item__icon{background-color:var(--brandGreen)}.mfui-9-stepper-item_theme_checked .mfui-9-stepper-item__separator{border-color:var(--brandGreen);-o-border-image:none;border-image:none}.mfui-9-stepper-item_align_left{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-9-stepper-item_align_left .mfui-9-stepper-item__separator{left:42px;right:0}@media screen and (min-width:1024px){.mfui-9-stepper-item_align_left .mfui-9-stepper-item__separator{left:auto}}.mfui-9-stepper-item_align_left .mfui-9-stepper-item__content,.mfui-9-stepper-item_align_left .mfui-9-stepper-item__icon-button-area{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-9-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-9-stepper-item__icon-button,.mfui-9-stepper-item__icon-button-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.mfui-9-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:none;border-radius:100%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:40px;justify-content:center;outline:none;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:40px}.mfui-9-stepper-item__icon-button:disabled{cursor:default}.mfui-9-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-9-stepper-item__icon svg{height:20px;width:20px;fill:var(--stcWhite)}.mfui-9-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-9-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-9-stepper-item__link{margin-top:13px}
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import './StepperItem.scss';
|
|
3
|
-
export declare enum STEPPER_ITEM_THEME_ENUM {
|
|
4
|
-
CHECKED = "checked",
|
|
5
|
-
ACTIVE = "active",
|
|
6
|
-
DEFAULT = "default"
|
|
7
|
-
}
|
|
8
|
-
export declare enum STEPPER_ITEM_VIEW_ENUM {
|
|
9
|
-
ICON = "icon",
|
|
10
|
-
CONTENT = "content",
|
|
11
|
-
DEFAULT = "default"
|
|
12
|
-
}
|
|
13
|
-
export interface IStepperItemProps {
|
|
14
|
-
/** Дополнительный класс корневого элемента */
|
|
15
|
-
className?: string;
|
|
16
|
-
/** Дополнительные классы элементов */
|
|
17
|
-
classes?: {
|
|
18
|
-
iconButton?: string;
|
|
19
|
-
title?: string;
|
|
20
|
-
text?: string;
|
|
21
|
-
link?: string;
|
|
22
|
-
};
|
|
23
|
-
/** Тема */
|
|
24
|
-
theme?: STEPPER_ITEM_THEME_ENUM;
|
|
25
|
-
/** Заголовок */
|
|
26
|
-
title?: string;
|
|
27
|
-
/** Текст */
|
|
28
|
-
text?: string;
|
|
29
|
-
/** Текст ссылки */
|
|
30
|
-
linkText?: string;
|
|
31
|
-
/** Адрес ссылки */
|
|
32
|
-
linkUrl?: string;
|
|
33
|
-
/** Иконка */
|
|
34
|
-
icon?: string | number | JSX.Element;
|
|
35
|
-
/** Наличие разделителя */
|
|
36
|
-
hasSeparator?: boolean;
|
|
37
|
-
/** Направление */
|
|
38
|
-
isHorizontal?: boolean;
|
|
39
|
-
/** Отключение */
|
|
40
|
-
isDisabled?: boolean;
|
|
41
|
-
/** Выравнивание */
|
|
42
|
-
align?: 'center' | 'left';
|
|
43
|
-
/** Варианты отображения */
|
|
44
|
-
view?: STEPPER_ITEM_VIEW_ENUM;
|
|
45
|
-
/** Дополнительные data атрибуты к внутренним элементам */
|
|
46
|
-
dataAttrs?: {
|
|
47
|
-
root?: Record<string, string>;
|
|
48
|
-
iconButton?: Record<string, string>;
|
|
49
|
-
title?: Record<string, string>;
|
|
50
|
-
text?: Record<string, string>;
|
|
51
|
-
link?: Record<string, string>;
|
|
52
|
-
};
|
|
53
|
-
/** Обработчик события клика */
|
|
54
|
-
onClick?: () => void;
|
|
55
|
-
}
|
|
56
|
-
declare const StepperItem: React.FC<IStepperItemProps>;
|
|
57
|
-
export default StepperItem;
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports["default"] = exports.STEPPER_ITEM_VIEW_ENUM = exports.STEPPER_ITEM_THEME_ENUM = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
require("core-js/modules/es.string.link.js");
|
|
10
|
-
var React = _interopRequireWildcard(require("react"));
|
|
11
|
-
var _uiCore = require("@megafon/ui-core");
|
|
12
|
-
var _uiHelpers = require("@megafon/ui-helpers");
|
|
13
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
14
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
15
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
16
|
-
var STEPPER_ITEM_THEME_ENUM;
|
|
17
|
-
(function (STEPPER_ITEM_THEME_ENUM) {
|
|
18
|
-
STEPPER_ITEM_THEME_ENUM["CHECKED"] = "checked";
|
|
19
|
-
STEPPER_ITEM_THEME_ENUM["ACTIVE"] = "active";
|
|
20
|
-
STEPPER_ITEM_THEME_ENUM["DEFAULT"] = "default";
|
|
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 = {}));
|
|
28
|
-
var cn = (0, _uiHelpers.cnCreate)('mfui-9-stepper-item');
|
|
29
|
-
var StepperItem = function StepperItem(_ref) {
|
|
30
|
-
var className = _ref.className,
|
|
31
|
-
_ref$classes = _ref.classes,
|
|
32
|
-
_ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
|
|
33
|
-
iconButtonClassName = _ref$classes2.iconButton,
|
|
34
|
-
titleClassName = _ref$classes2.title,
|
|
35
|
-
textClassName = _ref$classes2.text,
|
|
36
|
-
linkClassName = _ref$classes2.link,
|
|
37
|
-
_ref$theme = _ref.theme,
|
|
38
|
-
theme = _ref$theme === void 0 ? STEPPER_ITEM_THEME_ENUM.DEFAULT : _ref$theme,
|
|
39
|
-
title = _ref.title,
|
|
40
|
-
text = _ref.text,
|
|
41
|
-
linkText = _ref.linkText,
|
|
42
|
-
linkUrl = _ref.linkUrl,
|
|
43
|
-
icon = _ref.icon,
|
|
44
|
-
hasSeparator = _ref.hasSeparator,
|
|
45
|
-
_ref$isHorizontal = _ref.isHorizontal,
|
|
46
|
-
isHorizontal = _ref$isHorizontal === void 0 ? true : _ref$isHorizontal,
|
|
47
|
-
isDisabled = _ref.isDisabled,
|
|
48
|
-
_ref$align = _ref.align,
|
|
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,
|
|
52
|
-
_ref$dataAttrs = _ref.dataAttrs,
|
|
53
|
-
_ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
|
|
54
|
-
rootAttrs = _ref$dataAttrs2.root,
|
|
55
|
-
iconButtonAttrs = _ref$dataAttrs2.iconButton,
|
|
56
|
-
titleAttrs = _ref$dataAttrs2.title,
|
|
57
|
-
textAttrs = _ref$dataAttrs2.text,
|
|
58
|
-
linkAttrs = _ref$dataAttrs2.link,
|
|
59
|
-
onClick = _ref.onClick;
|
|
60
|
-
var hasLink = !!linkText && !!linkUrl;
|
|
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;
|
|
64
|
-
var renderContent = /*#__PURE__*/React.createElement("div", {
|
|
65
|
-
className: cn('content')
|
|
66
|
-
}, title && /*#__PURE__*/React.createElement(_uiCore.Header, {
|
|
67
|
-
className: cn([titleClassName]),
|
|
68
|
-
dataAttrs: {
|
|
69
|
-
root: titleAttrs
|
|
70
|
-
},
|
|
71
|
-
as: "h5",
|
|
72
|
-
align: align
|
|
73
|
-
}, title), text && /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
|
|
74
|
-
className: cn([textClassName]),
|
|
75
|
-
dataAttrs: {
|
|
76
|
-
root: textAttrs
|
|
77
|
-
},
|
|
78
|
-
hasMargin: false,
|
|
79
|
-
align: align
|
|
80
|
-
}, text), hasLink && /*#__PURE__*/React.createElement(_uiCore.Button, {
|
|
81
|
-
className: cn('link', [linkClassName]),
|
|
82
|
-
dataAttrs: {
|
|
83
|
-
root: linkAttrs
|
|
84
|
-
},
|
|
85
|
-
href: linkUrl,
|
|
86
|
-
type: "text",
|
|
87
|
-
sizeAll: "extra-small"
|
|
88
|
-
}, linkText));
|
|
89
|
-
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(rootAttrs), {
|
|
90
|
-
className: cn([className], {
|
|
91
|
-
theme: theme,
|
|
92
|
-
align: align,
|
|
93
|
-
'is-horizontal': isHorizontal
|
|
94
|
-
})
|
|
95
|
-
}), showIcon && /*#__PURE__*/React.createElement("div", {
|
|
96
|
-
className: cn('icon-button-area')
|
|
97
|
-
}, /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(iconButtonAttrs), {
|
|
98
|
-
className: cn('icon-button', [iconButtonClassName]),
|
|
99
|
-
type: "button",
|
|
100
|
-
disabled: isDisabled,
|
|
101
|
-
onClick: onClick
|
|
102
|
-
}), /*#__PURE__*/React.createElement("span", {
|
|
103
|
-
className: cn('icon')
|
|
104
|
-
}, icon)), hasSeparator && /*#__PURE__*/React.createElement("span", {
|
|
105
|
-
className: cn('separator')
|
|
106
|
-
})), showContent && renderContent);
|
|
107
|
-
};
|
|
108
|
-
var _default = exports["default"] = StepperItem;
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|