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

package/datePicker/_story/AllTypes/index.js

@@ -1,19 +0,0 @@
-import React, { useMemo, useState, useEffect } from 'react';
-import DatePicker from '../../index';
-
-const Item = ({ children }) => <div style={{ display: 'flex', marginBottom: 20 }}>{children}</div>;
-
-function Demo() {
-    return (
-        <div>
-            <Item>
-                <DatePicker type={'dateTime'} format={'yyyy-MM-dd'} defaultValue={new Date()} />
-            </Item>
-            <Item>
-                <DatePicker type={'dateTime'} format={'yyyy-MM-dd mm'} defaultValue={new Date()} />
-            </Item>
-        </div>
-    );
-}
-
-export default Demo;

package/datePicker/_story/AutoSwitchDate/index.jsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { DatePicker  } from '../../../index';
-
-export default function Demo() {
-    return (
-        <div>
-            <div>支持更改年月时不更新日期 v1.13.0</div><br/><br/>
-            <h4>默认可以直接切换</h4>
-            <DatePicker defaultValue={new Date()} onChange={console.log} /><br/><br/>
-            <h4>用户可以关闭直接切换</h4>
-            <DatePicker defaultValue={new Date()} autoSwitchDate={false} onChange={console.log}/><br/><br/>
-        </div>
-    );
-}

package/datePicker/_story/Autofocus/index.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import DatePicker from '../../index';
-
-export default function Demo() {
-    return (
-        <div>
-            <div>支持 autoFocus v1.10.0</div>
-            <DatePicker autoFocus={true} /><br/><br/>
-        </div>
-    );
-}

package/datePicker/_story/BetterRangePicker/index.jsx

