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

package/components/breadcrumb/index.tsx

@@ -1,24 +0,0 @@
-import InternalBreadcrumb, { BreadcrumbProps } from './components/breadcrumb';
-import Item, { BreadcrumbItemProps } from './components/item';
-import { Breadcrumb as TypeBreadcrumb } from 'antd';
-import Separator, {
-  BreadcrumbSeparatorInterface,
-} from './components/separator';
-
-interface BreadcrumbInterface extends React.FC<BreadcrumbProps> {
-  Item: typeof Item;
-  Separator: typeof Separator;
-}
-
-const Breadcrumb = InternalBreadcrumb as BreadcrumbInterface;
-
-Breadcrumb.Item = Item;
-Breadcrumb.Separator = Separator;
-
-export type {
-  BreadcrumbProps,
-  BreadcrumbItemProps,
-  BreadcrumbSeparatorInterface,
-};
-
-export default Breadcrumb;

package/components/button/button.md

@@ -1,121 +0,0 @@
----
-title: Button 按钮
-order: 0
-legacy: /button
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# Button 按钮
-
-按钮用于开始一个即时操作。
-
-## 何时使用
-
-标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
-
-在 @fle-ui/next 中我们提供了五种按钮。
-
-- 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
-- 默认按钮：用于没有主次之分的一组行动点。
-- 虚线按钮：常用于添加操作。
-- 文本按钮：用于最次级的行动点。
-- 链接按钮：用于作为外链的行动点。
-
-以及四种状态属性与上面配合使用。
-
-- 危险：删除/移动/修改权限等危险操作，一般需要二次确认。
-- 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
-- 禁用：行动点不可用的时候，一般需要文案解释。
-- 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。
-
-## 代码演示
-
-### 按钮类型
-
-<code src="./demos/basic.tsx" />
-
-### 按钮尺寸
-
-<code src="./demos/size.tsx" />
-
-### 图标按钮
-
-<code src="./demos/icon.tsx" />
-
-### 加载中状态
-
-<code src="./demos/loading.tsx" />
-
-### 不可用状态
-
-<code src="./demos/disabled.tsx" />
-
-### 幽灵按钮
-
-<code src="./demos/ghost.tsx" />
-
-### Block 按钮
-
-<code src="./demos/block.tsx" />
-
-### 多个按钮组合
-
-<code src="./demos/multiple.tsx" />
-
-### 危险按钮
-
-<code src="./demos/danger.tsx" />
-
-## API
-
-通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
-
-按钮的属性说明如下：
-
-| 属性 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| block | 将按钮宽度调整为其父宽度的选项 | boolean | false |  |
-| danger | 设置危险按钮 | boolean | false |  |
-| disabled | 按钮失效状态 | boolean | false |  |
-| ghost | 幽灵属性，使按钮背景透明 | boolean | false |  |
-| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - |  |
-| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |  |
-| icon | 设置按钮的图标组件 | ReactNode | - |  |
-| loading | 设置按钮载入状态 | boolean \| { delay: number } | false |  |
-| shape | 设置按钮形状 | `circle` \| `round` | - |  |
-| size | 设置按钮大小 | `large` \| `middle` \| `small` | `middle` |  |
-| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |  |
-| type | 设置按钮类型 | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` |  |
-| onClick | 点击按钮时的回调 | (event) => void | - |  |
-
-支持原生 button 的其他所有属性。
-
-## FAQ
-
-### 如何移除两个汉字之间的空格？
-
-根据 Ant Design 设计规范要求，我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置 [ConfigProvider](/components/config-provider/#API) 的 `autoInsertSpaceInButton` 为 `false`。
-
-<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="移除两个汉字之间的空格"  />
-
-<style>
-[class^="__dumi-default-previewer"] .ant-btn {
-  margin-right: 8px;
-  margin-bottom: 12px;
-}
-[class^="__dumi-default-previewer"] .ant-btn-rtl {
-  margin-right: 0;
-  margin-left: 8px;
-}
-[class^="__dumi-default-previewer"] .ant-btn-group > .ant-btn {
-  margin-right: 0;
-}
-[class^="__dumi-default-previewer"] .site-button-ghost-wrapper {
-  padding: 8px 8px 0 8px;
-  background: rgb(190, 200, 200);
-}
-</style>

package/components/button/demos/basic.tsx

@@ -1,21 +0,0 @@
-/**
- * title: 按钮类型
- * desc: 按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
- */
-
-import React from 'react';
-import { Button } from '@fle-ui/next';
-
-const BasicDemo = () => {
-  return (
-    <>
-      <Button type="primary">Primary Button</Button>
-      <Button>Default Button</Button>
-      <Button type="dashed">Dashed Button</Button>
-      <Button type="text">Text Button</Button>
-      <Button type="link">Link Button</Button>
-    </>
-  );
-};
-
-export default BasicDemo;

package/components/button/demos/block.tsx

@@ -1,26 +0,0 @@
-/**
- * title: Block 按钮
- * desc: `block` 属性将使按钮适合其父宽度。
- */
-
-import React from 'react';
-import { Button } from '@fle-ui/next';
-
-const BlockDemo = () => {
-  return (
-    <>
-      <Button type="primary" block>
-        Primary
-      </Button>
-      <Button block>Default</Button>
-      <Button type="dashed" block>
-        Dashed
-      </Button>
-      <Button type="link" block>
-        Link
-      </Button>
-    </>
-  );
-};
-
-export default BlockDemo;

package/components/button/demos/danger.tsx

@@ -1,28 +0,0 @@
-/**
- * title: 危险按钮
- */
-
-import React from 'react';
-import { Button } from '@fle-ui/next';
-
-const DangerDemo = () => {
-  return (
-    <>
-      <Button type="primary" danger>
-        Primary
-      </Button>
-      <Button danger>Default</Button>
-      <Button type="dashed" danger>
-        Dashed
-      </Button>
-      <Button type="text" danger>
-        Text
-      </Button>
-      <Button type="link" danger>
-        Link
-      </Button>
-    </>
-  );
-};
-
-export default DangerDemo;

package/components/button/demos/disabled.tsx

@@ -1,65 +0,0 @@
-/**
- * title: 不可用状态
- * desc: 添加 `disabled` 属性即可让按钮处于不可用状态，同时按钮样式也会改变。
- */
-
-import React from 'react';
-import { Button } from '@fle-ui/next';
-
-const DisabledDemo = () => {
-  return (
-    <>
-      <Button type="primary">Primary</Button>
-      <Button type="primary" disabled>
-        Primary(disabled)
-      </Button>
-
-      <Button>Default</Button>
-      <Button disabled>Default(disabled)</Button>
-
-      <Button type="dashed">Dashed</Button>
-      <Button type="dashed" disabled>
-        Dashed(disabled)
-      </Button>
-
-      <br />
-      <Button type="text">Text</Button>
-      <Button type="text" disabled>
-        Text(disabled)
-      </Button>
-
-      <Button type="link">Link</Button>
-      <Button type="link" disabled>
-        Link(disabled)
-      </Button>
-
-      <br />
-      <Button danger>Danger Default</Button>
-      <Button danger disabled>
-        Danger Default(disabled)
-      </Button>
-      <br />
-      <Button danger type="text">
-        Danger Text
-      </Button>
-      <Button danger type="text" disabled>
-        Danger Text(disabled)
-      </Button>
-
-      <Button type="link" danger>
-        Danger Link
-      </Button>
-      <Button type="link" danger disabled>
-        Danger Link(disabled)
-      </Button>
-      <div className="site-button-ghost-wrapper">
-        <Button ghost>Ghost</Button>
-        <Button ghost disabled>
-          Ghost(disabled)
-        </Button>
-      </div>
-    </>
-  );
-};
-
-export default DisabledDemo;

package/components/button/demos/ghost.tsx

@@ -1,26 +0,0 @@
-/**
- * title: 幽灵按钮
- * desc: 幽灵按钮将按钮的内容反色，背景变为透明，常用在有色背景上。
- */
-
-import React from 'react';
-import { Button } from '@fle-ui/next';
-
-const GhostDemo = () => {
-  return (
-    <div className="site-button-ghost-wrapper">
-      <Button type="primary" ghost>
-        Primary
-      </Button>
-      <Button ghost>Default</Button>
-      <Button type="dashed" ghost>
-        Dashed
-      </Button>
-      <Button type="primary" danger ghost>
-        Danger
-      </Button>
-    </div>
-  );
-};
-
-export default GhostDemo;

package/components/button/demos/icon.tsx

@@ -1,83 +0,0 @@
-/**
- * title: 图标按钮
- * desc: 当需要在 `Button` 内嵌入 `Icon` 时，可以设置 `icon` 属性，或者直接在 `Button` 内使用 `Icon` 组件。 <br/>  如果想控制 `Icon` 具体的位置，只能直接使用 `Icon` 组件，而非 `icon` 属性。
- */
-
-import React from 'react';
-import { Button, Tooltip } from '@fle-ui/next';
-import { SearchOutlined } from '@ant-design/icons';
-
-const IconDemo = () => {
-  return (
-    <>
-      <Tooltip title="search">
-        <Button type="primary" shape="circle" icon={<SearchOutlined />} />
-      </Tooltip>
-      <Button type="primary" shape="circle">
-        A
-      </Button>
-      <Button type="primary" icon={<SearchOutlined />}>
-        Search
-      </Button>
-      <Tooltip title="search">
-        <Button shape="circle" icon={<SearchOutlined />} />
-      </Tooltip>
-      <Button icon={<SearchOutlined />}>Search</Button>
-
-      <Tooltip title="search">
-        <Button shape="circle" icon={<SearchOutlined />} />
-      </Tooltip>
-      <Button icon={<SearchOutlined />}>Search</Button>
-      <Tooltip title="search">
-        <Button type="dashed" shape="circle" icon={<SearchOutlined />} />
-      </Tooltip>
-      <Button type="dashed" icon={<SearchOutlined />}>
-        Search
-      </Button>
-
-      <br />
-
-      <Tooltip title="search">
-        <Button
-          type="primary"
-          shape="circle"
-          icon={<SearchOutlined />}
-          size="large"
-        />
-      </Tooltip>
-      <Button type="primary" shape="circle" size="large">
-        A
-      </Button>
-      <Button type="primary" icon={<SearchOutlined />} size="large">
-        Search
-      </Button>
-      <Tooltip title="search">
-        <Button shape="circle" icon={<SearchOutlined />} size="large" />
-      </Tooltip>
-      <Button icon={<SearchOutlined />} size="large">
-        Search
-      </Button>
-
-      <Tooltip title="search">
-        <Button shape="circle" icon={<SearchOutlined />} size="large" />
-      </Tooltip>
-
-      <Button icon={<SearchOutlined />} size="large">
-        Search
-      </Button>
-      <Tooltip title="search">
-        <Button
-          type="dashed"
-          shape="circle"
-          icon={<SearchOutlined />}
-          size="large"
-        />
-      </Tooltip>
-      <Button type="dashed" icon={<SearchOutlined />} size="large">
-        Search
-      </Button>
-    </>
-  );
-};
-
-export default IconDemo;

package/components/button/demos/loading.tsx

@@ -1,67 +0,0 @@
-/**
- * title: 加载中状态
- * desc: 添加`loading` 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。
- */
-
-import React, { useState } from 'react';
-import { Button } from '@fle-ui/next';
-import { PoweroffOutlined } from '@ant-design/icons';
-
-export type loadingsItem = boolean;
-
-const LoadingDemo = () => {
-  const [loadings, setLoadings] = useState<loadingsItem[]>([]);
-
-  const enterLoading = (index: number) => {
-    const newLoadings: loadingsItem[] = [...loadings];
-
-    setLoadings(() => {
-      newLoadings[index] = true;
-
-      setTimeout(() => {
-        newLoadings[index] = false;
-        setLoadings(() => {
-          return newLoadings;
-        });
-      }, 6000);
-
-      return newLoadings;
-    });
-  };
-
-  return (
-    <>
-      <Button type="primary" loading>
-        Loading
-      </Button>
-      <Button type="primary" size="small" loading>
-        Loading
-      </Button>
-      <Button type="primary" icon={<PoweroffOutlined />} loading />
-
-      <Button
-        type="primary"
-        loading={loadings[0]}
-        onClick={() => enterLoading(0)}
-      >
-        Click me!
-      </Button>
-      <Button
-        type="primary"
-        icon={<PoweroffOutlined />}
-        loading={loadings[1]}
-        onClick={() => enterLoading(1)}
-      >
-        Click me!
-      </Button>
-      <Button
-        type="primary"
-        icon={<PoweroffOutlined />}
-        loading={loadings[2]}
-        onClick={() => enterLoading(2)}
-      />
-    </>
-  );
-};
-
-export default LoadingDemo;