Tooltip

packages/components/package.json

@@ -34,6 +34,7 @@
     "rc-checkbox": "^2.2.0",
     "rc-notification": "^3.3.1",
     "rc-tabs": "^11.5.2",
+    "rc-tooltip": "^4.2.1",
     "rc-util": "^5.0.5",
     "react-use": "^15.1.1",
     "shallowequal": "^1.1.0"

packages/components/src/components/tooltip/__tests__/Tooltip.test.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import Tooltip from '../index';
+import '@gio-design/components/es/components/Tabs/style/index.css';
+import { act } from 'react-dom/test-utils';
+import { mount, render } from 'enzyme';
+
+async function waitForComponentToPaint(wrapper, amount = 500) {
+  await act(async () => new Promise((resolve) => setTimeout(resolve, amount)).then(() => wrapper.update()));
+}
+
+describe('Testing Tooltip', () => {
+  const getTooltip = () => (
+    <Tooltip title='This is a test' tooltipLink={{ name: '点击这里', link: 'https://www.growingio.com' }}>
+      <span>Test</span>
+    </Tooltip>
+  );
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('should be stable', () => {
+    const wrapper = render(getTooltip());
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should be mount, setProps, unmount with no error', () => {
+    expect(() => {
+      const wrapper = mount(getTooltip());
+      wrapper.setProps({ title: 'set props' });
+      wrapper.setProps({ visible: 'true' });
+      wrapper.setProps({ tooltipLink: { name: '点击这里', link: 'https://www.growingio.com/about' } });
+      wrapper.unmount();
+    }).not.toThrow();
+  });
+
+  test('props title', () => {
+    const wrapper = mount(getTooltip());
+    wrapper.setProps({ visible: true });
+    wrapper.setProps({ title: '更换文字' });
+    expect(wrapper.find('.gio-tooltip-inner').find('span').text()).toBe('更换文字');
+  });
+
+  test('props tooltipLink', () => {
+    const wrapper = mount(getTooltip());
+    wrapper.setProps({ visible: true });
+    wrapper.setProps({ tooltipLink: { name: '点击这里', link: 'https://www.growingio.com/about' } });
+    expect(
+      wrapper
+        .find('.gio-tooltip-inner')
+        .find('a')
+        .filterWhere((item) => item.prop('href') === 'https://www.growingio.com/about')
+    ).toHaveLength(1);
+  });
+
+  test('props trigger', () => {
+    const wrapper = mount(getTooltip());
+    wrapper.setProps({ trigger: 'click' });
+    wrapper.find('span').at(0).simulate('click');
+    expect(wrapper.exists('.gio-tooltip-inner')).toBe(true);
+  });
+
+  test('props placement', () => {
+    const wrapper = mount(getTooltip());
+    wrapper.setProps({ visible: true });
+    wrapper.setProps({ placement: 'topLeft' });
+    waitForComponentToPaint(wrapper).then(() => {
+      expect(wrapper.exists('.gio-tooltip-placement-topLeft')).toBe(true);
+    });
+  });
+
+  test('props overlayClassName', () => {
+    const wrapper = mount(getTooltip());
+    wrapper.setProps({ visible: true });
+    wrapper.setProps({ overlayClassName: 'overlayClassName' });
+    expect(wrapper.exists('.overlayClassName')).toBe(true);
+  });
+
+  test('props onVisibleChange', () => {
+    let called = false;
+    const wrapper = mount(getTooltip());
+    wrapper.setProps({
+      onVisibleChange: () => (called = true),
+    });
+    wrapper.setProps({ trigger: 'click' });
+    wrapper.find('span').at(0).simulate('click');
+    expect(called).toBe(true);
+  });
+
+  it('should be render rightly', () => {
+    const wrapper = mount(getTooltip());
+    wrapper.setProps({ trigger: 'click' });
+    wrapper.setProps({ placement: 'topLeft' });
+    wrapper.setProps({ overlayClassName: 'overlayClassName' });
+    wrapper.find('span').at(0).simulate('click');
+    expect(wrapper.exists('.gio-tooltip-inner')).toBe(true);
+    expect(wrapper.find('.gio-tooltip-inner').find('span').text()).toBe('This is a test');
+    expect(
+      wrapper
+        .find('.gio-tooltip-inner')
+        .find('a')
+        .filterWhere((item) => item.prop('href') === 'https://www.growingio.com')
+    ).toHaveLength(1);
+    expect(wrapper.exists('.overlayClassName')).toBe(true);
+    waitForComponentToPaint(wrapper).then(() => {
+      expect(wrapper.exists('.gio-tooltip-placement-topLeft')).toBe(true);
+    });
+  });
+});

