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

package/datePicker/_story/v2/YearButton.jsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { DatePicker } from '../../../index';
-
-export default function App() {
-    return (
-        <div>
-            <h4>type=date</h4>
-            <DatePicker />
-            <h4>type=dateRange</h4>
-            <DatePicker type="dateRange" defaultPickerValue="2021-12" />
-            <h4>type=dateTimeRange</h4>
-            <DatePicker type="dateTimeRange" />
-            <h4>type=dateRange + compact</h4>
-            <DatePicker type="dateRange" density="compact" />
-        </div>
-    );
-}

package/datePicker/_story/v2/index.js

@@ -1,11 +0,0 @@
-export { default as YearButton } from './YearButton';
-export { default as PanelOpen  } from './PanelOpen';
-export { default as FixInputRangeFocus } from './FixInputRangeFocus';
-export { default as InsetInput  } from './InsetInput';
-export { default as InsetInputE2E  } from './InsetInputE2E';
-export { default as FixDefaultPickerValue } from './FixDefaultPickerValue';
-export { default as InputFormat  } from './InputFormat';
-export { default as InputFormatDisabled  } from './InputFormatDisabled';
-export { default as AutoFillTime  } from './AutoFillTime';
-export { default as InputFormatConfirm  } from './InputFormatConfirm';
-export { default as FixedTriggerRender } from './FixTriggerRender';

package/datePicker/dateInput.tsx

@@ -1,455 +0,0 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* 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,
-    InsetInputChangeProps,
-    InsetInputChangeFoundationProps,
-} 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 { IconCalendar, IconCalendarClock, IconClear } from '@douyinfe/semi-icons';
-import { BaseValueType, ValueType } from '@douyinfe/semi-foundation/datePicker/foundation';
-
-import BaseComponent, { BaseProps } from '../_base/baseComponent';
-import Input from '../input/index';
-import { InsetDateInput, InsetTimeInput } from './insetInput';
-
-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;
-    onInsetInputChange?: (options: InsetInputChangeProps) => void;
-    value?: Date[];
-}
-
-// 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),
-        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,
-        insetInput: PropTypes.bool,
-        insetInputValue: PropTypes.object,
-        defaultPickerValue: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.number,
-            PropTypes.object,
-            PropTypes.array,
-        ]),
-    };
-
-    static defaultProps = {
-        showClear: true,
-        onClick: noop,
-        onChange: noop,
-        onEnterPress: noop,
-        onBlur: noop,
-        onClear: noop,
-        onFocus: noop,
-        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),
-            notifyInsetInputChange: options => this.props.onInsetInputChange(options),
-        };
-    }
-
-    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');
-    };
-
-    handleInsetInputChange = (options: InsetInputChangeFoundationProps) => {
-        this.foundation.handleInsetInputChange(options);
-    };
-
-    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)}
-                x-semi-prop="prefix,insetLabel"
-            >
-                {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
-                role="button"
-                tabIndex={0}
-                aria-label="Clear range input value"
-                className={`${prefixCls}-range-input-clearbtn`}
-                onMouseDown={e => !disabled && this.handleRangeInputClear(e)}>
-                <IconClear aria-hidden />
-            </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' && !disabled,
-            [`${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' && !disabled,
-        });
-        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)}
-            </>
-        );
-    }
-
-    renderInputInset() {
-        const {
-            type,
-            handleInsetDateFocus,
-            handleInsetTimeFocus,
-            value,
-            insetInputValue,
-            prefixCls,
-            rangeInputStartRef,
-            rangeInputEndRef,
-            density,
-        } = this.props;
-
-        const _isRangeType = type.includes('Range');
-        const newInsetInputValue = this.foundation.getInsetInputValue({ value, insetInputValue });
-        const { datePlaceholder, timePlaceholder } = this.foundation.getInsetInputPlaceholder();
-
-        const insetInputWrapperCls = `${prefixCls}-inset-input-wrapper`;
-        const separatorCls = `${prefixCls}-inset-input-separator`;
-
-        return (
-            <div className={insetInputWrapperCls} x-type={type}>
-                <InsetDateInput
-                    forwardRef={rangeInputStartRef}
-                    insetInputValue={newInsetInputValue}
-                    placeholder={datePlaceholder}
-                    valuePath={'monthLeft.dateInput'}
-                    onChange={this.handleInsetInputChange}
-                    onFocus={e => handleInsetDateFocus(e, 'rangeStart')}
-                />
-                <InsetTimeInput
-                    disabled={!newInsetInputValue.monthLeft.dateInput}
-                    insetInputValue={newInsetInputValue}
-                    placeholder={timePlaceholder}
-                    type={type}
-                    valuePath={'monthLeft.timeInput'}
-                    onChange={this.handleInsetInputChange}
-                    onFocus={handleInsetTimeFocus}
-                />
-                {_isRangeType && (
-                    <>
-                        <div className={separatorCls}>{density === 'compact' ? null : '-'}</div>
-                        <InsetDateInput
-                            forwardRef={rangeInputEndRef}
-                            insetInputValue={newInsetInputValue}
-                            placeholder={datePlaceholder}
-                            valuePath={'monthRight.dateInput'}
-                            onChange={this.handleInsetInputChange}
-                            onFocus={e => handleInsetDateFocus(e, 'rangeEnd')}
-                        />
-                        <InsetTimeInput
-                            disabled={!newInsetInputValue.monthRight.dateInput}
-                            insetInputValue={newInsetInputValue}
-                            placeholder={timePlaceholder}
-                            type={type}
-                            valuePath={'monthRight.timeInput'}
-                            onChange={this.handleInsetInputChange}
-                            onFocus={handleInsetTimeFocus}
-                        />
-                    </>
-                )}
-            </div>
-        );
-    }
-
-    renderTriggerInput() {
-        const {
-            placeholder,
-            type,
-            value,
-            inputValue,
-            inputStyle,
-            disabled,
-            showClear,
-            inputReadOnly,
-            insetLabel,
-            validateStatus,
-            block,
-            prefixCls,
-            multiple, // Whether to allow multiple values for email and file types
-            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,
-            insetInput,
-            insetInputValue,
-            defaultPickerValue,
-            ...rest
-        } = this.props;
-        const dateIcon = <IconCalendar aria-hidden />;
-        const dateTimeIcon = <IconCalendarClock aria-hidden />;
-        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}
-            />
-        );
-    }
-
-    render() {
-        const { insetInput } = this.props;
-        return insetInput ? this.renderInputInset() : this.renderTriggerInput();
-    }
-}