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

package/components/list/demos/simple.tsx

@@ -1,53 +0,0 @@
-/**
- * title: 简单列表
- * desc: 列表拥有大、中、小三种尺寸。<br/>通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。<br/>可通过设置 `header` 和 `footer`，来自定义列表头部和尾部。
- */
-
-import React from 'react';
-import { List, Typography, Divider } from 'antd';
-
-const SimpleDemo = () => {
-  const data = [
-    'Racing car sprays burning fuel into crowd.',
-    'Japanese princess to wed commoner.',
-    'Australian walks 100km after outback crash.',
-    'Man charged over missing wedding girl.',
-    'Los Angeles battles huge wildfires.',
-  ];
-  return (
-    <>
-      <Divider orientation="left">Default Size</Divider>
-      <List
-        header={<div>Header</div>}
-        footer={<div>Footer</div>}
-        bordered
-        dataSource={data}
-        renderItem={(item) => (
-          <List.Item>
-            <Typography.Text mark>[ITEM]</Typography.Text> {item}
-          </List.Item>
-        )}
-      />
-      <Divider orientation="left">Small Size</Divider>
-      <List
-        size="small"
-        header={<div>Header</div>}
-        footer={<div>Footer</div>}
-        bordered
-        dataSource={data}
-        renderItem={(item) => <List.Item>{item}</List.Item>}
-      />
-      <Divider orientation="left">Large Size</Divider>
-      <List
-        size="large"
-        header={<div>Header</div>}
-        footer={<div>Footer</div>}
-        bordered
-        dataSource={data}
-        renderItem={(item) => <List.Item>{item}</List.Item>}
-      />
-    </>
-  );
-};
-
-export default SimpleDemo;

package/components/list/demos/verticalRow.tsx