@@ -1,172 +0,0 @@
-/* eslint-disable max-lines-per-function */
-import React from 'react';
-import { addDays } from 'date-fns';
-
-import { DatePicker, Typography, Space, InputGroup, Input, InputNumber, Row } from '../../../index';
-import RTLWrapper from '../../../configProvider/_story/RTLDirection/RTLWrapper';
-
-const { Title, Text } = Typography;
-const dayOffset = 1;
-const baseYear = 2019;
-const baseDay = 8;
-const baseMon = 8;
-const presets = [
-    {
-        text: 'Today',
-        start: new Date(),
-        end: new Date(),
-    },
-    {
-        text: 'Next Day',
-        start: addDays(new Date(), dayOffset),
-        end: addDays(new Date(), dayOffset),
-    },
-];
-const baseDate = new Date(baseYear, baseMon, baseDay, 8, 8, 8, 8);
-const currentValue = [new Date(baseDate), new Date(baseDate).setDate(baseDay + dayOffset)];
-
-Demo.parameters = {
-    chromatic: { disableSnapshot: false },
-};
-
-export default function Demo(props = {}) {
-    const style = { width: 240 };
-    return (
-        <RTLWrapper>
-            <Row style={{ marginBottom: 20 }}>
-                <Title heading={3}>不同尺寸</Title>
-                <div style={{ marginBottom: 4 }}>
-                    <Space>
-                        <Text>default size</Text>
-                        <DatePicker
-                            onFocus={console.log}
-                            onClear={e => {
-                                console.log('clear', e);
-                            }}
-                            type="dateRange"
-                            style={style}
-                            onChange={console.log}
-                        />
-                        <DatePicker />
-                    </Space>
-                </div>
-                <div style={{ marginBottom: 4 }}>
-                    <Space>
-                        <Text>small size</Text>
-                        <DatePicker type="dateRange" size="small" style={style} />
-                        <DatePicker size="small" />
-                    </Space>
-                </div>
-                <div style={{ marginBottom: 4 }}>
-                    <Space>
-                        <Text>large size</Text>
-                        <DatePicker type="dateRange" size="large" style={{ width: 280 }} />
-                        <DatePicker size="large" />
-                    </Space>
-                </div>
-            </Row>
-            <Row style={{ marginBottom: 20 }}>
-                <Title heading={3}>prefix、insetLabel</Title>
-                <div style={{ marginBottom: 4 }}>
-                    <Space>
-                        <Text>prefix</Text>
-                        <DatePicker prefix="Semi Design" type="dateRange" style={{ width: 340 }} />
-                    </Space>
-                </div>
-                <div style={{ marginBottom: 4 }}>
-                    <Space>
-                        <Text>insetLabel</Text>
-                        <DatePicker
-                            insetLabel="放假时间"
-                            type="dateRange"
-                            defaultValue={['2021-06-10', '2021-06-17']}
-                            showClear
-                            style={{ width: 340 }}
-                        />
-                    </Space>
-                </div>
-            </Row>
-            <Row style={{ marginBottom: 20 }}>
-                <Title heading={3}>dateTimeRange</Title>
-                <Space>
-                    <DatePicker type="dateTimeRange" showClear needConfirm style={{ width: 360 }} />
-                    <DatePicker
-                        type="dateTimeRange"
-                        defaultValue={currentValue}
-                        placeholder="请选择日期"
-                        style={{ width: 400 }}
-                    />
-                    <DatePicker
-                        type="dateTimeRange"
-                        placeholder={['请选择开始日期', '请选择结束日期']}
-                        style={{ width: 360 }}
-                    />
-                </Space>
-            </Row>
-            <Row style={{ marginBottom: 20 }}>
-                <Title heading={3}>对比不同校验状态</Title>
-                <div style={{ marginBottom: 4 }}>
-                    <Space>
-                        <Text>default status</Text>
-                        <DatePicker />
-                        <DatePicker type="dateRange" style={style} />
-                    </Space>
-                </div>
-                <div style={{ marginBottom: 4 }}>
-                    <Space>
-                        <Text>warning status</Text>
-                        <DatePicker validateStatus="warning" />
-                        <DatePicker type="dateRange" validateStatus="warning" style={style} />
-                    </Space>
-                </div>
-                <div style={{ marginBottom: 4 }}>
-                    <Space>
-                        <Text>error status</Text>
-                        <DatePicker validateStatus="error" />
-                        <DatePicker type="dateRange" validateStatus="error" style={style} />
-                    </Space>
-                </div>
-                <div style={{ marginBottom: 4 }}>
-                    <Space>
-                        <Text>disabled status</Text>
-                        <DatePicker disabled />
-                        <DatePicker type="dateRange" disabled style={style} />
-                    </Space>
-                </div>
-            </Row>
-            <Row style={{ marginBottom: 20 }}>
-                <Title heading={3}>输入框组合</Title>
-                <div style={{ marginBottom: 4 }}>
-                    <InputGroup>
-                        <Input placeholder="Name" style={{ width: 100 }} />
-                        <DatePicker type="dateRange" placeholder={['入学时间', '离校时间']} style={style} />
-                        <InputNumber placeholder="Score" style={{ width: 140 }} />
-                    </InputGroup>
-                </div>
-                <div style={{ marginBottom: 4 }}>
-                    <InputGroup>
-                        <Input placeholder="Name" style={{ width: 100 }} />
-                        <DatePicker type="dateRange" placeholder={['入学时间', '离校时间']} style={style} />
-                    </InputGroup>
-                </div>
-                <div style={{ marginBottom: 4 }}>
-                    <InputGroup>
-                        <DatePicker type="dateRange" placeholder={['入学时间', '离校时间']} style={style} />
-                        <Input placeholder="Name" style={{ width: 100 }} />
-                        <InputNumber placeholder="Score" style={{ width: 140 }} />
-                    </InputGroup>
-                </div>
-            </Row>
-            <Row style={{ marginBottom: 20 }}>
-                <Title heading={3}>带presets</Title>
-                <div style={{ marginBottom: 4 }}>
-                    <Space>
-                        <DatePicker presets={presets} />
-                        <DatePicker type="dateRange" presets={presets} style={style} />
-                        <DatePicker type="dateTimeRange" presets={presets} style={{ width: 360 }} />
-                    </Space>
-                </div>
-            </Row>
-        </RTLWrapper>
-    );
-}

package/datePicker/_story/Callbacks/index.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-import { DatePicker } from '../../../index';
-
-export default function Demo() {
-    const createLog = (event, cb) => {
-        return function log(...args) {
-            console.log(`${event}: `, ...args);
-
-            if (typeof cb === 'function') {
-                cb(...args);
-            }
-        };
-    };
-
-    return (
-        <DatePicker
-            defaultValue={new Date()}
-            onBlur={createLog('onBlur')}
-            onFocus={createLog('onFocus')}
-            onChange={createLog('onChange')}
-        />
-    );
-}

package/datePicker/_story/ControlledDemo/index.js

