@aloudata/aloudata-design 0.1.0-beta1

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

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

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

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

package/src/Dropdown/index.tsx

@@ -0,0 +1,71 @@
+import React, { ReactElement } from 'react';
+import { Dropdown as AntdDropdown } from 'antd';
+// eslint-disable-next-line import/no-cycle
+import DropdownButton from './Button';
+import './style';
+
+export type ActionType = 'hover' | 'click' | 'contextMenu';
+
+export interface IDropdownProps {
+  /**
+   * @description 关闭后是否销毁Dropdown
+   * @default false
+   */
+  destroyPopupOnHide?: boolean;
+  /**
+   * @description 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位
+   * @default () => document.body
+   */
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  /**
+   * @description 菜单
+   * @type Menu | () => Menu
+   * @default -
+   */
+  overlay: ReactElement | (() => ReactElement);
+  /**
+   * @description 下拉根元素的类名称
+   * @default -
+   */
+  overlayClassName?: string;
+  /**
+   * @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;
+  children?: React.ReactNode;
+  /**
+   * @description 是否禁用
+   * @default false
+   */
+  // 透传给子元素，antd的dropdown用cloneElement生成dropdown的子元素，劫持了disabled属性，因此如果Dropdown上没有disabled属性，子元素不能获得该属性
+  disabled?: boolean;
+}
+
+export default function Dropdown(props: IDropdownProps) {
+  const { children, visible, ...otherProps } = props;
+  // antd根据visible字段是否存在来判断visible是否是可控模式
+  const antdDropdownProps: Omit<IDropdownProps, 'children'> = otherProps;
+  if (visible !== undefined) {
+    antdDropdownProps.visible = visible;
+  }
+  return <AntdDropdown {...antdDropdownProps}>{children}</AntdDropdown>;
+}
+
+Dropdown.Button = DropdownButton;

package/src/Dropdown/style/index.less

@@ -0,0 +1,40 @@
+@import '../../style/index.less';
+
+.ant-dropdown-menu > .ant-dropdown-menu {
+  padding: 0;
+  box-shadow: none;
+}
+
+.ald-menu,
+.ald-submenu {
+  .ant-dropdown-menu-item-active {
+    background-color: @NL97;
+  }
+
+  .ant-dropdown-menu-item-disabled {
+    color: @NL80;
+  }
+
+  .ant-dropdown-menu-submenu-title {
+    padding: 5px 24px 5px 12px;
+
+    .ant-dropdown-menu-submenu-expand-icon {
+      right: 12px;
+    }
+  }
+
+  .ant-dropdown-menu-item {
+    padding: 5px 12px;
+  }
+
+  .ant-dropdown-menu-item,
+  .ant-dropdown-menu-submenu-title {
+    &:hover {
+      background-color: @NL97;
+    }
+  }
+}
+
+.ald-submenu.ant-dropdown-menu-submenu-popup ul {
+  margin: 0;
+}

package/src/Dropdown/style/index.ts

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