@jetbrains/ring-ui 4.1.6 → 5.0.0-beta.3

package/components/list/list__custom.d.ts

@@ -0,0 +1,6 @@
+import React, { PureComponent } from 'react';
+import { ListDataItemProps } from './consts';
+export default class ListCustom<T> extends PureComponent<ListDataItemProps<T>> {
+    handleKeyPress: (event: React.KeyboardEvent) => void;
+    render(): JSX.Element;
+}

package/components/list/list__custom.js

@@ -1,90 +1,52 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import dataTests from '../global/data-tests';
 import getEventKey from '../global/get-event-key';
-
 import styles from './list.css';
-
 export default class ListCustom extends PureComponent {
-  static propTypes = {
-    scrolling: PropTypes.bool,
-    hover: PropTypes.bool,
+    handleKeyPress = (event) => {
+        const key = getEventKey(event);
+        if (key === 'Enter' || key === ' ') {
+            this.props.onClick(event);
+        }
+    };
+    render() {
+        const { scrolling, hover, className, disabled, template, rgItemType, tabIndex, onClick, onCheckboxChange, onMouseOver, onMouseUp, role, tagName, ...restProps } = this.props;
+        const classes = classNames(styles.item, className, {
+            [styles.action]: !disabled,
+            [styles.hover]: hover && !disabled,
+            [styles.scrolling]: scrolling
+        });
+        const dataTest = dataTests('ring-list-item-custom', {
+            'ring-list-item-action': !disabled
+        }, restProps['data-test']);
+        const content = (typeof template === 'function')
+            ? template(this.props)
+            : template;
+        const TagName = tagName || 'span';
+        return (<TagName role={role || 'button'} tabIndex={tabIndex} onClick={onClick} onKeyPress={this.handleKeyPress} onMouseOver={onMouseOver} onFocus={onMouseOver} onMouseUp={onMouseUp} className={classes} data-test={dataTest}>
+        {content}
+      </TagName>);
+    }
+}
+ListCustom.propTypes = {
+    scrolling: PropTypes.bool.isRequired,
+    hover: PropTypes.bool.isRequired,
     className: PropTypes.string,
     disabled: PropTypes.bool,
     rgItemType: PropTypes.number,
-    tabIndex: PropTypes.number,
+    tabIndex: PropTypes.number.isRequired,
     template: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.element,
-      PropTypes.string
+        PropTypes.func,
+        PropTypes.element,
+        PropTypes.string
     ]),
-    onClick: PropTypes.func,
-    onMouseOver: PropTypes.func,
+    onClick: PropTypes.func.isRequired,
+    onMouseOver: PropTypes.func.isRequired,
     onMouseUp: PropTypes.func,
-    onCheckboxChange: PropTypes.func,
+    onCheckboxChange: PropTypes.func.isRequired,
     role: PropTypes.string,
     tagName: PropTypes.string,
     'data-test': PropTypes.string
-  };
-
-  static defaultProps = {
-    hover: false
-  };
-
-  handleKeyPress = event => {
-    const key = getEventKey(event);
-    if (key === 'Enter' || key === ' ') {
-      this.props.onClick(event);
-    }
-  };
-
-  render() {
-    const {
-      scrolling,
-      hover,
-      className,
-      disabled,
-      template,
-      rgItemType,
-      tabIndex,
-      onClick,
-      onCheckboxChange,
-      onMouseOver,
-      onMouseUp,
-      role,
-      tagName,
-      ...restProps
-    } = this.props;
-    const classes = classNames(styles.item, className, {
-      [styles.action]: !disabled,
-      [styles.hover]: hover && !disabled,
-      [styles.scrolling]: scrolling
-    });
-
-
-    const dataTest = dataTests('ring-list-item-custom', {
-      'ring-list-item-action': !disabled
-    }, restProps['data-test']);
-
-    const content = (typeof template === 'function') ? template(this.props) : template;
-    const TagName = tagName || 'span';
-
-    return (
-      <TagName
-        role={role || 'button'}
-        tabIndex={tabIndex}
-        onClick={onClick}
-        onKeyPress={this.handleKeyPress}
-        onMouseOver={onMouseOver}
-        onFocus={onMouseOver}
-        onMouseUp={onMouseUp}
-        className={classes}
-        data-test={dataTest}
-      >
-        {content}
-      </TagName>
-    );
-  }
-}
+};

