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

package/datePicker/_story/datePicker.stories.tsx

@@ -0,0 +1,230 @@
+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/dateInput.tsx

@@ -0,0 +1,358 @@
+/* eslint-disable max-lines-per-function */
+/* eslint-disable no-unused-vars */
+import React from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import DateInputFoundation, {
+    DateInputAdapter,
+    DateInputFoundationProps,
+    RangeType
+} from '@douyinfe/semi-foundation/datePicker/inputFoundation';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/datePicker/constants';
+import { noop } from '@douyinfe/semi-foundation/utils/function';
+import isNullOrUndefined from '@douyinfe/semi-foundation/utils/isNullOrUndefined';
+import BaseComponent, { BaseProps } from '../_base/baseComponent';
+import Input from '../input/index';
+import { IconCalendar, IconCalendarClock, IconClear } from '@douyinfe/semi-icons';
+import { BaseValueType, ValueType } from '@douyinfe/semi-foundation/datePicker/foundation';
+
+export interface DateInputProps extends DateInputFoundationProps, BaseProps {
+    insetLabel?: React.ReactNode;
+    prefix?: React.ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
+    onChange?: (value: string, e: React.MouseEvent<HTMLInputElement>) => void;
+    onEnterPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.MouseEvent<HTMLInputElement>) => void;
+    onFocus?: (e: React.MouseEvent<HTMLInputElement>, rangeType?: RangeType) => void;
+    onClear?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export default class DateInput extends BaseComponent<DateInputProps, {}> {
+    static propTypes = {
+        onClick: PropTypes.func,
+        onChange: PropTypes.func,
+        onEnterPress: PropTypes.func,
+        onBlur: PropTypes.func,
+        onClear: PropTypes.func,
+        onFocus: PropTypes.func,
+        value: PropTypes.array,
+        disabled: PropTypes.bool,
+        type: PropTypes.oneOf(strings.TYPE_SET),
+        multiple: PropTypes.bool,
+        showClear: PropTypes.bool,
+        format: PropTypes.string, // Attributes not used
+        inputStyle: PropTypes.object,
+        inputReadOnly: PropTypes.bool, // Text box can be entered
+        insetLabel: PropTypes.node,
+        validateStatus: PropTypes.string,
+        prefix: PropTypes.node,
+        prefixCls: PropTypes.string,
+        dateFnsLocale: PropTypes.object.isRequired, // Foundation useful to
+        placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+        rangeInputFocus: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+        rangeInputStartRef: PropTypes.object,
+        rangeInputEndRef: PropTypes.object,
+        rangeSeparator: PropTypes.string,
+    };
+
+    static defaultProps = {
+        showClear: true,
+        onClick: noop,
+        onChange: noop,
+        onEnterPress: noop,
+        onBlur: noop,
+        onClear: noop,
+        onFocus: noop,
+        multiple: false,
+        type: 'date',
+        inputStyle: {},
+        inputReadOnly: false,
+        prefixCls: cssClasses.PREFIX,
+        rangeSeparator: strings.DEFAULT_SEPARATOR_RANGE,
+    };
+    foundation: DateInputFoundation;
+
+    constructor(props: DateInputProps) {
+        super(props);
+        this.foundation = new DateInputFoundation(this.adapter);
+    }
+
+    get adapter(): DateInputAdapter {
+        return {
+            ...super.adapter,
+            updateIsFocusing: isFocusing => this.setState({ isFocusing }),
+            notifyClick: (...args) => this.props.onClick(...args),
+            notifyChange: (...args) => this.props.onChange(...args),
+            notifyEnter: (...args) => this.props.onEnterPress(...args),
+            notifyBlur: (...args) => this.props.onBlur(...args),
+            notifyClear: (...args) => this.props.onClear(...args),
+            notifyFocus: (...args) => this.props.onFocus(...args),
+            notifyRangeInputClear: (...args) => this.props.onRangeClear(...args),
+            notifyRangeInputFocus: (...args) => this.props.onFocus(...args),
+            notifyTabPress: (...args) => this.props.onRangeEndTabPress(...args),
+        };
+    }
+
+    componentDidMount() {
+        this.foundation.init();
+    }
+
+    componentWillUnmount() {
+        this.foundation.destroy();
+    }
+
+    formatText(value: ValueType) {
+        // eslint-disable-next-line max-len
+        return value && (value as BaseValueType[]).length ? this.foundation.formatShowText(value as BaseValueType[]) : '';
+    }
+
+    handleChange = (value: string, e: React.ChangeEvent<HTMLInputElement>) => this.foundation.handleChange(value, e);
+
+    handleEnterPress = (e: React.KeyboardEvent<HTMLInputElement>) => this.foundation.handleInputComplete(e);
+
+    handleInputClear = (e: React.MouseEvent<HTMLDivElement>) => this.foundation.handleInputClear(e);
+
+    handleRangeInputChange = (rangeStart: string, rangeEnd: string, e: React.ChangeEvent) => {
+        const rangeInputValue = this.getRangeInputValue(rangeStart, rangeEnd);
+        this.foundation.handleChange(rangeInputValue, e);
+    };
+
+    handleRangeInputClear: React.MouseEventHandler<HTMLDivElement> = e => {
+        this.foundation.handleRangeInputClear(e);
+    };
+
+    handleRangeInputEnterPress = (e: React.KeyboardEvent<HTMLInputElement>, rangeStart: string, rangeEnd: string) => {
+        const rangeInputValue = this.getRangeInputValue(rangeStart, rangeEnd);
+        this.foundation.handleRangeInputEnterPress(e, rangeInputValue);
+    };
+
+    handleRangeInputEndKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        this.foundation.handleRangeInputEndKeyPress(e);
+    };
+
+    handleRangeInputFocus = (e: React.MouseEvent<HTMLElement>, rangeType: RangeType) => {
+        this.foundation.handleRangeInputFocus(e, rangeType);
+    };
+
+    handleRangeStartFocus: React.MouseEventHandler<HTMLElement> = e => {
+        this.handleRangeInputFocus(e, 'rangeStart');
+    };
+
+    getRangeInputValue = (rangeStart: string, rangeEnd: string) => {
+        const { rangeSeparator } = this.props;
+        const rangeInputValue = `${rangeStart}${rangeSeparator}${rangeEnd}`;
+        return rangeInputValue;
+    };
+
+    renderRangePrefix() {
+        const { prefix, insetLabel, prefixCls, disabled, rangeInputFocus } = this.props;
+        const labelNode = prefix || insetLabel;
+        return labelNode ? (
+            <div
+                className={`${prefixCls}-range-input-prefix`}
+                onClick={e => !disabled && !rangeInputFocus && this.handleRangeStartFocus(e)}
+            >
+                {labelNode}
+            </div>
+        ) : null;
+    }
+
+    renderRangeSeparator(rangeStart: string, rangeEnd: string) {
+        const { disabled, rangeSeparator } = this.props;
+        const separatorCls = cls({
+            [`${cssClasses.PREFIX}-range-input-separator`]: true,
+            [`${cssClasses.PREFIX}-range-input-separator-active`]: (rangeStart || rangeEnd) && !disabled,
+        });
+        return (
+            <span onClick={e => !disabled && this.handleRangeStartFocus(e)} className={separatorCls}>
+                {rangeSeparator}
+            </span>
+        );
+    }
+
+    renderRangeClearBtn(rangeStart: string, rangeEnd: string) {
+        const { showClear, prefixCls, disabled } = this.props;
+        const allowClear = (rangeStart || rangeEnd) && showClear;
+        return allowClear && !disabled ? (
+            <div
+                className={`${prefixCls}-range-input-clearbtn`}
+                onMouseDown={e => !disabled && this.handleRangeInputClear(e)}>
+                <IconClear />
+            </div>
+        ) : null;
+    }
+
+    renderRangeSuffix(suffix: React.ReactNode) {
+        const { prefixCls, disabled, rangeInputFocus } = this.props;
+        const rangeSuffix = suffix ? (
+            <div
+                className={`${prefixCls}-range-input-suffix`}
+                onClick={e => !disabled && !rangeInputFocus && this.handleRangeStartFocus(e)}
+            >
+                {suffix}
+            </div>
+        ) : null;
+        return rangeSuffix;
+    }
+
+    renderRangeInput(rangeProps: DateInputProps) {
+        const {
+            // this.props
+            placeholder,
+            inputStyle,
+            disabled,
+            inputReadOnly,
+            autofocus,
+            size,
+            // compute props
+            text,
+            suffix,
+            inputCls,
+            // range only props
+            rangeInputStartRef,
+            rangeInputEndRef,
+            rangeInputFocus,
+            prefixCls,
+            rangeSeparator,
+        } = rangeProps;
+
+        const [rangeStart, rangeEnd = ''] = text.split(rangeSeparator) || [];
+        const rangeSize = size === 'large' ? 'default' : 'small';
+        const rangePlaceholder = Array.isArray(placeholder) ? placeholder : [placeholder, placeholder];
+        const [rangeStartPlaceholder, rangeEndPlaceholder] = rangePlaceholder;
+        const inputLeftWrapperCls = cls(`${prefixCls}-range-input-wrapper-start`, `${prefixCls}-range-input-wrapper`, {
+            [`${prefixCls}-range-input-wrapper-active`]: rangeInputFocus === 'rangeStart',
+            [`${prefixCls}-range-input-wrapper-start-with-prefix`]: this.props.prefix || this.props.insetLabel
+        });
+        const inputRightWrapperCls = cls(`${prefixCls}-range-input-wrapper-end`, `${prefixCls}-range-input-wrapper`, {
+            [`${prefixCls}-range-input-wrapper-active`]: rangeInputFocus === 'rangeEnd'
+        });
+        return (
+            <>
+                {this.renderRangePrefix()}
+                <div
+                    onClick={e => !disabled && this.handleRangeInputFocus(e, 'rangeStart')}
+                    className={`${inputCls} ${inputLeftWrapperCls}`}
+                >
+                    <Input
+                        size={rangeSize}
+                        style={inputStyle}
+                        disabled={disabled}
+                        readonly={inputReadOnly}
+                        placeholder={rangeStartPlaceholder}
+                        value={rangeStart}
+                        // range input onBlur function is called when panel is closed
+                        // onBlur={noop}
+                        onChange={(rangeStartValue, e) => this.handleRangeInputChange(rangeStartValue, rangeEnd, e)}
+                        onEnterPress={e => this.handleRangeInputEnterPress(e, rangeStart, rangeEnd)}
+                        onFocus={e => this.handleRangeInputFocus(e as any, 'rangeStart')}
+                        autofocus={autofocus} // autofocus moved to range start
+                        ref={rangeInputStartRef}
+                    />
+                </div>
+                {this.renderRangeSeparator(rangeStart, rangeEnd)}
+                <div
+                    className={`${inputCls} ${inputRightWrapperCls}`}
+                    onClick={e => !disabled && this.handleRangeInputFocus(e, 'rangeEnd')}
+                >
+                    <Input
+                        size={rangeSize}
+                        style={inputStyle}
+                        disabled={disabled}
+                        readonly={inputReadOnly}
+                        placeholder={rangeEndPlaceholder}
+                        value={rangeEnd}
+                        // range input onBlur function is called when panel is closed
+                        // onBlur={noop}
+                        onChange={(rangeEndValue, e) => this.handleRangeInputChange(rangeStart, rangeEndValue, e)}
+                        onEnterPress={e => this.handleRangeInputEnterPress(e, rangeStart, rangeEnd)}
+                        onFocus={e => this.handleRangeInputFocus(e as any, 'rangeEnd')}
+                        onKeyDown={this.handleRangeInputEndKeyPress} // only monitor tab button on range end
+                        ref={rangeInputEndRef}
+                    />
+                </div>
+                {this.renderRangeClearBtn(rangeStart, rangeEnd)}
+                {this.renderRangeSuffix(suffix)}
+            </>
+        );
+    }
+
+    render() {
+        const {
+            placeholder,
+            type,
+            value,
+            inputValue,
+            inputStyle,
+            disabled,
+            showClear,
+            inputReadOnly,
+            insetLabel,
+            validateStatus,
+            block,
+            prefixCls,
+            dateFnsLocale, // No need to pass to input
+            onBlur,
+            onClear,
+            onFocus,
+            prefix,
+            autofocus,
+            size,
+            // range input support props, no need passing to not range type
+            rangeInputStartRef,
+            rangeInputEndRef,
+            onRangeClear,
+            onRangeBlur,
+            onRangeEndTabPress,
+            rangeInputFocus,
+            rangeSeparator,
+            ...rest
+        } = this.props;
+        const dateIcon = <IconCalendar />;
+        const dateTimeIcon = <IconCalendarClock />;
+        const suffix = type.includes('Time') ? dateTimeIcon : dateIcon;
+        let text = '';
+
+        if (!isNullOrUndefined(inputValue)) {
+            text = inputValue;
+        } else if (value) {
+            text = this.formatText(value);
+        }
+
+        const inputCls = cls({
+            [`${prefixCls}-input-readonly`]: inputReadOnly,
+        });
+
+        const isRangeType = /range/i.test(type);
+        const rangeProps = { ...this.props, text, suffix, inputCls };
+
+        return isRangeType ? (
+            this.renderRangeInput(rangeProps)
+        ) : (
+            <Input
+                {...rest}
+                insetLabel={insetLabel}
+                disabled={disabled}
+                readonly={inputReadOnly}
+                className={inputCls}
+                style={inputStyle}
+                hideSuffix={showClear}
+                placeholder={placeholder}
+                onEnterPress={this.handleEnterPress}
+                onChange={this.handleChange}
+                onClear={this.handleInputClear}
+                suffix={suffix}
+                showClear={showClear}
+                value={text}
+                validateStatus={validateStatus}
+                prefix={prefix}
+                autofocus={autofocus}
+                size={size}
+                onBlur={onBlur as any}
+                onFocus={onFocus as any}
+            />
+        );
+    }
+}