added custom hook instead of controller

src/components/RevealPanel/RevealPanel.test.js

@@ -7,25 +7,8 @@ function Component() {
     <div className="demo" style={{ position: 'relative' }}>
       e and scrambled it to make a type specimen book.
       It has survived not only five centuries, but also
-      the leap into electronic typesetting, remaining
-      essentially unchanged. It was popularised in the
-      1960s with the release of Letraset sheets
-      containing Lorem Ipsum passages,
-      and more recently with desktop publishing software
-      like Aldus PageMaker including verse and scrambled it
-      to make a type specimen book. It has survived not only
-      five centuries, but also the leap into electronic typesetting,
-      remaining essentially unchanged. It was popularised in the 1960s
-      with the release of Letraset sheets containing Lorem Ipsum passages,
-      and more recently with desktop publishing software like Aldus PageMaker including vers
       <RevealPanel height="50%">
         Panel content to make a type specimen book.
-        to make a type specimen book. It has survived not only
-        five centuries, but also the leap into electronic typesetting,
-        remaining essentially unchanged. It was popularised in the 1960s
-        with the release of Letraset sheets containing Lorem Ipsum passages,
-        and more recently with desktop publishing software like Aldus PageMaker including vers
-
       </RevealPanel>
     </div>
   );

src/components/RevealPanel/index.js

@@ -6,7 +6,7 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 import { createPortal } from 'react-dom';
-import GetRevealPanelHandler from './js/RevealPanelController';
+import { useRevealPanelService } from './js/RevealPanelService';
 
 function RevealPanelHeaderLeft({ children }) {
   // eslint-disable-next-line react/jsx-no-useless-fragment
@@ -46,52 +46,52 @@ const RevealPanel = forwardRef(({
   const gutterRef = useRef(null);
   const wrapperRef = useRef(null);
 
-  const panelControllerRef = useRef(GetRevealPanelHandler());
+  const panelService = useRevealPanelService();
 
   useEffect(() => {
     if (!panelRef.current || !gutterRef.current || !wrapperRef.current) {
       return;
     }
 
-    const controller = panelControllerRef.current;
-    if (!controller) {
+    if (!panelService) {
       return;
     }
 
-    controller.setRefs(wrapperRef.current, panelRef.current, gutterRef.current);
-    controller.on('onHeightChange', onHeightChange);
-    controller.on('onDragStart', onDragStart);
-    controller.on('onDragEnd', onDragEnd);
-    controller.setHeight(height, 'initialize');
+    panelService.setRefs(wrapperRef.current, panelRef.current, gutterRef.current);
+    panelService.on('onHeightChange', onHeightChange);
+    panelService.on('onDragStart', onDragStart);
+    panelService.on('onDragEnd', onDragEnd);
+    panelService.setHeight(height, 'initialize');
 
     // eslint-disable-next-line consistent-return
     return () => {
-      controller.unbindEvents();
+      panelService.unbindEvents();
     };
   }, []);
 
   useImperativeHandle(
     ref,
     () => {
-      const ctl = panelControllerRef.current;
+      // bind this context
+      const bind = (func) => func.bind(panelService);
 
       return {
-        getHeight: ctl.getHeight.bind(ctl),
-        setHeight: ctl.setHeight.bind(ctl),
-        hide: ctl.hide.bind(ctl),
-        show: ctl.show.bind(ctl),
-        isHidden: ctl.isHidden.bind(ctl),
-        deinit: ctl.deinit.bind(ctl),
-        on: ctl.on.bind(ctl),
-        off: ctl.off.bind(ctl),
+        getHeight: bind(panelService.getHeight),
+        setHeight: bind(panelService.setHeight),
+        hide: bind(panelService.hide),
+        show: bind(panelService.show),
+        isHidden: bind(panelService.isHidden),
+        deinit: bind(panelService.deinit),
+        on: bind(panelService.on),
+        off: bind(panelService.off),
       };
     },
     [],
   );
 
   let headerLeft = null;
   let headerRight = null;
-  let contents = [];
+  const contents = [];
 
   React.Children.forEach(children, (child) => {
     if (child && React.isValidElement(child)) {

src/components/RevealPanel/js/RevealPanelController.js → src/components/RevealPanel/js/RevealPanelService.js

@@ -1,9 +1,11 @@
+import { useRef } from 'react';
+
 /**
- * RevealPanelController is a class that manages the resizing of a panel element.
+ * RevealPanelService is a class that manages the resizing of a panel element.
  * It provides methods to set the panel's height, hide and show it, and attach
  * event listeners for resizing.
  */
-class RevealPanelController {
+class RevealPanelService {
   #state = null; // Private state for mouse interactions.
 
   #panel = null; // The panel element to be resized.
@@ -258,6 +260,7 @@ class RevealPanelController {
   }
 }
 
-export default function GetRevealPanelHandler() {
-  return new RevealPanelController();
-}
+export const useRevealPanelService = () => {
+  const revealPanelServiceRef = useRef(new RevealPanelService());
+  return revealPanelServiceRef.current;
+};