From 706a0aa9e55026f08b5568f51f0fa208195fff0e Mon Sep 17 00:00:00 2001
From: manash athparia <athmanash@gmail.com>
Date: Wed, 22 Jul 2020 22:18:26 +0530
Subject: [PATCH] add tooltip

---
 src/components/ToolbarButton.tsx | 86 +++++++++++++++++---------------
 1 file changed, 46 insertions(+), 40 deletions(-)

diff --git a/src/components/ToolbarButton.tsx b/src/components/ToolbarButton.tsx
index ef3e17a..1d1930d 100644
--- a/src/components/ToolbarButton.tsx
+++ b/src/components/ToolbarButton.tsx
@@ -1,58 +1,64 @@
-import React, { FunctionComponent } from 'react'
-import IconButton from '@material-ui/core/IconButton'
-import { TToolbarComponentProps, TToolbarButtonSize } from './Toolbar'
+import React, { FunctionComponent } from 'react';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
+import { TToolbarComponentProps, TToolbarButtonSize } from './Toolbar';
 
 interface IToolbarButtonProps {
-    id?: string
-    editorId?: string
-    label: string
-    style: string
-    type: string
-    active?: boolean
-    icon?: JSX.Element
-    onClick?: any
-    inlineMode?: boolean
-    disabled?: boolean
-    size?: TToolbarButtonSize
-    component?: FunctionComponent<TToolbarComponentProps>
+    id?: string;
+    editorId?: string;
+    label: string;
+    style: string;
+    type: string;
+    active?: boolean;
+    icon?: JSX.Element;
+    onClick?: any;
+    inlineMode?: boolean;
+    disabled?: boolean;
+    size?: TToolbarButtonSize;
+    component?: FunctionComponent<TToolbarComponentProps>;
 }
 
 const ToolbarButton: FunctionComponent<IToolbarButtonProps> = (props) => {
-    const size = !props.inlineMode ? (props.size || "medium") : "small"
-    const toolbarId = props.inlineMode ? "-toolbar" : ""
-    const editorId = props.editorId || "mui-rte"
-    const elemId = editorId + "-" + (props.id || props.label) + "-button" + toolbarId
+    const size = !props.inlineMode ? props.size || 'medium' : 'small';
+    const toolbarId = props.inlineMode ? '-toolbar' : '';
+    const editorId = props.editorId || 'mui-rte';
+    const elemId =
+        editorId + '-' + (props.id || props.label) + '-button' + toolbarId;
     const sharedProps = {
         id: elemId,
         onMouseDown: (e: React.MouseEvent) => {
-            e.preventDefault()
+            e.preventDefault();
             if (props.onClick) {
-                props.onClick(props.style, props.type, elemId, props.inlineMode)
+                props.onClick(
+                    props.style,
+                    props.type,
+                    elemId,
+                    props.inlineMode
+                );
             }
         },
-        disabled: props.disabled || false
-    }
+        disabled: props.disabled || false,
+    };
     if (props.icon) {
         return (
-            <IconButton
-                {...sharedProps}
-                aria-label={props.label}
-                color={props.active ? "primary" : "default"}
-                size={size}
-            >
-                {props.icon}
-            </IconButton>
-        )
+            <Tooltip title={props.label}>
+                <IconButton
+                    {...sharedProps}
+                    aria-label={props.label}
+                    color={props.active ? 'primary' : 'default'}
+                    size={size}
+                >
+                    {props.icon}
+                </IconButton>
+            </Tooltip>
+        );
     }
     if (props.component) {
         return (
-            <props.component 
-                {...sharedProps}
-                active={props.active || false}
-            />
-        )
+            <props.component {...sharedProps} active={props.active || false} />
+        );
     }
-    return null
-}
+    return null;
+};
 
-export default ToolbarButton
\ No newline at end of file
+export default ToolbarButton;