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

package/components/tabs/collapsible-tabs.tsx

@@ -0,0 +1,295 @@
+import React, {ReactElement, ReactNode} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import fastdom from 'fastdom';
+
+import styles from './tabs.css';
+import {FakeMoreButton, MoreButton} from './collapsible-more';
+import getTabTitles from './collapsible-tab';
+
+import {TabProps} from './tab';
+
+const DEFAULT_DEBOUNCE_INTERVAL = 100;
+const MEASURE_TOLERANCE = 0.5;
+
+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
+}
+interface Sizes {
+  tabs: number[]
+  more: number | undefined
+}
+interface PreparedElements {
+  visible: ReactElement<TabProps>[]
+  hidden: ReactElement<TabProps>[]
+  ready?: boolean
+}
+export const CollapsibleTabs = ({
+  children,
+  selected,
+  onSelect,
+  moreClassName,
+  moreActiveClassName,
+  morePopupClassName,
+  morePopupBeforeEnd,
+  morePopupItemClassName,
+  initialVisibleItems
+}: CollapsibleTabsProps) => {
+  const [sizes, setSizes] = React.useState<Sizes>({tabs: [], more: undefined});
+  const [lastVisibleIndex, setLastVisibleIndex] = React.useState<number | null>(null);
+  const elements = {sizes, lastVisibleIndex};
+  const [preparedElements, setPreparedElements] = React.useState<PreparedElements>({
+    visible: [],
+    hidden: []
+  });
+
+  const measureRef = React.useRef<HTMLDivElement>(null);
+
+  const selectedIndex = React.useMemo(() => children.
+    filter(tab => tab.props.alwaysHidden !== true).
+    findIndex(tab => tab.props.id === selected) ?? null, [children, selected]);
+
+  const visibleElements = React.useMemo(() => {
+    let items;
+
+    if (preparedElements.ready) {
+      items = preparedElements.visible;
+    } else {
+      items = initialVisibleItems
+        ? children.filter(item => item.props.alwaysHidden !== true).slice(0, initialVisibleItems)
+        : [];
+    }
+
+    return getTabTitles({
+      items,
+      selected,
+      onSelect
+    });
+  }, [
+    initialVisibleItems,
+    children,
+    preparedElements.ready,
+    preparedElements.visible,
+    onSelect,
+    selected
+  ]);
+
+  const adjustTabs = React.useCallback(entry => {
+    const containerWidth = entry.contentRect.width;
+
+    const {tabs: tabsSizes, more = 0} = elements.sizes;
+
+    let renderMore = children.some(tab => tab.props.alwaysHidden);
+
+    const tabsToRender: number[] = [];
+    let filledWidth = renderMore ? more ?? 0 : 0;
+
+    for (let i = 0; i < tabsSizes.length; i++) {
+      if (filledWidth + tabsSizes[i] < containerWidth + MEASURE_TOLERANCE) {
+        filledWidth += tabsSizes[i];
+        tabsToRender.push(tabsSizes[i]);
+      } else {
+        break;
+      }
+    }
+
+    if (tabsToRender.length < tabsSizes.length && !renderMore) {
+      for (let i = tabsToRender.length - 1; i >= 0; i--) {
+        if (filledWidth + more < containerWidth + MEASURE_TOLERANCE) {
+          filledWidth += more;
+          renderMore = true;
+          break;
+        } else {
+          filledWidth -= tabsToRender[i];
+          tabsToRender.pop();
+        }
+      }
+    }
+
+    if (selectedIndex > tabsToRender.length - 1) {
+      const selectedWidth = tabsSizes[selectedIndex];
+      for (let i = tabsToRender.length - 1; i >= 0; i--) {
+        if (filledWidth + selectedWidth < containerWidth + MEASURE_TOLERANCE) {
+          filledWidth += selectedWidth;
+          break;
+        } else {
+          filledWidth -= tabsToRender[i];
+          tabsToRender.pop();
+        }
+      }
+    }
+
+    if (elements.lastVisibleIndex !== tabsToRender.length - 1) {
+      setLastVisibleIndex(tabsToRender.length - 1);
+    }
+  }, [children, elements.lastVisibleIndex, elements.sizes, selectedIndex]);
+
+  // Prepare list of visible and hidden elements
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      const res = children.reduce((accumulator: PreparedElements, tab) => {
+        if (tab.props.alwaysHidden !== true &&
+          accumulator.visible.length - 1 < (elements.lastVisibleIndex ?? 0)) {
+          accumulator.visible.push(tab);
+        } else {
+          accumulator.hidden.push(tab);
+        }
+
+        return accumulator;
+      }, {visible: [], hidden: [], ready: elements.lastVisibleIndex !== null});
+
+      if (selectedIndex > (elements.lastVisibleIndex ?? 0)) {
+        const selectedItem =
+          children.find(tab => !tab.props.alwaysHidden && tab.props.id === selected);
+        if (selectedItem != null) {
+          res.visible.push(selectedItem);
+        }
+      }
+
+      const allVisibleTheSame = res.visible.length === preparedElements.visible.length &&
+        res.visible.every((item, index) => item === preparedElements.visible[index]);
+      const allHiddenTheSame = res.hidden.length === preparedElements.hidden.length &&
+        res.hidden.every((item, index) => item === preparedElements.hidden[index]);
+
+      if (!allVisibleTheSame || !allHiddenTheSame || preparedElements.ready !== res.ready) {
+        fastdom.mutate(() => setPreparedElements(res));
+      }
+    }, DEFAULT_DEBOUNCE_INTERVAL);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [children, elements.lastVisibleIndex, preparedElements, selected, selectedIndex]);
+
+  // Get list of all possibly visible elements to render in a measure container
+  const childrenToMeasure = React.useMemo(
+    () => {
+      const items = children.filter(tab => tab.props.alwaysHidden !== true);
+      return getTabTitles({items, tabIndex: -1});
+    },
+    [children]
+  );
+
+  // Initial measure for tabs and more button sizes
+  React.useEffect(() => {
+    if (measureRef.current == null) {
+      return undefined;
+    }
+
+    const measureTask = fastdom.measure(() => {
+      const container = measureRef.current;
+      const descendants = [...container?.children ?? []];
+      const moreButton = descendants.pop() as HTMLElement;
+
+      let moreButtonWidth = moreButton.offsetWidth;
+      const {
+        marginLeft: moreButtonMarginLeft,
+        marginRight: moreButtonMarginRight
+      } = getComputedStyle(moreButton);
+      moreButtonWidth += +moreButtonMarginLeft.replace('px', '') + +moreButtonMarginRight.replace('px', '');
+
+      const tabsWidth = descendants.map(node => {
+        const {marginLeft, marginRight} = getComputedStyle(node);
+        const width = node.getBoundingClientRect().width;
+        return width + +marginLeft.replace('px', '') + +marginRight.replace('px', '');
+      });
+
+      const newSummaryWidth = tabsWidth.reduce((acc, curr) => (acc + curr), 0);
+      const oldSummaryWidth = elements.sizes.tabs.reduce((acc, curr) => (acc + curr), 0);
+
+      if (elements.sizes.more !== moreButtonWidth || newSummaryWidth !== oldSummaryWidth) {
+        fastdom.mutate(() =>
+          setSizes({more: moreButtonWidth, tabs: tabsWidth})
+        );
+      }
+    });
+
+    return () => {
+      fastdom.clear(measureTask);
+    };
+  }, [children, elements.sizes.more, elements.sizes.tabs]);
+
+  // Start observers to listen resizing and mutation
+  React.useEffect(() => {
+    if (measureRef.current === null) {
+      return undefined;
+    }
+
+    let measureTask = () => {};
+    const resizeObserver = new ResizeObserver(entries => {
+      entries.forEach(entry => {
+        fastdom.clear(measureTask);
+        measureTask = fastdom.mutate(() => adjustTabs(entry));
+      });
+    });
+
+    resizeObserver.observe(measureRef.current);
+
+    return () => {
+      fastdom.clear(measureTask);
+      resizeObserver.disconnect();
+    };
+  }, [adjustTabs]);
+
+  const isAdjusted = (elements.lastVisibleIndex !== null &&
+    preparedElements.ready === true) || initialVisibleItems;
+
+  const className = classNames(
+    styles.titles,
+    styles.autoCollapse,
+    isAdjusted && styles.adjusted
+  );
+
+  return (
+    <div className={styles.autoCollapseContainer}>
+      <div className={classNames(className, styles.rendered)}>
+        {visibleElements}
+        <MoreButton
+          moreClassName={moreClassName}
+          moreActiveClassName={moreActiveClassName}
+          morePopupClassName={morePopupClassName}
+          morePopupBeforeEnd={morePopupBeforeEnd}
+          morePopupItemClassName={morePopupItemClassName}
+          items={preparedElements.hidden}
+          selected={selected}
+          onSelect={onSelect}
+        />
+      </div>
+      <div ref={measureRef} className={classNames(className, styles.measure)}>
+        {childrenToMeasure}
+        <FakeMoreButton
+          hasActiveChildren={
+            preparedElements.hidden.some(
+              item => item.props.alwaysHidden && item.props.id === selected
+            )
+          }
+          moreClassName={moreClassName}
+          moreActiveClassName={moreActiveClassName}
+        />
+      </div>
+    </div>
+  );
+};
+
+CollapsibleTabs.propTypes = {
+  children: PropTypes.node.isRequired,
+  selected: PropTypes.string,
+  onSelect: PropTypes.func.isRequired,
+  moreClassName: PropTypes.string,
+  moreActiveClassName: PropTypes.string,
+  morePopupClassName: PropTypes.string,
+  morePopupItemClassName: PropTypes.string,
+  initialVisibleItems: PropTypes.number,
+  morePopupBeforeEnd: PropTypes.element
+};
+
+export default React.memo(CollapsibleTabs);

