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

package/components/table/table.tsx

@@ -0,0 +1,379 @@
+/**
+ * @name Table
+ */
+
+import React, {Component, ComponentType, PureComponent, ReactNode, SyntheticEvent} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {arrayMove, List} from 'react-movable';
+
+import {OnChangeMeta, RenderItemParams, RenderListParams} from 'react-movable/lib/types';
+
+import focusSensorHOC, {FocusSensorAddProps, FocusSensorProps} from '../global/focus-sensor-hoc';
+import getUID from '../global/get-uid';
+import Shortcuts from '../shortcuts/shortcuts';
+import Loader from '../loader/loader';
+
+import Selection, {SelectionItem} from './selection';
+import Header, {HeaderAttrs} from './header';
+import style from './table.css';
+import selectionShortcutsHOC, {
+  SelectionShortcutsAddProps,
+  SelectionShortcutsProps
+} from './selection-shortcuts-hoc';
+import disableHoverHOC, {DisableHoverAddProps, DisableHoverProps} from './disable-hover-hoc';
+import Row from './row-with-focus-sensor';
+import {Column, SortParams} from './header-cell';
+
+export interface ReorderParams<T> {
+  data: T[]
+  oldIndex: number
+  newIndex: number
+}
+
+export interface TableProps<T extends SelectionItem> extends
+  FocusSensorAddProps<HTMLTableRowElement>, SelectionShortcutsAddProps<T>, DisableHoverAddProps {
+  data: readonly T[]
+  columns: readonly Column<T>[]
+  isItemSelectable: (item: T) => boolean
+  loading: boolean
+  onSort: (params: SortParams) => void
+  onReorder: (params: ReorderParams<T>) => void
+  getItemKey: (item: T) => string | number
+  sortKey: string
+  sortOrder: boolean
+  draggable: boolean
+  alwaysShowDragHandle: boolean
+  stickyHeader: boolean
+  getItemLevel: (item: T) => number
+  getItemClassName: (item: T) => string | null | undefined
+  getItemDataTest: (item: T) => string | null | undefined
+  isItemCollapsible: (item: T) => boolean
+  isParentCollapsible: (item: T) => boolean
+  isItemCollapsed: (item: T) => boolean
+  onItemCollapse: (item: T) => void
+  onItemExpand: (item: T) => void
+  onItemDoubleClick: (item: T) => void
+  onItemClick: (item: T, e: React.MouseEvent<HTMLTableRowElement>) => void
+  remoteSelection: boolean
+  isDisabledSelectionVisible: (item: T) => boolean
+  getCheckboxTooltip: (item: T) => string | undefined
+  className?: string | null | undefined
+  loaderClassName?: string | undefined
+  caption?: string | null | undefined
+  stickyHeaderOffset?: string | undefined
+  renderEmpty?: (() => ReactNode) | null | undefined
+}
+/**
+ * Interactive table with selection and keyboard navigation support.
+ */
+export class Table<T extends SelectionItem> extends PureComponent<TableProps<T>> {
+  static defaultProps = {
+    isItemSelectable: () => true,
+    loading: false,
+    onSort: () => {},
+    onReorder: () => {},
+    getItemKey: (item: SelectionItem) => item.id,
+    sortKey: 'id',
+    sortOrder: true,
+    draggable: false,
+    alwaysShowDragHandle: false,
+    stickyHeader: true,
+    getItemLevel: () => 0,
+    getItemClassName: () => null,
+    getItemDataTest: () => null,
+    isItemCollapsible: () => false,
+    isParentCollapsible: () => false,
+    isItemCollapsed: () => false,
+    onItemCollapse: () => {},
+    onItemExpand: () => {},
+    onItemDoubleClick: () => {},
+    onItemClick: () => {},
+    remoteSelection: false,
+    isDisabledSelectionVisible: () => false,
+    getCheckboxTooltip: () => undefined
+  };
+
+  state = {
+    shortcutsScope: getUID('ring-table-'),
+    userSelectNone: false
+  };
+
+  componentDidMount() {
+    document.addEventListener('mouseup', this.onMouseUp);
+  }
+
+  componentDidUpdate({data, selection, onSelect, selectable, remoteSelection}: TableProps<T>) {
+    if (data !== this.props.data && remoteSelection) {
+      onSelect(selection.cloneWith({data: this.props.data}));
+    }
+
+    if (!this.props.selectable && this.props.selectable !== selectable) {
+      onSelect(selection.resetSelection());
+    }
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mouseup', this.onMouseUp);
+  }
+
+  onMouseDown = (e: React.MouseEvent) => {
+    if (e.shiftKey) {
+      this.setState({userSelectNone: true});
+    }
+  };
+
+  onMouseUp = () => {
+    if (this.state.userSelectNone) {
+      this.setState({userSelectNone: false});
+    }
+  };
+
+  onRowFocus = (row: T) => {
+    const {selection, onSelect} = this.props;
+    onSelect(selection.focus(row));
+  };
+
+  onRowSelect = (row: T, selected: boolean) => {
+    const {selection, onSelect} = this.props;
+    if (selected) {
+      onSelect(selection.select(row));
+    } else {
+      onSelect(selection.deselect(row));
+    }
+  };
+
+  onSortEnd = ({oldIndex, newIndex}: OnChangeMeta) => {
+    const data = arrayMove(this.props.data as T[], oldIndex, newIndex);
+    this.props.onReorder({data, oldIndex, newIndex});
+  };
+
+  onCheckboxChange = (e: SyntheticEvent<HTMLInputElement>) => {
+    const {checked} = e.currentTarget;
+    const {selection, onSelect} = this.props;
+
+    if (checked) {
+      onSelect(selection.selectAll());
+    } else {
+      onSelect(selection.reset());
+    }
+
+    this.restoreFocusWithoutScroll();
+  };
+
+  restoreFocusWithoutScroll = () => {
+    const {scrollX, scrollY} = window;
+    this.props.onFocusRestore();
+    window.scrollTo(scrollX, scrollY);
+  };
+
+  render() {
+    const {
+      data, selection, columns, caption, getItemKey, selectable, focused,
+      isItemSelectable, getItemLevel, getItemClassName, getItemDataTest,
+      draggable, alwaysShowDragHandle,
+      loading, onSort, sortKey, sortOrder, loaderClassName, stickyHeader,
+      stickyHeaderOffset, isItemCollapsible, isParentCollapsible, isItemCollapsed,
+      onItemCollapse, onItemExpand, isDisabledSelectionVisible, getCheckboxTooltip,
+      onItemDoubleClick, onItemClick, renderEmpty
+    } = this.props;
+
+
+    // NOTE: Do not construct new object per render because it causes all rows rerendering
+
+    const headerProps: HeaderAttrs = {
+      caption, selectable, draggable,
+      columns, onSort, sortKey, sortOrder,
+      sticky: stickyHeader,
+      topStickOffset: stickyHeaderOffset
+    };
+
+    const selectedSize = selection.getSelected().size;
+    const allSelectedSize = selection.selectAll().getSelected().size;
+    headerProps.checked = selectedSize > 0 && selectedSize === allSelectedSize;
+    headerProps.onCheckboxChange = this.onCheckboxChange;
+    headerProps.checkboxDisabled = this.props.data.length === 0;
+
+    const wrapperClasses = classNames({
+      [style.tableWrapper]: true,
+      [style.loading]: loading
+    });
+
+    const classes = classNames(this.props.className, {
+      [style.table]: true,
+      [style.multiSelection]: selection.getSelected().size > 0,
+      [style.userSelectNone]: this.state.userSelectNone,
+      [style.disabledHover]: this.props.disabledHover
+    });
+
+    const renderList = ({children, props}: Partial<RenderListParams>) => {
+      const empty = (
+        <tr>
+          <td
+            colSpan={this.props.columns.length || 1}
+            className={style.tableMessage}
+          >
+            {renderEmpty ? renderEmpty() : null}
+          </td>
+        </tr>
+      );
+      const tbody = Array.isArray(children) && children.length > 0
+        ? children
+        : empty;
+      return (
+        <table className={classes} data-test="ring-table">
+          <Header {...headerProps}/>
+          <tbody {...props} data-test="ring-table-body">
+            {tbody}
+          </tbody>
+        </table>
+      );
+    };
+
+    const renderItem = ({value, props = {}, isDragged}: Partial<RenderItemParams<T>>) => {
+      if (value == null) {
+        return null;
+      }
+      const {ref, ...restProps} = props;
+      const row = (
+        <Row<T>
+          innerRef={ref}
+          key={getItemKey(value)}
+          level={getItemLevel(value)}
+          item={value}
+          showFocus={selection.isFocused(value)}
+          autofocus={selection.isFocused(value)}
+          focused={selection.isFocused(value)}
+          selectable={selectable && isItemSelectable(value)}
+          selected={selectable && selection.isSelected(value)}
+          onFocus={this.onRowFocus}
+          onSelect={this.onRowSelect}
+          onDoubleClick={onItemDoubleClick}
+          onClick={onItemClick}
+          collapsible={isItemCollapsible(value)}
+          parentCollapsible={isParentCollapsible(value)}
+          collapsed={isItemCollapsed(value)}
+          onCollapse={onItemCollapse}
+          onExpand={onItemExpand}
+          showDisabledSelection={isDisabledSelectionVisible(value)}
+          checkboxTooltip={getCheckboxTooltip(value)}
+          className={classNames(getItemClassName(value), {[style.draggingRow]: isDragged})}
+          draggable={draggable}
+          alwaysShowDragHandle={alwaysShowDragHandle}
+          columns={columns}
+          data-test={getItemDataTest(value)}
+          {...restProps}
+        />
+      );
+
+      return isDragged
+        ? (
+          <table style={{...props.style, borderSpacing: 0}}>
+            <tbody>{row}</tbody>
+          </table>
+        )
+        : row;
+    };
+
+    return (
+      <div className={wrapperClasses} data-test="ring-table-wrapper" ref={this.props.innerRef}>
+        {focused &&
+          (
+            <Shortcuts
+              map={this.props.shortcutsMap}
+              scope={this.state.shortcutsScope}
+            />
+          )
+        }
+
+        {/* Handler detects that user holds Shift key */}
+        <div role="presentation" onMouseDown={this.onMouseDown}>
+          {draggable
+            ? (
+              <List
+                values={data as T[]}
+                renderList={renderList}
+                renderItem={renderItem}
+                onChange={this.onSortEnd}
+              />
+            )
+            : renderList({children: data.map((value, index) => renderItem({value, index}))})}
+        </div>
+
+        {loading && (
+          <div className={style.loadingOverlay}>
+            <Loader className={loaderClassName}/>
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+(Table as ComponentType<unknown>).propTypes = {
+  className: PropTypes.string,
+  loaderClassName: PropTypes.string,
+  data: PropTypes.array.isRequired,
+  columns: PropTypes.array.isRequired,
+  caption: PropTypes.string,
+  isItemSelectable: PropTypes.func,
+  stickyHeader: PropTypes.bool,
+  stickyHeaderOffset: PropTypes.string,
+  loading: PropTypes.bool,
+  getItemKey: PropTypes.func,
+  getItemClassName: PropTypes.func,
+  getItemDataTest: PropTypes.func,
+  onSort: PropTypes.func,
+  onReorder: PropTypes.func,
+  sortKey: PropTypes.string,
+  sortOrder: PropTypes.bool,
+  draggable: PropTypes.bool,
+  alwaysShowDragHandle: PropTypes.bool,
+  getItemLevel: PropTypes.func,
+  isItemCollapsible: PropTypes.func,
+  isParentCollapsible: PropTypes.func,
+  isItemCollapsed: PropTypes.func,
+  onItemCollapse: PropTypes.func,
+  onItemExpand: PropTypes.func,
+  isDisabledSelectionVisible: PropTypes.func,
+  getCheckboxTooltip: PropTypes.func,
+  onItemDoubleClick: PropTypes.func,
+  onItemClick: PropTypes.func,
+
+  // focusSensorHOC
+  focused: PropTypes.bool,
+  onFocusRestore: PropTypes.func,
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
+
+  // selectionShortcutsHOC
+  selection: PropTypes.instanceOf(Selection).isRequired,
+  selectable: PropTypes.bool,
+  onSelect: PropTypes.func,
+  shortcutsMap: PropTypes.object,
+
+  // disableHoverHOC
+  disabledHover: PropTypes.bool,
+
+  remoteSelection: PropTypes.bool,
+
+  renderEmpty: PropTypes.func
+};
+
+const getContainer = <T extends SelectionItem>() =>
+  disableHoverHOC(
+    selectionShortcutsHOC<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>(
+      focusSensorHOC<HTMLTableRowElement, TableProps<T>, typeof Table>(Table)));
+
+export type TableAttrs<T extends SelectionItem> = DisableHoverProps<SelectionShortcutsProps<T,
+  FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>
+
+// eslint-disable-next-line react/no-multi-comp
+export default class TableContainer<T extends SelectionItem> extends Component<TableAttrs<T>> {
+  // https://stackoverflow.com/a/53882322/6304152
+  static propTypes = getContainer().propTypes;
+  Table = getContainer<T>();
+
+  render() {
+    return <this.Table {...this.props}/>;
+  }
+}

package/components/table-legacy-ng/table-legacy-ng.examples.js

@@ -2,11 +2,11 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';
-import SidebarNG from '@jetbrains/ring-ui/components/sidebar-ng/sidebar-ng';
-import QueryAssistNG from '@jetbrains/ring-ui/components/query-assist-ng/query-assist-ng';
+import SelectNG from '../select-ng/select-ng';
+import SidebarNG from '../sidebar-ng/sidebar-ng';
+import QueryAssistNG from '../query-assist-ng/query-assist-ng';
 
-import TableNG from '@jetbrains/ring-ui/components/table-legacy-ng/table-legacy-ng';
+import TableNG from './table-legacy-ng';
 
 export default {
   title: 'Legacy Angular/TableLegacy Ng',

package/components/table-ng/table-ng.examples.js

@@ -2,11 +2,11 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import TableLegacyToolbar from '@jetbrains/ring-ui/components/table-legacy-ng/table-legacy-ng__toolbar';
-import Selection from '@jetbrains/ring-ui/components/table/selection';
-import data from '@jetbrains/ring-ui/components/table/table.examples.json';
+import TableLegacyToolbar from '../table-legacy-ng/table-legacy-ng__toolbar';
+import Selection from '../table/selection';
+import data from '../table/table.examples.json';
 
-import TableNG from '@jetbrains/ring-ui/components/table-ng/table-ng';
+import TableNG from './table-ng';
 
 export default {
   title: 'Legacy Angular/Table Ng',

package/components/tabs/collapsible-more.tsx

@@ -0,0 +1,199 @@
+import React, {ComponentType, ReactElement, ReactNode} from 'react';
+
+import classNames from 'classnames';
+
+import chevronDownIcon from '@jetbrains/icons/chevron-10px';
+
+import PropTypes from 'prop-types';
+
+import {Directions} from '../popup/popup.consts';
+import PopupMenu, {ListProps} from '../popup-menu/popup-menu';
+
+import Dropdown from '../dropdown/dropdown';
+
+import Link, {LinkProps} from '../link/link';
+import Icon from '../icon/icon';
+import {ListDataItem} from '../list/consts';
+
+import styles from './tabs.css';
+import getTabTitles from './collapsible-tab';
+import {CustomItem} from './custom-item';
+import {TabProps} from './tab';
+
+export interface FakeMoreButtonProps {
+  hasActiveChildren: boolean
+  moreClassName?: string | null | undefined
+  moreActiveClassName?: string | null | undefined
+}
+export const AnchorLink = ({
+  hasActiveChildren,
+  moreClassName,
+  moreActiveClassName,
+  ...restProps
+}: Omit<LinkProps, 'children'> & FakeMoreButtonProps) => {
+  const classnames = classNames(
+    styles.title,
+    hasActiveChildren && styles.selected,
+    hasActiveChildren && moreActiveClassName,
+    moreClassName
+  );
+  return (
+    <Link
+      title={'More'}
+      innerClassName={classnames}
+      className={classnames}
+      {...restProps}
+    >
+      {'More'}
+      <Icon
+        glyph={chevronDownIcon}
+        className={styles.chevron}
+      /></Link>
+  );
+};
+
+AnchorLink.propTypes = {
+  hasActiveChildren: PropTypes.bool,
+  moreClassName: PropTypes.string,
+  moreActiveClassName: PropTypes.string
+};
+
+const morePopupDirections = [
+  Directions.BOTTOM_CENTER,
+  Directions.BOTTOM_LEFT,
+  Directions.BOTTOM_RIGHT
+];
+export interface MoreButtonProps {
+  items: ReactElement<TabProps>[]
+  selected?: string | undefined
+  onSelect: (key: string) => () => void
+  moreClassName?: string | null | undefined
+  moreActiveClassName?: string | null | undefined
+  morePopupClassName?: string | null | undefined
+  morePopupItemClassName?: string | undefined
+  morePopupBeforeEnd: ReactNode
+}
+export const MoreButton = React.memo(({
+  items,
+  selected,
+  onSelect,
+  moreClassName,
+  moreActiveClassName,
+  morePopupClassName,
+  morePopupItemClassName,
+  morePopupBeforeEnd
+}: MoreButtonProps) => {
+  const onSelectHandler = React.useCallback(listItem => {
+    if (listItem.disabled === true || listItem.custom === true) {
+      return;
+    }
+
+    const cb = onSelect(listItem.key);
+    cb();
+  }, [onSelect]);
+
+  const hasActiveChild = React.useMemo(() =>
+    items.some(item => item.props.alwaysHidden && item.props.id === selected),
+  [items, selected]
+  );
+
+  const data = React.useMemo(() => {
+    const popupItems: ListDataItem[] = getTabTitles({
+      items,
+      selected,
+      collapsed: true
+    }).map(tab => {
+      const disabled = tab.props.disabled === true;
+      const custom = tab.props.child.type === CustomItem;
+
+      return ({
+        template: tab,
+        key: tab.key,
+        rgItemType: ListProps.Type.CUSTOM,
+        className: morePopupItemClassName,
+        disabled,
+        custom
+      });
+    });
+
+    if (morePopupBeforeEnd) {
+      popupItems.push({
+        template: morePopupBeforeEnd,
+        key: 'before-end-content',
+        className: styles.morePopupBeforeEnd,
+        rgItemType: ListProps.Type.CUSTOM
+      });
+    }
+
+    return popupItems;
+  }, [items, morePopupBeforeEnd, morePopupItemClassName, selected]);
+
+  const popupAnchor = React.useMemo(() => (
+    <AnchorLink
+      moreClassName={moreClassName}
+      moreActiveClassName={moreActiveClassName}
+      hasActiveChildren={hasActiveChild}
+    />
+  ), [hasActiveChild, moreActiveClassName, moreClassName]);
+
+  const popup = React.useMemo(() => (
+    <PopupMenu
+      directions={morePopupDirections}
+      className={morePopupClassName}
+      onSelect={onSelectHandler}
+      data={data}
+    />
+  ), [data, morePopupClassName, onSelectHandler]);
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={classNames(styles.title, moreClassName, hasActiveChild && moreActiveClassName)}>
+      <Dropdown
+        hoverMode
+        anchor={popupAnchor}
+      >
+        {popup}
+      </Dropdown>
+    </div>
+  );
+});
+
+(MoreButton as unknown as ComponentType<unknown>).propTypes = {
+  children: PropTypes.node,
+  items: PropTypes.array,
+  selected: PropTypes.string,
+  onSelect: PropTypes.func,
+  toMeasure: PropTypes.bool,
+  moreClassName: PropTypes.string,
+  moreActiveClassName: PropTypes.string,
+  morePopupClassName: PropTypes.string,
+  morePopupItemClassName: PropTypes.string,
+  morePopupBeforeEnd: PropTypes.element
+};
+
+MoreButton.displayName = 'MoreButton';
+
+export const FakeMoreButton = React.memo(({
+  moreClassName,
+  moreActiveClassName,
+  hasActiveChildren
+}: FakeMoreButtonProps) => (
+  <div className={classNames(styles.moreButton, styles.title)}>
+    <AnchorLink
+      moreClassName={moreClassName}
+      moreActiveClassName={moreActiveClassName}
+      hasActiveChildren={hasActiveChildren}
+      tabIndex={-1}
+      disabled
+    />
+  </div>
+));
+(FakeMoreButton as unknown as ComponentType<unknown>).propTypes = {
+  moreClassName: PropTypes.string,
+  moreActiveClassName: PropTypes.string,
+  hasActiveChildren: PropTypes.bool
+};
+FakeMoreButton.displayName = 'FakeMoreButton';

package/components/tabs/collapsible-tab.tsx

@@ -0,0 +1,102 @@
+import React, {ComponentType, ReactElement} from 'react';
+
+import classNames from 'classnames';
+
+import PropTypes from 'prop-types';
+
+import styles from './tabs.css';
+import TabLink from './tab-link';
+import {CustomItem} from './custom-item';
+import {TabProps} from './tab';
+
+function noop() {}
+
+export interface TabTitleProps {
+  selected: boolean
+  child: ReactElement<TabProps> | null
+  handleSelect?: ((e: React.MouseEvent<HTMLAnchorElement>) => void) | undefined
+  collapsed?: boolean | undefined
+  tabIndex?: number | undefined
+}
+const TabTitle = React.memo(function TabTitle({
+  selected,
+  child,
+  handleSelect = noop,
+  collapsed = false,
+  tabIndex
+}: TabTitleProps) {
+  if (child == null || typeof child !== 'object' || child.type === CustomItem) {
+    return child;
+  }
+
+  const {
+    title,
+    disabled,
+    href,
+    className,
+    activeClassName,
+    collapsedClassName,
+    collapsedActiveClassName
+  } = child.props;
+
+  const titleClasses = classNames(styles.title, className, {
+    [styles.selected]: selected,
+    [styles.collapsed]: collapsed,
+    [activeClassName ?? '']: selected,
+    [collapsedClassName ?? '']: collapsed,
+    [collapsedActiveClassName ?? '']: collapsed && selected
+  });
+
+  return (
+    <TabLink
+      title={title}
+      isSelected={selected}
+      active
+      href={href}
+      innerClassName={titleClasses}
+      className={titleClasses}
+      disabled={disabled}
+      onPlainLeftClick={handleSelect}
+      tabIndex={tabIndex}
+      collapsed={collapsed}
+    />
+  );
+});
+
+(TabTitle as unknown as ComponentType<unknown>).propTypes = {
+  child: PropTypes.element,
+  handleSelect: PropTypes.func,
+  selected: PropTypes.bool,
+  collapsed: PropTypes.bool,
+  tabIndex: PropTypes.number
+};
+
+export interface TabTitlesParams extends Omit<Partial<TabTitleProps>, 'selected'> {
+  items: ReactElement<TabProps>[]
+  selected?: string | undefined
+  onSelect?: ((key: string) => ((e: React.MouseEvent<HTMLAnchorElement>) => void) | undefined)
+    | undefined
+}
+const getTabTitles = ({
+  items,
+  selected = '0',
+  collapsed,
+  onSelect = () => undefined,
+  ...props
+}: TabTitlesParams) => items.map((tab, index) => {
+  const key = tab.props.id || String(index);
+  const isSelected = selected === key;
+
+  return (
+    <TabTitle
+      key={key}
+      handleSelect={onSelect(key)}
+      selected={isSelected}
+      child={tab}
+      collapsed={collapsed}
+      {...props}
+    />
+  );
+});
+
+export default getTabTitles;