@douyinfe/semi-ui 2.19.1-alpha.2 → 2.19.2-alpha.0

package/datePicker/_story/Density/index.jsx

@@ -1,69 +0,0 @@
-import React, { useState } from 'react';
-import { DatePicker, ConfigProvider, ButtonGroup, Button } from '../../../index';
-import * as dateFns from 'date-fns';
-
-export default function Demo() {
-    const [direction, setDirection] = useState();
-    const presets = [
-        {
-            text: 'Today',
-            start: new Date(),
-            end: new Date(),
-        },
-        () => ({
-            text: 'Tomorrow',
-            start: new Date(new Date().valueOf() + 1000 * 3600 * 24),
-            end: new Date(new Date().valueOf() + 1000 * 3600 * 24),
-        }),
-    ];
-
-    return (
-        <div>
-            <div style={{ marginBottom: 20 }}>
-                <ButtonGroup>
-                    <Button onClick={() => setDirection('ltr')}>LTR</Button>
-                    <Button onClick={() => setDirection('rtl')}>RTL</Button>
-                </ButtonGroup>
-            </div>
-            <ConfigProvider direction={direction}>
-                <span>compact</span>
-                <DatePicker density="compact" />
-                <br /><br />
-
-                <span>compact+dateRange</span>
-                <DatePicker type="dateRange" density="compact" />
-                <br /><br />
-
-                <span>compact+dateTime</span>
-                <DatePicker type="dateTime" density="compact" defaultOpen />
-                <br /><br />
-
-                <span>compact+dateTimeRange</span>
-                <DatePicker type="dateTimeRange" density="compact" />
-                <br /><br />
-
-                <span>compact+year/month</span>
-                <DatePicker type="month" density="compact" />
-                <br /><br />
-
-                <span>compact+presets</span>
-                <DatePicker type="dateTime" density="compact" presets={presets} />
-                <br /><br />
-
-                <span>compact+needConfirm</span>
-                <DatePicker type="dateTime" density="compact" needConfirm />
-                <br /><br />
-
-                <span>compact+startDateOffset+endDateOffset</span>
-                <DatePicker
-                    type="dateRange"
-                    density="compact"
-                    weekStartsOn={1}
-                    startDateOffset={date => dateFns.startOfWeek(date, { weekStartsOn: 1 })}
-                    endDateOffset={date => dateFns.endOfWeek(date, { weekStartsOn: 1 })}
-                />
-                <br /><br />
-            </ConfigProvider>
-        </div>
-    );
-}

package/datePicker/_story/DisabledDate/index.js

