@aloudata/aloudata-design 0.1.0-beta1

package/src/Input/index.test.tsx

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

@@ -0,0 +1,91 @@
+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.less

@@ -0,0 +1,62 @@
+@import '../../style/index.less';
+@import '../../Icon/index.less';
+
+@ald-prefix:ant;
+
+@ald-iconfont-css-prefix:anticon;
+.@{ald-prefix}-input {
+  color: @NL0;
+  border-radius: @border-radius-base;
+  &::placeholder {
+    color: @NL50;
+  }
+
+  &-prefix {
+    color: @NL30;
+  }
+
+  &-suffix {
+    color: @NL60;
+  }
+
+  &:focus,
+  &-focused {
+    border-color: @B40;
+    box-shadow: none;
+  }
+
+  &[disabled] {
+    border-color: @NL90;
+    background-color: @NL95;
+    color: @NL80;
+
+    &::placeholder {
+      color: @NL80;
+    }
+  }
+
+  &-sm {
+    border-radius: @border-radius-sm;
+  }
+
+  &-affix-wrapper {
+    border-radius: @border-radius-base;
+    &-hover,
+    &-focused,
+    &:hover {
+      box-shadow: unset;
+    }
+    .@{ald-prefix}-input {
+      border-radius: 0;
+      caret-color: @B40;
+    }
+    &-sm {
+      border-radius: @border-radius-sm;
+    }
+  }
+}
+.@{ald-iconfont-css-prefix} {
+  &.@{ald-iconfont-css-prefix}-close-circle, &.@{ald-prefix}-clear-icon {
+    .ald-iconfont('\e616');
+  }
+}

package/src/Input/style/index.ts

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

package/src/Menu/Divider.tsx

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

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

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

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

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

@@ -0,0 +1,27 @@
+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.less

@@ -0,0 +1,33 @@
+@import '../../style/index.less';
+@import '../../Icon/index.less';
+
+.menu-popup {
+  border: 1px solid @NL95;
+  box-shadow: @shadow-actionsheet;
+  border-radius: @border-radius-base;
+  background: @BG100;
+}
+
+.ald-menu,
+.ald-submenu {
+  .menu-popup();
+
+  .ant-dropdown-menu-item-divider,
+  .ant-dropdown-menu-submenu-title-divider {
+    background-color: @NL90;
+  }
+
+  .ald-iconfont {
+    font-family: @icon-font !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  // 替换二级菜单箭头icon
+  .ant-dropdown-menu-item .ant-dropdown-menu-submenu-expand-icon .ant-dropdown-menu-submenu-arrow-icon,
+  .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-expand-icon .ant-dropdown-menu-submenu-arrow-icon {
+    .ald-iconfont('\e691');
+  }
+}

package/src/Menu/style/index.ts

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