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

package/datePicker/_story/datePicker.stories.js

@@ -1,1016 +0,0 @@
-import React, { useState, useRef } from 'react';
-import {
-  addDays,
-  addWeeks,
-  addMonths,
-  isBefore,
-  startOfMonth,
-  endOfMonth,
-  parseISO,
-  startOfWeek,
-  endOfWeek,
-} from 'date-fns';
-import { Space, ConfigProvider, InputGroup, InputNumber, Form, withField, Button, RadioGroup, Radio } from '../../index';
-
-// stores
-import NeedConfirmDemo from './NeedConfirm';
-import RenderDate from './RenderDate';
-import RenderFullDate from './RenderFullDate';
-import DateOffset from './DateOffset';
-import AllTypesDemo from './AllTypes';
-import Callbacks from './Callbacks';
-import DatePicker from '../index';
-import ExceptionDemo from './ExceptionDemo';
-import ControlledDemo from './ControlledDemo';
-import DisabledDate from './DisabledDate';
-import CustomTrigger from './CustomTrigger';
-import OverPopover from './OverPopover';
-import OnChangeWithDateFirst from './OnChangeWithDateFirst';
-import Multiple from './Multiple';
-import Autofocus from './Autofocus';
-import CycledDatePicker from './Cycled';
-import AutoSwitchDate from './AutoSwitchDate';
-import TimepikcerOpts from './TimePickerOpts';
-import Density from './Density';
-import DatePickerSlot from './DatePickerSlot';
-import DatePickerTimeZone from './DatePickerTimeZone';
-import BetterRangePicker from './BetterRangePicker';
-import SyncSwitchMonth from './SyncSwitchMonth';
-import { Checkbox } from '../../checkbox';
-export * from './v2';
-
-export default {
-  title: 'DatePicker',
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-}
-
-export {
-  ControlledDemo,
-  NeedConfirmDemo,
-  ExceptionDemo,
-  AllTypesDemo,
-  Callbacks,
-  DisabledDate,
-  CustomTrigger,
-  OverPopover,
-  OnChangeWithDateFirst,
-  RenderDate,
-  RenderFullDate,
-  Autofocus,
-  DateOffset,
-  CycledDatePicker,
-  AutoSwitchDate,
-  TimepikcerOpts,
-  Density,
-  DatePickerSlot,
-  DatePickerTimeZone,
-  BetterRangePicker,
-  SyncSwitchMonth,
-}
-
-const demoDiv = {
-  marginTop: '20px',
-  marginLeft: '20px',
-};
-
-export const DatePickerDefault = () => (
-  <div style={{...demoDiv, height: '100vh'}}>
-    <span>datePicker施工现场</span>
-    <DatePicker
-      insetLabel={<span>日期</span>}
-      onChange={(str, date) => console.log(str)}
-      onOpenChange={status => console.log(status)}
-      placeholder="请选择日期"
-    />
-    <br />
-
-    <span>datePicker默认显示</span>
-    <DatePicker />
-    <br />
-
-    <span>defaultValue: 2019-07-09</span>
-    <DatePicker defaultValue="2019-07-09" />
-    <br />
-
-    <span>defaultValue: 1569888000000</span>
-    <DatePicker
-      defaultValue={1569888000000}
-      onChange={(input, value) => console.log({ input, value })}
-    />
-    <br />
-
-    <span>defaultValue: new Date('2019-07-07')</span>
-    <DatePicker
-      defaultValue={new Date('2019-07-07')}
-      onOpenChange={isOpen => console.log(isOpen)}
-      defaultOpen
-      motion={false}
-    />
-  </div>
-);
-DatePickerDefault.parameters = {
-  chromatic: {
-    disableSnapshot: false,
-    delay: 300
-  }
-};
-
-export const DatePickerCallbacks = () => {
-  const printArgs = (...args) => console.log(...args);
-
-  return (
-    <div style={demoDiv}>
-      <span>datePicker施工现场</span>
-      <DatePicker onOpenChange={printArgs} />
-      <br />
-
-      <span>defaultValue: new Date('2019-07-07')</span>
-      <DatePicker defaultValue={new Date('2019-07-07')} />
-      <br />
-
-      <span>defaultValue: 2019-07-09</span>
-      <DatePicker defaultValue="2019-07-09" />
-      <br />
-
-      <span>defaultValue: 1569888000000</span>
-      <DatePicker
-        defaultValue={1569888000000}
-        onChange={(input, value) => console.log(input, value)}
-      />
-    </div>
-  );
-};
-
-export const DatePickerMultiple = () => <Multiple />;
-
-export const DateRangePicker = () => (
-  <div style={demoDiv}>
-    <div>dateRangePicker</div>
-    <DatePicker type="dateRange" insetLabel="结束日期" prefix="test" validateStatus="error" />
-    <br />
-
-    <div>small dateRangePicker</div>
-    <DatePicker type="dateRange" size="small" disabled prefix="test" />
-    <br />
-
-    <div>large dateRangePicker</div>
-    <DatePicker type="dateRange" size="large" />
-    <br />
-
-    <div>compact dateRangePicker</div>
-    <DatePicker type="dateRange" density="compact" validateStatus="warning" />
-    <br />
-
-    <div>dateRangePicker with offset</div>
-    <DatePicker
-      type="dateRange"
-      startDateOffset={date => startOfWeek(date, { weekStartsOn: 1 })}
-      endDateOffset={date => endOfWeek(date, { weekStartsOn: 1 })}
-    />
-    <br />
-
-    <div>defaultValue：07/01-08/02</div>
-    <DatePicker type="dateRange" defaultValue={[new Date('2019-07-01'), new Date('2019-08-02')]} />
-  </div>
-);
-DateRangePicker.parameters = {
-  chromatic: { disableSnapshot: false },
-};
-
-const presets = [
-  {
-    text: 'Today',
-    start: new Date(),
-    end: new Date(),
-  },
-  {
-    text: 'Tomorrow',
-    start: addDays(new Date(), 1),
-    end: addDays(new Date(), 1),
-  },
-  {
-    text: 'Today After Tomorrow',
-    start: addDays(new Date(), 2),
-    end: addDays(new Date(), 2),
-  },
-  {
-    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: 'Next Bimonthly',
-    start: startOfMonth(addMonths(new Date(), 1)),
-    end: endOfMonth(addMonths(new Date(), 2)),
-  },
-  {
-    text: 'Next Quarter',
-    start: startOfMonth(addMonths(new Date(), 3)),
-    end: endOfMonth(addMonths(new Date(), 3)),
-  },
-];
-
-export const DatePickerWithPresets = () => {
-  const onPresetClick = (item, e) => {
-    console.log('preset click', item, e);
-  };
-  const [presetPosition, setPresetPosition] = useState('right');
-  const [insetInput, setInsetInput] = useState(false);
-  const [presetArr, setPresetArr] = useState(presets);
-
-   const BottomSlot = function(props) {
-        const { style } = props;
-        return (
-            <div style={{ padding: '12px 20px', ...style }}>
-                <div strong style={{ color: 'var(--semi-color-text-2)' }}>
-                    定版前请阅读
-                </div>
-                <div link={{ href: 'https://semi.design/', target: '_blank' }}>发版须知</div>
-            </div>
-        );
-    };
-  return (
-    <div style={demoDiv}>
-      <span>带快捷选择的DatePicker</span>
-      <br/>
-      <br/>
-       <RadioGroup onChange={e=>setPresetPosition(e.target.value)} value={presetPosition} aria-label="选择快捷选择面板位置" name="preset-radio-group">
-            <Radio value={'left'}>left</Radio>
-            <Radio value={'right'}>right</Radio>
-            <Radio value={'top'}>top</Radio>
-            <Radio value={'bottom'}>bottom</Radio>
-        </RadioGroup>
-        <Checkbox value={insetInput} onChange={e=>setInsetInput(e.target.checked)}>insetInput</Checkbox>
-        <Checkbox value={presetArr} onChange={e=>setPresetArr(e.target.checked ? [...presets, ...presets, ...presets]:presets)}>more presets</Checkbox>
-       <br/>
-      <div>type="date"</div>
-      <DatePicker
-        type="date"
-        presets={presetArr}
-        insetInput={insetInput}
-        presetPosition={presetPosition}
-        onPresetClick={onPresetClick}
-        onChange={(...args) => console.log(...args)}
-      />
-      <br/>
-      <br/>
-      <div>type="dateTime"</div>
-      <DatePicker
-        type="dateTime"
-        insetInput={insetInput}
-        needConfirm
-        bottomSlot={<BottomSlot/>}
-        presetPosition={presetPosition}
-        presets={presetArr.map(preset => ({
-          text: preset.text,
-          start: preset.start,
-        }))}
-        onPresetClick={onPresetClick}
-        onChange={(...args) => console.log(...args)}
-      />
-      <br/>
-      <br/>
-      <div>type="dateRange"</div>
-      <DatePicker
-        type="dateRange"
-        presets={presetArr}
-        insetInput={insetInput}
-        presetPosition={presetPosition}
-        onPresetClick={onPresetClick}
-        onChange={(...args) => console.log(...args)}
-      />
-      <br/>
-      <br/>
-      <div>type="dateTimeRange"</div>
-      <DatePicker
-        type="dateTimeRange"
-        presets={presetArr}
-        insetInput={insetInput}
-        presetPosition={presetPosition}
-        onPresetClick={onPresetClick}
-        onChange={(...args) => console.log(...args)}
-      />
-      <br/>
-      <br/>
-      <div>type="month"</div>
-      <DatePicker
-        type="month"
-        insetInput={insetInput}
-        presetPosition={presetPosition}
-        presets={presetArr.map(preset => ({
-          text: preset.text,
-          start: preset.start,
-        }))}
-        onPresetClick={onPresetClick}
-        onChange={(...args) => console.log(...args)}
-      />
-      <br/>
-      <br/>
-      <div>type="date" density="compact"</div>
-      <DatePicker
-        type="date"
-        presets={presetArr}
-        insetInput={insetInput}
-        density="compact"
-        presetPosition={presetPosition}
-        onPresetClick={onPresetClick}
-        onChange={(...args) => console.log(...args)}
-      />
-      <br/>
-      <br/>
-      <div>type="dateTime" density="compact"</div>
-      <DatePicker
-        type="dateTime"
-        insetInput={insetInput}
-        needConfirm
-        density="compact"
-        presetPosition={presetPosition}
-        presets={presetArr.map(preset => ({
-          text: preset.text,
-          start: preset.start,
-        }))}
-        onPresetClick={onPresetClick}
-        onChange={(...args) => console.log(...args)}
-      />
-      <br/>
-      <br/>
-      <div>type="dateRange" density="compact"</div>
-      <DatePicker
-        type="dateRange"
-        presets={presetArr}
-        density="compact"
-        insetInput={insetInput}
-        presetPosition={presetPosition}
-        onPresetClick={onPresetClick}
-        onChange={(...args) => console.log(...args)}
-      />
-      <br/>
-      <br/>
-      <div>type="dateTimeRange"  density="compact"</div>
-      <DatePicker
-        type="dateTimeRange"
-        density="compact"
-        presets={presetArr}
-        insetInput={insetInput}
-        presetPosition={presetPosition}
-        onPresetClick={onPresetClick}
-        onChange={(...args) => console.log(...args)}
-      />
-      <br/>
-      <br/>
-      <div>type="month" density="compact"</div>
-      <DatePicker
-        type="month"
-        insetInput={insetInput}
-        presetPosition={presetPosition}
-        presets={presetArr.map(preset => ({
-          text: preset.text,
-          start: preset.start,
-        }))}
-        density="compact"
-        onPresetClick={onPresetClick}
-        onChange={(...args) => console.log(...args)}
-      />
-    </div>
-  );
-};
-
-function isDisabled(dayStr) {
-  return isBefore(new Date(dayStr), new Date());
-}
-
-export const DatePickerDisabledDate = () => (
-  <div style={demoDiv}>
-    <span>不可选日期</span>
-    <DatePicker type="dateRange" presets={presets} disabledDate={isDisabled} />
-  </div>
-);
-
-export const DateTimePicker = () => (
-  <div style={demoDiv}>
-    <span>dateTimePicker</span>
-    <DatePicker
-      defaultPickerValue={parseISO('2020-02-20 20:00:00')}
-      type="dateTime"
-      onChange={(...args) => console.log('onChange: ', ...args)}
-    />
-  </div>
-);
-
-export const DateTimeRangePicker = () => (
-  <div style={demoDiv}>
-    <span>dateTimeRangePicker</span>
-    <DatePicker type="dateTimeRange" defaultPickerValue={parseISO('2020-02-20 20:00:00')} />
-    <br />
-
-    <span>dateTimeRangePicker</span>
-    <DatePicker type="dateTimeRange" presets={presets} />
-    <br />
-
-    <span>dateTimeRangePicker - multiple</span>
-    <DatePicker type="dateTimeRange" multiple />
-    <br />
-  </div>
-);
-
-export const YearPicker = () => (
-  <>
-    <div>
-      <span>Year Picker</span>
-      <DatePicker type="dateTimeRange" />
-    </div>
-    <div>
-      <span>Year Picker</span>
-      <DatePicker type="dateTimeRange" presets={presets} />
-    </div>
-  </>
-);
-
-export const MonthPicker = () => {
-  const Demo = () => {
-    const [controlledValue, setControlledValue] = useState('2019-09');
-
-    const _setControlledValue = value => setControlledValue(value);
-
-    return (
-      <>
-        <div>
-          <span>MonthPicker</span>
-          <DatePicker type="month" />
-        </div>
-        <div>
-          <span>MonthPicker with presets</span>
-          <DatePicker type="month" presets={presets} />
-        </div>
-        <div>
-          <span>MonthPicker with disabledDate</span>
-          <DatePicker
-            type="month"
-            disabledDate={str => {
-              const date = new Date(str);
-
-              if (str.length <= 4) {
-                return date.getFullYear() < 2015;
-              }
-
-              return date.getMonth() + 1 < 10;
-            }}
-          />
-        </div>
-        <div>
-          <span>MonthPicker with presets</span>
-          <DatePicker type="month" presets={presets} />
-        </div>
-        <div>
-          <span>MonthPicker with controlledValue</span>
-          <DatePicker type="month" value={controlledValue} onChange={_setControlledValue} />
-        </div>
-      </>
-    );
-  };
-
-  return <Demo />;
-};
-
-export const PropTypesAndDefaultProps = () => (
-  <div>
-    <article>
-      <p>{JSON.stringify(Object.keys(DatePicker.propTypes))}</p>
-      <p>{JSON.stringify(DatePicker.defaultProps)}</p>
-    </article>
-  </div>
-);
-
-export const InputReadOnly = () => <DatePicker inputReadOnly={true} />;
-
-export const DropdownClassNameDropdownStyle = () => (
-  <div>
-    <h4>fontSize: 16，dropdownClassName: 'my-datePicker'</h4>
-    <DatePicker
-      dropdownStyle={{ fontSize: 16 }}
-      dropdownClassName="my-datePicker"
-      onChange={(date, dateString) => console.log(dateString)}
-    />
-  </div>
-);
-
-export const CustomPlaceholder = () => (
-  <Space wrap>
-    <DatePicker placeholder="请选择日期" insetLabel="默认" />
-    <DatePicker placeholder={undefined} insetLabel="undefined" />
-    <DatePicker placeholder="" insetLabel="空字符串" />
-    <DatePicker placeholder={false} insetLabel="false" />
-    <DatePicker placeholder={null} insetLabel="null" />
-    <DatePicker placeholder="" type="dateRange" insetLabel="空字符串" />
-  </Space>
-);
-CustomPlaceholder.parameters = {
-  chromatic: { disableSnapshot: false },
-};
-
-export const FixNotifyChange = () => {
-  function Demo() {
-    const [tz, setTz] = useState(0);
-    const [value, setVal] = useState();
-    const [value2, setVal2] = useState();
-    const [value3, setVal3] = useState();
-    const [value4, setVal4] = useState();
-    const withLog = fn => {
-      return val => {
-        console.log('notifyChange', val);
-        fn(val);
-      };
-    };
-    return (
-      <ConfigProvider timeZone={tz}>
-        <InputGroup>
-          <InputNumber defaultValue={0} onChange={setTz} hideButtons />
-          <DatePicker type="dateTimeRange" value={value} onChange={withLog(setVal)} />
-          <DatePicker
-            type="dateTimeRange"
-            needConfirm
-            value={value2}
-            onConfirm={withLog(setVal2)}
-          />
-          <DatePicker type="date" value={value3} onChange={withLog(setVal3)} />
-          <DatePicker type="dateRange" value={value4} onChange={withLog(setVal4)} />
-        </InputGroup>
-      </ConfigProvider>
-    );
-  }
-  return <Demo />;
-};
-
-export const SelectNotDisabledDateV126 = () => {
-  const defaultValue = ['2021-08-06', '2021-08-15'];
-  const disabledMonth = dateStr => {
-    const date = new Date(dateStr);
-    const month = date.getMonth();
-    if (month === 7) {
-      return true;
-    }
-    return false;
-  };
-  const disabledDate = dateStr => {
-    const date = new Date(dateStr);
-    const day = date.getDate();
-    if (day > 20 && day < 25) {
-      return true;
-    }
-    return false;
-  };
-
-  let props = {
-    type: 'dateRange',
-    motion: false,
-    defaultValue,
-    onChange: (...args) => console.log('changed', ...args),
-    style: { width: 300 },
-  };
-
-  return (
-    <>
-      <h4>dateRange type + disabled rangeStart and select rangeEnd</h4>
-      <DatePicker {...props} disabledDate={disabledMonth} />
-      <h4>date type + multiple select + given disabled defaultValue</h4>
-      <DatePicker {...props} type="date" multiple disabledDate={disabledDate} />
-    </>
-  );
-};
-
-SelectNotDisabledDateV126.story = {
-  name: 'select not disabled date(v1.26+)',
-};
-
-const CustomDatePicker = props => {
-  const { fieldRef, ...rest } = props;
-  return <DatePicker {...rest} ref={fieldRef} />;
-};
-
-const CustomFieldDatePicker = withField(CustomDatePicker);
-
-export const FixOnFocus = () => {
-  function FocusDemo() {
-    const [open1, setOpen1] = useState(false);
-    const [open2, setOpen2] = useState(false);
-    const [open3, setOpen3] = useState(false);
-    const ref = useRef();
-    const ref2 = useRef();
-    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 (
-      <>
-        <DatePicker
-          type="date"
-          presets={presets}
-          open={open1}
-          onPresetClick={() => {
-            setOpen1(false);
-          }}
-          onFocus={() => {
-            console.log('focus');
-            setOpen1(true);
-          }}
-          onBlur={() => {
-            console.log('blur');
-          }}
-          style={{ width: 300 }}
-        />
-        <br />
-        <br />
-        <DatePicker
-          type="dateTimeRange"
-          presets={presets}
-          open={open2}
-          onPresetClick={() => {
-            console.log('click presets', ref);
-            setOpen2(false);
-            setTimeout(() => {
-              ref.current.foundation.closePanel();
-              console.log(ref);
-            }, 0);
-          }}
-          onFocus={() => {
-            console.log('focus');
-            setOpen2(true);
-          }}
-          onBlur={() => {
-            console.log('blur');
-          }}
-          style={{ width: 500 }}
-          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.foundation.closePanel();
-              }, 0);
-            }}
-            onFocus={() => {
-              console.log('focus');
-              setOpen3(true);
-            }}
-            onBlur={() => {
-              console.log('blur');
-            }}
-            style={{ width: 500 }}
-            fieldRef={ref2}
-          />
-        </Form>
-      </>
-    );
-  }
-  return <FocusDemo />;
-};
-
-FixOnFocus.story = {
-  name: 'fix onFocus',
-};
-
-export const FixDisabledTimeCallback1418 = () => {
-  function Demo() {
-    const disabledTime2 = (date, panelType) => {
-      console.log('disabledTime callback parameter: ', date, panelType);
-      if (panelType === 'left') {
-        return { disabledHours: () => [17, 18] };
-      } else {
-        return { disabledHours: () => [12, 13, 14, 15, 16, 17, 18] };
-      }
-    };
-
-    return (
-      <>
-        <strong>fix disabledTime callback parameter bug</strong>
-        <DatePicker
-          type="dateTimeRange"
-          hideDisabledOptions={false}
-          disabledTime={disabledTime2}
-          defaultValue={['2021-09-08', '2021-10-03']}
-          style={{ width: 400 }}
-        />
-        <DatePicker
-          type="dateTime"
-          hideDisabledOptions={false}
-          defaultValue={'2021-09-08'}
-          disabledTime={disabledTime2}
-          style={{ width: 400 }}
-        />
-      </>
-    );
-  }
-
-  return <Demo />;
-};
-
-FixDisabledTimeCallback1418.story = {
-  name: 'fix disabledTime callback #1418',
-};
-
-export const RangeSeparator = () => (
-  <Space wrap>
-    <div>
-      <div>custom rangeSeparator</div>
-      <DatePicker
-        type="dateRange"
-        rangeSeparator="-"
-        defaultValue={[new Date('2019-07-01'), new Date('2019-08-02')]}
-      />
-      <DatePicker
-        type="dateTimeRange"
-        rangeSeparator="-"
-        defaultValue={[new Date('2019-07-01'), new Date('2019-08-02')]}
-      />
-    </div>
-    <div>
-      <div>default rangeSeparator</div>
-      <DatePicker
-        type="dateRange"
-        defaultValue={[new Date('2019-07-01'), new Date('2019-08-02')]}
-      />
-      <DatePicker
-        type="dateTimeRange"
-        defaultValue={[new Date('2019-07-01'), new Date('2019-08-02')]}
-      />
-    </div>
-  </Space>
-);
-
-/**
- * 修复输入 '20221-12-20' 类似这种年份的日期会崩溃问题
- * https://github.com/DouyinFE/semi-design/issues/422
- * 
- * 非法日期的来源
- *  - 用户输入
- *  - 受控传入
- * @returns 
- */
-export const FixParseISOBug = () => (
-  <div>
-    <label>
-      <div>选择一个合法值，然后输入一个非法年份</div>
-      <DatePicker defaultValue={'2021-12-20'} onChange={v => console.log('onChange', v)} />
-    </label>
-    <label>
-      <div>defaultValue='20221-12-20'</div>
-      <DatePicker defaultValue={'20221-12-20'} defaultOpen={true} motion={false} onChange={v => console.log('onChange', v)} />
-    </label>
-  </div>
-);
-FixParseISOBug.storyName = '修复 parseISO bug';
-FixParseISOBug.parameters = {
-  chromatic: { disableSnapshot: false },
-};
-
-export const FixNeedConfirm = () => {
-  const defaultDate = '2021-12-27 10:37:13';
-  const defaultDateRange = ['2021-12-27 10:37:13', '2022-01-28 10:37:13' ];
-  const props = {
-    needConfirm: true,
-    onConfirm: (...args) => {
-      console.log('Confirmed: ', ...args);
-    },
-    onChange: (...args) => {
-      console.log('Changed: ', ...args);
-    },
-    onCancel: (...args) => {
-      console.log('Canceled: ', ...args);
-    },
-  };
-
-  return (
-    <div>
-      <div data-cy="1">
-        <span>dateTime + needConfirm + defaultValue</span>
-        <div>
-          <DatePicker
-            type="dateTime"
-            defaultValue={defaultDate}
-            {...props}
-          />
-        </div>
-      </div>
-      <div data-cy="2">
-        <span>dateTime + needConfirm</span>
-        <div>
-          <DatePicker
-            type="dateTime"
-            {...props}
-          />
-        </div>
-      </div>
-      <div data-cy="3">
-        <span>dateTimeRange + needConfirm + defaultValue</span>
-        <div>
-          <DatePicker
-            type="dateTimeRange"
-            defaultValue={defaultDateRange}
-            {...props}
-          />
-        </div>
-      </div>
-      <div data-cy="4">
-        <span>dateTimeRange + needConfirm</span>
-        <div>
-          <DatePicker
-            type="dateTimeRange"
-            {...props}
-          />
-        </div>
-      </div>
-    </div>
-  )
-}
-FixNeedConfirm.storyName = '修复 needConfirm 取消后输入框显示错误';
-
-/**
- * fix https://github.com/DouyinFE/semi-design/issues/388
- */
-export const FixPresetsClick = () => {
-  const presets = [
-    {
-      text: '清空',
-      start: '',
-      end: '',
-    },
-    {
-      text: 'Tomorrow',
-      start: new Date(new Date().valueOf() + 1000 * 3600 * 24),
-      end: new Date(new Date().valueOf() + 1000 * 3600 * 24),
-    },
-  ];
-
-  const handleChange = v => {
-    console.log('change', v);
-  };
-
-  const handleConfirm = v => {
-    console.log('confirm', v);
-  }
-
-  return (
-    <div>
-      <div>
-        <label>
-          <span>不设置 needConfirm</span>
-          <DatePicker onChange={console.log} type="dateRange" presets={presets} />
-        </label>
-      </div>
-      <div>
-        <label>
-          <span>设置 needConfirm</span>
-          <DatePicker needConfirm onChange={handleChange} onConfirm={handleConfirm} type="dateTimeRange" presets={presets} />
-        </label>
-      </div>
-    </div>
-  );
-};
-FixPresetsClick.storyName = '修复 presets 点击后不收起问题';
-
-/**
- * fix https://github.com/DouyinFE/semi-design/issues/410
- */
-export const FixTriggerRenderClosePanel = () => {
-  const [value, setValue] = useState([]);
-
-  const handleChange = v => {
-    console.log('change', v);
-    setValue(v);
-  };
-
-  const formatValue = (dates) => {
-    const dateStrs = dates.map(v => String(v));
-    return dateStrs.join(' ~ ');
-  };
-
-  const showClear = Array.isArray(value) && value.length > 1;
-
-  return (
-    <Space>
-      <DatePicker
-        value={value}
-        type="dateRange"
-        onChange={handleChange}
-        motion={false}
-        triggerRender={({ placeholder }) => (
-            <Button>
-                {(value && formatValue(value)) || placeholder}
-            </Button>
-        )}
-      />
-      {showClear && (
-        <Button onClick={() => setValue([])}>清除</Button>
-      )}
-    </Space>
-  );
-};
-FixTriggerRenderClosePanel.storyName = "fix triggerRender close bug"
-
-export const A11yKeyboardDemo = () => {
-  const [value, setValue] = useState(new Date('2022-08-08 00:00'));
-  const [rangeValue, setRangeValue] = useState([new Date('2022-08-08 00:00'), new Date('2022-08-09 12:00')]);
-
-  const handleChange = v => {
-    console.log('change', v);
-    setValue(v);
-  };
-
-   const handleRangeChange = v => {
-    console.log('change', v);
-    setRangeValue(v);
-  };
-
-  return (
-    <Space vertical align='start' data-cy="space">
-      <div  data-cy="dateRange">
-        <DatePicker
-          value={rangeValue}
-          type="dateRange"
-          onChange={handleRangeChange}
-          showClear
-        />
-      </div>
-      <div data-cy="date">
-        <DatePicker
-          onChange={handleChange}
-          showClear
-          multiple
-        />
-      </div>
-    </Space>
-  );
-};
-
-A11yKeyboardDemo.storyName = "a11y keyboard demo";
-
-/**
- * test with cypress
- */
-export const NeedConfirmDelete = () => {
-  return (
-    <div data-cy="dateTimeRange">
-      <DatePicker
-        value={[new Date('2022-08-08 00:00'), new Date('2022-08-09 12:00')]}
-        type="dateTimeRange"
-        needConfirm
-      />
-    </div>
-  );
-};
-NeedConfirmDelete.storyName = "cashedSelectedValue return to last selected when needConfirm & input invalid";
-
-/**
- * test with cypress
- */
- export const CashedSelectedValue = () => {
-  return (
-    <Space>
-      <div data-cy="date">
-        <DatePicker
-          defaultValue={new Date('2022-08-08')}
-          type="date"
-          motion={false}
-        />
-      </div>
-      <div data-cy="dateTime">
-        <DatePicker
-          defaultValue={new Date('2022-08-08 19:11:00')}
-          type="dateTime"
-          motion={false}
-        />
-      </div>
-      <div data-cy="dateRange">
-        <DatePicker
-          defaultValue={[new Date('2022-08-08'), new Date('2022-08-09')]}
-          type="dateRange"
-          motion={false}
-        />
-      </div>
-    </Space>
-  );
-};
-CashedSelectedValue.storyName = "cashedSelectedValue";