Query Assist

Component params

autoOpen bool=false Open suggestions popup during the initial render
caret number=query.length Initial caret position
clear bool=false Show clickable "cross" icon on the right which clears the query
className string='' Additional class for the component
popupClassName string='' Additional class for the popup
dataSource func Data source function
delay number=0 Input debounce delay
disabled bool=false Disable the component
focus bool=false Initial focus
hint string='' Hint under the suggestions list
hintOnSelection string='' Hint under the suggestions list visible when a suggestion is selected
glass bool=false Show clickable "glass" icon on the right which applies the query
loader bool=false Show loader when a data request is in process
placeholder string='' Field placeholder value
onApply func= Called when the query is applied. An object with fields caret, focus and query is passed as an argument
onChange func= Called when the query is changed. An object with fields caret and query is passed as an argument
onClear func= Called when the query is cleared. Called without arguments
onFocusChange func Called when the focus status is changed. An object with fields focus is passed as an argument
shortcuts bool=true Enable shortcut
query string='' Initial query
Data source function
Component class calls a data source function when user input happens and passes an object with fields caret, focus and query as the only argument.
The function must return an object with the fields described below. The object can be optionally wrapped in a Promise.
return object fields
caret and query should just return server values provided to data source function.
These fields allow the Query Assist component to recognise and drop earlier responses from the server.
caret (string=0) Caret from request
query (string='') Query from request
styleRanges (Array<suggestion>=) Array of styleRange objects, used to highlight the request in the input field
suggestions (Array<styleRange>) Array of suggestion objects to show.
styleRange object fields
start number Range start (in characters)
length number Range length (in characters)
style string Style of the range. Possible values: text, field_value, field_name, operator
suggestion object fields
prefix string= Suggestion option prefix
option string Suggestion option
suffix string= Suggestion option suffix
description string= Suggestion option description. Is not visible when a group is set
matchingStart number (required when matchingEnd is set) Start of the highlighted part of an option in the suggestions list (in characters)
matchingEnd number (required when matchingEnd is set) End of the highlighted part of an option in the suggestions list (in characters)
caret number Caret position after option completion (in characters)
completionStart number Where to start insertion (or replacement, when completing with the Tab key) of the completion option (in characters)
completionEnd number Where to end insertion of the completion option (in characters)
group string= Group title. Options with the same title are grouped under it
icon string= Icon URI, Data URI is possible

QueryAssist

Example

<div id="example">
</div>

<div class="example-dark" id="example-dark">
</div>

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(
    <QueryAssist
      query="test"
      placeholder="placeholder"
      popupClassName="popupClassNameTest"
      glass
      clear
      onApply={log}
      focus
      hint="lol"
      hintOnSelection="lol selected"
      popupClassName="test"
      dataSource={dataSource}
    />,
    document.getElementById('example')
  );
});

QueryAssist (no auth)

Example

<div id="query-assist">
</div>

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(
  <QueryAssist
    placeholder="placeholder"
    glass
    clear
    onApply={log}
    hint="hint"
    hintOnSelection="hint on selection"
    dataSource={dataSource}
  />,
  document.getElementById('query-assist')
);

QueryAssist (custom renderer)

Example

<div id="query-assist">
</div>

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(
<QueryAssist
  placeholder="placeholder"
  glass
  clear
  onApply={log}
  hint="hint"
  hintOnSelection="hint on selection"
  dataSource={dataSource}
  useCustomItemRender={true}
/>,
document.getElementById('query-assist')
);

QueryAssist dark theme (no auth)

Example

<div class="example-dark">
  <div id="query-assist">
  </div>
</div>

: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(
  <QueryAssist
    placeholder="placeholder"
    theme={QueryAssist.Theme.DARK}
    glass
    clear
    onApply={log}
    hint="hint"
    hintOnSelection="hint on selection"
    dataSource={dataSource}
  />,
  document.getElementById('query-assist')
);

QueryAssistWithCustomActions

Example

<div id="example">
</div>

<div class="example-dark" id="example-dark">
</div>

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 = [
  <PermissionIcon
    key="custom-action"
    size={PermissionIcon.Size.Size16}
  />,
];
auth.init().then(() => {
render(
<QueryAssist
  query="test"
  placeholder="placeholder"
  popupClassName="popupClassNameTest"
  glass
  clear
  onApply={log}
  focus
  hint="lol"
  hintOnSelection="lol selected"
  popupClassName="test"
  dataSource={dataSource}
  actions={actions}
/>,
document.getElementById('example')
);
});

Query Assist

Component params

Data source function

return object fields

`styleRange` object fields

`suggestion` object fields

QueryAssist

QueryAssist (no auth)

QueryAssist (custom renderer)

QueryAssist dark theme (no auth)

QueryAssistWithCustomActions

Query Assist

Component params

Data source function

return object fields

styleRange object fields

suggestion object fields

QueryAssist

QueryAssist (no auth)

QueryAssist (custom renderer)

QueryAssist dark theme (no auth)

QueryAssistWithCustomActions

`styleRange` object fields

`suggestion` object fields