package/components/list/list__hint.d.ts

@@ -0,0 +1,15 @@
+import { PureComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+export interface ListHintProps {
+    label: ReactNode;
+}
+/**
+ * @constructor
+ * @extends {ReactComponent}
+ */
+export default class ListHint extends PureComponent<ListHintProps> {
+    static propTypes: {
+        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): JSX.Element;
+}

package/components/list/list__hint.js

@@ -1,24 +1,16 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-
 import styles from './list.css';
-
 /**
  * @constructor
  * @extends {ReactComponent}
  */
 export default class ListHint extends PureComponent {
-  static propTypes = {
-    label: PropTypes.node
-  };
-
-  render() {
-    return (
-      <span
-        className={classnames(styles.item, styles.hint)}
-        data-test="ring-list-hint"
-      >{this.props.label}</span>
-    );
-  }
+    static propTypes = {
+        label: PropTypes.node
+    };
+    render() {
+        return (<span className={classnames(styles.item, styles.hint)} data-test="ring-list-hint">{this.props.label}</span>);
+    }
 }

package/components/list/list__item.d.ts

@@ -0,0 +1,8 @@
+import { PureComponent, SyntheticEvent } from 'react';
+import { ListDataItemProps } from './consts';
+export default class ListItem<T> extends PureComponent<ListDataItemProps<T>> {
+    id: string;
+    stopBubbling: (e: SyntheticEvent) => void;
+    private _isString;
+    render(): JSX.Element;
+}

package/components/list/list__item.js

@@ -1,28 +1,90 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import dataTests from '../global/data-tests';
-import Avatar, {Size as AvatarSize} from '../avatar/avatar';
+import Avatar, { Size as AvatarSize } from '../avatar/avatar';
 import Checkbox from '../checkbox/checkbox';
 import Icon from '../icon/icon';
-
 import getUID from '../global/get-uid';
 import globalStyles from '../global/global.css';
-
 import styles from './list.css';
-
 /**
  * @constructor
  * @extends {ReactComponent}
  */
-
 const RING_UNIT = 8;
 const DEFAULT_PADDING = 16;
 const CHECKBOX_WIDTH = 28;
-
 export default class ListItem extends PureComponent {
-  static propTypes = {
+    id = getUID('list-item-');
+    stopBubbling = (e) => e.stopPropagation();
+    _isString = (val) => typeof val === 'string' || val instanceof String;
+    render() {
+        const { scrolling, className, disabled, checkbox, avatar, subavatar, glyph, icon, rightGlyph, description, label, title, details, hover, rgItemType, level, tabIndex, compact, onClick, onCheckboxChange, onMouseOver, onMouseDown, onMouseUp, rightNodes, leftNodes, showGeneratedAvatar, username, ...restProps } = this.props;
+        const checkable = checkbox !== undefined;
+        const shouldShowGeneratedAvatar = showGeneratedAvatar && username != null;
+        const hasLeftNodes = leftNodes || glyph || avatar || shouldShowGeneratedAvatar;
+        const showCheckbox = checkable && (checkbox || !hasLeftNodes || (hover && !disabled));
+        const classes = classNames(styles.item, globalStyles.resetButton, className, {
+            [styles.action]: !disabled,
+            [styles.hover]: hover && !disabled,
+            [styles.compact]: compact,
+            [styles.scrolling]: scrolling,
+            [styles.disabled]: disabled
+        });
+        const detailsClasses = classNames({
+            [styles.details]: details,
+            [styles.padded]: icon !== undefined ||
+                checkbox !== undefined ||
+                glyph !== undefined
+        });
+        const style = {
+            paddingLeft: `${(Number(level) || 0) * RING_UNIT + DEFAULT_PADDING + (showCheckbox ? CHECKBOX_WIDTH : 0)}px`
+        };
+        let computedTitle = null;
+        if (this._isString(title)) {
+            // if title is specified and is a string then use it
+            computedTitle = title;
+        }
+        else {
+            // otherwise use label if it is a string;
+            // label can also be an element, use empty string in this case
+            computedTitle = this._isString(label) ? label : '';
+        }
+        const dataTest = dataTests({
+            'ring-list-item': (restProps['data-test'] || '').indexOf('ring-list-item') === -1,
+            'ring-list-item-action': !disabled,
+            'ring-list-item-selected': checkbox
+        }, restProps['data-test']);
+        return (<div className={styles.itemContainer} data-test={dataTest}>
+        {showCheckbox && (<div className={styles.checkboxContainer}>
+            <Checkbox aria-labelledby={this.id} checked={checkbox} disabled={disabled} onChange={onCheckboxChange} onClick={this.stopBubbling}/>
+          </div>)}
+        <button id={this.id} type="button" tabIndex={tabIndex} onClick={onClick} onMouseOver={onMouseOver} onMouseDown={onMouseDown} onFocus={onMouseOver} onMouseUp={onMouseUp} className={classes} style={style}>
+          <div className={styles.top} onMouseOut={this.stopBubbling} onBlur={this.stopBubbling}>
+            {!showCheckbox && (<div className={styles.left}>
+                {leftNodes}
+                {glyph && (<Icon className={styles.glyph} glyph={glyph} size={this.props.iconSize}/>)}
+                {(avatar || shouldShowGeneratedAvatar) && (<Avatar className={styles.avatar} url={avatar} size={AvatarSize.Size20} subavatar={subavatar} username={username}/>)}
+              </div>)}
+
+            <span className={styles.label} title={computedTitle} data-test="ring-list-item-label">{label}</span>
+
+            {description && (<span className={styles.description} data-test="ring-list-item-description">{description}</span>)}
+
+            <div className={styles.right}>
+              {rightGlyph && (<Icon className={styles.rightGlyph} glyph={rightGlyph} size={this.props.iconSize}/>)}
+              {icon && (<div className={styles.icon} style={{ backgroundImage: `url("${icon}")` }}/>)}
+              {rightNodes}
+            </div>
+          </div>
+
+          {details && <div className={detailsClasses}>{details}</div>}
+        </button>
+      </div>);
+    }
+}
+ListItem.propTypes = {
     scrolling: PropTypes.bool,
     hover: PropTypes.bool,
     details: PropTypes.string,
@@ -31,9 +93,9 @@ export default class ListItem extends PureComponent {
     tabIndex: PropTypes.number,
     checkbox: PropTypes.bool,
     description: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.element,
-      PropTypes.array
+        PropTypes.string,
+        PropTypes.element,
+        PropTypes.array
     ]),
     showGeneratedAvatar: PropTypes.bool,
     username: PropTypes.string,
@@ -43,14 +105,14 @@ export default class ListItem extends PureComponent {
     icon: PropTypes.string,
     iconSize: PropTypes.number,
     rightNodes: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.element,
-      PropTypes.array
+        PropTypes.string,
+        PropTypes.element,
+        PropTypes.array
     ]),
     leftNodes: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.element,
-      PropTypes.array
+        PropTypes.string,
+        PropTypes.element,
+        PropTypes.array
     ]),
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     title: PropTypes.string,
@@ -64,170 +126,4 @@ export default class ListItem extends PureComponent {
     onMouseDown: PropTypes.func,
     onMouseUp: PropTypes.func,
     'data-test': PropTypes.string
-  };
-
-  id = getUID('list-item-');
-
-  stopBubbling = e => e.stopPropagation();
-
-  _isString = val => typeof val === 'string' || val instanceof String;
-
-  render() {
-    const {
-      scrolling,
-      className,
-      disabled,
-      checkbox,
-      avatar,
-      subavatar,
-      glyph,
-      icon,
-      rightGlyph,
-      description,
-      label,
-      title,
-      details,
-      hover,
-      rgItemType,
-      level,
-      tabIndex,
-      compact,
-      onClick,
-      onCheckboxChange,
-      onMouseOver,
-      onMouseDown,
-      onMouseUp,
-      rightNodes,
-      leftNodes,
-      showGeneratedAvatar,
-      username,
-      ...restProps
-    } = this.props;
-
-    const checkable = checkbox !== undefined;
-    const shouldShowGeneratedAvatar = showGeneratedAvatar && username != null;
-    const hasLeftNodes = leftNodes || glyph || avatar || shouldShowGeneratedAvatar;
-    const showCheckbox = checkable && (checkbox || !hasLeftNodes || (hover && !disabled));
-
-    const classes = classNames(styles.item, globalStyles.resetButton, className, {
-      [styles.action]: !disabled,
-      [styles.hover]: hover && !disabled,
-      [styles.compact]: compact,
-      [styles.scrolling]: scrolling,
-      [styles.disabled]: disabled
-    });
-
-    const detailsClasses = classNames({
-      [styles.details]: details,
-      [styles.padded]: icon !== undefined ||
-        checkbox !== undefined ||
-        glyph !== undefined
-    });
-
-    const style = {
-      paddingLeft: `${(+level || 0) * RING_UNIT + DEFAULT_PADDING + (showCheckbox ? CHECKBOX_WIDTH : 0)}px`
-    };
-
-    let computedTitle = null;
-    if (this._isString(title)) {
-      // if title is specified and is a string then use it
-      computedTitle = title;
-    } else {
-      // otherwise use label if it is a string;
-      // label can also be an element, use empty string in this case
-      computedTitle = this._isString(label) ? label : '';
-    }
-
-    const dataTest = dataTests({
-      'ring-list-item': (restProps['data-test'] || '').indexOf('ring-list-item') === -1,
-      'ring-list-item-action': !disabled,
-      'ring-list-item-selected': checkbox
-    }, restProps['data-test']);
-
-    return (
-      <div className={styles.itemContainer} data-test={dataTest}>
-        {showCheckbox && (
-          <div
-            className={styles.checkboxContainer}
-          >
-            <Checkbox
-              aria-labelledby={this.id}
-              checked={checkbox}
-              disabled={disabled}
-              onChange={onCheckboxChange}
-              onClick={this.stopBubbling}
-            />
-          </div>
-        )}
-        <button
-          id={this.id}
-          type="button"
-          tabIndex={tabIndex}
-          onClick={onClick}
-          onMouseOver={onMouseOver}
-          onMouseDown={onMouseDown}
-          onFocus={onMouseOver}
-          onMouseUp={onMouseUp}
-          className={classes}
-          style={style}
-        >
-          <div className={styles.top} onMouseOut={this.stopBubbling} onBlur={this.stopBubbling}>
-            {!showCheckbox && (
-              <div className={styles.left}>
-                {leftNodes}
-                {glyph && (
-                  <Icon
-                    className={styles.glyph}
-                    glyph={glyph}
-                    size={this.props.iconSize}
-                  />
-                )}
-                {(avatar || shouldShowGeneratedAvatar) && (
-                  <Avatar
-                    className={styles.avatar}
-                    url={avatar}
-                    size={AvatarSize.Size20}
-                    subavatar={subavatar}
-                    username={username}
-                  />
-                )}
-              </div>
-            )}
-
-            <span
-              className={styles.label}
-              title={computedTitle}
-              data-test="ring-list-item-label"
-            >{label}</span>
-
-            {description && (
-              <span
-                className={styles.description}
-                data-test="ring-list-item-description"
-              >{description}</span>
-            )}
-
-            <div className={styles.right}>
-              {rightGlyph && (
-                <Icon
-                  className={styles.rightGlyph}
-                  glyph={rightGlyph}
-                  size={this.props.iconSize}
-                />
-              )}
-              {icon && (
-                <div
-                  className={styles.icon}
-                  style={{backgroundImage: `url("${icon}")`}}
-                />
-              )}
-              {rightNodes}
-            </div>
-          </div>
-
-          {details && <div className={detailsClasses}>{details}</div>}
-        </button>
-      </div>
-    );
-  }
-}
+};

