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')
);
});