drag component

apps/remix-ide/src/app-component.js

@@ -1,5 +1,4 @@
 'use strict'
-import PanelsResize from './lib/panels-resize'
 import { RunTab, makeUdapp } from './app/udapp'
 import { RemixEngine } from './remixEngine'
 import { RemixAppManager } from './remixAppManager'

libs/remix-ui/app/src/lib/remix-app/dragbar/dragbar.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react'
+import Draggable from 'react-draggable'
+
+interface IRemixDragBarUi {
+  refObject: React.MutableRefObject<any>;
+  setHideStatus: (hide: boolean) => void;
+}
+
+const DragBar = (props: IRemixDragBarUi) => {
+  const [dragState, setDragState] = useState<boolean>(false)
+  const [dragBarPos, setDragBarPos] = useState<number>(0)
+
+  function stopDrag (e: MouseEvent, data: any) {
+    console.log(data)
+    setDragState(false)
+    props.refObject.current.style.width = (320 + data.x) + 'px'
+    console.log(props.refObject.current.offsetWidth)
+    if ((320 + data.x) < 250) {
+      props.setHideStatus(true)
+      setDragBarPos(41 - 360)
+    } else {
+      props.setHideStatus(false)
+      setDragBarPos(props.refObject.current.offsetWidth - 320)
+    }
+  }
+
+  function startDrag (e: MouseEvent, data: any) {
+    console.log('start')
+    setDragState(true)
+  }
+  return <Draggable position={{ x: dragBarPos, y: 0 }} onStart={startDrag} onStop={stopDrag} axis="x">
+    <div className={`dragbar ${dragState ? 'ondrag' : ''}`}></div>
+  </Draggable>
+}
+
+export default DragBar

libs/remix-ui/app/src/lib/remix-app/remix-app.tsx

@@ -6,6 +6,7 @@ import MatomoDialog from './modals/matomo'
 import AlertModal from './modals/alert'
 import AppContext from './context/context'
 import Draggable from 'react-draggable'
+import DragBar from './dragbar/dragbar'
 interface IRemixAppUi {
   app: any
 }
@@ -65,7 +66,7 @@ const RemixApp = (props: IRemixAppUi) => {
     })
     props.app.sidePanel.events.on('showing', () => {
       console.log('showing')
-      setHideSidePanel(true)
+      setHideSidePanel(false)
     })
   }
 
@@ -77,25 +78,6 @@ const RemixApp = (props: IRemixAppUi) => {
     hiddenPanel: <div ref={hiddenPanelRef}></div>
   }
 
-  function stopDragSidePanel (e: MouseEvent, data: any) {
-    console.log(data)
-    setDragState(false)
-    sidePanelRef.current.style.width = (320 + data.x) + 'px'
-    console.log(sidePanelRef.current.offsetWidth)
-    if ((320 + data.x) < 250) {
-      setHideSidePanel(true)
-      setDragBarPos(41 - 360)
-    } else {
-      setHideSidePanel(false)
-      setDragBarPos(sidePanelRef.current.offsetWidth - 320)
-    }
-  }
-
-  function startDragSidePanel (e: MouseEvent, data: any) {
-    console.log('start')
-    setDragState(true)
-  }
-
   return (
     <AppContext.Provider value={{ settings: props.app.settings, showMatamo: props.app.showMatamo, appManager: props.app.appManager }}>
       <RemixSplashScreen hide={appReady}></RemixSplashScreen>
@@ -105,9 +87,7 @@ const RemixApp = (props: IRemixAppUi) => {
       <div className={`remixIDE ${appReady ? '' : 'd-none'}`} data-id="remixIDE">
         {components.iconPanel}
         {components.sidePanel}
-        <Draggable position={{ x: dragBarPos, y: 0 }} onStart={startDragSidePanel} onStop={stopDragSidePanel} axis="x">
-          <div className={`dragbar ${dragState ? 'ondrag' : ''}`}></div>
-        </Draggable>
+        <DragBar refObject={sidePanelRef} setHideStatus={setHideSidePanel}></DragBar>
         {components.mainPanel}
 
       </div>