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

package/components/mentions/demos/disabled.tsx

@@ -1,42 +0,0 @@
-/**
- * title: 无效或只读
- * desc: 通过 disabled 属性设置是否生效。通过 readOnly 属性设置是否只读。
- */
-
-import React from 'react';
-import { Mentions } from '@fle-ui/next';
-
-const DisabledDemo = () => {
-  const { Option } = Mentions;
-
-  function getOptions() {
-    return ['afc163', 'zombiej', 'yesmeck'].map((value) => (
-      <Option key={value} value={value}>
-        {value}
-      </Option>
-    ));
-  }
-
-  return (
-    <>
-      <div style={{ marginBottom: 10 }}>
-        <Mentions
-          style={{ width: '100%' }}
-          placeholder="this is disabled Mentions"
-          disabled
-        >
-          {getOptions()}
-        </Mentions>
-      </div>
-      <Mentions
-        style={{ width: '100%' }}
-        placeholder="this is readOnly Mentions"
-        readOnly
-      >
-        {getOptions()}
-      </Mentions>
-    </>
-  );
-};
-
-export default DisabledDemo;

package/components/mentions/demos/prefix.tsx

@@ -1,37 +0,0 @@
-/**
- * title: 自定义触发字符
- * desc: 通过 prefix 属性自定义触发字符。默认为 @, 可以定义为数组。
- */
-
-import React, { useState } from 'react';
-import { Mentions } from '@fle-ui/next';
-
-const PrefixDemo = () => {
-  const { Option } = Mentions;
-  const MOCK_DATA: any = {
-    '@': ['afc163', 'zombiej', 'yesmeck'],
-    '#': ['1.0', '2.0', '3.0'],
-  };
-  const [prefix, setPrefiex] = useState('@');
-
-  const onSearch = (_: any, prefix: any) => {
-    setPrefiex(prefix);
-  };
-
-  return (
-    <Mentions
-      style={{ width: '100%' }}
-      placeholder="input @ to mention people, # to mention tag"
-      prefix={['@', '#']}
-      onSearch={onSearch}
-    >
-      {(MOCK_DATA[prefix] || []).map((value: any) => (
-        <Option key={value} value={value}>
-          {value}
-        </Option>
-      ))}
-    </Mentions>
-  );
-};
-
-export default PrefixDemo;

package/components/mentions/demos/top.tsx

@@ -1,20 +0,0 @@
-/**
- * title: 向上展开
- * desc:向上展开建议。
- */
-import React from 'react';
-import { Mentions } from '@fle-ui/next';
-
-const TopDemo = () => {
-  const { Option } = Mentions;
-
-  return (
-    <Mentions style={{ width: '100%' }} placement="top">
-      <Option value="afc163">afc163</Option>
-      <Option value="zombieJ">zombieJ</Option>
-      <Option value="yesmeck">yesmeck</Option>
-    </Mentions>
-  );
-};
-
-export default TopDemo;

package/components/mentions/index.tsx

@@ -1,18 +0,0 @@
-import InternalMentions, { MentionProps } from './components/mentions';
-import { OptionProps } from './components/option';
-import React from 'react';
-import RcMentions from 'rc-mentions';
-
-interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<
-    MentionProps & React.RefAttributes<HTMLElement>
-  > {
-  Option: typeof RcMentions.Option;
-}
-
-const Mentions = InternalMentions as CompoundedComponent;
-Mentions.Option = RcMentions.Option;
-
-export type { OptionProps, MentionProps };
-
-export default Mentions;

package/components/mentions/mentions.md

