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

package/components/card/demos/preload.tsx

@@ -1,56 +0,0 @@
-/**
- * title: 预加载的卡片
- * desc: 数据读入前会有文本块样式。
- */
-
-import React, { useState } from 'react';
-import { Skeleton, Switch, Card, Avatar } from 'antd';
-import {
-  EditOutlined,
-  EllipsisOutlined,
-  SettingOutlined,
-} from '@ant-design/icons';
-
-const PreloadDemo = () => {
-  const { Meta } = Card;
-  const [loading, setLoading] = useState(true);
-  const onChange = (checked: boolean) => {
-    setLoading(!checked);
-  };
-  return (
-    <>
-      <Switch checked={loading} onChange={onChange} />
-
-      <Card style={{ width: 300, marginTop: 16 }} loading={loading}>
-        <Meta
-          avatar={
-            <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
-          }
-          title="Card title"
-          description="This is the description"
-        />
-      </Card>
-
-      <Card
-        style={{ width: 300, marginTop: 16 }}
-        actions={[
-          <SettingOutlined key="setting" />,
-          <EditOutlined key="edit" />,
-          <EllipsisOutlined key="ellipsis" />,
-        ]}
-      >
-        <Skeleton loading={loading} avatar active>
-          <Meta
-            avatar={
-              <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
-            }
-            title="Card title"
-            description="This is the description"
-          />
-        </Skeleton>
-      </Card>
-    </>
-  );
-};
-
-export default PreloadDemo;

package/components/card/demos/tab.tsx

@@ -1,90 +0,0 @@
-/**
- * title: 带页签的卡片
- * desc: 可承载更多内容。
- */
-
-import React, { useState } from 'react';
-import { Card } from '@fle-ui/next';
-interface keyType {
-  [key: string]: any;
-}
-const TabDemo = () => {
-  let [key, setKey] = useState<string>('tab1');
-  let [noTitleKey, setNoTitleKey] = useState<string>('app');
-  const tabList = [
-    {
-      key: 'tab1',
-      tab: 'tab1',
-    },
-    {
-      key: 'tab2',
-      tab: 'tab2',
-    },
-  ];
-
-  const contentList: keyType = {
-    tab1: <p>content1</p>,
-    tab2: <p>content2</p>,
-  };
-
-  const tabListNoTitle = [
-    {
-      key: 'article',
-      tab: 'article',
-    },
-    {
-      key: 'app',
-      tab: 'app',
-    },
-    {
-      key: 'project',
-      tab: 'project',
-    },
-  ];
-
-  const contentListNoTitle: keyType = {
-    article: <p>article content</p>,
-    app: <p>app content</p>,
-    project: <p>project content</p>,
-  };
-
-  const onTabChange = (key: string, type: string) => {
-    console.log(key, type);
-    if (type === 'key') {
-      setKey(key);
-    } else {
-      setNoTitleKey(key);
-    }
-  };
-  return (
-    <>
-      <Card
-        style={{ width: '100%' }}
-        title="Card title"
-        extra={<a href="#">More</a>}
-        tabList={tabList}
-        activeTabKey={key}
-        onTabChange={(key) => {
-          onTabChange(key, 'key');
-        }}
-      >
-        {contentList[key]}
-      </Card>
-      <br />
-      <br />
-      <Card
-        style={{ width: '100%' }}
-        tabList={tabListNoTitle}
-        activeTabKey={noTitleKey}
-        tabBarExtraContent={<a href="#">More</a>}
-        onTabChange={(key) => {
-          onTabChange(key, 'noTitleKey');
-        }}
-      >
-        {contentListNoTitle[noTitleKey]}
-      </Card>
-    </>
-  );
-};
-
-export default TabDemo;

package/components/card/index.tsx

@@ -1,17 +0,0 @@
-import InternalCard, { CardProps } from './components/card';
-import Grid, { CardGridProps } from './components/grid';
-import Meta, { CardMetaProps } from './components/meta';
-
-export interface CardInterface extends React.FC<CardProps> {
-  Grid: typeof Grid;
-  Meta: typeof Meta;
-}
-
-const Card = InternalCard as CardInterface;
-
-Card.Grid = Grid;
-Card.Meta = Meta;
-
-export type { CardProps, CardGridProps, CardMetaProps };
-
-export default Card;

package/components/carousel/carousel.md

