@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/components/data-list/item.js

@@ -1,214 +1,114 @@
-import React, {PureComponent} from 'react';
+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 const moreLessButtonStates = {
-  UNUSED: 0,
-  MORE: 1,
-  MORE_LOADING: 2,
-  LESS: 3
-};
-
+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))}
 
-export default class Item extends PureComponent {
-  static propTypes = {
-    item: PropTypes.object,
+              {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,
-
+    itemFormatter: PropTypes.func.isRequired,
     collapsible: PropTypes.bool,
     collapsed: PropTypes.bool,
     onCollapse: PropTypes.func,
     onExpand: PropTypes.func,
-
     showFocus: PropTypes.bool,
-    onFocus: PropTypes.func,
-
-    selection: PropTypes.object,
+    onFocus: PropTypes.func.isRequired,
+    selection: PropTypes.instanceOf(Selection).isRequired,
     selectable: PropTypes.bool,
     selected: PropTypes.bool,
-    onSelect: PropTypes.func,
-
+    onSelect: PropTypes.func.isRequired,
     showMoreLessButton: PropTypes.number,
     onItemMoreLess: PropTypes.func
-  };
-
-  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}
-
-        focused={selection.isFocused(model)}
-        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>
-    );
-  }
-}
+};

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.js

@@ -1,96 +1,65 @@
-import React, {PureComponent} from 'react';
+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 propTypes = {
-    className: PropTypes.string,
-    title: PropTypes.node,
-    offset: PropTypes.number,
-    selectable: PropTypes.bool,
-    selected: PropTypes.bool,
-    onSelect: PropTypes.func,
-    showFocus: PropTypes.bool,
-    collapserExpander: PropTypes.node,
-    innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
-
-    // focusSensorHOC
-    onFocusRestore: PropTypes.func
-  };
-
-  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);
+    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}
-      >
+    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>
-            )
-          }
+                (<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>
-    );
-  }
+      </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',