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

package/components/button/demos/multiple.tsx

@@ -1,31 +0,0 @@
-/**
- * title: 多个按钮组合
- * desc: 按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 [Dropdown.Button](/components/dropdown/#components-dropdown-demo-dropdown-button) 中组合使用。
- */
-
-import React from 'react';
-import { Button, Menu, Dropdown } from '@fle-ui/next';
-
-const MultipleDemo = () => {
-  const handleMenuClick = (e: any) => {
-    console.log('click', e);
-  };
-
-  const menu = (
-    <Menu onClick={handleMenuClick}>
-      <Menu.Item key="1">1st item</Menu.Item>
-      <Menu.Item key="2">2nd item</Menu.Item>
-      <Menu.Item key="3">3rd item</Menu.Item>
-    </Menu>
-  );
-
-  return (
-    <>
-      <Button type="primary">primary</Button>
-      <Button>secondary</Button>
-      <Dropdown.Button overlay={menu}>Actions</Dropdown.Button>
-    </>
-  );
-};
-
-export default MultipleDemo;

package/components/button/demos/size.tsx

@@ -1,70 +0,0 @@
-/**
- * title: 按钮尺寸
- * desc: 按钮有大、中、小三种尺寸。<br /> 通过设置 size 为 large small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。
- */
-
-import React, { useState } from 'react';
-import { Button, Radio } from '@fle-ui/next';
-import { DownloadOutlined } from '@ant-design/icons';
-
-import type { SizeType } from 'antd/es/config-provider/SizeContext';
-import type { RadioChangeEvent } from 'antd/es/radio';
-
-const SizeDemo = () => {
-  const [size, setSize] = useState<SizeType>('large');
-
-  const handleSizeChange = (e: RadioChangeEvent) => {
-    setSize(e.target.value);
-  };
-
-  return (
-    <>
-      <Radio.Group value={size} onChange={handleSizeChange}>
-        <Radio.Button value="large">Large</Radio.Button>
-        <Radio.Button value="default">Default</Radio.Button>
-        <Radio.Button value="small">Small</Radio.Button>
-      </Radio.Group>
-
-      <br />
-      <br />
-
-      <Button type="primary" size={size}>
-        Primary
-      </Button>
-      <Button size={size}>Default</Button>
-      <Button type="dashed" size={size}>
-        Dashed
-      </Button>
-      <Button type="link" size={size}>
-        Link
-      </Button>
-
-      <Button type="primary" icon={<DownloadOutlined />} size={size} />
-      <Button
-        type="primary"
-        shape="circle"
-        icon={<DownloadOutlined />}
-        size={size}
-      />
-      <Button
-        type="primary"
-        shape="round"
-        icon={<DownloadOutlined />}
-        size={size}
-      />
-      <Button
-        type="primary"
-        shape="round"
-        icon={<DownloadOutlined />}
-        size={size}
-      >
-        Download
-      </Button>
-      <Button type="primary" icon={<DownloadOutlined />} size={size}>
-        Download
-      </Button>
-    </>
-  );
-};
-
-export default SizeDemo;

package/components/button/index.less

@@ -1 +0,0 @@
-@import '../style/index';

package/components/button/index.tsx

@@ -1,15 +0,0 @@
-import React, { FC, ReactElement } from 'react';
-import { Button as AntdButton } from 'antd';
-import type { ButtonProps as AntdButtonProps } from 'antd';
-
-import './index.less';
-
-export interface ButtonProps extends AntdButtonProps {}
-
-const Button: FC<ButtonProps> = (props): ReactElement => {
-  const { children, ...otherProps } = props;
-
-  return <AntdButton {...otherProps}>{children}</AntdButton>;
-};
-
-export default Button;

package/components/calendar/calendar.md

