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

package/components/page-header/demos/basic.tsx

@@ -1,20 +0,0 @@
-/**
- * title: 标准样式
- * desc: 标准页头，适合使用在需要简单描述的场景。
- */
-
-import React from 'react';
-import { PageHeader } from '@fle-ui/next';
-
-const BasicDemo = () => {
-  return (
-    <PageHeader
-      className="site-page-header"
-      onBack={() => null}
-      title="Title"
-      subTitle="This is a subtitle"
-    />
-  );
-};
-
-export default BasicDemo;

package/components/page-header/demos/breadcrumb.tsx

@@ -1,34 +0,0 @@
-/**
- * title: 带面包屑页头
- * desc: 带面包屑页头，适合层级比较深的页面，让用户可以快速导航。
- */
-
-import React from 'react';
-import { PageHeader } from '@fle-ui/next';
-
-const BreadcrumbDemo = () => {
-  const routes = [
-    {
-      path: 'index',
-      breadcrumbName: 'First-level Menu',
-    },
-    {
-      path: 'first',
-      breadcrumbName: 'Second-level Menu',
-    },
-    {
-      path: 'second',
-      breadcrumbName: 'Third-level Menu',
-    },
-  ];
-  return (
-    <PageHeader
-      className="site-page-header"
-      title="Title"
-      breadcrumb={{ routes }}
-      subTitle="This is a subtitle"
-    />
-  );
-};
-
-export default BreadcrumbDemo;

package/components/page-header/demos/combination.tsx

@@ -1,156 +0,0 @@
-/**
- * title: 组合示例
- * desc: 使用了 PageHeader 提供的所有能力。
- */
-
-import React from 'react';
-import { PageHeader } from '@fle-ui/next';
-import { Menu, Dropdown, Button, Tag, Typography, Row } from 'antd';
-import { EllipsisOutlined } from '@ant-design/icons';
-
-const CombinationDemo = () => {
-  const { Paragraph } = Typography;
-
-  const menu = (
-    <Menu>
-      <Menu.Item>
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="http://www.alipay.com/"
-        >
-          1st menu item
-        </a>
-      </Menu.Item>
-      <Menu.Item>
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="http://www.taobao.com/"
-        >
-          2nd menu item
-        </a>
-      </Menu.Item>
-      <Menu.Item>
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="http://www.tmall.com/"
-        >
-          3rd menu item
-        </a>
-      </Menu.Item>
-    </Menu>
-  );
-
-  const DropdownMenu = () => (
-    <Dropdown key="more" overlay={menu}>
-      <Button
-        style={{
-          border: 'none',
-          padding: 0,
-        }}
-      >
-        <EllipsisOutlined
-          style={{
-            fontSize: 20,
-            verticalAlign: 'top',
-          }}
-        />
-      </Button>
-    </Dropdown>
-  );
-
-  const routes = [
-    {
-      path: 'index',
-      breadcrumbName: 'First-level Menu',
-    },
-    {
-      path: 'first',
-      breadcrumbName: 'Second-level Menu',
-    },
-    {
-      path: 'second',
-      breadcrumbName: 'Third-level Menu',
-    },
-  ];
-
-  const IconLink = ({ src, text }: { src: string; text: string }) => (
-    <a className="example-link">
-      <img className="example-link-icon" src={src} alt={text} />
-      {text}
-    </a>
-  );
-
-  const content = (
-    <>
-      <Paragraph>
-        Ant Design interprets the color system into two levels: a system-level
-        color system and a product-level color system.
-      </Paragraph>
-      <Paragraph>
-        Ant Design&#x27;s design team preferred to design with the HSB color
-        model, which makes it easier for designers to have a clear psychological
-        expectation of color when adjusting colors, as well as facilitate
-        communication in teams.
-      </Paragraph>
-      <div>
-        <IconLink
-          src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
-          text="Quick Start"
-        />
-        <IconLink
-          src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg"
-          text=" Product Info"
-        />
-        <IconLink
-          src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg"
-          text="Product Doc"
-        />
-      </div>
-    </>
-  );
-
-  const Content = ({ children, extraContent }: any) => (
-    <Row>
-      <div style={{ flex: 1 }}>{children}</div>
-      <div className="image">{extraContent}</div>
-    </Row>
-  );
-
-  return (
-    <PageHeader
-      title="Title"
-      className="site-page-header"
-      subTitle="This is a subtitle"
-      tags={<Tag color="blue">Running</Tag>}
-      extra={[
-        <Button key="3">Operation</Button>,
-        <Button key="2">Operation</Button>,
-        <Button key="1" type="primary">
-          Primary
-        </Button>,
-        <DropdownMenu key="more" />,
-      ]}
-      avatar={{
-        src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4',
-      }}
-      breadcrumb={{ routes }}
-    >
-      <Content
-        extraContent={
-          <img
-            src="https://gw.alipayobjects.com/zos/antfincdn/K%24NnlsB%26hz/pageHeader.svg"
-            alt="content"
-            width="100%"
-          />
-        }
-      >
-        {content}
-      </Content>
-    </PageHeader>
-  );
-};
-
-export default CombinationDemo;

