List

Displays a list of items.

List

Example

<div id='list'></div>

import React from 'react';
import {render} from 'react-dom';
import List from '@jetbrains/ring-ui/components/list/list';

var listData = [];
for (var i = 0; i < 1000; i++) {
  listData.push({
    label: 'Item ' + i,
    rgItemType: List.ListProps.Type.ITEM
  });
}

render(
  <List
    maxHeight={400}
    data={listData}
    shortcuts
    compact
    onSelect={console.log.bind(console)}
  />,
  document.getElementById('list')
);

List with a hint below

Example

<div id='list'></div>

import React from 'react';
import {render} from 'react-dom';
import List from '@jetbrains/ring-ui/components/list/list';

var listData = [
  {'label': 'One', 'rgItemType': List.ListProps.Type.ITEM},
  {'label': 'Two', 'rgItemType': List.ListProps.Type.ITEM},
  {'label': 'Active as default', 'rgItemType': List.ListProps.Type.ITEM},
  {'label': 'Four', 'rgItemType': List.ListProps.Type.ITEM},
  {
    'label': 'Five (disabled)',
    'rgItemType': List.ListProps.Type.ITEM,
    disabled: true
  }
];

render(
  <List
    data={listData}
    shortcuts
    onSelect={console.log.bind(console)}
    activeIndex={2}
    hint="Hint about the list"
  />,
  document.getElementById('list')
);

List #2

Example

<div id='list'></div>

import React from 'react';
import {render} from 'react-dom';
import List from '@jetbrains/ring-ui/components/list/list';

var listData = [
{'label': 'One', href: 'http://example.com', 'rgItemType': List.ListProps.Type.LINK},
  {'label': 'Two', 'rgItemType': List.ListProps.Type.ITEM},
  {'label': 'Active as default', 'rgItemType': List.ListProps.Type.ITEM},
  {'label': 'Four', 'rgItemType': List.ListProps.Type.ITEM},
  {'label': 'Five', 'rgItemType': List.ListProps.Type.ITEM}
];

render(
  <List
    data={listData}
    activeIndex={2}
    shortcuts
    onSelect={console.log.bind(console)}
  />,
  document.getElementById('list')
);

List #3

Example

<div id='list'></div>

import React from 'react';
import {render} from 'react-dom';
import List from '@jetbrains/ring-ui/components/list/list';

var listData = [
  {
    'rgItemType': List.ListProps.Type.SEPARATOR,
    'description': 'First separator'
  },
  {'label': 'Item 1', 'rgItemType': List.ListProps.Type.ITEM},
  {
    'rgItemType': List.ListProps.Type.SEPARATOR,
    'description': 'Second sep'
  },
  {'label': 'Item 2', 'rgItemType': List.ListProps.Type.ITEM},
  {
    'rgItemType': List.ListProps.Type.TITLE,
    'label': 'Group title',
    'description': 'With description'
  },
  {
    'label': 'Item 3',
    'rgItemType': List.ListProps.Type.ITEM,
    'description': 'Foo bar'
  },
  {
    'label': 'Item 4',
    'rgItemType': List.ListProps.Type.ITEM,
    'description': 'Item description'
  },
  {
    'label': 'Item 5',
    'rgItemType': List.ListProps.Type.ITEM,
    'description': 'Item description',
    details: 'Additional details line'
  },
  {
    'label': 'Item 6',
    'rgItemType': List.ListProps.Type.ITEM,
    'description': 'Item description',
    details: 'Additional details line, a long long text. And once again, additional details line, a long long text. And once again, additional details line, a long long text. And once again, additional details line, a long long text. And once again, additional details line, a long long text.'
  },
];

render(
  <List
    data={listData}
    shortcuts
    onSelect={console.log.bind(console)}
  />,
  document.getElementById('list')
);

List with item icons

Example

<div id='list' style="width: 300px;"></div>

import React from 'react';
import {render} from 'react-dom';
import List from '@jetbrains/ring-ui/components/list/list';
import {WarningIcon} from '@jetbrains/ring-ui/components/icon';

