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

package/components/content-layout/content-layout.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+
+import ContentLayout, {ContentLayoutProps} from './content-layout';
+import Sidebar from './sidebar';
+import styles from './content-layout.css';
+
+type ContentLayoutAttributes =
+  JSX.LibraryManagedAttributes<typeof ContentLayout, ContentLayoutProps>
+
+describe('Content Layout', () => {
+  const shallowContentLayout = (params?: ContentLayoutAttributes) =>
+    shallow(<ContentLayout {...params}/>);
+  const mountContentLayout = (params?: ContentLayoutAttributes) =>
+    mount(<ContentLayout {...params}/>);
+
+  it('should create component', () => {
+    mountContentLayout().should.have.type(ContentLayout);
+  });
+
+  it('should wrap children with div', () => {
+    shallowContentLayout().should.have.tagName('div');
+  });
+
+  it('should use passed className', () => {
+    shallowContentLayout({className: 'test-class'}).should.have.className('test-class');
+  });
+
+  it('should render sidebar', () => {
+    const component = mount(<ContentLayout>
+      <Sidebar>{'In sidebar'}</Sidebar>
+      <div>{'Foo'}</div>
+    </ContentLayout>);
+
+    component.should.have.descendants(`div.${styles.sidebar}`);
+  });
+
+  it('should render sidebar on the right', () => {
+    const component = mount(<ContentLayout>
+      <Sidebar right>{'In sidebar'}</Sidebar>
+      <div>{'Foo'}</div>
+    </ContentLayout>);
+
+    component.should.have.descendants(`div.${styles.sidebarRight}`);
+  });
+});

package/components/content-layout/content-layout.tsx

@@ -0,0 +1,74 @@
+import React, {cloneElement, Component, HTMLAttributes, ReactElement} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Sidebar, {SidebarProps} from './sidebar';
+import styles from './content-layout.css';
+
+export interface ContentLayoutProps extends HTMLAttributes<HTMLElement> {
+  responsive: boolean
+  contentClassName?: string | null | undefined
+}
+
+/**
+ * @name Content Layout
+ */
+
+export default class ContentLayout extends Component<ContentLayoutProps> {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    contentClassName: PropTypes.string,
+    responsive: PropTypes.bool
+  };
+
+  static defaultProps = {
+    responsive: true
+  };
+
+  state = {
+    contentNode: null
+  };
+
+  saveContentNode = (contentNode: HTMLElement | null) => {
+    this.setState({contentNode});
+  };
+
+  render() {
+    const {children, className, contentClassName, responsive, ...restProps} = this.props;
+
+    const classes = classNames(styles.contentLayout, className, {
+      [styles.contentLayoutResponsive]: responsive
+    });
+
+    const contentClasses = classNames(styles.contentLayoutContent, contentClassName);
+
+    const childrenArray = React.Children.toArray(children);
+    const sidebarChild = childrenArray.filter(
+      (child): child is ReactElement<SidebarProps, typeof Sidebar> =>
+        child != null && typeof child === 'object' && 'type' in child && child.type === Sidebar
+    )[0];
+
+    const sidebar = sidebarChild && cloneElement(sidebarChild, {
+      contentNode: this.state.contentNode
+    });
+    const contentChildren = childrenArray.filter(child => child !== sidebarChild);
+
+    return (
+      <div
+        {...restProps}
+        className={classes}
+      >
+        {sidebar}
+        <main
+          className={contentClasses}
+          ref={this.saveContentNode}
+        >
+          {contentChildren}
+        </main>
+      </div>
+    );
+  }
+}
+
+export {default as Sidebar} from './sidebar';

package/components/content-layout/sidebar.tsx

