fix(components): add 'no results text' adjustments

Invalid search results now always appears. Add an 'No results found', that appears when user type
some search that haven't on options list

bugfix/no-results-found-texts

sandbox/blipSelect.js

@@ -3,14 +3,18 @@ const amazingSelect = document.getElementById('select')
 const selectInstance = new BlipSelect({
   onSelectOption: ($event) => console.log($event),
   placeholderIcon: '<img src="https://png.pngtree.com/svg/20170418/work_155602.png" />',
+  mode: 'autocomplete',
   descriptionPosition: 'bottom',
   canAddOptions: {
     text: 'Criar organização',
     alwaysEnabled: true,
   },
   clearAfterAdd: false,
+  noResultsText: 'Nothing here',
+  noResultsFoundText: 'No results found',
   onAddOption: ({ $event: { value, label, element } }) => console.log(value, label, element),
 })
+
 const select = selectInstance.render({
   options: [
     {

src/components/blipSelect/CreatableOptionsList.js

@@ -4,16 +4,23 @@ import { EventEmitter } from '@lib/eventEmitter'
 import { renderEmptyOption } from '../shared'
 
 export class CreatebleOptionsList extends Component {
+  $defaults = {
+    noResultsText: '',
+    noResultsFoundText: '',
+  }
+
   constructor(options) {
     super()
 
-    this.options = options
+    this.options = {
+      ...this.$defaults,
+      ...options,
+    }
 
     this.props = {
       options: [],
       newOption: '',
       addOptionText: '',
-      emptyMessage: '',
       alwaysEnabled: false,
       blockNewEntries: false,
       OptionCreator: undefined,
@@ -29,6 +36,16 @@ export class CreatebleOptionsList extends Component {
       ...props,
     }
 
+    const chooseEmptyOptionsMessage = () => {
+      if (this.props.options.length === 0 && (this.props.newOption === '' || this.props.newOption === undefined)) {
+        return this.options.noResultsText
+      } else if (this.props.options.length === 0 && this.newOption !== '') {
+        return this.options.noResultsFoundText
+      }
+
+      return ''
+    }
+
     const renderOption = optionProps => {
       const { OptionCreator } = this.props
 
@@ -42,7 +59,8 @@ export class CreatebleOptionsList extends Component {
     return html`
       <ul>
         ${this.props.options.map(renderOption)}
-        ${this.shouldRenderEmptyOption() ? renderEmptyOption(this.props.emptyMessage) : this._renderAddOption(this.props.newOption)}
+        ${this.shouldRenderEmptyOption() ? renderEmptyOption(chooseEmptyOptionsMessage()) : ''}
+        ${this._renderAddOption(this.props.newOption)}
       </ul>
     `
   }
@@ -72,16 +90,15 @@ export class CreatebleOptionsList extends Component {
    * Check if component should render empty option
    */
   shouldRenderEmptyOption() {
-    return this.props.options.length === 0 &&
-      this.props.blockNewEntries
+    return this.props.options.length === 0
   }
 
   /**
    * Render add new option
    */
   _renderAddOption(newOption) {
     const addOptionHtml = this.options.addOptionText
-      ? html`<small class="blip-prompt-add-option">${this.options.addOptionText}</small>`
+      ? html`<span class="blip-prompt-add-option">${this.options.addOptionText}</span>`
       : ''
 
     return this._canAddOption(newOption)

src/components/blipSelect/index.js

@@ -39,6 +39,7 @@ export class BlipSelect extends Component {
     descriptionPosition: 'right', // right || bottom
     mode: 'select',
     noResultsText: 'No results found',
+    noResultsFoundText: 'No results found',
     clearAfterAdd: true, // Clear input after add new option
     onBeforeOpenSelect: () => { },
     onAfterOpenSelect: () => { },
@@ -329,6 +330,8 @@ export class BlipSelect extends Component {
       onAddOption: this._handleAddOption.bind(this),
       addOptionText: this.configOptions.canAddOptions.text,
       alwaysEnabled: this.configOptions.canAddOptions.alwaysEnabled,
+      noResultsText: this.configOptions.noResultsText,
+      noResultsFoundText: this.configOptions.noResultsFoundText,
     })
   }