@@ -1,149 +0,0 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
-import DatePicker from '../../index';
-import { Button, Form, withField } from '../../../index';
-
-const FormDatePicker = withField(props => {
-    const { value, onChange, ...rest } = props;
-    const mValue = !value ? null : +value; // number => Date 传入组件
-    const mOnChange = (newValue, newDate) => {
-        // 直接用第2个参数更方便
-        // 当删除日期时，newDate为undefined
-        if (!newDate) {
-            props.onChange(undefined);
-            return;
-        }
-        // Date => number 反映给上层
-        props.onChange(+newDate);
-    };
-    return <DatePicker {...rest} value={mValue} onChange={mOnChange} />;
-});
-
-const Container = ({ children }) => {
-    return <div style={{ display: 'flex', flexDirection: 'column' }}>{children}</div>;
-};
-
-const Item = ({ children }) => (
-    <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row', marginBottom: 20 }}>{children}</div>
-);
-
-function Demo(props = {}) {
-    const [value, setValue] = useState('2019-10-01');
-    const onChange = v => {
-        console.log(v);
-        setValue(v);
-    };
-    const createOnChangeWithLog = setFn => (str, date) => {
-        console.log(str, date);
-        if (typeof setFn === 'function') {
-            setFn(str);
-        }
-    };
-    const printArgs = (...args) => {
-        console.log('printArgs: ', ...args);
-    };
-    const [open, setOpen] = useState(true);
-    const [value2, setValue2] = useState(new Date('2019-10-02 8:30:02'));
-    const [value3] = useState(['2019-10-01', '20191002']);
-    const [value4, setValue4] = useState(['2019-10-01', '2019-10-09']);
-    const [value5] = useState(['2019-10-01', '20191109']);
-    const [value6, setValue6] = useState(['2019-10-01', '20191109']);
-    const [value7, setValue7] = useState(new Date('2019-11-02 11:32:11'));
-    const [value8, setValue8] = useState('2019-11-02 11:32:11');
-
-    return (
-        <Container>
-            {/* <span>参数open受控</span>
-            <DatePicker
-                type="date"
-                value={value}
-                onChange={onChange}
-                open={open}
-                // defaultOpen={open}
-                motion={false}
-                onOpenChange={status => {
-                    printArgs(status);
-                    // setOpen(status);
-                }}
-            />
-            <br /> */}
-            <Item>
-                <span>date: value + onChange</span>
-                <DatePicker type="date" value={value} onChange={onChange} />
-            </Item>
-
-            <Item>
-                <span>dateTime: value </span>
-                <DatePicker type="dateTime" value={value2} onChange={printArgs} />
-            </Item>
-
-            <Item>
-                <span>dateTime: value + random + onChange </span>
-                <DatePicker type="dateTime" value={value8} onChange={createOnChangeWithLog(setValue8)} />
-                <Button onClick={() => setValue8(new Date())}>Random Value</Button>
-            </Item>
-
-            <Item>
-                <span>dateTime: value + onChange + format </span>
-                <DatePicker type="dateTime" format={'yyyy年MM月dd日 HH:mm:ss'} value={value7} onChange={setValue7} />
-            </Item>
-
-            <Item>
-                <span>dateTime: value + onChange</span>
-                <DatePicker
-                    type="dateTime"
-                    value={value2}
-                    onChange={createOnChangeWithLog(setValue2)}
-                    onBlur={printArgs}
-                />
-            </Item>
-
-            <Item>
-                <span>dateTime: value + onConfirm + needConfirm</span>
-                <DatePicker type="dateTime" value={value2} onConfirm={setValue2} needConfirm />
-            </Item>
-
-            <Item>
-                <span>date multiple: value</span>
-                <DatePicker type="date" value={value3} multiple onChange={printArgs} />
-            </Item>
-
-            <Item>
-                <span>date multiple: value + onChange</span>
-                <DatePicker type="date" value={value4} onChange={setValue4} multiple />
-            </Item>
-
-            <Item>
-                <span>dateRange: value</span>
-                <DatePicker type="dateRange" value={value5} onChange={printArgs} />
-            </Item>
-
-            <Item>
-                <span>dateRange: value + onChange</span>
-                <DatePicker type="dateRange" value={value6} onChange={setValue6} />
-            </Item>
-
-            <Item>
-                <span>Form.DatePicker dateTime initValue + onChange</span>
-                <Form>
-                    <Form.DatePicker initValue={new Date()} type={'dateTime'} />
-                </Form>
-            </Item>
-
-            <Item>
-                <span>withFied DatePicker dateTime initValue + onChange</span>
-                <Form>
-                    <FormDatePicker
-                        field={'date'}
-                        initValue={new Date()}
-                        type={'dateTime'}
-                        inputReadOnly
-                        noLabel
-                        rules={[{ required: true, message: '值不能为空' }]}
-                    />
-                </Form>
-            </Item>
-        </Container>
-    );
-}
-
-export default Demo;

