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

package/components/table/table.jsx

@@ -0,0 +1,229 @@
+/**
+ * @name Table
+ */
+import React, { Component, 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 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: () => false,
+        getCheckboxTooltip: () => undefined
+    };
+    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.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 = {
+            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 = 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 }) => {
+            if (value == null) {
+                return null;
+            }
+            const { ref, ...restProps } = props;
+            const row = (<Row 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} 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.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 = () => disableHoverHOC(selectionShortcutsHOC(focusSensorHOC(Table)));
+// eslint-disable-next-line react/no-multi-comp
+export default class TableContainer extends Component {
+    // https://stackoverflow.com/a/53882322/6304152
+    static propTypes = getContainer().propTypes;
+    Table = getContainer();
+    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.d.ts

@@ -0,0 +1,29 @@
+import React, { ReactElement, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { LinkProps } from '../link/link';
+import { TabProps } from './tab';
+export interface FakeMoreButtonProps {
+    hasActiveChildren: boolean;
+    moreClassName?: string | null | undefined;
+    moreActiveClassName?: string | null | undefined;
+}
+export declare const AnchorLink: {
+    ({ hasActiveChildren, moreClassName, moreActiveClassName, ...restProps }: Omit<LinkProps, 'children'> & FakeMoreButtonProps): JSX.Element;
+    propTypes: {
+        hasActiveChildren: PropTypes.Requireable<boolean>;
+        moreClassName: PropTypes.Requireable<string>;
+        moreActiveClassName: PropTypes.Requireable<string>;
+    };
+};
+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 declare const MoreButton: React.MemoExoticComponent<({ items, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupItemClassName, morePopupBeforeEnd }: MoreButtonProps) => JSX.Element | null>;
+export declare const FakeMoreButton: React.MemoExoticComponent<({ moreClassName, moreActiveClassName, hasActiveChildren }: FakeMoreButtonProps) => JSX.Element>;

package/components/tabs/collapsible-more.jsx

@@ -0,0 +1,97 @@
+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.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactElement } from 'react';
+import { TabProps } from './tab';
+export interface TabTitleProps {
+    selected: boolean;
+    child: ReactElement<TabProps> | null;
+    handleSelect?: ((e: React.MouseEvent<HTMLAnchorElement>) => void) | undefined;
+    collapsed?: boolean | undefined;
+    tabIndex?: number | undefined;
+}
+export interface TabTitlesParams extends Omit<Partial<TabTitleProps>, 'selected'> {
+    items: ReactElement<TabProps>[];
+    selected?: string | undefined;
+    onSelect?: ((key: string) => ((e: React.MouseEvent<HTMLAnchorElement>) => void) | undefined) | undefined;
+}
+declare const getTabTitles: ({ items, selected, collapsed, onSelect, ...props }: TabTitlesParams) => JSX.Element[];
+export default getTabTitles;

package/components/tabs/collapsible-tab.jsx

@@ -0,0 +1,34 @@
+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 = () => undefined, ...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} collapsed={collapsed} {...props}/>);
+});
+export default getTabTitles;

package/components/tabs/collapsible-tabs.d.ts

@@ -0,0 +1,43 @@
+import React, { ReactElement, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { TabProps } from './tab';
+export interface CollapsibleTabsProps {
+    children: ReactElement<TabProps>[];
+    selected?: string | undefined;
+    onSelect: (key: string) => () => void;
+    moreClassName?: string | null | undefined;
+    moreActiveClassName?: string | null | undefined;
+    morePopupClassName?: string | null | undefined;
+    morePopupItemClassName?: string | undefined;
+    initialVisibleItems?: number | null | undefined;
+    morePopupBeforeEnd?: ReactNode;
+}
+export declare const CollapsibleTabs: {
+    ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }: CollapsibleTabsProps): JSX.Element;
+    propTypes: {
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        selected: PropTypes.Requireable<string>;
+        onSelect: PropTypes.Validator<(...args: any[]) => any>;
+        moreClassName: PropTypes.Requireable<string>;
+        moreActiveClassName: PropTypes.Requireable<string>;
+        morePopupClassName: PropTypes.Requireable<string>;
+        morePopupItemClassName: PropTypes.Requireable<string>;
+        initialVisibleItems: PropTypes.Requireable<number>;
+        morePopupBeforeEnd: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    };
+};
+declare const _default: React.MemoExoticComponent<{
+    ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }: CollapsibleTabsProps): JSX.Element;
+    propTypes: {
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        selected: PropTypes.Requireable<string>;
+        onSelect: PropTypes.Validator<(...args: any[]) => any>;
+        moreClassName: PropTypes.Requireable<string>;
+        moreActiveClassName: PropTypes.Requireable<string>;
+        morePopupClassName: PropTypes.Requireable<string>;
+        morePopupItemClassName: PropTypes.Requireable<string>;
+        initialVisibleItems: PropTypes.Requireable<number>;
+        morePopupBeforeEnd: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    };
+}>;
+export default _default;