From 809b13f1c4a529dcc41729c9f99fbac3a8c717ed Mon Sep 17 00:00:00 2001
From: Chris Colborne <zorfling@gmail.com>
Date: Tue, 26 Oct 2021 21:26:31 +1000
Subject: [PATCH] fix: hide menu toggles when no extra options [fixes #2]

---
 src/MoreOptionsIconContainer.tsx |  6 ++++--
 src/OptionsOverlay.tsx           |  2 +-
 src/index.tsx                    | 10 ++++++++--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/MoreOptionsIconContainer.tsx b/src/MoreOptionsIconContainer.tsx
index 22b25b4..a0702ea 100644
--- 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
index ff33f9d..b3cc98c 100644
--- 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
index 83d88b3..82a53c5 100644
--- 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>