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

package/components/badge/components/badge.tsx

@@ -1,13 +0,0 @@
-import React, { FC } from 'react';
-import { Badge as AntdBadge } from 'antd';
-import type { BadgeProps as AntdBadgeProps } from 'antd/es/badge';
-
-export interface BadgeProps extends AntdBadgeProps {}
-
-const Badge: FC<BadgeProps> = (props) => {
-  const { children, ...otherProps } = props;
-
-  return <AntdBadge {...otherProps}>{children}</AntdBadge>;
-};
-
-export default Badge;

package/components/badge/components/ribbon.tsx

@@ -1,15 +0,0 @@
-import React, { FC } from 'react';
-import { Badge as AntdBadge } from 'antd';
-import type { RibbonProps as AntdRibbonProps } from 'antd/es/badge/Ribbon';
-
-const { Ribbon: AntdRibbon } = AntdBadge;
-
-export interface RibbonProps extends AntdRibbonProps {}
-
-const Ribbon: FC<RibbonProps> = (props) => {
-  const { children, ...otherProps } = props;
-
-  return <AntdRibbon {...otherProps}>{children}</AntdRibbon>;
-};
-
-export default Ribbon;

package/components/badge/demos/basic.tsx

@@ -1,26 +0,0 @@
-/**
- * title: 带徽标的头像
- * desc: 通常用于消息提示。
- */
-
-import React from 'react';
-import { Badge, Avatar } from '@fle-ui/next';
-import { ClockCircleOutlined } from '@ant-design/icons';
-
-const Demo = () => {
-  return (
-    <>
-      <Badge count={5}>
-        <Avatar shape="square" size="large" />
-      </Badge>
-      <Badge count={0} showZero>
-        <Avatar shape="square" size="large" />
-      </Badge>
-      <Badge count={<ClockCircleOutlined style={{ color: '#f5222d' }} />}>
-        <Avatar shape="square" size="large" />
-      </Badge>
-    </>
-  );
-};
-
-export default Demo;

package/components/badge/demos/change.tsx

@@ -1,68 +0,0 @@
-/**
- * title: 动态
- * desc: 展示动态变化的效果。
- */
-
-import React, { useState } from 'react';
-import { Badge, Avatar } from '@fle-ui/next';
-import { Switch, Divider, Button } from 'antd';
-import {
-  MinusOutlined,
-  PlusOutlined,
-  QuestionOutlined,
-} from '@ant-design/icons';
-
-const ButtonGroup = Button.Group;
-
-const Demo = () => {
-  const [count, setCount] = useState<number>(5);
-  const [show, setShow] = useState<boolean>(true);
-
-  const increase = () => {
-    setCount(count + 1);
-  };
-
-  const decline = () => {
-    let num = count - 1;
-
-    if (num < 0) {
-      num = 0;
-    }
-    setCount(num);
-  };
-
-  const random = () => {
-    const count = Math.floor(Math.random() * 100);
-    setCount(count);
-  };
-
-  const onChange = (show: boolean) => {
-    setShow(show);
-  };
-
-  return (
-    <>
-      <Badge count={count}>
-        <Avatar shape="square" size="large" />
-      </Badge>
-      <ButtonGroup>
-        <Button onClick={decline}>
-          <MinusOutlined />
-        </Button>
-        <Button onClick={increase}>
-          <PlusOutlined />
-        </Button>
-        <Button onClick={random}>
-          <QuestionOutlined />
-        </Button>
-      </ButtonGroup>
-      <Divider />
-      <Badge dot={show}>
-        <Avatar shape="square" size="large" />
-      </Badge>
-      <Switch onChange={onChange} checked={show} />
-    </>
-  );
-};
-
-export default Demo;

package/components/badge/demos/colorful.tsx

