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(
,
document.getElementById('list')
);
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(
,
document.getElementById('list')
);
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(
,
document.getElementById('list')
);
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(
,
document.getElementById('list')
);
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(
,
document.getElementById('list')
);
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(
,
document.getElementById('list')
);
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(
,
document.getElementById('list')
);
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 ? (
{selected && (