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

package/datePicker/_story/datePicker.stories.tsx

@@ -1,230 +0,0 @@
-import React, { useRef, useEffect, useCallback, useState, useMemo } from 'react';
-import { storiesOf } from '@storybook/react';
-import { addDays, addWeeks, addMonths, startOfMonth, endOfMonth } from 'date-fns';
-import classNames from 'classnames';
-import * as dateFns from 'date-fns';
-
-import DatePicker, { DatePickerProps } from '../index';
-import { DayStatusType } from '../index';
-import { Button, Form, withField } from '../../index';
-import {IconClose, IconChevronDown} from '@douyinfe/semi-icons';
-
-const presets = [
-    {
-      text: 'Today',
-      start: new Date(),
-      end: new Date(),
-    },
-    {
-      text: 'Tomorrow',
-      start: addDays(new Date(), 1),
-      end: addDays(new Date(), 1),
-    },
-    {
-      text: 'Next Week',
-      start: addWeeks(new Date(), 1),
-      end: addWeeks(new Date(), 2),
-    },
-    {
-      text: 'Next Month',
-      start: startOfMonth(addMonths(new Date(), 1)),
-      end: endOfMonth(addMonths(new Date(), 1)),
-    },
-    {
-      text: 'Today',
-      start: new Date(),
-      end: new Date(),
-    },
-    {
-      text: 'Tomorrow',
-      start: addDays(new Date(), 1),
-      end: addDays(new Date(), 1),
-    },
-    {
-      text: 'Next Week',
-      start: addWeeks(new Date(), 1),
-      end: addWeeks(new Date(), 2),
-    },
-    {
-      text: 'Next Month',
-      start: startOfMonth(addMonths(new Date(), 1)),
-      end: endOfMonth(addMonths(new Date(), 1)),
-    },
-  ];
-
-const stories = storiesOf('DatePicker', module);
-
-stories.add('default', () => {
-    const Demo = () => {
-        const ref = useRef(null);
-        useEffect(() => {
-            console.log(ref.current);
-
-            if (ref.current) {
-                console.log('triggerElRef: ', ref.current.triggerElRef);
-            }
-        }, [ref.current]);
-
-        return (
-            <>
-                <DatePicker ref={ref} style={{ display: 'inline-block' }} />
-                <DatePicker
-                    type='dateTime'
-                    presets={presets.map(preset => ({
-                        text: preset.text,
-                        start: preset.start,
-                    }))}
-                    onPresetClick={(item, e) => {
-                        const { start } = item;
-                        console.log('preset click', item, e, start);
-                    }}
-                />
-                <DatePicker
-                    type="dateTime"
-                    presets={[() => ({
-                        start: new Date(),
-                    })]}
-                    onPresetClick={(item, e) => {
-                        const { start } = item;
-                        console.log('preset click', item, e, start);
-                    }}
-                />
-            </>
-        );
-    };
-
-    return <Demo />;
-});
-
-stories.add('useFullRender', () => {
-  function Demo() {
-    const renderFullDate = (dayNumber: number, fullDate: string, dayStatus: DayStatusType) => {
-        const { isInRange, isHover, isSelected, isSelectedStart, isSelectedEnd } = dayStatus;
-        const prefix = 'components-datepicker-demo';
-
-        const dateCls = classNames({
-            [`${prefix}-day-inrange`]: isInRange,
-            [`${prefix}-day-hover`]: isHover,
-            [`${prefix}-day-selected`]: isSelected,
-            [`${prefix}-day-selected-start`]: isSelectedStart,
-            [`${prefix}-day-selected-end`]: isSelectedEnd,
-        });
-
-        const dayStyle = {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '80%',
-            height: '80%',
-            borderRadius: '50%',
-        };
-
-        return (
-            <div style={dayStyle} className={dateCls}>
-                {dayNumber}
-            </div>
-        );
-    };
-
-    return <DatePicker style={{ width: 240 }} type={'dateRange'} renderFullDate={renderFullDate} />;
-  }
-
-  return <Demo />;
-});
-
-stories.add('triggerRender', () => {
-  function Demo() {
-    const ref = useRef();
-    const [date, setDate] = useState(new Date());
-    const formatToken = 'yyyy-MM-dd';
-    const onChange = useCallback(date => {
-        setDate(date);
-    }, []);
-    const onClear = useCallback(e => {
-        e && e.stopPropagation();
-        setDate(null);
-    }, []);
-
-    const closeIcon = useMemo(() => {
-        return date ? <IconClose onClick={onClear} /> : <IconChevronDown />;
-    }, [date]);
-
-    return (
-        <DatePicker
-            ref={ref}
-            onChange={onChange}
-            value={date}
-            format={formatToken}
-            triggerRender={({ placeholder }) => (
-                <Button theme={'light'} icon={closeIcon} iconPosition={'right'}>
-                    {(date && dateFns.format(date, formatToken)) || placeholder}
-                </Button>
-            )}
-        />
-    );
-}
-
-  return <Demo />;
-});
-
-
-stories.add('Form.DatePicker', () => {
-  function Demo() {
-    const ref = useRef();
-    const ref2 = useRef();
-    const [open3, setOpen3] = useState(false);
-    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),
-        },
-    ];
-    // const CustomDatePicker = (props: DatePickerProps & { fieldRef: React.Ref<Object> }) => {
-    //   const { fieldRef, ...rest } = props;
-    //   return (
-    //     <DatePicker {...rest} ref={fieldRef}  />
-    //   );
-    // };
-    
-    // const CustomFieldDatePicker = withField(CustomDatePicker);
-
-    return (
-      <>
-        <DatePicker type="dateRange" ref={ref} />
-        <Form>
-        {/* <CustomFieldDatePicker
-              type="dateTimeRange"
-              field="a"
-              label="Form.DatePicker"
-              presets={presets}
-              open={open3}
-              onPresetClick={() => {
-                console.log('click presets', ref2);
-                setOpen3(false);
-                setTimeout(() => {
-                  ref2.current &&  (ref2.current as any).foundation.closePanel();
-                }, 0);
-              }}
-              onFocus={() => {
-                console.log('focus');
-                setOpen3(true);
-              }}
-              onBlur={() => {console.log('blur')}}
-              style={{ width: 500 }}
-              fieldRef={ref2}
-          /> */}
-        </Form>
-      </>
-    );
-}
-
-  return <Demo />;
-});
-
-stories.add('fix 1460', () => <DatePicker type={'month'} onChange={(date, dateString) => console.log('DatePicker changed: ', date, dateString)} />);

