@jetbrains/ring-ui 5.1.21 → 5.1.23

package/components/date-picker/date-picker.js

@@ -1,218 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import formatDate from 'date-fns/format';
-import isSameDay from 'date-fns/isSameDay';
-import isSameMonth from 'date-fns/isSameMonth';
-import isSameYear from 'date-fns/isSameYear';
-import isValid from 'date-fns/isValid';
-import parse from 'date-fns/parse';
-import set from 'date-fns/set';
-import calendarIcon from '@jetbrains/icons/calendar';
-import chevronDownIcon from '@jetbrains/icons/chevron-down';
-import memoize from '../global/memoize';
-import Popup from '../popup/popup';
-import Dropdown from '../dropdown/dropdown';
-import Icon from '../icon';
-import Button from '../button/button';
-import Link from '../link/link';
-import { Size } from '../input/input';
-import { I18nContext } from '../i18n/i18n-context';
-import DatePopup from './date-popup';
-import { dateType } from './consts';
-import styles from './date-picker.css';
-import formats from './formats';
-const PopupComponent = ({ hidden = false, className, popupRef, onClear, datePopupProps, onComplete, ...restProps }) => (<Popup hidden={hidden} className={className} ref={popupRef} directions={[
-        Popup.PopupProps.Directions.BOTTOM_RIGHT,
-        Popup.PopupProps.Directions.BOTTOM_LEFT,
-        Popup.PopupProps.Directions.TOP_LEFT,
-        Popup.PopupProps.Directions.TOP_RIGHT
-    ]} {...restProps}>
-    <DatePopup onClear={onClear} {...datePopupProps} onComplete={onComplete}/>
-  </Popup>);
-PopupComponent.propTypes = {
-    hidden: PropTypes.bool,
-    className: PropTypes.string,
-    popupRef: PropTypes.func,
-    onClear: PropTypes.func,
-    datePopupProps: PropTypes.shape(DatePopup.propTypes),
-    onComplete: PropTypes.func
-};
-/**
- * @name Date Picker
- */
-export default class DatePicker extends PureComponent {
-    static propTypes = {
-        className: PropTypes.string,
-        popupClassName: PropTypes.string,
-        date: dateType,
-        withTime: PropTypes.bool,
-        range: PropTypes.bool,
-        from: dateType,
-        to: dateType,
-        clear: PropTypes.bool,
-        inline: PropTypes.bool,
-        displayFormat: PropTypes.func,
-        displayMonthFormat: PropTypes.func,
-        displayDayFormat: PropTypes.func,
-        displayTimeFormat: PropTypes.func,
-        parseDateInput: PropTypes.func,
-        applyTimeInput: PropTypes.func,
-        datePlaceholder: PropTypes.string,
-        dateTimePlaceholder: PropTypes.string,
-        rangePlaceholder: PropTypes.string,
-        onChange: PropTypes.func,
-        dropdownProps: PropTypes.object,
-        disabled: PropTypes.bool,
-        minDate: dateType,
-        maxDate: dateType,
-        translations: PropTypes.object,
-        locale: PropTypes.object,
-        size: PropTypes.oneOf(Object.values(Size))
-    };
-    static defaultProps = {
-        className: '',
-        date: null,
-        withTime: false,
-        range: false,
-        from: null,
-        to: null,
-        clear: false,
-        inline: false,
-        size: Size.M,
-        displayFormat: (date, locale) => (date ? formatDate(date, 'd MMM yyyy', { locale }) : ''),
-        displayMonthFormat: (date, locale) => (date ? formatDate(date, 'd MMM', { locale }) : ''),
-        displayDayFormat: (date, locale) => (date ? formatDate(date, 'd', { locale }) : ''),
-        displayTimeFormat: (date, locale) => (date ? formatDate(date, 'HH:mm', { locale }) : ''),
-        minDate: null,
-        maxDate: null,
-        onChange() { },
-        applyTimeInput(date, timeString) {
-            const [hours, minutes] = timeString?.split(':').map(Number) ?? [];
-            return minutes != null ? set(date, { hours, minutes }) : date;
-        },
-        parseDateInput(string) {
-            if (!string) {
-                return null;
-            }
-            const today = new Date();
-            for (const format of formats) {
-                const date = parse(string, format, today);
-                if (isValid(date)) {
-                    return date;
-                }
-            }
-            return null;
-        }
-    };
-    static contextType = I18nContext;
-    handleChange = (change) => {
-        const { onChange, withTime, applyTimeInput } = this.props;
-        const adjustedChange = withTime && !(change instanceof Date) && change?.date != null
-            ? applyTimeInput(change.date, change.time)
-            : change;
-        onChange(adjustedChange);
-    };
-    clear = () => {
-        let change = null;
-        if (this.props.range) {
-            change = { from: null, to: null };
-        }
-        this.handleChange(change);
-    };
-    popup;
-    popupRef = (el) => {
-        this.popup = el;
-    };
-    closePopup = () => {
-        this.popup?._onCloseAttempt();
-    };
-    parse = memoize((date) => {
-        const { parseDateInput } = this.props;
-        if (date instanceof Date) {
-            return date;
-        }
-        if (typeof date === 'number') {
-            return new Date(date);
-        }
-        return parseDateInput(date);
-    });
-    formatTime() {
-        const { displayTimeFormat, locale } = this.props;
-        const date = this.parse(this.props.date);
-        if (date != null) {
-            return displayTimeFormat(date, locale);
-        }
-        return null;
-    }
-    getAnchorText = () => {
-        const { range, datePlaceholder, dateTimePlaceholder, rangePlaceholder, withTime, displayFormat, displayMonthFormat, displayDayFormat, translations, locale } = this.props;
-        const { translate } = this.context;
-        const date = this.parse(this.props.date);
-        const from = this.parse(this.props.from);
-        const to = this.parse(this.props.to);
-        const time = this.formatTime();
-        if (!range && !withTime) {
-            return date
-                ? displayFormat(date, locale)
-                : (datePlaceholder ?? translations?.setDate ?? translate('setDate'));
-        }
-        else if (!range && withTime) {
-            if (!date && !time) {
-                return dateTimePlaceholder ?? translations?.setDateTime ?? translate('setDateTime');
-            }
-            else {
-                return `${date && displayFormat(date, locale) || '—'}, ${time || '—'}`;
-            }
-        }
-        else if (from && to) {
-            if (!isSameYear(from, to)) {
-                return `${displayFormat(from, locale)} — ${displayFormat(to, locale)}`;
-            }
-            else if (!isSameMonth(from, to)) {
-                return `${displayMonthFormat(from, locale)} — ${displayFormat(to, locale)}`;
-            }
-            else if (!isSameDay(from, to)) {
-                return `${displayDayFormat(from, locale)} — ${displayFormat(to, locale)}`;
-            }
-            else {
-                return `${displayFormat(to, locale)}`;
-            }
-        }
-        else if (from) {
-            return `${displayFormat(from, locale)} —`;
-        }
-        else if (to) {
-            return `— ${displayFormat(to, locale)}`;
-        }
-        else {
-            return rangePlaceholder ?? translations?.setPeriod ?? translate('setPeriod');
-        }
-    };
-    render() {
-        const anchorContent = (<div className={styles.anchorContent}>
-        <Icon glyph={calendarIcon} className={styles.calendarIcon}/>
-        {this.getAnchorText()}
-        <Icon glyph={chevronDownIcon} className={styles.chevronDownIcon}/>
-      </div>);
-        const { className, popupClassName, clear, inline, dropdownProps, translations, ...datePopupProps } = this.props;
-        const classes = classNames(styles.datePicker, className, styles[`size${this.props.size}`], {
-            [styles.inline]: inline
-        });
-        return (<Dropdown className={classes} disabled={this.props.disabled} anchor={inline
-                ? (<Link data-test-ring-dropdown-anchor className={styles.anchor} disabled={this.props.disabled ?? false} pseudo>
-                {this.getAnchorText()}
-              </Link>)
-                : (<Button data-test-ring-dropdown-anchor className={styles.anchor} text={false} disabled={this.props.disabled ?? false}>
-                {anchorContent}
-              </Button>)} {...dropdownProps}>
-        <PopupComponent className={popupClassName} popupRef={this.popupRef} onClear={clear ? this.clear : null} datePopupProps={{
-                ...datePopupProps,
-                translations,
-                onChange: this.handleChange,
-                parseDateInput: this.parse,
-                time: this.formatTime()
-            }} onComplete={this.closePopup}/>
-      </Dropdown>);
-    }
-}

