@para-ui/core 2.1.32 → 2.1.35

package/docs/view/datePicker/api.tsx

@@ -0,0 +1,264 @@
+/**
+ * @author Hanz
+ * @date 2022/2/16 下午5:58
+ * @description datePicker api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: '类名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: '样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'allowClear',
+        desc: '是否显示清除按钮',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'autoFocus',
+        desc: '自动获取焦点',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'bordered',
+        desc: '是否有边框',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'clearIcon',
+        desc: '自定义的清除图标',
+        type: 'ReactNode'
+    },
+    {
+        name: 'dateRender',
+        desc: '自定义日期单元格的内容',
+        type: `(currentDate: moment, today: moment) => React.ReactNode`
+    },
+    {
+        name: 'disabled',
+        desc: '禁用',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'disabledDate',
+        desc: '不可选择的日期',
+        type: '(currentDate: moment) => boolean'
+    },
+    {
+        name: 'dropdownClassName',
+        desc: '额外的弹出层类名',
+        type: 'string'
+    },
+    {
+        name: 'getPopupContainer',
+        desc: '定义浮层的容器，默认为 body 上新建 div',
+        type: '(trigger) => trigger'
+    },
+    {
+        name: 'inputReadOnly',
+        desc: '设置输入框为只读（避免在移动设备上打开虚拟键盘）',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'open',
+        desc: '控制弹层是否展开',
+        type: 'boolean'
+    },
+    {
+        name: 'showTime',
+        desc: '增加时间选择功能',
+        type: 'Object | boolean',
+        default: 'TimePicker Options'
+    },
+    {
+        name: 'panelRender',
+        desc: '自定义渲染面板',
+        type: '(panelNode) => ReactNode'
+    },
+    {
+        name: 'picker',
+        desc: '设置选择器类型',
+        type: 'date | week | month | quarter | year',
+        default: 'date'
+    },
+    {
+        name: 'placeholder',
+        desc: '输入框提示文字',
+        type: 'string | [string, string]'
+    },
+    {
+        name: 'popupStyle',
+        desc: '额外的弹出层样式',
+        type: 'CSSProperties'
+    },
+    {
+        name: 'renderExtraFooter',
+        desc: '在面板中添加额外的页脚',
+        type: '(mode) => React.ReactNode'
+    },
+    {
+        name: 'size',
+        desc: '输入框大小,目前无效',
+        type: 'small| medium | large'
+    },
+    {
+        name: 'style',
+        desc: '自定义输入框样式',
+        type: 'CSSProperties'
+    },
+    {
+        name: 'suffixIcon',
+        desc: '自定义的选择框后缀图标',
+        type: 'ReactNode'
+    },
+    {
+        name: 'onOpenChange',
+        desc: '弹出日历和关闭日历的回调',
+        type: '(open) => void'
+    },
+    {
+        name: 'onPanelChange',
+        desc: '日历面板切换的回调',
+        type: '(value, mode) => void'
+    }
+];
+
+export const datePickerApiData: RowsData = [
+    {
+        name: 'defaultPickerValue',
+        desc: '默认面板日期',
+        type: 'moment'
+    },
+    {
+        name: 'defaultValue',
+        desc: '默认日期，如果开始时间或结束时间为 null 或者 undefined，日期范围将是一个开区间',
+        type: 'moment'
+    },
+    {
+        name: 'disabledTime',
+        desc: '不可选择的时间',
+        type: 'function(date)'
+    },
+    {
+        name: 'format',
+        desc: '设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 moment.js',
+        type: `string | (value: moment) => string | (string | (value: moment) => string)[]`,
+        default: 'YYYY-MM-DD'
+    },
+    {
+        name: 'showNow',
+        desc: '当设定了 showTime 的时候，面板是否显示“此刻”按钮',
+        type: 'boolean'
+    },
+    {
+        name: 'showTime.defaultValue',
+        desc: '设置用户选择日期时默认的时分秒',
+        type: 'moment',
+        default: 'moment()'
+    },
+    {
+        name: 'showToday',
+        desc: '是否展示“今天”按钮',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'value',
+        desc: '日期',
+        type: 'moment'
+    },
+    {
+        name: 'onChange',
+        desc: '时间发生变化的回调',
+        type: 'function(date: moment, dateString: string)',
+    },
+    {
+        name: 'onOk',
+        desc: '点击确定按钮的回调',
+        type: 'function()'
+    }
+];
+export const rangePickerApiData: RowsData = [
+    {
+        name: 'allowEmpty',
+        desc: '允许起始项部分为空',
+        type: '[boolean, boolean]',
+        default: '[false, false]'
+    },
+    {
+        name: 'dateRender',
+        desc: '自定义日期单元格的内容',
+        type: '(currentDate: moment, today: moment, info: { range: start | end }) => React.ReactNode'
+    },
+    {
+        name: 'defaultPickerValue',
+        desc: '默认面板日期',
+        type: 'moment[]'
+    },
+    {
+        name: 'defaultValue',
+        desc: '默认日期',
+        type: 'moment[]'
+    },
+    {
+        name: 'disabled',
+        desc: '禁用起始项',
+        type: '[boolean, boolean]'
+    },
+    {
+        name: 'disabledTime',
+        desc: '不可选择的时间',
+        type: 'function(date: moment, partial: start | end)'
+    },
+    {
+        name: 'format',
+        desc: '展示的日期格式',
+        type: 'string',
+        default: 'YYYY-MM-DD HH:mm:ss'
+    },
+    {
+        name: 'ranges',
+        desc: '预设时间范围快捷选择',
+        type: '{ [range: string]: moment[] } | { [range: string]: () => moment[] }'
+    },
+    {
+        name: 'separator',
+        desc: '设置分隔符',
+        type: 'ReactNode'
+    },
+    {
+        name: 'showTime.defaultValue',
+        desc: '设置用户选择日期时默认的时分秒',
+        type: 'moment[]',
+        default: '[moment(), moment()]'
+    },
+    {
+        name: 'value',
+        desc: '日期',
+        type: 'moment[]'
+    },
+    {
+        name: 'onCalendarChange',
+        desc: '待选日期发生变化的回调',
+        type: 'function(dates: [moment, moment], dateStrings: [string, string], info: { range:start|end })',
+    },
+    {
+        name: 'onChange',
+        desc: '日期范围发生变化的回调',
+        type: 'function(dates: [moment, moment], dateStrings: [string, string])',
+    }
+];
+
+export default apiData;

package/docs/view/datePicker/codeString.tsx

@@ -0,0 +1,185 @@
+/**
+ * @author Hanz
+ * @date 2022/2/16 下午5:58
+ * @description
+ */
+export const basicDatePicker = `
+import DatePicker from '@para-ui/core/DatePicker';
+import {Moment} from 'moment';
+
+const onChange = (date: Moment | null, dateString: string) => {
+    console.log(date, dateString);
+};
+
+<DatePicker onChange={onChange}/>
+<DatePicker onChange={onChange} picker="week"/>
+<DatePicker onChange={onChange} picker="month"/>
+<DatePicker onChange={onChange} picker="quarter"/>
+<DatePicker onChange={onChange} picker="year"/>
+<DatePicker label={'必填'}
+            required={true}
+            labelTooltip={{tooltip: '帮助提示'}}
+            error={true}
+            helperText={'请选择'}/>
+<DatePicker label={'必填'} labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}}/>
+`;
+
+export const rangeDatePicker = `
+import DatePicker from '@para-ui/core/DatePicker';
+const {RangePicker} = DatePicker;
+
+<RangePicker/>
+<RangePicker showTime/>
+<RangePicker picker="week"/>
+<RangePicker picker="month"/>
+<RangePicker picker="year"/>
+<RangePicker label={'必填'} labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}}/>
+`;
+
+export const formatDatePicker = `
+import DatePicker from '@para-ui/core/DatePicker';
+import moment, {Moment} from 'moment';
+const {RangePicker} = DatePicker;
+
+const dateFormat = 'YYYY/MM/DD';
+const weekFormat = 'MM/DD';
+const monthFormat = 'YYYY/MM';
+const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
+
+const customFormat = (value: Moment) => \`custom format: \${value.format(dateFormat)}\`;
+
+const customWeekStartEndFormat = (value: Moment) =>
+    \`\${moment(value).startOf('week').format(weekFormat)} ~ \${moment(value).endOf('week').format(weekFormat)}\`;
+    
+<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"/>
+<DatePicker defaultValue={moment()} format={customWeekStartEndFormat} picker="week"/>
+<RangePicker
+    defaultValue={[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]}
+    format={dateFormat}
+/>
+<DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={customFormat}/>
+`;
+
+export const notSelectDatePicker = `
+import DatePicker from '@para-ui/core/DatePicker';
+import moment, {Moment} from 'moment';
+const {RangePicker} = DatePicker;
+
+const range = (start: number, end: number) => {
+    const result = [];
+    for (let i = start; i < end; i++) {
+        result.push(i);
+    }
+    return result;
+};
+
+const disabledDate = (current: Moment) => {
+    return current && current < moment().endOf('day');
+};
+
+const disabledDateTime = () => {
+    return {
+        disabledHours: () => range(0, 24).splice(4, 20),
+        disabledMinutes: () => range(30, 60),
+        disabledSeconds: () => [55, 56],
+    };
+};
+
+const disabledRangeTime = (_: Moment | null, type: 'start' | 'end') => {
+    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],
+    };
+};
+
+<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"
+/>
+`;
+
+export const presetRangePicker = `
+import DatePicker from '@para-ui/core/DatePicker';
+import moment from 'moment';
+const {RangePicker} = DatePicker;
+
+<RangePicker
+    ranges={{
+        Today: [moment(), moment()],
+        'This Month': [moment().startOf('month'), moment().endOf('month')],
+    }}
+/>
+<RangePicker
+    ranges={{
+        Today: [moment(), moment()],
+        'This Month': [moment().startOf('month'), moment().endOf('month')],
+    }}
+    showTime
+    format="YYYY/MM/DD HH:mm:ss"
+/>
+`;
+
+export const notOverSevenRangePicker = `
+import DatePicker from '@para-ui/core/DatePicker';
+const {RangePicker} = DatePicker;
+
+const [dates, setDates] = React.useState<any>([]);
+const [value, setValue] = React.useState<any>();
+
+const disabledDateNotOverSeven = (current: Moment) => {
+    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) {
+        setDates([]);
+    }
+};
+
+<RangePicker
+    value={value}
+    disabledDate={disabledDateNotOverSeven}
+    onCalendarChange={val => setDates(val)}
+    onChange={val => setValue(val)}
+    onOpenChange={onOpenChange}
+/>
+`;
+
+export const extraFooterDatePicker = `
+import DatePicker from '@para-ui/core/DatePicker';
+const {RangePicker} = DatePicker;
+
+<DatePicker renderExtraFooter={() => 'extra footer'} />
+<DatePicker renderExtraFooter={() => 'extra footer'} showTime />
+<RangePicker renderExtraFooter={() => 'extra footer'} />
+<RangePicker renderExtraFooter={() => 'extra footer'} showTime />
+<DatePicker renderExtraFooter={() => 'extra footer'} picker="month" />
+`;

