render()

in src/search/facets/components/Facet.tsx [62:137]

• 70 lines of code
• 11 McCabe index (conditional complexity)

  render() {
    const {
      attributeName,
      disableAdd,
      facetConfiguration,
      values,
    } = this.props;
    const { expanded } = this.state;

    const expandable =
      values.length > facetConfiguration.facetsToShowWhenUncollapsed;

    const hasSomeValuesSelected = !_.isEmpty(
      this.props.selectedFacets?.getStringSelectionsOf(attributeName)
    );

    return (
      <div className="facet">
        <div className="facet-title">
          {attributeNameToFacetTitle(attributeName)}&nbsp;
          {hasSomeValuesSelected && (
            <span onClick={this.onClickClearButton} className="action-link">
              {i18n.CLEAR}
            </span>
          )}
        </div>
        <div className="facet-value-container">
          {values.map((value, idx) => {
            if (!value.DocumentAttributeValue) {
              return null;
            }

            const show =
              expanded || idx < facetConfiguration.facetsToShowWhenUncollapsed;

            const isSelected = this.props.selectedFacets
              ? this.props.selectedFacets.isSelected(
                  attributeName,
                  value.DocumentAttributeValue
                )
              : false;

            if (show || isSelected) {
              return (
                <FacetCheckbox
                  key={idx}
                  attributeName={attributeName}
                  value={value.DocumentAttributeValue}
                  valueLabel={value.ValueLabel}
                  count={value.Count}
                  selected={isSelected}
                  disableAdd={disableAdd}
                  onSelectionChange={this.props.onSelectionChange}
                  facetConfiguration={facetConfiguration}
                />
              );
            } else {
              return null;
            }
          })}
        </div>
        <div className="facet-footer">
          {expandable && expanded && (
            <span className="action-link" onClick={this.showLess}>
              {i18n.SHOW_LESS}
            </span>
          )}
          {expandable && !expanded && (
            <span className="action-link" onClick={this.showMore}>
              {i18n.SHOW_MORE}
            </span>
          )}
        </div>
      </div>
    );
  }