krl-alfred 1.76.19 → 1.76.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/components/AutocompleteInput/AutocompleteInput.js +48 -13
- package/dist/components/AutocompleteInput/AutocompleteInput.styled.js +2 -2
- package/dist/components/AutocompleteInput/stories/AutocompleteInput.stories.js +6 -1
- package/dist/components/Button/Button.js +1 -1
- package/dist/components/Button/Button.styled.js +1 -1
- package/package.json +1 -1
|
@@ -24,12 +24,15 @@ var Loader_1 = __importDefault(require("../Loader"));
|
|
|
24
24
|
var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
|
|
25
25
|
var AutocompleteInput = function (props) {
|
|
26
26
|
var _a;
|
|
27
|
-
var
|
|
28
|
-
var
|
|
29
|
-
var
|
|
27
|
+
var _b, _c;
|
|
28
|
+
var hasError = props.hasError, disabled = props.disabled, label = props.label, customLinkText = props.customLinkText, customLinkHref = props.customLinkHref, onCustomLinkClick = props.onCustomLinkClick, onChange = props.onChange, errorMessage = props.errorMessage, name = props.name, width = props.width, placeholder = props.placeholder, readonly = props.readonly, autofocus = props.autofocus, value = props.value, dropdownList = props.dropdownList, hasLoading = props.hasLoading, isShowDropdown = props.isShowDropdown, dropdownMaxHeight = props.dropdownMaxHeight, onClear = props.onClear, onKeyUp = props.onKeyUp, onBlur = props.onBlur, onFocus = props.onFocus, onKeyDown = props.onKeyDown, noResultTemplate = props.noResultTemplate, autoComplete = props.autoComplete;
|
|
29
|
+
var _d = (0, react_1.useState)(isShowDropdown), showDropdown = _d[0], setShowDropdown = _d[1];
|
|
30
|
+
var _e = (0, react_1.useState)(false), hasClear = _e[0], setHasClear = _e[1];
|
|
31
|
+
var _f = (0, react_1.useState)(value), inputValue = _f[0], setInputValue = _f[1];
|
|
30
32
|
var inputRef = (0, react_1.useRef)(null);
|
|
31
33
|
var realInputRef = (0, react_1.useRef)(null);
|
|
32
|
-
var containerRef = (0, react_1.useRef)();
|
|
34
|
+
var containerRef = (0, react_1.useRef)(null);
|
|
35
|
+
var dropdownRef = (0, react_1.useRef)(null);
|
|
33
36
|
(0, useOnClickOutside_1.default)(containerRef, function () { return setShowDropdown(false); }, true);
|
|
34
37
|
(0, react_1.useEffect)(function () {
|
|
35
38
|
setShowDropdown(isShowDropdown);
|
|
@@ -40,14 +43,28 @@ var AutocompleteInput = function (props) {
|
|
|
40
43
|
inputRef.current.value = value === null || value === void 0 ? void 0 : value.label;
|
|
41
44
|
}
|
|
42
45
|
}, [value]);
|
|
46
|
+
(0, react_1.useEffect)(function () {
|
|
47
|
+
var _a, _b, _c, _d;
|
|
48
|
+
if (((_b = (_a = realInputRef === null || realInputRef === void 0 ? void 0 : realInputRef.current) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) > 0 && ((_d = (_c = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.length) > 0) {
|
|
49
|
+
setHasClear(true);
|
|
50
|
+
}
|
|
51
|
+
else {
|
|
52
|
+
setHasClear(false);
|
|
53
|
+
}
|
|
54
|
+
}, [(_b = realInputRef === null || realInputRef === void 0 ? void 0 : realInputRef.current) === null || _b === void 0 ? void 0 : _b.value, (_c = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _c === void 0 ? void 0 : _c.value]);
|
|
43
55
|
(0, react_1.useEffect)(function () {
|
|
44
56
|
if ((inputValue === null || inputValue === void 0 ? void 0 : inputValue.value) || (inputValue === null || inputValue === void 0 ? void 0 : inputValue.value) === null) {
|
|
45
|
-
inputRef.current.value = inputValue === null || inputValue === void 0 ? void 0 : inputValue.label;
|
|
46
57
|
var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
|
|
47
58
|
nativeInputValueSetter.call(realInputRef.current, JSON.stringify(inputValue));
|
|
48
59
|
var event_1 = new Event('input', { bubbles: true });
|
|
49
60
|
realInputRef.current.dispatchEvent(event_1);
|
|
50
61
|
}
|
|
62
|
+
else {
|
|
63
|
+
var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
|
|
64
|
+
nativeInputValueSetter.call(realInputRef.current, null);
|
|
65
|
+
var event_2 = new Event('input', { bubbles: true });
|
|
66
|
+
realInputRef.current.dispatchEvent(event_2);
|
|
67
|
+
}
|
|
51
68
|
}, [inputValue]);
|
|
52
69
|
var handleClear = function (e) {
|
|
53
70
|
onClear();
|
|
@@ -59,17 +76,31 @@ var AutocompleteInput = function (props) {
|
|
|
59
76
|
setInputValue({ value: value, label: label });
|
|
60
77
|
setShowDropdown(false);
|
|
61
78
|
};
|
|
62
|
-
var
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
79
|
+
var handleKeyUp = function (e) {
|
|
80
|
+
onKeyUp(e);
|
|
81
|
+
setInputValue(null);
|
|
82
|
+
};
|
|
83
|
+
var handleKeyDown = function (e) {
|
|
84
|
+
var _a;
|
|
85
|
+
onKeyDown(e);
|
|
86
|
+
e = e || window.event;
|
|
87
|
+
var charCode = e.keyCode || e.which;
|
|
88
|
+
if (charCode == 13) {
|
|
89
|
+
e.preventDefault();
|
|
90
|
+
(_a = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) === null || _a === void 0 ? void 0 : _a.children[0].click();
|
|
91
|
+
inputRef.current.blur();
|
|
67
92
|
}
|
|
68
|
-
onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e.target), { value: value }) }));
|
|
69
93
|
};
|
|
70
|
-
|
|
94
|
+
var handleBlur = function (e) {
|
|
95
|
+
onBlur(e);
|
|
96
|
+
};
|
|
97
|
+
var handleChange = function (e) {
|
|
98
|
+
if (e === void 0) { e = null; }
|
|
99
|
+
onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e === null || e === void 0 ? void 0 : e.target), { value: inputValue }) }));
|
|
100
|
+
};
|
|
101
|
+
return ((0, jsx_runtime_1.jsxs)(AutocompleteInput_styled_1.Container, __assign({ width: width, ref: containerRef }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_a = {}, _a["justify-between"] = customLinkText, _a)) }, { children: [(0, jsx_runtime_1.jsx)("p", { 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: [(0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.InputStyled, { ref: inputRef, placeholder: placeholder, autofocus: autofocus, readonly: readonly, type: "text", disabled: disabled, hasError: hasError, isShowDropdown: showDropdown, onKeyUp: handleKeyUp, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown, autoComplete: autoComplete }), (0, jsx_runtime_1.jsx)("input", { ref: realInputRef, type: "text", name: name, onChange: handleChange, className: "hiddenInput", autoComplete: autoComplete }), hasLoading && (0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) })), hasClear && !hasLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon", onClick: handleClear }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", color: "var(--dark)", strokeWidth: "3px", width: "16px", height: "16px" }) }))), showDropdown && ((0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownStyled, __assign({ ref: dropdownRef, dropdownMaxHeight: dropdownMaxHeight }, { children: dropdownList.length > 0 ? (dropdownList.map(function (item, key) {
|
|
71
102
|
return (0, jsx_runtime_1.jsx)("li", __assign({ className: (0, classnames_1.default)({ "isFixedBottom": item.isFixedBottom }), onClick: function () { return handleSelectValue(item.value, item.label); } }, { children: item.label }));
|
|
72
|
-
})) : (0, jsx_runtime_1.jsx)("li", __assign({ className: "isFixedBottom hasNoResult" }, { children: noResultTemplate() })) })))] })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
|
|
103
|
+
})) : (0, jsx_runtime_1.jsx)("li", __assign({ className: "isFixedBottom hasNoResult", onClick: function () { return handleSelectValue(null, null); } }, { children: noResultTemplate() })) })))] })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
|
|
73
104
|
};
|
|
74
105
|
AutocompleteInput.defaultValues = {
|
|
75
106
|
hasError: false,
|
|
@@ -80,5 +111,9 @@ AutocompleteInput.defaultValues = {
|
|
|
80
111
|
mask: "_",
|
|
81
112
|
value: null,
|
|
82
113
|
noResultTemplate: function () { return (0, jsx_runtime_1.jsx)("div", { children: "No Result" }); },
|
|
114
|
+
onBlur: function (e) { },
|
|
115
|
+
onKeyUp: function (e) { },
|
|
116
|
+
onKeyDown: function (e) { },
|
|
117
|
+
autoComplete: '',
|
|
83
118
|
};
|
|
84
119
|
exports.default = AutocompleteInput;
|
|
@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.DropdownStyled = exports.InputStyled = exports.Container = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font:var(--caption-bold-12-15);\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n .hiddenInput{\n opacity: 0;\n user-select: none;\n pointer-events: none;\n position: absolute;\n left: 0;\n width: 0;\n }\n .inputIcon {\n position: absolute;\n top: 50%;\n right:
|
|
13
|
-
exports.InputStyled = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: ", ";\n border: ", ";\n padding: ", ";\n color: ", ";\n font : var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px !important;\n border: 2px solid
|
|
12
|
+
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font:var(--caption-bold-12-15);\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n .hiddenInput{\n opacity: 0;\n user-select: none;\n pointer-events: none;\n position: absolute;\n left: 0;\n width: 0;\n }\n .inputIcon {\n position: absolute;\n top: 50%;\n right: 24px;\n transform: translateY(-50%);\n cursor: pointer;\n div{\n display: block;\n }\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font:var(--caption-semi-bold-11-13);\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font:var(--caption-bold-12-15);\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n .hiddenInput{\n opacity: 0;\n user-select: none;\n pointer-events: none;\n position: absolute;\n left: 0;\n width: 0;\n }\n .inputIcon {\n position: absolute;\n top: 50%;\n right: 24px;\n transform: translateY(-50%);\n cursor: pointer;\n div{\n display: block;\n }\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font:var(--caption-semi-bold-11-13);\n }\n }\n"])), function (props) { return props.width || '370px'; });
|
|
13
|
+
exports.InputStyled = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: ", ";\n border: ", ";\n padding: ", ";\n color: ", ";\n font : var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px !important;\n border: 2px solid var(--primary) !important;\n color: var(--dark) !important;\n background: white !important;\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n }\n &:is([disabled]){\n color: var(--dark-opacity-25);\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: ", ";\n border: ", ";\n padding: ", ";\n color: ", ";\n font : var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px !important;\n border: 2px solid var(--primary) !important;\n color: var(--dark) !important;\n background: white !important;\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n }\n &:is([disabled]){\n color: var(--dark-opacity-25);\n }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.isShowDropdown ? '8px 8px 0 0' : '8px 8px 8px 8px'; }, function (props) { return props.hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; });
|
|
14
14
|
exports.DropdownStyled = styled_components_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: auto;\n max-height: ", ";\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 10;\n padding: 0;\n margin: 0;\n > li {\n height: 51px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n font : var(--title-bold-16-19);\n &:not(.hasNoResult):hover{\n background-color: var(--dark-opacity-3);\n }\n &.isFixedBottom{\n color: var(--dark-opacity-50);\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n }\n &.hasNoResult{\n cursor: initial;\n height: auto;\n }\n }\n"], ["\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: auto;\n max-height: ", ";\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 10;\n padding: 0;\n margin: 0;\n > li {\n height: 51px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n font : var(--title-bold-16-19);\n &:not(.hasNoResult):hover{\n background-color: var(--dark-opacity-3);\n }\n &.isFixedBottom{\n color: var(--dark-opacity-50);\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n }\n &.hasNoResult{\n cursor: initial;\n height: auto;\n }\n }\n"])), function (props) { return props.dropdownMaxHeight && props.dropdownMaxHeight; });
|
|
15
15
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -22,7 +22,6 @@ exports.Default = {
|
|
|
22
22
|
disabled: false,
|
|
23
23
|
readonly: false,
|
|
24
24
|
hasLoading: false,
|
|
25
|
-
hasClear: false,
|
|
26
25
|
label: "Label",
|
|
27
26
|
dropdownMaxHeight: "204px",
|
|
28
27
|
//defaultLabel : "test",
|
|
@@ -40,6 +39,12 @@ exports.Default = {
|
|
|
40
39
|
onFocus: function () {
|
|
41
40
|
console.log("prop onFocus");
|
|
42
41
|
},
|
|
42
|
+
onBlur: function () {
|
|
43
|
+
console.log("prop onBlur");
|
|
44
|
+
},
|
|
45
|
+
onKeyDown: function () {
|
|
46
|
+
console.log("prop onKeyDown");
|
|
47
|
+
},
|
|
43
48
|
value: null,
|
|
44
49
|
noResultTemplate: function () { return (0, jsx_runtime_1.jsx)("div", { children: "No Result" }); },
|
|
45
50
|
dropdownList: [
|
|
@@ -27,7 +27,7 @@ var Children = function (props) {
|
|
|
27
27
|
};
|
|
28
28
|
var Button = (0, react_1.forwardRef)(function (props, ref) {
|
|
29
29
|
var type = props.type, isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, icon = props.icon, children = props.children, iconStrokeWidth = props.iconStrokeWidth;
|
|
30
|
-
return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled || isLoading, size: size, variant: variant, width: width, icon: icon, type: type, ref: ref }, { children: isLoading
|
|
30
|
+
return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled || isLoading, size: size, variant: variant, width: width, icon: icon, type: type, ref: ref }, { children: (0, jsx_runtime_1.jsxs)(Children, __assign({ iconStrokeWidth: iconStrokeWidth, icon: icon }, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "loadingContent" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: size === "big" ? "24px" : "16px", height: size === "big" ? "24px" : "16px", variant: variant === 'primary' ? 'secondary' : 'primary' }) }))), children] })) })));
|
|
31
31
|
});
|
|
32
32
|
Button.propTypes = {
|
|
33
33
|
iconStrokeWidth: prop_types_1.default.string,
|
|
@@ -86,7 +86,7 @@ var ghost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
|
|
|
86
86
|
return "var(--body-bold-14-17)";
|
|
87
87
|
}
|
|
88
88
|
}, devices_1.devices.mdUp, devices_1.devices.md);
|
|
89
|
-
exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: ", ";\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n &:empty{\n margin-right: 0;\n }\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: ", ";\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n &:empty{\n margin-right: 0;\n }\n }\n"])), function (props) { return props.size === 'xsmall' ? '4px' : '8px'; }, function (props) { return props.width ? '0' : '0 24px'; }, function (props) { return props.width; }, function (props) {
|
|
89
|
+
exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: ", ";\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n background-color: inherit;\n border-radius: inherit;\n &:empty{\n margin-right: 0;\n }\n }\n .loadingContent{\n position: absolute;\n background-color: inherit;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: inherit;\n }\n"], ["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: ", ";\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n background-color: inherit;\n border-radius: inherit;\n &:empty{\n margin-right: 0;\n }\n }\n .loadingContent{\n position: absolute;\n background-color: inherit;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: inherit;\n }\n"])), function (props) { return props.size === 'xsmall' ? '4px' : '8px'; }, function (props) { return props.width ? '0' : '0 24px'; }, function (props) { return props.width; }, function (props) {
|
|
90
90
|
switch (props.variant) {
|
|
91
91
|
case 'primary':
|
|
92
92
|
return primary;
|