package/docs/view/datePicker/index.scss

@@ -0,0 +1,8 @@
+.paraui-datePicker-demo {
+  .code-box-demo {
+    .datePicker-code {
+      display: inline-flex;
+      flex-direction: column;
+    }
+  }
+}

package/docs/view/datePicker/index.tsx

@@ -0,0 +1,205 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import DatePicker from 'src/DatePicker';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {
+    basicDatePicker,
+    rangeDatePicker,
+    formatDatePicker,
+    notSelectDatePicker,
+    presetRangePicker,
+    notOverSevenRangePicker,
+    extraFooterDatePicker
+} from './codeString';
+import apiData, {datePickerApiData, rangePickerApiData} from './api';
+import moment, {Moment} from 'moment';
+import './index.scss';
+
+//datePicker
+const ParaDatePicker: FunctionComponent = () => {
+    const {RangePicker} = DatePicker;
+    const onChange = (date: Moment | null, dateString: string) => {
+        console.log(date, dateString);
+    };
+    const dateFormat = 'YYYY/MM/DD';
+    const weekFormat = 'MM/DD';
+    const monthFormat = 'YYYY/MM';
+    const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
+
+    const customFormat = (value: Moment) => `custom format: ${value.format(dateFormat)}`;
+
+    const customWeekStartEndFormat = (value: Moment) =>
+        `${moment(value).startOf('week').format(weekFormat)} ~ ${moment(value)
+            .endOf('week')
+            .format(weekFormat)}`;
+
+
+    const range = (start: number, end: number) => {
+        const result = [];
+        for (let i = start; i < end; i++) {
+            result.push(i);
+        }
+        return result;
+    };
+
+    const disabledDate = (current: Moment) => {
+        return current && current < moment().endOf('day');
+    };
+    const disabledDateTime = () => {
+        return {
+            disabledHours: () => range(0, 24).splice(4, 20),
+            disabledMinutes: () => range(30, 60),
+            disabledSeconds: () => [55, 56],
+        };
+    };
+    const disabledRangeTime = (_: Moment | null, type: 'start' | 'end') => {
+        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],
+        };
+    };
+
+    const [dates, setDates] = React.useState<any>([]);
+    const [value, setValue] = React.useState<any>();
+    const disabledDateNotOverSeven = (current: Moment) => {
+        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) {
+            setDates([]);
+        }
+    };
+
+    return (
+        <div className={'paraui-datePicker-demo paraui-form'}>
+            <Title name={'日期选择框'}>代码演示</Title>
+            <CodeBox code={basicDatePicker} title={'基本'} description={'最简单的用法，在浮层中可以选择或者输入日期。'}>
+                <section className={'datePicker-code'}>
+                    <DatePicker onChange={onChange}/>
+                    <DatePicker onChange={onChange} picker="week"/>
+                    <DatePicker onChange={onChange} picker="month"/>
+                    <DatePicker onChange={onChange} picker="quarter"/>
+                    <DatePicker onChange={onChange} picker="year"/>
+                    <DatePicker label={'必填'}
+                                required={true}
+                                labelTooltip={{tooltip: '帮助提示'}}
+                                error={true}
+                                helperText={'请选择'}/>
+                    <DatePicker label={'必填'} labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}}/>
+                </section>
+            </CodeBox>
+            <CodeBox code={rangeDatePicker} title={'范围选择器'} description={'通过设置 picker 属性，指定范围选择器类型。'}>
+                <section className={'datePicker-code'}>
+                    <RangePicker/>
+                    <RangePicker showTime/>
+                    <RangePicker picker="week"/>
+                    <RangePicker picker="month"/>
+                    <RangePicker picker="year"/>
+                    <RangePicker
+                        label={'必填'}
+                        required={true}
+                        labelTooltip={{tooltip: '帮助提示'}}
+                        error={true}
+                        helperText={'请选择'}/>
+                    <RangePicker label={'必填'} labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}}/>
+                </section>
+            </CodeBox>
+            <CodeBox code={formatDatePicker} title={'日期格式'} description={'使用 format 属性，可以自定义日期显示格式。'}>
+                <section className={'datePicker-code'}>
+                    <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"/>
+                    <DatePicker defaultValue={moment()} format={customWeekStartEndFormat} picker="week"/>
+                    <RangePicker
+                        defaultValue={[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]}
+                        format={dateFormat}
+                    />
+                    <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={customFormat}/>
+                </section>
+            </CodeBox>
+            <CodeBox code={notSelectDatePicker} title={'不可选择日期和时间'}
+                     description={'可用 disabledDate 和 disabledTime 分别禁止选择部分日期和时间，其中 disabledTime 需要和 showTime 一起使用。'}>
+                <section className={'datePicker-code'}>
+                    <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"
+                    />
+                </section>
+            </CodeBox>
+            <CodeBox code={presetRangePicker} title={'预设范围'}
+                     description={'可以预设常用的日期范围以提高用户体验。'}>
+                <section className={'datePicker-code'}>
+                    <RangePicker
+                        ranges={{
+                            Today: [moment(), moment()],
+                            'This Month': [moment().startOf('month'), moment().endOf('month')],
+                        }}
+                    />
+                    <RangePicker
+                        ranges={{
+                            Today: [moment(), moment()],
+                            'This Month': [moment().startOf('month'), moment().endOf('month')],
+                        }}
+                        showTime
+                        format="YYYY/MM/DD HH:mm:ss"
+                    />
+                </section>
+            </CodeBox>
+            <CodeBox code={notOverSevenRangePicker} title={'选择不超过七天的范围'}
+                     description={'这里举例如何用 onCalendarChange 和 disabledDate 来限制动态的日期区间选择。'}>
+                <section className={'datePicker-code'}>
+                    <RangePicker
+                        value={value}
+                        disabledDate={disabledDateNotOverSeven}
+                        onCalendarChange={val => setDates(val)}
+                        onChange={val => setValue(val)}
+                        onOpenChange={onOpenChange}
+                    />
+                </section>
+            </CodeBox>
+            <CodeBox code={extraFooterDatePicker} title={'额外的页脚'}
+                     description={'在浮层中加入额外的页脚，以满足某些定制信息的需求。'}>
+                <section className={'datePicker-code'}>
+                    <DatePicker renderExtraFooter={() => 'extra footer'}/>
+                    <DatePicker renderExtraFooter={() => 'extra footer'} showTime/>
+                    <RangePicker renderExtraFooter={() => 'extra footer'}/>
+                    <RangePicker renderExtraFooter={() => 'extra footer'} showTime/>
+                    <DatePicker renderExtraFooter={() => 'extra footer'} picker="month"/>
+                </section>
+            </CodeBox>
+
+            <APITable data={apiData} subTitle={'DatePicker、 RangePicker 共享的 API。'}/>
+            <APITable data={datePickerApiData} showApi={false} subTitle={'DatePicker'}/>
+            <APITable data={rangePickerApiData} showApi={false} subTitle={'RangePicker'}/>
+        </div>
+    );
+};
+
+export default ParaDatePicker;