How to use the react-dom-factories.em function in react-dom-factories

To help you get started, we’ve selected a few react-dom-factories 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 researchspace / researchspace / researchspace / web / src / main / components / search / facet / RelationFacet.ts View on Github external
const showNoFacetValuesWarning = facetValues.length === 0
      && !this.props.data.viewState.values.loading;

    const showTooManyFacetValuesWarning = this.props.config.facetValuesThreshold > 0
      && facetValues.length > this.props.config.facetValuesThreshold;

   if (this.props.data.viewState.values.error) {
      return D.div(
        {className: 'facet__relation__values'},
        D.em({}, 'An error has occurred! Probably, there are too many facet values for the selected relation. Please, try to refine your search.')
      );
    } else if (showNoFacetValuesWarning) {
      return D.div(
        {className: 'facet__relation__values'},
        D.em({}, 'Values not found...')
      );
    } else {
      return D.div(
        {className: 'facet__relation__values'},
        showTooManyFacetValuesWarning ? D.em(
          {className: 'facet__relation__warning'},
          `Only first ${this.props.config.facetValuesThreshold} facet values are shown! Please refine your search `
        ) : null,
        createElement(ClearableInput, {
          type: 'text',
          className: 'facet__relation__values__filter',
          placeholder: `Search ${nlp.noun(rangeLabel).pluralize()}...`,
          value: filterString,
          onClear: () => this.setState({filterString: undefined}),
          onChange: (event) => {
            const value = (event.target as any).value;
github researchspace / researchspace / researchspace / web / src / main / components / search / facet / RelationFacet.ts View on Github external
private renderFacetValues(facetValues: Array, kind: 'resource' | 'literal') {
    const rangeLabel = this.props.relation.hasRange.label;
    const filterString = this.state.filterString ? this.state.filterString : '';

    const showNoFacetValuesWarning = facetValues.length === 0
      && !this.props.data.viewState.values.loading;

    const showTooManyFacetValuesWarning = this.props.config.facetValuesThreshold > 0
      && facetValues.length > this.props.config.facetValuesThreshold;

   if (this.props.data.viewState.values.error) {
      return D.div(
        {className: 'facet__relation__values'},
        D.em({}, 'An error has occurred! Probably, there are too many facet values for the selected relation. Please, try to refine your search.')
      );
    } else if (showNoFacetValuesWarning) {
      return D.div(
        {className: 'facet__relation__values'},
        D.em({}, 'Values not found...')
      );
    } else {
      return D.div(
        {className: 'facet__relation__values'},
        showTooManyFacetValuesWarning ? D.em(
          {className: 'facet__relation__warning'},
          `Only first ${this.props.config.facetValuesThreshold} facet values are shown! Please refine your search `
        ) : null,
        createElement(ClearableInput, {
          type: 'text',
          className: 'facet__relation__values__filter',
github researchspace / researchspace / researchspace / web / src / main / components / search / facet / Facet.ts View on Github external
private renderLoadingIndicator = () => {
    const loading = this.props.data.relations.some(rel => _.isUndefined(rel.available));
    return loading ? [
      D.div({}, D.em({}, 'Searching for relations ...')),
      D.div({}, createElement(Spinner)),
    ] : [];
  }
github researchspace / researchspace / researchspace / web / src / main / components / search / facet / RelationFacet.ts View on Github external
&& facetValues.length > this.props.config.facetValuesThreshold;

   if (this.props.data.viewState.values.error) {
      return D.div(
        {className: 'facet__relation__values'},
        D.em({}, 'An error has occurred! Probably, there are too many facet values for the selected relation. Please, try to refine your search.')
      );
    } else if (showNoFacetValuesWarning) {
      return D.div(
        {className: 'facet__relation__values'},
        D.em({}, 'Values not found...')
      );
    } else {
      return D.div(
        {className: 'facet__relation__values'},
        showTooManyFacetValuesWarning ? D.em(
          {className: 'facet__relation__warning'},
          `Only first ${this.props.config.facetValuesThreshold} facet values are shown! Please refine your search `
        ) : null,
        createElement(ClearableInput, {
          type: 'text',
          className: 'facet__relation__values__filter',
          placeholder: `Search ${nlp.noun(rangeLabel).pluralize()}...`,
          value: filterString,
          onClear: () => this.setState({filterString: undefined}),
          onChange: (event) => {
            const value = (event.target as any).value;
            this.setState({filterString: value});
          },
        }),
        Infinite(
          {