@@ -1,51 +0,0 @@
-/**
- * title: 多彩徽标
- * desc: 我们添加了多种预设色彩的徽标样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。
- */
-
-import React from 'react';
-import { Badge } from '@fle-ui/next';
-import { Divider } from 'antd';
-
-const Demo = () => {
-  const colors = [
-    'pink',
-    'red',
-    'yellow',
-    'orange',
-    'cyan',
-    'green',
-    'blue',
-    'purple',
-    'geekblue',
-    'magenta',
-    'volcano',
-    'gold',
-    'lime',
-  ];
-
-  return (
-    <>
-      <Divider orientation="left">Presets</Divider>
-      <div>
-        {colors.map((color) => (
-          <div key={color}>
-            <Badge color={color} text={color} />
-          </div>
-        ))}
-      </div>
-      <Divider orientation="left">Custom</Divider>
-      <>
-        <Badge color="#f50" text="#f50" />
-        <br />
-        <Badge color="#2db7f5" text="#2db7f5" />
-        <br />
-        <Badge color="#87d068" text="#87d068" />
-        <br />
-        <Badge color="#108ee9" text="#108ee9" />
-      </>
-    </>
-  );
-};
-
-export default Demo;

package/components/badge/demos/dot.tsx

@@ -1,23 +0,0 @@
-/**
- * title: 讨嫌的小红点
- * desc: 没有具体的数字。
- */
-
-import React from 'react';
-import { Badge } from '@fle-ui/next';
-import { NotificationOutlined } from '@ant-design/icons';
-
-const Demo = () => {
-  return (
-    <>
-      <Badge dot>
-        <NotificationOutlined style={{ fontSize: 16 }} />
-      </Badge>
-      <Badge dot>
-        <a href="#">Link something</a>
-      </Badge>
-    </>
-  );
-};
-
-export default Demo;

package/components/badge/demos/link.tsx

@@ -1,19 +0,0 @@
-/**
- * title: 可点击
- * desc: 用 a 标签进行包裹即可。
- */
-
-import React from 'react';
-import { Badge, Avatar } from '@fle-ui/next';
-
-const Demo = () => {
-  return (
-    <a href="#">
-      <Badge count={5}>
-        <Avatar shape="square" size="large" />
-      </Badge>
-    </a>
-  );
-};
-
-export default Demo;

package/components/badge/demos/no-wrapper.tsx

@@ -1,30 +0,0 @@
-/**
- * title: 独立使用
- * desc: 不包裹任何元素即是独立使用，可自定样式展现。<br/> > 在右上角的 badge 则限定为红色。
- */
-
-import React, { useState } from 'react';
-import { Badge } from '@fle-ui/next';
-import { Space, Switch } from 'antd';
-import { ClockCircleOutlined } from '@ant-design/icons';
-
-const Demo = () => {
-  const [show, setShow] = useState(true);
-
-  return (
-    <Space>
-      <Switch checked={show} onChange={() => setShow(!show)} />
-      <Badge count={show ? 25 : 0} />
-      <Badge
-        count={show ? <ClockCircleOutlined style={{ color: '#f5222d' }} /> : 0}
-      />
-      <Badge
-        className="site-badge-count-109"
-        count={show ? 109 : 0}
-        style={{ backgroundColor: '#52c41a' }}
-      />
-    </Space>
-  );
-};
-
-export default Demo;

package/components/badge/demos/offset.tsx

@@ -1,19 +0,0 @@
-/**
- * title: 自定义位置偏移
- * desc: 设置状态点的位置偏移，格式为 `[left, top]`，表示状态点距默认位置左侧、上方的偏移量。
- */
-
-import React from 'react';
-import { Badge, Avatar } from '@fle-ui/next';
-
-const Demo = () => {
-  return (
-    <>
-      <Badge count={5} offset={[10, 10]}>
-        <Avatar shape="square" size="large" />
-      </Badge>
-    </>
-  );
-};
-
-export default Demo;

package/components/badge/demos/overflow.tsx

@@ -1,28 +0,0 @@
-/**
- * title: 封顶数字
- * desc: 超过 `overflowCount` 的会显示为 `${overflowCount}+`，默认的 `overflowCount` 为 `99`。
- */
-
-import React from 'react';
-import { Badge, Avatar } from '@fle-ui/next';
-
-const BadgeDemo = () => {
-  return (
-    <>
-      <Badge count={99}>
-        <Avatar shape="square" size="large" />
-      </Badge>
-      <Badge count={100}>
-        <Avatar shape="square" size="large" />
-      </Badge>
-      <Badge count={99} overflowCount={10}>
-        <Avatar shape="square" size="large" />
-      </Badge>
-      <Badge count={1000} overflowCount={999}>
-        <Avatar shape="square" size="large" />
-      </Badge>
-    </>
-  );
-};
-
-export default BadgeDemo;