@@ -1,189 +0,0 @@
-/* eslint-disable max-lines-per-function */
-import React, { useState, useMemo } from 'react';
-import { DatePicker, ConfigProvider, Select } from '@douyinfe/semi-ui';
-import * as _ from 'lodash';
-import * as dateFns from 'date-fns';
-import { utcToZonedTime } from 'date-fns-tz';
-
-const { Option } = Select;
-
-function Demo() {
-    const now = new Date();
-    const startDate = dateFns.addMinutes(dateFns.subDays(now, 1), 5);
-    const [timeZone, setTimeZone] = useState('GMT+09:00');
-    const gmtList = useMemo(() => {
-        const list = [];
-        for (let hourOffset = -11; hourOffset <= 14; hourOffset++) {
-            const prefix = hourOffset >= 0 ? '+' : '-';
-            const hOffset = Math.abs(parseInt(hourOffset, 10));
-            list.push(`GMT${prefix}${String(hOffset).padStart(2, '0')}:00`);
-        }
-        return list;
-    }, []);
-
-    return (
-        <div style={{ width: 300 }}>
-            <DatePicker
-                type="dateTime"
-                disabledTimePicker={true}
-                disabledDate={str => {
-                    const date = new Date(str);
-
-                    if (str.length <= 4) {
-                        return date.getFullYear() < 2015;
-                    }
-
-                    return date.getMonth() + 1 < 10;
-                }}
-                onChange={date => console.log('date changed', date)}
-            />
-            <DatePicker
-                type="dateTimeRange"
-                defaultValue={['2020-02-01 11:22:33', '2020-02-22 12:32:38']}
-                disabledTimePicker={true}
-                disabledDate={str => {
-                    const date = new Date(str);
-
-                    if (str.length <= 4) {
-                        return date.getFullYear() < 2015;
-                    }
-
-                    return date.getMonth() + 1 < 10;
-                }}
-            />
-            <br />
-            <strong>Disabled 17:00:00-18:00:00 today</strong>
-            <DatePicker
-                type="dateTime"
-                hideDisabledOptions={false}
-                disabledTime={date =>
-                    (dateFns.isToday(date)
-                        ? {
-                            disabledHours: () => [17, 18],
-                            disabledMinutes: hour => (19 === hour ? _.range(0, 10, 1) : []),
-                            disabledSeconds: (hour, minute) =>
-                                (hour === 20 && minute === 20 ? _.range(0, 20, 1) : []),
-                        }
-                        : null)
-                }
-            />
-            <div>
-                <h5>Month Picker</h5>
-                <DatePicker
-                    type="month"
-                    disabledDate={date =>
-                        // [2019, 2018].includes(dateFns.getYear(date)) ||
-                        2020 === dateFns.getYear(date) && [1, 2, 3].includes(dateFns.getMonth(date))
-                    }
-                />
-            </div>
-            {/* 开始时间不能早于当下时间+5min，结束时间要在7天内 */}
-            <DatePicker
-                type={'dateTimeRange'}
-                disabledDate={cur => {
-                    const deadDate = dateFns.addDays(now, 7);
-                    return dateFns.isAfter(cur, deadDate) || dateFns.isBefore(cur, startDate);
-                }}
-                disabledTime={(dates, panelType) => {
-                    if (dateFns.isToday(dates[0]) && panelType === 'left') {
-                        return {
-                            disabledHours: () => _.range(0, now.getHours(), 1),
-                            disabledMinutes: hour =>
-                                (now.getHours() === hour ? _.range(0, now.getMinutes() + 5, 1) : []),
-                        };
-                    }
-                }}
-                onChange={(...args) => console.log(...args)}
-            />
-            <br />
-            {/* 动态禁止时间，禁止选中之前的Date */}
-            <strong>Disabled date before rangeStart</strong>
-            <DatePicker
-                type={'dateRange'}
-                disabledDate={(cur, options) => {
-                    const { rangeStart } = options;
-                    const startDate = dateFns.parseISO(rangeStart);
-                    return dateFns.isBefore(cur, startDate);
-                }}
-                style={{ width: 240 }}
-            />
-            <br /><br />
-            <strong>type=month时禁止2020年且11月之前的日期 v1.10.0</strong>
-            <DatePicker
-                type={'month'}
-                disabledDate={cur => {
-                    if (cur.getFullYear() === 2020 && cur.getMonth() < 10) {
-                        return true;
-                    }
-                    return false;
-                }}
-                style={{ width: 240 }}
-            />
-            <br /><br />
-            <strong>type=month时禁止2008年-2020年 v1.10.0</strong>
-            <DatePicker
-                type={'month'}
-                style={{ width: 240 }}
-                disabledDate={cur => {
-                    const currentYear = cur.getFullYear();
-                    if (2008 <= currentYear && currentYear <= 2020) {
-                        return true;
-                    }
-                    return false;
-                }}
-            />
-            <br /><br />
-            <strong>fix disabledDate callback timeZone bug</strong>
-            <ConfigProvider timeZone={timeZone}>
-                <div style={{ width: 300 }}>
-                    <h5 style={{ margin: 10 }}>Select Time Zone:</h5>
-                    <Select
-                        placeholder={'请选择时区'}
-                        style={{ width: 300 }}
-                        value={timeZone}
-                        showClear={true}
-                        onSelect={value => setTimeZone(value)}
-                    >
-                        {gmtList.map(gmt => (
-                            <Option key={gmt} value={gmt}>
-                                {gmt}
-                            </Option>
-                        ))}
-                    </Select>
-                    <br />
-                    <br />
-                    <DatePicker
-                        disabledDate={str => {
-                            const date = new Date(str);
-                            const isDisabled = date.valueOf() === 1626274800000;
-                            if (isDisabled) {
-                                console.log(str);
-                            }
-                            return isDisabled;
-                        }}
-                        placeholder="禁用每月10号"
-                        onChange={date => {
-                            console.log('selected', date);
-                        }}
-                    />
-                    <DatePicker
-                        type="dateTime"
-                        disabledTime={str => {
-                            const date = new Date(str);
-                            const localDate = utcToZonedTime(date, timeZone);
-                            const isDisabled = localDate.getDate() === 15;
-                            return isDisabled ? ({ disabledHours: () => [18] }) : null;
-                        }}
-                        defaultPickerValue={new Date('2021-07-15 17:00:00')}
-                        placeholder="禁用7月15号下午6点"
-                        onChange={date => {
-                            console.log('selected', date);
-                        }}
-                    />
-                </div>
-            </ConfigProvider>
-        </div>
-    );
-}
-
-export default Demo;

