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

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

@@ -1,26 +0,0 @@
-/**
- * title: 基本
- * desc: 最简单的用法，在浮层中可以选择或者输入日期。
- */
-
-import React from 'react';
-import { DatePicker } from '@fle-ui/next';
-import { Space } from 'antd';
-
-function onChange(date: any, dateString: any) {
-  console.log(date, dateString);
-}
-
-const Demo = () => {
-  return (
-    <Space direction="vertical">
-      <DatePicker onChange={onChange} />
-      <DatePicker onChange={onChange} picker="week" />
-      <DatePicker onChange={onChange} picker="month" />
-      <DatePicker onChange={onChange} picker="quarter" />
-      <DatePicker onChange={onChange} picker="year" />
-    </Space>
-  );
-};
-
-export default Demo;

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

@@ -1,26 +0,0 @@
-/**
- * title: 无边框
- * desc: 无边框样式。
- */
-
-import React from 'react';
-import { DatePicker } from '@fle-ui/next';
-import { Space } from 'antd';
-
-const { RangePicker } = DatePicker;
-
-function Demo() {
-  return (
-    <Space direction="vertical" size={12}>
-      <DatePicker bordered={false} />
-      <DatePicker picker="week" bordered={false} />
-      <DatePicker picker="month" bordered={false} />
-      <DatePicker picker="year" bordered={false} />
-      <RangePicker bordered={false} />
-      <RangePicker picker="week" bordered={false} />
-      <RangePicker picker="month" bordered={false} />
-      <RangePicker picker="year" bordered={false} />
-    </Space>
-  );
-}
-export default Demo;

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

@@ -1,46 +0,0 @@
-/**
- * title: 定制日期单元格
- * desc: 使用 `dateRender` 可以自定义日期单元格的内容和样式。
- */
-
-import React from 'react';
-import { DatePicker } from '@fle-ui/next';
-import { Space } from 'antd';
-
-const { RangePicker } = DatePicker;
-
-function Demo() {
-  return (
-    <Space direction="vertical" size={12}>
-      <DatePicker
-        dateRender={(current) => {
-          const style: any = {};
-          if (current.date() === 1) {
-            style.border = '1px solid #1890ff';
-            style.borderRadius = '50%';
-          }
-          return (
-            <div className="ant-picker-cell-inner" style={style}>
-              {current.date()}
-            </div>
-          );
-        }}
-      />
-      <RangePicker
-        dateRender={(current) => {
-          const style: any = {};
-          if (current.date() === 1) {
-            style.border = '1px solid #1890ff';
-            style.borderRadius = '50%';
-          }
-          return (
-            <div className="ant-picker-cell-inner" style={style}>
-              {current.date()}
-            </div>
-          );
-        }}
-      />
-    </Space>
-  );
-}
-export default Demo;

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

@@ -1,75 +0,0 @@
-/**
- * title: 不可选择日期和时间
- * desc: 可用 `disabledDate` 和 `disabledTime` 分别禁止选择部分日期和时间，其中 `disabledTime` 需要和 `showTime` 一起使用。
- */
-
-import React from 'react';
-import { DatePicker } from '@fle-ui/next';
-import { Space } from 'antd';
-import moment from 'moment';
-
-const { RangePicker } = DatePicker;
-
-function range(start: any, end: any) {
-  const result = [];
-  for (let i = start; i < end; i++) {
-    result.push(i);
-  }
-  return result;
-}
-
-function disabledDate(current: any) {
-  // Can not select days before today and today
-  return current && current < moment().endOf('day');
-}
-
-function disabledDateTime() {
-  return {
-    disabledHours: () => range(0, 24).splice(4, 20),
-    disabledMinutes: () => range(30, 60),
-    disabledSeconds: () => [55, 56],
-  };
-}
-
-function disabledRangeTime(_: any, type: any) {
-  if (type === 'start') {
-    return {
-      disabledHours: () => range(0, 60).splice(4, 20),
-      disabledMinutes: () => range(30, 60),
-      disabledSeconds: () => [55, 56],
-    };
-  }
-  return {
-    disabledHours: () => range(0, 60).splice(20, 4),
-    disabledMinutes: () => range(0, 31),
-    disabledSeconds: () => [55, 56],
-  };
-}
-
-function Demo() {
-  return (
-    <Space direction="vertical" size={12}>
-      <DatePicker
-        format="YYYY-MM-DD HH:mm:ss"
-        disabledDate={disabledDate}
-        disabledTime={disabledDateTime}
-        showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
-      />
-      <DatePicker picker="month" disabledDate={disabledDate} />
-      <RangePicker disabledDate={disabledDate} />
-      <RangePicker
-        disabledDate={disabledDate}
-        disabledTime={disabledRangeTime}
-        showTime={{
-          hideDisabledOptions: true,
-          defaultValue: [
-            moment('00:00:00', 'HH:mm:ss'),
-            moment('11:59:59', 'HH:mm:ss'),
-          ],
-        }}
-        format="YYYY-MM-DD HH:mm:ss"
-      />
-    </Space>
-  );
-}
-export default Demo;

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

