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

package/components/date-picker/demos/switchable.tsx

@@ -1,37 +0,0 @@
-/**
- * title: 切换不同的选择器
- * desc: 提供选择器，自由切换不同类型的日期选择器，常用于日期筛选场合。
- */
-
-import React, { useState } from 'react';
-import { DatePicker, Select } from '@fle-ui/next';
-import { TimePicker, Space } from 'antd';
-
-const { Option } = Select;
-
-function PickerWithType({ type, onChange }: any) {
-  if (type === 'time') return <TimePicker onChange={onChange} />;
-  if (type === 'date') return <DatePicker onChange={onChange} />;
-  return <DatePicker picker={type} onChange={onChange} />;
-}
-
-function Demo() {
-  const [type, setType] = useState('time');
-  return (
-    <Space>
-      <Select value={type} onChange={setType}>
-        <Option value="time">Time</Option>
-        <Option value="date">Date</Option>
-        <Option value="week">Week</Option>
-        <Option value="month">Month</Option>
-        <Option value="quarter">Quarter</Option>
-        <Option value="year">Year</Option>
-      </Select>
-      <PickerWithType
-        type={type}
-        onChange={(value: string) => console.log(value)}
-      />
-    </Space>
-  );
-}
-export default Demo;

package/components/date-picker/demos/time.tsx

@@ -1,34 +0,0 @@
-/**
- * title: 日期时间选择
- * desc: 增加选择时间功能，当 `showTime` 为一个对象时，其属性会传递给内建的 `TimePicker`。
- */
-
-import React, { useState } from 'react';
-import { DatePicker } from '@fle-ui/next';
-import { Space } from 'antd';
-
-const { RangePicker } = DatePicker;
-
-function onChange(value: any, dateString: any) {
-  console.log('Selected Time: ', value);
-  console.log('Formatted Selected Time: ', dateString);
-}
-
-function onOk(value: any) {
-  console.log('onOk: ', value);
-}
-
-function Demo() {
-  return (
-    <Space direction="vertical" size={12}>
-      <DatePicker showTime onChange={onChange} onOk={onOk} />
-      <RangePicker
-        showTime={{ format: 'HH:mm' }}
-        format="YYYY-MM-DD HH:mm"
-        onChange={onChange}
-        onOk={onOk}
-      />
-    </Space>
-  );
-}
-export default Demo;

package/components/date-picker/index.tsx

@@ -1,5 +0,0 @@
-import React from 'react';
-import { DatePicker } from 'antd';
-export type { DatePickerProps } from 'antd/es/date-picker';
-
-export default DatePicker;

package/components/descriptions/components/descriptions.tsx

@@ -1,12 +0,0 @@
-import React, { FC, ReactElement } from 'react';
-import { Descriptions as AntdDescriptions } from 'antd';
-import type { DescriptionsProps as AntdDescriptionsProps } from 'antd';
-
-export interface DescriptionsProps extends AntdDescriptionsProps {}
-
-const Descriptions: FC<DescriptionsProps> = (props, ref): ReactElement => {
-  const { children, ...otherProps } = props;
-  return <AntdDescriptions {...otherProps}>{children}</AntdDescriptions>;
-};
-
-export default Descriptions;

package/components/descriptions/components/item.tsx

@@ -1,12 +0,0 @@
-import React, { FC, ReactElement } from 'react';
-import { Descriptions as AntdDescriptions } from 'antd';
-import { DescriptionsItemProps as AntdDescriptionsItemProps } from 'antd/es/descriptions/Item';
-
-export interface DescriptionsItemProps extends AntdDescriptionsItemProps {}
-const { Item: AntdItem } = AntdDescriptions;
-const Item: FC<AntdDescriptionsItemProps> = (props): ReactElement => {
-  const { children, ...otherProps } = props;
-  return <AntdItem {...otherProps}>{children}</AntdItem>;
-};
-
-export default Item;

package/components/descriptions/demos/basic.tsx

@@ -1,23 +0,0 @@
-/**
- * title: 基本
- * desc: 简单的展示。
- */
-
-import React from 'react';
-import { Descriptions } from '@fle-ui/next';
-
-const BasicDemo = () => {
-  return (
-    <Descriptions title="User Info">
-      <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
-      <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
-      <Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
-      <Descriptions.Item label="Remark">empty</Descriptions.Item>
-      <Descriptions.Item label="Address">
-        No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
-      </Descriptions.Item>
-    </Descriptions>
-  );
-};
-
-export default BasicDemo;

package/components/descriptions/demos/border.tsx

