npm - oolib - Versions diffs - 2.86.1 → 2.87.0 - Mend

oolib 2.86.1 → 2.87.0

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.

Files changed (6) hide show

package/dist/components/Modals/Modal/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export function Modal({ title, onClose, children, linkTo, desktopWidth, headerStyle, subtitle, fitToContentHeight, invert, }: {
+export function Modal({ title, onClose, children, linkTo, desktopWidth, headerStyle, subtitle, fitToContentHeight, invert, overflowVisible, showActionPanel, onCloseText, onConfirm, onConfirmText, alignActions }: {
     title: any;
     onClose: any;
     children: any;
@@ -8,4 +8,10 @@ export function Modal({ title, onClose, children, linkTo, desktopWidth, headerSt
     subtitle: any;
     fitToContentHeight?: boolean;
     invert: any;
+    overflowVisible: any;
+    showActionPanel?: boolean;
+    onCloseText?: string;
+    onConfirm: any;
+    onConfirmText?: string;
+    alignActions?: string;
 }): any;

package/dist/components/Modals/Modal/index.js CHANGED Viewed

@@ -46,12 +46,12 @@ var styled_1 = require("./styled");
 var Buttons_1 = require("../../Buttons");
 var Divider_1 = require("../../Divider");
 var Modal = function (_a) {
-    var title = _a.title, onClose = _a.onClose, children = _a.children, linkTo = _a.linkTo, _b = _a.desktopWidth, desktopWidth = _b === void 0 ? "80%" : _b, _c = _a.headerStyle, headerStyle = _c === void 0 ? "style1" : _c, subtitle = _a.subtitle, _d = _a.fitToContentHeight, fitToContentHeight = _d === void 0 ? false : _d, invert = _a.invert;
+    var title = _a.title, onClose = _a.onClose, children = _a.children, linkTo = _a.linkTo, _b = _a.desktopWidth, desktopWidth = _b === void 0 ? "80%" : _b, _c = _a.headerStyle, headerStyle = _c === void 0 ? "style1" : _c, subtitle = _a.subtitle, _d = _a.fitToContentHeight, fitToContentHeight = _d === void 0 ? false : _d, invert = _a.invert, overflowVisible = _a.overflowVisible, _e = _a.showActionPanel, showActionPanel = _e === void 0 ? false : _e, _f = _a.onCloseText, onCloseText = _f === void 0 ? "Close" : _f, onConfirm = _a.onConfirm, _g = _a.onConfirmText, onConfirmText = _g === void 0 ? "Confirm" : _g, _h = _a.alignActions, alignActions = _h === void 0 ? "right" : _h;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     var handleClose = function () { return onClose(); };
     var initAnimPos = { marginTop: "100vh", opacity: 0 };
     var endAnimPos = { marginTop: 0, opacity: 1 };
-    var _e = (0, react_1.useState)(endAnimPos), animPos = _e[0], setAnimPos = _e[1];
+    var _j = (0, react_1.useState)(endAnimPos), animPos = _j[0], setAnimPos = _j[1];
     (0, react_1.useEffect)(function () {
         document.body.style.overflow = "hidden";
         return function () { return (document.body.style.overflow = "unset"); };
@@ -75,10 +75,16 @@ var Modal = function (_a) {
         : ["style2"].indexOf(headerStyle) !== -1 && false;
     var genModalContents = function () { return (react_1.default.createElement(styled_1.StyledModalLargeContentWrapper, { className: "StyledModalLargeContentWrapper", desktopWidth: desktopWidth, takeFullScreenOnScroll: takeFullScreenOnScroll, style: !fitToContentHeight ? { minHeight: 'calc(100vh - 4rem)' } : {} },
         genHeader(),
-        react_1.default.createElement(styled_1.StyledModalBodyWrapper, { style: !fitToContentHeight ? { minHeight: 'calc(100vh - 8rem)' } : {},
-            // showActionPanel={showActionPanel}
-            takeFullScreenOnScroll: takeFullScreenOnScroll },
-            react_1.default.createElement(styled_1.StyledModalLargeBody, { takeFullScreenOnScroll: takeFullScreenOnScroll }, children)))); };
+        react_1.default.createElement(styled_1.StyledModalBodyWrapper, { style: !fitToContentHeight ? { minHeight: 'calc(100vh - 8rem)' } : {}, overflowVisible: overflowVisible, takeFullScreenOnScroll: takeFullScreenOnScroll },
+            react_1.default.createElement(styled_1.StyledModalLargeBody, { takeFullScreenOnScroll: takeFullScreenOnScroll }, children),
+            showActionPanel &&
+                react_1.default.createElement("div", { style: { position: 'sticky', bottom: headerStyle === 'style1' ? 0 : '2.2rem' } },
+                    react_1.default.createElement(Divider_1.Divider, null),
+                    react_1.default.createElement(styled_1.StyledActionButtonsWrapper, { alignActions: alignActions },
+                        typeof onConfirm === 'function'
+                            ? react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onConfirm }, onConfirmText) // In some cases we want to pass button directly to the component as prop
+                            : onConfirm,
+                        react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: onClose }, onCloseText)))))); };
     return ((0, react_dom_1.createPortal)(react_1.default.createElement(styled_1.StyledModalLargeBg, null,
         react_1.default.createElement(styled_1.StyledModalLargeBgColor, { initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: {
                 type: "tween",

package/dist/components/Modals/Modal/styled.js CHANGED Viewed

@@ -48,25 +48,16 @@ exports.StyledModalLargeHeader = styled_components_1.default.header(templateObje
     return invert ? themes_1.colors.greyColor90 : greyColor5;
 });
 exports.StyledModalBodyWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: ", ";\n"])), function (_a) {
-    var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
-    return takeFullScreenOnScroll ? "auto" : "unset";
+    var takeFullScreenOnScroll = _a.takeFullScreenOnScroll, overflowVisible = _a.overflowVisible;
+    return overflowVisible ? "unset" : takeFullScreenOnScroll ? "auto" : 'unset';
 });
-exports.StyledModalLargeBody = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding: ", "; \n  ", "\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding: ", "; \n  ", "\n"])), function (_a) {
-    var noPadding = _a.noPadding;
-    return noPadding && '2rem';
-}, function (_a) {
+exports.StyledModalLargeBody = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  ", "\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), function (_a) {
     var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
     return !takeFullScreenOnScroll && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      flex: 1;\n      overflow: auto;\n    "], ["\n      flex: 1;\n      overflow: auto;\n    "])));
 });
-exports.StyledActionButtonsWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  gap: 1rem;\n  display: flex;\n  justify-content: ", ";\n  padding: 1rem 0;\n  padding-left: ", ";\n  padding-right: ", ";\n  background-color: white;\n"], ["\n  gap: 1rem;\n  display: flex;\n  justify-content: ", ";\n  padding: 1rem 0;\n  padding-left: ", ";\n  padding-right: ", ";\n  background-color: white;\n"])), function (_a) {
+exports.StyledActionButtonsWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  gap: 1rem;\n  display: flex;\n  justify-content: ", ";\n  padding: 1rem 0;\n  padding-left: 2rem;\n  padding-right: 0.5rem; \n  background-color: white;\n"], ["\n  gap: 1rem;\n  display: flex;\n  justify-content: ", ";\n  padding: 1rem 0;\n  padding-left: 2rem;\n  padding-right: 0.5rem; \n  background-color: white;\n"])), function (_a) {
     var alignActions = _a.alignActions;
     return alignActions === "right" ? 'flex-end' : '';
-}, function (_a) {
-    var noPadding = _a.noPadding;
-    return !noPadding && '2rem';
-}, function (_a) {
-    var noPadding = _a.noPadding;
-    return !noPadding ? '2rem' : '0.5rem';
 });
 exports.StyledModalHeaderStyle2Container = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  border-bottom: 1px solid ", ";\n  padding: 1rem 2rem;\n  position: relative;\n"], ["\n  display: flex;\n  border-bottom: 1px solid ", ";\n  padding: 1rem 2rem;\n  position: relative;\n"])), greyColor15);
 exports.StyledModalHeaderStyle2Title = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  padding-top: 1rem;\n  display: flex;\n  flex-grow: 1;\n  gap: 1.5rem;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  padding-top: 1rem;\n  display: flex;\n  flex-grow: 1;\n  gap: 1.5rem;\n  justify-content: space-between;\n  align-items: center;\n"])));

