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

package/components/form/index.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Form } from 'antd';
-import type {
-  FormProps,
-  FormInstance,
-  FormItemProps,
-  FormListProps,
-} from 'antd/es/form';
-
-export type { FormProps, FormInstance, FormItemProps, FormListProps };
-
-export default Form;

package/components/grid/components/col.tsx

@@ -1,23 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Col as AntdCol } from 'antd';
-
-import type {
-  ColProps as AntdColProps,
-  ColSize as AntdColSize,
-} from 'antd/es/grid';
-
-export interface ColProps extends AntdColProps {}
-export interface ColSize extends AntdColSize {}
-
-const Col = forwardRef<HTMLDivElement, ColProps>((props, ref) => {
-  const { children, ...otherProps } = props;
-  return (
-    <AntdCol ref={ref} {...otherProps}>
-      {children}
-    </AntdCol>
-  );
-});
-
-Col.displayName = 'Col';
-
-export default Col;

package/components/grid/components/row.tsx

@@ -1,19 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Row as AntdRow } from 'antd';
-
-import type { RowProps as AntdRowProps } from 'antd/es/grid';
-
-export interface RowProps extends AntdRowProps {}
-
-const Row = forwardRef<HTMLDivElement, RowProps>((props, ref) => {
-  const { children, ...otherProps } = props;
-  return (
-    <AntdRow ref={ref} {...otherProps}>
-      {children}
-    </AntdRow>
-  );
-});
-
-Row.displayName = 'Row';
-
-export default Row;

package/components/grid/demos/basic/index.less

@@ -1,87 +0,0 @@
-// @black: #000;
-
-// .grid-demo,
-//   .__dumi-default-previewer-demo {
-//     .demo-row,
-//     .code-box-demo .demo-row {
-//       background-image: linear-gradient(
-//         90deg,
-//         #1d1d1d 4.16666667%,
-//         transparent 4.16666667%,
-//         transparent 8.33333333%,
-//         #1d1d1d 8.33333333%,
-//         #1d1d1d 12.5%,
-//         transparent 12.5%,
-//         transparent 16.66666667%,
-//         #1d1d1d 16.66666667%,
-//         #1d1d1d 20.83333333%,
-//         transparent 20.83333333%,
-//         transparent 25%,
-//         #1d1d1d 25%,
-//         #1d1d1d 29.16666667%,
-//         transparent 29.16666667%,
-//         transparent 33.33333333%,
-//         #1d1d1d 33.33333333%,
-//         #1d1d1d 37.5%,
-//         transparent 37.5%,
-//         transparent 41.66666667%,
-//         #1d1d1d 41.66666667%,
-//         #1d1d1d 45.83333333%,
-//         transparent 45.83333333%,
-//         transparent 50%,
-//         #1d1d1d 50%,
-//         #1d1d1d 54.16666667%,
-//         transparent 54.16666667%,
-//         transparent 58.33333333%,
-//         #1d1d1d 58.33333333%,
-//         #1d1d1d 62.5%,
-//         transparent 62.5%,
-//         transparent 66.66666667%,
-//         #1d1d1d 66.66666667%,
-//         #1d1d1d 70.83333333%,
-//         transparent 70.83333333%,
-//         transparent 75%,
-//         #1d1d1d 75%,
-//         #1d1d1d 79.16666667%,
-//         transparent 79.16666667%,
-//         transparent 83.33333333%,
-//         #1d1d1d 83.33333333%,
-//         #1d1d1d 87.5%,
-//         transparent 87.5%,
-//         transparent 91.66666667%,
-//         #1d1d1d 91.66666667%,
-//         #1d1d1d 95.83333333%,
-//         transparent 95.83333333%
-//       );
-//     }
-//     .code-box-demo .ant-row > div:not(.gutter-row) {
-//       padding: 16px 0;
-//       background: #028ac8;
-//       &:nth-child(2n + 1) {
-//         background: fade(#0088c6, 70%);
-//       }
-//     }
-//     .ant-row .demo-col,
-//     .code-box-demo .ant-row .demo-col {
-//       margin-top: 0;
-//       margin-bottom: 0;
-//       padding: 30px 0;
-//       color: black;
-//       font-size: 18px;
-//       text-align: center;
-//       border: none;
-//     }
-//     .ant-row .demo-col-1 {
-//       background: fade(#0088c6, 70%);
-//     }
-//     .ant-row .demo-col-3,
-//     .code-box-demo .ant-row .demo-col-3 {
-//       color: fade(@black, 45%);
-//       background: unset;
-//     }
-//     .ant-row .demo-col-5,
-//     .code-box-demo .ant-row .demo-col-5 {
-//       color: fade(@black, 45%);
-//       background: unset;
-//     }
-//   }

