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

package/timePicker/__test__/timePicker.test.js

@@ -1,322 +0,0 @@
-import * as React from 'react';
-import Button from '../../button';
-import TimePicker from '../TimePicker';
-import Locale from '../../locale/source/zh_CN';
-import { clear } from 'jest-date-mock';
-import * as _ from 'lodash';
-import { IconClose } from '@douyinfe/semi-icons';
-import { genAfterEach, genBeforeEach, mount, sleep, trigger } from '../../_test_/utils';
-import { isTimeFormatLike } from '@douyinfe/semi-foundation/timePicker/utils';
-import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
-
-describe(`TimePicker`, () => {
-    beforeEach(() => {
-        clear();
-        genBeforeEach()();
-    });
-
-    afterEach(genAfterEach());
-
-    it(`test time picker appearance`, async () => {
-        const defaultHour = 10;
-        const defaultMinute = 24;
-        const defaultSeconds = 18;
-
-        const onFocus = sinon.spy();
-        const onChange = sinon.spy();
-
-        const elem = mount(
-            <TimePicker
-                onChange={onChange}
-                onFocus={onFocus}
-                panelHeader={<strong>Select Time</strong>}
-                locale={Locale.TimePicker}
-                localeCode={Locale.code}
-                defaultOpen={true}
-                scrollItemProps={{ cycled: false }}
-                format={'HH:mm:ss'}
-                defaultValue={`${defaultHour}:${defaultMinute}:${defaultSeconds}`}
-                panelFooter={<strong>Select Time</strong>}
-            />
-        );
-
-        expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-scrolllist`).length).toBe(1);
-        expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-timepicker`).length).toBe(1);
-        expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-scrolllist-header`).length).toBe(1);
-        expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-scrolllist-footer`).length).toBe(1);
-
-        // click minute
-        const minuteUl = elem.find(`.${BASE_CLASS_PREFIX}-timepicker-panel-list-minute .${BASE_CLASS_PREFIX}-scrolllist-list-outer ul`);
-        const minuteLis = minuteUl.find(`li`);
-
-        minuteUl.simulate('click', { target: minuteLis.at(0).getDOMNode(), nativeEvent: null });
-        await sleep(200);
-
-        const newMinute = 0;
-
-        let currentDate = elem.state('value')[newMinute];
-        expect(currentDate.getHours()).toBe(defaultHour);
-        expect(currentDate.getMinutes()).toBe(newMinute);
-
-        // focus
-        elem.find(`input`).simulate('focus');
-        await sleep(200);
-        expect(onFocus.calledOnce).toBeTruthy();
-
-        // input value
-        const newInputHour = 10;
-        const newInputMinute = 18;
-        const newInputSeconds = 18;
-        elem.find(`input`).simulate('change', {
-            target: { value: `${newInputHour}:${newInputMinute}:${newInputSeconds}` },
-        });
-        await sleep(200);
-        currentDate = elem.state('value')[0];
-        expect(currentDate.getMinutes()).toBe(newInputMinute);
-
-        // click inside
-        document.querySelector(`.${BASE_CLASS_PREFIX}-scrolllist`).click();
-        expect(elem.state('open')).toBe(true);
-
-        // click outside
-        // document.body.click();
-        trigger(document, 'mousedown');
-
-        await sleep(200);
-        expect(elem.state('open')).toBe(false);
-
-        expect(onChange.called).toBeTruthy();
-        const args = onChange.getCall(0).args;
-        expect(args[0] instanceof Date).toBe(true);
-        expect(typeof args[1]).toBe('string');
-        elem.unmount();
-    });
-
-    it(`test controlled value`, async () => {
-        const defaultHour = 10;
-        const defaultMinute = 24;
-        const defaultSeconds = 18;
-
-        const elem0 = mount(
-            <TimePicker
-                panelHeader={<strong>Select Time</strong>}
-                locale={Locale.TimePicker}
-                localeCode={Locale.code}
-                defaultOpen={true}
-                scrollItemProps={{ cycled: false }}
-                format={'HH:mm:ss'}
-                value={`${defaultHour}:${defaultMinute}:${defaultSeconds}`}
-                panelFooter={<strong>Select Time</strong>}
-            />
-        );
-
-        const newInputHour = 10;
-        const newInputMinute = 18;
-        const newInputSeconds = 18;
-        elem0.find(`input`).simulate('change', {
-            target: { value: `${newInputHour}:${newInputMinute}:${newInputSeconds}` },
-        });
-
-        await sleep(200);
-        let currentDate0 = elem0.state('value')[0];
-
-        expect(currentDate0.getMinutes()).toBe(defaultMinute);
-        elem0.unmount();
-    });
-
-    it(`test controlled value with onchange`, async () => {
-        const defaultHour = 10;
-        const defaultMinute = 24;
-        const defaultSeconds = 18;
-
-        const onChange = sinon.spy((date, str) => {
-            elem1.setProps({ value: date });
-        });
-
-        const elem1 = mount(
-            <TimePicker
-                onChange={onChange}
-                panelHeader={<strong>Select Time</strong>}
-                locale={Locale.TimePicker}
-                localeCode={Locale.code}
-                defaultOpen={true}
-                scrollItemProps={{ cycled: false }}
-                format={'HH:mm:ss'}
-                value={`${defaultHour}:${defaultMinute}:${defaultSeconds}`}
-                panelFooter={<strong>Select Time</strong>}
-            />
-        );
-
-        const newInputHour = 10;
-        const newInputMinute = 18;
-        const newInputSeconds = 18;
-
-        elem1.find(`input`).simulate('change', {
-            target: { value: `${newInputHour}:${newInputMinute}:${newInputSeconds}` },
-        });
-        await sleep(200);
-
-        let currentDate1 = elem1.state('value')[0];
-        expect(currentDate1.getMinutes()).toBe(newInputMinute);
-        elem1.unmount();
-    });
-
-    it(`test controlled open`, async () => {
-        const defaultHour = 10;
-        const defaultMinute = 24;
-        const defaultSeconds = 18;
-        const defaultOpen = true;
-
-        const onChange = sinon.spy((date, str) => {
-            elem1.setProps({ value: date });
-        });
-        const onOpenChange = sinon.spy(open => elem.setProps({ open }));
-
-        const elem = mount(
-            <TimePicker
-                motion={false}
-                onOpenChange={onOpenChange}
-                open={defaultOpen}
-                onChange={onChange}
-                panelHeader={<strong>Select Time</strong>}
-                locale={Locale.TimePicker}
-                localeCode={Locale.code}
-                scrollItemProps={{ cycled: false }}
-                format={'HH:mm:ss'}
-                value={`${defaultHour}:${defaultMinute}:${defaultSeconds}`}
-                panelFooter={<Button icon={<IconClose />} onClick={() => elem.setProps({ open: false })} />}
-            />
-        );
-
-        expect(elem.state('open')).toBe(true);
-
-        // click close button
-        document.querySelector(`.${BASE_CLASS_PREFIX}-scrolllist-footer .${BASE_CLASS_PREFIX}-button`).click();
-        elem.setProps({ open: false });
-        await sleep(200);
-        expect(elem.state('open')).toBe(false);
-        expect(onOpenChange.calledOnce).toBeFalsy();
-
-        elem.setProps({ open: true });
-        document.body.click();
-        await sleep(200);
-        expect(elem.state('open')).toBe(true);
-    });
-
-    it(`test range picker appearance`, async () => {
-        const defaultValue = ['上午 10:12', '上午 11:08'];
-        const formatToken = `a hh:mm`;
-        const use12Hours = true;
-
-        const elem = mount(
-            <TimePicker
-                use12Hours={use12Hours}
-                focusOnOpen
-                format={formatToken}
-                type={'timeRange'}
-                locale={Locale.TimePicker}
-                localeCode={Locale.code}
-                defaultValue={defaultValue}
-                scrollItemProps={{ cycled: false, mode: 'normal' }}
-                defaultOpen
-            />
-        );
-
-        await sleep(200);
-
-        const all = elem.find(`.${BASE_CLASS_PREFIX}-scrolllist`);
-        expect(all.length).toBe(2);
-
-        // click hour list to change hour to 11
-        const newHour = 9;
-        const hourUl = all.at(0).find(`.${BASE_CLASS_PREFIX}-timepicker-panel-list-hour ul`);
-        const hourLis = hourUl.children(`li`);
-        expect(hourLis.length).toBe(use12Hours ? 12 : 24);
-        const nextSelectedLi = hourLis.at(newHour);
-        expect(nextSelectedLi).not.toBeUndefined();
-        nextSelectedLi.simulate('click');
-        await sleep(200);
-        expect(elem.state('value')[0].getHours()).toBe(newHour);
-        elem.unmount();
-    });
-
-    it('test isTimeFormatLike function', () => {
-        const testCases = [
-            ['10:24:00', 'HH:mm:ss', true],
-            ['10:24:0', 'HH:mm:ss', false],
-            ['10:2:00', 'HH:mm:ss', false],
-            ['1:24:00', 'HH:mm:ss', false],
-            ['10:24', 'HH:mm', true],
-            ['10:2', 'HH:mm', false],
-            ['1:24', 'HH:mm', false],
-            ['24:30', 'mm:ss', true],
-            ['24:3', 'mm:ss', false],
-            ['2:30', 'mm:ss', false],
-            ['10', 'HH', true],
-            ['1', 'HH', false],
-            ['10', 'mm', true],
-            ['1', 'mm', false],
-            ['10', 'ss', true],
-            ['1', 'ss', false],
-            ['2021 10:24:00', 'yyyy HH:mm:ss', true],
-            ['2021 10:24:0', 'yyyy HH:mm:ss', false],
-            ['2021 10:2:0', 'yyyy HH:mm:ss', false],
-            ['2021 1:24:0', 'yyyy HH:mm:ss', false],
-            ['上午 12:00:02', 'a h:mm:ss', true],
-            ['上午 12:00:0', 'a h:mm:ss', false],
-            ['上午 12:0:00', 'a h:mm:ss', false],
-        ];
-
-        testCases.forEach(test => {
-            const [time, format, result] = test;
-            expect(isTimeFormatLike(time, format)).toBe(result);
-        })
-    });
-
-    it('click clear', async () => {
-        const onChange = sinon.spy();
-        let props = {
-            defaultValue: "10:23:15",
-            showClear: true,
-            onChange,
-            autofocus: true,
-            locale: Locale.TimePicker,
-            localeCode: Locale.code
-        };
-        const elem = mount(<TimePicker {...props} />);
-        const clearBtn = elem.find('.semi-input-clearbtn');
-        clearBtn.simulate('mouseDown');
-        expect(onChange.called).toBeTruthy();
-        const args = onChange.getCall(0).args;
-        expect(args[0]).toBe(undefined);
-        expect(args[1]).toBe('');
-        elem.unmount();
-    });
-
-    it('test onChangeWithDateFirst=false', async () => {
-        const onChange = sinon.spy();
-        let props = {
-            defaultValue: "10:23:15",
-            onChange,
-            defaultOpen: true,
-            onChangeWithDateFirst: false,
-            autofocus: true,
-            locale: Locale.TimePicker,
-            localeCode: Locale.code,
-            scrollItemProps: { cycled: false }
-        };
-        const elem = mount(<TimePicker {...props} />);
-        // click minute
-        const minuteUl = elem.find(`.${BASE_CLASS_PREFIX}-timepicker-panel-list-minute .${BASE_CLASS_PREFIX}-scrolllist-list-outer ul`);
-        const minuteLis = minuteUl.find(`li`);
-
-        minuteUl.simulate('click', { target: minuteLis.at(0).getDOMNode(), nativeEvent: null });
-        await sleep(200);
-
-        expect(onChange.called).toBeTruthy();
-        const args = onChange.getCall(0).args;
-        expect(typeof args[0]).toBe('string');
-        expect(args[1] instanceof Date).toBe(true);
-        elem.unmount();
-    });
-});

