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

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.less

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

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.less

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

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();
-  });
-});

package/src/Tooltip/index.tsx

@@ -1,113 +0,0 @@
-import React from 'react';
-import AntdTooltip from 'antd/lib/tooltip';
-import classNames from 'classnames';
-import './style';
-
-export type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';
-
-export interface ITooltipProps {
-  /**
-   * @description 提示文字
-   * @default -
-   */
-  title: React.ReactNode;
-  /**
-   * @description 关闭后是否销毁Tooltip
-   * @default false
-   */
-  destroyTooltipOnHide?: boolean;
-  /**
-   * @description 浮层渲染父节点，默认渲染到 body 上
-   * @default () => document.body
-   */
-  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
-  /**
-   * @description 鼠标移入后延时多少才显示 Tooltip
-   * @default 0.1
-   */
-  mouseEnterDelay?: number;
-  /**
-   * @description 鼠标移出后延时多少才隐藏 Tooltip
-   * @default 0.1
-   */
-  mouseLeaveDelay?: number;
-  /**
-   * @description 气泡框位置
-   * @default top
-   */
-  placement?:
-  | 'top'
-  | 'left'
-  | 'right'
-  | 'bottom'
-  | 'topLeft'
-  | 'topRight'
-  | 'bottomLeft'
-  | 'bottomRight'
-  | 'leftTop'
-  | 'leftBottom'
-  | 'rightTop'
-  | 'rightBottom';
-  /**
-   * @description 触发行为
-   * @type ActionType | ActionType[], 其中 ActionType 为 'hover' | 'focus' | 'click' | 'contextMenu';
-   * @default hover
-   */
-  trigger?: ActionType | ActionType[];
-  /**
-   * @description 设置 Tooltip 的 z-index
-   * @default -
-   */
-  zIndex?: number;
-  /**
-   * @description 用于手动控制浮层显隐
-   * @default -
-   */
-  visible?: boolean;
-  /**
-   * @description 显示隐藏的回调
-   * @default -
-   */
-  onVisibleChange?: (visible: boolean) => void;
-  /**
-   * @description 卡片类名
-   * @default -
-   */
-  overlayClassName?: string;
-  children?: React.ReactNode;
-}
-
-export default function Tooltip(props: ITooltipProps) {
-  const {
-    children,
-    title,
-    visible,
-    onVisibleChange,
-    trigger,
-    zIndex,
-    placement,
-    mouseEnterDelay,
-    mouseLeaveDelay,
-    getPopupContainer,
-    destroyTooltipOnHide,
-    overlayClassName,
-  } = props;
-
-  return (
-    <AntdTooltip
-      title={title}
-      overlayClassName={classNames('ald-tooltip-overlay', overlayClassName)}
-      visible={visible}
-      onVisibleChange={onVisibleChange}
-      trigger={trigger}
-      zIndex={zIndex}
-      placement={placement}
-      mouseEnterDelay={mouseEnterDelay}
-      mouseLeaveDelay={mouseLeaveDelay}
-      getPopupContainer={getPopupContainer}
-      destroyTooltipOnHide={destroyTooltipOnHide}
-    >
-      {children}
-    </AntdTooltip>
-  );
-}

package/src/Tooltip/style/index.ts

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

package/src/_utils/hooks/useControlledState.ts

@@ -1,39 +0,0 @@
-import { useState, useEffect, useRef, useDebugValue } from 'react';
-import { isUndefined } from 'lodash';
-
-function format<T>([innerState, outterState]: [T, T]) {
-  const isControlled = isUndefined(outterState) ? 'uncontrolled' : 'controlled';
-  const value = isUndefined(outterState) ? innerState : outterState;
-  return `State is ${isControlled} | Value is ${value}`;
-}
-
-const useControlledState = <T>(
-  outterState: T | (() => T) | undefined,
-  defaultOutterState: T,
-  callback?: (state: T | (() => T)) => void
-): [T, (state: T | (() => T), force?: boolean) => void] => {
-  // if (outterState === undefined && defaultOutterState === undefined) {
-  //   throw new TypeError('Either "value" or "defaultValue" variable must be set. Now both are undefined');
-  // }
-  const [innerState, setInnerState] = useState<T>(isUndefined(outterState) ? defaultOutterState : outterState);
-  const setState = useRef((state: T | (() => T), force = false) => {
-    if (isUndefined(outterState) || force) {
-      setInnerState(state);
-    }
-
-    callback?.(state);
-  }).current;
-
-  // @ts-ignore
-  useDebugValue([innerState, outterState], format);
-
-  useEffect(() => {
-    if (!isUndefined(outterState)) {
-      setInnerState(outterState);
-    }
-  }, [outterState]);
-
-  return [innerState, setState];
-};
-
-export default useControlledState;

package/src/_utils/hooks/usePrefixCls.ts

@@ -1,11 +0,0 @@
-import { useContext } from 'react';
-
-import { ConfigProvider } from 'antd';
-
-const ConfigContext = ConfigProvider.ConfigContext;
-const usePrefixCls = (subPrefixCls?: string, customRootPrefixCls?: string): string => {
-  const { rootPrefixCls, getPrefixCls } = useContext(ConfigContext);
-  return getPrefixCls(subPrefixCls, customRootPrefixCls ?? rootPrefixCls);
-};
-
-export default usePrefixCls;

package/src/style/index.ts

@@ -1,2 +0,0 @@
-import 'antd/dist/antd.compact.css';
-import './index.less';

package/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "jsx": "react",
-    "esModuleInterop": true,
-    "types": ["jest"],
-    "strict": true,
-    "skipLibCheck": true,
-    "declaration": true
-  }
-}

package/typings.d.ts

@@ -1,3 +0,0 @@
-declare module '*.css';
-declare module '*.less';
-declare module '@aloudata/aloudata-design';