fix: hide menu toggles when no extra options [fixes igeligel#2]

zorfling · Oct 26, 2021 · 809b13f · 809b13f
1 parent 18b8ed3
commit 809b13f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/src/MoreOptionsIconContainer.tsx b/src/MoreOptionsIconContainer.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import styled from 'styled-components';
 import { IconChevronDown } from './IconChevronDown';
 import { IconChevronUp } from './IconChevronUp';
@@ -37,6 +37,7 @@ type MoreOptionsIconContainerProps = {
     | undefined;
   active: boolean;
   right?: boolean;
+  style?: CSSProperties;
 };
 
 type ReactRef =
@@ -47,12 +48,13 @@ type ReactRef =
 
 export const MoreOptionsIconContainer = React.forwardRef(
   (props: MoreOptionsIconContainerProps, ref: ReactRef) => {
-    const { onClick, active, right } = props;
+    const { onClick, active, right, style } = props;
     return (
       <MoreOptionsIconContainerStyle
         right={right || false}
         ref={ref}
         onClick={onClick}
+        style={style}
       >
         {!active && <IconChevronDown />}
         {active && <IconChevronUp />}

diff --git a/src/OptionsOverlay.tsx b/src/OptionsOverlay.tsx
@@ -74,7 +74,7 @@ export const OptionsOverlay = <T extends Options>(
       minHeight={`${convertCardSizes.height}px`}
       maxHeight={`${convertCardSizes.height}px`}
     >
-      {shownMenuOptions.map((option) => {
+      {shownMenuOptions.map(option => {
         return (
           <OverlayOption
             key={option.name}

diff --git a/src/index.tsx b/src/index.tsx
@@ -123,7 +123,7 @@ export const InOutTextarea: FC<Props> = props => {
                 if (a.active) return -1;
                 return 0;
               })
-              .map((option) => {
+              .map(option => {
                 return (
                   <InMenuOptionStuff
                     key={option.name}
@@ -142,6 +142,9 @@ export const InOutTextarea: FC<Props> = props => {
             ref={inOptionsMenuRef}
             onClick={onInMoreOptionsClick}
             active={showAdditionalInOptions}
+            style={{
+              visibility: menuInOptions.length > 0 ? 'visible' : 'hidden',
+            }}
           />
         </SideBar>
         <Spacer />
@@ -153,7 +156,7 @@ export const InOutTextarea: FC<Props> = props => {
                 if (a.active) return -1;
                 return 0;
               })
-              .map((option) => {
+              .map(option => {
                 return (
                   <OutMenuOptionStuff
                     key={option.name}
@@ -173,6 +176,9 @@ export const InOutTextarea: FC<Props> = props => {
             ref={outOptionsMenuRef}
             onClick={onOutMoreOptionsClick}
             active={showAdditionalOutOptions}
+            style={{
+              visibility: menuOutOptions.length > 0 ? 'visible' : 'hidden',
+            }}
           />
         </SideBar>
       </CaseBar>