UIConceptSearch
Presentation component searching against concepts for example and present selected items
Since: 7.0.0 (6.4.0)
Example
import {UIConceptSearch} from 'writer'
render($$) {
const el = $$('div')
return el.append(
$$(UIConceptSearch, {
listItems: this.state.listItems,
loading: this.state.loading,
selectedItems: this.state.selectedItems,
label: 'Creator',
addButtonLabel: 'Add creator',
searchPlaceholder: 'Search for author',
icon: 'author-bold',
onAddClick: async () => {
this.extendState({
loading: true,
listItems: [],
query: '*'
})
const result = await ConceptService.searchForConceptSuggestions(
'x-im/author',
this.state.query,
)
this.extendState({
loading: false,
listItems: result
})
},
onInputChange: async (value) => {
this.extendState({
loading: true,
listItems: [],
query: value
})
const result = await ConceptService.searchForConceptSuggestions(
'x-im/author',
this.state.query,
)
this.extendState({
listItems: result,
loading: false,
})
},
onItemSelect: (authorItem) => {
this.extendState({
selectedItems: [...this.state.selectedItems, authorItem]
})
},
onItemCreate: () => {
const newAuthor = {
ConceptName: this.state.query,
name: this.state.query,
uuid: NilUUID.getNilUUID()
}
this.extendState({
selectedItems: [
...this.state.selectedItems,
newAuthor
]
})
},
onItemRemove: (item) => {
this.extendState({
selectedItems: this.state.selectedItems.filter(author => {
if (NilUUID.isNilUUID(item.uuid)) {
return author.name !== item.name
}
return author.uuid !== item.uuid
})
})
}
})
)
}
Last updated