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

package/src/Button/index.tsx

@@ -1,136 +0,0 @@
-import React from 'react';
-import { Button as AntdButton } from 'antd';
-import './style';
-import type {
-  ButtonType as AntdButtonType,
-  ButtonProps as AntdButtonProps,
-  ButtonSize as AntdButtonSize,
-} from 'antd/lib/button';
-import classNames from 'classnames';
-import usePrefixCls from '../_utils/hooks/usePrefixCls';
-
-const iconPrefixCls = 'anticon';
-const ICON_LARGE = 20;
-const ICON_SMALL = 16;
-export type ButtonType = 'primary' | 'secondary' | 'danger' | 'text' | 'link';
-export type Size = 'small' | 'default' | 'large';
-export interface IButtonProps
-  extends Omit<
-    AntdButtonProps,
-    'type' | 'size' | 'danger' | 'shape' | 'icon' | 'href' | 'target' | 'onClick' | 'loading'
-  > {
-  /**
-   * @description 类型
-   * @type 'primary' | 'secondary' | 'danger' | 'text' | 'link'
-   * @default primary
-   */
-  type?: ButtonType;
-  /**
-   * @description 尺寸
-   * @type 'small' | 'default' | 'large'
-   * @default large
-   */
-  size?: Size;
-  /**
-   * @description 是否禁用
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * @description 设置按钮的图标组件
-   */
-  icon?: React.ReactNode;
-  shape?: 'circle' | 'default';
-  /**
-   * @description 指定此属性，点击行为和a链接一致
-   */
-  href?: string;
-  /**
-   * @description 相当于 a 链接的 target 属性，href 存在时生效
-   */
-  target?: string;
-  /**
-   * @description 点击按钮时的回调
-   */
-  onClick?: React.MouseEventHandler<HTMLElement>;
-  /**
-   * @description 设置按钮进入载入状态
-   * @default false
-   */
-  loading?:
-    | boolean
-    | {
-        delay?: number;
-      };
-}
-function Button(props: IButtonProps) {
-  const prefix = usePrefixCls('btn');
-  const { type = 'primary', size = 'default', shape = 'default', icon, className, ...rest } = props;
-
-  function getButtonType(buttonType: ButtonType): AntdButtonType {
-    if (!['primary', 'secondary', 'danger', 'text', 'link'].includes(buttonType)) {
-      return 'primary';
-    }
-    if (buttonType === 'danger') {
-      return 'primary';
-    }
-    if (buttonType === 'secondary') {
-      return 'default';
-    }
-    return buttonType;
-  }
-
-  function getDangerStatus(buttonType: ButtonType): boolean {
-    if (buttonType === 'danger') {
-      return true;
-    }
-    return false;
-  }
-
-  function getButtonSize(ButtonSize: Size): AntdButtonSize {
-    switch (ButtonSize) {
-      case 'small':
-        return 'small';
-      case 'large':
-        return 'large';
-      default:
-        return 'middle';
-    }
-  }
-
-  function getShape(ButtonShape: 'circle' | 'default'): 'circle' | 'default' {
-    if (ButtonShape === 'circle') {
-      return ButtonShape;
-    }
-    return 'default';
-  }
-  const setIcon = (iconNode: React.ReactElement) => {
-    if (iconNode) {
-      const p = {
-        className: '',
-        size: ICON_LARGE,
-        ...iconNode.props,
-      };
-      // eslint-disable-next-line
-      p.className = classNames(`${iconPrefixCls}-icon-left`, p.className);
-      // eslint-disable-next-line
-      p.size = size === 'large' ? ICON_LARGE : ICON_SMALL;
-      return React.cloneElement(iconNode, p);
-    }
-    return <></>;
-  };
-  return (
-    <AntdButton
-      {...rest}
-      icon={setIcon(icon as React.ReactElement)}
-      type={getButtonType(type)}
-      className={classNames(`${prefix}-${type}`, className)}
-      size={getButtonSize(size)}
-      danger={getDangerStatus(type)}
-      shape={getShape(shape)}
-    >
-      {props.children}
-    </AntdButton>
-  );
-}
-export default Button;

package/src/Button/style/index.ts

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

package/src/Dropdown/Button.tsx