@@ -1,65 +0,0 @@
----
-title: Carousel 走马灯
-order: 0
-legacy: /carousel
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-旋转木马，一组轮播的区域。
-
-## 何时使用
-
-- 当有一组平级的内容。
-- 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
-- 常用于一组图片或卡片轮播。
-
-
-## 代码演示
-
-### 基本
-
-<code src="./demos/basic.tsx" />
-
-### 位置
-
-<code src="./demos/position.tsx" />
-
-### 自动切换
-
-<code src="./demos/autoplay.tsx" />
-
-### 渐显
-
-<code src="./demos/fade.tsx" />
-
-## API
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| autoplay | 是否自动切换 | boolean | false |  |
-| dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | `bottom` |  |
-| dots | 是否显示面板指示点，如果为 `object` 则同时可以指定 `dotsClass` 或者 | boolean \| { className?: string } | true |  |
-| easing | 动画效果 | string | `linear` |  |
-| effect | 动画效果函数 | `scrollx` \| `fade` | `scrollx` |  |
-| afterChange | 切换面板的回调 | function(current) | - |  |
-| beforeChange | 切换面板的回调 | function(from, to) | - |  |
-
-## 方法
-
-| 名称 | 描述 |
-| --- | --- |
-| goTo(slideNumber, dontAnimate) | 切换到指定面板, dontAnimate = true 时，不使用动画 |
-| next() | 切换到下一面板 |
-| prev() | 切换到上一面板 |
-
-更多 API 可参考：<https://react-slick.neostack.com/docs/api>
-
-## FAQ
-
-### 如何自定义箭头？
-
-可参考 [#12479](https://github.com/ant-design/ant-design/issues/12479)。

package/components/carousel/demos/autoplay.tsx

@@ -1,35 +0,0 @@
-/**
- * title: 自动切换
- * desc: 定时切换下一张。
- */
-
-import React from 'react';
-import { Carousel } from '@fle-ui/next';
-
-const AutoplayDemo = () => {
-  const contentStyle: object = {
-    height: '160px',
-    color: '#fff',
-    lineHeight: '160px',
-    textAlign: 'center',
-    background: '#364d79',
-  };
-  return (
-    <Carousel autoplay>
-      <div>
-        <h3 style={contentStyle}>1</h3>
-      </div>
-      <div>
-        <h3 style={contentStyle}>2</h3>
-      </div>
-      <div>
-        <h3 style={contentStyle}>3</h3>
-      </div>
-      <div>
-        <h3 style={contentStyle}>4</h3>
-      </div>
-    </Carousel>
-  );
-};
-
-export default AutoplayDemo;

package/components/carousel/demos/basic.tsx

@@ -1,39 +0,0 @@
-/**
- * title: 基本
- * desc: 最简单的用法。
- */
-
-import React from 'react';
-import { Carousel } from '@fle-ui/next';
-
-const BasicDemo = () => {
-  const onChange = (currentSlide: any) => {
-    console.log(currentSlide);
-  };
-
-  const contentStyle: object = {
-    height: '160px',
-    color: '#fff',
-    lineHeight: '160px',
-    textAlign: 'center',
-    background: '#364d79',
-  };
-  return (
-    <Carousel afterChange={onChange}>
-      <div>
-        <h3 style={contentStyle}>1</h3>
-      </div>
-      <div>
-        <h3 style={contentStyle}>2</h3>
-      </div>
-      <div>
-        <h3 style={contentStyle}>3</h3>
-      </div>
-      <div>
-        <h3 style={contentStyle}>4</h3>
-      </div>
-    </Carousel>
-  );
-};
-
-export default BasicDemo;

package/components/carousel/demos/fade.tsx

@@ -1,35 +0,0 @@
-/**
- * title: 渐显
- * desc: 切换效果为渐显。
- */
-
-import React from 'react';
-import { Carousel } from '@fle-ui/next';
-
-const FadeDemo = () => {
-  const contentStyle: object = {
-    height: '160px',
-    color: '#fff',
-    lineHeight: '160px',
-    textAlign: 'center',
-    background: '#364d79',
-  };
-  return (
-    <Carousel effect="fade">
-      <div>
-        <h3 style={contentStyle}>1</h3>
-      </div>
-      <div>
-        <h3 style={contentStyle}>2</h3>
-      </div>
-      <div>
-        <h3 style={contentStyle}>3</h3>
-      </div>
-      <div>
-        <h3 style={contentStyle}>4</h3>
-      </div>
-    </Carousel>
-  );
-};
-
-export default FadeDemo;

package/components/carousel/demos/position.tsx

@@ -1,52 +0,0 @@
-/**
- * title: 位置
- * desc: 位置有 4 个方向。
- */
-
-import React from 'react';
-import { Carousel, Radio } from '@fle-ui/next';
-
-const PositionDemo = () => {
-  const [dotPosition, setDotPosition] = React.useState<any>('top');
-
-  const handlePositionChange = ({ target: { value } }: any) => {
-    setDotPosition(value);
-  };
-  const contentStyle: object = {
-    height: '160px',
-    color: '#fff',
-    lineHeight: '160px',
-    textAlign: 'center',
-    background: '#364d79',
-  };
-  return (
-    <>
-      <Radio.Group
-        onChange={handlePositionChange}
-        value={dotPosition}
-        style={{ marginBottom: 8 }}
-      >
-        <Radio.Button value="top">Top</Radio.Button>
-        <Radio.Button value="bottom">Bottom</Radio.Button>
-        <Radio.Button value="left">Left</Radio.Button>
-        <Radio.Button value="right">Right</Radio.Button>
-      </Radio.Group>
-      <Carousel dotPosition={dotPosition}>
-        <div>
-          <h3 style={contentStyle}>1</h3>
-        </div>
-        <div>
-          <h3 style={contentStyle}>2</h3>
-        </div>
-        <div>
-          <h3 style={contentStyle}>3</h3>
-        </div>
-        <div>
-          <h3 style={contentStyle}>4</h3>
-        </div>
-      </Carousel>
-    </>
-  );
-};
-
-export default PositionDemo;

package/components/carousel/index.tsx

@@ -1,21 +0,0 @@
-import React, { FC, forwardRef } from 'react';
-import { Carousel as AntdCarousel } from 'antd';
-import type {
-  CarouselProps as AntdCarouselProps,
-  CarouselRef as AntdCarouselRef,
-} from 'antd/es/carousel';
-
-export interface CarouselProps extends AntdCarouselProps {}
-export interface CarouselRef extends AntdCarouselRef {}
-
-const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
-  const { children, ...otherProps } = props;
-
-  return (
-    <AntdCarousel {...otherProps} ref={ref}>
-      {children}
-    </AntdCarousel>
-  );
-});
-
-export default Carousel;

