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

package/timePicker/Combobox.tsx

@@ -1,336 +0,0 @@
-/* eslint-disable max-len */
-/* eslint-disable react/no-did-update-set-state */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { format as dateFnsFormat } from 'date-fns';
-import { noop } from 'lodash';
-
-import BaseComponent, { BaseProps } from '../_base/baseComponent';
-import { strings } from '@douyinfe/semi-foundation/timePicker/constants';
-import ScrollList from '../scrollList/index';
-import ScrollItem from '../scrollList/scrollItem';
-import ComboboxFoundation, { formatOption } from '@douyinfe/semi-foundation/timePicker/ComboxFoundation';
-import LocaleConsumer from '../locale/localeConsumer';
-import { TimePickerProps } from './TimePicker';
-import { Locale } from '../locale/interface';
-
-
-export type ComboboxProps = Pick<TimePickerProps, 'format' | 'prefixCls' | 'disabledHours' |
-'disabledMinutes' |
-'disabledSeconds' |
-'hideDisabledOptions' |
-'use12Hours' |
-'scrollItemProps' |
-'panelFooter' |
-'panelHeader'> & BaseProps & {
-    defaultOpenValue?: TimePickerProps['value'];
-    showHour?: boolean;
-    showMinute?: boolean;
-    showSecond?: boolean;
-    onChange?: (value: { isAM: boolean; value: string; timeStampValue: number }) => void;
-    onCurrentSelectPanelChange?: (range: string) => void;
-    isAM?: boolean;
-    timeStampValue?: any;
-};
-
-export interface ComboboxState {
-    showHour: boolean;
-    showMinute: boolean;
-    showSecond: boolean;
-    hourOptions: number[];
-    minuteOptions: number[];
-    secondOptions: number[];
-}
-
-export type FormatOptionReturn = ReturnType<typeof formatOption>;
-export interface AMPMOptionItem {
-    value: string;
-    text: string;
-}
-
-class Combobox extends BaseComponent<ComboboxProps, ComboboxState> {
-    static propTypes = {
-        format: PropTypes.string,
-        defaultOpenValue: PropTypes.object,
-        prefixCls: PropTypes.string,
-        onChange: PropTypes.func,
-        showHour: PropTypes.bool,
-        showMinute: PropTypes.bool,
-        showSecond: PropTypes.bool,
-        disabledHours: PropTypes.func,
-        disabledMinutes: PropTypes.func,
-        disabledSeconds: PropTypes.func,
-        hideDisabledOptions: PropTypes.bool,
-        onCurrentSelectPanelChange: PropTypes.func,
-        use12Hours: PropTypes.bool,
-        isAM: PropTypes.bool,
-        timeStampValue: PropTypes.any,
-        scrollItemProps: PropTypes.object,
-    };
-
-    static defaultProps = {
-        disabledHours: noop,
-        disabledMinutes: noop,
-        disabledSeconds: noop,
-        format: strings.DEFAULT_FORMAT,
-    };
-
-    foundation: ComboboxFoundation;
-
-    constructor(props: ComboboxProps) {
-        super(props);
-
-        this.foundation = new ComboboxFoundation(this.adapter);
-        this.state = {
-            ...this.foundation.initData(),
-        };
-    }
-
-    componentDidUpdate(prevProps: ComboboxProps, prevState: ComboboxState) {
-        if (prevProps.timeStampValue !== this.props.timeStampValue || prevProps.format !== this.props.format) {
-            this.setState({
-                ...this.foundation.initData(),
-            });
-        }
-    }
-
-    componentWillUnmount() {
-        // this.foundation.destroy();
-    }
-
-    componentDidMount() {
-        // this.foundation.init();
-    }
-
-    cacheRefCurrent = (key: string, current: ScrollItem<FormatOptionReturn> | ScrollItem<AMPMOptionItem>) => {
-        if (key && typeof key === 'string') {
-            this.adapter.setCache(key, current);
-        }
-    };
-
-    reselect = () => {
-        const currentKeys = ['ampm', 'hour', 'minute', 'second'];
-
-        currentKeys.forEach(key => {
-            const current = this.adapter.getCache(key);
-
-            if (current && current.scrollToIndex) {
-                current.scrollToIndex();
-            }
-        });
-    };
-
-    onItemChange = ({ type, value, disabled }: { type?: string; value: string; disabled?: boolean; }) => {
-        // eslint-disable-next-line prefer-const
-        let { onChange, use12Hours, isAM, format, timeStampValue } = this.props;
-        const transformValue = this.foundation.getDisplayDateFromTimeStamp(timeStampValue);
-        // TODO: foundation
-        if (type === 'hour') {
-            if (use12Hours) {
-                if (isAM) {
-                    transformValue.setHours(Number(value) % 12);
-                } else {
-                    transformValue.setHours((Number(value) % 12) + 12);
-                }
-            } else {
-                transformValue.setHours(Number(value));
-            }
-        } else if (type === 'minute') {
-            transformValue.setMinutes(Number(value));
-        } else if (type === 'ampm') {
-            const ampm = value.toUpperCase();
-            if (use12Hours) {
-                if (ampm === 'PM') {
-                    isAM = false;
-                    transformValue.getHours() < 12 && transformValue.setHours((transformValue.getHours() % 12) + 12);
-                }
-
-                if (ampm === 'AM') {
-                    isAM = true;
-                    transformValue.getHours() >= 12 && transformValue.setHours(transformValue.getHours() - 12);
-                }
-            }
-        } else {
-            transformValue.setSeconds(Number(value));
-        }
-
-        onChange &&
-            onChange({
-                isAM,
-                value: dateFnsFormat(transformValue, format && format.replace(/(\s+)A/g, '$1a')), // dateFns only supports "h: mm: ss a"
-                timeStampValue: Number(transformValue),
-            });
-    };
-
-    onEnterSelectPanel = (range: string) => {
-        const { onCurrentSelectPanelChange } = this.props;
-
-        onCurrentSelectPanelChange(range);
-    };
-
-    renderHourSelect(hour: number, locale: Locale['TimePicker']) {
-        const { prefixCls, disabledHours, use12Hours, scrollItemProps } = this.props;
-
-        const { showHour, hourOptions } = this.state;
-
-        if (!showHour) {
-            return null;
-        }
-        const disabledOptions = disabledHours();
-
-        let hourOptionsAdj,
-            hourAdj;
-        if (use12Hours) {
-            hourOptionsAdj = [12].concat(hourOptions.filter(h => h < 12 && h > 0));
-            hourAdj = hour % 12 || 12;
-        } else {
-            hourOptionsAdj = hourOptions;
-            hourAdj = hour;
-        }
-
-        const transformHour = (value: string) => value + locale.hour;
-
-        const className = `${prefixCls}-list-hour`;
-
-        return (
-            <ScrollItem<FormatOptionReturn>
-                ref={current => this.cacheRefCurrent('hour', current)}
-                mode={'wheel'}
-                transform={transformHour}
-                cycled={true}
-                className={className}
-                list={hourOptionsAdj.map(option => formatOption(option, disabledOptions))}
-                selectedIndex={hourOptionsAdj.indexOf(hourAdj)}
-                type="hour"
-                onSelect={this.onItemChange}
-                {...scrollItemProps}
-            />
-        );
-    }
-
-    renderMinuteSelect(minute: number, locale: Locale['TimePicker']) {
-        const { prefixCls, disabledMinutes, timeStampValue, scrollItemProps } = this.props;
-
-        const { showMinute, minuteOptions } = this.state;
-
-        if (!showMinute) {
-            return null;
-        }
-        const value = new Date(timeStampValue);
-        const disabledOptions = disabledMinutes && disabledMinutes(value.getHours());
-
-        const className = `${prefixCls}-list-minute`;
-
-        const transformMinute = (min: string) => min + locale.minute;
-
-        return (
-            <ScrollItem<FormatOptionReturn>
-                ref={current => this.cacheRefCurrent('minute', current)}
-                mode={'wheel'}
-                transform={transformMinute}
-                cycled={true}
-                list={minuteOptions.map(option => formatOption(option, disabledOptions))}
-                selectedIndex={minuteOptions.indexOf(minute)}
-                type="minute"
-                onSelect={this.onItemChange}
-                className={className}
-                {...scrollItemProps}
-            />
-        );
-    }
-
-    renderSecondSelect(second: number, locale: Locale['TimePicker']) {
-        const { prefixCls, disabledSeconds, timeStampValue, scrollItemProps } = this.props;
-
-        const { showSecond, secondOptions } = this.state;
-
-        if (!showSecond) {
-            return null;
-        }
-        const value = new Date(timeStampValue);
-
-        const disabledOptions = disabledSeconds && disabledSeconds(value.getHours(), value.getMinutes());
-
-        const className = `${prefixCls}-list-second`;
-
-        const transformSecond = (sec: number) => String(sec) + locale.second;
-
-        return (
-            <ScrollItem<FormatOptionReturn>
-                ref={current => this.cacheRefCurrent('second', current)}
-                mode={'wheel'}
-                transform={transformSecond}
-                cycled={true}
-                list={secondOptions.map(option => formatOption(option, disabledOptions))}
-                selectedIndex={secondOptions.indexOf(second)}
-                className={className}
-                type="second"
-                onSelect={this.onItemChange}
-                {...scrollItemProps}
-            />
-        );
-    }
-
-    renderAMPMSelect(locale: Locale['TimePicker'], localeCode: string) {
-        const { prefixCls, use12Hours, isAM, scrollItemProps } = this.props;
-        if (!use12Hours) {
-            return null;
-        }
-
-        const AMPMOptions: AMPMOptionItem[] = [
-            {
-                value: 'AM',
-                text: locale.AM || '上午',
-            },
-            {
-                value: 'PM',
-                text: locale.PM || '下午',
-            },
-        ];
-
-        const selected = isAM ? 0 : 1;
-
-        const className = `${prefixCls}-list-ampm`;
-
-        return (
-            <ScrollItem<AMPMOptionItem>
-                ref={current => this.cacheRefCurrent('ampm', current)}
-                mode={'wheel'}
-                className={className}
-                cycled={false}
-                list={AMPMOptions}
-                selectedIndex={selected}
-                type="ampm"
-                onSelect={this.onItemChange}
-                {...scrollItemProps}
-            />
-        );
-    }
-
-    getDisplayDateFromTimeStamp = (timeStampValue: Date | string) => this.foundation.getDisplayDateFromTimeStamp(timeStampValue);
-
-    render() {
-        const { timeStampValue, panelHeader, panelFooter } = this.props;
-
-        const value = this.getDisplayDateFromTimeStamp(timeStampValue);
-
-        return (
-            <LocaleConsumer componentName="TimePicker">
-                {(locale: Locale['TimePicker'], localeCode: Locale['code']) => (
-                    <ScrollList
-                        header={panelHeader}
-                        footer={panelFooter} 
-                        x-semi-header-alias="panelHeader"
-                        x-semi-footer-alias="panelFooter"
-                    >
-                        {this.renderAMPMSelect(locale, localeCode)}
-                        {this.renderHourSelect(value.getHours(), locale)}
-                        {this.renderMinuteSelect(value.getMinutes(), locale)}
-                        {this.renderSecondSelect(value.getSeconds(), locale)}
-                    </ScrollList>
-                )}
-            </LocaleConsumer>
-        );
-    }
-}
-export default Combobox;

