oolib 2.86.0 → 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 (7) hide show
  1. package/dist/components/Modals/Modal/index.d.ts +7 -1
  2. package/dist/components/Modals/Modal/index.js +14 -8
  3. package/dist/components/Modals/Modal/styled.js +4 -13
  4. package/dist/components/Modals/ModalSmall/index.js +2 -2
  5. package/dist/components/Modals/derivedComps/ModalConfirm/index.d.ts +2 -1
  6. package/dist/components/Modals/derivedComps/ModalConfirm/index.js +2 -4
  7. package/package.json +1 -1
package/dist/components/Modals/Modal/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export function Modal({ title, onClose, children, linkTo, desktopWidth, headerStyle, subtitle, fitToContentHeight, invert, }: {
1
+ export function Modal({ title, onClose, children, linkTo, desktopWidth, headerStyle, subtitle, fitToContentHeight, invert, overflowVisible, showActionPanel, onCloseText, onConfirm, onConfirmText, alignActions }: {
2
2
  title: any;
3
3
  onClose: any;
4
4
  children: any;
@@ -8,4 +8,10 @@ export function Modal({ title, onClose, children, linkTo, desktopWidth, headerSt
8
8
  subtitle: any;
9
9
  fitToContentHeight?: boolean;
10
10
  invert: any;
11
+ overflowVisible: any;
12
+ showActionPanel?: boolean;
13
+ onCloseText?: string;
14
+ onConfirm: any;
15
+ onConfirmText?: string;
16
+ alignActions?: string;
11
17
  }): any;
package/dist/components/Modals/Modal/index.js CHANGED
@@ -46,12 +46,12 @@ var styled_1 = require("./styled");
46
46
  var Buttons_1 = require("../../Buttons");
47
47
  var Divider_1 = require("../../Divider");
48
48
  var Modal = function (_a) {
49
- 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;
49
+ 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;
50
50
  var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
51
51
  var handleClose = function () { return onClose(); };
52
52
  var initAnimPos = { marginTop: "100vh", opacity: 0 };
53
53
  var endAnimPos = { marginTop: 0, opacity: 1 };
54
- var _e = (0, react_1.useState)(endAnimPos), animPos = _e[0], setAnimPos = _e[1];
54
+ var _j = (0, react_1.useState)(endAnimPos), animPos = _j[0], setAnimPos = _j[1];
55
55
  (0, react_1.useEffect)(function () {
56
56
  document.body.style.overflow = "hidden";
57
57
  return function () { return (document.body.style.overflow = "unset"); };
@@ -75,10 +75,16 @@ var Modal = function (_a) {
75
75
  : ["style2"].indexOf(headerStyle) !== -1 && false;
76
76
  var genModalContents = function () { return (react_1.default.createElement(styled_1.StyledModalLargeContentWrapper, { className: "StyledModalLargeContentWrapper", desktopWidth: desktopWidth, takeFullScreenOnScroll: takeFullScreenOnScroll, style: !fitToContentHeight ? { minHeight: 'calc(100vh - 4rem)' } : {} },
77
77
  genHeader(),
78
- react_1.default.createElement(styled_1.StyledModalBodyWrapper, { style: !fitToContentHeight ? { minHeight: 'calc(100vh - 8rem)' } : {},
79
- // showActionPanel={showActionPanel}
80
- takeFullScreenOnScroll: takeFullScreenOnScroll },
81
- react_1.default.createElement(styled_1.StyledModalLargeBody, { takeFullScreenOnScroll: takeFullScreenOnScroll }, children)))); };
78
+ react_1.default.createElement(styled_1.StyledModalBodyWrapper, { style: !fitToContentHeight ? { minHeight: 'calc(100vh - 8rem)' } : {}, overflowVisible: overflowVisible, takeFullScreenOnScroll: takeFullScreenOnScroll },
79
+ react_1.default.createElement(styled_1.StyledModalLargeBody, { takeFullScreenOnScroll: takeFullScreenOnScroll }, children),
80
+ showActionPanel &&
81
+ react_1.default.createElement("div", { style: { position: 'sticky', bottom: headerStyle === 'style1' ? 0 : '2.2rem' } },
82
+ react_1.default.createElement(Divider_1.Divider, null),
83
+ react_1.default.createElement(styled_1.StyledActionButtonsWrapper, { alignActions: alignActions },
84
+ typeof onConfirm === 'function'
85
+ ? react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onConfirm }, onConfirmText) // In some cases we want to pass button directly to the component as prop
86
+ : onConfirm,
87
+ react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: onClose }, onCloseText)))))); };
82
88
  return ((0, react_dom_1.createPortal)(react_1.default.createElement(styled_1.StyledModalLargeBg, null,
83
89
  react_1.default.createElement(styled_1.StyledModalLargeBgColor, { initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: {
84
90
  type: "tween",
@@ -96,12 +102,12 @@ var Modal = function (_a) {
96
102
  }, onAnimationComplete: function () {
97
103
  if (animPos.marginTop === initAnimPos.marginTop)
98
104
  handleClose();
99
- } }, genModalContents())) : (react_1.default.createElement(framer_motion_1.motion.div, { style: { width: "100%" }, initial: initAnimPos, animate: animPos, transition: {
105
+ }, onClick: function (e) { return e.stopPropagation(); } }, genModalContents())) : (react_1.default.createElement(framer_motion_1.motion.div, { style: { width: "100%" }, initial: initAnimPos, animate: animPos, transition: {
100
106
  type: "tween",
101
107
  ease: "easeOut",
102
108
  }, onAnimationComplete: function () {
103
109
  if (animPos.marginTop === initAnimPos.marginTop)
104
110
  handleClose();
105
- } }, genModalContents()))), document.getElementById("modal-root")));
111
+ }, onClick: function (e) { return e.stopPropagation(); } }, genModalContents()))), document.getElementById("modal-root")));
106
112
  };