package/components/page-header/demos/ghost.tsx

@@ -1,46 +0,0 @@
-/**
- * title: 白底模式
- * desc: 默认 PageHeader 是透明底色的。在某些情况下，PageHeader 需要自己的背景颜色。
- */
-
-import React from 'react';
-import { PageHeader } from '@fle-ui/next';
-import { Button, Descriptions } from 'antd';
-
-const GhostDemo = () => {
-  return (
-    <div className="site-page-header-ghost-wrapper">
-      <PageHeader
-        ghost={false}
-        onBack={() => window.history.back()}
-        title="Title"
-        subTitle="This is a subtitle"
-        extra={[
-          <Button key="3">Operation</Button>,
-          <Button key="2">Operation</Button>,
-          <Button key="1" type="primary">
-            Primary
-          </Button>,
-        ]}
-      >
-        <Descriptions size="small" column={3}>
-          <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
-          <Descriptions.Item label="Association">
-            <a>421421</a>
-          </Descriptions.Item>
-          <Descriptions.Item label="Creation Time">
-            2017-01-10
-          </Descriptions.Item>
-          <Descriptions.Item label="Effective Time">
-            2017-10-10
-          </Descriptions.Item>
-          <Descriptions.Item label="Remarks">
-            Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
-          </Descriptions.Item>
-        </Descriptions>
-      </PageHeader>
-    </div>
-  );
-};
-
-export default GhostDemo;

package/components/page-header/demos/multiform.tsx

@@ -1,73 +0,0 @@
-/**
- * title: 多种形态的PageHeader
- * desc: 使用操作区，并自定义子节点，适合使用在需要展示一些复杂的信息，帮助用户快速了解这个页面的信息和操作。
- */
-
-import React from 'react';
-import { PageHeader } from '@fle-ui/next';
-import { Tag, Button, Statistic, Descriptions, Row } from 'antd';
-
-const MultiformDemo = () => {
-  return (
-    <>
-      <PageHeader
-        className="site-page-header"
-        onBack={() => window.history.back()}
-        title="Title"
-        subTitle="This is a subtitle"
-        extra={[
-          <Button key="3">Operation</Button>,
-          <Button key="2">Operation</Button>,
-          <Button key="1" type="primary">
-            Primary
-          </Button>,
-        ]}
-      >
-        <Descriptions size="small" column={3}>
-          <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
-          <Descriptions.Item label="Association">
-            <a>421421</a>
-          </Descriptions.Item>
-          <Descriptions.Item label="Creation Time">
-            2017-01-10
-          </Descriptions.Item>
-          <Descriptions.Item label="Effective Time">
-            2017-10-10
-          </Descriptions.Item>
-          <Descriptions.Item label="Remarks">
-            Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
-          </Descriptions.Item>
-        </Descriptions>
-      </PageHeader>
-      <br />
-      <PageHeader
-        onBack={() => window.history.back()}
-        title="Title"
-        tags={<Tag color="blue">Running</Tag>}
-        subTitle="This is a subtitle"
-        extra={[
-          <Button key="3">Operation</Button>,
-          <Button key="2">Operation</Button>,
-          <Button key="1" type="primary">
-            Primary
-          </Button>,
-        ]}
-      >
-        <Row>
-          <Statistic title="Status" value="Pending" />
-          <Statistic
-            title="Price"
-            prefix="$"
-            value={568.08}
-            style={{
-              margin: '0 32px',
-            }}
-          />
-          <Statistic title="Balance" prefix="$" value={3345.08} />
-        </Row>
-      </PageHeader>
-    </>
-  );
-};
-
-export default MultiformDemo;

