@deviniti/jql-autocomplete-input

Jira JQL autocomplete component based on the Atlaskit

Stats

StarsIssuesVersionUpdatedCreatedSize
@deviniti/jql-autocomplete-input
2.0.22 years ago4 years agoMinified + gzip package size for @deviniti/jql-autocomplete-input in KB

Readme

#Jira JQLAutocomplete input component

Getting started

Example

import React from 'react';
import axios from 'axios';
import JQLAutocompleteInput from '@deviniti/jql-autocomplete-input/dist/JQLAutocompleteInput';


class App extends React.Component {

    state = {
        inputValue: ''
    }

    fetchByAxios(resourceUrl) {
        return axios.get(resourceUrl);
    }

    getSuggestionsRequest = (fieldName, fieldValue)=> fetchByAxios(`/rest/api/2/jql/autocompletedata/suggestions?fieldName=${fieldName}&fieldValue=${fieldValue}`);

    validationRequest = jql => fetchByAxios(`/rest/api/2/search?startAt=0&maxResults=1&validateQuery=strict&fields=summary&jql=${jql}`);

    getAutocompleteDataRequest = () => fetchByAxios('/rest/api/2/jql/autocompletedata');

    onJQLChange = (event) => {
        this.setState({
            inputValue: event.target.value
        })
    };

    render() {
        return (
            <JQLAutocompleteInput
                getAutocompleteDataRequest={this.getAutocompleteDataRequest}
                getSuggestionsRequest={this.getSuggestionsRequest}
                inputStyle="ak-field-text"
                initialValue={this.props.inputValue}
                inputId={this.props.inputId}
                label={'JQL'}
                onChange={this.onJQLChange}
                setValue={this.props.setValue}
                validationRequest={this.validationRequest}
        />
        );
    }
}

Demo

Just open demo/index.html in your browser.

Changelog

v1.0.0

  • created

1.0.8

  • readme update

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.