@jetbrains/ring-ui 4.1.4 → 5.0.0-beta.1

package/components/data-list/item.jsx

@@ -0,0 +1,114 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import chevronRightIcon from '@jetbrains/icons/chevron-right';
+import chevronDownIcon from '@jetbrains/icons/chevron-down';
+import Link from '../link/link';
+import Text from '../text/text';
+import LoaderInline from '../loader-inline/loader-inline';
+import Button from '../button/button';
+import Selection from '../table/selection';
+import Title from './title';
+import styles from './data-list.css';
+export var moreLessButtonStates;
+(function (moreLessButtonStates) {
+    moreLessButtonStates[moreLessButtonStates["UNUSED"] = 0] = "UNUSED";
+    moreLessButtonStates[moreLessButtonStates["MORE"] = 1] = "MORE";
+    moreLessButtonStates[moreLessButtonStates["MORE_LOADING"] = 2] = "MORE_LOADING";
+    moreLessButtonStates[moreLessButtonStates["LESS"] = 3] = "LESS";
+})(moreLessButtonStates || (moreLessButtonStates = {}));
+const ITEM_LEFT_OFFSET = 32;
+const LIST_LEFT_OFFSET = 24;
+export default class Item extends PureComponent {
+    static defaultProps = {
+        items: [],
+        level: 0,
+        parentShift: 0,
+        showMoreLessButton: moreLessButtonStates.UNUSED,
+        onItemMoreLess: () => { }
+    };
+    onShowMore = () => {
+        const { onItemMoreLess, item } = this.props;
+        onItemMoreLess(item, true);
+    };
+    onShowLess = () => {
+        const { onItemMoreLess, item } = this.props;
+        onItemMoreLess(item, false);
+    };
+    onFocus = () => {
+        const { onFocus, item } = this.props;
+        onFocus(item);
+    };
+    onSelect = (selected) => {
+        const { onSelect, item } = this.props;
+        onSelect(item, selected);
+    };
+    renderItem = (model, parentShift) => {
+        const { onFocus, onSelect, selection, level, itemFormatter } = this.props;
+        const item = itemFormatter(model);
+        return (<Item key={item.key || item.id} item={model} title={item.title} items={item.items} level={level + 1} parentShift={parentShift} itemFormatter={itemFormatter} collapsible={item.collapsible} collapsed={item.collapsed} onCollapse={item.onCollapse} onExpand={item.onExpand} showFocus={selection.isFocused(model)} onFocus={onFocus} selection={selection} selectable={item.selectable} selected={selection.isSelected(model)} onSelect={onSelect}/>);
+    };
+    render() {
+        const { title, items, showMoreLessButton, level, parentShift, showFocus, selectable, selected, collapsible, collapsed, onCollapse, onExpand } = this.props;
+        let moreLessButton;
+        if (showMoreLessButton === moreLessButtonStates.MORE ||
+            showMoreLessButton === moreLessButtonStates.MORE_LOADING) {
+            moreLessButton = (<Text info>
+          <Link inherit pseudo onClick={this.onShowMore}>{'Show more'}</Link>
+          {showMoreLessButton === moreLessButtonStates.MORE_LOADING &&
+                    <LoaderInline className={styles.showMoreLoader}/>}
+        </Text>);
+        }
+        else if (showMoreLessButton === moreLessButtonStates.LESS) {
+            moreLessButton = (<Text info>
+          <Link inherit pseudo onClick={this.onShowLess}>{'Show less'}</Link>
+        </Text>);
+        }
+        let collapserExpander = null;
+        if (collapsible) {
+            if (collapsed) {
+                collapserExpander = (<Button title="Expand" onClick={onExpand} icon={chevronRightIcon} className={styles.collapseButton} iconClassName={styles.collapseIcon} data-test="ring-data-list-expand"/>);
+            }
+            else {
+                collapserExpander = (<Button title="Collapse" onClick={onCollapse} icon={chevronDownIcon} className={styles.collapseButton} iconClassName={styles.collapseIcon} data-test="ring-data-list-collapse"/>);
+            }
+        }
+        const itemIsEmpty = !items?.length || (collapsible && collapsed);
+        const offset = level * LIST_LEFT_OFFSET + ITEM_LEFT_OFFSET + parentShift;
+        return (<li>
+        <Title title={title} focused={showFocus} showFocus={showFocus} selectable={selectable} selected={selected} collapserExpander={collapserExpander} onFocus={this.onFocus} onSelect={this.onSelect} offset={offset}/>
+
+        {!itemIsEmpty
+                ? (<ul className={styles.itemContent}>
+              {items.map(model => this.renderItem(model, parentShift))}
+
+              {showMoreLessButton !== moreLessButtonStates.UNUSED
+                        ? <li className={styles.showMore}>{moreLessButton}</li>
+                        : null}
+            </ul>)
+                : null}
+      </li>);
+    }
+}
+Item.propTypes = {
+    item: PropTypes.shape({
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+    }).isRequired,
+    title: PropTypes.node,
+    items: PropTypes.array,
+    className: PropTypes.string,
+    level: PropTypes.number,
+    parentShift: PropTypes.number,
+    itemFormatter: PropTypes.func.isRequired,
+    collapsible: PropTypes.bool,
+    collapsed: PropTypes.bool,
+    onCollapse: PropTypes.func,
+    onExpand: PropTypes.func,
+    showFocus: PropTypes.bool,
+    onFocus: PropTypes.func.isRequired,
+    selection: PropTypes.instanceOf(Selection).isRequired,
+    selectable: PropTypes.bool,
+    selected: PropTypes.bool,
+    onSelect: PropTypes.func.isRequired,
+    showMoreLessButton: PropTypes.number,
+    onItemMoreLess: PropTypes.func
+};

