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

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

@@ -1,25 +0,0 @@
-import React from 'react';
-import message from 'antd/lib/message';
-import { Input } from '@aloudata/aloudata-design';
-import '../../style'
-import './index.less';
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value);
-  };
-  return (
-    <div className='ald-input-demo'>
-      <Input style={{width: 240}} className="ald-input" size="small" placeholder="small" />
-      <br />
-      <Input style={{width: 240}} className="ald-input" placeholder="default" />
-      <br/>
-      <Input value={value} style={{width: 240}} className="ald-input" size="large" onChange={onChange} placeholder="large" />
-      <br />
-      <Input style={{width: 240}} size="large" className="ald-input" defaultValue='Input large size with value' />
-      <br />
-      <Input style={{width: 240}} disabled value="disabled" />
-    </div>
-  )
-};

package/src/Input/demo/gourp/index.tsx

@@ -1,30 +0,0 @@
-import React from 'react';  
-import { Input } from '@aloudata/aloudata-design';
-import { Radio } from 'antd';
-export default () => {
-  const [size, setSize] = React.useState('large');
-  const [compact, setCompact] = React.useState(false);
-  const handleSizeChange = (e: any) => {
-    setSize(e.target.value);
-  };
-  const handleCompactChange = (e: any) => {
-    setCompact(e.target.value);
-  };
-  return (
-    <div className="ald-input-demo">
-      <Radio.Group value={size} onChange={handleSizeChange}>
-        <Radio.Button value="large">Large</Radio.Button>
-        <Radio.Button>Default</Radio.Button>
-        <Radio.Button value="small">Small</Radio.Button>
-      </Radio.Group>
-      <Radio.Group value={compact} onChange={handleCompactChange}>
-        <Radio.Button value={true}>compact紧凑模式</Radio.Button>
-        <Radio.Button value={false}>正常模式</Radio.Button>
-      </Radio.Group> 
-      <Input.Group size={size} compact={compact}>
-        <Input style={{ width:'10%' }} defaultValue="+80"/>
-        <Input style={{ width: '40%' }} defaultValue="13389898989"/>
-      </Input.Group>
-    </div>
-  );
-}

package/src/Input/demo/password/index.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Input } from '@aloudata/aloudata-design';
-import './index.less';
-export default () => {
-  return (
-    <div className="ald-input-demo">
-      <Input.Password className="ald-input" style={{ width: 240 }} size="small" placeholder="123" />
-      <Input.Password style={{ width: 240 }} size="large" placeholder="123" />
-    </div>
-  );
-};

package/src/Input/demo/prefix/index.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import {Input} from '@aloudata/aloudata-design';
-import './index.less';
-import Icon from '../../../Icon';
-
-export default () => {
-  return(
-    <div className="ald-input-demo">
-      <Input prefix={<span>prefix</span>}  placeholder="placeholder" />
-      <Input prefix={<Icon type="Groupby_flash_on_line"/>} placeholder="placeholder" />
-      </div>
-  )
-}

package/src/Input/demo/showCount/index.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Input } from '@aloudata/aloudata-design';
-import './index.less';
-
-export default () => {
-  return (
-    <div className="ald-input-demo">
-      <Input showCount={{
-        formatter: (info:{ count: number, maxLength?: number }) => {
-          const { count, maxLength } = info;
-          return `当前长度为：${count},最大长度为：${maxLength}`;
-        },
-      }} maxLength={10} />
-    </div>
-  )
-}

package/src/Input/demo/textArea/autoSize.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Input,Button } from '@aloudata/aloudata-design';
-
-export default () => {
-  const [maxRow, setMaxRow] = React.useState(1);
-  const onClick = () => {
-    setMaxRow(maxRow + 1);
-  };
-  const showCount = (args: { count: number, maxLength: number }) => {
-    const { count, maxLength } = args;
-    return `当前长度为：${count},最大长度为：${maxLength}`;
-  };
-  return (
-    <div className="ald-input-demo">
-      <span>autoSize属性自动调整高度，不可拖拽调高，当前最高{maxRow}行</span><Button size="small" onClick={onClick}>增加最大行数</Button>
-      <Input.TextArea id="ald-input-textArea" maxLength={20} autoSize={{ minRows: 1, maxRows: maxRow }} />
-      <span>带展示字数提示</span>
-      <Input.TextArea id="ald-input-textArea" showCount={{formatter:showCount}} maxLength={20}  />
-    </div>
-  )
-}

