Quick search
A quick-search component
yarn add @atlaskit/quick-search10.0.7
Patch Changes
- Updated dependencies
@atlaskit/quick-search is deprecated
@atlassian/search-dialog instead.Note: This component is designed for internal Atlassian development.
External contributors will be able to use this component but will not be able to submit issues.
This is a barebones quick-search component that can render different types of search results.
Usage
import { QuickSearch, ObjectResult, ContainerResult, ResultItemGroup } from '@atlaskit/quick-search';
// Inside a react component with proper state and stuff.. :
render() {
return (
<QuickSearch
isLoading={this.state.isLoading}
onSearchInput={({ target }) => { this.search(target.value); }}
value={this.state.query}
>
// render search results:
<ResultItemGroup title="Issues">
<ObjectResult name="Fix this and that" objectKey="JRA-123" />
<ObjectResult name="More stuff" objectKey="JRA-124" />
</ResultItemGroup>
<ResultItemGroup title="Spaces">
<ContainerResult name="Search and Smarts" />
</ResultItemGroup>
</QuickSearch>
);
}Objects
Objects
Like containers, objects have square avatars and a name and can be marked as private, however, instead of a free subText field, they display the name of their containing entity. They can optionally display an object key.
Props
children default.ReactNode = []
Search results in the form of ResultItemGroups containing Result components
default.ReactNodeisLoading boolean = false
Set search loading state
onSearchBlur function = (_) => undefined
onBlur callback for search input
event => undefinedonSearchInput function
onInput callback for search input
function event, isAutocompleted => undefinedonSearchKeyDown function = (_) => undefined
onKeyDown callback for search input
event => undefinedonSearchSubmit function = (_) => undefined
Called when the user submits the search form without selecting a result
event => undefinedplaceholder string = "Search"
Placeholder text for search input field
value string = ""
Value of the search input field
selectedResultId union
Corresponds to the resultId of the selected result
One of One of string, number, nullonSelectedResultIdChanged function
Optional way of being notified when the selected result changes due to keyboard nav
id => undefinedfirePrivateAnalyticsEvent function = (_) => undefined
Internal: injected by withAnalytics(). Fire a private analytics event
function eventName, eventData => undefinedlinkComponent default.ComponentType<any>
React component to be used for rendering links
default.ComponentTypeanyinputControls default.ReactNode
The elements to render to the right of the search input.
default.ReactNodeautocompleteText string
One string that is used to autocomplete the current search query