@@ -1,44 +0,0 @@
-/**
- * title: 带边框的
- * desc: 带边框和背景颜色列表。
- */
-
-import React from 'react';
-import { Descriptions } from '@fle-ui/next';
-import { Badge } from 'antd';
-
-const BorderDemo = () => {
-  return (
-    <Descriptions title="User Info" bordered>
-      <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
-      <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
-      <Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
-      <Descriptions.Item label="Order time">
-        2018-04-24 18:00:00
-      </Descriptions.Item>
-      <Descriptions.Item label="Usage Time" span={2}>
-        2019-04-24 18:00:00
-      </Descriptions.Item>
-      <Descriptions.Item label="Status" span={3}>
-        <Badge status="processing" text="Running" />
-      </Descriptions.Item>
-      <Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item>
-      <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
-      <Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item>
-      <Descriptions.Item label="Config Info">
-        Data disk type: MongoDB
-        <br />
-        Database version: 3.4
-        <br />
-        Package: dds.mongo.mid
-        <br />
-        Storage space: 10 GB
-        <br />
-        Replication factor: 3
-        <br />
-        Region: East China 1<br />
-      </Descriptions.Item>
-    </Descriptions>
-  );
-};
-export default BorderDemo;

package/components/descriptions/demos/custom.tsx

@@ -1,67 +0,0 @@
-/**
- * title: 自定义尺寸
- * desc: 自定义尺寸，适应在各种容器中展示。
- */
-import React, { useState } from 'react';
-import { Descriptions } from '@fle-ui/next';
-import { Radio, Button } from 'antd';
-const CustomDemo = () => {
-  const [size, setSize] = useState<any>('default');
-  const onChange = (e: any) => {
-    console.log('size checked', e.target.value);
-    setSize(e.target.value);
-  };
-  return (
-    <div>
-      <Radio.Group onChange={onChange} value={size}>
-        <Radio value="default">default</Radio>
-        <Radio value="middle">middle</Radio>
-        <Radio value="small">small</Radio>
-      </Radio.Group>
-      <br />
-      <br />
-      <Descriptions
-        bordered
-        title="Custom Size"
-        size={size}
-        extra={<Button type="primary">Edit</Button>}
-      >
-        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
-        <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
-        <Descriptions.Item label="time">18:00:00</Descriptions.Item>
-        <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
-        <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
-        <Descriptions.Item label="Official">$60.00</Descriptions.Item>
-        <Descriptions.Item label="Config Info">
-          Data disk type: MongoDB
-          <br />
-          Database version: 3.4
-          <br />
-          Package: dds.mongo.mid
-          <br />
-          Storage space: 10 GB
-          <br />
-          Replication factor: 3
-          <br />
-          Region: East China 1<br />
-        </Descriptions.Item>
-      </Descriptions>
-      <br />
-      <br />
-      <Descriptions
-        title="Custom Size"
-        size={size}
-        extra={<Button type="primary">Edit</Button>}
-      >
-        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
-        <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
-        <Descriptions.Item label="time">18:00:00</Descriptions.Item>
-        <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
-        <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
-        <Descriptions.Item label="Official">$60.00</Descriptions.Item>
-      </Descriptions>
-    </div>
-  );
-};
-
-export default CustomDemo;

package/components/descriptions/demos/responsive.tsx

@@ -1,41 +0,0 @@
-/**
- * title: 响应式
- * desc: 通过响应式的配置可以实现在小屏幕设备上的完美呈现。
- */
-
-import React from 'react';
-import { Descriptions } from '@fle-ui/next';
-
-const ResponsiveDemo = () => {
-  return (
-    <div>
-      <Descriptions
-        title="Responsive Descriptions"
-        bordered
-        column={{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }}
-      >
-        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
-        <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
-        <Descriptions.Item label="time">18:00:00</Descriptions.Item>
-        <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
-        <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
-        <Descriptions.Item label="Official">$60.00</Descriptions.Item>
-        <Descriptions.Item label="Config Info">
-          Data disk type: MongoDB
-          <br />
-          Database version: 3.4
-          <br />
-          Package: dds.mongo.mid
-          <br />
-          Storage space: 10 GB
-          <br />
-          Replication factor: 3
-          <br />
-          Region: East China 1
-        </Descriptions.Item>
-      </Descriptions>
-    </div>
-  );
-};
-
-export default ResponsiveDemo;

package/components/descriptions/demos/vertical.tsx

@@ -1,23 +0,0 @@
-/**
- * title: 垂直
- * desc: 垂直的列表。
- */
-
-import React from 'react';
-import { Descriptions } from '@fle-ui/next';
-
-const VerticalDemo = () => {
-  return (
-    <Descriptions title="User Info" layout="vertical">
-      <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
-      <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
-      <Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
-      <Descriptions.Item label="Address" span={2}>
-        No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
-      </Descriptions.Item>
-      <Descriptions.Item label="Remark">empty</Descriptions.Item>
-    </Descriptions>
-  );
-};
-
-export default VerticalDemo;

