body {
padding: 8px;
width: 50%;
}
import React from 'react';
import {render} from 'react-dom';
import hubConfig from '@ring-ui/docs/components/hub-config';
import Select from '@jetbrains/ring-ui/components/select/select';
import '@jetbrains/ring-ui/components/input-size/input-size.scss';
import {WarningIcon} from '@jetbrains/ring-ui/components/icon';
const props = {
multiple: true,
filter: {
placeholder: 'Search'
},
tags: {
reset: {
separator: true,
label: 'Reset the list',
glyph: WarningIcon
}
}
};
const avatarUrl = `${hubConfig.serverUri}/api/rest/avatar/default?username=blue`;
const tags = [
{'label': 'One', 'key': '1', 'type': 'user', readOnly: true},
{'label': 'Two', 'key': '2', 'type': 'user', readOnly: true},
{'label': 'Three', 'key': '3', 'type': 'user'},
{
'label': 'With icon',
key: 4,
icon: 'http://flagpedia.net/data/flags/mini/de.png'
},
{
'label': 'With avatar',
key: 5,
icon: avatarUrl,
avatar: avatarUrl
}
];
const data = {
data: tags,
selected: [tags[0]]
};
render(, document.getElementById('demo'));
test
body {
padding: 8px;
width: 50%;
}
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
import '@jetbrains/ring-ui/components/input-size/input-size.scss';
const data = [
{'label': 'One', 'key': '1', 'type': 'user'},
{'label': 'Group', 'key': '2', 'type': 'user'},
{'label': 'Three', 'key': '3', 'type': 'user'},
{
'label': 'With icon',
key: 4,
icon: 'http://flagpedia.net/data/flags/mini/de.png'
}
];
function renderSelect() {
render(
test
body {
padding: 8px;
width: 50%;
}
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
import '@jetbrains/ring-ui/components/input-size/input-size.scss';
const data = [
{'label': 'One', 'key': '1', 'type': 'user'},
{'label': 'Group', 'key': '2', 'type': 'user'},
{'label': 'Three', 'key': '3', 'type': 'user'},
{
'label': 'With icon',
key: 4,
icon: 'http://flagpedia.net/data/flags/mini/de.png'
}
];
function renderSelect() {
render(
body {
padding: 8px;
width: 50%;
}
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
import '@jetbrains/ring-ui/components/input-size/input-size.scss';
const elementsNum = 100000;
const selectedIndex = parseInt(elementsNum / 2);
const dataset = [];
for (let i = 0; i < elementsNum; i++) {
dataset.push({'label': 'element ' + i, 'key': i, 'type': 'user'});
}
render(
body {
padding: 8px;
width: 50%;
}
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
import '@jetbrains/ring-ui/components/input-size/input-size.scss';
const deFlag = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAUCAIAAACMMcMmAAAAKklEQVRIx2NgGAWjgAbAh/aI4S7t0agdI9COzx00Rwz/z9Ecjdox8uwAACkGSkKIaGlAAAAAAElFTkSuQmCC';
const ruFlag = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAYAAACaq43EAAAAOUlEQVR42u3TUQ0AIAwD0aIGt5OFBtx0mCBNljsD7+uWXwoEDPwPrvKJwJINDDwLvtqZnSwZGHgU3Kx2NIuI4wdUAAAAAElFTkSuQmCC';
const icons = [deFlag, ruFlag, undefined];
const elementsNum = 5;
const dataset = [];
for (let i = 0; i < elementsNum; i++) {
dataset.push({
'label': 'element ' + i,
'key': i,
description: 'description ' + i,
icon: icons[i % 3]
});
}
render(
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
render(
,
document.getElementById('demo1')
);
render(
body {
padding: 8px;
width: 50%;
}
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
const data = [];
for (let i = 0; i < 20; i++) {
data.push({'label': 'Item ' + i, 'key': i});
}
render(
body {
padding: 8px;
width: 50%;
}
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
const data = [];
for (let i = 0; i < 20; i++) {
data.push({'label': 'Item ' + i, 'key': i});
}
render(, document.getElementById('demo'));
body {
padding: 8px;
width: 50%;
}
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
const data = [
{'label': 'One', 'key': '1'},
{'label': 'Two', 'key': '2', disabled: true},
{'label': 'Two One', 'key': '2.1', level: 1},
{'label': 'Two Two', 'key': '2.2', level: 1},
{'label': 'Three', 'key': '3'}
];
render(
body {
padding: 8px;
width: 50%;
}
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
const data = [
{'label': 'One', 'key': '1'},
{'label': 'Group', 'key': '2'},
{'label': 'Three', 'key': '3'}
];
render(
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
import '@jetbrains/ring-ui/components/input-size/input-size.scss';
const data = [];
for (let i = 0; i < 100; i++) {
data.push({
'label': 'Item long long long long long long long long label ' + i,
'key': i
});
}
render(
body {
padding: 8px;
width: 50%;
}
:global(.label) {
border-radius: 3px;
color: #669ECC;
background-color: #E5F4FF;
padding-left: 8px;
margin: 2px 0;
}
body {
padding: 8px;
width: 50%;
}
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
import List from '@jetbrains/ring-ui/components/list/list';
import '@jetbrains/ring-ui/components/input-size/input-size.scss';
const data = [];
for (let i = 0; i < 100; i++) {
const label = `Label ${i}`;
data.push({
key: label,
label,
template: {label},
rgItemType: List.ListProps.Type.CUSTOM
});
}
render(
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
const data = [];
for (let i = 0; i < 10; i++) {
data.push({'label': 'Item ' + i, 'key': i});
}
render(
body {
padding: 8px;
width: 50%;
}
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
render(
body {
padding: 8px;
width: 50%;
}
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
const data = [];
for (let i = 0; i < 20; i++) {
data.push({
'label': 'Item ' + i,
'description': 'Description for the item lalalalala ' + i,
'key': i
});
}
const select = render(
body {
padding: 8px;
width: 50%;
}
body {
padding: 8px;
width: 50%;
}
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
import List from '@jetbrains/ring-ui/components/list/list';
import '@jetbrains/ring-ui/components/input-size/input-size.scss';
const data = (new Array(1000)).join(',').split(',').map((item, index) => {
return {
label: 'Label ' + index,
key: index,
rgItemType: index % 10 ? List.ListProps.Type.ITEM : List.ListProps.Type.TITLE
}
});
render(, document.getElementById('demo'));