@typeolymp/ui-components 1.9.0 → 1.9.2
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/build/index.js
CHANGED
|
@@ -2115,17 +2115,18 @@ var Keyboard = function (props) {
|
|
|
2115
2115
|
};
|
|
2116
2116
|
|
|
2117
2117
|
var Mask = styled__default["default"].div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n width: 100vw;\n height: 100vh;\n position: fixed;\n background-color: rgba(35, 41, 47, 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n"], ["\n width: 100vw;\n height: 100vh;\n position: fixed;\n background-color: rgba(35, 41, 47, 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n"])));
|
|
2118
|
-
var CardWrapper = styled__default["default"].div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
2118
|
+
var CardWrapper = styled__default["default"].div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n width: ", ";\n\n > div:first-child {\n padding-top: 30px;\n }\n"], ["\n width: ", ";\n\n > div:first-child {\n padding-top: 30px;\n }\n"])), function (_a) {
|
|
2119
2119
|
var width = _a.width;
|
|
2120
2120
|
return (width ? "".concat(width, "px") : "720px");
|
|
2121
2121
|
});
|
|
2122
|
-
var CloseIconWrapper = styled__default["default"].div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n
|
|
2122
|
+
var CloseIconWrapper = styled__default["default"].div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n position: absolute;\n top: -10px;\n right: 20px;\n\n svg {\n cursor: pointer;\n }\n svg:hover {\n fill: ", ";\n }\n"], ["\n display: flex;\n justify-content: flex-end;\n position: absolute;\n top: -10px;\n right: 20px;\n\n svg {\n cursor: pointer;\n }\n svg:hover {\n fill: ", ";\n }\n"])), theme.colors.darkGray.base);
|
|
2123
2123
|
var ChildrenWrapper = styled__default["default"].div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n padding: 0 35px 20px;\n"], ["\n padding: 0 35px 20px;\n"])));
|
|
2124
2124
|
var FooterContainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: calc(100% + 30px);\n box-sizing: border-box;\n min-height: 45px;\n margin-top: 15px;\n margin-bottom: -15px;\n margin-left: -15px;\n padding: 15px 50px;\n background-color: ", ";\n border-top: 1px solid ", ";\n"], ["\n width: calc(100% + 30px);\n box-sizing: border-box;\n min-height: 45px;\n margin-top: 15px;\n margin-bottom: -15px;\n margin-left: -15px;\n padding: 15px 50px;\n background-color: ", ";\n border-top: 1px solid ", ";\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker);
|
|
2125
2125
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5;
|
|
2126
2126
|
|
|
2127
2127
|
var Modal = function (props) {
|
|
2128
2128
|
var _a = React.useState(props.isVisible), isVisible = _a[0], setIsVisible = _a[1];
|
|
2129
|
+
var isClosable = React.useState(props.isClosable === undefined || props.isClosable ? true : false)[0];
|
|
2129
2130
|
React.useEffect(function () { return setIsVisible(props.isVisible); }, [props.isVisible]);
|
|
2130
2131
|
if (!isVisible)
|
|
2131
2132
|
return null;
|
|
@@ -2134,7 +2135,7 @@ var Modal = function (props) {
|
|
|
2134
2135
|
props.onClose();
|
|
2135
2136
|
setIsVisible(false);
|
|
2136
2137
|
};
|
|
2137
|
-
return (jsxRuntime.jsx(Mask, { children: jsxRuntime.jsx(CardWrapper, __assign({}, props, { children: jsxRuntime.jsxs(Card, { children: [jsxRuntime.jsx(CloseIconWrapper, { children: jsxRuntime.jsx(Icon, { type: "cross", onClick: onClose }) }), jsxRuntime.jsx(ChildrenWrapper, { children: props.children }), props.footer && jsxRuntime.jsx(FooterContainer, { children: props.footer })] }) })) }));
|
|
2138
|
+
return (jsxRuntime.jsx(Mask, { children: jsxRuntime.jsx(CardWrapper, __assign({}, props, { children: jsxRuntime.jsxs(Card, { children: [isClosable && (jsxRuntime.jsx(CloseIconWrapper, { children: jsxRuntime.jsx(Icon, { type: "cross", onClick: onClose }) })), jsxRuntime.jsx(ChildrenWrapper, { children: props.children }), props.footer && jsxRuntime.jsx(FooterContainer, { children: props.footer })] }) })) }));
|
|
2138
2139
|
};
|
|
2139
2140
|
|
|
2140
2141
|
var Container = styled__default["default"].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n min-height: 90px;\n border-radius: 6px;\n border-width: 3px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n padding: 20px;\n display: flex;\n box-sizing: border-box;\n"], ["\n width: 100%;\n min-height: 90px;\n border-radius: 6px;\n border-width: 3px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n padding: 20px;\n display: flex;\n box-sizing: border-box;\n"])), function (_a) {
|