107
113
  exports.Modal = Modal;
package/dist/components/Modals/Modal/styled.js CHANGED
@@ -48,25 +48,16 @@ exports.StyledModalLargeHeader = styled_components_1.default.header(templateObje
48
48
  return invert ? themes_1.colors.greyColor90 : greyColor5;
49
49
  });
50
50
  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) {
51
- var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
52
- return takeFullScreenOnScroll ? "auto" : "unset";
51
+ var takeFullScreenOnScroll = _a.takeFullScreenOnScroll, overflowVisible = _a.overflowVisible;
52
+ return overflowVisible ? "unset" : takeFullScreenOnScroll ? "auto" : 'unset';
53
53
  });
54
- 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) {
55
- var noPadding = _a.noPadding;
56
- return noPadding && '2rem';
57
- }, function (_a) {
54
+ 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) {
58
55
  var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
59
56
  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 "])));
60
57
  });
61
- 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) {
58
+ 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) {
62
59
  var alignActions = _a.alignActions;
63
60
  return alignActions === "right" ? 'flex-end' : '';
64
- }, function (_a) {
65
- var noPadding = _a.noPadding;
66
- return !noPadding && '2rem';
67
- }, function (_a) {
68
- var noPadding = _a.noPadding;
69
- return !noPadding ? '2rem' : '0.5rem';
70
61
  });
71
62
  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);
72
63
  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/ModalSmall/index.js CHANGED
@@ -57,7 +57,7 @@ var ModalSmall = function (_a) {
57
57
  }, onAnimationComplete: function () {
58
58
  if (animPos.marginTop === initAnimPos.marginTop)
59
59
  onClose();
60
- } }, genModalContents())) : (react_1.default.createElement(styled_1.StyledModalSmallContentWrapper
60
+ }, onClick: function (e) { return e.stopPropagation(); } }, genModalContents())) : (react_1.default.createElement(styled_1.StyledModalSmallContentWrapper
61
61
  // style={{ width: "100%" }}
62
62
  , {
63
63
  // style={{ width: "100%" }}
@@ -73,6 +73,6 @@ var ModalSmall = function (_a) {
73
73
  }, onAnimationComplete: function () {
74
74
  if (animPos.marginTop === initAnimPos.marginTop)
75
75
  onClose();
76
- } }, genModalContents()))), document.getElementById("modal-root")));
76
+ }, onClick: function (e) { return e.stopPropagation(); } }, genModalContents()))), document.getElementById("modal-root")));
77
77
  };
78
78
  exports.ModalSmall = ModalSmall;
package/dist/components/Modals/derivedComps/ModalConfirm/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export function ModalConfirm({ title, subTitle, onClose, onCloseText, children, onConfirm, onConfirmText, }: {
1
+ export function ModalConfirm({ title, subTitle, onClose, onCloseText, children, onConfirm, onConfirmText, alignActions }: {
2
2
  title: any;
3
3
  subTitle: any;
4
4
  onClose: any;
@@ -6,5 +6,6 @@ export function ModalConfirm({ title, subTitle, onClose, onCloseText, children,
6
6
  children: any;
7
7
  onConfirm: any;
8
8
  onConfirmText?: string;
9
+ alignActions?: string;
9
10
  }): React.JSX.Element;
10
11
  import React from "react";
package/dist/components/Modals/derivedComps/ModalConfirm/index.js CHANGED
@@ -28,11 +28,9 @@ var StyledFlexWrapper = styled_components_1.default.div(templateObject_1 || (tem
28
28
  return alignActions === "right" ? 'flex-end' : '';
29
29
  });
30
30
  var ModalConfirm = function (_a) {
31
- 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;
31
+ 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;
32
32
  return (react_1.default.createElement(ModalSmall_1.ModalSmall, __assign({}, { title: title, subTitle: subTitle, onClose: onClose, children: children }),
33
- react_1.default.createElement(StyledFlexWrapper
34
- // alignActions={alignActions}
35
- , null,
33
+ react_1.default.createElement(StyledFlexWrapper, { alignActions: alignActions },
36
34
  react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onConfirm }, onConfirmText),
37
35
  react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: onClose }, onCloseText))));
38
36
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.86.0",
3
+ "version": "2.87.0",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",