package/datePicker/_story/v2/AutoFillTime.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { DatePicker, Space, Button } from '../../../index';
-
-AutoFillTime.storyName = '自动填充时间';
-
-/**
- * 输入开始日期后，自动填充一个时间
- */
-export default function AutoFillTime() {
-    const format = 'yyyy-MM-dd HH:mm';
-    const defaultPickerValue = '2021-03-15 14:00';
-    const defaultPickerValue2 = ['2021-01-10 00:01', '2021-03-15 23:59'];
-    
-    const handleChange = (...args) => {
-        console.log('change', ...args);
-    };
-
-    const props = {
-        format,
-        insetInput: true,
-        onChange: handleChange,
-        motion: false,
-    };
-
-    return (
-        <div data-cy="container">
-            <Space>
-                <div data-cy="dateTime">
-                    <DatePicker {...props} type="dateTime" defaultPickerValue={defaultPickerValue} />
-                </div>
-                <div data-cy="dateTimeRange">
-                    <DatePicker {...props} type="dateTimeRange" defaultPickerValue={defaultPickerValue2} />
-                </div>
-            </Space>
-        </div>
-    );
-}

package/datePicker/_story/v2/FixDefaultPickerValue.jsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { DatePicker, Space } from '../../../index';
-
-App.storyName = "fix defaultPickerValue number bug";
-export default function App() {
-    const defaultPickerValue = new Date('2021-03-15 00:00:00').valueOf();
-    const defaultPickerValueArray = [new Date('2021-03-15 00:00:00').valueOf(), new Date('2021-05-15 23:59:59').valueOf()];
-    return (            
-        <Space>
-            <div data-cy="dateTime">
-                <DatePicker
-                    type="dateTime"
-                    defaultPickerValue={defaultPickerValue}
-                />
-            </div>
-            <div data-cy="dateTimeRange">
-                <DatePicker
-                    type="dateTimeRange"
-                    defaultPickerValue={defaultPickerValueArray}
-                />
-            </div>
-            <div data-cy="before-1970">
-                <DatePicker
-                    type="dateTime"
-                    defaultPickerValue={new Date('1910-01-01 13:00:00')}
-                />
-            </div>
-        </Space>
-
-    );
-}

