react-dynamic-help - npm Package Compare versions

Comparing version 0.14.1 to 0.15.0

lib/es5/components/HelpItem.js

@@ -85,3 +85,36 @@ "use strict";
     const { appTargetsState } = React.useContext(DynamicHelp_1.SystemContext);
+    const initialWidth = React.useRef(0);
+    const thisItem = React.useRef(null);
     const target = appTargetsState.targetItems[props.target];
+    React.useEffect(() => {
+        if (thisItem.current) {
+            const disp = thisItem.current;
+            console.log("HELP ITEM post render", disp.getBoundingClientRect(), window.innerWidth);
+            // Here we try to make sure that we ended up on the screen, and if not then
+            // reposition to a sensible place
+            const vw = window.innerWidth;
+            const vh = window.innerHeight;
+            const { top, bottom, left, right } = disp.getBoundingClientRect();
+            const width = right - left;
+            const height = bottom - top;
+            if (left < 0) {
+                disp.style.left = "0px";
+                const newRight = vw - width;
+                disp.style.right = `${newRight}px`;
+            }
+            else if (right > initialWidth.current) {
+                disp.style.right = "0px";
+                const newLeft = initialWidth.current - width;
+                disp.style.left = `${newLeft}px`;
+            }
+            if (top < 0) {
+                disp.style.top = "0px";
+                const newBottom = vh - height;
+                disp.style.bottom = `${newBottom}px`;
+            }
+            // we don't try to move it up from below the bottom, because if it is down there,
+            // then so is the element it refers to.
+        }
+    });
+    initialWidth.current = window.innerWidth;
     if (target &&
@@ -91,3 +124,4 @@ ((_b = props.flowState) === null || _b === void 0 ? void 0 : _b.visible) &&
         props.systemEnabled) {
-        // what follows is maths to attach the `anchor` corner of this element (itemPosition) to
+        // We need to render ourselves.
+        // What follows is maths to attach the `anchor` corner of this element (itemPosition) to
         // the `position` corner of the target, taking into accound that bottom and right are measured
@@ -194,8 +228,8 @@ // from the bottom and right of the windown respectively for css absolute position, but they are measured
         if (debug) {
-            console.log("rendering HelpItem", props.children);
+            console.log("rendering HelpItem", initialWidth.current, props.children);
         }
         // Render...
         return ReactDOM.createPortal((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 
-            /* the -custom element allows the app to be more specific and hence override our css */
-            "rdh-help-item rdh-help-item-custom", id: props.id, style: Object.assign({ position: "absolute", margin: itemMargin, flexDirection: layout === "right" ? "row" : "row-reverse" }, itemPosition) }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "rdh-help-item-content" }, { children: props.children })), (0, jsx_runtime_1.jsx)("sup", Object.assign({ className: `rdh-help-item-dismiss ${dismissStyle}`, onClick: props.signalDismissed }, { children: "\u2612" }))] })), document.body);
+            /* the -custom piece allows the app to be more specific and hence override our css */
+            "rdh-help-item rdh-help-item-custom", ref: thisItem, id: props.id, style: Object.assign({ position: "absolute", margin: itemMargin, flexDirection: layout === "right" ? "row" : "row-reverse" }, itemPosition) }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "rdh-help-item-content" }, { children: props.children })), (0, jsx_runtime_1.jsx)("sup", Object.assign({ className: `rdh-help-item-dismiss ${dismissStyle}`, onClick: props.signalDismissed }, { children: "\u2612" }))] })), document.body);
     }
@@ -202,0 +236,0 @@ else {

lib/es6/components/HelpItem.js

@@ -59,3 +59,36 @@ var __rest = (this && this.__rest) || function (s, e) {
     const { appTargetsState } = React.useContext(SystemContext);
+    const initialWidth = React.useRef(0);
+    const thisItem = React.useRef(null);
     const target = appTargetsState.targetItems[props.target];
+    React.useEffect(() => {
+        if (thisItem.current) {
+            const disp = thisItem.current;
+            console.log("HELP ITEM post render", disp.getBoundingClientRect(), window.innerWidth);
+            // Here we try to make sure that we ended up on the screen, and if not then
+            // reposition to a sensible place
+            const vw = window.innerWidth;
+            const vh = window.innerHeight;
+            const { top, bottom, left, right } = disp.getBoundingClientRect();
+            const width = right - left;
+            const height = bottom - top;
+            if (left < 0) {
+                disp.style.left = "0px";
+                const newRight = vw - width;
+                disp.style.right = `${newRight}px`;
+            }
+            else if (right > initialWidth.current) {
+                disp.style.right = "0px";
+                const newLeft = initialWidth.current - width;
+                disp.style.left = `${newLeft}px`;
+            }
+            if (top < 0) {
+                disp.style.top = "0px";
+                const newBottom = vh - height;
+                disp.style.bottom = `${newBottom}px`;
+            }
+            // we don't try to move it up from below the bottom, because if it is down there,
+            // then so is the element it refers to.
+        }
+    });
+    initialWidth.current = window.innerWidth;
     if (target &&
@@ -65,3 +98,4 @@ ((_b = props.flowState) === null || _b === void 0 ? void 0 : _b.visible) &&
         props.systemEnabled) {
-        // what follows is maths to attach the `anchor` corner of this element (itemPosition) to
+        // We need to render ourselves.
+        // What follows is maths to attach the `anchor` corner of this element (itemPosition) to
         // the `position` corner of the target, taking into accound that bottom and right are measured
@@ -168,8 +202,8 @@ // from the bottom and right of the windown respectively for css absolute position, but they are measured
         if (debug) {
-            console.log("rendering HelpItem", props.children);
+            console.log("rendering HelpItem", initialWidth.current, props.children);
         }
         // Render...
         return ReactDOM.createPortal(_jsxs("div", Object.assign({ className: 
-            /* the -custom element allows the app to be more specific and hence override our css */
-            "rdh-help-item rdh-help-item-custom", id: props.id, style: Object.assign({ position: "absolute", margin: itemMargin, flexDirection: layout === "right" ? "row" : "row-reverse" }, itemPosition) }, { children: [_jsx("div", Object.assign({ className: "rdh-help-item-content" }, { children: props.children })), _jsx("sup", Object.assign({ className: `rdh-help-item-dismiss ${dismissStyle}`, onClick: props.signalDismissed }, { children: "\u2612" }))] })), document.body);
+            /* the -custom piece allows the app to be more specific and hence override our css */
+            "rdh-help-item rdh-help-item-custom", ref: thisItem, id: props.id, style: Object.assign({ position: "absolute", margin: itemMargin, flexDirection: layout === "right" ? "row" : "row-reverse" }, itemPosition) }, { children: [_jsx("div", Object.assign({ className: "rdh-help-item-content" }, { children: props.children })), _jsx("sup", Object.assign({ className: `rdh-help-item-dismiss ${dismissStyle}`, onClick: props.signalDismissed }, { children: "\u2612" }))] })), document.body);
     }
@@ -176,0 +210,0 @@ else {

package.json

 {
   "name": "react-dynamic-help",
   "description": "React Dynamic Help - Create flows of helpful popups in your React App",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "repository": {
@@ -6,0 +6,0 @@ "type": "git",

No alert changes

Improved metrics

Total package byte prevSize

104018

increased by3.04%

Lines of code

2189

increased by3.21%

No dependency changes