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

package/components/menu/demos/sider-current.tsx

@@ -1,61 +0,0 @@
-/**
- * title: 只展开当前父级菜单
- * desc: 点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。
- */
-
-import React, { useState } from 'react';
-import { Menu } from '@fle-ui/next';
-import {
-  AppstoreOutlined,
-  MailOutlined,
-  SettingOutlined,
-} from '@ant-design/icons';
-
-const { SubMenu } = Menu;
-
-const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
-
-const Demo = () => {
-  const [openKeys, setOpenKeys] = useState(['sub1']);
-
-  const onOpenChange = (keys: any) => {
-    const latestOpenKey = keys.find((key: any) => openKeys.indexOf(key) === -1);
-    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
-      setOpenKeys(keys);
-    } else {
-      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
-    }
-  };
-
-  return (
-    <Menu
-      mode="inline"
-      openKeys={openKeys}
-      onOpenChange={onOpenChange}
-      style={{ width: 256 }}
-    >
-      <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
-        <Menu.Item key="1">Option 1</Menu.Item>
-        <Menu.Item key="2">Option 2</Menu.Item>
-        <Menu.Item key="3">Option 3</Menu.Item>
-        <Menu.Item key="4">Option 4</Menu.Item>
-      </SubMenu>
-      <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
-        <Menu.Item key="5">Option 5</Menu.Item>
-        <Menu.Item key="6">Option 6</Menu.Item>
-        <SubMenu key="sub3" title="Submenu">
-          <Menu.Item key="7">Option 7</Menu.Item>
-          <Menu.Item key="8">Option 8</Menu.Item>
-        </SubMenu>
-      </SubMenu>
-      <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
-        <Menu.Item key="9">Option 9</Menu.Item>
-        <Menu.Item key="10">Option 10</Menu.Item>
-        <Menu.Item key="11">Option 11</Menu.Item>
-        <Menu.Item key="12">Option 12</Menu.Item>
-      </SubMenu>
-    </Menu>
-  );
-};
-
-export default Demo;

package/components/menu/demos/theme.tsx

@@ -1,73 +0,0 @@
-/**
- * title: 只展开当前父级菜单
- * desc: 点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。
- */
-
-import React, { useState } from 'react';
-import { Menu, Switch } from '@fle-ui/next';
-import {
-  AppstoreOutlined,
-  MailOutlined,
-  SettingOutlined,
-} from '@ant-design/icons';
-
-const { SubMenu } = Menu;
-
-const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
-
-const Demo = () => {
-  const [theme, setTheme] = useState<any>('dark');
-  const [current, setCurrent] = useState<any>('1');
-
-  const changeTheme = (value: any) => {
-    setTheme(value ? 'dark' : 'light');
-  };
-
-  const handleClick = (e: any) => {
-    setCurrent(e.key);
-  };
-
-  return (
-    <>
-      <Switch
-        checked={theme === 'dark'}
-        onChange={changeTheme}
-        checkedChildren="Dark"
-        unCheckedChildren="Light"
-      />
-      <br />
-      <br />
-      <Menu
-        theme={theme}
-        onClick={handleClick}
-        style={{ width: 256 }}
-        defaultOpenKeys={['sub1']}
-        selectedKeys={[current]}
-        mode="inline"
-      >
-        <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
-          <Menu.Item key="1">Option 1</Menu.Item>
-          <Menu.Item key="2">Option 2</Menu.Item>
-          <Menu.Item key="3">Option 3</Menu.Item>
-          <Menu.Item key="4">Option 4</Menu.Item>
-        </SubMenu>
-        <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
-          <Menu.Item key="5">Option 5</Menu.Item>
-          <Menu.Item key="6">Option 6</Menu.Item>
-          <SubMenu key="sub3" title="Submenu">
-            <Menu.Item key="7">Option 7</Menu.Item>
-            <Menu.Item key="8">Option 8</Menu.Item>
-          </SubMenu>
-        </SubMenu>
-        <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
-          <Menu.Item key="9">Option 9</Menu.Item>
-          <Menu.Item key="10">Option 10</Menu.Item>
-          <Menu.Item key="11">Option 11</Menu.Item>
-          <Menu.Item key="12">Option 12</Menu.Item>
-        </SubMenu>
-      </Menu>
-    </>
-  );
-};
-
-export default Demo;

package/components/menu/demos/vertical.tsx