@@ -1,93 +0,0 @@
-import React, { ReactElement } from 'react';
-import Button, { ButtonType, Size} from '../Button';
-// eslint-disable-next-line import/no-cycle
-import Dropdown from './index';
-import Icon from '../Icon';
-import './style'
-
-export type ActionType = 'hover' | 'click' | 'contextMenu';
-
-export interface IDropdownButton {
-  /**
-   * @description 类型
-   * @type 'primary' | 'secondary' | 'danger' | 'text' | 'link'
-   * @default primary
-   */
-  type?: ButtonType;
-  /**
-   * @description 尺寸
-   * @type 'small' | 'default' | 'large'
-   * @default large
-   */
-  size?: Size;
-  /**
-   * @description 是否禁用
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * @description 设置按钮的图标组件
-   */
-  icon?: React.ReactNode;
-  /**
-   * @description 设置按钮进入载入状态
-   * @default false
-   */
-  loading?: boolean | {
-    delay?: number;
-  };
-  /**
-   * @description 菜单
-   * @type Menu | () => Menu
-   * @default -
-   */
-  overlay: ReactElement | (() => ReactElement);
-  /**
-   * @description 菜单弹出位置
-   * @default bottomLeft
-   */
-  placement?: 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight';
-  /**
-   * @description 触发下拉的行为
-   * @type ActionType[], 其中 ActionType 为 'hover' | 'click' | 'contextMenu';
-   * @default [hover]
-   */
-  trigger?: ActionType[];
-  /**
-   * @description 菜单是否显示
-   * @default -
-   */
-  visible?: boolean;
-  /**
-   * @description 菜单显示状态改变时调用，参数为 visible，点击菜单按钮导致的消失不会触发
-   * @default -
-   */
-  onVisibleChange?: (visible: boolean) => void;
-  /**
-   * @description 点击按钮时的回调
-   * FIXME: onClick和trigger冲突，antd按钮和下拉菜单触发区域不同，需要和视觉确认
-   */
-  onClick?: React.MouseEventHandler<HTMLElement>;
-  children?: React.ReactNode;
-  className?: string;
-}
-
-export default function DropdownButton(props: IDropdownButton) {
-  const { children, overlay, placement, trigger, visible, disabled, onVisibleChange, ...buttonProps } = props;
-
-  return (
-    <Dropdown
-      overlay={overlay}
-      placement={placement}
-      trigger={trigger}
-      visible={visible}
-      disabled={disabled}
-      onVisibleChange={onVisibleChange}
-    >
-      <Button {...buttonProps}>
-        {children}
-        <Icon type="expand_more" />
-      </Button>
-    </Dropdown>
-  );
-}

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Dropdown, Menu } from '@aloudata/aloudata-design';
-import '../../style/index.less';
-import '../../../Menu/style/index.less';
-const MenuItem = Menu.Item;
-
-export default () => {
-  const menu = (
-    <Menu>
-      <MenuItem key={1}>1st menu item</MenuItem>
-      <MenuItem key={2} disabled>2nd menu item</MenuItem>
-      <MenuItem key={3}>3nd menu item</MenuItem>
-    </Menu>
-  );
-  return (
-    <Dropdown overlay={menu}>
-      <span>Hover me</span>
-    </Dropdown>
-  );
-}

package/src/Dropdown/demo/button/index.tsx