@@ -0,0 +1,115 @@
+import React, {Component, HTMLAttributes} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {Waypoint} from 'react-waypoint';
+
+import styles from './content-layout.css';
+
+const ABOVE = 'above';
+const INSIDE = 'inside';
+
+export interface SidebarProps extends HTMLAttributes<HTMLElement> {
+  right?: boolean | null | undefined
+  containerClassName?: string | null | undefined
+  fixedClassName?: string | null | undefined
+  contentNode?: HTMLElement | null | undefined
+}
+
+export default class Sidebar extends Component<SidebarProps> {
+  static propTypes = {
+    right: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    containerClassName: PropTypes.string,
+    fixedClassName: PropTypes.string,
+    contentNode: PropTypes.object
+  };
+
+  state = {
+    topIsOutside: true,
+    bottomIsOutside: true,
+    sidebarVisibleHeight: undefined
+  };
+
+  sidebarNode?: HTMLElement | null;
+
+  handleTopWaypoint = ({currentPosition}: Waypoint.CallbackArgs) => {
+    this.setState({topIsOutside: currentPosition === ABOVE});
+  };
+
+  handleBottomWaypoint = ({currentPosition, waypointTop}: Waypoint.CallbackArgs) => {
+    this.setState({
+      sidebarVisibleHeight: waypointTop,
+      bottomIsOutside: currentPosition !== INSIDE
+    });
+  };
+
+  shouldUseFixation() {
+    const {contentNode} = this.props;
+    const {sidebarNode} = this;
+    if (!contentNode || !sidebarNode) {
+      return false;
+    }
+    return contentNode.offsetHeight >= sidebarNode.offsetHeight;
+  }
+
+  shouldFixateBottom() {
+    const {topIsOutside, bottomIsOutside} = this.state;
+    return !bottomIsOutside && topIsOutside && this.shouldUseFixation();
+  }
+
+  sidebarRef = (node: HTMLElement | null) => {
+    this.sidebarNode = node;
+  };
+
+  render() {
+    const {right, children, className, containerClassName,
+      fixedClassName, contentNode, ...restProps} = this.props;
+    const {topIsOutside, bottomIsOutside, sidebarVisibleHeight} = this.state;
+
+    const shouldFixateTop = bottomIsOutside && topIsOutside && this.shouldUseFixation();
+    const shouldFixateBottom = this.shouldFixateBottom();
+
+    const containerClasses = classNames(styles.sidebarContainer, containerClassName, {
+      [styles.sidebarContainerRight]: right
+    });
+
+    const classes = classNames(styles.sidebar, className, {
+      [styles.sidebarRight]: right,
+      [styles.sidebarFixedTop]: shouldFixateTop,
+      [styles.sidebarFixedBottom]: shouldFixateBottom,
+      [fixedClassName ?? '']: shouldFixateTop || shouldFixateBottom
+    });
+
+    const style = {
+      maxHeight: shouldFixateBottom && sidebarVisibleHeight ? `${sidebarVisibleHeight}px` : undefined
+    };
+
+    return (
+      <aside
+        className={containerClasses}
+        ref={this.sidebarRef}
+      >
+        <Waypoint
+          onEnter={this.handleTopWaypoint}
+          onLeave={this.handleTopWaypoint}
+        />
+
+        <div
+          {...restProps}
+          style={style}
+          className={classes}
+        >
+          {children}
+        </div>
+
+        <div className={styles.bottomMarker}>
+          <Waypoint
+            onEnter={this.handleBottomWaypoint}
+            onLeave={this.handleBottomWaypoint}
+          />
+        </div>
+      </aside>
+    );
+  }
+}

package/components/contenteditable/contenteditable.examples.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import ContentEditable from './contenteditable';
+
+export default {
+  title: 'Components/ContentEditable',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes: 'Provides a ContentEditable component.'
+  }
+};
+
+export const basic = () => (
+  <div>
+    <ContentEditable className="my-input" aria-label="My input">
+      <span>
+        text <b>bold text</b> text
+      </span>
+    </ContentEditable>
+    <ContentEditable className="my-input" aria-label="My input" disabled>
+      <span>
+        text <b>bold text</b> text
+      </span>
+    </ContentEditable>
+  </div>
+);
+
+basic.storyName = 'ContentEditable';
+
+basic.parameters = {
+  storyStyles: `
+<style>
+    .my-input {
+      padding-left: 4px;
+    }
+
+    .my-input[disabled] {
+      border: 1px solid var(--ring-border-disabled-color);
+      background-color: var(--ring-disabled-color);
+    }
+</style>`
+};