package/datePicker/_story/v2/FixInputRangeFocus.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { DatePicker, Button } from '../../../index';
-
-/**
- * fix gitlab #1375
- */
-App.storyName = 'fixed input range focus';
-export default function App() {
-    const [visible, setVisible] = React.useState(false);
-    return (
-        <div>
-            {/* <Button onClick={() => { setVisible(false); }}>关闭</Button> */}
-            <DatePicker
-                type="dateTimeRange"
-                bottomSlot={<Button onClick={() => { setVisible(false); }}>关闭</Button>}
-                onFocus={() => {
-                    console.log('focus');
-                    setVisible(true); 
-                }}
-                open={visible}
-                showClear
-            />
-        </div>
-    );
-}

package/datePicker/_story/v2/FixTriggerRender.tsx

@@ -1,36 +0,0 @@
-import React, { useState, useCallback, useMemo } from 'react';
-import { DatePicker, Button, Icon, Space } from '../../../index';
-
-export default function Demo() {
-    const [date, setDate] = useState([]);
-    const onChange = useCallback(date => {
-        setDate(date);
-        console.log(date);
-    }, []);
-    const onClear = useCallback(e => {
-        e && e.stopPropagation();
-        setDate(null);
-    }, []);
-
-    const closeIcon = useMemo(() => (date ? <Icon type="close" onClick={onClear} /> : <Icon type="chevron_down" />), [date]);
-
-    return (
-        <Space>
-            <DatePicker
-                type="dateTimeRange"
-                onChange={onChange}
-                value={date}
-                triggerRender={({ placeholder }) => (
-                    <Button theme={'light'} icon={closeIcon} iconPosition={'right'}>
-                        {(date && String(date)) || placeholder}
-                    </Button>
-                )}
-            />
-            <DatePicker
-                type="dateRange"
-                motion={false}
-                triggerRender={({ placeholder }) => <Button theme={'light'}>{placeholder}</Button>}
-            />
-        </Space>
-    );
-}

package/datePicker/_story/v2/InputFormat.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { DatePicker, Space, Button } from '../../../index';
-
-InputFormat.storyName = '输入部分日期，回显在面板上';
-
-/**
- * 优化 input format
- */
-export default function InputFormat() {
-    const handleChange = (...args) => {
-        console.log('change', ...args);
-    };
-
-    return (
-        <div data-cy="container">
-            <Space>
-                <div data-cy="date">
-                    <DatePicker onChange={handleChange} />
-                </div>
-                <div data-cy="dateRange">
-                    <DatePicker onChange={handleChange} type="dateRange" />
-                </div>
-                <div data-cy="dateTime">
-                    <DatePicker onChange={handleChange} type="dateTime" />
-                </div>
-            </Space>
-        </div>
-    );
-}

package/datePicker/_story/v2/InputFormatConfirm.jsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import { DatePicker, Space, Button } from '../../../index';
-
-InputFormatConfirm.storyName = '输入时间 + needConfirm';
-
-export default function InputFormatConfirm() {
-    const [insetInput, setInputInput] = React.useState(false);
-    const format = 'yyyy-MM-dd HH:mm';
-    const defaultPickerValue = '2021-03-15 14:00';
-    const defaultPickerValue2 = ['2021-01-10 00:01', '2021-03-15 23:59'];
-    
-    const handleChange = (...args) => {
-        console.log('change', ...args);
-    };
-        
-    const handleConfirm = (...args) => {
-        console.log('confirm', ...args);
-    };
-
-    const props = {
-        format,
-        onChange: handleChange,
-        onConfirm: handleConfirm,
-        motion: false,
-        needConfirm: true,
-        insetInput
-    };
-
-    return (
-        <div data-cy="container">
-            <Space>
-                <Button data-cy="inset-switch" onClick={() => setInputInput(!insetInput)}>{`insetInput=${insetInput}`}</Button>
-                <Space>
-                    <div data-cy="dateTime">
-                        <DatePicker {...props} type="dateTime" defaultPickerValue={defaultPickerValue} />
-                    </div>
-                    <div data-cy="dateTimeRange">
-                        <DatePicker {...props} type="dateTimeRange" defaultPickerValue={defaultPickerValue2} />
-                    </div>
-                </Space>
-            </Space>
-        </div>
-    );
-}