@@ -1,98 +0,0 @@
-import React, { Dispatch, SetStateAction, useState } from 'react';
-import Icon from '../../../Icon';
-import Radio, { RadioChangeEvent } from 'antd/lib/radio';
-import { Dropdown, Menu } from '@aloudata/aloudata-design';
-import './index.less';
-
-const DropdownButton = Dropdown.Button;
-
-export default () => {
-  const [size, setSize] = useState('default');
-  const [type, setType] = useState('primary');
-  const [disabled, setDisabled] = useState(false);
-  const [isIcon, setIsIcon] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [placement, setPlacement] = useState('bottomLeft');
-
-  const menu = (
-    <Menu>
-      <Menu.Item key="1">1st menu item</Menu.Item>
-      <Menu.Item key="2">2nd menu item</Menu.Item>
-      <Menu.Item key="3">3rd menu item, long long content</Menu.Item>
-    </Menu>
-  );
-
-  function onChangeValue<T>(setCallback: Dispatch<SetStateAction<T>>) {
-    return (e: RadioChangeEvent) => setCallback(e.target.value);
-  }
-
-  return (
-    <div className="demo-dropdown-button">
-      <div>
-        <div className="row">
-          <span className="title">type:</span>
-          <Radio.Group value={type} onChange={onChangeValue<string>(setType)}>
-            <Radio value="primary">primary</Radio>
-            <Radio value="secondary">secondary</Radio>
-            <Radio value="danger">danger</Radio>
-            <Radio value="text">text</Radio>
-            <Radio value="link">link</Radio>
-          </Radio.Group>
-        </div>
-        <div className="row">
-          <span className="title">size:</span>
-          <Radio.Group value={size} onChange={onChangeValue<string>(setSize)}>
-            <Radio value="large">large</Radio>
-            <Radio value="default">default</Radio>
-            <Radio value="small">small</Radio>
-          </Radio.Group>
-        </div>
-        <div className="row">
-          <span className="title">disabled:</span>
-          <Radio.Group value={disabled} onChange={onChangeValue<boolean>(setDisabled)}>
-            <Radio value={true}>true</Radio>
-            <Radio value={false}>false</Radio>
-          </Radio.Group>
-        </div>
-        <div className="row">
-          <span className="title">icon button:</span>
-          <Radio.Group value={isIcon} onChange={onChangeValue<boolean>(setIsIcon)}>
-            <Radio value={true}>icon button</Radio>
-            <Radio value={false}>not icon button</Radio>
-          </Radio.Group>
-        </div>
-        <div className="row">
-          <span className="title">loading:</span>
-          <Radio.Group value={loading} onChange={onChangeValue<boolean>(setLoading)}>
-            <Radio value={true}>loading</Radio>
-            <Radio value={false}>not loading</Radio>
-          </Radio.Group>
-        </div>
-        <div className="row">
-          <span className="title">placement:</span>
-          <Radio.Group value={placement} onChange={onChangeValue<string>(setPlacement)}>
-            <Radio value="bottomLeft">bottomLeft</Radio>
-            <Radio value="bottomCenter">bottomCenter</Radio>
-            <Radio value="bottomRight">bottomRight</Radio>
-            <Radio value="topLeft">topLeft</Radio>
-            <Radio value="topCenter">topCenter</Radio>
-            <Radio value="topRight">topRight</Radio>
-          </Radio.Group>
-        </div>
-      </div>
-      <div>
-        <DropdownButton
-          overlay={menu}
-          icon={isIcon && <Icon type="Positioning" />}
-          loading={loading}
-          disabled={disabled}
-          size={size}
-          type={type}
-          placement={placement}
-        >
-          {isIcon ? null : 'Button Content'}
-        </DropdownButton>
-      </div>
-    </div>
-  );
-};

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

@@ -1,47 +0,0 @@
-import React from 'react';
-import Button from 'antd/lib/button';
-import Space from 'antd/lib/space';
-import { Dropdown, Menu } from '@aloudata/aloudata-design';
-
-const menu = (
-  <Menu>
-    <Menu.Item key={1}>
-      1st menu item
-    </Menu.Item>
-    <Menu.Item key={2}>
-      2nd menu item
-    </Menu.Item>
-    <Menu.Item key={3}>
-      3rd menu item
-    </Menu.Item>
-  </Menu>
-);
-
-export default () => (
-  <div className="demo-dropdown-placement">
-    <Space direction="vertical">
-      <Space wrap>
-        <Dropdown overlay={menu} placement="bottomLeft">
-          <Button>bottomLeft</Button>
-        </Dropdown>
-        <Dropdown overlay={menu} placement="bottomCenter">
-          <Button>bottomCenter</Button>
-        </Dropdown>
-        <Dropdown overlay={menu} placement="bottomRight">
-          <Button>bottomRight</Button>
-        </Dropdown>
-      </Space>
-      <Space wrap>
-        <Dropdown overlay={menu} placement="topLeft">
-          <Button>topLeft</Button>
-        </Dropdown>
-        <Dropdown overlay={menu} placement="topCenter">
-          <Button>topCenter</Button>
-        </Dropdown>
-        <Dropdown overlay={menu} placement="topRight">
-          <Button>topRight</Button>
-        </Dropdown>
-      </Space>
-    </Space>
-  </div>
-);

