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

package/components/collapse/demos/extra.tsx

@@ -1,69 +0,0 @@
-/**
- * title: 额外节点
- * desc: 可以同时展开多个面板，这个例子默认展开了第一个。
- */
-
-import React, { useState } from 'react';
-import { Collapse } from '@fle-ui/next';
-import { Select } from 'antd';
-import { SettingOutlined } from '@ant-design/icons';
-
-const ExtraDemo = () => {
-  const { Panel } = Collapse;
-  const { Option } = Select;
-
-  const [expandIconPosition, setExpandIconPosition] = useState<any>('left');
-
-  function callback(key: any) {
-    console.log(key);
-  }
-
-  const text = `
-    A dog is a type of domesticated animal.
-    Known for its loyalty and faithfulness,
-    it can be found as a welcome guest in many households across the world.
-  `;
-
-  const onPositionChange = (expandIconPosition: string | undefined) => {
-    setExpandIconPosition(expandIconPosition);
-  };
-
-  const genExtra = () => (
-    <SettingOutlined
-      onClick={(event) => {
-        // If you don't want click extra trigger collapse, you can prevent this:
-        event.stopPropagation();
-      }}
-    />
-  );
-  return (
-    <>
-      <Collapse
-        defaultActiveKey={['1']}
-        onChange={callback}
-        expandIconPosition={expandIconPosition}
-      >
-        <Panel header="This is panel header 1" key="1" extra={genExtra()}>
-          <div>{text}</div>
-        </Panel>
-        <Panel header="This is panel header 2" key="2" extra={genExtra()}>
-          <div>{text}</div>
-        </Panel>
-        <Panel header="This is panel header 3" key="3" extra={genExtra()}>
-          <div>{text}</div>
-        </Panel>
-      </Collapse>
-      <br />
-      <span>Expand Icon Position: </span>
-      <Select
-        value={expandIconPosition}
-        style={{ margin: '0 8px' }}
-        onChange={onPositionChange}
-      >
-        <Option value="left">left</Option>
-        <Option value="right">right</Option>
-      </Select>
-    </>
-  );
-};
-export default ExtraDemo;

package/components/collapse/demos/ghost.tsx

@@ -1,31 +0,0 @@
-/**
- * title: 幽灵折叠面板
- * desc: 将折叠面板的背景变成透明。
- */
-
-import React from 'react';
-import { Collapse } from '@fle-ui/next';
-
-const GhostDemo = () => {
-  const { Panel } = Collapse;
-
-  const text = `
-  A dog is a type of domesticated animal.
-  Known for its loyalty and faithfulness,
-  it can be found as a welcome guest in many households across the world.
-`;
-  return (
-    <Collapse defaultActiveKey={['1']} ghost>
-      <Panel header="This is panel header 1" key="1">
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 2" key="2">
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 3" key="3">
-        <p>{text}</p>
-      </Panel>
-    </Collapse>
-  );
-};
-export default GhostDemo;

package/components/collapse/demos/nesting.tsx

@@ -1,40 +0,0 @@
-/**
- * title: 面板嵌套
- * desc: 嵌套折叠面板。
- */
-
-import React from 'react';
-import { Collapse } from '@fle-ui/next';
-
-const NestingDemo = () => {
-  const { Panel } = Collapse;
-  function callback(key: any) {
-    console.log(key);
-  }
-
-  const text = `
-    A dog is a type of domesticated animal.
-    Known for its loyalty and faithfulness,
-    it can be found as a welcome guest in many households across the world.
-  `;
-
-  return (
-    <Collapse onChange={callback}>
-      <Panel header="This is panel header 1" key="1">
-        <Collapse defaultActiveKey="1">
-          <Panel header="This is panel nest panel" key="1">
-            <p>{text}</p>
-          </Panel>
-        </Collapse>
-      </Panel>
-      <Panel header="This is panel header 2" key="2">
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 3" key="3">
-        <p>{text}</p>
-      </Panel>
-    </Collapse>
-  );
-};
-
-export default NestingDemo;

package/components/collapse/demos/panel.tsx