package/components/tabs/custom-item.tsx

@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+import {ReactElement, ReactNode} from 'react';
+
+export interface CustomItemProps {
+  children?: ReactNode
+}
+export const CustomItem = ({children}: CustomItemProps) => children as ReactElement;
+CustomItem.propTypes = {
+  children: PropTypes.node.isRequired
+};

package/components/tabs/dumb-tabs.tsx

@@ -0,0 +1,119 @@
+import React, {ComponentPropsWithRef, PureComponent, ReactElement} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import memoize from '../global/memoize';
+
+import Theme, {ThemeProps, withTheme} from '../global/theme';
+import dataTests from '../global/data-tests';
+
+import styles from './tabs.css';
+
+import TabLink from './tab-link';
+import CollapsibleTabs, {CollapsibleTabsProps} from './collapsible-tabs';
+import {CustomItem} from './custom-item';
+
+import {TabProps} from './tab';
+
+export {CustomItem};
+
+export interface TabsProps extends ThemeProps, Omit<CollapsibleTabsProps, 'onSelect'> {
+  onSelect: (key: string) => void
+  className?: string | null | undefined
+  autoCollapse?: boolean | null | undefined
+  'data-test'?: string | null | undefined
+}
+
+class Tabs extends PureComponent<TabsProps> {
+  static propTypes = {
+    theme: PropTypes.string,
+    selected: PropTypes.string,
+    className: PropTypes.string,
+    href: PropTypes.string,
+    children: PropTypes.node.isRequired,
+    onSelect: PropTypes.func,
+    'data-test': PropTypes.string,
+    autoCollapse: PropTypes.bool
+  };
+
+  static defaultProps = {
+    onSelect() {}
+  };
+
+  static Theme = Theme;
+
+  handleSelect = memoize((key: string) => () => this.props.onSelect(key));
+
+  getTabTitle = (child: ReactElement<TabProps>, i: number) => {
+    if (child == null || typeof child !== 'object' || child.type === CustomItem) {
+      return child;
+    }
+
+    const {selected} = this.props;
+    const {title, id, disabled, href, className, activeClassName} = child.props;
+    const key = id || String(i);
+    const isSelected = key === selected;
+    const titleClasses = classNames(
+      styles.title,
+      className,
+      isSelected && activeClassName,
+      {
+        [styles.selected]: isSelected
+      }
+    );
+
+    return (
+      <TabLink
+        title={title}
+        isSelected={isSelected}
+        active
+        key={key}
+        href={href}
+        innerClassName={titleClasses}
+        className={titleClasses}
+        disabled={disabled}
+        onPlainLeftClick={this.handleSelect(key)}
+      />
+    );
+  };
+
+  render() {
+    const {
+      className,
+      children,
+      selected,
+      theme,
+      autoCollapse,
+      'data-test': dataTest,
+      ...restProps
+    } = this.props;
+
+    const classes = classNames(styles.tabs, className, styles[theme]);
+    const childrenArray = React.Children.toArray(children).
+      filter(Boolean) as ReactElement<TabProps>[];
+
+    return (
+      <div className={classes} data-test={dataTests('ring-dumb-tabs', dataTest)}>
+        {autoCollapse === true
+          ? (
+            <CollapsibleTabs
+              {...restProps}
+              onSelect={this.handleSelect}
+              selected={selected}
+            >{childrenArray}</CollapsibleTabs>
+          )
+          : (
+            <div className={styles.titles}>
+              {childrenArray.map(this.getTabTitle)}
+            </div>
+          )}
+        <div className={styles.tab}>
+          {childrenArray.find(({props}, i) => (props.id || String(i)) === selected)}
+        </div>
+      </div>
+    );
+  }
+}
+const ThemedTabs = withTheme()(Tabs);
+export type TabsAttrs = ComponentPropsWithRef<typeof ThemedTabs>
+export default ThemedTabs;

