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

package/components/config-provider/demos/international.tsx

@@ -1,154 +0,0 @@
-/**
- * title: 国际化
- * desc: 此处列出 Ant Design 中需要国际化支持的组件，你可以在演示里切换语言。
- */
-
-import React, { useState } from 'react';
-import { ConfigProvider } from '@fle-ui/next';
-import {
-  Pagination,
-  DatePicker,
-  TimePicker,
-  Calendar,
-  Popconfirm,
-  Table,
-  Modal,
-  Button,
-  Select,
-  Transfer,
-  Radio,
-} from 'antd';
-import enUS from 'antd/lib/locale/en_US';
-import zhCN from 'antd/lib/locale/zh_CN';
-import moment from 'moment';
-import 'moment/locale/zh-cn';
-
-moment.locale('en');
-
-const Page = () => {
-  const [visible, setVisible] = useState(false);
-  const { Option } = Select;
-  const { RangePicker } = DatePicker;
-
-  const columns = [
-    {
-      title: 'Name',
-      dataIndex: 'name',
-      filters: [
-        {
-          text: 'filter1',
-          value: 'filter1',
-        },
-      ],
-    },
-    {
-      title: 'Age',
-      dataIndex: 'age',
-    },
-  ];
-
-  const showModal = () => {
-    setVisible(true);
-  };
-
-  const hideModal = () => {
-    setVisible(false);
-  };
-
-  const info = () => {
-    Modal.info({
-      title: 'some info',
-      content: 'some info',
-    });
-  };
-  const confirm = () => {
-    Modal.confirm({
-      title: 'some info',
-      content: 'some info',
-    });
-  };
-
-  return (
-    <div className="locale-components">
-      <div className="example">
-        <Pagination defaultCurrent={1} total={50} showSizeChanger />
-      </div>
-      <div className="example">
-        <Select showSearch style={{ width: 200 }}>
-          <Option value="jack">jack</Option>
-          <Option value="lucy">lucy</Option>
-        </Select>
-        <DatePicker />
-        <TimePicker />
-        <RangePicker style={{ width: 200 }} />
-      </div>
-      <div className="example">
-        <Button type="primary" onClick={showModal}>
-          Show Modal
-        </Button>
-        <Button onClick={info}>Show info</Button>
-        <Button onClick={confirm}>Show confirm</Button>
-        <Popconfirm title="Question?">
-          <a href="#">Click to confirm</a>
-        </Popconfirm>
-      </div>
-      <div className="example">
-        <Transfer
-          dataSource={[]}
-          showSearch
-          targetKeys={[]}
-          render={(item: any) => item.title}
-        />
-      </div>
-      <div className="site-config-provider-calendar-wrapper">
-        <Calendar fullscreen={false} value={moment()} />
-      </div>
-      <div className="example">
-        <Table dataSource={[]} columns={columns} />
-      </div>
-      <Modal title="Locale Modal" visible={visible} onCancel={hideModal}>
-        <p>Locale Modal</p>
-      </Modal>
-    </div>
-  );
-};
-
-const InternationalDemo = () => {
-  const [locale, setLocale] = useState<any>(enUS);
-
-  const changeLocale = (e: any) => {
-    const localeValue = e.target.value;
-    setLocale(localeValue);
-    if (!localeValue) {
-      moment.locale('en');
-    } else {
-      moment.locale('zh-cn');
-    }
-  };
-
-  return (
-    <div>
-      <div className="change-locale">
-        <span style={{ marginRight: 16 }}>Change locale of components: </span>
-        <Radio.Group value={locale} onChange={changeLocale}>
-          <Radio.Button key="en" value={enUS}>
-            English
-          </Radio.Button>
-          <Radio.Button key="cn" value={zhCN}>
-            中文
-          </Radio.Button>
-        </Radio.Group>
-      </div>
-      <ConfigProvider locale={locale}>
-        <Page
-          key={
-            locale
-              ? locale.locale
-              : 'en' /* Have to refresh for production environment */
-          }
-        />
-      </ConfigProvider>
-    </div>
-  );
-};
-export default InternationalDemo;