package/components/date-picker/date-popup.d.ts

@@ -1,55 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { DatePickerChange, DatePopupBaseProps, DateSpecificPopupProps, DatePopupState, RangeSpecificPopupProps, TimeSpecificPopupProps, Field } from './consts';
-export type DatePopupProps = DatePopupBaseProps & (DateSpecificPopupProps | TimeSpecificPopupProps | RangeSpecificPopupProps);
-export default class DatePopup extends Component<DatePopupProps, DatePopupState> {
-    static sameDay(next: Date | number | null, prev: Date | number | null): boolean;
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-        date: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
-        range: PropTypes.Requireable<boolean>;
-        withTime: PropTypes.Requireable<boolean>;
-        time: PropTypes.Requireable<string>;
-        from: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
-        to: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
-        renderAfterCalendar: PropTypes.Requireable<(...args: any[]) => any>;
-        displayFormat: PropTypes.Requireable<(...args: any[]) => any>;
-        parseDateInput: PropTypes.Requireable<(...args: any[]) => any>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        onComplete: PropTypes.Requireable<(...args: any[]) => any>;
-        onClear: PropTypes.Requireable<(...args: any[]) => any>;
-        minDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
-        maxDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
-        fromPlaceholder: PropTypes.Requireable<string>;
-        toPlaceholder: PropTypes.Requireable<string>;
-        timePlaceholder: PropTypes.Requireable<string>;
-        locale: PropTypes.Requireable<object>;
-    };
-    static defaultProps: {
-        onChange(): void;
-    };
-    constructor(props: DatePopupProps);
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: DatePopupBaseProps, prevState: DatePopupState): void;
-    componentWillUnmount(): void;
-    private _scrollDate?;
-    private _scrollTS?;
-    isInTimeMode: () => boolean;
-    componentRef: React.RefObject<HTMLDivElement>;
-    handleWheel: (e: WheelEvent) => void;
-    parse(text: string | null | undefined, type: 'time'): string;
-    parse(text: Date | number | string | null | undefined, type?: 'date' | 'from' | 'to'): Date;
-    select(changes: DatePickerChange): void;
-    confirm(name: Field): void;
-    isValidDate: (parsedText: Date) => boolean;
-    scheduleScroll: () => void;
-    scrollTo: (scrollDate: number) => void;
-    hoverHandler: (hoverDate: Date) => void;
-    handleActivate: (arg: Field) => () => void;
-    handleInput: (text: string, name: Field) => void;
-    handleConfirm: (arg: Field) => () => void;
-    selectHandler: (date: Date) => void;
-    handleScroll: (scrollDate: number) => void;
-    onClear: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    render(): React.JSX.Element;
-}