package/datePicker/_story/v2/InputFormatDisabled.jsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { DatePicker, Space, Button } from '../../../index';
-
-InputFormatDisabled.storyName = '输入禁用日期，不回显在面板上';
-
-/**
- * 优化 input format
- */
-export default function InputFormatDisabled() {
-    const handleChange = (...args) => {
-        console.log('change', ...args);
-    };
-
-    const disabledDate = (date) => {
-        return date.getDate() === 15;
-    };
-
-    return (
-        <div data-cy="container">
-            <Space>
-                <div data-cy="date">
-                    <DatePicker disabledDate={disabledDate} onChange={handleChange} />
-                </div>
-            </Space>
-        </div>
-    );
-}

package/datePicker/_story/v2/InsetInput.jsx

@@ -1,104 +0,0 @@
-import React from 'react';
-import { DatePicker, Space, Input, Button, Select } from '@douyinfe/semi-ui';
-import { Position } from '@douyinfe/semi-foundation/tooltip/foundation';
-import { strings } from '@douyinfe/semi-foundation/tooltip/constants';
-import * as dateFns from 'date-fns';
-
-/**
- * Test with Chromatic
- */
-export default function App() {
-    const spacing = [200, 400];
-    const [date, setDate] = React.useState();
-    const [insetInput, setInsetInput] = React.useState(true);
-    const [position, setPosition] = React.useState('leftTopOver');
-    const [needConfirm, setNeedConfirm] = React.useState(false);
-    const [density, setDensity] = React.useState(true);
-
-    const props = {
-        defaultOpen: true,
-        motion: false,
-        insetInput,
-        defaultPickerValue: '2021-12-01',
-        position,
-        density: density ? 'compact' : 'default',
-        autoAdjustOverflow: false,
-    };
-
-    const positionOptionList = strings.POSITION_SET.map((position) => ({
-        value: position,
-        label: position,
-        key: position,
-    }));
-
-    const triggerRender = ({ placeholder }) => {
-        const format = 'Pp';
-        const value = (date && dateFns.format(date, format)) || placeholder;
-        return <Input value={value} readOnly />;
-    };
-
-    const handleDateChange = (date) => {
-        setDate(date);
-    };
-
-    const handleBtnClick = () => {
-        setInsetInput(!insetInput);
-    };
-
-    const handleReset = () => {
-        setInsetInput(true);
-        setPosition('leftTopOver');
-    };
-
-    const handleToggleNeedConfirm = () => {
-        setNeedConfirm(!needConfirm);
-    };
-
-    const handleToggleDensity = () => {
-        setDensity(!density);
-    };
-
-    return (
-        <div style={{ height: '200vh' }}>
-            <div style={{ marginBottom: 12 }}>
-                <Space>
-                    <Button onClick={handleBtnClick}>
-                        {`insetInput=${insetInput}`}
-                    </Button>
-                    <Button onClick={handleToggleNeedConfirm}>
-                        {`needConfirm=${needConfirm}`}
-                    </Button>
-                    <Button onClick={handleToggleDensity}>
-                        {`小尺寸=${density}`}
-                    </Button>
-                    <Select
-                        style={{ width: 200 }}
-                        optionList={positionOptionList} 
-                        placeholder='选择position'
-                        value={position}
-                        onChange={setPosition}
-                        showClear
-                    />
-                    <Button onClick={handleReset} theme="solid">reset</Button>
-                </Space>
-            </div>
-            <Space wrap spacing={spacing}>
-                <DatePicker placeholder='选择单个日期' {...props} />
-                <DatePicker placeholder='选择月' {...props} type='month' defaultOpen={false} />
-                <DatePicker placeholder='选择日期时间' {...props} type='dateTime' needConfirm={needConfirm} />
-                <DatePicker placeholder='选择日期范围' {...props} type='dateRange' />
-                <DatePicker placeholder='选择日期时间范围' {...props} type='dateTimeRange' needConfirm={needConfirm} />
-                <DatePicker placeholder='format=Pp' {...props} format='yyyy-MM-dd  HH:mm:ss' type='dateTimeRange' />
-            </Space>
-        </div>
-    );
-}
-
-App.parameters = {
-    chromatic: {
-        disableSnapshot: false,
-        delay: 3000,
-        viewports: [1800]
-    },
-};
-App.storyName = 'inset input';