@@ -1,36 +0,0 @@
-/**
- * title: 折叠面板
- * desc: 可以同时展开多个面板，这个例子默认展开了第一个。
- */
-
-import React from 'react';
-import { Collapse } from '@fle-ui/next';
-
-const PanelDemo = () => {
-  const { Panel } = Collapse;
-
-  function callback(key: any) {
-    console.log(key);
-  }
-
-  const text = `
-    A dog is a type of domesticated animal.
-    Known for its loyalty and faithfulness,
-    it can be found as a welcome guest in many households across the world.
-  `;
-
-  return (
-    <Collapse defaultActiveKey={['1']} onChange={callback}>
-      <Panel header="This is panel header 1" key="1">
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 2" key="2">
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 3" key="3">
-        <p>{text}</p>
-      </Panel>
-    </Collapse>
-  );
-};
-export default PanelDemo;

package/components/collapse/demos/simple.tsx

@@ -1,33 +0,0 @@
-/**
- * title: 简洁风格
- * desc: 一套没有边框的简洁样式。
- */
-
-import React from 'react';
-import { Collapse } from '@fle-ui/next';
-
-const SimpleDemo = () => {
-  const { Panel } = Collapse;
-  const text = (
-    <p style={{ paddingLeft: 24 }}>
-      A dog is a type of domesticated animal. Known for its loyalty and
-      faithfulness, it can be found as a welcome guest in many households across
-      the world.
-    </p>
-  );
-  return (
-    <Collapse bordered={false} defaultActiveKey={['1']}>
-      <Panel header="This is panel header 1" key="1">
-        {text}
-      </Panel>
-      <Panel header="This is panel header 2" key="2">
-        {text}
-      </Panel>
-      <Panel header="This is panel header 3" key="3">
-        {text}
-      </Panel>
-    </Collapse>
-  );
-};
-
-export default SimpleDemo;

package/components/collapse/index.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import InternalCollapse, { CollapseProps } from './components/collapse';
-import Panel, { CollapsePanelProps } from './components/panel';
-
-export interface CollapseInterface extends React.FC<CollapseProps> {
-  Panel: typeof Panel;
-}
-
-const Collapse = InternalCollapse as CollapseInterface;
-
-Collapse.Panel = Panel;
-
-export type { CollapsePanelProps, CollapseProps };
-
-export default Collapse;

package/components/comment/comment.md

@@ -1,51 +0,0 @@
----
-title: Comment 评论
-order: 0
-legacy: /comment
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# Comment 评论
-
-对网站内容的反馈、评价和讨论。
-
-## 何时使用
-
-评论组件可用于对事物的讨论，例如页面、博客文章、问题等等。
-
-## 代码演示
-
-### 基本评论
-
-<code src="./demos/basic.tsx"/>
-
-### 配合 List 组件
-
-<code src="./demos/matchList.tsx"/>
-
-## API
-
-| 参数     | 说明                                                 | 类型                | 默认值 | 版本 |
-| -------- | ---------------------------------------------------- | ------------------- | ------ | ---- |
-| actions  | 在评论内容下面呈现的操作项列表                       | Array&lt;ReactNode> | -      |      |
-| author   | 要显示为注释作者的元素                               | ReactNode           | -      |      |
-| avatar   | 要显示为评论头像的元素 - 通常是 antd Avatar 或者 src | ReactNode           | -      |      |
-| children | 嵌套注释应作为注释的子项提供                         | ReactNode           | -      |      |
-| content  | 评论的主要内容                                       | ReactNode           | -      |      |
-| datetime | 展示时间描述                                         | ReactNode           | -      |      |
-
-<style>
-.comment-action {
-  padding-left: 8px;
-  cursor: 'auto';
-}
-
-[class*='-col-rtl'] .comment-action {
-  padding-right: 8px;
-  padding-left: 0;
-}
-</style>

package/components/comment/demos/basic.tsx

