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.factory({
maxHeight: 400,
data: listData,
shortcuts: true,
onSelect: console.log.bind(console)
}), document.getElementById('list'));
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.factory({
data: listData,
shortcuts: true,
onSelect: console.log.bind(console),
activeIndex: 2,
hint: 'Hint about the list'
}), document.getElementById('list'));
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', 'rgItemType': List.ListProps.Type.ITEM}
];
render(List.factory({
data: listData,
activeIndex: 2,
shortcuts: true,
onSelect: console.log.bind(console),
}), document.getElementById('list'));
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.factory({
data: listData,
shortcuts: true,
onSelect: console.log.bind(console)
}), document.getElementById('list'));
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.factory({
data: listData,
shortcuts: true,
onSelect: console.log.bind(console)
}), document.getElementById('list'));
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.factory({
data: listData,
shortcuts: true,
onSelect: console.log.bind(console)
}), document.getElementById('list'));
import {render} from 'react-dom';
import List from '@jetbrains/ring-ui/components/list/list';
import React from 'react';
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.factory({
data: listData,
shortcuts: true,
onSelect: console.log.bind(console)
}), document.getElementById('list'));