package/src/Input/index.md

@@ -1,37 +0,0 @@
----
-# nav:
-#   title: 组件
-#   path: /components
-title: Input 输入框
-group:
-  title: 组件
----
-
-## Input 输入框
-
-通过鼠标或键盘输入内容，是最基础的表单域的包装。
-
-## 代码演示
-
-<code src="./demo/basic" title="基本使用" description="基本使用，默认宽度100%">
-<code src="./demo/password" title="密码框" description="密码框">
-<code src="./demo/allowClear" title="清除内容" description="显示删除icon，点击清除内容">
-<code src="./demo/prefix" title="前置内容" description="前置内容为ReactNode 可自定义">
-<code src="./demo/showCount" title="显示字数" description="默认不显示，可自定义格式">
-<code src="./demo/textArea/autoSize.tsx" title="TextArea" description="可调整"> 
-<code src="./demo/gourp" title="group" description="Group 模式">
-
-## API
-### Input
-
-<API hideTitle src="./index.tsx" hideTitle />
-支持原生 input 的其他所有属性。
-
-### Input.TextArea
-
-<API src="./components/TextArea/index.tsx" hideTitle>
-Input.TextArea 的其他属性和浏览器自带的 textarea 一致。
-
-### Input.Group
-
-<API src="./components/Group/index.tsx" hideTitle>

package/src/Input/index.test.tsx

@@ -1,78 +0,0 @@
-import React from 'react';
-import '@testing-library/jest-dom';
-import { render, screen, fireEvent } from '@testing-library/react';
-import Input from './index';
-import _ from 'lodash';
-
-describe('Input', () => {
-  it('Input large size with value', () => {
-    const text = 'Input large size with value';
-    render(<Input className="ald-input" size="large" value={text} />);
-    expect(document.querySelector('.ald-input')).not.toBeNull();
-    expect(document.querySelector('.ald-input')).toHaveClass('ant-input-lg');
-  });
-
-  it('Input native default props placeholder', () => {
-    render(<Input placeholder="placeholder" />);
-    expect(screen.queryByPlaceholderText('placeholder')).not.toBeNull();
-  });
-  it('input disable', () => {
-    render(<Input disabled />);
-    expect(screen.queryByRole('textbox')).toHaveAttribute('disabled');
-  });
-  it('input allowClear', () => {
-    render(<Input allowClear />);
-    expect(screen.queryByRole('button', { name: /close-circle/i })).not.toBeNull();
-  });
-  it('input prefix', () => {
-    render(<Input prefix={<span>prefix</span>} />);
-    expect(screen.queryByText('prefix')).not.toBeNull();
-  });
-  it('input showCount', () => {
-    const maxLength = 10;
-    const collection = ['abc', 'a', 'bcd'];
-    const value = _.sample(collection);
-    render(<Input showCount maxLength={maxLength} value={value} />);
-    expect(screen.queryByText(`${value.length} / ${maxLength}`)).not.toBeNull();
-    render(<Input
-      showCount={{ formatter: ({ count: number }) => {
-        return `长度为：${number}`;
-      } }}
-      value={value}
-    />);
-    expect(screen.queryByText(`长度为：${value.length}`)).not.toBeNull();
-  });
-  it('input onChange', () => {
-    const onChange = jest.fn();
-    render(<Input onChange={onChange} />);
-    const input = screen.queryByRole('textbox');
-    fireEvent.change(input!, { target: { value: 'change' } });
-    expect(onChange).toBeCalled();
-  });
-  it('input onPressEnter', () => {
-    const onPressEnter = jest.fn();
-    render(<Input onPressEnter={onPressEnter} />);
-    const input = screen.queryByRole('textbox');
-    fireEvent.keyDown(input!, { key: 'Enter', keyCode: 13, which: 13 });
-    expect(onPressEnter).toBeCalled();
-  });
-});
-describe('Input.textArea', () => {
-  it('Input.textArea showCount', () => {
-    const maxLength = 10;
-    render(<Input.TextArea showCount maxLength={maxLength} />);
-    const textArea = screen.queryByRole('textbox');
-    const textAreaParent = textArea!.parentElement;
-    expect(textAreaParent).toHaveAttribute('data-count');
-  });
-  it('Input.textArea onPressEnter', () => {
-    const onPressEnter = jest.fn();
-    render(<Input.TextArea onPressEnter={onPressEnter} />);
-    const textArea = screen.queryByRole('textbox');
-    fireEvent.keyDown(textArea!, { key: 'Enter', keyCode: 13, which: 13 });
-    expect(onPressEnter).toBeCalled();
-  });
-});
-describe('Input.group', () => {
-  it('', () => {});
-});