@@ -1,41 +0,0 @@
-/**
- * title: 禁用
- * desc: 选择框的不可用状态。你也可以通过数组单独禁用 RangePicker 的其中一项。
- */
-
-import React from 'react';
-import { DatePicker } from '@fle-ui/next';
-import { Space } from 'antd';
-import moment from 'moment';
-
-const { RangePicker } = DatePicker;
-
-const dateFormat = 'YYYY-MM-DD';
-
-function Demo() {
-  return (
-    <Space direction="vertical" size={12}>
-      <DatePicker defaultValue={moment('2015-06-06', dateFormat)} disabled />
-      <DatePicker
-        picker="month"
-        defaultValue={moment('2015-06', 'YYYY-MM')}
-        disabled
-      />
-      <RangePicker
-        defaultValue={[
-          moment('2015-06-06', dateFormat),
-          moment('2015-06-06', dateFormat),
-        ]}
-        disabled
-      />
-      <RangePicker
-        defaultValue={[
-          moment('2019-09-03', dateFormat),
-          moment('2019-11-22', dateFormat),
-        ]}
-        disabled={[false, true]}
-      />
-    </Space>
-  );
-}
-export default Demo;

package/components/date-picker/demos/extra-footer.tsx

@@ -1,30 +0,0 @@
-/**
- * title: 额外的页脚
- * desc: 在浮层中加入额外的页脚，以满足某些定制信息的需求。
- */
-
-import React from 'react';
-import { DatePicker } from '@fle-ui/next';
-import { Space } from 'antd';
-
-const { RangePicker } = DatePicker;
-
-class Demo extends React.Component {
-  state = {
-    size: 'default',
-  };
-
-  render() {
-    return (
-      <Space direction="vertical" size={12}>
-        <DatePicker renderExtraFooter={() => 'extra footer'} />
-        <DatePicker renderExtraFooter={() => 'extra footer'} showTime />
-        <RangePicker renderExtraFooter={() => 'extra footer'} />
-        <RangePicker renderExtraFooter={() => 'extra footer'} showTime />
-        <DatePicker renderExtraFooter={() => 'extra footer'} picker="month" />
-      </Space>
-    );
-  }
-}
-
-export default Demo;

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

@@ -1,51 +0,0 @@
-/**
- * title: 日期格式
- * desc: 使用 `format` 属性，可以自定义日期显示格式。
- */
-
-import React from 'react';
-import { DatePicker } from '@fle-ui/next';
-import { Space } from 'antd';
-import moment from 'moment';
-
-const { RangePicker } = DatePicker;
-
-const dateFormat = 'YYYY/MM/DD';
-const monthFormat = 'YYYY/MM';
-
-const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
-
-const customFormat = (value: any) =>
-  `custom format: ${value.format(dateFormat)}`;
-
-const Demo = () => {
-  return (
-    <Space direction="vertical" size={12}>
-      <DatePicker
-        defaultValue={moment('2015/01/01', dateFormat)}
-        format={dateFormat}
-      />
-      <DatePicker
-        defaultValue={moment('01/01/2015', dateFormatList[0])}
-        format={dateFormatList}
-      />
-      <DatePicker
-        defaultValue={moment('2015/01', monthFormat)}
-        format={monthFormat}
-        picker="month"
-      />
-      <RangePicker
-        defaultValue={[
-          moment('2015/01/01', dateFormat),
-          moment('2015/01/01', dateFormat),
-        ]}
-        format={dateFormat}
-      />
-      <DatePicker
-        defaultValue={moment('2015/01/01', dateFormat)}
-        format={customFormat}
-      />
-    </Space>
-  );
-};
-export default Demo;

