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

package/components/content-layout/sidebar.js

@@ -1,105 +0,0 @@
-import React, {Component} 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 default class Sidebar extends Component {
-  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
-  };
-
-  handleTopWaypoint = ({currentPosition}) => {
-    this.setState({topIsOutside: currentPosition === ABOVE});
-  };
-
-  handleBottomWaypoint = ({currentPosition, waypointTop}) => {
-    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 => {
-    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` : null
-    };
-
-    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.js

@@ -1,45 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import ContentEditable from '@jetbrains/ring-ui/components/contenteditable/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.js

@@ -1,66 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import {renderToStaticMarkup} from 'react-dom/server';
-
-/**
- * @name ContentEditable
- */
-
-function noop() {}
-
-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 {
-  static propTypes = {
-    ...commonPropTypes,
-    __html: PropTypes.string
-  };
-
-  static defaultProps = {
-    disabled: false,
-    tabIndex: 0,
-    onInput: noop,
-    onComponentUpdate: noop
-  };
-
-  shouldComponentUpdate(nextProps) {
-    return nextProps.disabled !== this.props.disabled ||
-      nextProps.__html !== this.props.__html;
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    this.props.onComponentUpdate(prevProps, prevState);
-  }
-
-  render() {
-    const {__html, onComponentUpdate, disabled, tabIndex, inputRef, ...props} = this.props;
-
-    return (
-      <div
-        {...props}
-        ref={inputRef}
-        disabled={disabled}
-        role="textbox"
-        tabIndex={disabled ? null : tabIndex}
-        contentEditable={!this.props.disabled}
-        dangerouslySetInnerHTML={{__html}}
-      />
-    );
-  }
-}
-
-const ContentEditable = ({children, ...props}) =>
-  <ContentEditableBase {...props} __html={renderToStaticMarkup(children)}/>;
-ContentEditable.propTypes = {
-  ...commonPropTypes,
-  children: PropTypes.node
-};
-
-export default ContentEditable;

package/components/contenteditable/contenteditable.test.js

@@ -1,73 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import ContentEditable 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 = 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/data-list/data-list.examples.js

@@ -1,116 +0,0 @@
-import React, {PureComponent} from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import DataList from '@jetbrains/ring-ui/components/data-list/data-list';
-import Selection from '@jetbrains/ring-ui/components/data-list/selection';
-import {moreLessButtonStates} from '@jetbrains/ring-ui/components/data-list/item';
-import mock, {moreItems} from '@jetbrains/ring-ui/components/data-list/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.collapsible && item.items && item.id > 10;
-    isItemCollapsed = item => !this.expandedItems.has(item.id);
-
-    getChildren = 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 => {
-      if (this.moreExpandableItems.has(item.id)) {
-        return this.moreExpandedItems.has(item.id)
-          ? moreLessButtonStates.LESS
-          : moreLessButtonStates.MORE;
-      } else {
-        return moreLessButtonStates.UNUSED;
-      }
-    };
-
-    onItemMoreLess = (item, more) => {
-      if (more) {
-        this.moreExpandedItems.add(item.id);
-        item.items = item.items.concat([...moreItems]);
-      } else {
-        this.moreExpandedItems.delete(item.id);
-        item.items = item.items.slice(0, item.items.length - moreItems.length);
-      }
-
-      const data = this.state.data;
-      this.setState({data: [...data]});
-    };
-
-    onSelect = selection => {
-      this.setState({selection});
-    };
-
-    itemFormatter = 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';

package/components/data-list/data-list.js

@@ -1,170 +0,0 @@
-/**
-  * @name Data List
-  */
-
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import focusSensorHOC from '../global/focus-sensor-hoc';
-import selectionShortcutsHOC from '../table/selection-shortcuts-hoc';
-import disableHoverHOC from '../table/disable-hover-hoc';
-import getUID from '../global/get-uid';
-import Shortcuts from '../shortcuts/shortcuts';
-import Loader from '../loader/loader';
-
-import Item, {moreLessButtonStates} from './item';
-
-import styles from './data-list.css';
-
-
-class DataList extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    data: PropTypes.array.isRequired,
-    loading: PropTypes.bool,
-    focused: PropTypes.bool,
-    disabledHover: PropTypes.bool,
-    selection: PropTypes.object,
-    selectable: PropTypes.bool,
-    shortcutsMap: PropTypes.object,
-    innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
-
-    itemFormatter: PropTypes.func.isRequired,
-
-    onItemMoreLess: PropTypes.func,
-    itemMoreLessState: PropTypes.func,
-    onSelect: PropTypes.func,
-
-    remoteSelection: PropTypes.bool
-  };
-
-  static defaultProps = {
-    loading: false,
-
-    onItemMoreLess: () => {},
-    itemMoreLessState: () => moreLessButtonStates.UNUSED,
-
-    remoteSelection: false
-  };
-
-  componentDidUpdate(prevProps) {
-    const {data, selection, onSelect, selectable} = this.props;
-
-    if (data !== prevProps.data && !prevProps.remoteSelection) {
-      onSelect(selection.cloneWith({data}));
-    }
-
-    if (!selectable && prevProps.selectable) {
-      onSelect(selection.resetSelection());
-    }
-  }
-
-  shortcutsScope = getUID('ring-data-list-');
-
-  onItemFocus = item => {
-    const {selection, onSelect} = this.props;
-    onSelect(selection.focus(item));
-  };
-
-  onItemSelect = (item, selected) => {
-    const {selection, onSelect} = this.props;
-    if (selected) {
-      onSelect(selection.select(item));
-    } else {
-      onSelect(selection.deselect(item));
-    }
-  };
-
-  onEqualPress = () => {
-    const {
-      selection, itemFormatter
-    } = this.props;
-
-    const item = itemFormatter(selection.getFocused());
-
-    if (item.collapsed) {
-      item.onExpand();
-    } else {
-      item.onCollapse();
-    }
-  };
-
-  shortcutsMap = {
-    '=': this.onEqualPress
-  };
-
-  render() {
-    const {
-      data, className, loading,
-      selection, disabledHover,
-      itemFormatter, focused, innerRef
-    } = this.props;
-
-    const shortcutsMap = {...this.shortcutsMap, ...this.props.shortcutsMap};
-
-    const classes = classNames(className, {
-      [styles.dataList]: true,
-      [styles.disabledHover]: disabledHover,
-      [styles.multiSelection]: selection.getSelected().size > 0
-    });
-
-    return (
-      <div className={styles.dataListWrapper} data-test="ring-data-list" ref={innerRef}>
-        {focused &&
-          (
-            <Shortcuts
-              map={shortcutsMap}
-              scope={this.shortcutsScope}
-            />
-          )
-        }
-
-        <ul className={classes}>
-          {data.map(model => {
-            const item = itemFormatter(model);
-            const {id, key, title, items} = item;
-
-            const showMoreLessButton = this.props.itemMoreLessState(item);
-
-            return (
-              <Item
-                key={key || id}
-                item={model}
-                title={title}
-                items={items}
-
-                itemFormatter={itemFormatter}
-
-                collapsible={item.collapsible}
-                collapsed={item.collapsed}
-                onCollapse={item.onCollapse}
-                onExpand={item.onExpand}
-
-                focused={selection.isFocused(model)}
-                showFocus={selection.isFocused(model)}
-                onFocus={this.onItemFocus}
-
-                selection={selection}
-                selectable={item.selectable}
-                selected={selection.isSelected(model)}
-                onSelect={this.onItemSelect}
-
-                showMoreLessButton={showMoreLessButton}
-                onItemMoreLess={this.props.onItemMoreLess}
-              />
-            );
-          })}
-        </ul>
-
-        {loading && (
-          <div className={data.length > 0 ? styles.loadingOverlay : null}>
-            <Loader/>
-          </div>
-        )}
-      </div>
-    );
-  }
-}
-
-export default disableHoverHOC(selectionShortcutsHOC(focusSensorHOC(DataList)));