package/components/badge/demos/ribbbon.tsx

@@ -1,57 +0,0 @@
-/**
- * title: 缎带
- * desc: 使用缎带型的徽标。
- */
-
-import React from 'react';
-import { Badge, Avatar } from '@fle-ui/next';
-import { Card } from 'antd';
-
-const Demo = () => {
-  return (
-    <>
-      <Badge.Ribbon text="Hippies">
-        <Card title="Pushes open the window" size="small">
-          and raises the spyglass.
-        </Card>
-      </Badge.Ribbon>
-      <Badge.Ribbon text="Hippies" color="pink">
-        <Card title="Pushes open the window" size="small">
-          and raises the spyglass.
-        </Card>
-      </Badge.Ribbon>
-      <Badge.Ribbon text="Hippies" color="red">
-        <Card title="Pushes open the window" size="small">
-          and raises the spyglass.
-        </Card>
-      </Badge.Ribbon>
-      <Badge.Ribbon text="Hippies" color="cyan">
-        <Card title="Pushes open the window" size="small">
-          and raises the spyglass.
-        </Card>
-      </Badge.Ribbon>
-      <Badge.Ribbon text="Hippies" color="green">
-        <Card title="Pushes open the window" size="small">
-          and raises the spyglass.
-        </Card>
-      </Badge.Ribbon>
-      <Badge.Ribbon text="Hippies" color="purple">
-        <Card title="Pushes open the window" size="small">
-          and raises the spyglass.
-        </Card>
-      </Badge.Ribbon>
-      <Badge.Ribbon text="Hippies" color="volcano">
-        <Card title="Pushes open the window" size="small">
-          and raises the spyglass.
-        </Card>
-      </Badge.Ribbon>
-      <Badge.Ribbon text="Hippies" color="magenta">
-        <Card title="Pushes open the window" size="small">
-          and raises the spyglass.
-        </Card>
-      </Badge.Ribbon>
-    </>
-  );
-};
-
-export default Demo;

package/components/badge/demos/size.tsx

@@ -1,22 +0,0 @@
-/**
- * title: 大小
- * desc: 可以设置有数字徽标的大小。
- */
-
-import React from 'react';
-import { Badge, Avatar } from '@fle-ui/next';
-
-const Demo = () => {
-  return (
-    <>
-      <Badge size="default" count={5}>
-        <Avatar shape="square" size="large" />
-      </Badge>
-      <Badge size="small" count={5}>
-        <Avatar shape="square" size="large" />
-      </Badge>
-    </>
-  );
-};
-
-export default Demo;

package/components/badge/demos/status.tsx

@@ -1,31 +0,0 @@
-/**
- * title: 状态点
- * desc: 用于表示状态的小圆点。
- */
-
-import React from 'react';
-import { Badge } from '@fle-ui/next';
-
-const Demo = () => {
-  return (
-    <>
-      <Badge status="success" />
-      <Badge status="error" />
-      <Badge status="default" />
-      <Badge status="processing" />
-      <Badge status="warning" />
-      <br />
-      <Badge status="success" text="Success" />
-      <br />
-      <Badge status="error" text="Error" />
-      <br />
-      <Badge status="default" text="Default" />
-      <br />
-      <Badge status="processing" text="Processing" />
-      <br />
-      <Badge status="warning" text="Warning" />
-    </>
-  );
-};
-
-export default Demo;

package/components/badge/index.tsx

@@ -1,23 +0,0 @@
-import React, { FC } from 'react';
-import { Badge as AntdBadge } from 'antd';
-import Ribbon from './components/ribbon';
-
-import type { BadgeProps as AntdBadgeProps } from 'antd/es/badge';
-import type { RibbonProps } from './components/ribbon';
-
-export interface BadgeProps extends AntdBadgeProps {}
-export type { RibbonProps };
-
-interface CompoundedComponent extends FC<BadgeProps> {
-  Ribbon: typeof Ribbon;
-}
-
-const Badge: CompoundedComponent = (props) => {
-  const { children, ...otherProps } = props;
-
-  return <AntdBadge {...otherProps}>{children}</AntdBadge>;
-};
-
-Badge.Ribbon = Ribbon;
-
-export default Badge;