#2512 Toolbar arrow is active after the Ketcher with iFrame is loaded…

… and disappears when you click on it (#2607) * #2512 - toolbar arrows - unnecessary margins removed * #2512 - visibility threshold is set to 1 for the right and left toolbars * #2512 - scroll end ref elements threshold adjusted * 2512 - the toolbar arrow scroll component apprears only when the content length is greater than the view area for that toolbar * #2512 - cut unnecessary useInView params --------- Co-authored-by: Dmitrii Vasilev <dmitrii.vasilev@clarivate.com>
epam · May 17, 2023 · 191065b · 191065b
1 parent 70edd20
commit 191065b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 21 deletions.
diff --git a/packages/ketcher-react/src/script/ui/views/toolbars/LeftToolbar/LeftToolbar.module.less b/packages/ketcher-react/src/script/ui/views/toolbars/LeftToolbar/LeftToolbar.module.less
@@ -43,7 +43,7 @@
 }
 
 .groupItem {
-  margin: 2px;
+  margin: 2px 0;
 
   // TODO: move to action button styles, when all buttons will have same style
   svg {

diff --git a/packages/ketcher-react/src/script/ui/views/toolbars/LeftToolbar/LeftToolbar.tsx b/packages/ketcher-react/src/script/ui/views/toolbars/LeftToolbar/LeftToolbar.tsx
@@ -57,8 +57,8 @@ const LeftToolbar = (props: Props) => {
   const { className, ...rest } = props
   const { ref, height } = useResizeObserver<HTMLDivElement>()
   const scrollRef = useRef() as MutableRefObject<HTMLDivElement>
-  const [startRef, startInView] = useInView({ threshold: 0.8 })
-  const [endRef, endInView] = useInView({ threshold: 0.8 })
+  const [startRef, startInView] = useInView({ threshold: 1 })
+  const [endRef, endInView] = useInView({ threshold: 1 })
   const sizeRef = useRef() as MutableRefObject<HTMLDivElement>
 
   type ItemProps = {
@@ -195,12 +195,14 @@ const LeftToolbar = (props: Props) => {
           <Group className={classes.groupItem} items={[{ id: 'text' }]} />
         </div>
       </div>
-      <ArrowScroll
-        startInView={startInView}
-        endInView={endInView}
-        scrollUp={scrollUp}
-        scrollDown={scrollDown}
-      />
+      {height && scrollRef?.current?.scrollHeight > height && (
+        <ArrowScroll
+          startInView={startInView}
+          endInView={endInView}
+          scrollUp={scrollUp}
+          scrollDown={scrollDown}
+        />
+      )}
     </div>
   )
 }

diff --git a/packages/ketcher-react/src/script/ui/views/toolbars/RightToolbar/RightToolbar.tsx b/packages/ketcher-react/src/script/ui/views/toolbars/RightToolbar/RightToolbar.tsx
@@ -27,6 +27,7 @@ import { basicAtoms } from '../../../action/atoms'
 import classes from './RightToolbar.module.less'
 import clsx from 'clsx'
 import { useInView } from 'react-intersection-observer'
+import { useResizeObserver } from '../../../../../hooks'
 
 const Group: FC<{ className?: string } & PropsWithChildren> = ({
   children,
@@ -50,8 +51,9 @@ type Props = RightToolbarProps & RightToolbarCallProps
 const RightToolbar = (props: Props) => {
   const { className, ...rest } = props
   const { active, onAction, freqAtoms } = rest
-  const [startRef, startInView] = useInView({ threshold: 0.95 })
-  const [endRef, endInView] = useInView({ threshold: 0.8 })
+  const { ref, height } = useResizeObserver<HTMLDivElement>()
+  const [startRef, startInView] = useInView({ threshold: 1 })
+  const [endRef, endInView] = useInView({ threshold: 1 })
   const sizeRef = useRef() as MutableRefObject<HTMLDivElement>
   const scrollRef = useRef() as MutableRefObject<HTMLDivElement>
 
@@ -64,12 +66,17 @@ const RightToolbar = (props: Props) => {
   }
 
   return (
-    <div className={clsx(classes.root, className)}>
+    <div className={clsx(classes.root, className)} ref={ref}>
       <div className={classes.buttons} ref={scrollRef}>
         <Group className={classes.atomsList}>
           <AtomsList
             ref={startRef}
-            atoms={basicAtoms}
+            atoms={basicAtoms.slice(0, 1)}
+            active={active}
+            onAction={onAction}
+          />
+          <AtomsList
+            atoms={basicAtoms.slice(1)}
             active={active}
             onAction={onAction}
           />
@@ -80,17 +87,20 @@ const RightToolbar = (props: Props) => {
         <Group>
           <div ref={sizeRef}>
             <ToolbarGroupItem id="any-atom" {...rest} />
-            <ToolbarGroupItem id="extended-table" {...rest} />
+            <div ref={endRef}>
+              <ToolbarGroupItem id="extended-table" {...rest} />
+            </div>
           </div>
         </Group>
-        <div ref={endRef}></div>
       </div>
-      <ArrowScroll
-        startInView={startInView}
-        endInView={endInView}
-        scrollUp={scrollUp}
-        scrollDown={scrollDown}
-      />
+      {height && scrollRef?.current?.scrollHeight > height && (
+        <ArrowScroll
+          startInView={startInView}
+          endInView={endInView}
+          scrollUp={scrollUp}
+          scrollDown={scrollDown}
+        />
+      )}
     </div>
   )
 }