package/timePicker/PanelShape.ts

@@ -1,8 +0,0 @@
-import PropTypes from 'prop-types';
-
-export const PanelShape = {
-    panelHeader: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-    panelFooter: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-};
-
-export const PanelShapeDefaults = {};

package/timePicker/TimeInput.tsx

@@ -1,207 +0,0 @@
-/* eslint-disable no-unused-vars */
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { strings } from '@douyinfe/semi-foundation/timePicker/constants';
-import { noop } from 'lodash';
-
-import Input from '../input';
-import BaseComponent, { BaseProps } from '../_base/baseComponent';
-import InputFoundation, { TimeInputAdapter } from '@douyinfe/semi-foundation/timePicker/inputFoundation';
-import { IconClock } from '@douyinfe/semi-icons';
-import { TimePickerProps } from './TimePicker';
-
-
-export type TimeInputProps = Pick<TimePickerProps,
-'value' |
-'format' |
-'prefixCls' |
-'placeholder' |
-'clearText' |
-'inputReadOnly' |
-'disabled' |
-'type' |
-'timeZone' | 
-'defaultOpen' |
-'disabledHours' |
-'disabledMinutes' |
-'disabledSeconds' |
-'dateFnsLocale' |
-'onFocus' |
-'onBlur' |
-'focusOnOpen' |
-'locale' |
-'localeCode' |
-'insetLabel' |
-'validateStatus' |
-'preventScroll'> & BaseProps & {
-    onChange?: (value: string) => void;
-    onEsc?: () => void;
-    onClick?: React.MouseEventHandler;
-    defaultOpenValue?: boolean;
-    currentSelectPanel?: string;
-    timeStampValue?: any;
-    invalid?: boolean;
-};
-
-class TimeInput extends BaseComponent<TimeInputProps, any> {
-    static propTypes = {
-        format: PropTypes.string,
-        prefixCls: PropTypes.string,
-        placeholder: PropTypes.string,
-        clearText: PropTypes.string,
-        inputReadOnly: PropTypes.bool,
-        hourOptions: PropTypes.array,
-        minuteOptions: PropTypes.array,
-        secondOptions: PropTypes.array,
-        disabledHours: PropTypes.func,
-        disabledMinutes: PropTypes.func,
-        disabledSeconds: PropTypes.func,
-        onChange: PropTypes.func,
-        onFocus: PropTypes.func,
-        onBlur: PropTypes.func,
-        onEsc: PropTypes.func,
-        onClick: PropTypes.func,
-        defaultOpenValue: PropTypes.object,
-        currentSelectPanel: PropTypes.string,
-        focusOnOpen: PropTypes.bool,
-        timeStampValue: PropTypes.any,
-        locale: PropTypes.object,
-        localeCode: PropTypes.string,
-        insetLabel: PropTypes.node,
-        validateStatus: PropTypes.string,
-        preventScroll: PropTypes.bool,
-    };
-
-    static defaultProps = {
-        inputReadOnly: false,
-        onChange: noop,
-        onBlur: noop,
-        onFocus: noop,
-        onClick: noop,
-        disabledHours: noop,
-        disabledMinutes: noop,
-        disabledSeconds: noop,
-        format: strings.DEFAULT_FORMAT,
-    };
-    foundation: InputFoundation;
-
-    constructor(props: TimeInputProps) {
-        super(props);
-
-        this.foundation = new InputFoundation(this.adapter);
-
-        this.state = {
-            // focusing: props.focusOnOpen,
-        };
-    }
-
-    componentDidMount() {
-        super.componentDidMount();
-        const { focusOnOpen, preventScroll } = this.props;
-        if (focusOnOpen) {
-            const requestAnimationFrame = window.requestAnimationFrame || window.setTimeout;
-            requestAnimationFrame(() => {
-                const inputNode = this.adapter.getCache('inputNode');
-                if (inputNode) {
-                    inputNode.focus({ preventScroll });
-                    inputNode.select();
-                }
-            });
-        }
-    }
-
-    componentDidUpdate(prevProps: TimeInputProps) {
-        const { timeStampValue } = this.props;
-
-        if (this.isControlled('timeStampValue') && timeStampValue !== this.state.timeStampValue) {
-            this.foundation.restoreCursor();
-        }
-
-        if (this.props.value !== prevProps.value) {
-            this.foundation.restoreCursor();
-        }
-    }
-
-    get adapter(): TimeInputAdapter {
-        return {
-            ...super.adapter,
-            notifyChange: (...args) => this.props.onChange(...args),
-            notifyFocus: (...args) => this.props.onFocus(...args),
-            notifyBlur: (...args) => this.props.onBlur(...args),
-        };
-    }
-
-    setRef = (node: HTMLElement) => this.adapter.setCache('inputNode', node);
-
-    handleClick: React.MouseEventHandler = e => this.props.onClick(e);
-
-    handleFocus: React.FocusEventHandler = e => this.foundation.handleFocus(e);
-
-    handleBlur: React.FocusEventHandler = e => this.foundation.handleBlur(e);
-
-    handleChange = (v: string) => this.foundation.handleChange(v);
-
-    getInput() {
-        const {
-            prefixCls,
-            placeholder,
-            inputReadOnly,
-            onFocus,
-            disabled,
-            type,
-            locale,
-            localeCode,
-            insetLabel,
-            validateStatus,
-            value,
-            onChange,
-            invalid,
-            format,
-            clearText,
-            disabledHours,
-            disabledMinutes,
-            disabledSeconds,
-            onEsc,
-            defaultOpenValue,
-            currentSelectPanel,
-            focusOnOpen,
-            timeStampValue,
-            timeZone,
-            defaultOpen,
-            dateFnsLocale,
-            ...rest
-        } = this.props;
-        // const { focusing } = this.state;
-        const inputCls = classNames(`${prefixCls}-input`, {
-            [`${prefixCls}-input-invalid`]: invalid,
-            [`${prefixCls}-input-readonly`]: inputReadOnly,
-        });
-        const mergeValidateStatus = invalid ? 'error' : validateStatus;
-        return (
-            <Input
-                {...rest}
-                hideSuffix
-                className={inputCls}
-                ref={this.setRef as any}
-                value={value as any}
-                placeholder={placeholder || locale.placeholder[type]}
-                readonly={Boolean(inputReadOnly)}
-                onChange={this.handleChange}
-                onFocus={this.handleFocus}
-                onBlur={this.handleBlur}
-                suffix={<IconClock onClick={this.handleClick} />}
-                validateStatus={mergeValidateStatus}
-                disabled={disabled}
-                insetLabel={insetLabel}
-            />
-        );
-    }
-
-    render() {
-        const { prefixCls } = this.props;
-        return <div className={`${prefixCls}-input-wrap`}>{this.getInput()}</div>;
-    }
-}
-
-export default TimeInput;