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

package/components/calendar/demos/select.tsx

@@ -1,37 +0,0 @@
-/**
- * title: 选择功能
- * desc: 一个通用的日历面板，支持年/月切换。
- */
-
-import React, { useState } from 'react';
-import { Calendar, Alert } from '@fle-ui/next';
-import moment from 'moment';
-
-const SelectDemo = () => {
-  const [value, setValue] = useState(moment('2017-01-25'));
-  const [selectedValue, setSelectedValue] = useState(moment('2017-01-25'));
-  const onSelect = (value: moment.Moment) => {
-    setValue(value);
-    setSelectedValue(value);
-  };
-
-  const onPanelChange = (value: moment.Moment) => {
-    setValue(value);
-  };
-  return (
-    <>
-      <Alert
-        message={`You selected date: ${
-          selectedValue && selectedValue.format('YYYY-MM-DD')
-        }`}
-      />
-      <Calendar
-        value={value}
-        onSelect={onSelect}
-        onPanelChange={onPanelChange}
-      />
-    </>
-  );
-};
-
-export default SelectDemo;

package/components/calendar/index.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-import { Calendar } from 'antd';
-import type { CalendarProps } from 'antd';
-
-export type { CalendarProps };
-
-export default Calendar;

package/components/card/card.md

@@ -1,114 +0,0 @@
----
-title: Card 卡片
-order: 0
-legacy: /card
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# Card 卡片
-
-通用卡片容器。
-
-## 何时使用
-
-最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
-
-## 代码演示
-
-### 典型卡片
-
-<code src="./demos/basic.tsx" />
-  
-### 无边框
-
-<code src="./demos/border.tsx" />
-
-### 简洁卡片
-
-<code src="./demos/concise.tsx" />
-
-### 更灵活的内容展示
-
-<code src="./demos/flexible.tsx" />
-
-### 栅格卡片
-
-<code src="./demos/grid.tsx" />
-
-### 预加载的卡片
-
-<code src="./demos/preload.tsx" />
-
-### 网格型内嵌卡片
-
-<code src="./demos/embedded.tsx" />
-
-### 内部卡片
-
-<code src="./demos/inside.tsx" />
-
-### 带页签的卡片
-
-<code src="./demos/tab.tsx" />
-
-### 支持更多内容配置
-
-<code src="./demos/more.tsx" />
-
-
-## API
-
-```bash
-<Card title="卡片标题">卡片内容</Card>
-```
-
-### Card
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| actions | 卡片操作组，位置在卡片底部 | Array&lt;ReactNode> | - |  |
-| activeTabKey | 当前激活页签的 key | string | - |  |
-| bodyStyle | 内容区域自定义样式 | CSSProperties | - |  |
-| bordered | 是否有边框 | boolean | true |  |
-| cover | 卡片封面 | ReactNode | - |  |
-| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | `第一个页签` |  |
-| extra | 卡片右上角的操作区域 | ReactNode | - |  |
-| headStyle | 自定义标题区域样式 | CSSProperties | - |  |
-| hoverable | 鼠标移过时可浮起 | boolean | false |  |
-| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false |  |
-| size | card 的尺寸 | `default` \| `small` | `default` |  |
-| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - |  |
-| tabList | 页签标题列表 | Array&lt;{key: string, tab: ReactNode}> | - |  |
-| tabProps | [Tabs](/components/tabs/#Tabs) | - | - |  |
-| title | 卡片标题 | ReactNode | - |  |
-| type | 卡片类型，可设置为 `inner` 或 不设置 | string | - |  |
-| onTabChange | 页签切换的回调 | (key) => void | - |  |
-
-### Card.Grid
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| className | 网格容器类名 | string | - |  |
-| hoverable | 鼠标移过时可浮起 | boolean | true |  |
-| style | 定义网格容器类名的样式 | CSSProperties | - |  |
-
-### Card.Meta
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| avatar | 头像/图标 | ReactNode | - |  |
-| className | 容器类名 | string | - |  |
-| description | 描述内容 | ReactNode | - |  |
-| style | 定义容器类名的样式 | CSSProperties | - |  |
-| title | 标题内容 | ReactNode | - |  |
-
-<style>
-  .site-card-border-less-wrapper {
-    padding: 30px;
-    background: #ececec;
-  }
-</style>

package/components/card/components/card.tsx

@@ -1,13 +0,0 @@
-import React, { FC, ReactElement } from 'react';
-import { Card as AntdCard } from 'antd';
-import type { CardProps as AntdCardProps } from 'antd/es/card';
-
-export interface CardProps extends AntdCardProps {}
-
-const Card: FC<CardProps> = (props): ReactElement => {
-  const { children, ...otherProps } = props;
-
-  return <AntdCard {...otherProps}>{children}</AntdCard>;
-};
-
-export default Card;

package/components/card/components/grid.tsx

@@ -1,13 +0,0 @@
-import React, { FC, ReactElement } from 'react';
-import { Card as AntdCard } from 'antd';
-import type { CardGridProps as AntdGridProps } from 'antd/es/card';
-
-export interface CardGridProps extends AntdGridProps {}
-const { Grid: AntdCardGrid } = AntdCard;
-const Grid: FC<CardGridProps> = (props): ReactElement => {
-  const { children, ...otherProps } = props;
-
-  return <AntdCardGrid {...otherProps}>{children}</AntdCardGrid>;
-};
-
-export default Grid;

package/components/card/components/meta.tsx

@@ -1,13 +0,0 @@
-import React, { FC, ReactElement } from 'react';
-import { Card as AntdCard } from 'antd';
-import type { CardMetaProps as AntdCardMetaProps } from 'antd/es/card';
-export interface CardMetaProps extends AntdCardMetaProps {}
-
-const { Meta: AntdCardMeta } = AntdCard;
-const Meta: FC<CardMetaProps> = (props): ReactElement => {
-  const { children, ...otherProps } = props;
-
-  return <AntdCardMeta {...otherProps}>{children}</AntdCardMeta>;
-};
-
-export default Meta;

package/components/card/demos/basic.tsx

@@ -1,35 +0,0 @@
-/**
- * title: 典型卡片
- * desc: 包含标题、内容、操作区域。
- */
-
-import React from 'react';
-import { Card } from '@fle-ui/next';
-
-const BasicDemo = () => {
-  return (
-    <>
-      <Card
-        title="Default size card"
-        extra={<a href="#">More</a>}
-        style={{ width: 300 }}
-      >
-        <p>Card content</p>
-        <p>Card content</p>
-        <p>Card content</p>
-      </Card>
-      <Card
-        size="small"
-        title="Small size card"
-        extra={<a href="#">More</a>}
-        style={{ width: 300 }}
-      >
-        <p>Card content</p>
-        <p>Card content</p>
-        <p>Card content</p>
-      </Card>
-    </>
-  );
-};
-
-export default BasicDemo;

package/components/card/demos/border.tsx

@@ -1,21 +0,0 @@
-/**
- * title: 无边框
- * desc: 在灰色背景上使用无边框的卡片
- */
-
-import React from 'react';
-import { Card } from '@fle-ui/next';
-
-const BorderDemo = () => {
-  return (
-    <div className="site-card-border-less-wrapper">
-      <Card title="Card title" bordered={false} style={{ width: 300 }}>
-        <p>Card content</p>
-        <p>Card content</p>
-        <p>Card content</p>
-      </Card>
-    </div>
-  );
-};
-
-export default BorderDemo;

package/components/card/demos/concise.tsx

@@ -1,19 +0,0 @@
-/**
- * title: 简洁卡片
- * desc: 只包含内容区域。
- */
-
-import React from 'react';
-import { Card } from '@fle-ui/next';
-
-const ConciseDemo = () => {
-  return (
-    <Card style={{ width: 300 }}>
-      <p>Card content</p>
-      <p>Card content</p>
-      <p>Card content</p>
-    </Card>
-  );
-};
-
-export default ConciseDemo;

package/components/card/demos/embedded.tsx

@@ -1,29 +0,0 @@
-/**
- * title: 网格型内嵌卡片
- * desc: 一种常见的卡片内容区隔模式。
- */
-
-import React from 'react';
-import { Card } from '@fle-ui/next';
-
-const EmbeddedDemo = () => {
-  const gridStyle: object = {
-    width: '25%',
-    textAlign: 'center',
-  };
-  return (
-    <Card title="Card Title">
-      <Card.Grid style={gridStyle}>Content</Card.Grid>
-      <Card.Grid hoverable={false} style={gridStyle}>
-        Content
-      </Card.Grid>
-      <Card.Grid style={gridStyle}>Content</Card.Grid>
-      <Card.Grid style={gridStyle}>Content</Card.Grid>
-      <Card.Grid style={gridStyle}>Content</Card.Grid>
-      <Card.Grid style={gridStyle}>Content</Card.Grid>
-      <Card.Grid style={gridStyle}>Content</Card.Grid>
-    </Card>
-  );
-};
-
-export default EmbeddedDemo;

package/components/card/demos/flexible.tsx

@@ -1,27 +0,0 @@
-/**
- * title: 更灵活的内容展示
- * desc: 可以利用 `Card.Meta` 支持更灵活的内容。
- */
-
-import React from 'react';
-import { Card } from '@fle-ui/next';
-
-const { Meta } = Card;
-const FlexibleDemo = () => {
-  return (
-    <Card
-      hoverable
-      style={{ width: 240 }}
-      cover={
-        <img
-          alt="example"
-          src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
-        />
-      }
-    >
-      <Meta title="Europe Street beat" description="www.instagram.com" />
-    </Card>
-  );
-};
-
-export default FlexibleDemo;

package/components/card/demos/grid.tsx

@@ -1,33 +0,0 @@
-/**
- * title: 栅格卡片
- * desc: 在系统概览页面常常和栅格进行配合。
- */
-
-import React from 'react';
-import { Card, Col, Row } from 'antd';
-
-const GridDemo = () => {
-  return (
-    <div className="site-card-wrapper">
-      <Row gutter={16}>
-        <Col span={8}>
-          <Card title="Card title" bordered={false}>
-            Card content
-          </Card>
-        </Col>
-        <Col span={8}>
-          <Card title="Card title" bordered={false}>
-            Card content
-          </Card>
-        </Col>
-        <Col span={8}>
-          <Card title="Card title" bordered={false}>
-            Card content
-          </Card>
-        </Col>
-      </Row>
-    </div>
-  );
-};
-
-export default GridDemo;

package/components/card/demos/inside.tsx

@@ -1,27 +0,0 @@
-/**
- * title: 内部卡片
- * desc: 可以放在普通卡片内部，展示多层级结构的信息。
- */
-
-import React from 'react';
-import { Card } from '@fle-ui/next';
-
-const InsideDemo = () => {
-  return (
-    <Card title="Card title">
-      <Card type="inner" title="Inner Card title" extra={<a href="#">More</a>}>
-        Inner Card content
-      </Card>
-      <Card
-        style={{ marginTop: 16 }}
-        type="inner"
-        title="Inner Card title"
-        extra={<a href="#">More</a>}
-      >
-        Inner Card content
-      </Card>
-    </Card>
-  );
-};
-
-export default InsideDemo;

package/components/card/demos/more.tsx

@@ -1,42 +0,0 @@
-/**
- * title: 支持更多内容配置
- * desc: 一种支持封面、头像、标题和描述信息的卡片。
- */
-
-import React, { useState } from 'react';
-import { Card, Avatar } from '@fle-ui/next';
-import {
-  EditOutlined,
-  EllipsisOutlined,
-  SettingOutlined,
-} from '@ant-design/icons';
-
-const MoreDemo = () => {
-  const { Meta } = Card;
-  return (
-    <Card
-      style={{ width: 300 }}
-      cover={
-        <img
-          alt="example"
-          src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
-        />
-      }
-      actions={[
-        <SettingOutlined key="setting" />,
-        <EditOutlined key="edit" />,
-        <EllipsisOutlined key="ellipsis" />,
-      ]}
-    >
-      <Meta
-        avatar={
-          <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
-        }
-        title="Card title"
-        description="This is the description"
-      />
-    </Card>
-  );
-};
-
-export default MoreDemo;