@@ -1,88 +0,0 @@
----
-title: Mentions 提及
-order: 0
-legacy: /mentions
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# Mentions 提及
-
-提及组件。
-
-## 何时使用
-
-用于在输入中提及某人或某事，常用于发布、聊天或评论功能。
-
-## 代码演示
-
-### 基本使用
-
-<code src="./demos/basic.tsx"/>
-
-### 异步加载
-
-<code src="./demos/async.tsx"/>
-
-### 自定义触发字符
-
-<code src="./demos/prefix.tsx"/>
-
-### 无效或只读
-
-<code src="./demos/disabled.tsx"/>
-
-### 向上展开
-
-<code src="./demos/top.tsx"/>
-
-### 自动大小
-
-<code src="./demos/autoSize.tsx"/>
-
-## API
-
-```bash
-<Mentions onChange={onChange}>
-  <Mentions.Option value="sample">Sample</Mentions.Option>
-</Mentions>
-```
-
-### Mentions
-
-| 参数              | 说明                                                                      | 类型                                                     | 默认值      |
-| ----------------- | ------------------------------------------------------------------------- | -------------------------------------------------------- | ----------- |
-| autoFocus         | 自动获得焦点                                                              | boolean                                                  | false       |
-| autoSize          | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object                                        | false       |
-| defaultValue      | 默认值                                                                    | string                                                   | -           |
-| filterOption      | 自定义过滤逻辑                                                            | false \| (input: string, option: OptionProps) => boolean | -           |
-| getPopupContainer | 指定建议框挂载的 HTML 节点                                                | () => HTMLElement                                        | -           |
-| notFoundContent   | 当下拉列表为空时显示的内容                                                | ReactNode                                                | `Not Found` |
-| placement         | 弹出层展示位置                                                            | `top` \| `bottom`                                        | `bottom`    |
-| prefix            | 设置触发关键字                                                            | string \| string\[]                                      | `@`         |
-| split             | 设置选中项前后分隔符                                                      | string                                                   | ` `         |
-| validateSearch    | 自定义触发验证逻辑                                                        | (text: string, props: MentionsProps) => void             | -           |
-| value             | 设置值                                                                    | string                                                   | -           |
-| onBlur            | 失去焦点时触发                                                            | () => void                                               | -           |
-| onChange          | 值改变时触发                                                              | (text: string) => void                                   | -           |
-| onFocus           | 获得焦点时触发                                                            | () => void                                               | -           |
-| onResize          | resize 回调                                                               | function({ width, height })                              | -           |
-| onSearch          | 搜索时触发                                                                | (text: string, prefix: string) => void                   | -           |
-| onSelect          | 选择选项时触发                                                            | (option: OptionProps, prefix: string) => void            | -           |
-
-### Mentions 方法
-
-| 名称    | 描述     |
-| ------- | -------- |
-| blur()  | 移除焦点 |
-| focus() | 获取焦点 |
-
-### Option
-
-| 参数     | 说明           | 类型      | 默认值 |
-| -------- | -------------- | --------- | ------ |
-| children | 选项内容       | ReactNode | -      |
-| value    | 选择时填充的值 | string    | -      |

package/components/menu/components/divider.tsx

@@ -1,17 +0,0 @@
-import React, { CSSProperties } from 'react';
-import { Menu as AntdMenu } from 'antd';
-
-export interface DividerProps {
-  className?: string;
-  style?: CSSProperties;
-}
-
-const { Divider: AntdDivider } = AntdMenu;
-
-const Divider: React.FC<DividerProps> = (props) => {
-  const { children, ...otherProps } = props;
-
-  return <AntdDivider {...otherProps}>{children}</AntdDivider>;
-};
-
-export default Divider;

package/components/menu/components/item.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Menu as AntdMenu } from 'antd';
-import { MenuItemProps as AntdMenuItemProps } from 'antd/es/menu/MenuItem';
-
-export interface ItemProps extends AntdMenuItemProps {}
-
-const { Item: AntdMenuItem } = AntdMenu;
-
-const Item: React.FC<ItemProps> = (props) => {
-  const { children, ...otherProps } = props;
-
-  return <AntdMenuItem {...otherProps}>{children}</AntdMenuItem>;
-};
-
-export default Item;

package/components/menu/components/itemGroup.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Menu as AntdMenu } from 'antd';
-
-export interface ItemGroupProps {
-  className?: string;
-  title?: React.ReactNode;
-  children?: React.ReactNode;
-  /** @private Internal filled key. Do not set it directly */
-  eventKey?: string;
-  /** @private Do not use. Private warning empty usage */
-  warnKey?: boolean;
-}
-
-const { ItemGroup: AntdItemGroup } = AntdMenu;
-
-const ItemGroup: React.FC<ItemGroupProps> = (props) => {
-  const { children, ...otherProps } = props;
-
-  return <AntdItemGroup {...otherProps}>{children}</AntdItemGroup>;
-};
-
-export default ItemGroup;

package/components/menu/components/menu.tsx

@@ -1,17 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Menu as AntdMenu } from 'antd';
-import { MenuProps as AntdMenuProps } from 'antd/es/menu';
-
-export interface MenuProps extends AntdMenuProps {}
-
-const Menu = forwardRef<any, MenuProps>((props, ref) => {
-  const { children, ...otherProps } = props;
-
-  return (
-    <AntdMenu {...otherProps} ref={ref}>
-      {children}
-    </AntdMenu>
-  );
-});
-
-export default Menu;

package/components/menu/components/subMenu.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Menu as AntdMenu } from 'antd';
-import { SubMenuProps as AntdSubMenuProps } from 'antd/es/menu/SubMenu';
-
-export interface SubMenuProps extends AntdSubMenuProps {}
-
-const { SubMenu: AntdSubMenu } = AntdMenu;
-
-const SubMenu: React.FC<SubMenuProps> = (props) => {
-  const { children, ...otherProps } = props;
-
-  return <AntdSubMenu {...otherProps}>{children}</AntdSubMenu>;
-};
-
-export default SubMenu;

package/components/menu/demos/horizontal.tsx

