jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
104 lines (103 loc) • 2.82 kB
TypeScript
/**
* @file index.tsx
*
* @fileoverview Renders a multi element select component using the downshift library.
*/
import React, { FocusEvent } from 'react';
import { SelectItem } from 'src/models/forms';
interface Props {
/**
* The id for this select. It will be used for accessibility purposes.
*/
id?: string;
/**
* Placeholder. The text displayed inside the input of the select box.
*
* @default "Search something here..."
*/
placeholder?: string;
/**
* The values selected in the select widget.
*
* @default []
*/
values: string[];
/**
* All possible items (the options) that are available inside the widget.
*
* @default []
*/
items: SelectItem[];
/**
* The label for the widget.
*/
label?: string;
/**
* If the element is required. Will map to the "required" HTML5 property.
*/
required?: boolean;
/**
* The event to fire when something changes in the widget.
*/
onChange?(items: string[]): any;
/**
* The event to fire when something changes in the widget.
*/
onInputChange?(items: string): any;
/**
* The event to fire when the user clicks outside the widget.
*/
onBlur?(event: FocusEvent<HTMLInputElement>): void;
}
interface State {
input: string;
selectedItems: string[];
}
/**
* A multiple autotocomplet widget for when the user needs to select multiple elements in a select-style element.
*/
export declare class MultipleAutocomplete extends React.Component<Props, State> {
static defaultProps: {
placeholder: string;
items: any[];
};
state: {
input: string;
selectedItems: any[];
};
/**
* handles the key down event which will show all items in the dropdown.
*
* @param {any} evt
* The event of key down.
*/
handleKeyDown: (evt: any) => void;
/**
* Handles an input change when we type something in the input box.
*
* Will set the internal state with what was typed.
*
* @param {any} evt
* The event.
*/
handleInputChange: (evt: any) => void;
/**
* Handles a change event on the dropdwon element.
*
* When we actually choose something in the dropdown this will set the onChange event (fire external)
* and will also clear the input.
*
* @param {SelectItem} item
* The item that was just selected.
*/
handleChange: (item: SelectItem) => void;
/**
* Based on the key of a item return its full item with name as well.
*
* @param {string} key
* The key to get the item from.
*/
getItemNameFormSelectedItem(key: string): string;
render(): JSX.Element;
}
export default MultipleAutocomplete;