@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

package/components/data-list/title.js

@@ -0,0 +1,65 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import focusSensorHOC from '../global/focus-sensor-hoc';
+import Checkbox from '../checkbox/checkbox';
+import getUID from '../global/get-uid';
+import { refObject } from '../global/prop-types';
+import styles from './data-list.css';
+class Title extends PureComponent {
+    static defaultProps = {
+        selectable: false,
+        selected: false,
+        showFocus: false
+    };
+    id = getUID('data-list-title');
+    onCheckboxFocus = () => {
+        this.props.onFocusRestore();
+    };
+    onCheckboxChange = () => {
+        this.toggleSelection();
+    };
+    toggleSelection() {
+        const { selectable, selected, onSelect } = this.props;
+        if (selectable) {
+            onSelect(!selected);
+        }
+    }
+    render() {
+        const { className, title, offset, showFocus, innerRef, selectable, selected, collapserExpander } = this.props;
+        const classes = classNames(className, {
+            [styles.title]: true,
+            [styles.titleFocused]: showFocus,
+            [styles.titleSelected]: selected
+        });
+        return (<div id={this.id} className={classes} style={{ paddingLeft: offset }} ref={innerRef}>
+        <div className={styles.boxes}>
+          {selectable &&
+                (<div className={styles.checkboxBox}>
+                <Checkbox aria-labelledby={this.id} className={showFocus ? 'ring-checkbox_focus' : ''} checked={selected} onFocus={this.onCheckboxFocus} onChange={this.onCheckboxChange} tabIndex={-1}/>
+              </div>)}
+
+          {collapserExpander}
+        </div>
+
+        {title}
+      </div>);
+    }
+}
+Title.propTypes = {
+    className: PropTypes.string,
+    title: PropTypes.node,
+    offset: PropTypes.number,
+    selectable: PropTypes.bool,
+    selected: PropTypes.bool,
+    onSelect: PropTypes.func.isRequired,
+    showFocus: PropTypes.bool,
+    collapserExpander: PropTypes.node,
+    innerRef: PropTypes.oneOfType([
+        refObject(PropTypes.instanceOf(HTMLDivElement)),
+        PropTypes.func
+    ]),
+    // focusSensorHOC
+    onFocusRestore: PropTypes.func.isRequired
+};
+export default focusSensorHOC(Title);

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

