krl-alfred 1.79.2 → 1.79.3
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/components/DescriptionCard/DescriptionCard.js +2 -2
- package/dist/components/DescriptionCard/DescriptionCard.styled.js +1 -1
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js +1 -2
- package/dist/components/Input/Input.js +3 -1
- package/dist/components/Table/Table.js +1 -2
- package/dist/components/TextLink/TextLink.js +15 -2
- package/dist/components/TextLink/TextLink.styled.js +4 -3
- package/dist/components/TextLink/props.js +2 -0
- package/dist/components/TextLink/stories/TextLink.stories.js +2 -0
- package/dist/components/Toast/Toast.js +10 -5
- package/package.json +1 -1
|
@@ -23,8 +23,8 @@ var AccordionItem_1 = __importDefault(require("./AccordionItem"));
|
|
|
23
23
|
var Button_1 = __importDefault(require("./../Button"));
|
|
24
24
|
var DescriptionCard = function (_a) {
|
|
25
25
|
var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.headerButtonText, headerButtonText = _c === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _c, _d = _a.hasHeaderDropdown, hasHeaderDropdown = _d === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _d, _e = _a.list, list = _e === void 0 ? props_1.DescriptionCardDefault.list : _e, _f = _a.hasBadge, hasBadge = _f === void 0 ? props_1.DescriptionCardDefault.hasBadge : _f, _g = _a.badgeText, badgeText = _g === void 0 ? props_1.DescriptionCardDefault.badgeText : _g, _h = _a.hasHeader, hasHeader = _h === void 0 ? props_1.DescriptionCardDefault.hasHeader : _h, _j = _a.hasRounded, hasRounded = _j === void 0 ? props_1.DescriptionCardDefault.hasRounded : _j, _k = _a.hasBorder, hasBorder = _k === void 0 ? props_1.DescriptionCardDefault.hasBorder : _k, _l = _a.headerImage, headerImage = _l === void 0 ? props_1.DescriptionCardDefault.headerImage : _l, _m = _a.dropdownList, dropdownList = _m === void 0 ? props_1.DescriptionCardDefault.dropdownList : _m, _o = _a.dropdownWidth, dropdownWidth = _o === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _o, _p = _a.accordionList, accordionList = _p === void 0 ? props_1.DescriptionCardDefault.accordionList : _p, _q = _a.boxSize, boxSize = _q === void 0 ? props_1.DescriptionCardDefault.boxSize : _q, _r = _a.hasHeaderButton, hasHeaderButton = _r === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _r, _s = _a.hasHeaderButtonWidth, hasHeaderButtonWidth = _s === void 0 ? props_1.DescriptionCardDefault.hasHeaderButtonWidth : _s, headerButtonAction = _a.headerButtonAction;
|
|
26
|
-
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$hasRounded": hasRounded, "$hasBorder": hasBorder }, { children: [hasHeader && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardHeaderStyled, __assign({ "$headerImage": headerImage }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [headerImage && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderImageWrapperStyled, { children: headerImage })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, { children: title }), hasBadge && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: badgeText }) }))] }), hasHeaderButton && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DropdownWrapper, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ iconStrokeWidth: "2.5px", width: hasHeaderButtonWidth, onClick: headerButtonAction, size: "xsmall", variant: "inverted", icon: hasHeaderDropdown ? "ArrowSmallDown" : null }, { children: headerButtonText })), hasHeaderDropdown && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: dropdownList, rowLength: 20, gridItemWidth: dropdownWidth }) }))] }) }))] }))), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ListStyled, __assign({ "$boxSize": boxSize }, { children: list.map(function (listItem) { return ((0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "displayTitle" }, { children: listItem.title })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "displayValue" }, { children: listItem.display || "-" }))] })); }) })), (accordionList === null || accordionList === void 0 ? void 0 : accordionList.length) > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.AccordionListWrapper, { children: accordionList === null || accordionList === void 0 ? void 0 : accordionList.map(function (item) {
|
|
27
|
-
return (0, jsx_runtime_1.jsx)(AccordionItem_1.default, { data: item });
|
|
26
|
+
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$hasRounded": hasRounded, "$hasBorder": hasBorder }, { children: [hasHeader && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardHeaderStyled, __assign({ "$headerImage": headerImage }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [headerImage && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderImageWrapperStyled, { children: headerImage })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, { children: title }), hasBadge && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: badgeText }) }))] }), hasHeaderButton && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DropdownWrapper, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ iconStrokeWidth: "2.5px", width: hasHeaderButtonWidth, onClick: headerButtonAction, size: "xsmall", variant: "inverted", icon: hasHeaderDropdown ? "ArrowSmallDown" : null }, { children: headerButtonText })), hasHeaderDropdown && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: dropdownList, rowLength: 20, gridItemWidth: dropdownWidth }) }))] }) }))] }))), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ListStyled, __assign({ "$boxSize": boxSize }, { children: list.map(function (listItem, key) { return ((0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "displayTitle" }, { children: listItem.title })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "displayValue" }, { children: listItem.display || "-" }))] }, key)); }) })), (accordionList === null || accordionList === void 0 ? void 0 : accordionList.length) > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.AccordionListWrapper, { children: accordionList === null || accordionList === void 0 ? void 0 : accordionList.map(function (item, key) {
|
|
27
|
+
return (0, jsx_runtime_1.jsx)(AccordionItem_1.default, { data: item }, key);
|
|
28
28
|
}) }))] })));
|
|
29
29
|
};
|
|
30
30
|
exports.default = DescriptionCard;
|
|
@@ -15,7 +15,7 @@ exports.HeaderTitleStyled = styled_components_1.default.strong(templateObject_3
|
|
|
15
15
|
exports.HeaderImageWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n border: 1px solid var(--dark-opacity-5);\n width: 64px;\n height: 64px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin-right: 1.5rem;\n *{\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n padding: 0.5rem;\n box-sizing: border-box;\n }\n"], ["\n display: block;\n border: 1px solid var(--dark-opacity-5);\n width: 64px;\n height: 64px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin-right: 1.5rem;\n *{\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n padding: 0.5rem;\n box-sizing: border-box;\n }\n"])));
|
|
16
16
|
exports.BadgeWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: block;\n margin-left: 1.5rem;\n"], ["\n display: block;\n margin-left: 1.5rem;\n"])));
|
|
17
17
|
exports.ListStyled = styled_components_1.default.ul(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ",1fr);\n padding: 0;\n margin: 0;\n position: relative;\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n border: 1px solid white;\n border-radius: inherit;\n user-select: none;\n pointer-events: none;\n }\n li{\n display: block;\n padding: 1.5rem;\n border-right: 1px solid var(--dark-opacity-10);\n border-bottom: 1px solid var(--dark-opacity-10);\n word-break: break-word;\n &:is(:last-child){\n border-right: 0;\n }\n .displayTitle{\n display: block;\n color: var(--dark-opacity-50);\n font: var(--body-semi-bold-14-17);\n }\n .displayValue{\n display: block;\n margin-top: 0.5rem;\n color: var(--dark);\n font: var(--body-semi-bold-14-17);\n }\n }\n"], ["\n display: grid;\n grid-template-columns: repeat(", ",1fr);\n padding: 0;\n margin: 0;\n position: relative;\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n border: 1px solid white;\n border-radius: inherit;\n user-select: none;\n pointer-events: none;\n }\n li{\n display: block;\n padding: 1.5rem;\n border-right: 1px solid var(--dark-opacity-10);\n border-bottom: 1px solid var(--dark-opacity-10);\n word-break: break-word;\n &:is(:last-child){\n border-right: 0;\n }\n .displayTitle{\n display: block;\n color: var(--dark-opacity-50);\n font: var(--body-semi-bold-14-17);\n }\n .displayValue{\n display: block;\n margin-top: 0.5rem;\n color: var(--dark);\n font: var(--body-semi-bold-14-17);\n }\n }\n"])), function (props) { return props.$boxSize; });
|
|
18
|
-
exports.DropdownWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: block;\n position: relative;\n\n &:hover{\n div{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.2s;\n }\n button{\n svg{\n transform: rotate(180deg);\n }\n }\n }\n"], ["\n display: block;\n position: relative;\n\n &:hover{\n div{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.2s;\n }\n button{\n svg{\n transform: rotate(180deg);\n }\n }\n }\n"])));
|
|
18
|
+
exports.DropdownWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: block;\n position: relative;\n\n &:hover{\n > div{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.2s;\n }\n button{\n svg{\n transform: rotate(180deg);\n }\n }\n }\n"], ["\n display: block;\n position: relative;\n\n &:hover{\n > div{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.2s;\n }\n button{\n svg{\n transform: rotate(180deg);\n }\n }\n }\n"])));
|
|
19
19
|
exports.SubMenu = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 100%;\n transition: all 0.2s ease-in-out;\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition-delay: 0s;\n padding: 0;\n margin: 0;\n z-index: 5;\n > ul{\n margin: 0.5rem 0 0 0;\n }\n"], ["\n position: absolute;\n right: 0;\n top: 100%;\n transition: all 0.2s ease-in-out;\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition-delay: 0s;\n padding: 0;\n margin: 0;\n z-index: 5;\n > ul{\n margin: 0.5rem 0 0 0;\n }\n"])));
|
|
20
20
|
exports.AccordionListWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n\n"], ["\n\n"])));
|
|
21
21
|
exports.AccordionItemWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n border-top: 1px solid var(--dark-opacity-10);\n"], ["\n border-top: 1px solid var(--dark-opacity-10);\n"])));
|
|
@@ -19,10 +19,9 @@ exports.Default = {
|
|
|
19
19
|
hasBadge: false,
|
|
20
20
|
badgeText: "Badge text",
|
|
21
21
|
hasHeaderDropdown: false,
|
|
22
|
-
|
|
22
|
+
headerButtonText: "Header dropdown text",
|
|
23
23
|
list: descriptionList_json_1.default,
|
|
24
24
|
listHeader: null,
|
|
25
|
-
//footer: <div>test</div>,
|
|
26
25
|
hasHeader: true,
|
|
27
26
|
hasRounded: true,
|
|
28
27
|
hasBorder: true,
|
|
@@ -54,6 +54,7 @@ var Input = function (_a) {
|
|
|
54
54
|
}, [type]);
|
|
55
55
|
(0, react_1.useEffect)(function () {
|
|
56
56
|
setInputValue(value);
|
|
57
|
+
setStartDate(value ? new Date(value) : null);
|
|
57
58
|
}, [value]);
|
|
58
59
|
(0, react_1.useEffect)(function () {
|
|
59
60
|
if (alert) {
|
|
@@ -80,7 +81,8 @@ var Input = function (_a) {
|
|
|
80
81
|
inputRef.current.value = null;
|
|
81
82
|
setStartDate(null);
|
|
82
83
|
onChange(null);
|
|
83
|
-
onClear
|
|
84
|
+
if (onClear)
|
|
85
|
+
onClear();
|
|
84
86
|
};
|
|
85
87
|
return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": width }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_b = {}, _b["justify-between"] = customLinkText, _b)) }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { children: label })), customLinkText && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [(mask && format) ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue }, other, { format: format, mask: mask, customInput: Input_styled_1.InputStyled, id: id })))
|
|
86
88
|
: type === 'date' ? ((0, jsx_runtime_1.jsx)(Input_styled_1.DatePickerWrapperStyled, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, { placeholderText: placeholder, disabled: disabled, name: name, value: value, readOnly: readOnly, autoFocus: autoFocus, onChange: function (date, event) {
|
|
@@ -54,7 +54,6 @@ var Table = function (_a) {
|
|
|
54
54
|
if (!emptyText) {
|
|
55
55
|
emptyText = t("NO_OPTIONS_FOUND");
|
|
56
56
|
}
|
|
57
|
-
return ((0, jsx_runtime_1.jsx)(Table_styled_1.TableStyled, { children: (0, jsx_runtime_1.jsx)(rc_table_1.default, { columns: tableColumns, data: tableData, emptyText: (0, jsx_runtime_1.jsx)(Table_styled_1.EmptyStyled, { children: emptyText }), className: tableData.length <= 0 && "rc-table-empty" }) }));
|
|
57
|
+
return ((0, jsx_runtime_1.jsx)(Table_styled_1.TableStyled, { children: (0, jsx_runtime_1.jsx)(rc_table_1.default, { columns: tableColumns, data: tableData, emptyText: (0, jsx_runtime_1.jsx)(Table_styled_1.EmptyStyled, { children: emptyText }), className: (tableData === null || tableData === void 0 ? void 0 : tableData.length) <= 0 && "rc-table-empty" }) }));
|
|
58
58
|
};
|
|
59
|
-
Table.defaultProps = {};
|
|
60
59
|
exports.default = Table;
|
|
@@ -26,11 +26,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
26
26
|
};
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
28
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
29
|
+
var react_1 = require("react");
|
|
29
30
|
var props_1 = require("./props");
|
|
30
31
|
var TextLink_styled_1 = require("./TextLink.styled");
|
|
31
32
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
32
33
|
var TextLink = function (_a) {
|
|
33
|
-
var _b = _a.iconWidth, iconWidth = _b === void 0 ? props_1.TextLinkDefault.iconWidth : _b, _c = _a.iconHeight, iconHeight = _c === void 0 ? props_1.TextLinkDefault.iconHeight : _c, _d = _a.variant, variant = _d === void 0 ? props_1.TextLinkDefault.variant : _d, _e = _a.size, size = _e === void 0 ? props_1.TextLinkDefault.size : _e, _f = _a.iconDirection, iconDirection = _f === void 0 ? props_1.TextLinkDefault.iconDirection : _f, _g = _a.iconStrokeWidth, iconStrokeWidth = _g === void 0 ? props_1.TextLinkDefault.iconStrokeWidth : _g, onClick = _a.onClick, children = _a.children, href = _a.href, target = _a.target, icon = _a.icon, other = __rest(_a, ["iconWidth", "iconHeight", "variant", "size", "iconDirection", "iconStrokeWidth", "onClick", "children", "href", "target", "icon"]);
|
|
34
|
-
|
|
34
|
+
var _b = _a.iconWidth, iconWidth = _b === void 0 ? props_1.TextLinkDefault.iconWidth : _b, _c = _a.iconHeight, iconHeight = _c === void 0 ? props_1.TextLinkDefault.iconHeight : _c, _d = _a.variant, variant = _d === void 0 ? props_1.TextLinkDefault.variant : _d, _e = _a.size, size = _e === void 0 ? props_1.TextLinkDefault.size : _e, _f = _a.iconDirection, iconDirection = _f === void 0 ? props_1.TextLinkDefault.iconDirection : _f, _g = _a.iconStrokeWidth, iconStrokeWidth = _g === void 0 ? props_1.TextLinkDefault.iconStrokeWidth : _g, _h = _a.alertText, alertText = _h === void 0 ? props_1.TextLinkDefault.alertText : _h, _j = _a.hasAlert, hasAlert = _j === void 0 ? props_1.TextLinkDefault.hasAlert : _j, onClick = _a.onClick, children = _a.children, href = _a.href, target = _a.target, icon = _a.icon, other = __rest(_a, ["iconWidth", "iconHeight", "variant", "size", "iconDirection", "iconStrokeWidth", "alertText", "hasAlert", "onClick", "children", "href", "target", "icon"]);
|
|
35
|
+
var _k = (0, react_1.useState)(false), showAlert = _k[0], setShowAlert = _k[1];
|
|
36
|
+
var handleClick = function (e) {
|
|
37
|
+
onClick(e);
|
|
38
|
+
if (hasAlert) {
|
|
39
|
+
setShowAlert(true);
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
(0, react_1.useEffect)(function () {
|
|
43
|
+
if (showAlert) {
|
|
44
|
+
setTimeout(function () { return setShowAlert(false); }, 1000);
|
|
45
|
+
}
|
|
46
|
+
}, [showAlert]);
|
|
47
|
+
return ((0, jsx_runtime_1.jsxs)(TextLink_styled_1.TextLinkStyled, __assign({ "$size": size, "$variant": variant, href: href, target: target, onClick: handleClick }, other, { children: [(0, jsx_runtime_1.jsxs)(TextLink_styled_1.Inner, __assign({ "$iconDirection": iconDirection }, { children: [icon && ((0, jsx_runtime_1.jsx)(TextLink_styled_1.IconStyled, __assign({ "$iconDirection": iconDirection }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: iconStrokeWidth, name: icon, width: iconWidth, height: iconHeight }) }))), children] })), showAlert && hasAlert && (0, jsx_runtime_1.jsx)(TextLink_styled_1.AlertStyled, { children: alertText })] })));
|
|
35
48
|
};
|
|
36
49
|
exports.default = TextLink;
|
|
@@ -7,9 +7,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.Inner = exports.IconStyled = exports.TextLinkStyled = void 0;
|
|
10
|
+
exports.AlertStyled = exports.Inner = exports.IconStyled = exports.TextLinkStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.TextLinkStyled = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n font-size: inherit;\n font-family: inherit;\n font-weight: inherit;\n display: inline-block;\n text-decoration: none;\n cursor: pointer;\n vertical-align: middle;\n padding: ", ";\n &:hover , :focus , :active {\n color: ", ";\n }\n"], ["\n color: ", ";\n font-size: inherit;\n font-family: inherit;\n font-weight: inherit;\n display: inline-block;\n text-decoration: none;\n cursor: pointer;\n vertical-align: middle;\n padding: ", ";\n &:hover , :focus , :active {\n color: ", ";\n }\n"])), function (props) { return props.$variant === "primary" ? "var(--primary)" : "var(--grey-50)"; }, function (props) {
|
|
12
|
+
exports.TextLinkStyled = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n color: ", ";\n font-size: inherit;\n font-family: inherit;\n font-weight: inherit;\n display: inline-block;\n text-decoration: none;\n cursor: pointer;\n vertical-align: middle;\n padding: ", ";\n &:hover , :focus , :active {\n color: ", ";\n }\n"], ["\n position: relative;\n color: ", ";\n font-size: inherit;\n font-family: inherit;\n font-weight: inherit;\n display: inline-block;\n text-decoration: none;\n cursor: pointer;\n vertical-align: middle;\n padding: ", ";\n &:hover , :focus , :active {\n color: ", ";\n }\n"])), function (props) { return props.$variant === "primary" ? "var(--primary)" : "var(--grey-50)"; }, function (props) {
|
|
13
13
|
switch (props.$size) {
|
|
14
14
|
case 'small':
|
|
15
15
|
return "0";
|
|
@@ -21,4 +21,5 @@ exports.TextLinkStyled = styled_components_1.default.a(templateObject_1 || (temp
|
|
|
21
21
|
}, function (props) { return props.$variant === "primary" ? "var(--primary-hover)" : "var(--grey-50)"; });
|
|
22
22
|
exports.IconStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (props) { return props.$iconDirection === 'right' ? "margin-left: 0.5rem;" : 'margin-right: 0.5rem;'; });
|
|
23
23
|
exports.Inner = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex-direction:", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex-direction:", ";\n"])), function (props) { return props.$iconDirection === 'right' ? "row-reverse" : 'row'; });
|
|
24
|
-
var
|
|
24
|
+
exports.AlertStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n right: 0px;\n top: calc(100% + 6px);\n height: 28px;\n border-radius: 0.5rem;\n background-color: white;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n font:var(--caption-medium-10-12);\n color: var(--dark);\n"], ["\n position: absolute;\n right: 0px;\n top: calc(100% + 6px);\n height: 28px;\n border-radius: 0.5rem;\n background-color: white;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n font:var(--caption-medium-10-12);\n color: var(--dark);\n"])));
|
|
25
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -37,12 +37,17 @@ var Toaster = function (_a) {
|
|
|
37
37
|
(0, react_1.useEffect)(function () {
|
|
38
38
|
if (isShowToast) {
|
|
39
39
|
if (toastProps.hasClosing) {
|
|
40
|
-
|
|
40
|
+
if (toastProps.timer > 0) {
|
|
41
|
+
setTimeout(function () {
|
|
42
|
+
setIsShowToast(false);
|
|
43
|
+
}, toastProps.timer || props_1.ToastDefault.timer);
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
41
46
|
setIsShowToast(false);
|
|
42
|
-
}
|
|
47
|
+
}
|
|
43
48
|
}
|
|
44
49
|
}
|
|
45
|
-
}, [isShowToast, toastProps.hasClosing]);
|
|
50
|
+
}, [isShowToast, toastProps.hasClosing, toastProps.timer]);
|
|
46
51
|
(0, react_1.useEffect)(function () {
|
|
47
52
|
if (isShowToast) {
|
|
48
53
|
document.body.classList.add('hasToast');
|
|
@@ -53,8 +58,8 @@ var Toaster = function (_a) {
|
|
|
53
58
|
}
|
|
54
59
|
}, [isShowToast]);
|
|
55
60
|
(0, react_1.useEffect)(function () {
|
|
56
|
-
setIsShowToast(toastProps.show);
|
|
57
|
-
}, [toastProps
|
|
61
|
+
setIsShowToast(toastProps === null || toastProps === void 0 ? void 0 : toastProps.show);
|
|
62
|
+
}, [toastProps === null || toastProps === void 0 ? void 0 : toastProps.show]);
|
|
58
63
|
(0, react_1.useEffect)(function () {
|
|
59
64
|
switch (toastProps.size) {
|
|
60
65
|
case 'small':
|