package/datePicker/_story/ExceptionDemo/index.js

@@ -1,20 +0,0 @@
-import React, { useState } from 'react';
-import DatePicker from '../../index';
-
-export default function Demo() {
-    const [timestamp, setTimestamp] = useState(0);
-    const [timestamps, setTimestamps] = useState([0, 0]);
-    const log = (...args) => console.log(...args);
-
-    return (
-        <div>
-            <DatePicker value={timestamp} onChange={(str, date) => setTimestamp(date && date.valueOf())} />
-            <DatePicker
-                type={'dateTimeRange'}
-                value={timestamps}
-                onChange={(strs, dates) => setTimestamps(dates.map(d => d && d.valueOf()))}
-            />
-            <DatePicker defaultValue={[0, 0]} disabled />
-        </div>
-    );
-}

package/datePicker/_story/Multiple/index.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { DatePicker } from '../../../index';
-
-export default function Demo() {
-    return (
-        <div>
-            <span>date 多选</span>
-            <DatePicker multiple />
-            <br />
-
-            <span>date 多选，max=5</span>
-            <DatePicker multiple max={5} />
-            <br />
-
-            <span>date defaultValue</span>
-            <DatePicker multiple defaultValue={['2019-10-01', '2019-10-03', '2019-10-07']} />
-            <br />
-
-            <span>dateTime 多选，max=5</span>
-            <DatePicker type={'dateTime'} multiple max={5} />
-            <br />
-        </div>
-    );
-}

package/datePicker/_story/NeedConfirm/index.jsx

@@ -1,94 +0,0 @@
-import React, { useState } from 'react';
-import { parse } from 'date-fns';
-import { DatePicker } from '@douyinfe/semi-ui/';
-
-export default function Demo(props = {}) {
-    const [value, setValue] = useState('2019-10-01');
-    const dateTimeToken = 'yyyy-MM-dd HH:mm:ss';
-    const log = (...args) => console.log(...args);
-    const onChange = v => {
-        console.log(v);
-        setValue(v);
-    };
-    const printArgs = (...args) => {
-        console.log('printArgs: ', ...args);
-    };
-    const [open, setOpen] = useState(true);
-    const [value2, setValue2] = useState(parse('2019-10-02 8:30:02', dateTimeToken, new Date()));
-    const [value3] = useState(['2019-10-01', '20191002']);
-    const [value4, setValue4] = useState(['2019-10-01', '2019-10-09']);
-    const [value5] = useState(['2019-10-01', '2019-11-09']);
-    const [value6, setValue6] = useState(['2019-10-01', '20191109']);
-    return (
-        <>
-            <span>dateTime: defaultValue + onConfirm + needConfirm</span>
-            <DatePicker type="dateTime" defaultValue={new Date()} onChange={log} needConfirm />
-            <br />
-
-            <span>dateTimeRange: defaultValue + onConfirm + needConfirm</span>
-            <DatePicker type="dateTimeRange" defaultValue={value6} onChange={log} needConfirm />
-            <br />
-
-            <span>dateTime: value + onConfirm + needConfirm</span>
-            <DatePicker type="dateTime" value={value2} onConfirm={setValue2} needConfirm />
-            <br />
-
-            <span>dateTimeRange: value + onConfirm + needConfirm</span>
-            <DatePicker type="dateTimeRange" value={value4} onConfirm={setValue4} onChange={log} needConfirm />
-            <br />
-
-            <span>dateTimeRange: value + needConfirm</span>
-            <DatePicker type="dateTimeRange" value={value5} onChange={log} needConfirm />
-            <br />
-
-            <span>dateTimeRange: value</span>
-            <DatePicker
-                type="dateTimeRange"
-                value={[new Date(), new Date().valueOf() + 3610 * 1000 * 24 * 2]}
-                onChange={log}
-            />
-            <br /><br />
-
-            <div>v1.15 手动输入改变选中，blur 输入框恢复原来的值</div>
-            <DatePicker
-                type="dateTime"
-                needConfirm
-                defaultValue={new Date()}
-                onConfirm={
-                    (...args) => {
-                        console.log('Confirmed: ', ...args);
-                    }}
-                onCancel={
-                    (...args) => {
-                        console.log('Canceled: ', ...args);
-                    }}
-                onChange={
-                    (...args) => {
-                        console.log('Changed: ', ...args);
-                    }
-                }
-            />
-            <br />
-            <DatePicker
-                type="dateTimeRange"
-                needConfirm
-                style={{ width: 400 }}
-                defaultValue={[new Date(), new Date().valueOf() + 3610 * 1000 * 24 * 2]}
-                onConfirm={
-                    (...args) => {
-                        console.log('Confirmed: ', ...args);
-                    }}
-                onCancel={
-                    (...args) => {
-                        console.log('Canceled: ', ...args);
-                    }}
-                onChange={
-                    (...args) => {
-                        console.log('Changed: ', ...args);
-                    }
-                }
-            />
-            <br />
-        </>
-    );
-}

