@aloudata/aloudata-design 0.1.0-beta1

package/src/Tabs/demo/adaptHeight/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import './index.less';
+
+import { Tabs } from '@aloudata/aloudata-design';
+
+const { TabPane } = Tabs;
+
+export default () => {
+  return (
+    <div className="demo-adapt-height">
+      <Tabs adaptHeight>
+        <TabPane tab="Tab 1" key="1" className="demo-tabpane">
+          Content of Tab Pane 1
+        </TabPane>
+        <TabPane tab="Tab 2" key="2" className="demo-tabpane">
+          <>
+            <div>Content of Tab Pane 2</div>
+            <div>Content of Tab Pane 2</div>
+            <div>Content of Tab Pane 2</div>
+            <div>Content of Tab Pane 2</div>
+            <div>Content of Tab Pane 2</div>
+            <div>Content of Tab Pane 2</div>
+            <div>Content of Tab Pane 2</div>
+            <div>Content of Tab Pane 2</div>
+            <div>Content of Tab Pane 2</div>
+            <div>Content of Tab Pane 2</div>
+            <div>Content of Tab Pane 2</div>
+          </>
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};

package/src/Tabs/demo/basic/index.less

@@ -0,0 +1,5 @@
+.demo-basic {
+  .tabs-container {
+    height: 100px;
+  }
+}

package/src/Tabs/demo/basic/index.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import Switch from 'antd/lib/switch';
+import 'antd/lib//switch/style/index.less';
+import './index.less';
+
+import { Tabs } from '@aloudata/aloudata-design';
+
+const { TabPane } = Tabs;
+
+export default () => {
+  const [size, setSize] = useState('default');
+
+  return (
+    <div className="demo-basic">
+      <div>
+        large size: <Switch checked={size === 'large'} onChange={(checked) => setSize(checked ? 'large' : 'default')} />
+      </div>
+      <div className="tabs-container">
+        <Tabs size={size} destroyInactiveTabPane>
+          <TabPane tab="Tab 1" key="1">
+            Content of Tab Pane 1
+          </TabPane>
+          <TabPane tab="Tab 2" key="2">
+            Content of Tab Pane 2
+          </TabPane>
+        </Tabs>
+      </div>
+    </div>
+  );
+};

package/src/Tabs/demo/horizontalScroll/index.less

@@ -0,0 +1,3 @@
+.demo-horizontal-scroll {
+  width: 200px;
+}

package/src/Tabs/demo/horizontalScroll/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import './index.less';
+
+import { Tabs } from '@aloudata/aloudata-design';
+
+const { TabPane } = Tabs;
+
+export default () => {
+  return (
+    <div className="demo-horizontal-scroll">
+      <Tabs>
+        <TabPane tab="Tab 1" key="1">
+          Content of Tab Pane 1
+        </TabPane>
+        <TabPane tab="Tab 2" key="2">
+          Content of Tab Pane 2
+        </TabPane>
+        <TabPane tab="Tab 3" key="3">
+          Content of Tab Pane 3
+        </TabPane>
+        <TabPane tab="Tab 4" key="4">
+          Content of Tab Pane 4
+        </TabPane>
+        <TabPane tab="Tab 5" key="5">
+          Content of Tab Pane 5
+        </TabPane>
+        <TabPane tab="Tab 6" key="6">
+          Content of Tab Pane 6
+        </TabPane>
+        <TabPane tab="Tab 7" key="7">
+          Content of Tab Pane 7
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};

package/src/Tabs/index.md

@@ -0,0 +1,30 @@
+---
+# nav:
+#   title: 组件
+#   path: /components
+title: Tabs 标签页
+group:
+  title: 组件
+---
+
+# Tabs 标签页
+
+选项卡切换组件
+
+## 代码演示
+
+<code src="./demo/basic" title="基本" description="默认选中第一项">
+
+<code src="./demo/adaptHeight" title="自适应高度" description="自动撑满容器高度，body 内容超出时出现纵向滚动条">
+
+<code src="./demo/horizontalScroll" title="滑动" description="可以左右滑动，容纳更多标签">
+
+## API
+
+### Tabs
+
+<API exports='["default"]' hideTitle />
+
+### Tabs.TabPane
+
+<API exports='["default.TabPane"]' hideTitle />

package/src/Tabs/index.test.tsx

@@ -0,0 +1,100 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import Tabs from './index';
+import { act } from 'react-dom/test-utils';
+
+const { TabPane } = Tabs;
+
+describe('Tabs', () => {
+  it('activeKey', () => {
+    render(
+      <div className="activeKey">
+        <Tabs activeKey="2">
+          <TabPane tab="tab1" key="1">1</TabPane>
+          <TabPane tab="tab2" key="2">2</TabPane>
+          <TabPane tab="tab3" key="3">3</TabPane>
+        </Tabs>
+      </div>
+    );
+
+    const activeText = document.querySelector('.activeKey .ant-tabs-tabpane-active')?.textContent;
+    expect(activeText).toBe('2');
+  });
+
+  it('defaultActiveKey', () => {
+    render(
+      <div className="defaultActiveKey">
+        <Tabs defaultActiveKey="2">
+          <TabPane tab="tab1" key="1">1</TabPane>
+          <TabPane tab="tab2" key="2">2</TabPane>
+          <TabPane tab="tab3" key="3">3</TabPane>
+        </Tabs>
+      </div>
+    );
+
+    const activeText = document.querySelector('.defaultActiveKey .ant-tabs-tabpane-active')?.textContent;
+    expect(activeText).toBe('2');
+
+    act(() => {
+      fireEvent.click(screen.getByText('tab3'));
+    });
+
+    expect(document.querySelector('.defaultActiveKey .ant-tabs-tabpane-active')?.textContent).toBe('3');
+  });
+
+  it('onChange', () => {
+    let activeKey = '2';
+    render(
+      <div className="onChange">
+        <Tabs activeKey="2" onChange={(key) => { activeKey = key; }}>
+          <TabPane tab="tab1" key="1">1</TabPane>
+          <TabPane tab="tab2" key="2">2</TabPane>
+          <TabPane tab="tab3" key="3">3</TabPane>
+        </Tabs>
+      </div>
+    );
+
+    act(() => {
+      fireEvent.click(screen.getByText('tab3'));
+    });
+
+    expect(activeKey).toBe('3');
+  });
+
+  it('destroyInactiveTabPane', () => {
+    render(
+      <div className="destroyInactiveTabPane">
+        <Tabs defaultActiveKey="2" destroyInactiveTabPane>
+          <TabPane tab="tab1" key="1">1</TabPane>
+          <TabPane tab="tab2" key="2">
+            <div className="tabpane2">2</div>
+          </TabPane>
+          <TabPane tab="tab3" key="3">3</TabPane>
+        </Tabs>
+      </div>
+    );
+
+    expect(document.querySelector('.destroyInactiveTabPane .tabpane2')).not.toBeNull();
+
+    act(() => {
+      fireEvent.click(screen.getByText('tab3'));
+    });
+
+    expect(document.querySelector('.destroyInactiveTabPane .tabpane2')).toBeNull();
+  });
+
+  it('TabPane forceRender', () => {
+    render(
+      <div className="activeKey">
+        <Tabs activeKey="2">
+          <TabPane tab="tab1" key="1">1</TabPane>
+          <TabPane tab="tab2" key="2">2</TabPane>
+          <TabPane tab="tab3" key="3" forceRender>Content3</TabPane>
+        </Tabs>
+      </div>
+    );
+
+    expect(screen.getByText('Content3')).toBeInTheDocument();
+  });
+});

package/src/Tabs/index.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import AntdTabs, { TabsProps } from 'antd/lib/tabs';
+import Icon from '../Icon';
+import TabPane from './TabPane';
+import classNames from 'classnames';
+import './style';
+
+export interface ITabsProps {
+  /**
+   * @description 大小
+   * @default default
+   */
+  size?: 'large' | 'default';
+  /**
+   * @description 当前激活 tab 面板的 key
+   * @default -
+   */
+  activeKey?: string;
+  /**
+   * @description 初始化选中面板的 key，如果没有设置 activeKey
+   * @default 第一个面板的 key
+   */
+  defaultActiveKey?: string;
+  /**
+   * @description 切换面板的回调
+   * @default -
+   */
+  onChange?: (activeKey: string) => void;
+  /**
+   * @description 被隐藏时是否销毁 DOM 结构
+   * @default false
+   */
+  destroyInactiveTabPane?: boolean;
+  /**
+   * @description 撑满容器的高度
+   * @default false
+   */
+  adaptHeight?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export default function Tabs(props: ITabsProps) {
+  const { size, className, adaptHeight, ...otherProps } = props;
+
+  const tabsProps: TabsProps = {
+    ...otherProps,
+  };
+
+  if (size === 'large') {
+    tabsProps.size = size;
+  }
+
+  return (
+    <AntdTabs
+      moreIcon={<Icon type="more_vert" size={18} />}
+      tabBarGutter={24}
+      className={classNames('ald-tabs', className, { 'ald-adapt-height': adaptHeight })}
+      {...tabsProps}
+    />
+  );
+}
+
+Tabs.TabPane = TabPane;

package/src/Tabs/style/index.less

@@ -0,0 +1,61 @@
+@import '../../style/index.less';
+
+.ald-tabs {
+  &.ant-tabs {
+    color: @NL30;
+  }
+
+  .ant-tabs-tab {
+    font-size: 14px;
+    line-height: 20px;
+
+    &:hover {
+      color: inherit;
+    }
+
+    &.ant-tabs-tab-active {
+      font-weight: 500;
+    }
+  }
+
+  .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+    text-shadow: none;
+  }
+
+  /* large size */
+  &.ant-tabs-large {
+    .ant-tabs-tab {
+      font-size: 16px;
+      line-height: 24px;
+    }
+  }
+
+  .ant-tabs-nav-more {
+    margin: 0 !important;
+  }
+
+  /* body自适应高度 */
+  &.ald-adapt-height {
+    height: 100%;
+
+    .ant-tabs-content {
+      height: 100%;
+    }
+
+    .ant-tabs-tabpane {
+      height: 100%;
+      overflow-y: auto;
+    }
+  }
+
+  &.ant-tabs-top > .ant-tabs-nav,
+  &.ant-tabs-bottom > .ant-tabs-nav,
+  &.ant-tabs-top > div > .ant-tabs-nav,
+  &.ant-tabs-bottom > div > .ant-tabs-nav {
+    margin: 0 0 24px;
+
+    &::before {
+      border-color: @NL90;
+    }
+  }
+}

package/src/Tabs/style/index.ts

@@ -0,0 +1,2 @@
+import '../../style'
+import './index.less';

package/src/Tooltip/demo/basic/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Tooltip } from '@aloudata/aloudata-design';
+
+export default () => (
+  <>
+    <Tooltip title="Tooltip">
+      <span>Tooltip will show on mouse enter</span>
+    </Tooltip>
+  </>
+);

package/src/Tooltip/demo/overflow/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Tooltip } from '@aloudata/aloudata-design';
+
+export default () => (
+  <>
+    <Tooltip title="longMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsglongMsg">
+      <span>Tooltip will show on mouse enter</span>
+    </Tooltip>
+  </>
+);

