@fle-ui/next 1.0.0-alpha.1 → 1.0.0-alpha.2

package/components/drawer/drawer.md

@@ -1,136 +0,0 @@
----
-title: Drawer 抽屉
-order: 0
-legacy: /drawer
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# Drawer 抽屉
-
-屏幕边缘滑出的浮层面板。
-
-## 何时使用
-
-抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务。
-
-- 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。
-- 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。
-
-## 代码演示
-
-### 基础抽屉
-
-<code src="./demos/basic-right.tsx" />
-
-### 自定义位置
-
-<code src="./demos/placement.tsx" />
-
-### 渲染在当前 DOM
-
-<code src="./demos/render-in-current.tsx" />
-
-### 信息预览抽屉
-
-<code src="./demos/user-profile.tsx" />
-
-### 多层抽屉
-
-<code src="./demos/multi-level-drawer.tsx" />
-
-## API
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| autoFocus | 抽屉展开后是否将焦点切换至其 Dom 节点 | boolean | true | 4.17.0 |
-| afterVisibleChange | 切换抽屉时动画结束后的回调 | function(visible) | - |  |
-| bodyStyle | 可用于设置 Drawer 内容部分的样式 | CSSProperties | - |  |
-| className | 对话框外层容器的类名 | string | - |  |
-| closable | 是否显示右上角的关闭按钮 | boolean | true |  |
-| closeIcon | 自定义关闭图标 | ReactNode | &lt;CloseOutlined /> |  |
-| contentWrapperStyle | 可用于设置 Drawer 包裹内容部分的样式 | CSSProperties | - |  |
-| destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | false |  |
-| drawerStyle | 用于设置 Drawer 弹出层的样式 | CSSProperties | - |  |
-| extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
-| footer | 抽屉的页脚 | ReactNode | - |  |
-| footerStyle | 抽屉页脚部件的样式 | CSSProperties | - |  |
-| forceRender | 预渲染 Drawer 内元素 | boolean | false |  |
-| getContainer | 指定 Drawer 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | body |  |
-| headerStyle | 用于设置 Drawer 头部的样式 | CSSProperties | - |  |
-| height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 256 |  |
-| keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |
-| mask | 是否展示遮罩 | boolean | true |  |
-| maskClosable | 点击蒙层是否允许关闭 | boolean | true |  |
-| maskStyle | 遮罩样式 | CSSProperties | {} |  |
-| placement | 抽屉的方向 | `top` \| `right` \| `bottom` \| `left` | `right` |  |
-| push | 用于设置多层 Drawer 的推动行为 | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
-| size | 预设抽屉宽度（或高度），default `378px` 和 large `736px` | 'default' \| 'large' | 'default' | 4.17.0 |
-| style | 可用于设置 Drawer 最外层容器的样式，和 `drawerStyle` 的区别是作用节点包括 `mask` | CSSProperties | - |  |
-| title | 标题 | ReactNode | - |  |
-| visible | Drawer 是否可见 | boolean | - |  |
-| width | 宽度 | string \| number | 378 |  |
-| zIndex | 设置 Drawer 的 `z-index` | number | 1000 |  |
-| onClose | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - |  |
-
-<style>
-  [data-theme='compact'] .ant-drawer-body p {
-  margin-bottom: 0;
-}
-
-[data-theme="dark"] .site-drawer-render-in-current-wrapper {
-  background: #000;
-  border: 1px solid #303030;
-}
-
-.site-drawer-render-in-current-wrapper {
-  position: relative;
-  height: 200px;
-  padding: 48px;
-  overflow: hidden;
-  text-align: center;
-  background: #fafafa;
-  border: 1px solid #ebedf0;
-  border-radius: 2px;
-}
-
-.site-description-item-profile-wrapper {
-  margin-bottom: 7px;
-  color: rgba(0, 0, 0, 0.65);
-  font-size: 14px;
-  line-height: 1.5715;
-}
-
-[data-theme='compact'] .site-description-item-profile-wrapper {
-  font-size: 12px;
-  line-height: 1.66667;
-}
-
-.ant-drawer-body p.site-description-item-profile-p {
-  display: block;
-  margin-bottom: 16px;
-  color: rgba(0, 0, 0, 0.85);
-  font-size: 16px;
-  line-height: 1.5715;
-}
-
-[data-theme='compact'] .ant-drawer-body p.site-description-item-profile-p {
-  font-size: 14px;
-  line-height: 1.66667;
-}
-
-.site-description-item-profile-p-label {
-  display: inline-block;
-  margin-right: 8px;
-  color: rgba(0, 0, 0, 0.85);
-}
-[data-theme="dark"] .site-description-item-profile-p {
-  color: rgba(255,255,255,0.85);
-}
-[data-theme="dark"] .site-description-item-profile-wrapper {
-  color: rgba(255,255,255,0.65);
-}
-</style>