package/datePicker/_story/OnChangeWithDateFirst/index.jsx

@@ -1,37 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { DatePicker, Form, Button } from '../../../index';
-
-export default function Demo() {
-    const log = (...args) => console.log(...args);
-    const [date, setDate] = useState();
-
-    const onChangeControlled = (date, dateStr) => {
-        log(date, dateStr);
-        setDate(date);
-    };
-
-    return (
-        <div>
-            <div>
-                <h5>Uncontrolled</h5>
-                <DatePicker onChange={log} onChangeWithDateFirst />
-            </div>
-            <div>
-                <h5>Controlled</h5>
-                <DatePicker value={date} onChange={onChangeControlled} onChangeWithDateFirst />
-            </div>
-            <div>
-                <h5>Controlled in form</h5>
-                <Form onSubmit={log}>
-                    <Form.DatePicker
-                        field={'date'}
-                        initValue={date}
-                        onChange={onChangeControlled}
-                        onChangeWithDateFirst
-                    />
-                    <Button htmlType={'submit'}>提交</Button>
-                </Form>
-            </div>
-        </div>
-    );
-}

package/datePicker/_story/OverPopover/index.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { format } from 'date-fns';
-
-import { DatePicker, Button, Popover } from '../../../index';
-
-export default function Demo() {
-    return (
-        <Popover
-            content={
-                <DatePicker
-                    defaultValue={'2020-03-15 08:09:11'}
-                    triggerRender={({ value, inputValue, placeholder }) => (
-                        <Button>{(value && value[0] && format(value[0], 'yyyy-MM-dd')) || placeholder}</Button>
-                    )}
-                />
-            }
-            trigger={'click'}
-        >
-            <Button>Click Me</Button>
-        </Popover>
-    );
-}

package/datePicker/_story/RenderDate/index.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import DatePicker from '../../index';
-import { Tooltip } from '@douyinfe/semi-ui';
-
-/**
- * 使用 Chromatic UI 测试
- */
-export default function Demo() {
-    const dateStyle = { width: '100%', height: '100%', border: '1px solid #0077FA', display: 'flex', justifyContent: 'center', alignItems: 'center' };
-    const defaultValue = new Date('2021-01-10 00:00:00');
-    const renderDate = (dayNumber, fullDate) => {
-        if (dayNumber === 1) {
-            return <Tooltip content={'Always Day 1'} >
-                <div style={dateStyle}>{dayNumber}</div>
-            </Tooltip>;
-        }
-        return dayNumber;
-    };
-    return (
-        <div style={{ height: '100vh' }}>
-            <div>通过 renderDate 可以自定义日期的显示内容</div>
-            <DatePicker motion={false} defaultValue={defaultValue} defaultOpen renderDate={renderDate} />
-        </div>
-    );
-}
-Demo.parameters = {
-    chromatic: {
-        disableSnapshot: false,
-        delay: 3000,
-    },
-};

package/datePicker/_story/RenderFullDate/index.js