package/src/Dropdown/demo/subMenu/index.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { message} from 'antd';
-import { Dropdown, Menu } from '@aloudata/aloudata-design';
-
-const MenuItem = Menu.Item;
-const SubMenu = Menu.SubMenu;
-const MenuDivider = Menu.Divider;
-
-export default () => {
-  const menu = (
-    <Menu onClick={(info: { key: string }) => {
-      message.info(`Click on menu item ${info.key}`);
-    }}>
-      <MenuItem key={1}>1st menu item</MenuItem>
-      <MenuItem key={2} disabled>2nd menu item</MenuItem>
-      <MenuItem key={3}>3nd menu item</MenuItem>
-      <MenuDivider />
-      <SubMenu key={4} title="sub menu">
-        <MenuItem key={5}>Sub menu item5</MenuItem>
-        <MenuItem key={6}>Sub menu item6Sub menu item6Sub menu item6Sub menu item6</MenuItem>
-        <MenuItem key={7}>Sub menu item7</MenuItem>
-        <SubMenu key={8} title="sub menu">
-          <MenuItem key={9}>Sub menu item9</MenuItem>
-          <MenuItem key={10}>Sub menu item10</MenuItem>
-          <MenuItem key={11}>Sub menu item11</MenuItem>
-        </SubMenu>
-      </SubMenu>
-    </Menu>
-  );
-  return (
-    <Dropdown overlay={menu}>
-      <span>Hover me</span>
-    </Dropdown>
-  );
-}

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

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Dropdown, Menu } from '@aloudata/aloudata-design';
-
-const MenuItem = Menu.Item;
-
-export default () => {
-  const menu = (
-    <Menu>
-      <MenuItem key={1}>1st menu item</MenuItem>
-      <MenuItem key={2} disabled>2nd menu item</MenuItem>
-      <MenuItem key={3}>3nd menu item</MenuItem>
-    </Menu>
-  );
-  return (
-    <Dropdown overlay={menu} trigger={['click']}>
-      <span>Click me</span>
-    </Dropdown>
-  );
-}

package/src/Dropdown/index.md

@@ -1,35 +0,0 @@
----
-# nav:
-#   title: 组件
-#   path: /components
-title: Dropdown 下拉菜单
-group:
-  title: 组件
----
-
-# Dropdown 下拉菜单
-
-向下弹出的列表
-
-## 代码演示
-
-<code src="./demo/basic" title="基本" description="最简单的用法">
-
-<code src="./demo/placement" title="弹出位置" description="支持6个弹出位置">
-
-<code src="./demo/trigger" title="触发方式" description="点击触发下拉菜单">
-
-<code src="./demo/subMenu" title="多级菜单" description="传入的菜单有多个层级">
-
-<code src="./demo/button" title="带下拉框的按钮" description="按钮和下拉框结合">
-
-
-## API
-
-### Dropdown
-
-<API exports='["default"]' hideTitle />
-
-### Dropdown.Button
-
-<API exports='["default.Button"]' hideTitle />

package/src/Dropdown/index.test.tsx