package/dist/components/Modals/derivedComps/ModalConfirm/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export function ModalConfirm({ title, subTitle, onClose, onCloseText, children, onConfirm, onConfirmText, }: {
+export function ModalConfirm({ title, subTitle, onClose, onCloseText, children, onConfirm, onConfirmText, alignActions }: {
     title: any;
     subTitle: any;
     onClose: any;
@@ -6,5 +6,6 @@ export function ModalConfirm({ title, subTitle, onClose, onCloseText, children,
     children: any;
     onConfirm: any;
     onConfirmText?: string;
+    alignActions?: string;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/Modals/derivedComps/ModalConfirm/index.js CHANGED Viewed

@@ -28,11 +28,9 @@ var StyledFlexWrapper = styled_components_1.default.div(templateObject_1 || (tem
     return alignActions === "right" ? 'flex-end' : '';
 });
 var ModalConfirm = function (_a) {
-    var title = _a.title, subTitle = _a.subTitle, onClose = _a.onClose, _b = _a.onCloseText, onCloseText = _b === void 0 ? "Cancel" : _b, children = _a.children, onConfirm = _a.onConfirm, _c = _a.onConfirmText, onConfirmText = _c === void 0 ? "Delete" : _c;
+    var title = _a.title, subTitle = _a.subTitle, onClose = _a.onClose, _b = _a.onCloseText, onCloseText = _b === void 0 ? "Cancel" : _b, children = _a.children, onConfirm = _a.onConfirm, _c = _a.onConfirmText, onConfirmText = _c === void 0 ? "Delete" : _c, _d = _a.alignActions, alignActions = _d === void 0 ? "left" : _d;
     return (react_1.default.createElement(ModalSmall_1.ModalSmall, __assign({}, { title: title, subTitle: subTitle, onClose: onClose, children: children }),
-        react_1.default.createElement(StyledFlexWrapper
-        // alignActions={alignActions}
-        , null,
+        react_1.default.createElement(StyledFlexWrapper, { alignActions: alignActions },
             react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onConfirm }, onConfirmText),
             react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: onClose }, onCloseText))));
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.86.1",
+  "version": "2.87.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",