package/datePicker/_story/CustomTrigger/index.jsx

@@ -1,36 +0,0 @@
-import React, { useState, useCallback, useMemo } from 'react';
-import { format } from 'date-fns';
-import { IconClose, IconChevronDown } from '@douyinfe/semi-icons';
-
-import { DatePicker, Button } from '../../../index';
-
-Demo.parameters = {
-    chromatic: { disableSnapshot: true },
-};
-
-export default function Demo() {
-    const [date, setDate] = useState(new Date());
-    const formatToken = 'yyyy-MM-dd';
-    const onChange = useCallback((dateStr, date) => {
-        setDate(date);
-    }, []);
-    const onClear = useCallback(e => {
-        e && e.stopPropagation();
-        setDate(null);
-    }, []);
-
-    const closeIcon = useMemo(() => (date ? <IconClose onClick={onClear} /> : <IconChevronDown />), [date]);
-
-    return (
-        <DatePicker
-            onChange={onChange}
-            value={date}
-            format={formatToken}
-            triggerRender={({ value, placeholder }) => (
-                <Button theme={'light'} icon={closeIcon} iconPosition={'right'}>
-                    {(date && format(date, formatToken)) || placeholder}
-                </Button>
-            )}
-        />
-    );
-}

package/datePicker/_story/Cycled/index.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import DatePicker from '../../index';
-
-export default function Demo() {
-    return (
-        <div>
-            <div>时分秒选择不无限滚动</div>
-            <DatePicker type="dateTime" timePickerOpts={{ scrollItemProps: { cycled: false }}} />
-        </div>
-    );
-}

package/datePicker/_story/DateOffset/index.js

@@ -1,83 +0,0 @@
-import React from 'react';
-import DatePicker from '../../index';
-import * as dateFns from 'date-fns';
-
-export default function Demo() {
-    const handleChange = date => {
-        console.log('date changed', date);
-    };
-
-    return (
-        <div>
-            <strong>设置 startDateOffset 和 endDateOffset 可以单击选择日期范围</strong>
-            <br />
-            <br />
-            <div>选择前三天和后三天</div>
-            <DatePicker
-                style={{ width: 240 }}
-                type="dateRange"
-                startDateOffset={date => dateFns.sub(date, { days: 3 })}
-                endDateOffset={date => dateFns.add(date, { days: 3 })}
-                onChange={handleChange}
-            />
-            <br />
-            <br />
-            <div>选择自然周</div>
-            <DatePicker
-                style={{ width: 240 }}
-                type="dateRange"
-                weekStartsOn={1}
-                startDateOffset={date => dateFns.startOfWeek(date, { weekStartsOn: 1 })}
-                endDateOffset={date => dateFns.endOfWeek(date, { weekStartsOn: 1 })}
-                onChange={handleChange}
-            />
-            <br />
-            <br />
-            <div>选择后6天</div>
-            <DatePicker
-                style={{ width: 240 }}
-                type="dateRange"
-                weekStartsOn={1}
-                endDateOffset={date => dateFns.add(date, { days: 6 })}
-                onChange={handleChange}
-            />
-            <br />
-            <br />
-            <div>选择前6天</div>
-            <DatePicker
-                style={{ width: 240 }}
-                type="dateRange"
-                weekStartsOn={1}
-                startDateOffset={date => dateFns.sub(date, { days: 6 })}
-                onChange={handleChange}
-            />
-            <br />
-            <br />
-            <div>选择1天</div>
-            <DatePicker
-                style={{ width: 240 }}
-                type="dateRange"
-                startDateOffset={date => date}
-                endDateOffset={date => date}
-                onChange={handleChange}
-            />
-            <br />
-            <br />
-            <div>禁止每个月的5号（仅查看样式，功能上不禁止）</div>
-            <DatePicker
-                style={{ width: 240 }}
-                type="dateRange"
-                disabledDate={date => {
-                    if (date.getDate() === 5) {
-                        return true;
-                    }
-                    return false;
-                }}
-                weekStartsOn={1}
-                startDateOffset={date => dateFns.startOfWeek(date, { weekStartsOn: 1 })}
-                endDateOffset={date => dateFns.endOfWeek(date, { weekStartsOn: 1 })}
-                onChange={handleChange}
-            />
-        </div>
-    );
-}

package/datePicker/_story/DatePickerSlot/index.jsx