package/components/config-provider/demos/size.tsx

@@ -1,105 +0,0 @@
-/**
- * title: 组件尺寸
- * desc: 修改默认组件尺寸。
- */
-import React, { useState } from 'react';
-import { ConfigProvider } from '@fle-ui/next';
-import {
-  Radio,
-  Input,
-  Button,
-  Select,
-  DatePicker,
-  Divider,
-  Table,
-  Card,
-  Tabs,
-} from 'antd';
-
-const SizeDemo = () => {
-  const { TabPane } = Tabs;
-
-  const [componentSize, setComponentSize] = useState<any>('small');
-
-  const columns = [
-    { title: 'Name', dataIndex: 'name' },
-    { title: 'Age', dataIndex: 'age' },
-  ];
-  return (
-    <div>
-      <Radio.Group
-        value={componentSize}
-        onChange={(e) => {
-          setComponentSize(e.target.value);
-        }}
-      >
-        <Radio.Button value="small">Small</Radio.Button>
-        <Radio.Button value="middle">Middle</Radio.Button>
-        <Radio.Button value="large">Large</Radio.Button>
-      </Radio.Group>
-      <Divider />
-      <ConfigProvider componentSize={componentSize}>
-        <div className="example">
-          <Input />
-        </div>
-        <div className="example">
-          <Tabs defaultActiveKey="1">
-            <TabPane tab="Tab 1" key="1">
-              Content of Tab Pane 1
-            </TabPane>
-            <TabPane tab="Tab 2" key="2">
-              Content of Tab Pane 2
-            </TabPane>
-            <TabPane tab="Tab 3" key="3">
-              Content of Tab Pane 3
-            </TabPane>
-          </Tabs>
-        </div>
-        <div className="example">
-          <Input.Search allowClear />
-        </div>
-        <div className="example">
-          <Input.TextArea allowClear />
-        </div>
-        <div className="example">
-          <Select defaultValue="demo" options={[{ value: 'demo' }]} />
-        </div>
-        <div className="example">
-          <DatePicker />
-        </div>
-        <div className="example">
-          <DatePicker.RangePicker />
-        </div>
-        <div className="example">
-          <Button>Button</Button>
-        </div>
-        <div className="example">
-          <Card title="Card">
-            <Table
-              columns={columns}
-              dataSource={[
-                {
-                  key: '1',
-                  name: 'John Brown',
-                  age: 32,
-                },
-                {
-                  key: '2',
-                  name: 'Jim Green',
-                  age: 42,
-                },
-                {
-                  key: '3',
-                  name: 'Joe Black',
-                  age: 32,
-                },
-              ]}
-            />
-          </Card>
-        </div>
-      </ConfigProvider>
-    </div>
-  );
-};
-
-export default SizeDemo;

package/components/config-provider/index.tsx

@@ -1,5 +0,0 @@
-import { ConfigProvider } from 'antd';
-import type { ConfigProviderProps } from 'antd/es/config-provider';
-
-export type { ConfigProviderProps };
-export default ConfigProvider;

package/components/date-picker/date-picker.md