package/components/page-header/demos/responsive.tsx

@@ -1,79 +0,0 @@
-/**
- * title: 响应式
- * desc: 在不同大小的屏幕下，应该有不同的表现。
- */
-
-import { Tabs, Button, Statistic, Descriptions } from 'antd';
-import React from 'react';
-import { PageHeader } from '@fle-ui/next';
-
-const ResponsiveDemo = () => {
-  const { TabPane } = Tabs;
-
-  const renderContent = (column = 2) => (
-    <Descriptions size="small" column={column}>
-      <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
-      <Descriptions.Item label="Association">
-        <a>421421</a>
-      </Descriptions.Item>
-      <Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
-      <Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
-      <Descriptions.Item label="Remarks">
-        Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
-      </Descriptions.Item>
-    </Descriptions>
-  );
-
-  const extraContent = (
-    <div
-      style={{
-        display: 'flex',
-        width: 'max-content',
-        justifyContent: 'flex-end',
-      }}
-    >
-      <Statistic
-        title="Status"
-        value="Pending"
-        style={{
-          marginRight: 32,
-        }}
-      />
-      <Statistic title="Price" prefix="$" value={568.08} />
-    </div>
-  );
-
-  const Content = ({ children, extra }: any) => (
-    <div className="content">
-      <div className="main">{children}</div>
-      <div className="extra">{extra}</div>
-    </div>
-  );
-  return (
-    <>
-      <PageHeader
-        className="site-page-header-responsive"
-        onBack={() => window.history.back()}
-        title="Title"
-        subTitle="This is a subtitle"
-        extra={[
-          <Button key="3">Operation</Button>,
-          <Button key="2">Operation</Button>,
-          <Button key="1" type="primary">
-            Primary
-          </Button>,
-        ]}
-        footer={
-          <Tabs defaultActiveKey="1">
-            <TabPane tab="Details" key="1" />
-            <TabPane tab="Rule" key="2" />
-          </Tabs>
-        }
-      >
-        <Content extra={extraContent}>{renderContent()}</Content>
-      </PageHeader>
-    </>
-  );
-};
-
-export default ResponsiveDemo;

package/components/page-header/index.tsx

@@ -1,12 +0,0 @@
-import React, { FC, ReactElement } from 'react';
-import { PageHeader as AntdPageHeader } from 'antd';
-import type { PageHeaderProps as AntdPageHeaderProps } from 'antd';
-
-export interface PageHeaderProps extends AntdPageHeaderProps {}
-
-const PageHeader: FC<PageHeaderProps> = (props): ReactElement => {
-  const { children, ...otherProps } = props;
-  return <AntdPageHeader {...otherProps}>{children}</AntdPageHeader>;
-};
-
-export default PageHeader;

package/components/page-header/page-header.md

