import React from 'react'; import {render} from 'react-dom'; import hubConfig from '@ring-ui/docs/components/hub-config'; import QueryAssist from '@jetbrains/ring-ui/components/query-assist/query-assist'; import Auth from '@jetbrains/ring-ui/components/auth/auth'; import HTTP from '@jetbrains/ring-ui/components/http/http'; const log = obj => { const div = document.createElement('div'); div.innerHTML = JSON.stringify(obj); document.getElementById('example').appendChild(div); }; const auth = new Auth(hubConfig); const http = new HTTP(auth, auth.getAPIPath()); const dataSource = props => { const params = { query: { ...props, fields: 'query,caret,styleRanges' + (props.omitSuggestions ? '' : ',suggestions') } } return http.get('users/queryAssist', params); } auth.init().then(() => { render( , document.getElementById('example') ); });
import React from 'react'; import {render} from 'react-dom'; import QueryAssist from '@jetbrains/ring-ui/components/query-assist/query-assist'; const log = obj => { const div = document.createElement('div'); div.innerHTML = JSON.stringify(obj); document.getElementById('query-assist').appendChild(div); }; const dataSource = ({query, caret}) => ({ query, caret, styleRanges: [ {start: 0, length: 1, style: 'text'}, {start: 1, length: 1, style: 'field_value'}, {start: 2, length: 1, style: 'field_name'}, {start: 3, length: 1, style: 'operator'} ], suggestions: [{ prefix: 'login: ', option: 'test', suffix: ' ', description: '1', matchingStart: 0, matchingEnd: query.length, caret: 2, completionStart: 0, completionEnd: query.length, group: 'Logins' }, { prefix: 'login: ', option: 'test.1', suffix: ' ', description: '2', matchingStart: 0, matchingEnd: query.length, caret: 2, completionStart: 0, completionEnd: query.length, group: 'Logins' }, { prefix: 'name: ', option: 'another', suffix: ' ', description: '2', matchingStart: 0, matchingEnd: query.length, caret: 2, completionStart: 0, completionEnd: query.length, group: 'Names' }] }); render( , document.getElementById('query-assist') );
import React from 'react'; import {render} from 'react-dom'; import QueryAssist from '@jetbrains/ring-ui/components/query-assist/query-assist'; import List from '@jetbrains/ring-ui/components/list/list'; const log = obj => { const div = document.createElement('div'); div.innerHTML = JSON.stringify(obj); document.getElementById('query-assist').appendChild(div); }; const template = item => ( React.createElement( 'span', null, `My name is ${item.description}, my ${item.prefix} is ${item.option}` ) ); const dataSource = ({query, caret}) => ({ query, caret, styleRanges: [ {start: 0, length: 1, style: 'text'}, {start: 1, length: 1, style: 'field_value'}, {start: 2, length: 1, style: 'field_name'}, {start: 3, length: 1, style: 'operator'} ], suggestions: [{ prefix: 'login:', option: 'John.Abrams', description: 'John Abrams', group: 'Logins', }, { prefix: 'login:', option: 'lenni', description: 'Lenni Joy', group: 'Names', }].map(i => { i.rgItemType = List.ListProps.Type.CUSTOM i.template = template(i); i.data = i; return i; }) }); render( , document.getElementById('query-assist') );
:global(body) { margin: 0; } :global(.example-dark) { background: #000; padding: 16px; padding-bottom: 0; } import React from 'react'; import {render} from 'react-dom'; import QueryAssist from '@jetbrains/ring-ui/components/query-assist/query-assist'; const log = obj => { const div = document.createElement('div'); div.innerHTML = JSON.stringify(obj); document.getElementById('query-assist').appendChild(div); }; const dataSource = async ({query, caret}) => { return { query, caret, styleRanges: [ {start: 0, length: 1, style: 'text'}, {start: 1, length: 1, style: 'field_value'}, {start: 2, length: 1, style: 'field_name'}, {start: 3, length: 1, style: 'operator'} ], suggestions: [{ prefix: 'login: ', option: 'test', suffix: ' ', description: '1', matchingStart: 0, matchingEnd: query.length, caret: 2, completionStart: 0, completionEnd: query.length, group: 'logins' }, { prefix: 'login: ', option: 'test.1', suffix: ' ', description: '2', matchingStart: 0, matchingEnd: query.length, caret: 2, completionStart: 0, completionEnd: query.length, group: 'logins' }] } } render( , document.getElementById('query-assist') );
import React from 'react'; import {render} from 'react-dom'; import hubConfig from '@ring-ui/docs/components/hub-config'; import { PermissionIcon } from '@jetbrains/ring-ui/components/icon'; import QueryAssist from '@jetbrains/ring-ui/components/query-assist/query-assist'; import Auth from '@jetbrains/ring-ui/components/auth/auth'; import HTTP from '@jetbrains/ring-ui/components/http/http'; const log = obj => { const div = document.createElement('div'); div.innerHTML = JSON.stringify(obj); document.getElementById('example').appendChild(div); }; const auth = new Auth(hubConfig); const http = new HTTP(auth, auth.getAPIPath()); const dataSource = props => { const params = { query: { ...props, fields: 'query,caret,styleRanges' + (props.omitSuggestions ? '' : ',suggestions') } } return http.get('users/queryAssist', params); } const actions = [ , ]; auth.init().then(() => { render( , document.getElementById('example') ); });