@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

package/components/data-list/data-list.mock.tsx

@@ -0,0 +1,257 @@
+/* eslint-disable react/jsx-no-literals */
+import React, {ReactNode} from 'react';
+
+import Link from '../link/link';
+import Badge from '../badge/badge';
+import {SelectionItem} from '../table/selection';
+
+export interface Item extends SelectionItem {
+  title: ReactNode
+  collapsible?: boolean,
+  selectable?: boolean,
+  items?: Item[]
+}
+
+const items: Item[] = [
+  {
+    id: 1,
+    title: <span><strong>Assigner</strong> in 60 projects</span>,
+    collapsible: true,
+    selectable: true,
+    items: [
+      {
+        id: 11,
+        title: '6 projects: as a member of jetbrains-team',
+        collapsible: true,
+        selectable: true,
+        items: [
+          {
+            id: 111,
+            selectable: true,
+            title: <Link href="#">TeamCity</Link>
+          },
+
+          {
+            id: 112,
+            selectable: true,
+            title: <Link href="#">YouTrack</Link>
+          },
+
+          {
+            id: 113,
+            selectable: true,
+            title: <Link href="#">Sandbox</Link>
+          },
+
+          {
+            id: 114,
+            selectable: true,
+            title: <Link href="#">Exception Analyzer</Link>
+          },
+
+          {
+            id: 115,
+            selectable: true,
+            title: <Link href="#">MPS</Link>
+          }
+        ]
+      }
+    ]
+  },
+
+  {
+    id: 2,
+    title: <span><strong>Code Reviewer</strong> in 5 projects</span>,
+    selectable: true,
+    collapsible: true,
+    items: [
+      {
+        id: 21,
+        selectable: true,
+        title: (
+          <span>
+            <Link href="#">JetProfile</Link>
+            <span> </span>
+            <Badge gray>duplicate</Badge>
+          </span>
+        )
+      },
+
+      {
+        id: 22,
+        title: '6 projects: as a member of jetbrains-team',
+        collapsible: true,
+        items: [
+          {
+            id: 221,
+            collapsible: true,
+            title: <Link href="#">TeamCity</Link>
+          },
+
+          {
+            id: 222,
+            collapsible: true,
+            title: <Link href="#">YouTrack</Link>
+          },
+
+          {
+            id: 223,
+            collapsible: true,
+            title: <Link href="#">Sandbox</Link>
+          },
+
+          {
+            id: 224,
+            collapsible: true,
+            title: <Link href="#">Exception Analyzer</Link>
+          },
+
+          {
+            id: 225,
+            collapsible: true,
+            title: <Link href="#">MPS</Link>
+          }
+        ]
+      },
+
+      {
+        id: 23,
+        collapsible: true,
+        title: (
+          <span>
+            <Link href="#">CustomJDK</Link>
+            <span>: as a member of ide-developers</span>
+          </span>
+        )
+      }
+    ]
+  },
+
+  {
+    id: 3,
+    title: <span><strong>Code Viewer</strong> in 5 projects</span>,
+    selectable: true,
+    collapsible: true,
+    items: [
+      {
+        id: 31,
+        collapsible: true,
+        title: (
+          <span>
+            <Link href="#">ide-frontend</Link>
+            <span>: as a member of ide-developers</span>
+          </span>
+        )
+      },
+
+      {
+        id: 32,
+        collapsible: true,
+        title: (
+          <span>
+            <Link href="#">ide-frontend</Link>
+            <span>: as a member of ide-frontend Code Viewers</span>
+          </span>
+        )
+      }
+    ]
+  },
+
+  {
+    id: 4,
+    title: <span><strong>Commenter</strong> in 12 projects</span>,
+    collapsible: true,
+    items: [
+      {
+        id: 41,
+        collapsible: true,
+        title: (
+          <span>
+            <Link href="#">Intellij IDEA</Link>
+            <span>: as a member of Registered Users</span>
+          </span>
+        )
+      },
+
+      {
+        id: 42,
+        collapsible: true,
+        title: (
+          <span>
+            <Link href="#">YouTrack Backlog</Link>
+            <span>: as a member of jetbrains-team</span>
+          </span>
+        )
+      }
+    ]
+  },
+
+  {
+    id: 5,
+    collapsible: true,
+    title: (
+      <span>
+        <strong>Developer</strong>
+        <span> in 57 projects </span>
+        <Badge>team role</Badge>
+      </span>
+    ),
+    items: [
+      {
+        id: 51,
+        selectable: true,
+        collapsible: true,
+        title: <Link href="#">Wasabi</Link>
+      }
+    ]
+  },
+
+  {
+    id: 6,
+    collapsible: true,
+    title: (
+      <span>
+        <strong>Git Hosting Admin</strong>
+        <span> in project </span>
+        <Link href="#">Hackathon 2016</Link>
+        <span>: as a member of jetbrains-team</span>
+      </span>
+    )
+  },
+
+  {
+    id: 7,
+    title: <span><strong>Git Hosting Checkout</strong> in 7 projects</span>,
+    selectable: true,
+    collapsible: true
+  }
+];
+
+export const moreItems = [
+  {
+    id: 91,
+    selectable: true,
+    collapsible: true,
+    title: (
+      <span>
+        <Link href="#">More item 1</Link>
+        <span> </span>
+        <Badge gray>duplicate</Badge>
+      </span>
+    )
+  },
+
+  {
+    id: 92,
+    selectable: true,
+    collapsible: true,
+    title: (
+      <span>
+        <Link href="#">More item 2</Link>
+        <span> </span>
+        <Badge gray>duplicate</Badge>
+      </span>
+    )
+  }
+];
+export default items;