@@ -1,83 +0,0 @@
-/* eslint-disable max-len */
-import React, { useState, useMemo } from 'react';
-import { DatePicker, Icon, Typography, Space, Tabs, TabPane } from '../../../index';
-import './index.scss';
-
-const { Text } = Typography;
-
-export default function Demo() {
-    const [activeTab, setActiveTab] = useState('1');
-    const [date, setDate] = useState();
-    const uedDisabledDate = currentDate => currentDate && currentDate.getDate() > 10 && currentDate.getDate() < 15;
-    const testDisabledDate = currentDate => currentDate && currentDate.getDate() > 15 && currentDate.getDate() < 25;
-
-    const handleTabChange = tab => {
-        setActiveTab(tab);
-        setDate();
-    };
-
-    const handleDateChange = value => {
-        setDate(value);
-    };
-
-    const disabledDate = useMemo(() => (activeTab === '1' ? uedDisabledDate : testDisabledDate), [activeTab]);
-
-    const TopSlot = function (props) {
-        const { style } = props;
-        return (
-            <Tabs size="small" onChange={handleTabChange} activeKey={activeTab} style={{ padding: '12px 20px 0', ...style }}>
-                <TabPane tab="UED 排期" itemKey="1" />
-                <TabPane tab="测试排期" itemKey="2" />
-            </Tabs>
-        );
-    };
-
-    const BottomSlot = function (props) {
-        const { style } = props;
-        return (
-            <Space style={{ padding: '12px 20px', ...style }}>
-                <Icon type="bulb" style={{ color: 'rgba(var(--amber-5), 1)' }} />
-                <Text strong style={{ color: 'var(--color-text-2)' }}>
-                    定版前请阅读
-                </Text>
-                <Text link={{ href: 'https://semi.design/', target: '_blank' }}>发版须知</Text>
-            </Space>
-        );
-    };
-
-    const MonthBottomSlot = function (props) {
-        const { style } = props;
-        return (
-            <Space style={{ padding: '12px 20px', ...style }}>
-                <Icon type="bulb" style={{ color: 'rgba(var(--amber-5), 1)' }} />
-                <Text strong style={{ color: 'var(--color-text-2)' }}>
-                    请阅读
-                </Text>
-                <Text link={{ href: 'https://semi.design/', target: '_blank' }}>须知</Text>
-            </Space>
-        );
-    };
-
-    return (
-        <div>
-            <span>topSlot</span>
-            <DatePicker topSlot={<TopSlot />} disabledDate={disabledDate} value={date} onChange={handleDateChange} />
-            <br />
-            <br />
-            <span>bottomSlot</span>
-            <DatePicker bottomSlot={<BottomSlot />} />
-            <br />
-            <br />
-            <span>bottomSlot+dateTimeRange</span>
-            <DatePicker type="dateTimeRange" bottomSlot={<BottomSlot />} style={{ width: 300 }} />
-            <br />
-            <br />
-            <span>topSlot+month</span>
-            <DatePicker type="month" bottomSlot={<MonthBottomSlot />} />
-            <br />
-            <br />
-            <span>topSlot+bottomSlot+compact</span>
-            <DatePicker topSlot={<TopSlot style={{ padding: '8px 12px 0' }} />} bottomSlot={<BottomSlot style={{ padding: '8px 12px' }} />} density="compact" />
-        </div>
-    );
-}

package/datePicker/_story/DatePickerSlot/index.scss

@@ -1,7 +0,0 @@
-.semi-tabs-content {
-    padding: 0;
-}
-
-.semi-tabs-bar-line.semi-tabs-bar-top {
-    border-bottom: none;
-}

package/datePicker/_story/DatePickerTimeZone/index.jsx

@@ -1,27 +0,0 @@
-/* eslint-disable max-len */
-import React, { useState, useMemo } from 'react';
-import { Select, DatePicker, ConfigProvider } from '../../../index';
-// import './index.scss';
-
-export default function Demo(props = {}) {
-    const selectList = ['-10:00', '-09:00', '-08:00', '-07:00', '-06:00'];
-    const defaultTimeZone = selectList[1];
-    const [tz, setTZ] = useState(defaultTimeZone);
-    const optionList = useMemo(() => selectList.map(e => ({ label: e, value: e })), []);
-    // console.log(tz.valueOf());
-    return (
-        <ConfigProvider timeZone={tz}>
-            <Select
-                optionList={optionList}
-                onChange={setTZ}
-                defaultValue={defaultTimeZone}
-                prefix={'时区'}
-            />
-            <DatePicker
-                style={{ width: '350px' }}
-                type="dateTime"
-                onChange={console.log}
-            />
-        </ConfigProvider>
-    );
-}