package/components/descriptions/demos/verticalBorder.tsx

@@ -1,45 +0,0 @@
-/**
- * title: 垂直带边框的
- * desc: 垂直带边框和背景颜色的列表。
- */
-
-import React from 'react';
-import { Descriptions } from '@fle-ui/next';
-import { Badge } from 'antd';
-
-const VerticalBorderDemo = () => {
-  return (
-    <Descriptions title="User Info" layout="vertical" bordered>
-      <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
-      <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
-      <Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
-      <Descriptions.Item label="Order time">
-        2018-04-24 18:00:00
-      </Descriptions.Item>
-      <Descriptions.Item label="Usage Time" span={2}>
-        2019-04-24 18:00:00
-      </Descriptions.Item>
-      <Descriptions.Item label="Status" span={3}>
-        <Badge status="processing" text="Running" />
-      </Descriptions.Item>
-      <Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item>
-      <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
-      <Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item>
-      <Descriptions.Item label="Config Info">
-        Data disk type: MongoDB
-        <br />
-        Database version: 3.4
-        <br />
-        Package: dds.mongo.mid
-        <br />
-        Storage space: 10 GB
-        <br />
-        Replication factor: 3
-        <br />
-        Region: East China 1<br />
-      </Descriptions.Item>
-    </Descriptions>
-  );
-};
-
-export default VerticalBorderDemo;

package/components/descriptions/descriptions.md

@@ -1,71 +0,0 @@
----
-title: Descriptions 描述列表
-order: 0
-legacy: /descriptions
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# Descriptions 描述列表
-
-成组展示多个只读字段。
-
-## 何时使用
-
-常见于详情页的信息展示。
-
-## 代码演示
-
-### 基本
-
-<code src="./demos/basic.tsx"/>
-
-### 带边框的
-
-<code src="./demos/border.tsx"/>
-
-### 自定义尺寸
-
-<code src="./demos/custom.tsx"/>
-
-### 响应式
-
-<code src="./demos/responsive.tsx"/>
-
-### 垂直
-
-<code src="./demos/vertical.tsx"/>
-
-### 垂直带边框的
-
-<code src="./demos/verticalBorder.tsx"/>
-
-## API
-
-### Descriptions
-
-| 参数         | 说明                                                                                            | 类型                             | 默认值       | 版本   |
-| ------------ | ----------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | ------ |
-| bordered     | 是否展示边框                                                                                    | boolean                          | false        |        |
-| colon        | 配置 `Descriptions.Item` 的 `colon` 的默认值                                                    | boolean                          | true         |        |
-| column       | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number                           | 3            |        |
-| contentStyle | 自定义内容样式                                                                                  | CSSProperties                    | -            | 4.10.0 |
-| extra        | 描述列表的操作区域，显示在右上方                                                                | ReactNode                        | -            | 4.5.0  |
-| labelStyle   | 自定义标签样式                                                                                  | CSSProperties                    | -            | 4.10.0 |
-| layout       | 描述布局                                                                                        | `horizontal` \| `vertical`       | `horizontal` |        |
-| size         | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效）        | `default` \| `middle` \| `small` | -            |        |
-| title        | 描述列表的标题，显示在最顶部                                                                    | ReactNode                        | -            |        |
-
-### DescriptionItem
-
-| 参数         | 说明           | 类型          | 默认值 | 版本  |
-| ------------ | -------------- | ------------- | ------ | ----- |
-| contentStyle | 自定义内容样式 | CSSProperties | -      | 4.9.0 |
-| label        | 内容的描述     | ReactNode     | -      |       |
-| labelStyle   | 自定义标签样式 | CSSProperties | -      | 4.9.0 |
-| span         | 包含列的数量   | number        | 1      |       |
-
-> span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。

package/components/descriptions/index.tsx

@@ -1,19 +0,0 @@
-import InternalDescriptions, {
-  DescriptionsProps,
-} from './components/descriptions';
-import Item, { DescriptionsItemProps } from './components/item';
-import React from 'react';
-
-interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<
-    DescriptionsProps & React.RefAttributes<HTMLElement>
-  > {
-  Item: typeof Item;
-}
-
-const Descriptions = InternalDescriptions as CompoundedComponent;
-Descriptions.Item = Item;
-
-export type { DescriptionsProps, DescriptionsItemProps };
-
-export default Descriptions;