package/components/drawer/index.tsx

@@ -1,18 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Drawer as AntdDrawer } from 'antd';
-
-import type { DrawerProps as AntdDrawerProps } from 'antd/es/drawer';
-
-export interface DrawerProps extends AntdDrawerProps {}
-type DrawerRef = {
-  push(): void;
-  pull(): void;
-};
-
-const Drawer: React.FC<DrawerProps> = forwardRef<DrawerRef, DrawerProps>(
-  (props, ref) => {
-    return <AntdDrawer {...props} />;
-  },
-);
-
-export default Drawer;

package/components/dropdown/components/button.tsx

@@ -1,13 +0,0 @@
-import React, { FC, ReactElement } from 'react';
-import { Dropdown as AntdDropdown } from 'antd';
-import type { DropdownButtonProps as AntdDropdownButtonProps } from 'antd/es/dropdown';
-
-export interface DropdownButtonProps extends AntdDropdownButtonProps {}
-const { Button: AntdDropDownButton } = AntdDropdown;
-const Button: FC<DropdownButtonProps> = (props): ReactElement => {
-  const { children, ...otherProps } = props;
-
-  return <AntdDropDownButton {...otherProps}>{children}</AntdDropDownButton>;
-};
-
-export default Button;

package/components/dropdown/components/dropdown.tsx

@@ -1,13 +0,0 @@
-import React, { FC, ReactElement } from 'react';
-import { Dropdown as AntdDropdown } from 'antd';
-import type { DropDownProps as AntdDropDownProps } from 'antd/es/dropdown';
-
-export interface DropDownProps extends AntdDropDownProps {}
-
-const Dropdown: FC<DropDownProps> = (props): ReactElement => {
-  const { children, ...otherProps } = props;
-
-  return <AntdDropdown {...otherProps}>{children}</AntdDropdown>;
-};
-
-export default Dropdown;

package/components/dropdown/demos/arrow.tsx

@@ -1,66 +0,0 @@
-/**
- * title: 箭头
- * desc: 可以展示一个箭头。
- */
-
-import React from 'react';
-import { Menu, Dropdown, Button } from '@fle-ui/next';
-
-const ArrowDemo = () => {
-  const menu = (
-    <Menu>
-      <Menu.Item key="1">
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://www.antgroup.com"
-        >
-          1st menu item
-        </a>
-      </Menu.Item>
-      <Menu.Item key="2">
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://www.aliyun.com"
-        >
-          2nd menu item
-        </a>
-      </Menu.Item>
-      <Menu.Item key="3">
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://www.luohanacademy.com"
-        >
-          3rd menu item
-        </a>
-      </Menu.Item>
-    </Menu>
-  );
-  return (
-    <>
-      <Dropdown overlay={menu} placement="bottomLeft" arrow>
-        <Button>bottomLeft</Button>
-      </Dropdown>
-      <Dropdown overlay={menu} placement="bottomCenter" arrow>
-        <Button>bottomCenter</Button>
-      </Dropdown>
-      <Dropdown overlay={menu} placement="bottomRight" arrow>
-        <Button>bottomRight</Button>
-      </Dropdown>
-      <br />
-      <Dropdown overlay={menu} placement="topLeft" arrow>
-        <Button>topLeft</Button>
-      </Dropdown>
-      <Dropdown overlay={menu} placement="topCenter" arrow>
-        <Button>topCenter</Button>
-      </Dropdown>
-      <Dropdown overlay={menu} placement="topRight" arrow>
-        <Button>topRight</Button>
-      </Dropdown>
-    </>
-  );
-};
-
-export default ArrowDemo;

package/components/dropdown/demos/basic.tsx

@@ -1,52 +0,0 @@
-/**
- * title: 基本
- * desc: 最简单的下拉菜单。
- */
-
-import React from 'react';
-import { Menu, Dropdown } from '@fle-ui/next';
-import { DownOutlined } from '@ant-design/icons';
-
-const BasicDemo = () => {
-  const menu = (
-    <Menu>
-      <Menu.Item>
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://www.antgroup.com"
-        >
-          1st menu item
-        </a>
-      </Menu.Item>
-      <Menu.Item icon={<DownOutlined />} disabled>
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://www.aliyun.com"
-        >
-          2nd menu item (disabled)
-        </a>
-      </Menu.Item>
-      <Menu.Item disabled>
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://www.luohanacademy.com"
-        >
-          3rd menu item (disabled)
-        </a>
-      </Menu.Item>
-      <Menu.Item danger>a danger item</Menu.Item>
-    </Menu>
-  );
-  return (
-    <Dropdown overlay={menu}>
-      <a className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>
-        Hover me <DownOutlined />
-      </a>
-    </Dropdown>
-  );
-};
-
-export default BasicDemo;

