@para-ui/core 2.1.35 → 2.1.38

package/docs/view/datePicker/api.tsx

@@ -1,264 +0,0 @@
-/**
- * @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

@@ -1,185 +0,0 @@
-/**
- * @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

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

package/docs/view/datePicker/index.tsx

@@ -1,205 +0,0 @@
-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;