package/datePicker/_story/v2/InsetInputE2E.jsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import { DatePicker, Space, Button } from '@douyinfe/semi-ui';
-
-/**
- * Test with Cypress
- * Don't modify DOM structure
- */
-export default function App() {
-    const [needConfirm, setNeedConfirm] = React.useState(false);
-
-    const spacing = [200, 400];
-    const props = {
-        insetInput: true,
-        defaultPickerValue: '2021-12-01',
-        motion: false,
-    };
-
-    const handleToggleNeedConfirm = () => {
-        setNeedConfirm(!needConfirm);
-    };
-
-    return (
-        <div style={{ height: '300vh' }}>
-            <div style={{ marginBottom: 12 }}>
-                <Space>
-                    <Button onClick={handleToggleNeedConfirm} data-cy="btn">
-                        {`needConfirm=${needConfirm}`}
-                    </Button>
-                </Space>
-            </div>
-            <Space wrap spacing={spacing}>
-                <div data-cy="date">
-                    <DatePicker placeholder="选择单个日期" {...props} />
-                </div>
-                <div data-cy="month">
-                    <DatePicker
-                        {...props}
-                        placeholder="选择月"
-                        type="month"
-                        defaultValue="2021-12"
-                        timePickerOpts={{
-                            scrollItemProps: { motion: false },
-                        }}
-                    />
-                </div>
-                <div data-cy="dateTime">
-                    <DatePicker placeholder="选择日期时间" {...props} type="dateTime" needConfirm={needConfirm} />
-                </div>
-                <div data-cy="dateRange">
-                    <DatePicker placeholder="选择日期范围" {...props} type="dateRange" />
-                </div>
-                <div data-cy="dateTimeRange">
-                    <DatePicker
-                        placeholder="选择日期时间范围"
-                        {...props}
-                        type="dateTimeRange"
-                        needConfirm={needConfirm}
-                    />
-                </div>
-                <div data-cy="customFormat">
-                    <DatePicker placeholder="选择日期范围" {...props} type="dateRange" format="Pp" />
-                </div>
-            </Space>
-        </div>
-    );
-}
-
-App.parameters = { chromatic: { disableSnapshot: true } };
-App.storyName = 'inset input e2e test';

package/datePicker/_story/v2/PanelOpen.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { DatePicker, Space } from '@douyinfe/semi-ui';
-
-/**
- * Test with Chromatic
- */
-export default function App() {
-    // 使用过去的时间，避免当前日变动引入 UI 测试失败
-    const defaultValue = new Date('2021-01-01 00:00:00');
-    const props = {
-        defaultOpen: true,
-        position: 'bottomLeft',
-        autoAdjustOverflow: false,
-        defaultPickerValue: defaultValue,
-        needConfirm: true,
-        motion: false,
-    };
-    const spacing = [48, 400];
-    // 使用过去的时间，避免当前日变动引入 UI 测试失败
-    const defaultRangeValue = [defaultValue, new Date('2021-03-31 00:00:00')];
-    return (
-        <div style={{ height: '100vh' }}>
-            <Space wrap spacing={spacing}>
-                <DatePicker {...props} type="month" defaultValue={defaultValue} />
-                <DatePicker {...props} type="dateTimeRange" defaultValue={defaultRangeValue} density="compact" />
-                <DatePicker {...props} type="dateTimeRange" defaultValue={defaultRangeValue} />
-            </Space>
-        </div>
-    );
-}
-
-App.parameters = {
-    chromatic: {
-        disableSnapshot: false,
-        delay: 3000,
-        viewports: [1800]
-    },
-};
-App.storyName = 'defaultOpen';