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

package/components/affix/demos/basic.tsx

@@ -1,29 +0,0 @@
-/**
- * title: 基本
- * desc: 最简单的用法。
- */
-
-import React, { useState } from 'react';
-import { Affix, Button } from '@fle-ui/next';
-
-const BasicDemo = () => {
-  const [top, setTop] = useState(10);
-  const [bottom, setBottom] = useState(10);
-  return (
-    <>
-      <Affix offsetTop={top}>
-        <Button type="primary" onClick={() => setTop(top + 10)}>
-          Affix top
-        </Button>
-      </Affix>
-      <br />
-      <Affix offsetBottom={bottom}>
-        <Button type="primary" onClick={() => setBottom(bottom + 10)}>
-          Affix bottom
-        </Button>
-      </Affix>
-    </>
-  );
-};
-
-export default BasicDemo;

package/components/affix/demos/on-change.tsx

@@ -1,17 +0,0 @@
-/**
- * title: 固定状态改变的回调
- * desc: 可以获得是否固定的状态。
- */
-
-import React from 'react';
-import { Affix, Button } from 'antd';
-
-const OnChangeDemo = () => {
-  return (
-    <Affix offsetTop={120} onChange={(affixed) => console.log(affixed)}>
-      <Button>120px to affix top</Button>
-    </Affix>
-  );
-};
-
-export default OnChangeDemo;

package/components/affix/demos/target.tsx

@@ -1,22 +0,0 @@
-/**
- * title: 滚动容器
- * desc: 用 `target` 设置 `Affix` 需要监听其滚动事件的元素，默认为 `window`。
- */
-
-import React, { useState } from 'react';
-import { Affix, Button } from 'antd';
-
-const TargetDemo = () => {
-  const [container, setContainer] = useState<HTMLDivElement | null>(null);
-  return (
-    <div className="scrollable-container" ref={setContainer}>
-      <div className="background">
-        <Affix target={() => container}>
-          <Button type="primary">Fixed at the top of container</Button>
-        </Affix>
-      </div>
-    </div>
-  );
-};
-
-export default TargetDemo;

package/components/affix/index.tsx

@@ -1,15 +0,0 @@
-import React, { FC, ReactElement } from 'react';
-import { Affix as AntdAffix } from 'antd';
-import type { AffixProps as AntdAffixProps } from 'antd';
-import type { AffixState as AntdAffixState } from 'antd/es/affix';
-
-export interface AffixProps extends AntdAffixProps {}
-export interface AffixState extends AntdAffixState {}
-
-const Affix: FC<AffixProps> = (props): ReactElement => {
-  const { children, ...otherProps } = props;
-
-  return <AntdAffix {...otherProps}>{children}</AntdAffix>;
-};
-
-export default Affix;

package/components/alert/alert.md