package/src/Input/index.tsx

@@ -1,91 +0,0 @@
-import React, { ReactNode } from 'react';
-import {Input as AntdInput} from 'antd';
-import type { ShowCountProps, InputProps } from 'antd/lib/input/Input';
-import { SizeType } from 'antd/lib/config-provider/SizeContext';
-import TextArea from './components/TextArea';
-import Password from './components/Password';
-import Group from './components/Group';
-import './style';
-type TSize = 'small' | 'default' | 'large';
-
-type ChangeEventHandler = (e: React.ChangeEvent<HTMLInputElement>) => void;
-export interface IInputProps extends Omit<InputProps, 'size' | 'id' | 'prefix' | 'allowClear' |
-'disabled' | 'showCount' | 'maxLength' |
-'value' | 'defaultValue' | 'onPressEnter' | 'onChange'> {
-  /**
-   * @description 输入框尺寸
-   * @default default
-   * @type 'small' | 'default' | 'large';
-   */
-  size?: TSize;
-  /**
-   * @description 输入框id
-   */
-  id?: string;
-  /**
-   * @description 提示文字
-   */
-  prefix?: ReactNode;
-  /**
-   * @description 带标签的 input，设置前置标签
-   */
-  allowClear?: boolean;
-  /**
-   * @description 可以点击清除图标删除内容
-   * @default true
-   */
-  disabled?: boolean;
-  /**
-   * @description 提示文字
-   * @default false
-   * @type boolean | { formatter: (args: { count: number; maxLength?: number; }) => string; };
-   */
-  showCount?: boolean | ShowCountProps;
-  /**
-   * @description 最大长度
-   */
-  maxLength?: number;
-  /**
-   * @description 输入框内容
-   */
-  value?: string;
-  /**
-   * @description 输入框默认内容
-   */
-  defaultValue?: string;
-  /**
-   * @description 按下回车的回调
-   * @type (e) => void
-   */
-  onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
-  /**
-   * @description 输入框内容变化时的回调
-   * @type (e: React.ChangeEvent<HTMLInputElement>) => void;
-   */
-  onChange?: ChangeEventHandler;
-}
-// IInputProps 和 InputProps 类型合并，并去除InputProps中的重复属性
-function Input(props: IInputProps) {
-  const { size = 'default', ...rest } = props;
-  const getInputSize = (inputSize: TSize): SizeType => {
-    if (inputSize === 'small' || inputSize === 'large') {
-      return inputSize;
-    }
-    return 'middle';
-  };
-  return (
-    <AntdInput
-      {...rest}
-      size={getInputSize(size)}
-      bordered
-      addonAfter={null}
-      addonBefore={null}
-      suffix={null}
-    />
-  );
-}
-Input.TextArea = TextArea;
-Input.Group = Group;
-Input.Password = Password;
-
-export default Input;

package/src/Input/style/index.ts

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

package/src/Menu/Divider.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Menu as AntdMenu } from 'antd';
-import './style';
-
-export interface IMenuDividerProps {
-}
-
-const AntdMenuDivider = AntdMenu.Divider;
-
-export default function Menu(props: IMenuDividerProps) {
-  return <AntdMenuDivider {...props} />;
-}

