@aloudata/aloudata-design 0.1.0-beta1 → 0.2.0-beta.1

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

@@ -1,33 +0,0 @@
-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.tsx

@@ -1,30 +0,0 @@
-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.tsx

@@ -1,36 +0,0 @@
-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

@@ -1,30 +0,0 @@
----
-# 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

@@ -1,100 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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.ts

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

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

@@ -1,10 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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.tsx

@@ -1,60 +0,0 @@
-/**
- * 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.tsx

@@ -1,22 +0,0 @@
-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

@@ -1,28 +0,0 @@
----
-# 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

@@ -1,152 +0,0 @@
-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();
-  });
-});