[Summary view] [Print] [Text view]

   1  /**
   2   * WordPress dependencies.
   3   */
   4  const {
   5      apiFetch,
   6      components: {
   7          Popover,
   8      },
   9      element: {
  10          Component,
  11          Fragment,
  12          createElement,
  13      },
  14      i18n: {
  15          __,
  16      },
  17      url: {
  18          addQueryArgs,
  19      },
  20  } = wp;
  21  
  22  class AutoCompleter extends Component {
  23      constructor() {
  24          super( ...arguments );
  25  
  26          this.state = {
  27              search: '',
  28              items: [],
  29              error: '',
  30          };
  31  
  32          this.searchItemName = this.searchItemName.bind( this );
  33          this.selectItemName = this.selectItemName.bind( this );
  34      }
  35  
  36      searchItemName( value ) {
  37          const { search } = this.state;
  38          const { component, objectQueryArgs } = this.props;
  39          this.setState( { search: value } );
  40  
  41          if ( value.length < search.length ) {
  42              this.setState( { items: [] } );
  43          }
  44  
  45          let path= '/buddypress/v1/' + component;
  46          let queryArgs = {};
  47  
  48          if ( value ) {
  49              queryArgs.search = encodeURIComponent( value );
  50          }
  51  
  52          if ( objectQueryArgs ) {
  53              queryArgs = Object.assign( queryArgs, objectQueryArgs );
  54          }
  55  
  56          apiFetch( { path:  addQueryArgs( path, queryArgs ) } ).then( items => {
  57              this.setState( { items: items } );
  58          }, error => {
  59              this.setState( { error: error.message } );
  60          } );
  61      }
  62  
  63      selectItemName( event, itemID ) {
  64          const { onSelectItem } = this.props;
  65          event.preventDefault();
  66  
  67          this.setState( {
  68              search: '',
  69              items: [],
  70              error: '',
  71          } );
  72  
  73          return onSelectItem( { itemID: itemID } );
  74      }
  75  
  76      render() {
  77          const { search, items } = this.state;
  78          let { ariaLabel, placeholder, useAvatar, slugValue } = this.props;
  79          let itemsList;
  80  
  81          if ( ! ariaLabel ) {
  82              ariaLabel = __( 'Item\'s name', 'buddypress' );
  83          }
  84  
  85          if ( ! placeholder ) {
  86              placeholder = __( 'Enter Item\'s name here…', 'buddypress' );
  87          }
  88  
  89          if ( items.length ) {
  90              itemsList = items.map( ( item ) => {
  91                  return (
  92                      <button
  93                          type="button" key={ 'editor-autocompleters__item-item-' + item.id }
  94                          role="option"
  95                          aria-selected="true"
  96                          className="components-button components-autocomplete__result editor-autocompleters__user"
  97                          onClick={ ( event ) => this.selectItemName( event, item.id ) }
  98                      >
  99                          { useAvatar && (
 100                              <img key="avatar" className="editor-autocompleters__user-avatar" alt="" src={ item.avatar_urls.thumb.replaceAll( '&#038;', '&' ) } />
 101                          ) }
 102  
 103                          <span key="name" className="editor-autocompleters__user-name">{ item.name }</span>
 104  
 105                          { slugValue && null !== slugValue( item ) && (
 106                              <span key="slug" className="editor-autocompleters__user-slug">{ slugValue( item ) }</span>
 107                          ) }
 108                      </button>
 109                  );
 110              } );
 111          }
 112  
 113          return (
 114              <Fragment>
 115                  <input
 116                      type="text"
 117                      value={ search }
 118                      className="components-placeholder__input"
 119                      aria-label={ ariaLabel }
 120                      placeholder={ placeholder }
 121                      onChange={ ( event ) => this.searchItemName( event.target.value ) }
 122                  />
 123                  { 0 !== items.length &&
 124                      <Popover
 125                          className="components-autocomplete__popover"
 126                          focusOnMount={ false }
 127                          position="bottom left"
 128                      >
 129                          <div className="components-autocomplete__results">
 130                              { itemsList }
 131                          </div>
 132                      </Popover>
 133                  }
 134              </Fragment>
 135          );
 136      }
 137  }
 138  
 139  export default AutoCompleter;