@@ -1,101 +0,0 @@
----
-title: Alert 警告提示
-order: 0
-legacy: /alert
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# Alert 警告提示
-
-警告提示，展现需要关注的信息。
-
-## 何时使用
-
-- 当某个页面需要向用户显示警告的信息时。
-- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
-
-## 代码演示
-
-### 基本
-
-<code src="./demos/basic.tsx" />
-
-### 四种样式
-
-<code src="./demos/style.tsx" />
-
-### 可关闭的警告提示
-
-<code src="./demos/closable.tsx" />
-
-### 含有辅助性文字介绍
-
-<code src="./demos/description.tsx" />
-
-### 图标
-
-<code src="./demos/icon.tsx" />
-
-### 自定义关闭
-
-<code src="./demos/close-text.tsx" />
-
-### 顶部公告
-
-<code src="./demos/banner.tsx" iframe="350px"/>
-
-### 轮播的公告
-
-<code src="./demos/loop-banner.tsx"/>
-
-### 平滑地卸载
-
-<code src="./demos/smooth-closed.tsx"/>
-
-
-<!-- ### React 错误处理
-
-<code src="./demos/error-boundary.tsx" iframe="350px"/> -->
-### 操作
-
-<code src="./demos/action.tsx"/>
-
-## API
-
-| 参数        | 说明                                                                 | 类型                    | 默认值                                    | 版本  |
-| ----------- | -------------------------------------------------------------------- | ----------------------- | ----------------------------------------- | ----- |
-| action      | 自定义操作项                                                         | ReactNode               | -                                         | 4.9.0 |
-| afterClose  | 关闭动画结束后触发的回调函数                                         | () => void              | -                                         |       |
-| banner      | 是否用作顶部公告                                                     | boolean                 | false                                     |       |
-| closable    | 默认不显示关闭按钮                                                   | boolean                 | -                                         |       |
-| closeText   | 自定义关闭按钮                                                       | ReactNode               | -                                         |       |
-| description | 警告提示的辅助性文字介绍                                             | ReactNode               | -                                         |       |
-| icon        | 自定义图标，`showIcon` 为 true 时有效                                | ReactNode               | -                                         |       |
-| message     | 警告提示内容                                                         | ReactNode               | -                                         |       |
-| showIcon    | 是否显示辅助图标                                                     | boolean                 | false，`banner` 模式下默认值为 true       |       |
-| type        | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string                  | `info`，`banner` 模式下默认值为 `warning` |       |
-| onClose     | 关闭时触发的回调函数                                                 | (e: MouseEvent) => void | -                                         |       |
-
-### Alert.ErrorBoundary
-
-| 参数        | 说明                                         | 类型      | 默认值            | 版本 |
-| ----------- | -------------------------------------------- | --------- | ----------------- | ---- |
-| description | 自定义错误内容，如果未指定会展示报错堆栈     | ReactNode | {{ error stack }} |      |
-| message     | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }}       |      |
-
-<style>
-  #alert-basic .ant-alert {
-  margin-bottom: 16px;
-}
- .ant-alert {
-  margin-bottom: 8px;
-}
-
- .ant-alert {
-  margin-bottom: 8px;
-}
-</style>

package/components/alert/components/alert.tsx

@@ -1,13 +0,0 @@
-import React, { FC, ReactElement } from 'react';
-import { Alert as AntdAlert } from 'antd';
-import type { AlertProps as AntdAlertProps } from 'antd/es/alert';
-
-export interface AlertProps extends AntdAlertProps {}
-
-const Alert: FC<AlertProps> = (props): ReactElement => {
-  const { children, ...otherProps } = props;
-
-  return <AntdAlert {...otherProps}>{children}</AntdAlert>;
-};
-
-export default Alert;

package/components/alert/components/errorBoundary.tsx

@@ -1,13 +0,0 @@
-import React, { FC, ReactElement } from 'react';
-import { Alert as AntdAlert } from 'antd';
-export interface ErrorBoundaryProps {
-  message?: React.ReactNode;
-  description?: React.ReactNode;
-}
-
-const { ErrorBoundary: AntdErrorBoundary } = AntdAlert;
-const ErrorBoundary: FC<ErrorBoundaryProps> = (props): ReactElement => {
-  return <AntdErrorBoundary {...props} />;
-};
-
-export default ErrorBoundary;

package/components/alert/demos/action.tsx

@@ -1,66 +0,0 @@
-/**
- * title: 操作
- * desc: 可以在右上角自定义操作项。
- */
-
-import React from 'react';
-import { Alert, Button, Space } from '@fle-ui/next';
-
-const ActionDemo = () => {
-  return (
-    <>
-      <Alert
-        message="Success Tips"
-        type="success"
-        showIcon
-        action={
-          <Button size="small" type="text">
-            UNDO
-          </Button>
-        }
-        closable
-      />
-      <Alert
-        message="Error Text"
-        showIcon
-        description="Error Description Error Description Error Description Error Description"
-        type="error"
-        action={
-          <Button size="small" danger>
-            Detail
-          </Button>
-        }
-      />
-      <Alert
-        message="Warning Text"
-        type="warning"
-        action={
-          <Space>
-            <Button size="small" type="ghost">
-              Done
-            </Button>
-          </Space>
-        }
-        closable
-      />
-      <Alert
-        message="Info Text"
-        description="Info Description Info Description Info Description Info Description"
-        type="info"
-        action={
-          <Space direction="vertical">
-            <Button size="small" type="primary">
-              Accept
-            </Button>
-            <Button size="small" danger type="ghost">
-              Decline
-            </Button>
-          </Space>
-        }
-        closable
-      />
-    </>
-  );
-};
-
-export default ActionDemo;