var listData = [
  {
    label: 'Some item',
    description: 'Long long long long long long long long long long long long long long long description',
    key: '1',
    'rgItemType': List.ListProps.Type.ITEM,
    glyph: WarningIcon,
    rightGlyph: WarningIcon
  },
  {
    label: 'Some item with a long long label, much longer than description',
    key: '2',
    'rgItemType': List.ListProps.Type.ITEM,
    description: 'Test item',
    icon: 'http://icons.iconarchive.com/icons/osiris/world-flags/16/00-cctld-ac-icon.png'
  },
  {
    label: 'Some item with a long long label',
    key: '3',
    'rgItemType': List.ListProps.Type.ITEM,
    description: 'Long long long long long long long long long long long long long long long description',
    checkbox: true
  },
  //Link doesn't support icons
  {
    label: 'Some item',
    key: '4',
    'rgItemType': List.ListProps.Type.LINK,
    description: 'Test item',
    icon: 'http://www.thg.ru/forum/images/icons/icon6.gif'
  },
  {
    label: 'Some item',
    key: '5',
    href: 'http://localhost:9999',
    description: 'Test item',
    icon: 'http://www.thg.ru/forum/images/icons/icon6.gif'
  }
];

render(
  <List
    data={listData}
    shortcuts
    onSelect={console.log.bind(console)}
  />,
  document.getElementById('list')
);

List should support the deprecated item.type parameter

Example

<div id='list'></div>

import React from 'react';
import {render} from 'react-dom';
import List from '@jetbrains/ring-ui/components/list/list';

var listData = [
  {'label': 'One', 'type': List.ListProps.Type.ITEM},
  {'label': 'Two', 'type': List.ListProps.Type.ITEM},
  {'label': 'Three', 'type': List.ListProps.Type.ITEM},
  {'label': 'Four', 'type': List.ListProps.Type.ITEM},
  {'label': 'Five', 'type': List.ListProps.Type.ITEM}
];

render(
  <List
    data={listData}
    shortcuts
    onSelect={console.log.bind(console)}
  />,
  document.getElementById('list')
);

List with custom items

Example

<div id='list'></div>

import React from 'react';
import {render} from 'react-dom';
import List from '@jetbrains/ring-ui/components/list/list';

var listData = [
  {
    key: '1',
    rgItemType: List.ListProps.Type.CUSTOM,
    template: React.createElement('span', {}, 'custom item')
  },
  {
    key: '2',
    rgItemType: List.ListProps.Type.CUSTOM,
    template: React.createElement('span', {}, 'custom item (disabled)'),
    disabled: true
  },
  {
    key: '3',
    rgItemType: List.ListProps.Type.CUSTOM,
    template: React.createElement('span', {}, 'custom item 3')
  },
];

render(
  <List
    data={listData}
    shortcuts
    onSelect={console.log.bind(console)}
  />,
  document.getElementById('list')
);

List of users

Example

<div id='list'></div>

import {render} from 'react-dom';
import List from '@jetbrains/ring-ui/components/list/list';
import Code from '@jetbrains/ring-ui/components/code/code';
import ContentLayout, {Sidebar} from '@jetbrains/ring-ui/components/content-layout/content-layout';
import Loader from '@jetbrains/ring-ui/components/loader-inline/loader-inline'
import React, {Component} from 'react';
import Source from '@jetbrains/ring-ui/components/list/list__users-groups-source';
import hubConfig from '@ring-ui/docs/components/hub-config';
import Auth from '@jetbrains/ring-ui/components/auth/auth';

class UserList extends Component {
  state = {
    listData: null,
    selected: null
  };
  auth = new Auth(hubConfig);
  source = new Source(this.auth);

  componentDidMount() {
    this.loadUsers();
  }

  async loadUsers() {
    await this.auth.init();
    const listData = await this.source.getForList('ring', Source.Filter.USERS);
    this.setState({listData});
  }

  handleSelect = selected => this.setState({selected});

  render() {
    const {listData, selected} = this.state;
    return listData ? (
      <ContentLayout>
        <Sidebar>
          <List
            className="list"
            data={this.state.listData}
            shortcuts
            onSelect={this.handleSelect}
          />
        </Sidebar>
        {selected && (
          <Code
            className="selected"
            language="json"
            code={JSON.stringify(selected, null, 2)}
          />
        )}
      </ContentLayout>
    ) : <Loader />;
  }
}

render(<UserList/>, document.getElementById('list'));