@@ -1,246 +0,0 @@
----
-title: DatePicker 日期选择框
-order: 0
-legacy: /datepicker
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# DatePicker 日期选择框
-
-输入或选择日期的控件。
-
-## 何时使用
-
-当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。
-
-## 代码演示
-
-### 基本
-<code src="./demos/basic.tsx" />
-
-### 范围选择器
-<code src="./demos/range-picker.tsx" />
-
-### 切换不同的选择器
-<code src="./demos/switchable.tsx" />
-
-### 日期格式
-<code src="./demos/format.tsx" />
-
-### 日期时间选择
-<code src="./demos/time.tsx" />
-
-### 不可选择日期和时间
-<code src="./demos/disabled-date.tsx" />
-
-### 禁用
-<code src="./demos/disabled.tsx" />
-
-### 选择不超过七天的范围
-<code src="./demos/select-in-range.tsx" />
-
-### 预设范围
-<code src="./demos/presetted-ranges.tsx" />
-
-### 三种大小
-<code src="./demos/size.jsx" />
-
-### 额外的页脚
-<code src="./demos/extra-footer.tsx" />
-
-### 定制日期单元格
-<code src="./demos/date-render.tsx" />
-
-### 无边框
-<code src="./demos/bordered.tsx" />
-
-## API
-
-日期类组件包括以下五种形式。
-
-- DatePicker
-- DatePicker\[picker="month"]
-- DatePicker\[picker="week"]
-- DatePicker\[picker="year"]
-- DatePicker\[picker="quarter"] (4.1.0 新增)
-- RangePicker
-
-### 国际化配置
-
-默认配置为 en-US，如果你需要设置其他语言，推荐在入口处使用我们提供的国际化组件，详见：[ConfigProvider 国际化](https://ant.design/components/config-provider-cn/)。
-
-如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。
-
-```bash
-import 'moment/locale/zh-cn';
-import locale from 'antd/es/date-picker/locale/zh_CN';
-
-<DatePicker locale={locale} />;
-```
-
-```bash
-// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
-import moment from 'moment';
-import 'moment/locale/zh-cn';
-import locale from 'antd/lib/locale/zh_CN';
-
-<ConfigProvider locale={locale}>
-  <DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />
-</ConfigProvider>;
-```
-
-### 共同的 API
-
-以下 API 为 DatePicker、 RangePicker 共享的 API。
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| allowClear | 是否显示清除按钮 | boolean | true |  |
-| autoFocus | 自动获取焦点 | boolean | false |  |
-| bordered | 是否有边框 | boolean | true |  |
-| className | 选择器 className | string | - |  |
-| dateRender | 自定义日期单元格的内容 | function(currentDate: moment, today: moment) => React.ReactNode | - |  |
-| disabled | 禁用 | boolean | false |  |
-| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | - |  |
-| dropdownClassName | 额外的弹出日历 className | string | - |  |
-| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - |  |
-| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false |  |
-| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |
-| mode | 日期面板的状态（[设置后无法选择年份/月份？](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)） | `time` \| `date` \| `month` \| `year` \| `decade` | - |  |
-| open | 控制弹层是否展开 | boolean | - |  |
-| panelRender | 自定义渲染面板 | (panelNode) => ReactNode | - | 4.5.0 |
-| picker | 设置选择器类型 | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter`: 4.1.0 |
-| placeholder | 输入框提示文字 | string \| \[string, string] | - |  |
-| popupStyle | 额外的弹出日历样式 | CSSProperties | {} |  |
-| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | - |  |
-| style | 自定义输入框样式 | CSSProperties | {} |  |
-| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |
-| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | - |  |
-| onPanelChange | 日历面板切换的回调 | function(value, mode) | - |  |
-
-### 共同的方法
-
-| 名称 | 描述 | 版本 |
-| --- | --- | --- |
-| blur() | 移除焦点 |  |
-| focus() | 获取焦点 |  |
-
-### DatePicker
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - |  |
-| defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [moment](http://momentjs.com/) | - |  |
-| disabledTime | 不可选择的时间 | function(date) | - |  |
-| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [moment.js](http://momentjs.com/)，支持[自定义格式](#components-date-picker-demo-format) | string \| (value: moment) => string \| (string \| (value: moment) => string)\[] | `YYYY-MM-DD` |  |
-| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - |  |
-| showNow | 当设定了 `showTime` 的时候，面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
-| showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker/#API) |  |
-| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() |  |
-| showToday | 是否展示“今天”按钮 | boolean | true |  |
-| value | 日期 | [moment](http://momentjs.com/) | - |  |
-| onChange | 时间发生变化的回调 | function(date: moment, dateString: string) | - |  |
-| onOk | 点击确定按钮的回调 | function() | - |  |
-| onPanelChange | 日期面板变化时的回调 | function(value, mode) | - |  |
-
-### DatePicker\[picker=year]
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - |  |
-| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - |  |
-| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY` |  |
-| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
-| value | 日期 | [moment](http://momentjs.com/) | - |  |
-| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - |  |
-
-### DatePicker\[picker=quarter]
-
-`4.1.0` 新增。
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - |  |
-| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - |  |
-| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-\QQ` |  |
-| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
-| value | 日期 | [moment](http://momentjs.com/) | - |  |
-| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - |  |
-
-### DatePicker\[picker=month]
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - |  |
-| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - |  |
-| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-MM` |  |
-| monthCellRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - |  |
-| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
-| value | 日期 | [moment](http://momentjs.com/) | - |  |
-| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - |  |
-
-### DatePicker\[picker=week]
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - |  |
-| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - |  |
-| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-wo` |  |
-| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - |  |
-| value | 日期 | [moment](http://momentjs.com/) | - |  |
-| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - |  |
-
-### RangePicker
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| allowEmpty | 允许起始项部分为空 | \[boolean, boolean] | \[false, false] |  |
-| dateRender | 自定义日期单元格的内容。`info` 参数自 4.3.0 添加 | function(currentDate: moment, today: moment, info: { range: `start` \| `end` }) => React.ReactNode | - |  |
-| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/)\[] | - |  |
-| defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | - |  |
-| disabled | 禁用起始项 | \[boolean, boolean] | - |  |
-| disabledTime | 不可选择的时间 | function(date: moment, partial: `start` \| `end`) | - |  |
-| format | 展示的日期格式 | string | `YYYY-MM-DD HH:mm:ss` |  |
-| ranges | 预设时间范围快捷选择 | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - |  |
-| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
-| separator | 设置分隔符 | React.ReactNode | `<SwapRightOutlined />` |  |
-| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) |  |
-| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] |  |
-| value | 日期 | [moment](http://momentjs.com/)\[] | - |  |
-| onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[moment, moment], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - |  |
-| onChange | 日期范围发生变化的回调 | function(dates: \[moment, moment], dateStrings: \[string, string]) | - |  |
-
-## FAQ
-
-### 当我指定了 DatePicker/RangePicker 的 mode 属性后，点击后无法选择年份/月份？
-
-请参考[常见问答](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)
-
-### 如何在 DatePicker 中使用自定义日期库（如 dayjs ）？
-
-请参考[《替换 Moment.js》](/docs/react/replace-moment#DatePicker)
-
-### 为何全局修改 moment.locale 不生效？
-
-v4 中，DatePicker 默认 `locale` 为 `en`。你可以通过 DatePicker 的 `locale` 属性来单独设置，也可以通过 [ConfigProvider `locale`](/components/config-provider) 属性来配置。
-
-### 如何修改周的起始日？
-
-请使用正确的[语言包](/docs/react/i18n)（[#5605](https://github.com/ant-design/ant-design/issues/5605)），或者修改 moment 的 `locale` 配置：<https://codesandbox.io/s/moment-day-of-week-6dby5>
-
-### 为何使用 `panelRender` 时，原来面板无法切换？
-
-当你通过 `panelRender` 动态改变层级结构时，会使得原本的 Panel 被当做新的节点删除并创建。这使得其原本的状态会被重置，保持结构稳定即可。详情请参考 [#27263](https://github.com/ant-design/ant-design/issues/27263)。
-
-```bash
-moment.locale('en', {
-  // 注意请修改你正在使用的 locale 语言，比如 zh-cn
-  week: {
-    dow: 1,
-  },
-});
-```