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' }] }); render( , document.getElementById('query-assist') );

{{ ctrl.query || 'no value' }}

form is dirty = {{ testForm.$dirty }}

{{ query }}

 import hubConfig from '@ring-ui/docs/components/hub-config'; import angular from 'angular'; import authNg from '@jetbrains/ring-ui/components/auth-ng/auth-ng'; import { registerComponents, reactNg } from '@jetbrains/ring-ui/components/react-ng/react-ng'; import QueryAssist from '@jetbrains/ring-ui/components/query-assist/query-assist'; registerComponents({QueryAssist}); angular.module('test', [reactNg, authNg]).config(function (authProvider) { authProvider.config(hubConfig); }).controller('testCtrl', function ($http, $scope) { var ctrl = this; ctrl.queries = []; ctrl.query = 'query'; ctrl.focus = true; ctrl.disabled = true; ctrl.save = function (query) { ctrl.queries.unshift(query); ctrl.query = null; $scope.$apply(); $scope.testForm.$setPristine(true); }; function updateScope(name, value) { if (ctrl[name] !== value) { ctrl[name] = value; if (!$scope.$root.$$phase) { $scope.$apply(); } } } ctrl.change = function (query) { console.log('ctrl.change:: Query = ', query); }; ctrl.focusChange = function (focus) { updateScope('focus', focus); }; ctrl.source = function (query, caret, omitSuggestions) { var config = { params: { fields: 'query,caret,styleRanges' + (omitSuggestions ? '' : ',suggestions'), query: query, caret: caret } }; return $http.get(hubConfig.serverUri + '/api/rest/users/queryAssist', config). then(function (data) { return data.data; }); } });
Type something to init QueryAssist

{{ query }}

 import hubConfig from '@ring-ui/docs/components/hub-config'; import angular from 'angular'; import authNg from '@jetbrains/ring-ui/components/auth-ng/auth-ng'; import shortcutsNg from '@jetbrains/ring-ui/components/shortcuts-ng/shortcuts-ng'; import { registerComponents, reactNg } from '@jetbrains/ring-ui/components/react-ng/react-ng'; import QueryAssist from '@jetbrains/ring-ui/components/query-assist/query-assist'; registerComponents({QueryAssist}); angular.module('test', [reactNg, authNg, shortcutsNg]). config(function (authProvider) { authProvider.config(hubConfig); }). config(function (shortcutsProvider) { shortcutsProvider. mode({ id: 'ring-shortcuts', shortcuts: [ { key: 'down', action: 'next' }, { key: 'up', action: 'prev' }, { key: 'esc', action: 'main' } ] }). mode({ id: 'test', shortcuts: [ { key: 'any-character', action: 'init' }, { key: 'esc', action: 'destroy' } ] }); }). controller('testCtrl', function ($http, $scope) { var ctrl = this; ctrl.queries = []; ctrl.query = ''; ctrl.focus = true; ctrl.keys = { 'init': e => { if (!ctrl.query) { e.preventDefault(); ctrl.query = String.fromCharCode(e.charCode); } }, 'destroy': () => {ctrl.query = ''} } ctrl.save = function (query) { ctrl.queries.unshift(query); $scope.$apply(); }; function updateScope(name, value) { if (ctrl[name] !== value) { ctrl[name] = value; if (!$scope.$root.$$phase) { $scope.$apply(); } } } ctrl.focusChange = function (focus) { updateScope('focus', focus); }; ctrl.source = function (query, caret, omitSuggestions) { var config = { params: { fields: 'query,caret,styleRanges' + (omitSuggestions ? '' : ',suggestions'), query: query, caret: caret } }; return $http.get(hubConfig.serverUri + '/api/rest/users/queryAssist', config). then(function (data) { return data.data; }); } });
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); }; let focus = true; document.getElementById('focusToggler').addEventListener('click', function() { focus = !focus; renderComponent(); }); 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' }] }); function renderComponent() { console.log(focus); render( , document.getElementById('query-assist') ); } renderComponent();