@@ -1,77 +0,0 @@
-/**
- * title: 基本评论
- * desc: 一个基本的评论组件，带有作者、头像、时间和操作。
- */
-
-import React, { createElement, useState } from 'react';
-import { Tooltip, Avatar } from 'antd';
-import moment from 'moment';
-import {
-  DislikeOutlined,
-  LikeOutlined,
-  DislikeFilled,
-  LikeFilled,
-} from '@ant-design/icons';
-import { Comment } from '@fle-ui/next';
-
-const BasicDemo = () => {
-  const [likes, setLikes] = useState<any>(0);
-  const [dislikes, setDislikes] = useState<any>(0);
-  const [action, setAction] = useState<any>(null);
-
-  const like = () => {
-    setLikes(1);
-    setDislikes(0);
-    setAction('liked');
-  };
-
-  const dislike = () => {
-    setLikes(0);
-    setDislikes(1);
-    setAction('disliked');
-  };
-
-  const actions = [
-    <Tooltip key="comment-basic-like" title="Like">
-      <span onClick={like}>
-        {createElement(action === 'liked' ? LikeFilled : LikeOutlined)}
-        <span className="comment-action">{likes}</span>
-      </span>
-    </Tooltip>,
-    <Tooltip key="comment-basic-dislike" title="Dislike">
-      <span onClick={dislike}>
-        {React.createElement(
-          action === 'disliked' ? DislikeFilled : DislikeOutlined,
-        )}
-        <span className="comment-action">{dislikes}</span>
-      </span>
-    </Tooltip>,
-    <span key="comment-basic-reply-to">Reply to</span>,
-  ];
-
-  return (
-    <Comment
-      actions={actions}
-      author={<a>Han Solo</a>}
-      avatar={
-        <Avatar
-          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-          alt="Han Solo"
-        />
-      }
-      content={
-        <p>
-          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.
-        </p>
-      }
-      datetime={
-        <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
-          <span>{moment().fromNow()}</span>
-        </Tooltip>
-      }
-    />
-  );
-};
-export default BasicDemo;

package/components/comment/demos/matchList.tsx

@@ -1,74 +0,0 @@
-/**
- * title: 配合List组件
- * desc: 配合List组件展现评论列表。
- */
-import React from 'react';
-import { Tooltip, List } from 'antd';
-import moment from 'moment';
-import { Comment } from '@fle-ui/next';
-
-const MatchListDemo = () => {
-  const data = [
-    {
-      actions: [<span key="comment-list-reply-to-0">Reply to</span>],
-      author: 'Han Solo',
-      avatar:
-        'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
-      content: (
-        <p>
-          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.
-        </p>
-      ),
-      datetime: (
-        <Tooltip
-          title={moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss')}
-        >
-          <span>{moment().subtract(1, 'days').fromNow()}</span>
-        </Tooltip>
-      ),
-    },
-    {
-      actions: [<span key="comment-list-reply-to-0">Reply to</span>],
-      author: 'Han Solo',
-      avatar:
-        'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
-      content: (
-        <p>
-          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.
-        </p>
-      ),
-      datetime: (
-        <Tooltip
-          title={moment().subtract(2, 'days').format('YYYY-MM-DD HH:mm:ss')}
-        >
-          <span>{moment().subtract(2, 'days').fromNow()}</span>
-        </Tooltip>
-      ),
-    },
-  ];
-  return (
-    <List
-      className="comment-list"
-      header={`${data.length} replies`}
-      itemLayout="horizontal"
-      dataSource={data}
-      renderItem={(item) => (
-        <li>
-          <Comment
-            actions={item.actions}
-            author={item.author}
-            avatar={item.avatar}
-            content={item.content}
-            datetime={item.datetime}
-          />
-        </li>
-      )}
-    />
-  );
-};
-
-export default MatchListDemo;

package/components/comment/index.tsx

@@ -1,12 +0,0 @@
-import React, { FC } from 'react';
-import { Comment as AntdComment } from 'antd';
-import type { CommentProps as AntdCommentProps } from 'antd/es/comment';
-
-export interface CommentProps extends AntdCommentProps {}
-
-const Comment: FC<CommentProps> = (props) => {
-  const { children, ...otherProps } = props;
-  return <AntdComment {...otherProps}>{children}</AntdComment>;
-};
-
-export default Comment;