package/timePicker/_story/Callbacks/index.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-import { TimePicker } 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 (
-        <TimePicker
-            defaultValue={new Date()}
-            onBlur={createLog('onBlur')}
-            onFocus={createLog('onFocus')}
-            onChange={createLog('onChange')}
-        />
-    );
-}

package/timePicker/_story/CustomTrigger/index.jsx

@@ -1,35 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import * as dateFns from 'date-fns';
-
-import { TimePicker, Button, Icon } from '../../../index';
-
-export default function Demo() {
-    const formatToken = 'HH:mm:ss';
-    const [time, setTime] = useState(new Date());
-    const triggerIcon = useMemo(() => {
-        return time ? (
-            <Icon
-                type={'close'}
-                onClick={e => {
-                    e && e.stopPropagation();
-                    setTime();
-                }}
-            />
-        ) : (
-            <Icon type={'chevron_down'} />
-        );
-    }, [time]);
-
-    return (
-        <TimePicker
-            value={time}
-            format={formatToken}
-            onChange={time => setTime(time)}
-            triggerRender={({ placeholder }) => (
-                <Button theme={'light'} icon={triggerIcon} iconPosition={'right'}>
-                    {time ? dateFns.format(time, formatToken) : placeholder}
-                </Button>
-            )}
-        />
-    );
-}

