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

package/components/steps/demos/icon.tsx

@@ -1,27 +0,0 @@
-/**
- * title: 带图标的步骤条
- * desc: 通过设置 Steps.Step 的 icon 属性，可以启用自定义图标。
- */
-
-import React from 'react';
-import { Steps } from '@fle-ui/next';
-import {
-  UserOutlined,
-  SolutionOutlined,
-  LoadingOutlined,
-  SmileOutlined,
-} from '@ant-design/icons';
-
-const IconDemo = () => {
-  const { Step } = Steps;
-  return (
-    <Steps>
-      <Step status="finish" title="Login" icon={<UserOutlined />} />
-      <Step status="finish" title="Verification" icon={<SolutionOutlined />} />
-      <Step status="process" title="Pay" icon={<LoadingOutlined />} />
-      <Step status="wait" title="Done" icon={<SmileOutlined />} />
-    </Steps>
-  );
-};
-
-export default IconDemo;

package/components/steps/demos/linesmall.tsx

@@ -1,19 +0,0 @@
-/**
- * title: 竖直方向的小型步骤条
- * desc: 简单的竖直方向的小型步骤条。
- */
-
-import React from 'react';
-import { Steps } from '@fle-ui/next';
-
-const LineSmallDemo = () => {
-  const { Step } = Steps;
-  return (
-    <Steps direction="vertical" size="small" current={1}>
-      <Step title="Finished" description="This is a description." />
-      <Step title="In Progress" description="This is a description." />
-      <Step title="Waiting" description="This is a description." />
-    </Steps>
-  );
-};
-export default LineSmallDemo;

package/components/steps/demos/lineway.tsx

@@ -1,20 +0,0 @@
-/**
- * title: 竖直方向的步骤条
- * desc: 简单的竖直方向的步骤条。
- */
-
-import React from 'react';
-import { Steps } from '@fle-ui/next';
-
-const LineWayDemo = () => {
-  const { Step } = Steps;
-  return (
-    <Steps direction="vertical" current={1}>
-      <Step title="Finished" description="This is a description." />
-      <Step title="In Progress" description="This is a description." />
-      <Step title="Waiting" description="This is a description." />
-    </Steps>
-  );
-};
-
-export default LineWayDemo;

package/components/steps/demos/mini.tsx

@@ -1,20 +0,0 @@
-/**
- * title: 迷你版
- * desc: 迷你版的步骤条，通过设置 <Steps size="small"> 启用.
- */
-
-import React from 'react';
-import { Steps } from '@fle-ui/next';
-
-const MiniDemo = () => {
-  const { Step } = Steps;
-  return (
-    <Steps size="small" current={1}>
-      <Step title="Finished" />
-      <Step title="In Progress" />
-      <Step title="Waiting" />
-    </Steps>
-  );
-};
-
-export default MiniDemo;

package/components/steps/demos/nav.tsx

@@ -1,71 +0,0 @@
-/**
- * title: 导航步骤
- * desc: 导航类型的步骤条。
- */
-
-import React, { useState } from 'react';
-import { Steps } from '@fle-ui/next';
-
-const NavDemo = () => {
-  const { Step } = Steps;
-  const [current, setCurrent] = useState(0);
-  const onChange = (current: number) => {
-    console.log('onChange:', current);
-    setCurrent(current);
-  };
-  return (
-    <>
-      <Steps
-        type="navigation"
-        size="small"
-        current={current}
-        onChange={onChange}
-        className="site-navigation-steps"
-      >
-        <Step
-          title="Step 1"
-          subTitle="00:00:05"
-          status="finish"
-          description="This is a description."
-        />
-        <Step
-          title="Step 2"
-          subTitle="00:01:02"
-          status="process"
-          description="This is a description."
-        />
-        <Step
-          title="Step 3"
-          subTitle="waiting for longlong time"
-          status="wait"
-          description="This is a description."
-        />
-      </Steps>
-      <Steps
-        type="navigation"
-        current={current}
-        onChange={onChange}
-        className="site-navigation-steps"
-      >
-        <Step status="finish" title="Step 1" />
-        <Step status="process" title="Step 2" />
-        <Step status="wait" title="Step 3" />
-        <Step status="wait" title="Step 4" />
-      </Steps>
-      <Steps
-        type="navigation"
-        size="small"
-        current={current}
-        onChange={onChange}
-        className="site-navigation-steps"
-      >
-        <Step status="finish" title="finish 1" />
-        <Step status="finish" title="finish 2" />
-        <Step status="process" title="current process" />
-        <Step status="wait" title="wait" disabled />
-      </Steps>
-    </>
-  );
-};
-
-export default NavDemo;