package/components/tabs/smart-tabs.tsx

@@ -0,0 +1,38 @@
+import React, {PureComponent, ReactElement} from 'react';
+import PropTypes from 'prop-types';
+
+import dataTests from '../global/data-tests';
+
+import Tabs, {TabsAttrs} from './dumb-tabs';
+
+import {TabProps} from './tab';
+
+export interface SmartTabsProps extends TabsAttrs {
+  children: ReactElement<TabProps>[]
+  initSelected?: string | null | undefined
+}
+export default class SmartTabs extends PureComponent<SmartTabsProps> {
+  static propTypes = {
+    children: PropTypes.arrayOf(PropTypes.element).isRequired,
+    initSelected: PropTypes.string,
+    'data-test': PropTypes.string
+  };
+
+  state = {
+    selected: this.props.initSelected || this.props.children[0].props.id || '0'
+  };
+
+  handleSelect = (selected: string) => this.setState({selected});
+
+  render() {
+    const {children, initSelected, 'data-test': dataTest, ...restProps} = this.props;
+    return (
+      <Tabs
+        data-test={dataTests('ring-smart-tabs', dataTest)}
+        selected={this.state.selected}
+        onSelect={this.handleSelect}
+        {...restProps}
+      >{children}</Tabs>
+    );
+  }
+}

