@typeolymp/ui-components 1.9.0 → 1.9.1
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.es.js
CHANGED
|
@@ -2104,17 +2104,18 @@ var Keyboard = function (props) {
|
|
|
2104
2104
|
};
|
|
2105
2105
|
|
|
2106
2106
|
var Mask = styled.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"])));
|
|
2107
|
-
var CardWrapper = styled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
2107
|
+
var CardWrapper = styled.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) {
|
|
2108
2108
|
var width = _a.width;
|
|
2109
2109
|
return (width ? "".concat(width, "px") : "720px");
|
|
2110
2110
|
});
|
|
2111
|
-
var CloseIconWrapper = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n
|
|
2111
|
+
var CloseIconWrapper = styled.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);
|
|
2112
2112
|
var ChildrenWrapper = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n padding: 0 35px 20px;\n"], ["\n padding: 0 35px 20px;\n"])));
|
|
2113
2113
|
var FooterContainer = styled.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);
|
|
2114
2114
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5;
|
|
2115
2115
|
|
|
2116
2116
|
var Modal = function (props) {
|
|
2117
2117
|
var _a = useState(props.isVisible), isVisible = _a[0], setIsVisible = _a[1];
|
|
2118
|
+
var isClosable = useState(props.isClosable === undefined || props.isClosable ? true : false)[0];
|
|
2118
2119
|
useEffect(function () { return setIsVisible(props.isVisible); }, [props.isVisible]);
|
|
2119
2120
|
if (!isVisible)
|
|
2120
2121
|
return null;
|
|
@@ -2123,7 +2124,7 @@ var Modal = function (props) {
|
|
|
2123
2124
|
props.onClose();
|
|
2124
2125
|
setIsVisible(false);
|
|
2125
2126
|
};
|
|
2126
|
-
return (jsx(Mask, { children: jsx(CardWrapper, __assign({}, props, { children: jsxs(Card, { children: [jsx(CloseIconWrapper, { children: jsx(Icon, { type: "cross", onClick: onClose }) }), jsx(ChildrenWrapper, { children: props.children }), props.footer && jsx(FooterContainer, { children: props.footer })] }) })) }));
|
|
2127
|
+
return (jsx(Mask, { children: jsx(CardWrapper, __assign({}, props, { children: jsxs(Card, { children: [isClosable && (jsx(CloseIconWrapper, { children: jsx(Icon, { type: "cross", onClick: onClose }) })), jsx(ChildrenWrapper, { children: props.children }), props.footer && jsx(FooterContainer, { children: props.footer })] }) })) }));
|
|
2127
2128
|
};
|
|
2128
2129
|
|
|
2129
2130
|
var Container = styled.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) {
|