package/components/grid/demos/basic/index.tsx

@@ -1,36 +0,0 @@
-/**
- * title: 基础栅格
- * desc: 从堆叠到水平排列。<br/>使用单一的一组 `Row` 和 `Col` 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 `Row` 内。
- */
-
-import React from 'react';
-import { Row, Col } from 'antd';
-
-import './index.less';
-
-const Demo = () => {
-  return (
-    <div className="code-box-demo">
-      <Row>
-        <Col span={24}>col</Col>
-      </Row>
-      <Row>
-        <Col span={12}>col-12</Col>
-        <Col span={12}>col-12</Col>
-      </Row>
-      <Row>
-        <Col span={8}>col-8</Col>
-        <Col span={8}>col-8</Col>
-        <Col span={8}>col-8</Col>
-      </Row>
-      <Row>
-        <Col span={6}>col-6</Col>
-        <Col span={6}>col-6</Col>
-        <Col span={6}>col-6</Col>
-        <Col span={6}>col-6</Col>
-      </Row>
-    </div>
-  );
-};
-
-export default Demo;

package/components/grid/grid.md

@@ -1,133 +0,0 @@
----
-title: Grid 栅格
-order: 0
-legacy: /grid
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# Grid 栅格
-
-24 栅格系统。
-
-## 设计理念
-
-<div id='components-grid-demo-idea'>
-  <div class="grid-demo">
-    <div class="ant-row demo-row">
-      <div class="ant-col-24 demo-col demo-col-1">
-        100%
-      </div>
-    </div>
-      <div class="ant-row demo-row">
-        <div class="ant-col-6 demo-col demo-col-2">
-          25%
-        </div>
-        <div class="ant-col-6 demo-col demo-col-3">
-          25%
-        </div>
-        <div class="ant-col-6 demo-col demo-col-2">
-          25%
-        </div>
-        <div class="ant-col-6 demo-col demo-col-3">
-          25%
-        </div>
-      </div>
-      <div class="ant-row demo-row">
-        <div class="ant-col-8 demo-col demo-col-4">
-          33.33%
-        </div>
-        <div class="ant-col-8 demo-col demo-col-5">
-          33.33%
-        </div>
-        <div class="ant-col-8 demo-col demo-col-4">
-          33.33%
-        </div>
-      </div>
-      <div class="ant-row demo-row">
-        <div class="ant-col-12 demo-col demo-col-1">
-          50%
-        </div>
-        <div class="ant-col-12 demo-col demo-col-3">
-          50%
-        </div>
-      </div>
-      <div class="ant-row demo-row">
-        <div class="ant-col-16 demo-col demo-col-4">
-          66.66%
-        </div>
-        <div class="ant-col-8 demo-col demo-col-5">
-          33.33%
-        </div>
-      </div>
-  </div>
-</div>
-
-
-在多数业务情况下，Ant Design 需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。
-
-划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。
-
-## 概述
-
-布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：
-
-- 通过 `row` 在水平方向建立一组 `column`（简写 col）。
-- 你的内容应当放置于 `col` 内，并且，只有 `col` 可以作为 `row` 的直接元素。
-- 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 `<Col span={8} />` 来创建。
-- 如果一个 `row` 中的 `col` 总和超过 24，那么多余的 `col` 会作为一个整体另起一行排列。
-
-我们的栅格化系统基于 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。
-
-布局是基于 24 栅格来定义每一个『盒子』的宽度，但不拘泥于栅格。
-
-## 代码演示
-
-### 基础栅格
-
-<code src="./demos/basic/index.tsx" />
-  
-## API
-
-Ant Design 的布局组件若不能满足你的需求，你也可以直接使用社区的优秀布局组件：
-
-- [react-flexbox-grid](http://roylee0704.github.io/react-flexbox-grid/)
-- [react-blocks](https://github.com/whoisandy/react-blocks/)
-
-### Row
-
-| 成员 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` | `top` |  |
-| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| object \| array | 0 |  |
-| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` |  |
-| wrap | 是否自动换行 | boolean | true | 4.8.0 |
-
-### Col
-
-| 成员 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| flex | flex 布局属性 | string \| number | - |  |
-| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 |  |
-| order | 栅格顺序 | number | 0 |  |
-| pull | 栅格向左移动格数 | number | 0 |  |
-| push | 栅格向右移动格数 | number | 0 |  |
-| span | 栅格占位格数，为 0 时相当于 `display: none` | number | - |  |
-| xs | `屏幕 < 576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - |  |
-| sm | `屏幕 ≥ 576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - |  |
-| md | `屏幕 ≥ 768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - |  |
-| lg | `屏幕 ≥ 992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - |  |
-| xl | `屏幕 ≥ 1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - |  |
-| xxl | `屏幕 ≥ 1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - |  |
-
-响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。
-
-<style>
-  [data-theme="dark"] #components-grid-demo-playground pre {
-    background: rgba(255,255,255,0.08);
-    color: rgba(255,255,255,.65);
-  }
-</style>

package/components/grid/hooks/useBreakpoint.tsx

@@ -1,3 +0,0 @@
-import useBreakpoint from 'antd/es/grid/index';
-
-export default useBreakpoint;

package/components/grid/index.tsx

@@ -1,8 +0,0 @@
-import Row, { RowProps } from './components/row';
-import Col, { ColProps, ColSize } from './components/col';
-import useBreakpoint from './hooks/useBreakpoint';
-
-export type { RowProps, ColProps, ColSize };
-export { Row, Col };
-
-export default { useBreakpoint };

package/components/icon/icon.md

@@ -1,166 +0,0 @@
----
-title: Icon 图标
-order: 0
-legacy: /icon
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# Icon 图标
-
-语义化的矢量图形。使用图标组件，你需要安装 `@ant-design/icons` 图标组件包：
-
-```bash
-npm install --save @ant-design/icons
-```
-
-## 设计师专属
-
-安装 [Kitchen Sketch 插件 💎](https://kitchen.alipay.com)，就可以一键拖拽使用 Ant Design 和 Iconfont 的海量图标，还可以关联自有项目。
-
-
-## 图标列表
-
-
-### 简单列表
-
-<!-- <code src="./demos/simple.tsx" /> -->
-
-
-## API
-
-从 4.0 开始，antd 不再内置 Icon 组件，请使用独立的包 `@ant-design/icons`。
-
-### 通用图标
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| className | 设置图标的样式名 | string | - |  |
-| rotate | 图标旋转角度（IE9 无效） | number | - |  |
-| spin | 是否有旋转动画 | boolean | false |  |
-| style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - |  |
-| twoToneColor | 仅适用双色图标。设置双色图标的主要颜色 | string (十六进制颜色) | - |  |
-
-其中我们提供了三种主题的图标，不同主题的 Icon 组件名为图标名加主题做为后缀。
-
-```bash
-import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';
-
-<StarOutlined />
-<StarFilled />
-<StarTwoTone twoToneColor="#eb2f96" />
-```
-
-### 自定义 Icon
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| component | 控制如何渲染图标，通常是一个渲染根标签为 `<svg>` 的 React 组件 | ComponentType&lt;CustomIconComponentProps> | - |  |
-| rotate | 图标旋转角度（IE9 无效） | number | - |  |
-| spin | 是否有旋转动画 | boolean | false |  |
-| style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - |  |
-
-### 关于 SVG 图标
-
-在 `3.9.0` 之后，我们使用了 SVG 图标替换了原先的 font 图标，从而带来了以下优势：
-
-- 完全离线化使用，不需要从 CDN 下载字体文件，图标不会因为网络问题呈现方块，也无需字体文件本地部署。
-- 在低端设备上 SVG 有更好的清晰度。
-- 支持多色图标。
-- 对于内建图标的更换可以提供更多 API，而不需要进行样式覆盖。
-
-更多讨论可参考：[#10353](https://github.com/ant-design/ant-design/issues/10353)。
-
-所有的图标都会以 `<svg>` 标签渲染，可以使用 `style` 和 `className` 设置图标的大小和单色图标的颜色。例如：
-
-```bash
-import { MessageOutlined } from '@ant-design/icons';
-
-<MessageOutlined style={{ fontSize: '16px', color: '#08c' }} />;
-```
-
-### 双色图标主色
-
-对于双色图标，可以通过使用 `getTwoToneColor()` 和 `setTwoToneColor(colorString)` 来全局设置图标主色。
-
-```bash
-import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons';
-
-setTwoToneColor('#eb2f96');
-getTwoToneColor(); // #eb2f96
-```
-
-### 自定义 font 图标
-
-在 `3.9.0` 之后，我们提供了一个 `createFromIconfontCN` 方法，方便开发者调用在 [iconfont.cn](http://iconfont.cn/) 上自行管理的图标。
-
-```bash
-import { createFromIconfontCN } from '@ant-design/icons';
-
-const MyIcon = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
-});
-
-ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
-```
-
-其本质上是创建了一个使用 `<use>` 标签来渲染图标的组件。
-
-options 的配置项如下：
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| extraCommonProps | 给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性 | { \[key: string]: any } | {} |  |
-| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 js 地址，`@ant-design/icons@4.1.0` 之后支持 `string[]` 类型 | string \| string\[] | - |  |
-
-在 `scriptUrl` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。
-
-见 [iconfont.cn 使用帮助](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) 查看如何生成 js 地址。
-
-### 自定义 SVG 图标
-
-如果使用 `webpack`，可以通过配置 [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) 来将 `svg` 图标作为 `React` 组件导入。`@svgr/webpack` 的 `options` 选项请参阅 [svgr 文档](https://github.com/smooth-code/svgr#options)。
-
-```bash
-// webpack.config.js
-{
-  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-  use: [
-    {
-      loader: 'babel-loader',
-    },
-    {
-      loader: '@svgr/webpack',
-      options: {
-        babel: false,
-        icon: true,
-      },
-    },
-  ],
-}
-```
-
-```bash
-import Icon from '@ant-design/icons';
-import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
-// in create-react-app:
-// import { ReactComponent as MessageSvg } from 'path/to/message.svg';
-
-ReactDOM.render(<Icon component={MessageSvg} />, mountNode);
-```
-
-`Icon` 中的 `component` 组件的接受的属性如下：
-
-| 字段 | 说明 | 类型 | 只读值 | 版本 |
-| --- | --- | --- | --- | --- |
-| className | 计算后的 `svg` 类名 | string | - |  |
-| fill | `svg` 元素填充的颜色 | string | `currentColor` |  |
-| height | `svg` 元素高度 | string \| number | `1em` |  |
-| style | 计算后的 `svg` 元素样式 | CSSProperties | - |  |
-| width | `svg` 元素宽度 | string \| number | `1em` |  |
-
-
-