package/components/tabs/tab-link.tsx

@@ -0,0 +1,39 @@
+import React, {memo, ReactNode} from 'react';
+import PropTypes from 'prop-types';
+
+import Link, {LinkProps} from '../link/link';
+
+import styles from './tabs.css';
+
+export interface TabLinkProps extends Omit<LinkProps, 'title' | 'children'> {
+  isSelected: boolean
+  collapsed?: boolean
+  title: ReactNode | ((isSelected: boolean, collapsed: boolean | undefined) => ReactNode)
+}
+function TabLink({isSelected, title, collapsed, ...restProps}: TabLinkProps) {
+  const renderedTitle = typeof title === 'function'
+    ? title(isSelected, collapsed)
+    : title;
+
+  return (
+    <Link {...restProps}>
+      {() => (
+        <div className={styles.container}>
+          <span className={styles.visible}>{renderedTitle}</span>
+          {/* hack for preserving constant tab width*/}
+          <span className={styles.hidden}>{renderedTitle}</span>
+          <span className={styles.hiddenBold}>{renderedTitle}</span>
+          <span className={styles.hiddenRegular}>{renderedTitle}</span>
+        </div>
+      )}
+    </Link>
+  );
+}
+
+TabLink.propTypes = {
+  isSelected: PropTypes.bool,
+  collapsed: PropTypes.bool,
+  title: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.node])
+};
+
+export default memo(TabLink);

package/components/tabs/tab.tsx

@@ -0,0 +1,38 @@
+import React, {PureComponent, ReactNode} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import dataTests from '../global/data-tests';
+
+import styles from './tabs.css';
+
+export interface TabProps {
+  title?: ReactNode | ((isSelected: boolean, collapsed: boolean | undefined) => ReactNode)
+  id?: string | null | undefined
+  className?: string | null | undefined
+  children?: ReactNode
+  'data-test'?: string | null | undefined
+  alwaysHidden?: boolean | null | undefined
+  disabled?: boolean | undefined
+  href?: string | undefined
+  activeClassName?: string | null | undefined
+  collapsedClassName?: string | null | undefined
+  collapsedActiveClassName?: string | null | undefined
+}
+export default class Tab extends PureComponent<TabProps> {
+  static propTypes = {
+    title: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+    id: PropTypes.string,
+    className: PropTypes.string,
+    children: PropTypes.node,
+    'data-test': PropTypes.string
+  };
+
+  render() {
+    const {className, children, 'data-test': dataTest} = this.props;
+    const classes = classNames(styles.tab, className);
+    return (
+      <div data-test={dataTests('ring-tab', dataTest)} className={classes}>{children}</div>
+    );
+  }
+}