package/src/Menu/MenuItem.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Menu as AntdMenu } from 'antd';
-import './style';
-
-export interface IMenuItemProps {
-  /**
-   * @description 唯一标志
-   * @type string | number
-   * @default -
-   */
-  key: React.Key;
-  /**
-   * @description 是否禁用
-   * @default false
-   */
-  disabled?: boolean;
-  children?: React.ReactNode;
-}
-
-const AntdMenuItem = AntdMenu.Item;
-
-export default function Menu(props: IMenuItemProps) {
-  return <AntdMenuItem {...props} />;
-}

package/src/Menu/SubMenu.tsx

@@ -1,37 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import { Menu as AntdMenu } from 'antd';
-import './style';
-
-export interface ISubMenuProps {
-  /**
-   * @description 唯一标志
-   * @type string | number
-   * @default -
-   */
-  key: React.Key;
-  /**
-   * @description 是否禁用
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * @description 子菜单样式
-   * @default -
-   */
-  popupClassName?: string;
-  /**
-   * @description 子菜单项值
-   */
-  title?: React.ReactNode;
-  children?: React.ReactNode | React.ReactNode[];
-}
-
-const AntdSubMenu = AntdMenu.SubMenu;
-
-export default function SubMenu(props: ISubMenuProps) {
-  const { popupClassName, ...otherProps } = props;
-  const OFFSET_WIDTH = 4;
-  const OFFSET_HEIGHT = 0;
-  return <AntdSubMenu popupClassName={classNames(popupClassName, 'ald-submenu')} popupOffset={[OFFSET_WIDTH, OFFSET_HEIGHT]} {...otherProps} />;
-}

package/src/Menu/index.md

@@ -1,36 +0,0 @@
----
-# nav:
-#   title: 组件
-#   path: /components
-title: Menu 导航菜单
-group:
-  title: 组件
----
-
-## Menu 导航菜单
-
-导航的菜单列表
-
-## 代码演示
-
-<code src="../Dropdown/demo/subMenu" title="下拉多级菜单" description="传入的菜单有多个层级">
-
-## API
-
-### Menu
-
-<API exports='["default"]' hideTitle />
-
-### Menu.Item
-
-<API exports='["default.Item"]' hideTitle />
-
-### Menu.SubMenu
-
-<API exports='["default.SubMenu"]' hideTitle />
-
-## 注意
-
-* Menu 元素为 ul，因而仅支持 li 以及 script-supporting 子元素。因而你的子节点元素应该都在 Menu.Item 内使用。
-
-* Menu 需要计算节点结构，因而其子元素仅支持 Menu.* 以及对此进行封装的 HOC 组件。

package/src/Menu/index.test.tsx