package/components/list/list__link.d.ts

@@ -0,0 +1,9 @@
+import { PureComponent } from 'react';
+import { ListDataItemProps } from './consts';
+/**
+ * @constructor
+ * @extends {ReactComponent}
+ */
+export default class ListLink<T> extends PureComponent<ListDataItemProps<T>> {
+    render(): JSX.Element;
+}

package/components/list/list__link.js

@@ -1,72 +1,43 @@
-import React, {Component, PureComponent} from 'react';
+import React, { Component, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
-import Link, {linkHOC} from '../link/link';
+import Link, { linkHOC } from '../link/link';
 import dataTests from '../global/data-tests';
-
 import styles from './list.css';
-
 /**
  * @constructor
  * @extends {ReactComponent}
  */
 export default class ListLink extends PureComponent {
-  static propTypes = {
+    render() {
+        const { scrolling, 'data-test': dataTest, className, label, hover, description, rgItemType, url, onCheckboxChange, disabled, LinkComponent, compact, hoverClassName, ...restProps } = this.props;
+        const classes = classNames(styles.item, className, {
+            [styles.actionLink]: !disabled,
+            [styles.compact]: compact,
+            [styles.scrolling]: scrolling
+        });
+        const Comp = LinkComponent ? linkHOC(LinkComponent) : Link;
+        return (<Comp pseudo={!this.props.href} {...restProps} hover={hover && !disabled} className={classes} data-test={dataTests('ring-list-link', dataTest)}>
+        {label}
+      </Comp>);
+    }
+}
+ListLink.propTypes = {
     ...Link.propTypes,
     description: PropTypes.string,
     label: PropTypes.oneOfType([
-      PropTypes.element,
-      PropTypes.string,
-      PropTypes.func
+        PropTypes.element,
+        PropTypes.string,
+        PropTypes.func
     ]),
     rgItemType: PropTypes.number,
-    scrolling: PropTypes.bool,
+    scrolling: PropTypes.bool.isRequired,
     url: PropTypes.string,
     LinkComponent: PropTypes.oneOfType([
-      PropTypes.instanceOf(Component),
-      PropTypes.func,
-      PropTypes.string
+        PropTypes.instanceOf(Component),
+        PropTypes.func,
+        PropTypes.string
     ]),
-    onCheckboxChange: PropTypes.func,
+    onCheckboxChange: PropTypes.func.isRequired,
     compact: PropTypes.bool
-  };
-
-  render() {
-    const {
-      scrolling,
-      'data-test': dataTest,
-      className,
-      label,
-      hover,
-      description,
-      rgItemType,
-      url,
-      onCheckboxChange,
-      disabled,
-      LinkComponent,
-      compact,
-      hoverClassName,
-      ...restProps
-    } = this.props;
-    const classes = classNames(styles.item, className, {
-      [styles.actionLink]: !disabled,
-      [styles.compact]: compact,
-      [styles.scrolling]: scrolling
-    });
-
-    const Comp = LinkComponent ? linkHOC(LinkComponent) : Link;
-
-    return (
-      <Comp
-        pseudo={!this.props.href}
-        {...restProps}
-        hover={hover && !disabled}
-        className={classes}
-        data-test={dataTests('ring-list-link', dataTest)}
-      >
-        {label}
-      </Comp>
-    );
-  }
-}
+};