package/components/steps/demos/progress.tsx

@@ -1,24 +0,0 @@
-/**
- * title: 带有进度的步骤
- * desc: 带有进度的步骤。
- */
-
-import React from 'react';
-import { Steps } from '@fle-ui/next';
-
-const ProgressDemo = () => {
-  const { Step } = Steps;
-  return (
-    <Steps current={1} percent={60}>
-      <Step title="Finished" description="This is a description." />
-      <Step
-        title="In Progress"
-        subTitle="Left 00:00:08"
-        description="This is a description."
-      />
-      <Step title="Waiting" description="This is a description." />
-    </Steps>
-  );
-};
-
-export default ProgressDemo;

package/components/steps/demos/tab.tsx

@@ -1,67 +0,0 @@
-/**
- * title: 步骤切换
- * desc: 通常配合内容及按钮使用，表示一个流程的处理进度。
- */
-
-import React from 'react';
-import { Steps } from '@fle-ui/next';
-import { Button, message } from 'antd';
-
-const steps = [
-  {
-    title: 'First',
-    content: 'First-content',
-  },
-  {
-    title: 'Second',
-    content: 'Second-content',
-  },
-  {
-    title: 'Last',
-    content: 'Last-content',
-  },
-];
-const TabDemo = () => {
-  const { Step } = Steps;
-  const [current, setCurrent] = React.useState(0);
-
-  const next = () => {
-    setCurrent(current + 1);
-  };
-
-  const prev = () => {
-    setCurrent(current - 1);
-  };
-  return (
-    <>
-      <Steps current={current}>
-        {steps.map((item) => (
-          <Step key={item.title} title={item.title} />
-        ))}
-      </Steps>
-      <div className="steps-content">{steps[current].content}</div>
-      <div className="steps-action">
-        {current < steps.length - 1 && (
-          <Button type="primary" onClick={() => next()}>
-            Next
-          </Button>
-        )}
-        {current === steps.length - 1 && (
-          <Button
-            type="primary"
-            onClick={() => message.success('Processing complete!')}
-          >
-            Done
-          </Button>
-        )}
-        {current > 0 && (
-          <Button style={{ margin: '0 8px' }} onClick={() => prev()}>
-            Previous
-          </Button>
-        )}
-      </div>
-    </>
-  );
-};
-
-export default TabDemo;

package/components/steps/index.tsx

@@ -1,13 +0,0 @@
-import InternalSteps, { StepsProps } from './components/steps';
-import { StepProps } from './components/step';
-import React from 'react';
-import RcSteps from 'rc-steps';
-interface StepsType extends React.FC<StepsProps> {
-  Step: typeof RcSteps.Step;
-}
-
-const Steps: StepsType = InternalSteps as StepsType;
-Steps.Step = RcSteps.Step;
-export type { StepsProps, StepProps };
-
-export default Steps;

package/components/steps/steps.md

