dialog hook

ibexa · Oct 31, 2024 · 076ae43 · 076ae43
1 parent b242305
commit 076ae43
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 12 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/helpers/react.helper.js b/src/bundle/Resources/public/js/scripts/helpers/react.helper.js
@@ -11,11 +11,14 @@ const createDynamicRoot = (contextDOMElement = window.document.body, id) => {
 
     const reactRoot = window.ReactDOM.createRoot(rootDOMElement);
 
-    return { reactRoot, rootDOMElement };
+    return reactRoot;
 };
 
-const removeDynamicRoot = (rootDOMElement) => {
-    rootDOMElement.remove();
+const removeDynamicRoot = (reactRoot) => {
+    const rootDOMElement = reactRoot._internalRoot?.containerInfo;
+
+    reactRoot.unmount();
+    rootDOMElement?.remove();
 };
 
 export { createDynamicRoot, removeDynamicRoot };
diff --git a/src/bundle/Resources/translations/popup_menu.en.xliff b/src/bundle/Resources/translations/popup_menu.en.xliff
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" xmlns:jms="urn:jms:translation" version="1.2">
+  <file source-language="en" target-language="en" datatype="plaintext" original="not.available">
+    <header>
+      <tool tool-id="JMSTranslationBundle" tool-name="JMSTranslationBundle" tool-version="1.1.0-DEV"/>
+      <note>The source node in most cases contains the sample message as written by the developer. If it looks like a dot-delimitted string such as "form.label.firstname", then the developer has not provided a default message.</note>
+    </header>
+    <body>
+      <trans-unit id="6229ba6fcf2f54495e3381f913742470bb949a28" resname="popup_menu.placeholder">
+        <source>Search...</source>
+        <target state="new">Search...</target>
+        <note>key: popup_menu.placeholder</note>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>
diff --git a/src/bundle/ui-dev/src/modules/common/draggable-dialog/draggable.dialog.js b/src/bundle/ui-dev/src/modules/common/draggable-dialog/draggable.dialog.js
@@ -6,13 +6,13 @@ import { createCssClassNames } from '../helpers/css.class.names';
 
 export const DraggableContext = createContext();
 
-const DraggableDialog = ({ children, initialCoords }) => {
+const DraggableDialog = ({ children, referenceElement, positionOffset }) => {
     const rootDOMElement = getRootDOMElement();
     const containerRef = useRef();
     const dragOffsetPosition = useRef({ x: 0, y: 0 });
     const containerSize = useRef({ width: 0, height: 0 });
     const [isDragging, setIsDragging] = useState(false);
-    const [coords, setCoords] = useState(initialCoords);
+    const [coords, setCoords] = useState({ x: 0, y: 0 });
     const containerAttrs = {
         ref: containerRef,
         className: 'c-draggable-dialog',
@@ -95,6 +95,16 @@ const DraggableDialog = ({ children, initialCoords }) => {
         };
     }, [isDragging]);
 
+    useEffect(() => {
+        const { top: referenceTop, left: referenceLeft } = referenceElement.getBoundingClientRect();
+        const { x: offsetX, y: offsetY } = positionOffset(referenceElement);
+
+        setCoords({
+            top: referenceTop + offsetY,
+            left: referenceLeft + offsetX,
+        });
+    }, [referenceElement]);
+
     return (
         <DraggableContext.Provider
             value={{
@@ -107,15 +117,14 @@ const DraggableDialog = ({ children, initialCoords }) => {
 };
 
 DraggableDialog.propTypes = {
-    initialCoords: PropTypes.shape({
-        x: PropTypes.number.isRequired,
-        y: PropTypes.number.isRequired,
-    }).isRequired,
+    referenceElement: PropTypes.node.isRequired,
     children: PropTypes.node,
+    positionOffset: PropTypes.func,
 };
 
 DraggableDialog.defaultProps = {
     children: null,
+    positionOffset: () => ({ x: 0, y: 0 }),
 };
 
 export default DraggableDialog;
diff --git a/src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.js b/src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.js
@@ -72,8 +72,6 @@ const PopupMenu = ({ extraClasses, footer, items, onItemClick, positionOffset, r
         const { height: containerHeight } = containerRef.current.getBoundingClientRect();
         const bottom = referenceTop + containerHeight;
 
-        itemsStyles.top = referenceTop;
-
         if (window.innerHeight - bottom > MIN_ITEMS_LIST_HEIGHT) {
             const { x: offsetX, y: offsetY } = positionOffset(referenceElement, 'bottom');
 
@@ -171,7 +169,7 @@ const PopupMenu = ({ extraClasses, footer, items, onItemClick, positionOffset, r
 };
 
 PopupMenu.propTypes = {
-    referenceElement: PropTypes.isRequired,
+    referenceElement: PropTypes.node.isRequired,
     extraClasses: PropTypes.string,
     footer: PropTypes.node,
     items: PropTypes.arrayOf({