@@ -1,100 +0,0 @@
----
-title: Calendar 日历
-order: 0
-legacy: /calendar
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# Calendar 日历
-
-按照日历形式展示数据的容器。
-
-## 何时使用
-
-当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。
-
-## 代码演示
-
-### 基本
-
-<code src="./demos/basic.tsx" />
-
-### 通知事项日历
-
-<code src="./demos/notice-calendar.tsx" />
-
-### 卡片模式
-
-<code src="./demos/card.tsx" />
-
-### 选择功能
-
-<code src="./demos/select.tsx" />
-
-### 自定义头部
-
-<code src="./demos/customize-header.tsx" />
-
-## API
-
-**注意：**Calendar 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。
-
-```bash
-// 默认语言为 en-US，所以如果需要使用其他语言，推荐在入口文件全局设置 locale
-// import moment from 'moment';
-// import 'moment/locale/zh-cn';
-// moment.locale('zh-cn');
-
-<Calendar
-  dateCellRender={dateCellRender}
-  monthCellRender={monthCellRender}
-  onPanelChange={onPanelChange}
-  onSelect={onSelect}
-/>
-```
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| dateCellRender | 自定义渲染日期单元格，返回内容会被追加到单元格 | function(date: moment): ReactNode | - |  |
-| dateFullCellRender | 自定义渲染日期单元格，返回内容覆盖单元格 | function(date: moment): ReactNode | - |  |
-| defaultValue | 默认展示的日期 | [moment](http://momentjs.com/) | - |  |
-| disabledDate | 不可选择的日期，参数为当前 `value`，注意使用时[不要直接修改](https://github.com/ant-design/ant-design/issues/30987) | (currentDate: moment) => boolean | - |  |
-| fullscreen | 是否全屏显示 | boolean | true |  |
-| headerRender | 自定义头部内容 | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | - |  |
-| locale | 国际化配置 | object | [(默认配置)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |
-| mode | 初始模式 | `month` \| `year` | `month` |  |
-| monthCellRender | 自定义渲染月单元格，返回内容会被追加到单元格 | function(date: moment): ReactNode | - |  |
-| monthFullCellRender | 自定义渲染月单元格，返回内容覆盖单元格 | function(date: moment): ReactNode | - |  |
-| validRange | 设置可以显示的日期 | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |  |
-| value | 展示日期 | [moment](http://momentjs.com/) | - |  |
-| onChange | 日期变化回调 | function(date: moment） | - |  |
-| onPanelChange | 日期面板变化回调 | function(date: moment, mode: string) | - |  |
-| onSelect | 点击选择日期回调 | function(date: moment） | - |  |
-
-## FAQ
-
-- [如何在 Calendar 中使用自定义日期库（如 dayjs ）](/docs/react/replace-moment#Calendar)
-
-<style>
-  .site-calendar-demo-card {
-  width: 300px;
-  border: 1px solid #f0f0f0;
-  border-radius: 2px;
-}
-[data-theme="dark"] .site-calendar-demo-card {
-    border: 1px solid #303030;
-  }
-
-  .site-calendar-customize-header-wrapper {
-  width: 300px;
-  border: 1px solid #f0f0f0;
-  border-radius: 2px;
-}
- [data-theme="dark"] .site-calendar-customize-header-wrapper {
-    border: 1px solid #303030;
-  }
-</style>

package/components/calendar/demos/basic.tsx

@@ -1,16 +0,0 @@
-/**
- * title: 基本
- * desc: 一个通用的日历面板，支持年/月切换。
- */
-
-import React from 'react';
-import { Calendar } from '@fle-ui/next';
-
-const BasicDemo = () => {
-  const onPanelChange = (value: any, mode: any) => {
-    console.log(value.format('YYYY-MM-DD'), mode);
-  };
-  return <Calendar onPanelChange={onPanelChange} />;
-};
-
-export default BasicDemo;

package/components/calendar/demos/card.tsx

@@ -1,21 +0,0 @@
-/**
- * title: 卡片模式
- * desc: 用于嵌套在空间有限的容器中。
- */
-
-import React from 'react';
-import { Calendar } from '@fle-ui/next';
-
-const CardDemo = () => {
-  const onPanelChange = (value: any, mode: any) => {
-    console.log(value, mode);
-  };
-
-  return (
-    <div className="site-calendar-demo-card">
-      <Calendar fullscreen={false} onPanelChange={onPanelChange} />
-    </div>
-  );
-};
-
-export default CardDemo;

package/components/calendar/demos/customize-header.tsx

@@ -1,100 +0,0 @@
-/**
- * title: 自定义头部
- * desc: 自定义日历头部内容。
- */
-
-import React from 'react';
-import { Calendar, Select, Radio, Col, Row, Typography } from 'antd';
-
-const CustomizeHeaderDemo = () => {
-  const onPanelChange = (value: any, mode: any) => {
-    console.log(value, mode);
-  };
-  return (
-    <div className="site-calendar-customize-header-wrapper">
-      <Calendar
-        fullscreen={false}
-        headerRender={({ value, type, onChange, onTypeChange }) => {
-          const start = 0;
-          const end = 12;
-          const monthOptions = [];
-
-          const current = value.clone();
-          const localeData = value.localeData();
-          const months = [];
-          for (let i = 0; i < 12; i++) {
-            current.month(i);
-            months.push(localeData.monthsShort(current));
-          }
-
-          for (let index = start; index < end; index++) {
-            monthOptions.push(
-              <Select.Option className="month-item" key={`${index}`} value="">
-                {months[index]}
-              </Select.Option>,
-            );
-          }
-          const month = value.month();
-
-          const year = value.year();
-          const options = [];
-          for (let i = year - 10; i < year + 10; i += 1) {
-            options.push(
-              <Select.Option key={i} value={i} className="year-item">
-                {i}
-              </Select.Option>,
-            );
-          }
-          return (
-            <div style={{ padding: 8 }}>
-              <Typography.Title level={4}>Custom header</Typography.Title>
-              <Row gutter={8}>
-                <Col>
-                  <Radio.Group
-                    size="small"
-                    onChange={(e) => onTypeChange(e.target.value)}
-                    value={type}
-                  >
-                    <Radio.Button value="month">Month</Radio.Button>
-                    <Radio.Button value="year">Year</Radio.Button>
-                  </Radio.Group>
-                </Col>
-                <Col>
-                  <Select
-                    size="small"
-                    dropdownMatchSelectWidth={false}
-                    className="my-year-select"
-                    onChange={(newYear: number) => {
-                      const now = value.clone().year(newYear);
-                      onChange(now);
-                    }}
-                    value={Number(year)}
-                  >
-                    {options}
-                  </Select>
-                </Col>
-                <Col>
-                  <Select
-                    size="small"
-                    dropdownMatchSelectWidth={false}
-                    value={String(month)}
-                    onChange={(selectedMonth) => {
-                      const newValue = value.clone();
-                      newValue.month(parseInt(selectedMonth, 10));
-                      onChange(newValue);
-                    }}
-                  >
-                    {monthOptions}
-                  </Select>
-                </Col>
-              </Row>
-            </div>
-          );
-        }}
-        onPanelChange={onPanelChange}
-      />
-    </div>
-  );
-};
-
-export default CustomizeHeaderDemo;

package/components/calendar/demos/notice-calendar.tsx

@@ -1,87 +0,0 @@
-/**
- * title: 通知事项日历
- * desc: 一个复杂的应用示例，用 `dateCellRender` 和 `monthCellRender` 函数来自定义需要渲染的数据。
- */
-
-import React from 'react';
-import { Calendar, Badge } from '@fle-ui/next';
-
-const NoticeCalendarDemo = () => {
-  interface keyType {
-    content: React.ReactNode;
-    type:
-      | 'warning'
-      | 'success'
-      | 'error'
-      | 'processing'
-      | 'default'
-      | undefined;
-  }
-  const getListData = (value: any) => {
-    let listData;
-    switch (value.date()) {
-      case 8:
-        listData = [
-          { type: 'warning', content: 'This is warning event.' },
-          { type: 'success', content: 'This is usual event.' },
-        ];
-        break;
-      case 10:
-        listData = [
-          { type: 'warning', content: 'This is warning event.' },
-          { type: 'success', content: 'This is usual event.' },
-          { type: 'error', content: 'This is error event.' },
-        ];
-        break;
-      case 15:
-        listData = [
-          { type: 'warning', content: 'This is warning event' },
-          { type: 'success', content: 'This is very long usual event。。....' },
-          { type: 'error', content: 'This is error event 1.' },
-          { type: 'error', content: 'This is error event 2.' },
-          { type: 'error', content: 'This is error event 3.' },
-          { type: 'error', content: 'This is error event 4.' },
-        ];
-        break;
-      default:
-    }
-    return listData || [];
-  };
-
-  const dateCellRender = (value: any) => {
-    const listData = getListData(value);
-    return (
-      <ul className="events">
-        {listData.map((item: any) => (
-          <li key={item.content}>
-            <Badge status={item.type} text={item.content} />
-          </li>
-        ))}
-      </ul>
-    );
-  };
-
-  const getMonthData = (value: any) => {
-    if (value.month() === 8) {
-      return 1394;
-    }
-  };
-
-  const monthCellRender = (value: any) => {
-    const num = getMonthData(value);
-    return num ? (
-      <div className="notes-month">
-        <section>{num}</section>
-        <span>Backlog number</span>
-      </div>
-    ) : null;
-  };
-  return (
-    <Calendar
-      dateCellRender={dateCellRender}
-      monthCellRender={monthCellRender}
-    />
-  );
-};
-
-export default NoticeCalendarDemo;