package/components/alert/demos/banner.tsx

@@ -1,27 +0,0 @@
-/**
- * title: 顶部公告
- * desc: 页面顶部通告形式，默认有图标且 `type` 为 'warning'。
- */
-
-import React from 'react';
-import { Alert } from '@fle-ui/next';
-
-const BannerDemo = () => {
-  return (
-    <>
-      <Alert message="Warning text" banner />
-      <br />
-      <Alert
-        message="Very long warning text warning text text text text text text text"
-        banner
-        closable
-      />
-      <br />
-      <Alert showIcon={false} message="Warning text without icon" banner />
-      <br />
-      <Alert type="error" message="Error text" banner />
-    </>
-  );
-};
-
-export default BannerDemo;

package/components/alert/demos/basic.tsx

@@ -1,13 +0,0 @@
-/**
- * title: 基本
- * desc: 最简单的用法，适用于简短的警告提示。
- */
-
-import React from 'react';
-import { Alert } from '@fle-ui/next';
-
-const BasicDemo = () => {
-  return <Alert message="Success Text" type="success" />;
-};
-
-export default BasicDemo;

package/components/alert/demos/closable.tsx

@@ -1,32 +0,0 @@
-/**
- * title: 可关闭的警告提示
- * desc: 显示关闭按钮，点击可关闭警告提示。
- */
-
-import React from 'react';
-import { Alert } from '@fle-ui/next';
-
-const ClosableDemo = () => {
-  const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    console.log(e, 'I was closed.');
-  };
-  return (
-    <>
-      <Alert
-        message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
-        type="warning"
-        closable
-        onClose={onClose}
-      />
-      <Alert
-        message="Error Text"
-        description="Error Description Error Description Error Description Error Description Error Description Error Description"
-        type="error"
-        closable
-        onClose={onClose}
-      />
-    </>
-  );
-};
-
-export default ClosableDemo;

package/components/alert/demos/close-text.tsx

@@ -1,13 +0,0 @@
-/**
- * title: 自定义关闭
- * desc: 可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。
- */
-
-import React from 'react';
-import { Alert } from '@fle-ui/next';
-
-const CloseTextDemo = () => {
-  return <Alert message="Info Text" type="info" closeText="Close Now" />;
-};
-
-export default CloseTextDemo;

package/components/alert/demos/description.tsx

@@ -1,36 +0,0 @@
-/**
- * title: 含有辅助性文字介绍
- * desc: 含有辅助性文字介绍的警告提示。
- */
-
-import React from 'react';
-import { Alert } from '@fle-ui/next';
-
-const DescriptionDemo = () => {
-  return (
-    <>
-      <Alert
-        message="Success Text"
-        description="Success Description Success Description Success Description"
-        type="success"
-      />
-      <Alert
-        message="Info Text"
-        description="Info Description Info Description Info Description Info Description"
-        type="info"
-      />
-      <Alert
-        message="Warning Text"
-        description="Warning Description Warning Description Warning Description Warning Description"
-        type="warning"
-      />
-      <Alert
-        message="Error Text"
-        description="Error Description Error Description Error Description Error Description"
-        type="error"
-      />
-    </>
-  );
-};
-
-export default DescriptionDemo;

package/components/alert/demos/error-boundary.tsx

@@ -1,33 +0,0 @@
-/**
- * title: React 错误处理
- * desc: 友好的 [React 错误处理](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html) 包裹组件。
- */
-
-import React, { useState } from 'react';
-import { Button, Alert } from '@fle-ui/next';
-
-const ErrorBoundaryDemo = () => {
-  const { ErrorBoundary } = Alert;
-  const ThrowError: React.FC = () => {
-    const [error, setError] = useState<Error>();
-    const onClick = () => {
-      setError(new Error('An Uncaught Error'));
-    };
-
-    if (error) {
-      throw error;
-    }
-    return (
-      <Button danger onClick={onClick}>
-        Click me to throw a error
-      </Button>
-    );
-  };
-  return (
-    <ErrorBoundary>
-      <ThrowError />
-    </ErrorBoundary>
-  );
-};
-
-export default ErrorBoundaryDemo;