@@ -1,52 +0,0 @@
-/**
- * title: 垂直菜单
- * desc: 子菜单是弹出的形式。*/
-
-import React, { useState } from 'react';
-import { Menu } from '@fle-ui/next';
-import {
-  MailOutlined,
-  AppstoreOutlined,
-  SettingOutlined,
-} from '@ant-design/icons';
-
-const { SubMenu } = Menu;
-
-const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
-
-const Demo = () => {
-  const handleClick = (e: any) => {
-    console.log('click', e);
-  };
-
-  return (
-    <Menu onClick={handleClick} style={{ width: 256 }} mode="vertical">
-      <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
-        <Menu.ItemGroup title="Item 1">
-          <Menu.Item key="1">Option 1</Menu.Item>
-          <Menu.Item key="2">Option 2</Menu.Item>
-        </Menu.ItemGroup>
-        <Menu.ItemGroup title="Iteom 2">
-          <Menu.Item key="3">Option 3</Menu.Item>
-          <Menu.Item key="4">Option 4</Menu.Item>
-        </Menu.ItemGroup>
-      </SubMenu>
-      <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
-        <Menu.Item key="5">Option 5</Menu.Item>
-        <Menu.Item key="6">Option 6</Menu.Item>
-        <SubMenu key="sub3" title="Submenu">
-          <Menu.Item key="7">Option 7</Menu.Item>
-          <Menu.Item key="8">Option 8</Menu.Item>
-        </SubMenu>
-      </SubMenu>
-      <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
-        <Menu.Item key="9">Option 9</Menu.Item>
-        <Menu.Item key="10">Option 10</Menu.Item>
-        <Menu.Item key="11">Option 11</Menu.Item>
-        <Menu.Item key="12">Option 12</Menu.Item>
-      </SubMenu>
-    </Menu>
-  );
-};
-
-export default Demo;

package/components/menu/index.tsx

@@ -1,32 +0,0 @@
-import InternalMenu, { MenuProps } from './components/menu';
-import Item, { ItemProps } from './components/item';
-import SubMenu, { SubMenuProps } from './components/subMenu';
-import ItemGroup, { ItemGroupProps } from './components/itemGroup';
-import Divider, { DividerProps } from './components/divider';
-
-interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<
-    MenuProps & React.RefAttributes<HTMLElement>
-  > {
-  Item: typeof Item;
-  SubMenu: typeof SubMenu;
-  ItemGroup: typeof ItemGroup;
-  Divider: typeof Divider;
-}
-
-const Menu = InternalMenu as CompoundedComponent;
-
-export type {
-  MenuProps,
-  ItemProps,
-  SubMenuProps,
-  ItemGroupProps,
-  DividerProps,
-};
-
-Menu.Item = Item;
-Menu.SubMenu = SubMenu;
-Menu.ItemGroup = ItemGroup;
-Menu.Divider = Divider;
-
-export default Menu;

package/components/menu/menu.md