@@ -1,185 +0,0 @@
-import '@testing-library/jest-dom';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import Menu from '../Menu';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import Dropdown from './index';
-
-const menu = (
-  <Menu>
-    <Menu.Item key="1">1st menu item</Menu.Item>
-    <Menu.Item key="2">2nd menu item</Menu.Item>
-  </Menu>
-);
-
-describe('Dropdown', () => {
-  it('destroyPopupOnHide', () => {
-    const msg = 'trigger';
-    const { rerender } = render(<Dropdown visible overlay={menu} destroyPopupOnHide><span>{msg}</span></Dropdown>);
-    rerender(<Dropdown visible={false} overlay={menu} destroyPopupOnHide><span>{msg}</span></Dropdown>);
-
-    expect(screen.queryByText('1st menu item')).toBeNull();
-  });
-
-  it('getPopupContainer', async () => {
-    const container = document.createElement('div');
-    container.classList.add('container');
-    document.body.appendChild(container);
-
-    await act(async () => {
-      render(<Dropdown visible overlay={menu} getPopupContainer={() => container}><span>trigger</span></Dropdown>);
-      // 加下面这行的原因是，不加时会报menu的state在act外部变化的异常
-      await waitFor(() => {
-        return document.querySelector('.container .ant-dropdown');
-      });
-    });
-
-    expect(document.querySelector('.container .ant-dropdown')).not.toBeNull();
-
-    document.body.removeChild(container);
-  });
-
-  it('overlay callback menu', async () => {
-    await act(async () => {
-      render(<Dropdown visible overlay={() => menu}><span>trigger</span></Dropdown>);
-      // 加下面这行的原因是，不加时会报menu的state在act外部变化的异常
-      await waitFor(() => {
-        return screen.queryByText('1st menu item');
-      });
-    });
-
-    expect(screen.queryByText('1st menu item')).not.toBeNull();
-  });
-
-  it('overlayClassName', async () => {
-    const overlayClassName = 'overlayClassName';
-    await act(async () => {
-      render(<Dropdown visible overlay={menu} overlayClassName={overlayClassName}><span>trigger</span></Dropdown>);
-      // 加下面这行的原因是，不加时会报menu的state在act外部变化的异常
-      await waitFor(() => {
-        return screen.queryByText('1st menu item');
-      });
-    });
-    expect(document.querySelector(`.${overlayClassName}.ant-dropdown`)).not.toBeNull();
-  });
-
-  it('visible', async () => {
-    const msg = 'visible';
-
-    await act(async () => {
-      const { rerender } = render(<Dropdown visible overlay={menu}><span>{msg}</span></Dropdown>);
-      rerender(<Dropdown visible={false} overlay={menu}><span>{msg}</span></Dropdown>);
-      await waitFor(() => {
-        return document.querySelector('.ant-dropdown');
-      });
-    });
-
-    expect(
-      document.querySelector('.ant-dropdown.ant-dropdown-hidden'),
-    ).not.toBeNull();
-  });
-
-  it('onVisibleChange', async () => {
-    jest.useFakeTimers();
-
-    const className = 'onVisibleChangeClassName';
-
-    let visible = false;
-    const onVisibleChange = (newVisible: boolean) => {
-      visible = newVisible;
-    };
-
-    await act(async () => {
-      render(<Dropdown overlay={menu} onVisibleChange={onVisibleChange}><span className={className}>trigger</span></Dropdown>);
-    });
-
-    const innerDom = document.querySelector(`.${className}`);
-    fireEvent.mouseEnter(innerDom!);
-
-    await act(async () => {
-      // menu内容出现后，依然没有触发onVisibleChange，测试了延时超过150ms，能触发onVisibleChange，没有搞清原理
-      const DELAY_TIME = 150;
-      jest.advanceTimersByTime(DELAY_TIME);
-      await waitFor(() => {
-        return document.querySelector('.ant-dropdown');
-      });
-    });
-    expect(visible).toBeTruthy();
-
-    jest.runOnlyPendingTimers();
-    jest.useRealTimers();
-  });
-});
-
-describe('Dropdown.Button', () => {
-  it('overlay callback menu', async () => {
-    await act(async () => {
-      render(<Dropdown.Button visible overlay={() => menu}><span>trigger</span></Dropdown.Button>);
-      // 加下面这行的原因是，不加时会报menu的state在act外部变化的异常
-      await waitFor(() => {
-        return screen.queryByText('1st menu item');
-      });
-    });
-
-    expect(screen.queryByText('1st menu item')).not.toBeNull();
-  });
-
-  it('visible', async () => {
-    const msg = 'visible';
-
-    await act(async () => {
-      const { rerender } = render(<Dropdown.Button visible overlay={menu}><span>{msg}</span></Dropdown.Button>);
-      rerender(<Dropdown.Button visible={false} overlay={menu}><span>{msg}</span></Dropdown.Button>);
-      await waitFor(() => {
-        return document.querySelector('.ant-dropdown');
-      });
-    });
-
-    expect(
-      document.querySelector('.ant-dropdown.ant-dropdown-hidden'),
-    ).not.toBeNull();
-  });
-
-  it('onVisibleChange', async () => {
-    jest.useFakeTimers();
-
-    const className = 'onVisibleChangeClassName';
-
-    let visible = false;
-    const onVisibleChange = (newVisible: boolean) => {
-      visible = newVisible;
-    };
-
-    await act(async () => {
-      render(<Dropdown.Button overlay={menu} onVisibleChange={onVisibleChange}><span className={className}>trigger</span></Dropdown.Button>);
-    });
-
-    const innerDom = document.querySelector(`.${className}`);
-    fireEvent.mouseEnter(innerDom!);
-
-    await act(async () => {
-      // menu内容出现后，依然没有触发onVisibleChange，测试了延时超过150ms，能触发onVisibleChange，没有搞清原理
-      const DELAY_TIME = 150;
-      jest.advanceTimersByTime(DELAY_TIME);
-      await waitFor(() => {
-        return document.querySelector('.ant-dropdown');
-      });
-    });
-    expect(visible).toBeTruthy();
-
-    jest.runOnlyPendingTimers();
-    jest.useRealTimers();
-  });
-
-  it('onClick', async () => {
-    const fn = jest.fn();
-    await act(async () => {
-      render(<Dropdown.Button visible overlay={menu} onClick={fn}><span>trigger</span></Dropdown.Button>);
-      await waitFor(() => {
-        return document.querySelector('.ant-dropdown');
-      });
-    });
-    screen.queryByText('trigger')?.closest('span')?.click();
-    expect(fn).toHaveBeenCalled();
-  });
-});