package/src/Tooltip/demo/placement/index.less

@@ -0,0 +1,7 @@
+.demo-placement {
+  .ant-btn {
+    width: 70px;
+    margin-right: 8px;
+    margin-bottom: 8px;
+  }
+}

package/src/Tooltip/demo/placement/index.tsx

@@ -0,0 +1,60 @@
+/**
+ * title: 调整位置
+ */
+
+import React from 'react';
+import { Tooltip, Button } from '@aloudata/aloudata-design';
+import './index.less';
+
+const text = <span>prompt text</span>;
+
+const buttonWidth = 70;
+
+export default () => (
+  <div className="demo-placement">
+    <div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
+      <Tooltip placement="topLeft" title={text}>
+        <Button>TL</Button>
+      </Tooltip>
+      <Tooltip placement="top" title={text}>
+        <Button>Top</Button>
+      </Tooltip>
+      <Tooltip placement="topRight" title={text}>
+        <Button>TR</Button>
+      </Tooltip>
+    </div>
+    <div style={{ width: buttonWidth, float: 'left' }}>
+      <Tooltip placement="leftTop" title={text}>
+        <Button>LT</Button>
+      </Tooltip>
+      <Tooltip placement="left" title={text}>
+        <Button>Left</Button>
+      </Tooltip>
+      <Tooltip placement="leftBottom" title={text}>
+        <Button>LB</Button>
+      </Tooltip>
+    </div>
+    <div style={{ width: buttonWidth, marginLeft: buttonWidth * 4 + 24 }}>
+      <Tooltip placement="rightTop" title={text}>
+        <Button>RT</Button>
+      </Tooltip>
+      <Tooltip placement="right" title={text}>
+        <Button>Right</Button>
+      </Tooltip>
+      <Tooltip placement="rightBottom" title={text}>
+        <Button>RB</Button>
+      </Tooltip>
+    </div>
+    <div style={{ marginLeft: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
+      <Tooltip placement="bottomLeft" title={text}>
+        <Button>BL</Button>
+      </Tooltip>
+      <Tooltip placement="bottom" title={text}>
+        <Button>Bottom</Button>
+      </Tooltip>
+      <Tooltip placement="bottomRight" title={text}>
+        <Button>BR</Button>
+      </Tooltip>
+    </div>
+  </div>
+);

package/src/Tooltip/demo/trigger/index.less

@@ -0,0 +1,5 @@
+.demo-trigger {
+  .ant-btn {
+    margin-right: 8px;
+  }
+}

package/src/Tooltip/demo/trigger/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Tooltip, Button } from '@aloudata/aloudata-design';
+import './index.less';
+
+export default () => (
+  <>
+    <div className="demo-trigger">
+      <Tooltip title="Tooltip" trigger="hover">
+        <Button>hover</Button>
+      </Tooltip>
+      <Tooltip title="Tooltip" trigger="click">
+        <Button>click</Button>
+      </Tooltip>
+      <Tooltip title="Tooltip" trigger="contextMenu">
+        <Button>contextMenu</Button>
+      </Tooltip>
+      <Tooltip title="Tooltip" trigger="focus">
+        <Button>focus</Button>
+      </Tooltip>
+    </div>
+  </>
+);

package/src/Tooltip/index.md

@@ -0,0 +1,28 @@
+---
+# nav:
+#   title: 组件
+#   path: /components
+title: Tooltip 文字提示
+group:
+  title: 组件
+---
+
+# Tooltip 文字提示
+
+简单的文字提示气泡框
+
+## 代码演示
+
+<code src="./demo/basic" title="基本" description="最简单的用法">
+
+<code src="./demo/placement" title="位置" description="位置有12个方向">
+
+<code src="./demo/trigger" title="触发方式" description="4种触发的方式">
+
+<code src="./demo/overflow" title="内容超长" description="内容超长情况下的展示方式">
+
+<API />
+
+## 注意
+
+请确保 `Tooltip` 的子元素都能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。

package/src/Tooltip/index.test.tsx

@@ -0,0 +1,152 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import Tooltip from './index';
+import { act } from 'react-dom/test-utils';
+
+describe('Tooltip', () => {
+  it('getPopupContainer', () => {
+    const msg = 'getPopupContainer';
+    const container = document.createElement('div');
+    container.classList.add('container');
+    document.body.appendChild(container);
+
+    render(<Tooltip visible title={msg} getPopupContainer={() => container} />);
+    expect(document.querySelector('.container .ald-tooltip-overlay')).not.toBeNull();
+
+    document.body.removeChild(container);
+  });
+
+  it('destroyTooltipOnHide', () => {
+    const msg = 'destroyTooltipOnHide';
+
+    const { rerender } = render(<Tooltip visible title={msg} destroyTooltipOnHide />);
+    rerender(<Tooltip visible={false} title={msg} destroyTooltipOnHide />);
+
+    expect(screen.queryByText(msg)).toBeNull();
+  });
+
+  it('visible', () => {
+    const msg = 'tooltipVisible';
+
+    const { rerender } = render(<Tooltip visible title={msg} />);
+    rerender(<Tooltip visible={false} title={msg} />);
+
+    expect(
+      screen.queryByText(msg)?.closest('.ald-tooltip-overlay.ant-tooltip-hidden'),
+    ).not.toBeNull();
+  });
+
+  it('zIndex', () => {
+    const zIndex = 10000;
+    const msg = 'zIndex';
+
+    render(<Tooltip visible title={msg} zIndex={zIndex} />);
+    const tooltipNode = screen.queryByText(msg)?.closest('.ald-tooltip-overlay');
+    expect(getComputedStyle(tooltipNode!).zIndex).toBe(`${zIndex}`);
+  });
+
+  it('onVisibleChange', async () => {
+    const msg = 'onVisibleChange';
+    const className = 'onVisibleChangeClassName';
+
+    let visible = false;
+    const onVisibleChange = (newVisible: boolean) => {
+      visible = newVisible;
+    };
+
+    render(
+      <Tooltip title={msg} onVisibleChange={onVisibleChange}>
+        <span className={className}>trigger</span>
+      </Tooltip>,
+    );
+
+    const innerDom = document.querySelector(`.${className}`);
+    fireEvent.mouseEnter(innerDom!);
+
+    // 等到 tooltip 的 DOM 渲染完成
+    await waitFor(() => screen.getByText(msg));
+
+    expect(visible).toBeTruthy();
+  });
+
+  it('mouseEnterDelay', () => {
+    jest.useFakeTimers();
+
+    const msg = 'mouseEnterDelay';
+    const DELAY_TIME = 2;
+    const SECONDS_TIMES = 1000;
+    const className = 'mouseEnterDelayClassName';
+
+    render(
+      <Tooltip title={msg} mouseEnterDelay={DELAY_TIME}>
+        <span className={className}>trigger</span>
+      </Tooltip>,
+    );
+
+    const innerDom = document.querySelector(`.${className}`);
+    act(() => {
+      fireEvent.mouseEnter(innerDom!);
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(SECONDS_TIMES);
+    });
+    expect(screen.queryByText(msg)).toBeNull();
+
+    act(() => {
+      jest.advanceTimersByTime(DELAY_TIME * SECONDS_TIMES);
+    });
+    expect(screen.queryByText(msg)).not.toBeNull();
+
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  it('mouseLeaveDelay', async () => {
+    jest.useFakeTimers();
+
+    const msg = 'mouseLeaveDelay';
+    const DELAY_TIME = 2;
+    const SECONDS_TIMES = 1000;
+    const className = 'mouseLeaveDelayClassName';
+
+    render(
+      <Tooltip title={msg} mouseLeaveDelay={DELAY_TIME} destroyTooltipOnHide>
+        <span className={className}>trigger</span>
+      </Tooltip>,
+    );
+
+    // mouseenter 召唤出 tooltip
+    const innerDom = document.querySelector(`.${className}`);
+    act(() => {
+      fireEvent.mouseEnter(innerDom!);
+    });
+    // 等到 tooltip 的 DOM 渲染完成
+    await waitFor(() => screen.getByText(msg));
+
+    // mouseleave 隐藏 tooltip
+    act(() => {
+      fireEvent.mouseLeave(innerDom!);
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(SECONDS_TIMES);
+    });
+    expect(screen.queryByText(msg)).not.toBeNull();
+
+    act(() => {
+      jest.advanceTimersByTime(DELAY_TIME * SECONDS_TIMES);
+    });
+    expect(screen.queryByText(msg)).toBeNull();
+
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  it('overlayClassName', () => {
+    const overlayClassName = 'overlayClassName';
+    render(<Tooltip visible title="tooltip" overlayClassName={overlayClassName} />);
+    expect(document.querySelector(`.${overlayClassName}.ant-tooltip`)).not.toBeNull();
+  });
+});