@@ -1,144 +0,0 @@
----
-title: Menu 导航
-order: 0
-legacy: /menu
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# Menu 导航
-
-为页面和功能提供导航的菜单列表。
-
-## 何时使用
-
-导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。
-
-更多布局和导航的使用可以参考：[通用布局](/components/layout)。
-
-## 开发者注意事项
-
-- Menu 元素为 `ul`，因而仅支持 [`li` 以及 `script-supporting` 子元素](https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element)。因而你的子节点元素应该都在 `Menu.Item` 内使用。
-- Menu 需要计算节点结构，因而其子元素仅支持 `Menu.*` 以及对此进行封装的 HOC 组件。
-
-
-## 代码演示
-
-### 顶部导航
-<code src="./demos/horizontal.tsx" />
-
-### 内嵌菜单
-<code src="./demos/inline.tsx" />
-
-### 缩起内嵌菜单
-<code src="./demos/inline-collapsed.tsx" />
-
-### 只展开当前父级菜单
-<code src="./demos/sider-current.tsx" />
-
-### 垂直菜单
-<code src="./demos/vertical.tsx" />
-
-### 主题
-<code src="./demos/theme.tsx" />
-
-## API
-
-```bash
-<Menu>
-  <Menu.Item>菜单项</Menu.Item>
-  <SubMenu title="子菜单">
-    <Menu.Item>子菜单项</Menu.Item>
-  </SubMenu>
-</Menu>
-```
-
-### Menu
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | string\[] | - |  |
-| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string\[] | - |  |
-| expandIcon | 自定义展开图标 | ReactNode \| `(props: SubMenuProps & { isSubMenu: boolean }) => ReactNode` | - | 4.9.0 |
-| forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false |  |
-| inlineCollapsed | inline 时菜单是否收起状态 | boolean | - |  |
-| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 |  |
-| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | `vertical` \| `horizontal` \| `inline` | `vertical` |  |
-| multiple | 是否允许多选 | boolean | false |  |
-| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string\[] | - |  |
-| overflowedIndicator | 自定义 Menu 折叠时的图标 | ReactNode | - |  |
-| selectable | 是否允许选中 | boolean | true |  |
-| selectedKeys | 当前选中的菜单项 key 数组 | string\[] | - |  |
-| style | 根节点样式 | CSSProperties | - |  |
-| subMenuCloseDelay | 用户鼠标离开子菜单后关闭延时，单位：秒 | number | 0.1 |  |
-| subMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒 | number | 0 |  |
-| theme | 主题颜色 | `light` \| `dark` | `light` |  |
-| triggerSubMenuAction | SubMenu 展开/关闭的触发行为 | `hover` \| `click` | `hover` |  |
-| onClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath, domEvent }) | - |  |
-| onDeselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, keyPath, selectedKeys, domEvent }) | - |  |
-| onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string\[]) | - |  |
-| onSelect | 被选中时调用 | function({ item, key, keyPath, selectedKeys, domEvent }) | -   |  |
-
-> 更多属性查看 [rc-menu](https://github.com/react-component/menu#api)
-
-### Menu.Item
-
-| 参数     | 说明                     | 类型      | 默认值 | 版本  |
-| -------- | ------------------------ | --------- | ------ | ----- |
-| danger   | 展示错误状态样式         | boolean   | false  | 4.3.0 |
-| disabled | 是否禁用                 | boolean   | false  |       |
-| icon     | 菜单图标                 | ReactNode | -      | 4.2.0 |
-| key      | item 的唯一标志          | string    | -      |       |
-| title    | 设置收缩时展示的悬浮标题 | string    | -      |       |
-
-> 注意：`icon` 是 `4.2.0` 新增的属性，之前的版本请使用下面的方式定义图标。
->
-> ```bash
-> <Menu.Item>
->   <PieChartOutlined />
->   <span>Option 1</span>
-> </Menu.Item>
-> <Menu.SubMenu
->   title={
->     <>
->       <PieChartOutlined />
->       <span>Option 2</span>
->     </>
->   }
-> >
->   ...
-> </Menu.SubMenu>
-> ```
-
-### Menu.SubMenu
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| children | 子菜单的菜单项 | Array&lt;MenuItem \| SubMenu> | - |  |
-| disabled | 是否禁用 | boolean | false |  |
-| icon | 菜单图标 | ReactNode | - | 4.2.0 |
-| key | 唯一标志 | string | - |  |
-| popupClassName | 子菜单样式，`mode="inline"` 时无效 | string | - |  |
-| popupOffset | 子菜单偏移量，`mode="inline"` 时无效 | \[number, number] | - |  |
-| title | 子菜单项值 | ReactNode | - |  |
-| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - |  |
-
-### Menu.ItemGroup
-
-| 参数     | 说明         | 类型        | 默认值 | 版本 |
-| -------- | ------------ | ----------- | ------ | ---- |
-| children | 分组的菜单项 | MenuItem\[] | -      |      |
-| title    | 分组标题     | ReactNode   | -      |      |
-
-### Menu.Divider
-
-菜单项分割线，只用在弹出菜单内。
-
-## FAQ
-
-### 为何 Menu 的子元素会渲染两次？
-
-Menu 通过[二次渲染](https://github.com/react-component/menu/blob/f4684514096d6b7123339cbe72e7b0f68db0bce2/src/Menu.tsx#L543)收集嵌套结构信息以支持 HOC 的结构。合并成一个推导结构会使得逻辑变得十分复杂，欢迎 PR 以协助改进该设计。

package/components/message/demos/custom-style.tsx

@@ -1,22 +0,0 @@
-/**
- * title: 自定义样式
- * desc: 使用 `style` 和 `className` 来定义样式。
- */
-
-import React from 'react';
-import { message, Button } from '@fle-ui/next';
-
-const CustomStyleDemo = () => {
-  const success = () => {
-    message.success({
-      content: 'This is a prompt message with custom className and style',
-      className: 'custom-class',
-      style: {
-        marginTop: '20vh',
-      },
-    });
-  };
-  return <Button onClick={success}>Customized style</Button>;
-};
-
-export default CustomStyleDemo;

package/components/message/demos/duration.tsx

@@ -1,19 +0,0 @@
-/**
- * title: 修改延时
- * desc: 自定义时长 `10s`，默认时长为 `3s`。
- */
-
-import React from 'react';
-import { message, Button } from '@fle-ui/next';
-
-const DurationDemo = () => {
-  const success = () => {
-    message.success(
-      'This is a prompt message for success, and it will disappear in 10 seconds',
-      10,
-    );
-  };
-  return <Button onClick={success}>Customized display duration</Button>;
-};
-
-export default DurationDemo;

package/components/message/demos/hooks.tsx

@@ -1,32 +0,0 @@
-/**
- * title: 通过 Hooks 获取上下文（4.5.0+）
- * desc: 通过 `message.useMessage` 创建支持读取 context 的 `contextHolder`。使用 `style` 和 `className` 来定义样式。
- */
-
-import React from 'react';
-import { message, Button } from '@fle-ui/next';
-
-const HooksDemo = () => {
-  const Context = React.createContext({ name: 'Default' });
-  const [messageApi, contextHolder] = message.useMessage();
-  const info = () => {
-    messageApi.open({
-      type: 'info',
-      content: (
-        <Context.Consumer>{({ name }) => `Hello, ${name}!`}</Context.Consumer>
-      ),
-      duration: 1,
-    });
-  };
-
-  return (
-    <Context.Provider value={{ name: 'Ant Design' }}>
-      {contextHolder}
-      <Button type="primary" onClick={info}>
-        Display normal message
-      </Button>
-    </Context.Provider>
-  );
-};
-
-export default HooksDemo;