@douyinfe/semi-ui 2.1.2 → 2.1.5

package/timePicker/Combobox.tsx

@@ -0,0 +1,331 @@
+/* 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}>
+                        {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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,205 @@
+/* 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'> & 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,
+    };
+
+    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 } = this.props;
+        if (focusOnOpen) {
+            const requestAnimationFrame = window.requestAnimationFrame || window.setTimeout;
+            requestAnimationFrame(() => {
+                const inputNode = this.adapter.getCache('inputNode');
+                if (inputNode) {
+                    inputNode.focus();
+                    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;