UIConceptSearch

Presentation component searching against concepts for example and present selected items

Since: 7.0.0 (6.4.0)

Name	Type	Default	Description
listItems	array		Required - Array of items to present in search list
selectedItems	array		Required - Array of item selected
label	string		Label for the input/form
addButtonLabel	string		Required - Add button label
icon	string		Optional icon to use if avatar doesn't exists, if omitted presets per concept type will be used
addButtonIcon	string	"\"add-circle-outline\""	Add button label
searchPlaceholder	string		Required - Placeholder text for input
width	string		Full if you want it to take up full width
loading	boolean	false	Tells if the component is loading items
working	boolean	false	Tells if the component is working on adding/updating or removing items
disabled	boolean	false	Set to false to hide the search button/field
onItemAdd	boolean	false	If it should be allowed to add a concept (only authors) with a nil uuid
onAddClick	function		Required - "Add button" click callback
onInputChange	function		Required - Input change callback
onItemSelect	function		Required - Item select callback
onItemEdit	function		Required - Selected item is clicked callback
onItemRemove	function		Required - Item remove callback
onItemAdd	function		Item add callback, used to add concept with a nil uuid (authors only)
onItemCreate	function		Item create callback, used to create an actual concept item in repository

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
                  })
              })
          }
        })
    )
}