feat: editor actions & actionBar support tooltip (#260)

mortalYoung · web-flow · commit 325eea001b4c · 2021-07-23T10:40:37.000+08:00
* feat: add tooltip

* feat: editor actions &amp; actionBar support tooltip

* fix: update actionBar snapshot

* test: improve actionBar unit test

* fix: improve docs api

* fix: extract color/background-color into color theme
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
         "monaco-editor": "^0.23.0",
         "rc-dialog": "8.2.1",
         "rc-textarea": "~0.3.1",
+        "rc-tooltip": "^5.1.1",
         "rc-tree": "~3.10.0",
         "rc-util": "~5.5.0",
         "react-dnd": "^9.3.4",
diff --git a/src/components/actionBar/__tests__/__snapshots__/actionBar.test.tsx.snap b/src/components/actionBar/__tests__/__snapshots__/actionBar.test.tsx.snap
@@ -9,12 +9,13 @@ exports[`Test ActionBar Component Test the ActionBar Snapshot 1`] = `
   >
     <li
       className="mo-action-bar__item"
-      id="1"
+      id="m1"
       onClick={[Function]}
     >
       <a
         className="mo-action-bar__label codicon codicon-add"
-        title="mockDataTitle"
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
       />
     </li>
   </ul>
diff --git a/src/components/actionBar/__tests__/actionBar.test.tsx b/src/components/actionBar/__tests__/actionBar.test.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 
 import { ActionBar } from '../index';
 
 const mockData = [
     {
-        id: '1',
+        id: 'm1',
         title: 'mockDataTitle',
         iconName: 'codicon-add',
     },
@@ -20,7 +20,11 @@ describe('Test ActionBar Component', () => {
     });
 
     test('Test the ActionBar by the data Props', () => {
-        render(<ActionBar data={mockData} />);
-        expect(screen.getByTitle(/mockDataTitle/)).not.toBeNull();
+        const wrapper = render(<ActionBar data={mockData} />);
+        const liDom = wrapper.container.querySelector('#m1');
+        const iconDom = liDom?.querySelector('a.codicon-add');
+
+        expect(liDom).not.toBeNull();
+        expect(iconDom).not.toBeNull();
     });
 });
diff --git a/src/components/actionBar/index.tsx b/src/components/actionBar/index.tsx
@@ -9,6 +9,7 @@ import {
 import { useContextMenu } from 'mo/components/contextMenu';
 import { IMenuItemProps, Menu } from 'mo/components/menu';
 import { mergeFunctions } from 'mo/common/utils';
+import Tooltip from '../tooltip';
 
 export interface IActionBarItemProps<T = any> {
     id?: string;
@@ -113,9 +114,9 @@ export function ActionBarItem(props: IActionBarItemProps) {
             onClick={onClickItem}
             data-id={data.id}
         >
-            <a className={claNames} title={title}>
-                {name}
-            </a>
+            <Tooltip overlay={<span>{title}</span>}>
+                <a className={claNames}>{name}</a>
+            </Tooltip>
         </li>
     );
 }
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -65,5 +65,8 @@ export type { ITabProps } from './tabs/tab';
 export { Toolbar } from './toolbar';
 export type { IToolbarProps } from './toolbar';
 
+export { default as Tooltip } from './tooltip';
+export type { IToolTipProps } from './tooltip';
+
 export { default as TreeView } from './tree';
 export type { ITreeProps, ITreeNodeItemProps } from './tree';
diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
@@ -65,6 +65,7 @@ export function Menu(props: React.PropsWithChildren<IMenuProps>) {
         children,
         onClick,
         trigger = 'hover',
+        title,
         ...custom
     } = props;
     const menuRef = React.useRef<HTMLUListElement>(null);
@@ -197,6 +198,8 @@ export function Menu(props: React.PropsWithChildren<IMenuProps>) {
         <ul
             className={claNames}
             ref={menuRef}
+            // prevent JSX render in HTMLElement
+            {...(typeof title === 'string' ? { title } : {})}
             {...getEventListener()}
             {...custom}
         >
diff --git a/src/components/menu/menuItem.tsx b/src/components/menu/menuItem.tsx
@@ -9,7 +9,8 @@ import {
     labelClassName,
     menuContentClassName,
 } from './base';
-export interface IMenuItemProps extends HTMLElementProps {
+
+export interface IMenuItemProps extends Omit<HTMLElementProps, 'title'> {
     /**
      * The name of icon
      */
@@ -19,6 +20,7 @@ export interface IMenuItemProps extends HTMLElementProps {
      * Item Name
      */
     name?: ReactNode;
+    title?: React.ReactNode;
     disabled?: boolean;
     /**
      * The description of keybinding
@@ -45,20 +47,25 @@ export function MenuItem(props: React.PropsWithChildren<IMenuItemProps>) {
         render,
         children,
         name,
+        title,
         ...custom
     } = props;
+
     const events = {
         onClick: function (e: React.MouseEvent) {
             onClick?.(e, props);
         },
     };
+
     return (
         <li
             className={classNames(
                 defaultMenuItemClassName,
                 className,
                 disabled ? disabledClassName : null
             )}
+            // prevent render JSX title in HTMLElement
+            {...(typeof title === 'string' ? { title } : {})}
             {...events}
             {...custom}
         >
diff --git a/src/components/menu/subMenu.tsx b/src/components/menu/subMenu.tsx
@@ -49,6 +49,7 @@ export function SubMenu(props: React.PropsWithChildren<ISubMenuProps>) {
         disabled = false,
         children,
         onClick,
+        title,
         ...custom
     } = props;
     const cNames = classNames(defaultSubMenuClassName, className);
@@ -81,6 +82,8 @@ export function SubMenu(props: React.PropsWithChildren<ISubMenuProps>) {
                 disabled ? disabledClassName : null
             )}
             data-submenu
+            // prevent render JSX title in HTMLElement
+            {...(typeof title === 'string' ? { title } : {})}
             {...custom}
         >
             <a className={menuContentClassName}>
diff --git a/src/components/tooltip/index.tsx b/src/components/tooltip/index.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { default as RcTooltip } from 'rc-tooltip';
+import 'rc-tooltip/assets/bootstrap.css';
+import { TooltipProps } from 'rc-tooltip/lib/Tooltip';
+
+export interface IToolTipProps extends TooltipProps {}
+
+const Tooltip = ({
+    overlay,
+    children,
+    placement = 'bottom',
+    trigger = 'hover',
+    ...rest
+}: IToolTipProps) => {
+    if (overlay) {
+        return (
+            <RcTooltip
+                placement={placement}
+                trigger={trigger}
+                overlay={overlay}
+                mouseEnterDelay={0.1}
+                {...rest}
+            >
+                {children}
+            </RcTooltip>
+        );
+    } else {
+        return children || null;
+    }
+};
+
+export default Tooltip;
diff --git a/src/components/tooltip/style.scss b/src/components/tooltip/style.scss
@@ -0,0 +1,23 @@
+@import 'mo/style/common';
+
+#{$rcTooltip} {
+    box-sizing: border-box;
+    color: var(--tooltip-color);
+    margin: 0;
+    opacity: 1;
+    padding: 0;
+
+    &-inner {
+        background-color: var(--tooltip-background);
+        border-radius: 2px;
+        box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
+        box-sizing: border-box;
+        min-width: 30px;
+        padding: 6px 8px;
+    }
+}
+
+#{$rcTooltip}-placement-bottom #{$rcTooltip}-arrow {
+    border-bottom-color: var(--tooltip-background);
+    top: -5px;
+}
diff --git a/src/extensions/theme-defaults/themes/dark_defaults.json b/src/extensions/theme-defaults/themes/dark_defaults.json
@@ -44,7 +44,9 @@
         "tab.activeForeground": "#fff",
         "diffEditor.insertedTextBackground": "#9bb95533",
         "diffEditor.removedTextBackground": "#ff000033",
-        "actionBar.checkedBackground": "rgba(0, 127, 212, 0.4)"
+        "actionBar.checkedBackground": "rgba(0, 127, 212, 0.4)",
+        "tooltip.color": "#333",
+        "tooltip.background": "rgba(0, 0, 0, 0.75)"
     },
     "semanticHighlighting": true
 }
diff --git a/src/extensions/theme-defaults/themes/light_defaults.json b/src/extensions/theme-defaults/themes/light_defaults.json
@@ -42,7 +42,9 @@
         "tab.inactiveBackground": "rgb(236, 236, 236)",
         "tab.inactiveForeground": "rgba(51, 51, 51, 0.7)",
         "tab.activeBackground": "#fffffe",
-        "tab.activeForeground": "#333333"
+        "tab.activeForeground": "#333333",
+        "tooltip.color": "#333",
+        "tooltip.background": "rgba(0, 0, 0, 0.75)"
     },
     "semanticHighlighting": true
 }
diff --git a/src/i18n/source/en.ts b/src/i18n/source/en.ts
@@ -62,6 +62,7 @@ export default {
         'editor.closeSaved': 'Close Saved',
         'editor.closeOthers': 'Close Others',
         'editor.close': 'Close',
+        'editor.actions.splitRight': 'Split Editor Right',
         'editor.showOpenEditors': 'Show Opened Editors',
     },
 };
diff --git a/src/i18n/source/zh-CN.json b/src/i18n/source/zh-CN.json
@@ -59,6 +59,7 @@
         "editor.closeOthers": "关闭其他",
         "editor.closeSaved": "关闭已保存",
         "editor.close": "关闭",
+        "editor.actions.splitRight": "向右拆分编辑器",
         "editor.showOpenEditors": "展示已打开的编辑器"
     }
 }
diff --git a/src/model/workbench/editor.ts b/src/model/workbench/editor.ts
@@ -81,6 +81,7 @@ export function getEditorInitialActions(): IEditorActionsProps[] {
         {
             id: EDITOR_MENU_SPILIT,
             name: 'Split Editor Right',
+            title: localize('editor.actions.splitRight', 'Split Editor Right'),
             icon: 'split-horizontal',
             place: 'outer',
         },
diff --git a/src/style/common.scss b/src/style/common.scss
@@ -28,6 +28,7 @@ $modal: prefix('modal');
 $confirm: prefix('confirm');
 $breadcrumb: prefix('breadcrumb');
 $search: prefix('search');
+$rcTooltip: prefix('tooltip', 'rc');
 
 // ============= The Workbench core component =============
 $compositeBar: prefix('compositeBar');
diff --git a/src/style/mo.scss b/src/style/mo.scss
@@ -20,6 +20,7 @@
 @import 'mo/components/toolbar/style';
 @import 'mo/components/tree/style';
 @import 'mo/components/search/style';
+@import 'mo/components/tooltip/style';
 
 // ============= The Workbench core component =============
 @import 'mo/workbench/style';
diff --git a/src/workbench/editor/action.tsx b/src/workbench/editor/action.tsx
@@ -11,6 +11,7 @@ import {
 } from './base';
 import { IEditorController } from 'mo/controller/editor';
 import { classNames } from 'mo/common/className';
+import Tooltip from 'mo/components/tooltip';
 
 export interface IEditorActionProps extends IEditorAction {
     isActiveGroup: boolean;
@@ -79,25 +80,27 @@ function EditorAction(props: IEditorActionProps & IEditorController) {
         <div className={groupActionsClassName}>
             {isActiveGroup &&
                 outer.map((action) => (
-                    <div
-                        key={action.id}
-                        onClick={() => handleActionsClick(action)}
-                        className={classNames(
-                            groupActionsItemClassName,
-                            action.disabled && groupActionItemDisabledClassName
-                        )}
-                        title={action.name?.toString()}
-                    >
-                        {action.icon ? (
-                            typeof action.icon === 'string' ? (
-                                <Icon type={action.icon} />
+                    <Tooltip overlay={action.title}>
+                        <div
+                            key={action.id}
+                            onClick={() => handleActionsClick(action)}
+                            className={classNames(
+                                groupActionsItemClassName,
+                                action.disabled &&
+                                    groupActionItemDisabledClassName
+                            )}
+                        >
+                            {action.icon ? (
+                                typeof action.icon === 'string' ? (
+                                    <Icon type={action.icon} />
+                                ) : (
+                                    action.icon
+                                )
                             ) : (
-                                action.icon
-                            )
-                        ) : (
-                            action.name
-                        )}
-                    </div>
+                                action.name
+                            )}
+                        </div>
+                    </Tooltip>
                 ))}
             {Boolean(inner.length) && (
                 <DropDown
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -59,6 +59,7 @@`
`59`	`59`	`"editor.closeOthers": "关闭其他",`
`60`	`60`	`"editor.closeSaved": "关闭已保存",`
`61`	`61`	`"editor.close": "关闭",`
	`62`	`+ "editor.actions.splitRight": "向右拆分编辑器",`
`62`	`63`	`"editor.showOpenEditors": "展示已打开的编辑器"`
`63`	`64`	`}`
`64`	`65`	`}`
Original file line number	Diff line number	Diff line change
`@@ -81,6 +81,7 @@ export function getEditorInitialActions(): IEditorActionsProps[] {`
`81`	`81`	`{`
`82`	`82`	`id: EDITOR_MENU_SPILIT,`
`83`	`83`	`name: 'Split Editor Right',`
	`84`	`+ title: localize('editor.actions.splitRight', 'Split Editor Right'),`
`84`	`85`	`icon: 'split-horizontal',`
`85`	`86`	`place: 'outer',`
`86`	`87`	`},`