@@ -1,126 +0,0 @@
----
-title: Steps 步骤条
-order: 0
-legacy: /steps
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# Steps 步骤条
-
-引导用户按照流程完成任务的导航条。
-
-## 何时使用
-
-当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。
-
-## 代码演示
-
-### 基本用法
-
-<code  src="./demos/basic.tsx"/>
-
-### 迷你版
-
-<code  src="./demos/mini.tsx"/>
-
-### 带图标的步骤条
-
-<code  src="./demos/icon.tsx"/>
-
-### 步骤切换
-
-<code  src="./demos/tab.tsx"/>
-
-### 竖直方向的步骤条
-
-<code  src="./demos/lineway.tsx"/>
-
-### 竖直方向的小型步骤条
-
-<code  src="./demos/linesmall.tsx"/>
-
-### 步骤运行错误
-
-<code  src="./demos/err.tsx"/>
-
-### 点状步骤条
-
-<code  src="./demos/dot.tsx"/>
-
-### 自定义点状步骤条
-
-<code  src="./demos/customdot.tsx"/>
-
-### 可点击
-
-<code  src="./demos/click.tsx"/>
-
-### 导航步骤
-
-<code  src="./demos/nav.tsx"/>
-
-### 带有进度的步骤
-
-<code  src="./demos/progress.tsx"/>
-
-## API
-
-```bash
-<Steps>
-  <Step title="第一步" />
-  <Step title="第二步" />
-  <Step title="第三步" />
-</Steps>
-```
-
-### Steps
-
-整体步骤条。
-
-| 参数           | 说明                                                                          | 类型                                                                   | 默认值       | 版本  |
-| -------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------ | ----- |
-| className      | 步骤条类名                                                                    | string                                                                 | -            |       |
-| current        | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number                                                                 | 0            |       |
-| direction      | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向      | string                                                                 | `horizontal` |       |
-| initial        | 起始序号，从 0 开始记数                                                       | number                                                                 | 0            |       |
-| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选 `vertical` 放图标下方              | string                                                                 | `horizontal` |       |
-| percent        | 当前 `process` 步骤显示的进度条进度（只对基本类型的 Steps 生效）              | number                                                                 | -            | 4.5.0 |
-| progressDot    | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为 `vertical`       | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false        |       |
-| responsive     | 当屏幕宽度小于 `532px` 时自动变为垂直模式                                     | boolean                                                                | true         |       |
-| size           | 指定大小，目前支持普通（`default`）和迷你（`small`）                          | string                                                                 | `default`    |       |
-| status         | 指定当前步骤的状态，可选 `wait` `process` `finish` `error`                    | string                                                                 | `process`    |       |
-| type           | 步骤条类型，有 `default` 和 `navigation` 两种                                 | string                                                                 | `default`    |       |
-| onChange       | 点击切换步骤时触发                                                            | (current) => void                                                      | -            |       |
-
-### Steps.Step
-
-步骤条内的每一个步骤。
-
-| 参数        | 说明                                                                                                          | 类型      | 默认值 | 版本 |
-| ----------- | ------------------------------------------------------------------------------------------------------------- | --------- | ------ | ---- |
-| description | 步骤的详情描述，可选                                                                                          | ReactNode | -      |      |
-| disabled    | 禁用点击                                                                                                      | boolean   | false  |      |
-| icon        | 步骤图标的类型，可选                                                                                          | ReactNode | -      |      |
-| status      | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string    | `wait` |      |
-| subTitle    | 子标题                                                                                                        | ReactNode | -      |      |
-| title       | 标题                                                                                                          | ReactNode | -      |      |
-
-<style>
-  .steps-content {
-  min-height: 200px;
-  margin-top: 16px;
-  padding-top: 80px;
-  text-align: center;
-  background-color: #fafafa;
-  border: 1px dashed #e9e9e9;
-  border-radius: 2px;
-}
-
-.steps-action {
-  margin-top: 24px;
-}
-</style>

package/components/style/index.less

@@ -1,2 +0,0 @@
-@import 'antd/dist/antd.less';
-@import './theme';

package/components/style/theme.less

@@ -1,36 +0,0 @@
-@ant-prefix: ant;
-
-@primary-color: #2c68ff;
-@info-color: @primary-color;
-@success-color: #36c626;
-@warning-color: #ffab00;
-@error-color: #f42d2d;
-
-@heading-color: #262626;
-@text-color: #4c4c4c;
-@text-color-secondary: #a9a9a9;
-
-@border-color-split: #eeeeee;
-
-@border-radius-base: 4px;
-@border-color-base: #d2d2d2;
-@disabled-color: @text-color-secondary;
-@disabled-bg: #f1f1f1;
-
-@modal-header-bg: #2c68ff;
-@modal-heading-color: #ffffff;
-@modal-close-color: #ffffff;
-@modal-close-color-hover: #f2f2f2;
-@modal-header-padding: '13px 20px';
-@modal-body-padding: '20px';
-@modal-confirm-body-padding: 28px 28px 20px;
-@modal-header-close-size: '49px';
-
-@pagination-item-bg-active: @primary-color;
-@pagination-item-color-active: #ffffff;
-@pagination-font-weight-active: 400;
-@pagination-ellipsis-color: #d2d2d2;
-
-@table-header-cell-split-color: @border-color-split;
-
-@divider-color: @border-color-split;

package/components/switch/demos/basic.tsx

@@ -1,17 +0,0 @@
-/**
- * title: 基本使用
- * desc: 最简单的用法。
- */
-
-import React from 'react';
-import { Switch } from '@fle-ui/next';
-
-const Demo = () => {
-  const onChange = (checked: boolean) => {
-    console.log(`switch to ${checked}`);
-  };
-
-  return <Switch defaultChecked onChange={onChange} />;
-};
-
-export default Demo;