query-assist.examples.html

<example name="QueryAssist">
  <file type="html" disable-auto-size>
    <div id="example">
    </div>

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

  <file type="js">
    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')
      );
    });
  </file>
</example>

<example name="QueryAssist (no auth)">
  <file type="html" disable-auto-size>
    <div id="query-assist">
    </div>
  </file>

  <file type="js">
    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')
    );
  </file>
</example>

<example name="QueryAssist (custom renderer)">
  <file type="html" disable-auto-size>
    <div id="query-assist">
    </div>
  </file>

  <file type="js">
    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')
    );
  </file>
</example>

<example name="QueryAssist dark theme (no auth)">
  <file type="html" disable-auto-size>
    <div class="example-dark">
      <div id="query-assist">
      </div>
    </div>
  </file>

  <file type="css">
    :global(body) {
      margin: 0;
    }

    :global(.example-dark) {
      background: #000;
      padding: 16px;
      padding-bottom: 0;
    }
  </file>

  <file type="js">
    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')
    );
  </file>
</example>

<example name="QueryAssistWithCustomActions">
  <file type="html" disable-auto-size>
    <div id="example">
    </div>

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

  <file type="js">
    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')
    );
    });
  </file>
</example>