From 964c81cb2136f4bc4f696f03626ea648152996cc Mon Sep 17 00:00:00 2001
From: Szymon Dzialowski <szymon.dzialowski@gmail.com>
Date: Tue, 10 Dec 2024 01:11:36 +0000
Subject: [PATCH] single object instead of an array

---
 pages/js/popper/popper.entry.js | 56 ++++++++++++++++-----------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/pages/js/popper/popper.entry.js b/pages/js/popper/popper.entry.js
index 7ffb021a..7dde58d4 100644
--- a/pages/js/popper/popper.entry.js
+++ b/pages/js/popper/popper.entry.js
@@ -19,7 +19,7 @@ function useTooltip(generateOptions) {
   const [popperElement, setPopperElement] = useState(null);
   const [arrowElement, setArrowElement] = useState(null);
   const { styles, attributes } = usePopper(referenceElement, popperElement, generateOptions(arrowElement));
-  return [setReferenceElement, setPopperElement, setArrowElement, attributes, styles];
+  return { setReferenceElement, setPopperElement, setArrowElement, attributes, styles };
 }
 /**
  * Extended hook for hover
@@ -29,18 +29,19 @@ function useTooltipOnHover(generateOptions, defautShow = false) {
 
   const [show, setShow] = useState(defautShow);
 
-  return [
+  return {
     ...props,
     show,
-    {
+    events: {
       onMouseEnter: () => setShow(true),
       onMouseLeave: () => setShow(false),
     },
-  ];
+  };
 }
 
 const AlwaysShow = () => {
-  const [setReferenceElement, setPopperElement, setArrowElement, attributes, styles] = useTooltip((arrowElement) => ({
+  //   const [setReferenceElement, setPopperElement, setArrowElement, attributes, styles] = useTooltip((arrowElement) => ({
+  const tooltip = useTooltip((arrowElement) => ({
     modifiers: [
       {
         name: "offset",
@@ -54,53 +55,52 @@ const AlwaysShow = () => {
 
   return (
     <>
-      <button type="button" ref={setReferenceElement}>
+      <button type="button" ref={tooltip.setReferenceElement}>
         Fixed popper target
       </button>
 
       <div
-        ref={setPopperElement}
-        style={styles.popper}
+        ref={tooltip.setPopperElement}
+        style={tooltip.styles.popper}
         className="tooltipstyle show"
-        {...attributes.popper}
+        {...tooltip.attributes.popper}
       >
         Fixed popper
-        <div ref={setArrowElement} style={styles.arrow} className="arrow" data-popper-arrow />
+        <div ref={tooltip.setArrowElement} style={tooltip.styles.arrow} className="arrow" data-popper-arrow />
       </div>
     </>
   );
 };
 
 const OnHover = () => {
-  const [setReferenceElement, setPopperElement, setArrowElement, attributes, styles, show, events] = useTooltipOnHover(
-    (arrowElement) => ({
-      modifiers: [
-        {
-          name: "offset",
-          options: {
-            offset: [0, 8],
-            element: arrowElement,
-          },
+  //   const [setReferenceElement, setPopperElement, setArrowElement, attributes, styles, show, events] = useTooltipOnHover(
+  const tooltip = useTooltipOnHover((arrowElement) => ({
+    modifiers: [
+      {
+        name: "offset",
+        options: {
+          offset: [0, 8],
+          element: arrowElement,
         },
-      ],
-    })
-  );
+      },
+    ],
+  }));
 
   return (
     <>
-      <button type="button" ref={setReferenceElement} {...events}>
+      <button type="button" ref={tooltip.setReferenceElement} {...tooltip.events}>
         On hover target
       </button>
 
-      {show && (
+      {tooltip.show && (
         <div
-          ref={setPopperElement}
-          style={styles.popper}
+          ref={tooltip.setPopperElement}
+          style={tooltip.styles.popper}
           className="tooltipstyle show"
-          {...attributes.popper}
+          {...tooltip.attributes.popper}
         >
           On hover
-          <div ref={setArrowElement} style={styles.arrow} className="arrow" data-popper-arrow />
+          <div ref={tooltip.setArrowElement} style={tooltip.styles.arrow} className="arrow" data-popper-arrow />
         </div>
       )}
     </>