UIConceptSearch

Presentation component searching against concepts for example and present selected items

Since: 7.0.0 (6.4.0)

NameTypeDefaultDescription

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

""search-bold""

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

Last updated