@@ -1,87 +0,0 @@
-/**
- * title: 竖排列表样式
- * desc: 通过设置`itemLayout`属性为`vertical`可实现竖排列表样式。
- */
-
-import React from 'react';
-import { List, Avatar, Space } from 'antd';
-import { MessageOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons';
-
-const VerticalRowDemo = () => {
-  const listData = [];
-  for (let i = 0; i < 23; i++) {
-    listData.push({
-      href: 'https://ant.design',
-      title: `ant design part ${i}`,
-      avatar:
-        'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
-      description:
-        'Ant Design, a design language for background applications, is refined by Ant UED Team.',
-      content:
-        'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
-    });
-  }
-
-  const IconText = ({ icon, text }: any) => (
-    <Space>
-      {React.createElement(icon)}
-      {text}
-    </Space>
-  );
-  return (
-    <List
-      itemLayout="vertical"
-      size="large"
-      pagination={{
-        onChange: (page) => {
-          console.log(page);
-        },
-        pageSize: 3,
-      }}
-      dataSource={listData}
-      footer={
-        <div>
-          <b>ant design</b> footer part
-        </div>
-      }
-      renderItem={(item) => (
-        <List.Item
-          key={item.title}
-          actions={[
-            <IconText
-              icon={StarOutlined}
-              text="156"
-              key="list-vertical-star-o"
-            />,
-            <IconText
-              icon={LikeOutlined}
-              text="156"
-              key="list-vertical-like-o"
-            />,
-            <IconText
-              icon={MessageOutlined}
-              text="2"
-              key="list-vertical-message"
-            />,
-          ]}
-          extra={
-            <img
-              width={272}
-              alt="logo"
-              src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
-            />
-          }
-        >
-          <List.Item.Meta
-            avatar={<Avatar src={item.avatar} />}
-            title={<a href={item.href}>{item.title}</a>}
-            description={item.description}
-          />
-          {item.content}
-        </List.Item>
-      )}
-    />
-  );
-};
-
-export default VerticalRowDemo;

package/components/list/index.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import InternalList, { ListProps } from './components/list';
-import InternalItem, { ListItemProps } from './components/item';
-import Meta, { ListItemMetaProps } from './components/meta';
-
-export interface ListItemTypeProps extends React.FC<ListItemProps> {
-  Meta: typeof Meta;
-}
-const Item = InternalItem as ListItemTypeProps;
-Item.Meta = Meta;
-
-interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<
-    ListProps & React.RefAttributes<HTMLElement>
-  > {
-  Item: typeof Item;
-}
-
-const List = InternalList as CompoundedComponent;
-
-List.Item = Item;
-
-export type { ListProps, ListItemProps, ListItemMetaProps };
-
-export default List;

package/components/list/list.md

@@ -1,136 +0,0 @@
----
-title: List 列表
-order: 0
-legacy: /list
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# List 列表
-
-通用列表。
-
-## 何时使用
-
-最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。
-
-## 代码演示
-
-### 简单列表
-
-<code src="./demos/simple.tsx" />
-
-### 基础列表
-
-<code src="./demos/basics.tsx" />
-
-### 加载更多
-
-<code src="./demos/more.tsx" />
-
-### 竖排列表样式
-
-<code src="./demos/verticalRow.tsx" />
-
-### 栅格列表
-
-<code src="./demos/grid.tsx" />
-
-### 响应式的栅格列表
-
-<code src="./demos/responsive.tsx" />
-
-### 滚动加载
-
-<code src="./demos/roll.tsx" />
-
-### 滚动加载无限长列表
-
-<code src="./demos/infinite.tsx" />
-
-
-## API
-
-另外我们封装了 [ProList](https://prolist.ant.design/)，在 `antd` List 之上扩展了更多便捷易用的功能，比如多选，展开等功能，使用体验贴近 Table，欢迎尝试使用。
-
-### List
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| bordered | 是否展示边框 | boolean | false |  |
-| dataSource | 列表数据源 | any\[] | - |  |
-| footer | 列表底部 | ReactNode | - |  |
-| grid | 列表栅格配置 | [object](#List-grid-props) | - |  |
-| header | 列表头部 | ReactNode | - |  |
-| itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - |  |
-| loading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean \| [object](/components/spin/#API) ([更多](https://github.com/ant-design/ant-design/issues/8659)) | false |  |
-| loadMore | 加载更多 | ReactNode | - |  |
-| locale | 默认文案设置，目前包括空数据文案 | object | {emptyText: `暂无数据`} |  |
-| pagination | 对应的 `pagination` 配置, 设置 false 不显示 | boolean \| object | false |  |
-| renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项 | (item) => ReactNode | - |  |
-| rowKey | 当 `renderItem` 自定义渲染列表项有效时，自定义每一行的 `key` 的获取方式 | ((item: T) => string) | `list-item-${index}` |  |
-| size | list 的尺寸 | `default` \| `large` \| `small` | `default` |  |
-| split | 是否展示分割线 | boolean | true |  |
-
-### pagination
-
-分页的配置项。
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| position | 指定分页显示的位置 | `top` \| `bottom` \| `both` | `bottom` |
-
-更多配置项，请查看 [`Pagination`](/components/pagination/)。
-
-### List grid props
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| column | 列数 | number | - |  |
-| gutter | 栅格间隔 | number | 0 |  |
-| xs | `<576px` 展示的列数 | number | - |  |
-| sm | `≥576px` 展示的列数 | number | - |  |
-| md | `≥768px` 展示的列数 | number | - |  |
-| lg | `≥992px` 展示的列数 | number | - |  |
-| xl | `≥1200px` 展示的列数 | number | - |  |
-| xxl | `≥1600px` 展示的列数 | number | - |  |
-
-### List.Item
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| actions | 列表操作组，根据 `itemLayout` 的不同, 位置在卡片底部或者最右侧 | Array&lt;ReactNode> | - |  |
-| extra | 额外内容, 通常用在 `itemLayout` 为 `vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧 | ReactNode | - |  |
-
-### List.Item.Meta
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| avatar | 列表元素的图标 | ReactNode | - |  |
-| description | 列表元素的描述内容 | ReactNode | - |  |
-| title | 列表元素的标题 | ReactNode | - |  |
-
-<style>
-    .demo-infinite-container {
-    height: 300px;
-    padding: 8px 24px;
-    overflow: auto;
-    border: 1px solid #e8e8e8;
-    border-radius: 4px;
-  }
-  .demo-loading-container {
-    position: absolute;
-    bottom: 40px;
-    width: 100%;
-    text-align: center;
-  }
-
-  .demo-loading {
-    position: absolute;
-    bottom: -40px;
-    left: 50%;
-  }
-</style>

package/components/mentions/components/mentions.tsx

@@ -1,16 +0,0 @@
-import React, { forwardRef, ReactElement } from 'react';
-import { Mentions as AntdMentions } from 'antd';
-import type { MentionProps as AntdMentionProps } from 'antd/es/mentions';
-
-export interface MentionProps extends AntdMentionProps {}
-
-const Mentions = forwardRef<any, MentionProps>((props, ref): ReactElement => {
-  const { children, ...otherProps } = props;
-  return (
-    <AntdMentions {...otherProps} ref={ref}>
-      {children}
-    </AntdMentions>
-  );
-});
-
-export default Mentions;

package/components/mentions/components/option.tsx

@@ -1,12 +0,0 @@
-import React, { FC, ReactElement } from 'react';
-import { Mentions as AntdMentions } from 'antd';
-import type { OptionProps as AntdOptionProps } from 'antd/es/mentions';
-
-export interface OptionProps extends AntdOptionProps {}
-const { Option: AntdOption } = AntdMentions;
-const Option: FC<AntdOptionProps> = (props): ReactElement => {
-  const { children, ...otherProps } = props;
-  return <AntdOption {...otherProps}>{children}</AntdOption>;
-};
-
-export default Option;

package/components/mentions/demos/async.tsx

@@ -1,52 +0,0 @@
-/**
- * title: 异步加载
- * desc: 匹配内容列表为异步返回时。
- */
-
-import React, { useState, useEffect } from 'react';
-import { Mentions } from '@fle-ui/next';
-import debounce from 'lodash/debounce';
-
-const AsyncDemo = () => {
-  const { Option } = Mentions;
-  const [search, setSearch] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [users, setUsers] = useState([]);
-
-  const onSearch = (search: string) => {
-    setSearch(search);
-    setLoading(!!search);
-    setUsers([]);
-    console.log('Search:', search);
-    loadGithubUsersLater(search);
-  };
-
-  const loadGithubUsers = (key: any) => {
-    if (!key) {
-      setUsers([]);
-      return;
-    }
-
-    fetch(`https://api.github.com/search/users?q=${key}`)
-      .then((res) => res.json())
-      .then(({ items = [] }) => {
-        if (search !== key) return;
-        setUsers(items.slice(0, 10));
-        setLoading(false);
-      });
-  };
-
-  const loadGithubUsersLater = debounce(loadGithubUsers, 800);
-
-  return (
-    <Mentions style={{ width: '100%' }} loading={loading} onSearch={onSearch}>
-      {users.map(({ login, avatar_url: avatar }) => (
-        <Option key={login} value={login} className="antd-demo-dynamic-option">
-          <img src={avatar} alt={login} />
-          <span>{login}</span>
-        </Option>
-      ))}
-    </Mentions>
-  );
-};
-export default AsyncDemo;

package/components/mentions/demos/autoSize.tsx

@@ -1,21 +0,0 @@
-/**
- * title: 自动大小
- * desc: 自适应内容高度。
- */
-
-import React from 'react';
-import { Mentions } from '@fle-ui/next';
-
-const AutoSizeDemo = () => {
-  const { Option } = Mentions;
-
-  return (
-    <Mentions autoSize style={{ width: '100%' }}>
-      <Option value="afc163">afc163</Option>
-      <Option value="zombieJ">zombieJ</Option>
-      <Option value="yesmeck">yesmeck</Option>
-    </Mentions>
-  );
-};
-
-export default AutoSizeDemo;

package/components/mentions/demos/basic.tsx

@@ -1,32 +0,0 @@
-/**
- * title: 基本使用
- * desc: 基本使用。
- */
-import React from 'react';
-import { Mentions } from '@fle-ui/next';
-
-const BasicDemo = () => {
-  const { Option } = Mentions;
-
-  function onChange(value: any) {
-    console.log('Change:', value);
-  }
-
-  function onSelect(option: any) {
-    console.log('select', option);
-  }
-  return (
-    <Mentions
-      style={{ width: '100%' }}
-      onChange={onChange}
-      onSelect={onSelect}
-      defaultValue="@afc163"
-    >
-      <Option value="afc163">afc163</Option>
-      <Option value="zombieJ">zombieJ</Option>
-      <Option value="yesmeck">yesmeck</Option>
-    </Mentions>
-  );
-};
-
-export default BasicDemo;