package/components/data-list/data-list.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {shallow, mount, render} from 'enzyme';
+
+import DataList, {DataListContainerProps} from './data-list';
+import Selection from './selection';
+import {Item} from './data-list.mock';
+
+describe('Data List', () => {
+  const shallowDataList = (props: Partial<DataListContainerProps<Item>> = {}) => {
+    const data = props.data || [];
+    const selection = new Selection({data, isItemSelectable: item => item.selectable});
+    const itemFormatter = () => ({});
+    return shallow(<DataList {...{...{data, selection, itemFormatter}, ...props}}/>);
+  };
+
+  const mountDataList = (props: Partial<DataListContainerProps<Item>> = {}) => {
+    const data = props.data || [];
+    const selection = new Selection({data, isItemSelectable: item => item.selectable});
+    const itemFormatter = () => ({});
+    return mount(<DataList {...{...{data, selection, itemFormatter}, ...props}}/>);
+  };
+
+  const renderDataList = (props: Partial<DataListContainerProps<Item>> = {}) => {
+    const data = props.data || [];
+    const selection = new Selection({data, isItemSelectable: item => item.selectable});
+    const itemFormatter = () => ({});
+    return render(<DataList {...{...{data, selection, itemFormatter}, ...props}}/>);
+  };
+
+  it('should create component', () => {
+    mountDataList().should.have.type(DataList);
+  });
+
+  it('should wrap children with div', () => {
+    shallowDataList().should.have.tagName('div');
+  });
+
+  it('should use passed className', () => {
+    renderDataList({className: 'test-class'}).find('ul').should.have.className('test-class');
+  });
+});

package/components/data-list/data-list.tsx

