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;