@jetbrains/ring-ui/components/list/list.examples.html

<example name="List">
  <file type="html">
    <div id='list'></div>
  </file>

  <file type="js">
    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')
    );
  </file>
</example>

<example name="List with a hint below">
  <file type="html">
    <div id='list'></div>
  </file>

  <file type="js">
    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')
    );
  </file>
</example>

<example name="List #2">
  <file type="html">
    <div id='list'></div>
  </file>

  <file type="js">
    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')
    );
  </file>
</example>

<example name="List #3">
  <file type="html">
    <div id='list'></div>
  </file>

  <file type="js">
    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')
    );
  </file>
</example>

<example name="List with item icons">
  <file type="html">
    <div id='list' style="width: 300px;"></div>
  </file>

  <file type="js">
    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')
    );
  </file>
</example>

<example name="List should support the deprecated item.type parameter">
  <file type="html">
    <div id='list'></div>
  </file>

  <file type="js">
    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')
    );
  </file>
</example>

<example name="List with custom items">
  <file type="html">
    <div id='list'></div>
  </file>
  <file type="js">
    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')
    );
  </file>
</example>

<example name="List of users">
  <file type="html">
    <div id='list'></div>
  </file>
  <file type="js">
    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'));
  </file>
</example>