package/components/dropdown/demos/contextMenu.tsx

@@ -1,33 +0,0 @@
-/**
- * title: 右键菜单
- * desc: 默认是移入触发菜单，可以点击鼠标右键触发。
- */
-
-import React from 'react';
-import { Menu, Dropdown } from '@fle-ui/next';
-
-const ContextMenuDemo = () => {
-  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>
-  );
-  return (
-    <Dropdown overlay={menu} trigger={['contextMenu']}>
-      <div
-        className="site-dropdown-context-menu"
-        style={{
-          textAlign: 'center',
-          height: 200,
-          lineHeight: '200px',
-        }}
-      >
-        Right Click on here
-      </div>
-    </Dropdown>
-  );
-};
-
-export default ContextMenuDemo;

package/components/dropdown/demos/dropdownButton.tsx

@@ -1,70 +0,0 @@
-/**
- * title: 带下拉框的按钮
- * desc: 左边是按钮，右边是额外的相关功能菜单。可设置 `icon` 属性来修改右边的图标。
- */
-
-import React from 'react';
-import { Menu, Dropdown, Button, message, Space, Tooltip } from 'antd';
-import { DownOutlined, UserOutlined } from '@ant-design/icons';
-
-const DropdownButtonDemo = () => {
-  const handleButtonClick = (e: any) => {
-    message.info('Click on left button.');
-    console.log('click left button', e);
-  };
-
-  const handleMenuClick = (e: any) => {
-    message.info('Click on menu item.');
-    console.log('click', e);
-  };
-
-  const menu = (
-    <Menu onClick={handleMenuClick}>
-      <Menu.Item key="1" icon={<UserOutlined />}>
-        1st menu item
-      </Menu.Item>
-      <Menu.Item key="2" icon={<UserOutlined />}>
-        2nd menu item
-      </Menu.Item>
-      <Menu.Item key="3" icon={<UserOutlined />}>
-        3rd menu item
-      </Menu.Item>
-    </Menu>
-  );
-
-  return (
-    <Space wrap>
-      <Dropdown.Button onClick={handleButtonClick} overlay={menu}>
-        Dropdown
-      </Dropdown.Button>
-      <Dropdown.Button
-        overlay={menu}
-        placement="bottomCenter"
-        icon={<UserOutlined />}
-      >
-        Dropdown
-      </Dropdown.Button>
-      <Dropdown.Button onClick={handleButtonClick} overlay={menu} disabled>
-        Dropdown
-      </Dropdown.Button>
-      <Dropdown.Button
-        overlay={menu}
-        buttonsRender={([leftButton, rightButton]: any) => [
-          <Tooltip title="tooltip" key="leftButton">
-            {leftButton}
-          </Tooltip>,
-          React.cloneElement(rightButton, { loading: true }),
-        ]}
-      >
-        With Tooltip
-      </Dropdown.Button>
-      <Dropdown overlay={menu}>
-        <Button>
-          Button <DownOutlined />
-        </Button>
-      </Dropdown>
-    </Space>
-  );
-};
-
-export default DropdownButtonDemo;

package/components/dropdown/demos/event.tsx

@@ -1,30 +0,0 @@
-/**
- * title: 触发事件
- * desc: 点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。
- */
-
-import React from 'react';
-import { Menu, Dropdown, message } from 'antd';
-import { DownOutlined } from '@ant-design/icons';
-
-const EventDemo = () => {
-  const onClick = ({ key }: any) => {
-    message.info(`Click on item ${key}`);
-  };
-  const menu = (
-    <Menu onClick={onClick}>
-      <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>
-  );
-  return (
-    <Dropdown overlay={menu}>
-      <a className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>
-        Hover me, Click menu item <DownOutlined />
-      </a>
-    </Dropdown>
-  );
-};
-
-export default EventDemo;

package/components/dropdown/demos/item.tsx

@@ -1,46 +0,0 @@
-/**
- * title: 其他元素
- * desc: 最简单的下拉菜单。
- */
-
-import React from 'react';
-import { Menu, Dropdown } from '@fle-ui/next';
-import { DownOutlined } from '@ant-design/icons';
-
-const ItemDemo = () => {
-  const menu = (
-    <Menu>
-      <Menu.Item key="0">
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://www.antgroup.com"
-        >
-          1st menu item
-        </a>
-      </Menu.Item>
-      <Menu.Item key="1">
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://www.aliyun.com"
-        >
-          2nd menu item
-        </a>
-      </Menu.Item>
-      <Menu.Divider />
-      <Menu.Item key="3" disabled>
-        3rd menu item（disabled）
-      </Menu.Item>
-    </Menu>
-  );
-  return (
-    <Dropdown overlay={menu}>
-      <a className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>
-        Hover me <DownOutlined />
-      </a>
-    </Dropdown>
-  );
-};
-
-export default ItemDemo;