package/components/date-picker/demos/presetted-ranges.tsx

@@ -1,40 +0,0 @@
-/**
- * title: 预设范围
- * desc: 可以预设常用的日期范围以提高用户体验。
- */
-
-import React from 'react';
-import { DatePicker } from '@fle-ui/next';
-import { Space } from 'antd';
-import moment from 'moment';
-
-const { RangePicker } = DatePicker;
-
-function onChange(dates: any, dateStrings: any) {
-  console.log('From: ', dates[0], ', to: ', dates[1]);
-  console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
-}
-
-function Demo() {
-  return (
-    <Space direction="vertical" size={12}>
-      <RangePicker
-        ranges={{
-          Today: [moment(), moment()],
-          'This Month': [moment().startOf('month'), moment().endOf('month')],
-        }}
-        onChange={onChange}
-      />
-      <RangePicker
-        ranges={{
-          Today: [moment(), moment()],
-          'This Month': [moment().startOf('month'), moment().endOf('month')],
-        }}
-        showTime
-        format="YYYY/MM/DD HH:mm:ss"
-        onChange={onChange}
-      />
-    </Space>
-  );
-}
-export default Demo;

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

@@ -1,24 +0,0 @@
-/**
- * title: 范围选择器
- * desc: 通过设置 `picker` 属性，指定范围选择器类型。
- */
-
-import React from 'react';
-import { DatePicker } from '@fle-ui/next';
-import { Space } from 'antd';
-
-const { RangePicker } = DatePicker;
-
-const Demo = () => {
-  return (
-    <Space direction="vertical" size={12}>
-      <RangePicker />
-      <RangePicker showTime />
-      <RangePicker picker="week" />
-      <RangePicker picker="month" />
-      <RangePicker picker="year" />
-    </Space>
-  );
-};
-
-export default Demo;

package/components/date-picker/demos/select-in-range.tsx

@@ -1,43 +0,0 @@
-/**
- * title: 选择不超过七天的范围
- * desc: 这里举例如何用 `onCalendarChange` 和 `disabledDate` 来限制动态的日期区间选择。
- */
-
-import React, { useState } from 'react';
-import { DatePicker } from '@fle-ui/next';
-
-const { RangePicker } = DatePicker;
-
-function Demo() {
-  const [dates, setDates] = useState<any>([]);
-  const [hackValue, setHackValue] = useState<any>();
-  const [value, setValue] = useState<any>();
-  const disabledDate = (current: any) => {
-    if (!dates || dates.length === 0) {
-      return false;
-    }
-    const tooLate = dates[0] && current.diff(dates[0], 'days') > 7;
-    const tooEarly = dates[1] && dates[1].diff(current, 'days') > 7;
-    return tooEarly || tooLate;
-  };
-
-  const onOpenChange = (open: boolean) => {
-    if (open) {
-      setHackValue([]);
-      setDates([]);
-    } else {
-      setHackValue(undefined);
-    }
-  };
-
-  return (
-    <RangePicker
-      value={hackValue || value}
-      disabledDate={disabledDate}
-      onCalendarChange={(val) => setDates(val)}
-      onChange={(val) => setValue(val)}
-      onOpenChange={onOpenChange}
-    />
-  );
-}
-export default Demo;

package/components/date-picker/demos/size.jsx

@@ -1,39 +0,0 @@
-/**
- * title: 三种大小
- * desc: 三种大小的输入框，若不设置，则为 `default`。
- */
-
-import React from 'react';
-import { DatePicker, Radio } from '@fle-ui/next';
-import { Space } from 'antd';
-
-const { RangePicker } = DatePicker;
-
-class Demo extends React.Component {
-  state = {
-    size: 'default',
-  };
-
-  handleSizeChange = (e) => {
-    this.setState({ size: e.target.value });
-  };
-
-  render() {
-    const { size } = this.state;
-    return (
-      <Space direction="vertical" size={12}>
-        <Radio.Group value={size} onChange={this.handleSizeChange}>
-          <Radio.Button value="large">Large</Radio.Button>
-          <Radio.Button value="default">Default</Radio.Button>
-          <Radio.Button value="small">Small</Radio.Button>
-        </Radio.Group>
-        <DatePicker size={size} />
-        <DatePicker size={size} picker="month" />
-        <RangePicker size={size} />
-        <DatePicker size={size} picker="week" />
-      </Space>
-    );
-  }
-}
-
-export default Demo;