package/components/contenteditable/contenteditable.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+
+import ContentEditable, {ContentEditableProps} from './contenteditable';
+
+describe('ContentEditable', () => {
+  const stub = sandbox.stub();
+
+  afterEach(() => stub.reset());
+
+  const defaultProps = {
+    className: 'test',
+    onComponentUpdate: stub
+  };
+
+  const mountContentEditable = (props = defaultProps) => mount(
+    <ContentEditable {...props}>
+      <b>{'bold'}</b>
+    </ContentEditable>
+  );
+  const shallowContentEditable = (props: Omit<ContentEditableProps, 'children'> = defaultProps) =>
+    shallow(
+      <ContentEditable {...props}>
+        <b>{'bold'}</b>
+      </ContentEditable>
+    );
+
+  it('should create component', () => {
+    mountContentEditable().should.have.type(ContentEditable);
+  });
+
+  it('should pass other properties', () => {
+    shallowContentEditable().should.have.className('test');
+  });
+
+
+  it('should dangerously set html', () => {
+    mountContentEditable().getDOMNode().innerHTML.should.equal('<b>bold</b>');
+  });
+
+  it('should render only on html / disabled change', () => {
+    const wrapper = mountContentEditable();
+    wrapper.setProps({
+      disabled: true
+    });
+
+    wrapper.setProps({
+      children: <span/>
+    });
+
+    stub.should.have.been.calledTwice;
+  });
+
+  it('should not render on other props change', () => {
+    const wrapper = mountContentEditable();
+    wrapper.setProps({
+      className: 'testtest'
+    });
+
+    stub.should.not.have.been.called;
+  });
+
+  it('should set tabindex equal zero by default', () => {
+    shallowContentEditable().should.have.attr('tabindex', '0');
+  });
+
+  it('should allow pass custom tabindex', () => {
+    const wrapper = shallowContentEditable({
+      tabIndex: -1
+    });
+
+    wrapper.should.have.attr('tabindex', '-1');
+  });
+});

package/components/contenteditable/contenteditable.tsx

@@ -0,0 +1,80 @@
+import React, {Component, HTMLAttributes, Ref, ReactElement} from 'react';
+import PropTypes from 'prop-types';
+import {renderToStaticMarkup} from 'react-dom/server';
+
+/**
+ * @name ContentEditable
+ */
+
+function noop() {}
+
+export interface ContentEditableBaseProps extends HTMLAttributes<HTMLElement> {
+  disabled: boolean
+  onComponentUpdate: ((prevProps: ContentEditableBaseProps) => void)
+  inputRef?: Ref<HTMLDivElement> | null | undefined
+  __html: string
+}
+
+const commonPropTypes = {
+  disabled: PropTypes.bool,
+  tabIndex: PropTypes.number,
+  componentDidUpdate: PropTypes.func,
+  onComponentUpdate: PropTypes.func,
+  className: PropTypes.string,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+};
+
+class ContentEditableBase extends Component<ContentEditableBaseProps> {
+  static propTypes = {
+    ...commonPropTypes,
+    __html: PropTypes.string
+  };
+
+  static defaultProps = {
+    disabled: false,
+    tabIndex: 0,
+    onInput: noop,
+    onComponentUpdate: noop
+  };
+
+  shouldComponentUpdate(nextProps: ContentEditableBaseProps) {
+    return nextProps.disabled !== this.props.disabled ||
+      nextProps.__html !== this.props.__html;
+  }
+
+  componentDidUpdate(prevProps: ContentEditableBaseProps) {
+    this.props.onComponentUpdate(prevProps);
+  }
+
+  render() {
+    const {__html, onComponentUpdate, disabled, tabIndex, inputRef, ...props} = this.props;
+
+    return (
+      <div
+        {...props}
+        ref={inputRef}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        disabled={disabled}
+        role="textbox"
+        tabIndex={disabled ? undefined : tabIndex}
+        contentEditable={!this.props.disabled}
+        dangerouslySetInnerHTML={{__html}}
+      />
+    );
+  }
+}
+
+type ContentEditableBaseAttrs =
+  JSX.LibraryManagedAttributes<typeof ContentEditableBase, ContentEditableBaseProps>
+
+export type ContentEditableProps = Omit<ContentEditableBaseAttrs, '__html'>
+
+const ContentEditable = ({children, ...props}: ContentEditableProps) =>
+  <ContentEditableBase {...props} __html={renderToStaticMarkup(children as ReactElement)}/>;
+ContentEditable.propTypes = {
+  ...commonPropTypes,
+  children: PropTypes.node
+};
+
+export default ContentEditable;

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