@@ -0,0 +1,98 @@
+import { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import type { Locale } from 'date-fns';
+declare const units: {
+    unit: number;
+    cellSize: number;
+    calHeight: number;
+    yearHeight: number;
+};
+export default units;
+export declare const YEAR = 12;
+export declare const WEEK = 7;
+export declare const weekdays: {
+    MO: number;
+    TU: number;
+    WE: number;
+    TH: number;
+    FR: number;
+    SA: number;
+    SU: number;
+};
+export declare const MIDDLE_DAY = 15;
+export declare const yearDuration: number;
+export declare const yearScrollSpeed: number;
+export declare const DOUBLE = 2;
+export declare const HALF = 0.5;
+export declare const dateType: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
+export declare function parseTime(time: string): string | null;
+export interface DateInputTranslations {
+    addFirstDate?: string;
+    addSecondDate?: string;
+    addTime?: string;
+    selectName?: string;
+}
+export interface DateSpecificPopupProps {
+    withTime?: false | undefined;
+    range?: false | undefined;
+    onChange: (date: Date | null | undefined) => void;
+}
+export interface DatePickerChange {
+    from?: Date | null | undefined;
+    to?: Date | null | undefined;
+    date?: Date | null | undefined;
+    time?: string | null | undefined;
+}
+export interface TimeSpecificPopupProps {
+    withTime: true;
+    range?: false | undefined;
+    onChange: (change: DatePickerChange) => void;
+}
+export interface RangeSpecificPopupProps {
+    withTime?: false | undefined;
+    range: true;
+    onChange: (change: DatePickerChange) => void;
+}
+export interface DatePopupState {
+    active: Field;
+    text: string | null;
+    hoverDate: Date | null;
+    scrollDate: number | null;
+}
+export interface DatePopupBaseProps {
+    date?: Date | number | string | null | undefined;
+    time?: string | null | undefined;
+    from?: Date | number | string | null | undefined;
+    to?: Date | number | string | null | undefined;
+    minDate?: string | null | undefined;
+    maxDate?: string | null | undefined;
+    translations?: DateInputTranslations | null | undefined;
+    fromPlaceholder?: string | null | undefined;
+    toPlaceholder?: string | null | undefined;
+    timePlaceholder?: string | null | undefined;
+    locale?: Locale | undefined;
+    parseDateInput: (text: Date | number | string | null | undefined) => Date | null;
+    displayFormat: (date: Date, locale: Locale | undefined) => string;
+    onComplete: () => void;
+    onClear?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | null | undefined;
+    renderAfterCalendar?: ((state: DatePopupState) => ReactNode) | undefined;
+}
+export interface Dates {
+    from?: Date | null | undefined;
+    to?: Date | null | undefined;
+    date?: Date | null | undefined;
+    time?: never;
+}
+export interface CalendarProps extends Omit<DatePopupBaseProps, 'date' | 'from' | 'to' | 'time'>, Dates {
+    activeDate: Date | null;
+    scrollDate: number | Date;
+    currentRange: [Date, Date] | null;
+    activeRange: [Date, Date] | null;
+    onScroll: (to: number) => void;
+    onScrollChange: (date: number) => void;
+}
+export interface MonthsProps extends CalendarProps {
+    onSelect: (date: Date) => void;
+    onHover: (date: Date) => void;
+}
+export type Field = 'date' | 'time' | 'from' | 'to';

package/components/date-picker/consts.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import { add } from 'date-fns/add';
+const unit = 8; // px;
+const units = {
+    unit,
+    /* eslint-disable @typescript-eslint/no-magic-numbers */
+    cellSize: unit * 3,
+    calHeight: unit * 36,
+    yearHeight: unit * 4
+    /* eslint-enable */
+};
+export default units;
+export const YEAR = 12;
+export const WEEK = 7;
+export const weekdays = {
+    MO: 1,
+    TU: 2,
+    WE: 3,
+    TH: 4,
+    FR: 5,
+    SA: 6,
+    SU: 0
+};
+export const MIDDLE_DAY = 15;
+const durationToMillis = (duration) => +add(0, duration);
+export const yearDuration = durationToMillis({ years: 1 });
+export const yearScrollSpeed = yearDuration / (YEAR * units.cellSize);
+export const DOUBLE = 2;
+export const HALF = 0.5;
+export const dateType = PropTypes.oneOfType([
+    PropTypes.instanceOf(Date),
+    PropTypes.string,
+    PropTypes.number
+]);
+export function parseTime(time) {
+    let result = null;
+    if (/^([01][0-9]|2[0-3]):[0-5][0-9]$/.test(time)) {
+        result = time;
+    }
+    else if (/^([0-9]|2[0-3]):[0-5][0-9]$/.test(time)) {
+        result = `0${time}`;
+    }
+    return result;
+}

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DatePopupBaseProps, Field } from './consts';
+export interface UpdateInputConfig {
+    active: boolean;
+    text: string | null;
+}
+export interface DateInputProps extends DatePopupBaseProps, UpdateInputConfig {
+    divider: boolean;
+    name: Field;
+    hoverDate: Date | null;
+    date: Date | null | undefined;
+    time?: string | null | undefined;
+    onInput: (value: string, name: Field) => void;
+    onActivate: () => void;
+    onConfirm: () => void;
+}
+export default class DateInput extends React.PureComponent<DateInputProps> {
+    static propTypes: {
+        active: PropTypes.Requireable<boolean>;
+        divider: PropTypes.Requireable<boolean>;
+        name: PropTypes.Requireable<string>;
+        text: PropTypes.Requireable<string>;
+        hoverDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
+        date: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
+        time: PropTypes.Requireable<string>;
+        displayFormat: PropTypes.Requireable<(...args: any[]) => any>;
+        translations: PropTypes.Requireable<object>;
+        fromPlaceholder: PropTypes.Requireable<string>;
+        toPlaceholder: PropTypes.Requireable<string>;
+        timePlaceholder: PropTypes.Requireable<string>;
+        onInput: PropTypes.Requireable<(...args: any[]) => any>;
+        onActivate: PropTypes.Requireable<(...args: any[]) => any>;
+        onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
+        onClear: PropTypes.Requireable<(...args: any[]) => any>;
+        locale: PropTypes.Requireable<object>;
+    };
+    componentDidUpdate(prevProps: DateInputProps): void;
+    static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;
+    context: React.ContextType<typeof DateInput.contextType>;
+    input?: HTMLInputElement | null;
+    inputRef: (el: HTMLInputElement | null) => void;
+    updateInput({ text, active }: UpdateInputConfig): void;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleKeyDown: (e: React.KeyboardEvent) => false | void;
+    render(): React.JSX.Element;
+}

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import Input from '../input/input';
+import { ControlsHeight } from '../global/controls-height';
+import { I18nContext } from '../i18n/i18n-context';
+import { dateType } from './consts';
+import styles from './date-picker.css';
+export default class DateInput extends React.PureComponent {
+    static propTypes = {
+        active: PropTypes.bool,
+        divider: PropTypes.bool,
+        name: PropTypes.string,
+        text: PropTypes.string,
+        hoverDate: dateType,
+        date: dateType,
+        time: PropTypes.string,
+        displayFormat: PropTypes.func,
+        translations: PropTypes.object,
+        fromPlaceholder: PropTypes.string,
+        toPlaceholder: PropTypes.string,
+        timePlaceholder: PropTypes.string,
+        onInput: PropTypes.func,
+        onActivate: PropTypes.func,
+        onConfirm: PropTypes.func,
+        onClear: PropTypes.func,
+        locale: PropTypes.object
+    };
+    componentDidUpdate(prevProps) {
+        const { text, active } = this.props;
+        if (text !== prevProps.text || active !== prevProps.active) {
+            this.updateInput({ text, active });
+        }
+    }
+    static contextType = I18nContext;
+    input;
+    inputRef = (el) => {
+        this.input = el;
+        this.updateInput(this.props);
+    };
+    updateInput({ text, active }) {
+        const el = this.input;
+        if (!el) {
+            return;
+        }
+        if (active) {
+            el.focus();
+            if (!text) {
+                el.select();
+            }
+        }
+        else {
+            el.blur();
+        }
+    }
+    handleChange = (e) => this.props.onInput(e.currentTarget.value, e.currentTarget.dataset.name);
+    handleKeyDown = (e) => e.key === 'Enter' && this.props.onConfirm();
+    render() {
+        const { active, divider, text, time, name, hoverDate, date, displayFormat, translations, onActivate, onClear, fromPlaceholder, toPlaceholder, timePlaceholder, locale } = this.props;
+        const { translate } = this.context;
+        let displayText = '';
+        if (active && hoverDate) {
+            displayText = displayFormat(hoverDate, locale);
+        }
+        else if (active && text != null) {
+            displayText = text;
+        }
+        else if (date) {
+            displayText = displayFormat(date, locale);
+        }
+        else if (name === 'time') {
+            displayText = time || '';
+        }
+        const placeholder = (() => {
+            switch (name) {
+                case 'from':
+                    return fromPlaceholder || (translations?.addFirstDate ?? translate('addFirstDate'));
+                case 'to':
+                    return toPlaceholder || (translations?.addSecondDate ?? translate('addSecondDate'));
+                case 'time':
+                    return timePlaceholder || (translations?.addTime ?? translate('addTime'));
+                default:
+                    return (translations?.selectName ?? translate('selectName')).
+                        replace('%name%', name).
+                        replace('{{name}}', name);
+            }
+        })();
+        const classes = classNames(styles.filter, styles[`${name}Input`], divider && styles[`${name}InputWithDivider`], 'ring-js-shortcuts');
+        return (<Input autoComplete="off" borderless height={ControlsHeight.L} data-name={name} inputRef={this.inputRef} className={classes} value={displayText} onChange={this.handleChange} onFocus={onActivate} onKeyDown={this.handleKeyDown} onClear={onClear} placeholder={placeholder}/>);
+    }
+}