@@ -0,0 +1,224 @@
+/**
+  * @name Data List
+  */
+
+import React, {PureComponent, Component, ComponentType} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import focusSensorHOC, {
+  FocusSensorAddProps,
+  FocusSensorOuterProps
+} from '../global/focus-sensor-hoc';
+import selectionShortcutsHOC, {
+  SelectionShortcutsAddProps,
+  SelectionShortcutsOuterProps
+} from '../table/selection-shortcuts-hoc';
+import disableHoverHOC, {DisableHoverAddProps} from '../table/disable-hover-hoc';
+import getUID from '../global/get-uid';
+import Shortcuts from '../shortcuts/shortcuts';
+import Loader from '../loader/loader';
+
+import {SelectionItem} from '../table/selection';
+
+import {refObject} from '../global/prop-types';
+
+import Item, {FormattedItem, moreLessButtonStates} from './item';
+
+import styles from './data-list.css';
+import Selection from './selection';
+
+
+export interface DataListBaseProps<
+  T extends SelectionItem
+> {
+  data: readonly T[]
+  itemFormatter: (item: T) => FormattedItem<T>
+  loading?: boolean | undefined
+  onItemMoreLess?: ((item: T, more: boolean) => void) | undefined
+  itemMoreLessState?: ((item: FormattedItem<T>) => moreLessButtonStates) | undefined
+  remoteSelection?: boolean | undefined
+  className?: string | null | undefined
+  disabledHover?: boolean | null | undefined
+}
+
+type DataListProps<T extends SelectionItem> = DataListBaseProps<T> &
+  DisableHoverAddProps & FocusSensorAddProps<HTMLDivElement> & SelectionShortcutsAddProps<T>
+
+class DataList<T extends SelectionItem> extends PureComponent<DataListProps<T>> {
+  static defaultProps = {
+    loading: false,
+
+    onItemMoreLess: () => {},
+    itemMoreLessState: () => moreLessButtonStates.UNUSED,
+
+    remoteSelection: false
+  };
+
+  componentDidUpdate(prevProps: DataListProps<T>) {
+    const {data, selection, onSelect, selectable} = this.props;
+
+    if (data !== prevProps.data && !prevProps.remoteSelection) {
+      onSelect(selection.cloneWith({data}));
+    }
+
+    if (!selectable && prevProps.selectable) {
+      onSelect(selection.resetSelection());
+    }
+  }
+
+  shortcutsScope = getUID('ring-data-list-');
+
+  onItemFocus = (item: T) => {
+    const {selection, onSelect} = this.props;
+    onSelect(selection.focus(item));
+  };
+
+  onItemSelect = (item: T, selected: boolean) => {
+    const {selection, onSelect} = this.props;
+    if (selected) {
+      onSelect(selection.select(item));
+    } else {
+      onSelect(selection.deselect(item));
+    }
+  };
+
+  onEqualPress = () => {
+    const {
+      selection, itemFormatter
+    } = this.props;
+
+    const focused = selection.getFocused();
+    if (focused == null) {
+      throw new Error('No focused item');
+    }
+    const item = itemFormatter(focused);
+
+    if (item.collapsed) {
+      item.onExpand?.();
+    } else {
+      item.onCollapse?.();
+    }
+  };
+
+  shortcutsMap = {
+    '=': this.onEqualPress
+  };
+
+  render() {
+    const {
+      data, className, loading,
+      selection, disabledHover,
+      itemFormatter, focused, innerRef
+    } = this.props;
+
+    const shortcutsMap = {...this.shortcutsMap, ...this.props.shortcutsMap};
+
+    const classes = classNames(className, {
+      [styles.dataList]: true,
+      [styles.disabledHover]: disabledHover,
+      [styles.multiSelection]: selection.getSelected().size > 0
+    });
+
+    return (
+      <div className={styles.dataListWrapper} data-test="ring-data-list" ref={innerRef}>
+        {focused &&
+          (
+            <Shortcuts
+              map={shortcutsMap}
+              scope={this.shortcutsScope}
+            />
+          )
+        }
+
+        <ul className={classes}>
+          {data.map(model => {
+            const item = itemFormatter(model);
+            const {id, key, title, items} = item;
+
+            const showMoreLessButton = this.props.itemMoreLessState?.(item);
+
+            return (
+              <Item
+                key={key || id}
+                item={model}
+                title={title}
+                items={items}
+
+                itemFormatter={itemFormatter}
+
+                collapsible={item.collapsible}
+                collapsed={item.collapsed}
+                onCollapse={item.onCollapse}
+                onExpand={item.onExpand}
+
+                showFocus={selection.isFocused(model)}
+                onFocus={this.onItemFocus}
+
+                selection={selection}
+                selectable={item.selectable}
+                selected={selection.isSelected(model)}
+                onSelect={this.onItemSelect}
+
+                showMoreLessButton={showMoreLessButton}
+                onItemMoreLess={this.props.onItemMoreLess}
+              />
+            );
+          })}
+        </ul>
+
+        {loading && (
+          <div className={data.length > 0 ? styles.loadingOverlay : undefined}>
+            <Loader/>
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+(DataList as ComponentType<unknown>).propTypes = {
+  className: PropTypes.string,
+  data: PropTypes.array.isRequired,
+  loading: PropTypes.bool,
+  focused: PropTypes.bool.isRequired,
+  disabledHover: PropTypes.bool,
+  selection: PropTypes.instanceOf(Selection).isRequired,
+  selectable: PropTypes.bool.isRequired,
+  shortcutsMap: PropTypes.shape({}).isRequired,
+  innerRef: PropTypes.oneOfType([
+    refObject(PropTypes.instanceOf(HTMLDivElement)),
+    PropTypes.func
+  ]),
+
+  itemFormatter: PropTypes.func.isRequired,
+
+  onItemMoreLess: PropTypes.func,
+  itemMoreLessState: PropTypes.func,
+  onSelect: PropTypes.func.isRequired,
+
+  remoteSelection: PropTypes.bool
+};
+
+type FocusableProps<T extends SelectionItem> = DataListBaseProps<T> &
+  DisableHoverAddProps & FocusSensorOuterProps<HTMLDivElement> & SelectionShortcutsAddProps<T>
+export type DataListContainerProps<T extends SelectionItem> = DataListBaseProps<T> &
+  FocusSensorOuterProps<HTMLDivElement> & SelectionShortcutsOuterProps<T>
+const getContainer = <T extends SelectionItem>() => disableHoverHOC(
+  selectionShortcutsHOC<T, FocusableProps<T>>(
+    focusSensorHOC<HTMLDivElement, DataListProps<T>, typeof DataList>(DataList)
+  )
+);
+
+// eslint-disable-next-line react/no-multi-comp
+export default class DataListContainer<
+  T extends SelectionItem
+> extends Component<DataListContainerProps<T>> {
+  static propTypes = getContainer().propTypes;
+  // https://stackoverflow.com/a/53882322/6304152
+  DataList = getContainer<T>();
+
+  render() {
+    return <this.DataList {...this.props}/>;
+  }
+}