@@ -1,55 +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 Demo = () => {
-  const [current, setCurrent] = useState<string>('mail');
-
-  const handleClick = (e: any) => {
-    console.log('click ', e);
-    setCurrent(e.key);
-  };
-
-  return (
-    <Menu onClick={handleClick} selectedKeys={[current]} mode="horizontal">
-      <Menu.Item key="mail" icon={<MailOutlined />}>
-        Navigation One
-      </Menu.Item>
-      <Menu.Item key="app" disabled icon={<AppstoreOutlined />}>
-        Navigation Two
-      </Menu.Item>
-      <SubMenu
-        key="SubMenu"
-        icon={<SettingOutlined />}
-        title="Navigation Three - Submenu"
-      >
-        <Menu.ItemGroup title="Item 1">
-          <Menu.Item key="setting:1">Option 1</Menu.Item>
-          <Menu.Item key="setting:2">Option 2</Menu.Item>
-        </Menu.ItemGroup>
-        <Menu.ItemGroup title="Item 2">
-          <Menu.Item key="setting:3">Option 3</Menu.Item>
-          <Menu.Item key="setting:4">Option 4</Menu.Item>
-        </Menu.ItemGroup>
-      </SubMenu>
-      <Menu.Item key="alipay">
-        <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
-          Navigation Four - Link
-        </a>
-      </Menu.Item>
-    </Menu>
-  );
-};
-
-export default Demo;

package/components/menu/demos/inline-collapsed.tsx

@@ -1,71 +0,0 @@
-/**
- * title: 缩起内嵌菜单
- * desc: 内嵌菜单可以被缩起/展开。<br /> 你可以在 [Layout](/components/layout/#components-layout-demo-side) 里查看侧边布局结合的完整示例。
- */
-
-import React, { useState } from 'react';
-import { Menu, Button } from '@fle-ui/next';
-import {
-  AppstoreOutlined,
-  MenuUnfoldOutlined,
-  MenuFoldOutlined,
-  PieChartOutlined,
-  DesktopOutlined,
-  ContainerOutlined,
-  MailOutlined,
-} from '@ant-design/icons';
-
-const { SubMenu } = Menu;
-
-const Demo = () => {
-  const [collapsed, setCollapsed] = useState<boolean>(false);
-
-  const toggleCollapsed = () => {
-    setCollapsed(!collapsed);
-  };
-
-  return (
-    <div style={{ width: 256 }}>
-      <Button
-        type="primary"
-        onClick={toggleCollapsed}
-        style={{ marginBottom: 16 }}
-      >
-        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
-      </Button>
-      <Menu
-        defaultSelectedKeys={['1']}
-        defaultOpenKeys={['sub1']}
-        mode="inline"
-        theme="dark"
-        inlineCollapsed={collapsed}
-      >
-        <Menu.Item key="1" icon={<PieChartOutlined />}>
-          Option 1
-        </Menu.Item>
-        <Menu.Item key="2" icon={<DesktopOutlined />}>
-          Option 2
-        </Menu.Item>
-        <Menu.Item key="3" icon={<ContainerOutlined />}>
-          Option 3
-        </Menu.Item>
-        <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
-          <Menu.Item key="5">Option 5</Menu.Item>
-          <Menu.Item key="6">Option 6</Menu.Item>
-          <Menu.Item key="7">Option 7</Menu.Item>
-          <Menu.Item key="8">Option 8</Menu.Item>
-        </SubMenu>
-        <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
-          <Menu.Item key="9">Option 9</Menu.Item>
-          <Menu.Item key="10">Option 10</Menu.Item>
-          <SubMenu key="sub3" title="Submenu">
-            <Menu.Item key="11">Option 11</Menu.Item>
-            <Menu.Item key="12">Option 12</Menu.Item>
-          </SubMenu>
-        </SubMenu>
-      </Menu>
-    </div>
-  );
-};
-
-export default Demo;

package/components/menu/demos/inline.tsx

@@ -1,57 +0,0 @@
-/**
- * title: 顶部导航
- * desc: 水平的顶部导航菜单。
- */
-
-import React from 'react';
-import { Menu } from '@fle-ui/next';
-import {
-  AppstoreOutlined,
-  MailOutlined,
-  SettingOutlined,
-} from '@ant-design/icons';
-
-const { SubMenu } = Menu;
-
-const Demo = () => {
-  const handleClick = (e: any) => {
-    console.log('click ', e);
-  };
-
-  return (
-    <Menu
-      onClick={handleClick}
-      style={{ width: 256 }}
-      defaultSelectedKeys={['1']}
-      defaultOpenKeys={['sub1']}
-      mode="inline"
-    >
-      <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
-        <Menu.ItemGroup key="g1" title="Item 1">
-          <Menu.Item key="1">Option 1</Menu.Item>
-          <Menu.Item key="2">Option 2</Menu.Item>
-        </Menu.ItemGroup>
-        <Menu.ItemGroup key="g2" title="Item 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;