@douyinfe/semi-ui 2.1.3 → 2.1.6-alpha.0

package/datePicker/_story/Density/index.jsx

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import DatePicker from '../../index';
+import { Tooltip } from '@douyinfe/semi-ui';
+
+export default function Demo() {
+    const dateStyle = { width: '100%', height: '100%', border: '1px solid #0077FA', display: 'flex', justifyContent: 'center', alignItems: 'center' };
+    const renderDate = (dayNumber, fullDate) => {
+        if (dayNumber === 1) {
+            return <Tooltip content={'Always Day 1'} >
+                <div style={dateStyle}>{dayNumber}</div>
+            </Tooltip>
+        }
+        return dayNumber;
+    };
+    return (
+        <div>
+            <div>通过 renderDate 可以自定义日期的显示内容</div>
+            <DatePicker renderDate={renderDate} />
+        </div>
+    );
+}

package/datePicker/_story/RenderFullDate/index.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import DatePicker from '../../index';
+import classNames from 'classnames';
+import '@douyinfe/semi-foundation/datePicker/datePicker.scss'; 
+
+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>
+        );
+    };
+
+    return (
+        <div>
+            <div>
+                通过 renderFullDate 可以自定义日期单元格子的渲染，API 提供日期的当前状态：是否被选中，是否是当前日等。
+            </div>  
+            <div>
+                单选选中
+                <DatePicker style={{ width: '230px' }} renderFullDate={renderFullDate} />
+            </div>
+            <div>
+                多选选中
+                <DatePicker style={{ width: '230px' }} multiple={true} renderFullDate={renderFullDate} />
+            </div>
+            <div>
+                范围选中
+                <DatePicker style={{ width: '230px' }} type={'dateRange'} renderFullDate={renderFullDate} />
+            </div>
+        </div>
+    );
+}

package/datePicker/_story/RenderFullDate/index.scss

@@ -0,0 +1,23 @@
+.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

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

@@ -0,0 +1,16 @@
+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>
+    );
+}