test
body {
padding: 8px;
width: 50%;
}
:global(.demo) {
margin: 16px 0;
}
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
const data = [
{'label': 'One', 'key': '1', 'type': 'user'},
{'label': 'Group', 'key': '2', 'description': 'Long descriptions', '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(
,
document.getElementById('demo'));
}
renderSelect();
document.getElementById('clear').addEventListener('click', function () {
data.selected = null;
renderSelect();
});
:global(.demo) {
margin: 16px 0;
}
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
const data = [
{'label': 'One', 'key': '1', 'type': 'user'},
{'label': 'Group', 'key': '2', 'description': 'Long descriptions', '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(
,
document.getElementById('demo'));
}
renderSelect();
document.getElementById('clear').addEventListener('click', function () {
data.selected = null;
renderSelect();
});
test
body {
padding: 8px;
width: 50%;
}
:global(.demo) {
margin: 16px 0;
}
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
const data = [
{'label': 'One', 'key': '1', 'type': 'user'},
{'label': 'Group', 'key': '2', 'type': 'user'},
{'label': 'Three', 'key': '3', 'type': 'user'},
];
function renderSelect() {
render(
[
'Selected option is ',
],
document.getElementById('demo')
);
}
renderSelect();
document.getElementById('clear').addEventListener('click', function () {
data.selected = null;
renderSelect();
});
test
body {
padding: 8px;
padding-left: 64px;
width: 50%;
}
:global(.demo) {
margin: 16px 0;
}
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
import Popup from '@jetbrains/ring-ui/components/popup/popup';
const data = [
{'label': 'One', 'key': '1', 'type': 'user'},
{'label': 'Group', 'key': '2', 'type': 'user'},
{'label': 'Three', 'key': '3', 'type': 'user'},
];
function renderSelect() {
render(
[
'Selected option is ',
],
document.getElementById('demo')
);
}
renderSelect();
document.getElementById('clear').addEventListener('click', function () {
data.selected = null;
renderSelect();
});
test
body {
padding: 8px;
width: 50%;
}
:global(.demo) {
margin: 16px 0;
}
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
const data = [
{'label': 'One', 'key': '1', 'type': 'user'},
{'label': 'Group', 'key': '2', 'description': 'Long descriptions', '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(
,
document.getElementById('demo'));
}
renderSelect();
document.getElementById('clear').addEventListener('click', function () {
data.selected = null;
renderSelect();
});
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
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';
const alwaysTrue = () => true;
class UserList extends Component {
state = {
users: [],
request: null
};
auth = new Auth(hubConfig);
source = new Source(this.auth, {
searchMax: 8
});
componentDidMount() {
this.auth.init();
this.loadData();
}
loadData = async query => {
const request = this.source.getForList(query);
this.setState({request});
const users = await request;
// only the latest request is relevant
if (this.state.request === request) {
this.setState({
users,
request: null
});
}
}
render() {
return (
);
}
}
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(
body {
padding: 8px;
width: 50%;
}
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
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';
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(
,
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 = [];
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';
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
});
}
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'));
body {
padding: 8px;
width: 50%;
}
import React from 'react';
import {render} from 'react-dom';
import Select from '@jetbrains/ring-ui/components/select/select';
const elementsNum = 1000;
const selectedIndex = parseInt(elementsNum / 2);
const dataset = [];
for (let i = 0; i < elementsNum; i++) {
dataset.push({
label: 'element ' + i,
key: i,
type: 'user'
});
}
render(