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, avatar: avatarUrl } ]; const data = { data: tags, selected: [tags[0]] }; 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; 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(); });
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 ( , document.getElementById('demo')); } renderSelect(); document.getElementById('clear').addEventListener('click', function () { data.selected = null; renderSelect(); });
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( , document.getElementById('demo') );
import React from 'react'; import {render} from 'react-dom'; import Select from '@jetbrains/ring-ui/components/select/select'; render( , document.getElementById('demo2') ); 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(, document.getElementById('demo') );
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( console.log('Add', value)} data={data} onSelect={selected => console.log('onSelect, selected item:', selected)} />, document.getElementById('demo'));
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( console.log('onSelect, selected item:', selected)} onDeselect={deselected => console.log('onDeselect, deselected item:', deselected)} onChange={selection => { console.log('onChange, selection:', selection); const items = selection.map(item => item.label); document.getElementById('multipleCustomView').innerHTML = items.join(', '); }} />, 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, 'description': 'Description for the item lalalalala ' + 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 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(