How to use the searchkit.block function in searchkit

To help you get started, we’ve selected a few searchkit examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github mitodl / micromasters / static / js / components / search / MultiSelectCheckboxItemList.js View on Github external
render() {
    const { mod, disabled, className } = this.props

    const bemBlocks = {
      container: block(mod).el,
      option:    block(`${mod}-option`).el
    }

    return (
      <div disabled="" data-qa="options">
        {[this.allAction(this.allItemsSelected()), ...this.itemComponentList()]}
      </div>
    )
  }
}
github CRUKorg / cruk-searchkit / src / components / hitsList / HitsList.jsx View on Github external
render() {
    const {hits, mod, className, itemComponent, additionalFields} = this.props
    const bemBlocks = {
      container: block(mod),
      item: block(`${mod}-hit`)
    }
    return (
      <section data-qa="hits">
        {map(hits, (result, index)=&gt; {
          return renderComponent(itemComponent, {
            key:result._id, result, bemBlocks, index, additionalFields
          })
        })}
      </section>
    )
  }
}
github CRUKorg / cruk-searchkit / src / components / hitsList / HitsList.jsx View on Github external
render() {
    const {hits, mod, className, itemComponent, additionalFields} = this.props
    const bemBlocks = {
      container: block(mod),
      item: block(`${mod}-hit`)
    }
    return (
      <section data-qa="hits">
        {map(hits, (result, index)=&gt; {
          return renderComponent(itemComponent, {
            key:result._id, result, bemBlocks, index, additionalFields
          })
        })}
      </section>
    )
  }
}
github CRUKorg / cruk-searchkit / src / components / ui / list / CRUKSearchkitSelect.jsx View on Github external
render() {
    const { mod, className, items, disabled, showCount, translate, countFormatter } = this.props;

    const bemBlocks = {
      container: block(mod)
    }

    let divClasses = classNames(bemBlocks.container().mix(className).state({ disabled }), 'form-group');
    const options = map(items, ({key, label, title, disabled, doc_count}, idx) =&gt; {
      var text = translate(label || title || key)
      if (showCount &amp;&amp; doc_count !== undefined) text += ` (${countFormatter(doc_count)})`;
      return <option disabled="{disabled}" value="{key}">{text}</option>;
    });

    return (
      <div>
        <select value="{this.getSelectedValue()}">
          {options}
        </select>
      </div>
    )
github mitodl / micromasters / static / js / components / search / MultiSelectCheckboxItemList.js View on Github external
render() {
    const { mod, disabled, className } = this.props

    const bemBlocks = {
      container: block(mod).el,
      option:    block(`${mod}-option`).el
    }

    return (
      <div disabled="" data-qa="options">
        {[this.allAction(this.allItemsSelected()), ...this.itemComponentList()]}
      </div>
    )
  }
}