@jetbrains/ring-ui 4.1.5 → 5.0.0-beta.2

package/components/table/table.js

@@ -1,315 +0,0 @@
-/**
- * @name Table
- */
-
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {arrayMove, List} from 'react-movable';
-
-import focusSensorHOC from '../global/focus-sensor-hoc';
-import getUID from '../global/get-uid';
-import Shortcuts from '../shortcuts/shortcuts';
-import Loader from '../loader/loader';
-
-import Selection from './selection';
-import Header from './header';
-import style from './table.css';
-import selectionShortcutsHOC from './selection-shortcuts-hoc';
-import disableHoverHOC from './disable-hover-hoc';
-import Row from './row-with-focus-sensor';
-
-/**
- * Interactive table with selection and keyboard navigation support.
- */
-export class Table extends PureComponent {
-  static 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,
-    innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
-
-    // focusSensorHOC
-    focused: PropTypes.bool,
-    onFocusRestore: PropTypes.func,
-
-    // selectionShortcutsHOC
-    selection: PropTypes.instanceOf(Selection).isRequired,
-    selectable: PropTypes.bool,
-    onSelect: PropTypes.func,
-    onItemDoubleClick: PropTypes.func,
-    onItemClick: PropTypes.func,
-    shortcutsMap: PropTypes.object,
-
-    // disableHoverHOC
-    disabledHover: PropTypes.bool,
-
-    remoteSelection: PropTypes.bool,
-
-    renderEmpty: PropTypes.func
-  };
-
-  static defaultProps = {
-    isItemSelectable: () => true,
-    loading: false,
-    onSort: () => {},
-    onReorder: () => {},
-    getItemKey: item => 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: () => {},
-    getCheckboxTooltip: () => {}
-  };
-
-  state = {
-    shortcutsScope: getUID('ring-table-'),
-    userSelectNone: false
-  };
-
-  componentDidMount() {
-    document.addEventListener('mouseup', this.onMouseUp);
-  }
-
-  componentDidUpdate({data, selection, onSelect, selectable, remoteSelection}) {
-    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 => {
-    if (e.shiftKey) {
-      this.setState({userSelectNone: true});
-    }
-  };
-
-  onMouseUp = () => {
-    if (this.state.userSelectNone) {
-      this.setState({userSelectNone: false});
-    }
-  };
-
-  onRowFocus = row => {
-    const {selection, onSelect} = this.props;
-    onSelect(selection.focus(row));
-  };
-
-  onRowSelect = (row, selected) => {
-    const {selection, onSelect} = this.props;
-    if (selected) {
-      onSelect(selection.select(row));
-    } else {
-      onSelect(selection.deselect(row));
-    }
-  };
-
-  onSortEnd = ({oldIndex, newIndex}) => {
-    const data = arrayMove(this.props.data, oldIndex, newIndex);
-    this.props.onReorder({data, oldIndex, newIndex});
-  };
-
-  onCheckboxChange = e => {
-    const {checked} = e.target;
-    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 = {
-      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}) => {
-      const empty = (
-        <tr>
-          <td
-            colSpan={this.props.columns.length || '1'}
-            className={style.tableMessage}
-          >
-            {renderEmpty ? renderEmpty() : null}
-          </td>
-        </tr>
-      );
-      const tbody = (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, index, props = {}, isDragged}) => {
-      const {ref, ...restProps} = props;
-      const row = (
-        <Row
-          innerRef={ref}
-          key={getItemKey(value)}
-          level={getItemLevel(value)}
-          index={index}
-          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}
-                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>
-    );
-  }
-}
-
-export default disableHoverHOC(selectionShortcutsHOC(focusSensorHOC(Table)));

package/components/tabs/collapsible-more.js

@@ -1,183 +0,0 @@
-import React 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 from '../link/link';
-import Icon from '../icon/icon';
-
-import styles from './tabs.css';
-import getTabTitles from './collapsible-tab';
-import {CustomItem} from './custom-item';
-
-
-export const AnchorLink = ({
-  hasActiveChildren,
-  moreClassName,
-  moreActiveClassName,
-  ...restProps
-}) => {
-  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 const MoreButton = React.memo(({
-  items,
-  selected,
-  onSelect,
-  moreClassName,
-  moreActiveClassName,
-  morePopupClassName,
-  morePopupItemClassName,
-  morePopupBeforeEnd
-}) => {
-  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 = 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.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
-}) => (
-  <div className={classNames(styles.moreButton, styles.title)}>
-    <AnchorLink
-      moreClassName={moreClassName}
-      moreActiveClassName={moreActiveClassName}
-      hasActiveChildren={hasActiveChildren}
-      tabIndex={-1}
-      disabled
-    />
-  </div>
-));
-FakeMoreButton.propTypes = {
-  moreClassName: PropTypes.string,
-  moreActiveClassName: PropTypes.string,
-  hasActiveChildren: PropTypes.bool
-};
-FakeMoreButton.displayName = 'FakeMoreButton';

package/components/tabs/collapsible-tab.js

@@ -1,90 +0,0 @@
-import React 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';
-
-function noop() {}
-
-const TabTitle = React.memo(function TabTitle({
-  selected,
-  child,
-  handleSelect = noop,
-  collapsed = false,
-  tabIndex
-}) {
-  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.propTypes = {
-  child: PropTypes.element,
-  handleSelect: PropTypes.func,
-  selected: PropTypes.bool,
-  collapsed: PropTypes.bool,
-  tabIndex: PropTypes.number
-};
-
-const getTabTitles = ({
-  items,
-  selected = 0,
-  collapsed,
-  onSelect = noop,
-  ...props
-}) => 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}
-      index={index}
-      collapsed={collapsed}
-      disabled={tab.props.disabled}
-      {...props}
-    />
-  );
-});
-
-export default getTabTitles;