packages/components/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.js.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Testing Tooltip should be stable 1`] = `
+initialize {
+  "0": Object {
+    "attribs": Object {},
+    "children": Array [
+      Object {
+        "data": "Test",
+        "next": null,
+        "parent": [Circular],
+        "prev": null,
+        "type": "text",
+      },
+    ],
+    "name": "span",
+    "namespace": "http://www.w3.org/1999/xhtml",
+    "next": null,
+    "parent": null,
+    "prev": null,
+    "root": Object {
+      "attribs": Object {},
+      "children": Array [
+        [Circular],
+      ],
+      "name": "root",
+      "namespace": "http://www.w3.org/1999/xhtml",
+      "next": null,
+      "parent": null,
+      "prev": null,
+      "type": "root",
+      "x-attribsNamespace": Object {},
+      "x-attribsPrefix": Object {},
+    },
+    "type": "tag",
+    "x-attribsNamespace": Object {},
+    "x-attribsPrefix": Object {},
+  },
+  "_root": [Circular],
+  "length": 1,
+  "options": Object {
+    "decodeEntities": true,
+    "normalizeWhitespace": false,
+    "withDomLvl1": true,
+    "xml": false,
+  },
+}
+`;

packages/components/src/components/tooltip/index.tsx

@@ -0,0 +1,49 @@
+import React, { useContext } from 'react';
+import RcTooltip from 'rc-tooltip';
+import { TooltipProps } from './interface';
+import { ConfigContext } from '../config-provider';
+import Link from '../link';
+
+const Tooltip = (props: TooltipProps) => {
+  const {
+    title,
+    tooltipLink,
+    placement = 'top',
+    trigger = 'hover',
+    prefixCls: customizePrefixCls,
+    overlay,
+    children,
+    ...rest
+  } = props;
+  const { getPrefixCls } = useContext(ConfigContext);
+  const prefixCls = getPrefixCls('tooltip', customizePrefixCls);
+
+  const defaultOverlay = () => (
+    <>
+      <span className={`${prefixCls}-inner-title`}>{title}</span>
+      {tooltipLink?.link && (
+        <Link component='a' to={tooltipLink.link}>
+          {tooltipLink.name || tooltipLink.link}
+        </Link>
+      )}
+    </>
+  );
+
+  const getOverlay = () => overlay || defaultOverlay();
+
+  return (
+    <RcTooltip
+      prefixCls={prefixCls}
+      placement={placement}
+      trigger={trigger}
+      transitionName='spread-transition'
+      arrowContent={<span className={`${prefixCls}-arrow-content`} />}
+      overlay={getOverlay()}
+      {...rest}
+    >
+      {children}
+    </RcTooltip>
+  );
+};
+
+export default Tooltip;

packages/components/src/components/tooltip/interface.ts

@@ -0,0 +1,13 @@
+import { TooltipProps as RcTooltipProps } from 'rc-tooltip/lib/Tooltip';
+
+export type ReactRender = () => React.ReactNode;
+export interface TooltipLink {
+  name?: string;
+  link: string;
+}
+export interface TooltipProps extends Partial<RcTooltipProps> {
+  title?: React.ReactNode | ReactRender;
+  tooltipLink?: TooltipLink;
+  children?: React.ReactElement;
+  placement?: string;
+}

packages/components/src/components/tooltip/style/index.less

@@ -0,0 +1,71 @@
+@import '../../../stylesheet/theme.less';
+@import '../../../stylesheet/mixin/trigger.less';
+
+@tooltip-prefix-cls: ~'@{component-prefix}-tooltip';
+@tooltip-bg-color: rgba(36, 46, 89, 0.96);
+@tooltip-distance: 6px;
+@tooltip-arrow-width: 12px;
+@tooltip-arrow-offset: 14px;
+
+.@{tooltip-prefix-cls}{
+  max-width: 500px;
+  position: absolute;
+  z-index: 100;
+
+  &-hidden {
+    display: none;
+  }
+
+  &-content {
+    display: inline-block;
+    position: relative;
+  }
+
+  &-inner {
+    color: #FFFFFF;
+    text-align: left;
+    text-decoration: none;
+    word-wrap: break-word;
+    font-size: 14px;
+    letter-spacing: 0;
+    line-height: 22px;
+    border-radius: 4px;
+    background-color: @tooltip-bg-color;
+    padding: 8px 16px;
+    display: inline-block;
+    min-width: 40px;
+    &-title {
+      vertical-align: middle;
+      &::before{
+        content: ' ';
+        display: inline-block;
+      }
+    }
+    .gio-link{
+      color: #FFFFFF;
+    }
+  }
+
+  &-arrow {
+    position: absolute;
+    display: block;
+    pointer-events: none;
+    height: 12px;
+    width: 12px;
+    &-content {
+      position: absolute;
+      margin: auto;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 0px;
+      height: 0px;
+      border: @tooltip-arrow-width/2 solid;
+      pointer-events: auto;
+    }
+  }
+  .trigger-placement(@tooltip-prefix-cls, @tooltip-bg-color, @tooltip-arrow-width, @tooltip-distance, @tooltip-arrow-offset);
+}
+
+.trigger-transition(@tooltip-prefix-cls);

packages/components/src/index.ts

@@ -5,3 +5,4 @@ export { default as Breadcrumb, BreadcrumbItem } from './components/breadcrumb';
 export { default as Link } from './components/link';
 export { default as Avatar, AvatarGroup } from './components/avatar';
 export { default as Tabs, TabPane } from './components/tabs';
+export { default as Tooltip } from './components/tooltip';