@@ -1,78 +0,0 @@
-import React from 'react';
-import { DatePicker, Space } from '@douyinfe/semi-ui';
-import classNames from 'classnames';
-import '@douyinfe/semi-foundation/datePicker/datePicker.scss'; 
-import './index.scss';
-
-/**
- * 开启 Chromatic UI 测试
- */
-export default function Demo() {
-    const dayStyle = {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '100%',
-        height: '100%',
-        margin: '0 auto',
-        boxSizing: 'border-box',
-        borderRadius: '50%',
-    };
-
-    const renderFullDate = (dayNumber, fullDate, dayStatus) => {
-        const { isToday, isInRange, isHover, isSelected, isSelectedStart, isSelectedEnd, isDisabled } = dayStatus;
-        const prefix = 'components-datepicker-demo';
-        const dateCls = classNames({
-            [`${prefix}-day-today`]: isToday,
-            [`${prefix}-day-inrange`]: isInRange,
-            [`${prefix}-day-hover`]: isHover,
-            [`${prefix}-day-selected`]: isSelected,
-            [`${prefix}-day-selected-start`]: isSelectedStart,
-            [`${prefix}-day-selected-end`]: isSelectedEnd,
-            [`${prefix}-day-disabled`]: isDisabled,
-        });
-        return (
-            <div style={dayStyle} className={dateCls}>
-                {dayNumber}
-            </div>
-        );
-    };
-    const props = {
-        defaultOpen: true,
-        position: 'bottomLeft',
-        autoAdjustOverflow: false,
-        motion: false,
-    };
-    const singleDefaultValue = new Date('2021-01-08');
-    const multipleDefaultValue = [new Date('2021-01-08'), new Date('2021-01-09'), new Date('2021-01-10'), new Date('2021-01-19')];
-    const rangeDefaultValue = [new Date('2021-12-08'), new Date('2021-01-20')];
-
-    return (
-        <div style={{ height: '100vh' }}>
-            <div>
-                通过 renderFullDate 可以自定义日期单元格子的渲染，API 提供日期的当前状态：是否被选中，是否是当前日等。
-            </div>  
-            <Space wrap spacing={[12, 400]}>
-                <div>
-                    单选选中
-                    <DatePicker {...props} style={{ width: '230px' }} renderFullDate={renderFullDate} defaultValue={singleDefaultValue} />
-                </div>
-                <div>
-                    多选选中
-                    <DatePicker {...props} style={{ width: '230px' }} multiple={true} renderFullDate={renderFullDate} defaultValue={multipleDefaultValue} />
-                </div>
-                <div>
-                    范围选中
-                    <DatePicker {...props} style={{ width: '230px' }} type={'dateRange'} renderFullDate={renderFullDate} defaultValue={rangeDefaultValue} />
-                </div>
-            </Space>
-        </div>
-    );
-}
-Demo.parameters = {
-    chromatic: {
-        disableSnapshot: false,
-        delay: 3000,
-        viewports: [1800]
-    },
-};

package/datePicker/_story/RenderFullDate/index.scss

@@ -1,23 +0,0 @@
-.components-datepicker-demo-day-today {
-    color: #0077fa;
-    background: rgba(46, 50, 56, 0.09);
-}
-
-.components-datepicker-demo-day-inrange {
-    background: #eaf5ff;
-}
-
-.components-datepicker-demo-day-hover {
-    background: rgba(46, 50, 56, 0.09);
-}
-
-.components-datepicker-demo-day-selected,
-.components-datepicker-demo-day-selected-start,
-.components-datepicker-demo-day-selected-end {
-    color: #fff;
-    background: #0077fa;
-}
-
-.components-datepicker-demo-day-disabled {
-    background: rgba(46, 50, 56, 0.04);
-}

package/datePicker/_story/SyncSwitchMonth/index.js

@@ -1,45 +0,0 @@
-import React from 'react';
-import DatePicker from '../../index';
-
-export default function Demo() {
-    return (
-        <div>
-            <div>
-                <div> dateTimeRange类型 ，开启 syncSwitchMonth </div><br />
-                <DatePicker
-                    syncSwitchMonth={true}
-                    type="dateTimeRange"
-                    style={{ width: 340 }}
-                />
-                <br /><br />
-            </div>
-            <div>
-                <div> dateTimeRange 类型，关闭 syncSwitchMonth </div><br />
-                <DatePicker
-                    syncSwitchMonth={false}
-                    type="dateTimeRange"
-                    style={{ width: 340 }}
-                />
-                <br /><br />
-            </div>
-            <div>
-                <div> dateRange类型 ，开启 syncSwitchMonth </div><br />
-                <DatePicker
-                    syncSwitchMonth={true}
-                    type="dateRange"
-                    style={{ width: 340 }}
-                />
-                <br /><br />
-            </div>
-            <div>
-                <div> dateRange类型 关闭 syncSwitchMonth </div><br />
-                <DatePicker
-                    syncSwitchMonth={false}
-                    type="dateRange"
-                    style={{ width: 340 }}
-                />
-                <br /><br />
-            </div>
-        </div>
-    );
-}

package/datePicker/_story/TimePickerOpts/index.jsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import DatePicker from '../../index';
-
-export default function Demo() {
-    return (
-        <div>
-            <div>minuteStep: 15</div>
-            <DatePicker
-                type="dateTimeRange"
-                timePickerOpts={{
-                    minuteStep: 15,
-                }}
-            /><br /><br />
-        </div>
-    );
-}