@@ -1,144 +0,0 @@
-import '@testing-library/jest-dom';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import Dropdown from '../Dropdown';
-import Menu from './index';
-
-describe('Menu', () => {
-  it('onClick', async () => {
-    let testKey = '';
-    const onClick = ({ key }: { key: string }) => { testKey = key; };
-    const menuItemText = '1st menu item';
-    const menu = (
-      <Menu onClick={onClick}>
-        <Menu.Item key="1"><span>{menuItemText}</span></Menu.Item>
-        <Menu.Item key="2">2st menu item</Menu.Item>
-      </Menu>
-    );
-
-    await act(async () => {
-      render(<Dropdown overlay={menu} visible><span>trigger</span></Dropdown>);
-      await waitFor(() => {
-        return screen.getByText(menuItemText);
-      });
-    });
-
-    fireEvent.click(screen.getByText(menuItemText));
-    expect(testKey).toEqual('1');
-  });
-
-  it('MenuItem.disabled', async () => {
-    const onClick = jest.fn();
-    const menuItemText = '1st menu item';
-    const menu = (
-      <Menu onClick={onClick}>
-        <Menu.Item key="1" disabled><span>{menuItemText}</span></Menu.Item>
-        <Menu.Item key="2">2st menu item</Menu.Item>
-      </Menu>
-    );
-
-    await act(async () => {
-      render(<Dropdown overlay={menu} visible><span>trigger</span></Dropdown>);
-      await waitFor(() => {
-        return screen.getByText(menuItemText);
-      });
-    });
-
-    fireEvent.click(screen.getByText(menuItemText));
-    expect(onClick).not.toBeCalled();
-  });
-
-  it('SubMenu hover', async () => {
-    const subMenuTitle = 'subMenuTitle';
-    const menuItemText = '1st menu item';
-    const menu = (
-      <Menu>
-        <Menu.SubMenu key="0" title={subMenuTitle}>
-          <Menu.Item key="1"><span>{menuItemText}</span></Menu.Item>
-          <Menu.Item key="2">2st menu item</Menu.Item>
-        </Menu.SubMenu>
-      </Menu>
-    );
-
-    await act(async () => {
-      render(<Dropdown overlay={menu} visible><span>trigger</span></Dropdown>);
-      await waitFor(() => {
-        return screen.getByText(subMenuTitle);
-      });
-    });
-
-    await act(async () => {
-      fireEvent.mouseEnter(screen.getByText(subMenuTitle));
-      await waitFor(() => {
-        return screen.getByText(menuItemText);
-      });
-    });
-    expect(screen.getByText(menuItemText)).not.toBeNull();
-  });
-
-  it('SubMenu disabled', async () => {
-    jest.useFakeTimers();
-
-    const subMenuTitle = 'subMenuTitle';
-    const menuItemText = '1st menu item';
-    const menu = (
-      <Menu>
-        <Menu.SubMenu key="0" title={subMenuTitle} disabled>
-          <Menu.Item key="1"><span>{menuItemText}</span></Menu.Item>
-          <Menu.Item key="2">2st menu item</Menu.Item>
-        </Menu.SubMenu>
-      </Menu>
-    );
-
-    await act(async () => {
-      render(<Dropdown overlay={menu} visible><span>trigger</span></Dropdown>);
-      await waitFor(() => {
-        return screen.getByText(subMenuTitle);
-      });
-    });
-
-    act(() => {
-      fireEvent.mouseEnter(screen.getByText(subMenuTitle));
-    });
-    // 等待一段时间，确保 mouseEnterDelay 时间过去
-    const DELAY_TIME = 1000;
-    jest.advanceTimersByTime(DELAY_TIME);
-
-    // 期待二级子菜单不出现
-    expect(screen.queryByText(menuItemText)).toBeNull();
-
-    jest.runOnlyPendingTimers();
-    jest.useRealTimers();
-  });
-
-  it('SubMenu popupClassName', async () => {
-    const subMenuTitle = 'subMenuTitle';
-    const menuItemText = '1st menu item';
-    const popupClassName = 'popupClassName';
-    const menu = (
-      <Menu>
-        <Menu.SubMenu key="0" title={subMenuTitle} popupClassName={popupClassName}>
-          <Menu.Item key="1"><span>{menuItemText}</span></Menu.Item>
-          <Menu.Item key="2">2st menu item</Menu.Item>
-        </Menu.SubMenu>
-      </Menu>
-    );
-
-    await act(async () => {
-      render(<Dropdown overlay={menu} visible><span>trigger</span></Dropdown>);
-      await waitFor(() => {
-        return screen.getByText(subMenuTitle);
-      });
-    });
-
-    await act(async () => {
-      fireEvent.mouseEnter(screen.getByText(subMenuTitle));
-      await waitFor(() => {
-        return screen.getByText(menuItemText);
-      });
-    });
-
-    expect(document.querySelector(`.${popupClassName}`)).not.toBeNull();
-  });
-});

package/src/Menu/index.tsx

@@ -1,27 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import { Menu as AntdMenu} from 'antd';
-import MenuItem from './MenuItem';
-import Divider from './Divider';
-import SubMenu from './SubMenu';
-import type { MenuClickEventHandler } from 'rc-menu/lib/interface';
-import './style';
-
-export interface IMenuProps {
-  /**
-   * @description 点击 MenuItem 调用此函数
-   * @default -
-   */
-  onClick?: MenuClickEventHandler;
-  className?: string;
-  children?: React.ReactNode | React.ReactNode[];
-}
-
-export default function Menu(props: IMenuProps) {
-  const { className, ...otherProps } = props;
-  return <AntdMenu className={classNames(className, 'ald-menu')} {...otherProps} />;
-}
-
-Menu.Item = MenuItem;
-Menu.Divider = Divider;
-Menu.SubMenu = SubMenu;

package/src/Menu/style/index.ts

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