@@ -1,121 +0,0 @@
----
-title: PageHeader 页头
-order: 0
-legacy: /page-header
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# PageHeader 页头
-
-页头位于页容器中，页容器顶部，起到了内容概览和引导页级操作的作用。包括由面包屑、标题、页面内容简介、页面级操作等、页面级导航组成。
-
-## 何时使用
-
-当需要使用户快速理解当前页是什么以及方便用户使用页面功能时使用，通常也可被用作页面间导航。
-
-## 代码演示
-
-### 基本
-
-<code src="./demos/basic.tsx" />
-
-### 白底模式
-
-<code src="./demos/ghost.tsx" />
-
-### 带面包屑页头
-
-<code src="./demos/breadcrumb.tsx" />
-
-### 组合示例
-
-<code src="./demos/combination.tsx" />
-
-### 多种形态的 PageHeader
-
-<code src="./demos/multiform.tsx" />
-
-### 响应式
-
-<code src="./demos/responsive.tsx" />
-
-## API
-
-| 参数             | 说明                                             | 类型                                                  | 默认值           | 版本   |
-| ---------------- | ------------------------------------------------ | ----------------------------------------------------- | ---------------- | ------ |
-| avatar           | 标题栏旁的头像                                   | [AvatarProps](/components/avatar/)                    | -                |        |
-| backIcon         | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode \| boolean                                  | &lt;ArrowLeft /> |        |
-| breadcrumb       | 面包屑的配置                                     | [Breadcrumb](/components/breadcrumb/)                 | -                |        |
-| breadcrumbRender | 自定义面包屑区域的内容                           | `(props, originBreadcrumb) => ReactNode`              | -                | 4.11.0 |
-| extra            | 操作区，位于 title 行的行尾                      | ReactNode                                             | -                |        |
-| footer           | PageHeader 的页脚，一般用于渲染 TabBar           | ReactNode                                             | -                |        |
-| ghost            | pageHeader 的类型，将会改变背景颜色              | boolean                                               | true             |        |
-| subTitle         | 自定义的二级标题文字                             | ReactNode                                             | -                |        |
-| tags             | title 旁的 tag 列表                              | [Tag](/components/tag/)\[] \| [Tag](/components/tag/) | -                |        |
-| title            | 自定义标题文字                                   | ReactNode                                             | -                |        |
-| onBack           | 返回按钮的点击事件                               | () => void                                            | -                |        |
-
-<style>
-  [data-theme="dark"] .site-page-header {
-    border: 1px solid #303030;
-  }
-  [data-theme="dark"]  .site-page-header-ghost-wrapper {
-    background-color: rgba(255,255,255,0.08);
-  }
-
-.site-page-header {
-  border: 1px solid rgb(235, 237, 240);
-}
-
-.site-page-header-ghost-wrapper {
-  padding: 24px;
-  background-color: #f5f5f5;
-}
-
-#page-header-combination .image {
-  display: flex;
-  align-items: center;
-  margin: 0 0 0 60px;
-}
-
-#page-header-combination .ant-page-header-rtl .image {
-  margin: 0 60px 0 0;
-}
-
-#page-header-combination .example-link {
-  margin-right: 16px;
-  line-height: 24px;
-}
-[data-theme='compact'] #page-header-combination .example-link {
-  line-height: 20px;
-}
-#page-header-combination .example-link-icon {
-  margin-right: 8px;
-}
-
-[data-theme='compact'] #page-header-combination .example-link-icon {
-  width: 20px;
-  height: 20px;
-}
-
-#page-header-combination .ant-page-header-rtl .example-link {
-  float: right;
-  margin-right: 0;
-  margin-left: 16px;
-}
-#page-header-combination .ant-page-header-rtl .example-link-icon {
-  margin-right: 0;
-  margin-left: 8px;
-}
-
-@media (max-width: 768px) {
-  #page-header-combination .image {
-    flex: 100%;
-    margin: 24px 0 0;
-  }
-}
-</style>