package/components/cascader/cascader.md

@@ -1,138 +0,0 @@
----
-title: Cascader 级联选择
-order: 0
-legacy: /cascader
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# Cascader 级联选择
-
-级联选择框。
-
-## 何时使用
-
-- 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
-- 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
-- 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。
-
-## 代码演示
-
-### 基本
-
-<code src="./demos/basic.tsx"/>
-
-### 默认值
-
-<code src="./demos/defaultValue.tsx"/>
-
-### 可以自定义显示
-
-<code src="./demos/custom.tsx"/>
-
-### 移入展开
-
-<code src="./demos/move.tsx"/>
-
-### 禁用选项
-
-<code src="./demos/disabled.tsx"/>
-
-### 选择即改变
-
-<code src="./demos/change.tsx"/>
-
-### 大小
-
-<code src="./demos/size.tsx"/>
-
-### 自定义已选项
-
-<code src="./demos/changed.tsx"/>
-
-### 搜索
-
-<code src="./demos/search.tsx"/>
-
-### 动态加载选项
-
-<code src="./demos/active.tsx"/>
-
-### 自定义字段名
-
-<code src="./demos/customName.tsx"/>
-
-## 扩展菜单
-
-<code src="./demos/dropdown.tsx"/>
-
-## API
-
-<!-- ```jsx
-<Cascader options={options} onChange={onChange} />
-``` -->
-
-| 参数                 | 说明                                                                                                                                                          | 类型                                  | 默认值                                                   | 版本  |
-| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | -------------------------------------------------------- | ----- |
-| allowClear           | 是否支持清除                                                                                                                                                  | boolean                               | true                                                     |       |
-| autoFocus            | 自动获取焦点                                                                                                                                                  | boolean                               | false                                                    |       |
-| bordered             | 是否有边框                                                                                                                                                    | boolean                               | true                                                     |       |
-| changeOnSelect       | 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示                                                                                            | boolean                               | false                                                    |       |
-| className            | 自定义类名                                                                                                                                                    | string                                | -                                                        |       |
-| defaultValue         | 默认的选中项                                                                                                                                                  | string\[] \| number\[]                | \[]                                                      |       |
-| disabled             | 禁用                                                                                                                                                          | boolean                               | false                                                    |       |
-| displayRender        | 选择后展示的渲染函数                                                                                                                                          | (label, selectedOptions) => ReactNode | label => label.join(`/`)                                 |       |
-| dropdownRender       | 自定义下拉框内容                                                                                                                                              | (menus: ReactNode) => ReactNode       | -                                                        | 4.4.0 |
-| expandIcon           | 自定义次级菜单展开图标                                                                                                                                        | ReactNode                             | -                                                        | 4.4.0 |
-| expandTrigger        | 次级菜单的展开方式，可选 'click' 和 'hover'                                                                                                                   | string                                | `click`                                                  |       |
-| fieldNames           | 自定义 options 中 label name children 的字段                                                                                                                  | object                                | { label: `label`, value: `value`, children: `children` } |       |
-| getPopupContainer    | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode)                 | () => document.body                                      |       |
-| loadData             | 用于动态加载选项，无法与 `showSearch` 一起使用                                                                                                                | (selectedOptions) => void             | -                                                        |       |
-| notFoundContent      | 当下拉列表为空时显示的内容                                                                                                                                    | string                                | `Not Found`                                              |       |
-| options              | 可选项数据源                                                                                                                                                  | [Option](#Option)\[]                  | -                                                        |       |
-| placeholder          | 输入框占位文本                                                                                                                                                | string                                | `请选择`                                                 |       |
-| popupClassName       | 自定义浮层类名                                                                                                                                                | string                                | -                                                        |       |
-| popupPlacement       | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight`                                                                                                 | string                                | `bottomLeft`                                             |       |
-| popupVisible         | 控制浮层显隐                                                                                                                                                  | boolean                               | -                                                        |       |
-| showSearch           | 在选择框中显示搜索框                                                                                                                                          | boolean \| [Object](#showSearch)      | false                                                    |       |
-| size                 | 输入框大小                                                                                                                                                    | `large` \| `middle` \| `small`        | -                                                        |       |
-| style                | 自定义样式                                                                                                                                                    | CSSProperties                         | -                                                        |       |
-| suffixIcon           | 自定义的选择框后缀图标                                                                                                                                        | ReactNode                             | -                                                        |       |
-| value                | 指定选中项                                                                                                                                                    | string\[] \| number\[]                | -                                                        |       |
-| onChange             | 选择完成后的回调                                                                                                                                              | (value, selectedOptions) => void      | -                                                        |       |
-| onPopupVisibleChange | 显示/隐藏浮层的回调                                                                                                                                           | (value) => void                       | -                                                        |       |
-
-### showSearch
-
-`showSearch` 为对象时，其中的字段：
-
-| 参数            | 说明                                                                                          | 类型                                  | 默认值 | 版本 |
-| --------------- | --------------------------------------------------------------------------------------------- | ------------------------------------- | ------ | ---- |
-| filter          | 接收 `inputValue` `path` 两个参数，当 `path` 符合筛选条件时，应返回 true，反之则返回 false    | function(inputValue, path): boolean   | -      |      |
-| limit           | 搜索结果展示数量                                                                              | number \| false                       | 50     |      |
-| matchInputWidth | 搜索结果列表是否与输入框同宽（[效果](https://github.com/ant-design/ant-design/issues/25779)） | boolean                               | true   |      |
-| render          | 用于渲染 filter 后的选项                                                                      | function(inputValue, path): ReactNode | -      |      |
-| sort            | 用于排序 filter 后的选项                                                                      | function(a, b, inputValue)            | -      |      |
-
-### Option
-
-```typescript
-interface Option {
-  value: string | number;
-  label?: React.ReactNode;
-  disabled?: boolean;
-  children?: Option[];
-}
-```
-
-## 方法
-
-| 名称    | 描述     | 版本 |
-| ------- | -------- | ---- |
-| blur()  | 移除焦点 |      |
-| focus() | 获取焦点 |      |
-
-> 注意，如果需要获得中国省市区数据，可以参考 [china-division](https://gist.github.com/afc163/7582f35654fd03d5be7009444345ea17)。