package/components/list/list__separator.d.ts

@@ -0,0 +1,5 @@
+import { PureComponent } from 'react';
+import { ListDataItemProps } from './consts';
+export default class ListSeparator<T> extends PureComponent<ListDataItemProps<T>> {
+    render(): JSX.Element;
+}

package/components/list/list__separator.js

@@ -1,30 +1,21 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import styles from './list.css';
-
 export default class ListSeparator extends PureComponent {
-  static propTypes = {
+    render() {
+        const { description, isFirst, className } = this.props;
+        const classes = classNames(styles.separator, className, {
+            [styles.separator_first]: isFirst
+        });
+        return (<span className={classes}>{description}</span>);
+    }
+}
+ListSeparator.propTypes = {
     className: PropTypes.string,
     description: PropTypes.oneOfType([
-      PropTypes.element,
-      PropTypes.string
+        PropTypes.element,
+        PropTypes.string
     ]),
     isFirst: PropTypes.bool
-  };
-
-  render() {
-    const {description, isFirst, className} = this.props;
-
-    const classes = classNames(styles.separator, className, {
-      [styles.separator_first]: isFirst
-    });
-
-    return (
-      <span
-        className={classes}
-      >{description}</span>
-    );
-  }
-}
+};

package/components/list/list__title.d.ts

@@ -0,0 +1,5 @@
+import { PureComponent } from 'react';
+import { ListDataItemProps } from './consts';
+export default class ListTitle<T> extends PureComponent<ListDataItemProps<T>> {
+    render(): JSX.Element;
+}