package/components/date-picker/date-popup.js

@@ -1,347 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import isAfter from 'date-fns/isAfter';
-import isBefore from 'date-fns/isBefore';
-import isSameDay from 'date-fns/isSameDay';
-import startOfDay from 'date-fns/startOfDay';
-import { set } from 'date-fns';
-import memoize from '../global/memoize';
-import DateInput from './date-input';
-import Months from './months';
-import Years from './years';
-import Weekdays from './weekdays';
-import { dateType, parseTime } from './consts';
-import styles from './date-picker.css';
-const scrollExpDelay = 10;
-export default class DatePopup extends Component {
-    static sameDay(next, prev) {
-        if (next && prev) {
-            return isSameDay(next, prev);
-        }
-        return next === prev;
-    }
-    static propTypes = {
-        className: PropTypes.string,
-        date: dateType,
-        range: PropTypes.bool,
-        withTime: PropTypes.bool,
-        time: PropTypes.string,
-        from: dateType,
-        to: dateType,
-        renderAfterCalendar: PropTypes.func,
-        displayFormat: PropTypes.func,
-        parseDateInput: PropTypes.func,
-        onChange: PropTypes.func,
-        onComplete: PropTypes.func,
-        onClear: PropTypes.func,
-        minDate: dateType,
-        maxDate: dateType,
-        fromPlaceholder: PropTypes.string,
-        toPlaceholder: PropTypes.string,
-        timePlaceholder: PropTypes.string,
-        locale: PropTypes.object
-    };
-    static defaultProps = {
-        onChange() { }
-    };
-    constructor(props) {
-        super(props);
-        const defaultState = {
-            text: null,
-            hoverDate: null,
-            scrollDate: null
-        };
-        const { range, withTime } = props;
-        if (!range) {
-            const parsedDate = this.parse(props.date, 'date');
-            const active = withTime && parsedDate && !props.time ? 'time' : 'date';
-            this.state = { ...defaultState, active };
-        }
-        else if (props.from && !props.to) {
-            this.state = { ...defaultState, active: 'to' };
-        }
-        else {
-            this.state = { ...defaultState, active: 'from' };
-        }
-    }
-    componentDidMount() {
-        if (this.componentRef.current) {
-            this.componentRef.current.addEventListener('wheel', this.handleWheel);
-        }
-    }
-    componentDidUpdate(prevProps, prevState) {
-        if (this.state.active !== prevState.active) {
-            if (this.state.text && prevState.active) {
-                this.confirm(prevState.active);
-            }
-            this.setState({ text: null });
-        }
-    }
-    componentWillUnmount() {
-        if (this.componentRef.current) {
-            this.componentRef.current.removeEventListener('wheel', this.handleWheel);
-        }
-    }
-    _scrollDate;
-    _scrollTS;
-    isInTimeMode = () => !this.props.range && this.props.withTime || false;
-    componentRef = React.createRef();
-    handleWheel = (e) => {
-        if (e.cancelable) {
-            e.preventDefault();
-        }
-    };
-    parse(text, type) {
-        if (type === 'time') {
-            return parseTime(String(text));
-        }
-        return this.props.parseDateInput(text);
-    }
-    select(changes) {
-        const { range, withTime } = this.props;
-        const prevActive = this.state.active;
-        if (!range && !withTime) {
-            this.setState({
-                text: null,
-                scrollDate: null
-            });
-            const adjustedDate = changes.date && set(new Date(), {
-                year: changes.date.getFullYear(),
-                month: changes.date.getMonth(),
-                date: changes.date.getDate()
-            });
-            this.props.onChange(adjustedDate);
-            this.props.onComplete();
-        }
-        else if (!range && withTime) {
-            const date = this.parse(this.props.date, 'date');
-            const time = this.parse(this.props.time, 'time');
-            const changeToSubmit = {
-                date: changes.date || date,
-                time: changes.time || time
-            };
-            this.setState({
-                active: changes.date ? 'time' : 'date',
-                text: null,
-                scrollDate: null
-            });
-            this.props.onChange(changeToSubmit);
-            if (!changes.date && prevActive === 'time' &&
-                changeToSubmit.date && changeToSubmit.time) {
-                this.props.onComplete();
-            }
-        }
-        else {
-            let { from, to } = {
-                ...this.props,
-                ...changes
-            };
-            from = this.parse(from, 'from');
-            to = this.parse(to, 'to');
-            // proceed to setting the end by default
-            let active = 'to';
-            let complete = false;
-            // end is before beginning
-            if (from && to && isAfter(startOfDay(from), startOfDay(to))) {
-                // ignore the old end when beginning is changed
-                if (changes.from) {
-                    to = null;
-                    // treat range as reverse when end is changed
-                }
-                else if (changes.to) {
-                    to = from;
-                    from = changes.to;
-                }
-            }
-            else if (changes.to) {
-                active = 'from';
-                complete = !!from;
-            }
-            this.setState({
-                active,
-                hoverDate: null,
-                text: null
-            });
-            this.props.onChange({ from, to });
-            if (complete) {
-                this.props.onComplete();
-            }
-        }
-    }
-    confirm(name) {
-        const text = this.state.text;
-        let result;
-        if (name === 'time') {
-            result = this.parse(text, name);
-            const time = this.parse('time' in this.props ? this.props.time : '', 'time');
-            const emptyCase = this.state.active === 'time' ? '00:00' : null;
-            result = result || time || emptyCase;
-        }
-        else {
-            result = this.parse(text, name);
-            if (!this.isValidDate(result)) {
-                result = this.parse(name in this.props ? this.props[name] : '', name);
-            }
-        }
-        this.select({
-            [name]: result
-        });
-    }
-    isValidDate = (parsedText) => {
-        const minDate = this.parse(this.props.minDate, 'date');
-        const maxDate = this.parse(this.props.maxDate, 'date');
-        if (parsedText) {
-            return (!(minDate && isBefore(parsedText, minDate) ||
-                maxDate && isAfter(parsedText, maxDate)));
-        }
-        return false;
-    };
-    scheduleScroll = () => {
-        const current = this.state.scrollDate && this.parse(this.state.scrollDate, 'date') ||
-            this.parse(this.props[this.state.active], 'date') ||
-            new Date();
-        const goal = this._scrollDate;
-        if (!current ||
-            !goal ||
-            DatePopup.sameDay(goal, current)) {
-            this._scrollDate = null;
-            this._scrollTS = null;
-            return;
-        }
-        if (this._scrollTS) {
-            const diff = goal - Number(current);
-            const dt = Date.now() - this._scrollTS;
-            const next = goal - diff * (Math.E ** (-dt / scrollExpDelay));
-            this.setState({ scrollDate: next });
-        }
-        this._scrollTS = Date.now();
-        window.requestAnimationFrame(this.scheduleScroll);
-    };
-    scrollTo = (scrollDate) => {
-        this._scrollDate = scrollDate;
-        if (!this._scrollTS) {
-            this.scheduleScroll();
-        }
-    };
-    hoverHandler = (hoverDate) => this.setState({ hoverDate });
-    handleActivate = memoize((name) => () => this.setState({ active: name }));
-    handleInput = (text, name) => {
-        if (name !== 'time') {
-            const parsed = this.parse(text, name);
-            if (this.isValidDate(parsed)) {
-                this.scrollTo(Number(parsed));
-            }
-        }
-        this.setState({
-            text,
-            hoverDate: null
-        });
-    };
-    handleConfirm = memoize((name) => () => this.confirm(name));
-    selectHandler = (date) => {
-        if (this.isInTimeMode()) {
-            this.setState({
-                active: 'time'
-            }, () => this.select({ date }));
-        }
-        else {
-            this.select({ [this.state.active]: date });
-        }
-    };
-    handleScroll = (scrollDate) => this.setState({ scrollDate });
-    onClear = (e) => {
-        let changes;
-        if (this.props.range) {
-            changes = {
-                from: null,
-                to: null
-            };
-        }
-        else {
-            changes = {
-                date: null
-            };
-        }
-        this.select(changes);
-        this.props.onClear?.(e);
-        this.componentRef.current?.querySelector('input')?.focus();
-    };
-    render() {
-        const { range, withTime, locale } = this.props;
-        const { from, to, date, time, ...restProps } = this.props;
-        const parsedDate = this.parse(this.props.date, 'date');
-        const parsedTo = this.parse(this.props.to, 'to');
-        const names = range ? ['from', 'to'] : ['date'];
-        const dates = names.reduce((obj, key) => {
-            const value = this.props[key];
-            return {
-                ...obj,
-                [key]: this.parse(value, key)
-            };
-        }, {});
-        const activeDate = this.state.active !== 'time'
-            ? this.state.hoverDate ||
-                (this.state.text != null ? this.parse(this.state.text, 'date') : null)
-            : this.state.hoverDate || null;
-        const currentRange = range && dates.from && dates.to && [dates.from, dates.to] || null;
-        let activeRange = null;
-        if (range && activeDate) {
-            switch (this.state.active) {
-                case 'from':
-                    if (dates.to && isAfter(startOfDay(activeDate), startOfDay(dates.to))) {
-                        activeRange = [activeDate, dates.to];
-                    }
-                    break;
-                case 'to':
-                    if (!dates.from) {
-                        break;
-                    }
-                    if (isBefore(startOfDay(activeDate), startOfDay(dates.from))) {
-                        activeRange = [activeDate, dates.from];
-                    }
-                    else {
-                        activeRange = [dates.from, activeDate];
-                    }
-                    break;
-                default:
-                    break;
-            }
-        }
-        const scrollDate = withTime && !range
-            ? this.state.scrollDate || dates.date || new Date()
-            : this.state.scrollDate || dates[this.state.active] || new Date();
-        const calendarProps = {
-            ...restProps,
-            ...dates,
-            scrollDate,
-            activeDate,
-            currentRange,
-            activeRange,
-            onScroll: this.handleScroll,
-            onScrollChange: this.scrollTo
-        };
-        const clearable = Boolean(this.props.onClear);
-        return (<div className={styles.datePopup} data-test="ring-date-popup" ref={this.componentRef}>
-        <div className={styles.filterWrapper}>
-          {names.map(name => {
-                let onClear;
-                if (clearable && name !== 'from' && !this.isInTimeMode()) {
-                    onClear = this.onClear.bind(this);
-                }
-                return (<DateInput {...this.props} {...this.state} divider={name === 'from' && (dates[name] != null || parsedTo != null)} name={name} key={name} date={dates[name]} active={this.state.active === name} onActivate={this.handleActivate(name)} onInput={this.handleInput} onConfirm={this.handleConfirm(name)} onClear={onClear} locale={locale}/>);
-            })}
-
-          {this.isInTimeMode()
-                ? (<DateInput {...this.props} text={this.state.text} divider={!!parsedDate} hoverDate={null} name={'time'} key={'time'} date={null} time={time} active={this.state.active === 'time'} onActivate={this.handleActivate('time')} onInput={this.handleInput} onConfirm={this.handleConfirm('time')} onClear={clearable && this.onClear || undefined} locale={locale}/>)
-                : ('')}
-        </div>
-        <Weekdays locale={locale}/>
-        <div className={styles.calendar}>
-          <Months {...calendarProps} onHover={this.hoverHandler} onSelect={this.selectHandler} locale={locale}/>
-          <Years {...calendarProps}/>
-        </div>
-
-        {this.props.renderAfterCalendar && this.props.renderAfterCalendar(this.state)}
-      </div>);
-    }
-}

package/components/date-picker/day.d.ts

@@ -1,30 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { MonthsProps } from './consts';
-export interface DayProps extends MonthsProps {
-    day: Date;
-    empty: boolean;
-}
-export default class Day extends Component<DayProps> {
-    static propTypes: {
-        day: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
-        from: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
-        currentRange: PropTypes.Requireable<(NonNullable<string | number | Date | null | undefined> | null | undefined)[]>;
-        activeRange: PropTypes.Requireable<(NonNullable<string | number | Date | null | undefined> | null | undefined)[]>;
-        empty: PropTypes.Requireable<boolean>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        parseDateInput: PropTypes.Requireable<(...args: any[]) => any>;
-        onHover: PropTypes.Requireable<(...args: any[]) => any>;
-        minDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
-        maxDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
-    };
-    handleClick: () => void;
-    handleMouseOver: () => void;
-    handleMouseOut: () => void;
-    isDay: (date: Date) => boolean;
-    is: (name: 'date' | 'from' | 'to' | 'activeDate') => boolean;
-    inRange: (range: [Date, Date] | null) => boolean | null;
-    isDisabled: (date: Date) => boolean;
-    parse(text: string | null | undefined): Date | null;
-    render(): React.JSX.Element;
-}