package/components/data-list/selection.d.ts

@@ -0,0 +1,16 @@
+import TableSelection, { CloneWithConfig, SelectionItem } from '../table/selection';
+export default class Selection<T extends SelectionItem> extends TableSelection<T> {
+    protected _buildData(data: T[]): Set<T>;
+    protected _buildSelected(data: Set<T>, selected: Set<T>): Set<T>;
+    private _getDescendants;
+    private _getAncestors;
+    private _selectDescendants;
+    private _deselectDescendants;
+    private _selectAncestors;
+    private _deselectAncestors;
+    select(value?: T | null): Selection<T>;
+    focus(value: T | null | undefined): Selection<T>;
+    resetSelection(): Selection<T>;
+    cloneWith(config: CloneWithConfig<T>): Selection<T>;
+    deselect(value?: T | null): Selection<T>;
+}

package/components/data-list/selection.js

@@ -1,96 +1,81 @@
 import TableSelection from '../table/selection';
-
-
 export default class Selection extends TableSelection {
-  _buildData(data) {
-    return new Set(this._getDescendants(data));
-  }
-
-  _buildSelected(data, selected) {
-    const _selected = new Set(selected);
-
-    [...data].forEach(item => {
-      if (_selected.has(item)) {
-        this._selectDescendants(item, _selected);
-      }
-    });
-
-    return _selected;
-  }
-
-  _getDescendants(items) {
-    let result = [];
-
-    items.forEach(item => {
-      result.push(item);
-      result = [...result, ...this._getDescendants(this._getChildren(item))];
-    });
-
-    return result;
-  }
-
-  _getAncestors(item) {
-    let result = [];
-
-    const parent = [...this._data].find(it => this._getChildren(it).includes(item));
-    if (parent) {
-      result = [parent, ...this._getAncestors(parent)];
+    _buildData(data) {
+        return new Set(this._getDescendants(data));
     }
-
-    return result;
-  }
-
-  _selectDescendants(item, selected) {
-    this._getDescendants(this._getChildren(item)).
-      forEach(it => selected.add(it));
-  }
-
-  _deselectDescendants(item, selected) {
-    this._getDescendants(this._getChildren(item)).
-      forEach(it => selected.delete(it));
-  }
-
-  _selectAncestors(item, selected) {
-    this._getAncestors(item).forEach(ancestor => {
-      const groupIsSelected = this._getChildren(ancestor).
-        filter(it => this._isItemSelectable(it)).
-        every(it => selected.has(it));
-
-      if (groupIsSelected) {
-        selected.add(ancestor);
-      }
-    });
-  }
-
-  _deselectAncestors(item, selected) {
-    this._getAncestors(item).forEach(it => selected.delete(it));
-  }
-
-  select(value = this._focused) {
-    if (!value || !this._isItemSelectable(value)) {
-      return this;
+    _buildSelected(data, selected) {
+        const _selected = new Set(selected);
+        [...data].forEach(item => {
+            if (_selected.has(item)) {
+                this._selectDescendants(item, _selected);
+            }
+        });
+        return _selected;
     }
-
-    const selected = new Set(this._selected);
-    selected.add(value);
-
-    this._selectDescendants(value, selected);
-    this._selectAncestors(value, selected);
-
-    return this.cloneWith({selected});
-  }
-
-  deselect(value = this._focused) {
-    if (!value || !this._isItemSelectable(value)) {
-      return this;
+    _getDescendants(items) {
+        let result = [];
+        items.forEach(item => {
+            result.push(item);
+            result = [...result, ...this._getDescendants(this._getChildren(item))];
+        });
+        return result;
+    }
+    _getAncestors(item) {
+        let result = [];
+        const parent = [...this._data].find(it => this._getChildren(it).includes(item));
+        if (parent) {
+            result = [parent, ...this._getAncestors(parent)];
+        }
+        return result;
+    }
+    _selectDescendants(item, selected) {
+        this._getDescendants(this._getChildren(item)).
+            forEach(it => selected.add(it));
+    }
+    _deselectDescendants(item, selected) {
+        this._getDescendants(this._getChildren(item)).
+            forEach(it => selected.delete(it));
+    }
+    _selectAncestors(item, selected) {
+        this._getAncestors(item).forEach(ancestor => {
+            const groupIsSelected = this._getChildren(ancestor).
+                filter(it => this._isItemSelectable(it)).
+                every(it => selected.has(it));
+            if (groupIsSelected) {
+                selected.add(ancestor);
+            }
+        });
+    }
+    _deselectAncestors(item, selected) {
+        this._getAncestors(item).forEach(it => selected.delete(it));
+    }
+    select(value = this._focused) {
+        if (!value || !this._isItemSelectable(value)) {
+            return this;
+        }
+        const selected = new Set(this._selected);
+        selected.add(value);
+        this._selectDescendants(value, selected);
+        this._selectAncestors(value, selected);
+        return this.cloneWith({ selected });
+    }
+    focus(value) {
+        return super.focus(value);
+    }
+    resetSelection() {
+        return super.resetSelection();
+    }
+    cloneWith(config) {
+        return super.cloneWith(config);
+    }
+    deselect(value = this._focused) {
+        if (!value || !this._isItemSelectable(value)) {
+            return this;
+        }
+        const selected = new Set(this._selected);
+        selected.delete(value);
+        this._deselectDescendants(value, selected);
+        this._deselectAncestors(value, selected);
+        return this.cloneWith({ selected });
     }
-
-    const selected = new Set(this._selected);
-    selected.delete(value);
-
-    this._deselectDescendants(value, selected);
-    this._deselectAncestors(value, selected);
-
-    return this.cloneWith({selected});
-  }
 }

package/components/data-list/title.d.ts

@@ -0,0 +1,26 @@
+import React, { PureComponent, ReactNode } from 'react';
+import { FocusSensorAddProps } from '../global/focus-sensor-hoc';
+export interface TitleProps extends FocusSensorAddProps<HTMLDivElement> {
+    onSelect: (selected: boolean) => void;
+    selectable?: boolean | undefined;
+    selected?: boolean | undefined;
+    showFocus?: boolean | undefined;
+    offset?: number | undefined;
+    className?: string | null | undefined;
+    title?: ReactNode;
+    collapserExpander?: ReactNode;
+}
+declare class Title extends PureComponent<TitleProps> {
+    static defaultProps: {
+        selectable: boolean;
+        selected: boolean;
+        showFocus: boolean;
+    };
+    id: string;
+    onCheckboxFocus: () => void;
+    onCheckboxChange: () => void;
+    toggleSelection(): void;
+    render(): JSX.Element;
+}
+declare const _default: React.ComponentType<import("../global/focus-sensor-hoc").FocusSensorProps<TitleProps, HTMLDivElement, typeof Title>>;
+export default _default;

package/components/data-list/title.jsx

@@ -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/data-list-ng/data-list-ng.examples.js

@@ -2,10 +2,10 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import Selection from '@jetbrains/ring-ui/components/data-list/selection';
-import data from '@jetbrains/ring-ui/components/data-list/data-list.mock';
+import Selection from '../data-list/selection';
+import data from '../data-list/data-list.mock';
 
-import RingDataList from '@jetbrains/ring-ui/components/data-list-ng/data-list-ng';
+import RingDataList from './data-list-ng';
 
 export default {
   title: 'Legacy Angular/DataList Ng',

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

@@ -0,0 +1,99 @@
+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<string | number | Date>;
+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;
+    fromPlaceholder?: string | null | undefined;
+    toPlaceholder?: string | null | undefined;
+    timePlaceholder?: string | null | undefined;
+    hidden: boolean;
+    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 declare type Field = 'date' | 'time' | 'from' | 'to';

package/components/date-picker/consts.js

@@ -1,71 +1,44 @@
 import PropTypes from 'prop-types';
 import add from 'date-fns/add';
-
 const unit = 8; // px;
 const units = {
-  unit,
-  /* eslint-disable no-magic-numbers */
-  cellSize: unit * 3,
-  calHeight: unit * 36,
-  yearHeight: unit * 4
-  /* eslint-enable */
+    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
+    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});
+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 function linear(x0, y0, a) {
-  return {
-    y(x) {
-      return +y0 + (x - x0) * a;
-    },
-
-    x(y) {
-      return +x0 + (y - y0) / a;
-    }
-  };
-}
-
-export const deprecatedPropType = replacement => (props, propName) => {
-  if (propName in props) {
-    return new Error(`"${propName}" prop is deprecated and will be removed in 5.0. ${replacement} instead. See https://github.com/JetBrains/ring-ui/blob/master/CHANGELOG.md#310 for details`);
-  }
-  return undefined;
-};
-
 export const dateType = PropTypes.oneOfType([
-  PropTypes.instanceOf(Date),
-  PropTypes.string,
-  PropTypes.number
+    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;
+    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,57 @@
+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<string | number | Date>;
+        date: PropTypes.Requireable<string | number | Date>;
+        time: PropTypes.Requireable<string>;
+        displayFormat: PropTypes.Requireable<(...args: any[]) => any>;
+        hidden: PropTypes.Requireable<boolean>;
+        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>;
+    };
+    static defaultProps: {
+        fromPlaceholder: null;
+        toPlaceholder: null;
+        timePlaceholder: null;
+        translations: {
+            addFirstDate: string;
+            addSecondDate: string;
+            addTime: string;
+            selectName: string;
+        };
+    };
+    componentDidUpdate(prevProps: DateInputProps): void;
+    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(): JSX.Element;
+}