package/timePicker/_story/DisabledTime/index.jsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { range } from 'lodash';
-import { TimePicker } from '../../../index';
-
-export default function Demo() {
-    return (
-        <div>
-            <TimePicker
-                panelHeader={'Time Select'}
-                onChange={val => console.log(val)}
-                disabledHours={() => [1, 2]}
-                disabledMinutes={hour => (hour == 3 ? range(0, 10, 1) : [])}
-                disabledSeconds={(hour, minute) => (hour === 4 && minute === 15 ? range(0, 10, 1) : [])}
-            />
-        </div>
-    );
-}

package/timePicker/_story/timepicker.stories.js

@@ -1,301 +0,0 @@
-import React, { Component, useState } from 'react';
-import TimePickerPanel from '../index';
-import { TimePicker as BasicTimePicker, Button, Form } from '../../index';
-import { strings } from '@douyinfe/semi-foundation/timePicker/constants';
-import { get } from 'lodash';
-
-import Callbacks from './Callbacks';
-import CustomTrigger from './CustomTrigger';
-import DisabledTime from './DisabledTime';
-
-let TimePicker;
-
-export default {
-  title: 'TimePicker',
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-}
-
-export {
-  Callbacks,
-  CustomTrigger,
-  DisabledTime
-}
-
-// auto add scrollItemProps.cycled = false, prevent waiting indefinitely in snapshot testing
-const TimePickerForTest = props => {
-  let scrollItemProps = {};
-  if (!props.scrollItemProps) {
-    scrollItemProps = { cycled: false };
-  } else {
-    scrollItemProps = { ...props.scrollItemProps, cycled: false };
-  }
-  return <BasicTimePicker {...props} scrollItemProps={scrollItemProps} />;
-};
-
-const init = () => {
-  if (process.env.NODE_ENV === 'development') {
-    TimePicker = BasicTimePicker;
-  } else {
-    TimePicker = TimePickerForTest;
-  }
-};
-init();
-
-export const TimePickerPanelDefault = () => {
-   const initValues = {
-    testRange: [
-      new Date("2022-04-17T15:00:00"),
-      new Date("2022-04-17T18:00:00"),
-    ],
-  };
-  return (
-    <div>
-      <TimePicker panelHeader={'Time Select'} onChange={val => console.log(val)} />
-      <TimePicker
-        format={'HH:mm:ss'}
-        defaultValue={'10:24:18'}
-        defaultOpen={true}
-        scrollItemProps={{ cycled: false }}
-      />
-      <TimePicker use12Hours defaultValue={"上午 10:32:33"}/>
-      <br/><br/>
-      <TimePicker type="timeRange" use12Hours format="a h:mm"  defaultValue={["下午 08:11", "上午 11:21"]} />
-      <Form initValues={initValues}>
-      <pre>{JSON.stringify(initValues)}</pre>
-      <Form.TimePicker
-        use12Hours
-        field="testRange"
-        label="Time Range"
-        type="timeRange"
-        format="a hh:mm"
-      />
-    </Form>
-    </div>
-  );
-};
-
-TimePickerPanelDefault.story = {
-  name: 'TimePickerPanel default',
-};
-
-export const BasicUsage = () => <TimePicker />;
-
-BasicUsage.story = {
-  name: 'basic usage',
-};
-
-class Demo extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      value: null,
-    };
-    this.onChange = this.onChange.bind(this);
-  }
-
-  onChange(time) {
-    //   console.log(time);
-    this.setState({ value: time });
-  }
-
-  render() {
-    return <TimePicker value={this.state.value} onChange={this.onChange} />;
-  }
-}
-
-export const PanelHeader = () => {
-  const Demo = () => {
-    const [value, setValue] = useState(new Date());
-
-    const onChange = (date, str) => setValue(date);
-
-    return (
-      <div>
-        <TimePicker panelHeader={'Time Select'} value={new Date()} />
-        <TimePicker panelHeader={'Time Select'} value={value} onChange={onChange} />
-        <TimePicker open />
-      </div>
-    );
-  };
-
-  return <Demo />;
-};
-
-PanelHeader.story = {
-  name: 'panelHeader',
-};
-
-function CustomDemo() {
-  const [open, setOpen] = useState(false);
-  const closePanel = () => setOpen(false);
-  const onOpenChange = open => {
-    setOpen(open);
-    console.log(open);
-  };
-
-  return (
-    <TimePicker
-      open={open}
-      onOpenChange={onOpenChange}
-      panelHeader={'Time Select'}
-      panelFooter={<Button onClick={closePanel}>close</Button>}
-    />
-  );
-}
-
-export const HeaderAndFooter = () => <CustomDemo />;
-
-HeaderAndFooter.story = {
-  name: 'header and footer',
-};
-
-export const Format = () => <TimePicker format={'HH:mm'} defaultValue={'10:24'} />;
-
-Format.story = {
-  name: 'format',
-};
-
-export const Disabled = () => {
-  return <TimePicker defaultValue={'12:08:23'} disabled />;
-};
-
-Disabled.story = {
-  name: 'disabled',
-};
-
-export const MinuteStepAndSecondStep = () => {
-  return <TimePicker minuteStep={15} secondStep={10} />;
-};
-
-MinuteStepAndSecondStep.story = {
-  name: 'minuteStep and secondStep',
-};
-
-export const InputReadOnly = () => {
-  return <TimePicker inputReadOnly />;
-};
-
-InputReadOnly.story = {
-  name: 'inputReadOnly',
-};
-
-export const RangePicker = () => {
-  const RangePickerDemo = () => {
-    const log = (...args) => {
-      console.log(...args);
-    };
-
-    const disabledHM = { 3: [3, 6, 12, 24, 48], 9: [9, 18, 36] };
-    const disabledHMS = { 6: { 6: [6, 12, 24, 48] }, 18: { 18: [18, 36] } };
-
-    const defaultValue = ['10:11:12', '12:11:23'];
-    const [value, setValue] = useState(['10:11:12', '12:11:23']);
-    const disabledHours = () => [1, 2, 4, 8, 16];
-    const disabledMinutes = hours => get(disabledHM, [hours], []);
-    const disabledSeconds = (hours, seconds) => get(disabledHMS, [hours, seconds], []);
-
-    const onChange = (dates, str) => {
-      log(dates, str);
-      setValue(dates);
-    };
-
-    return (
-      <div style={{ margin: 200 }}>
-        <div>
-          <p>基本</p>
-          <TimePicker type={strings.TYPE_TIME_RANGE_PICKER} onChange={log} />
-        </div>
-        <br />
-        <div>
-          <p>默认值</p>
-          <TimePicker
-            defaultValue={defaultValue}
-            type={strings.TYPE_TIME_RANGE_PICKER}
-            onChange={log}
-          />
-        </div>
-        <div>
-          <p>受控</p>
-          <TimePicker value={value} type={strings.TYPE_TIME_RANGE_PICKER} onChange={onChange} />
-        </div>
-        <div>
-          <p>默认值+format</p>
-          <TimePicker
-            format="HH:mm"
-            disabledHours={disabledHours}
-            disabledMinutes={disabledMinutes}
-            disabledSeconds={disabledSeconds}
-            defaultValue={['10:12', '18:08']}
-            type={strings.TYPE_TIME_RANGE_PICKER}
-            onChange={log}
-          />
-          <br />
-        </div>
-        <div>
-          <p>默认值+use12Hours+format</p>
-          <TimePicker
-            use12Hours
-            format="a hh:mm"
-            disabledHours={disabledHours}
-            disabledMinutes={disabledMinutes}
-            disabledSeconds={disabledSeconds}
-            defaultValue={['上午 10:12', '上午 11:08']}
-            type={strings.TYPE_TIME_RANGE_PICKER}
-            onChange={log}
-            scrollItemProps={{ mode: 'normal' }}
-          />
-          <br />
-        </div>
-      </div>
-    );
-  };
-
-  return <RangePickerDemo />;
-};
-
-RangePicker.story = {
-  name: 'range picker',
-};
-RangePicker.parameters = {
-  chromatic: { disableSnapshot: false },
-}
-
-export const ShowClear = () => (
-  <>
-    <TimePicker
-      defaultValue={new Date()}
-      showClear
-      onChange={(...args) => {
-        console.log('clear', ...args);
-      }}
-    />
-    <TimePicker
-      type="timeRange"
-      defaultValue={(new Date(), new Date())}
-      showClear
-      onChange={(...args) => {
-        console.log('clear', ...args);
-      }}
-    />
-  </>
-);
-
-
-export const TimePickerWithOnChangeWithDateFirst = () => {
-  return (
-    <div>
-      onChangeWithDateFirst=true (default)
-      <TimePicker onChange={(...val) => console.log(...val)} />
-      <br />
-      onChangeWithDateFirst=false
-      <TimePicker onChangeWithDateFirst={false} onChange={(...val) => console.log(...val)} />
-      
-    </div>
-  );
-};
-
-TimePickerWithOnChangeWithDateFirst.story = {
-  name: 'OnChangeWithDateFirst',
-};