@@ -0,0 +1,120 @@
+import React, {PureComponent} from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import TableSelection from '../table/selection';
+
+import DataList from './data-list';
+import Selection from './selection';
+import {FormattedItem, moreLessButtonStates} from './item';
+import mock, {Item, moreItems} from './data-list.mock';
+
+export default {
+  title: 'Components/DataList',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes: 'A component for rendering interactive hierarchical tables.'
+  }
+};
+
+export const basic = () => {
+  class DataListDemo extends PureComponent {
+    // state uses getChildren
+    // eslint-disable-next-line react/sort-comp
+    expandedItems = new Set();
+    isItemCollapsible = (item: Item) => item.collapsible && item.items && item.id > 10;
+    isItemCollapsed = (item: Item) => !this.expandedItems.has(item.id);
+
+    getChildren = (item: Item) => {
+      const collapsible = this.isItemCollapsible(item);
+      const collapsed = this.isItemCollapsed(item);
+      return (collapsible && collapsed) || !item.items ? [] : item.items;
+    };
+
+    state = {
+      data: mock,
+      selection: new Selection({
+        data: mock,
+        isItemSelectable: item => item.selectable,
+        getChildren: this.getChildren
+      })
+    };
+
+    moreExpandableItems = new Set([mock[0].id]);
+    moreExpandedItems = new Set();
+
+    itemMoreLessState = (item: FormattedItem<Item>) => {
+      if (item.id != null && this.moreExpandableItems.has(item.id)) {
+        return this.moreExpandedItems.has(item.id)
+          ? moreLessButtonStates.LESS
+          : moreLessButtonStates.MORE;
+      } else {
+        return moreLessButtonStates.UNUSED;
+      }
+    };
+
+    onItemMoreLess = (item: Item, more: boolean) => {
+      if (more) {
+        this.moreExpandedItems.add(item.id);
+        item.items ??= [];
+        item.items = item.items.concat([...moreItems]);
+      } else {
+        this.moreExpandedItems.delete(item.id);
+        item.items ??= [];
+        item.items = item.items.slice(0, item.items.length - moreItems.length);
+      }
+
+      const data = this.state.data;
+      this.setState({data: [...data]});
+    };
+
+    onSelect = (selection: TableSelection<Item>) => {
+      this.setState({selection});
+    };
+
+    itemFormatter = (item: Item): FormattedItem<Item> => {
+      const items = this.getChildren(item);
+      const collapsible = this.isItemCollapsible(item);
+      const collapsed = this.isItemCollapsed(item);
+
+      const onCollapse = () => {
+        this.expandedItems.delete(item.id);
+        const data = this.state.data;
+        this.setState({data: [...data]});
+      };
+
+      const onExpand = () => {
+        this.expandedItems.add(item.id);
+        const data = this.state.data;
+        this.setState({data: [...data]});
+      };
+
+      return {
+        ...item,
+        items,
+        collapsible,
+        collapsed,
+        onCollapse,
+        onExpand
+      };
+    };
+
+    render() {
+      return (
+        <DataList
+          data={this.state.data}
+          selection={this.state.selection}
+          onSelect={this.onSelect}
+          itemFormatter={this.itemFormatter}
+          onItemMoreLess={this.onItemMoreLess}
+          itemMoreLessState={this.itemMoreLessState}
+        />
+      );
+    }
+  }
+
+  return <DataListDemo/>;
+};
+
+basic.storyName = 'DataList';