render()

in src/js/components/RuleList.react.js [125:221]

• 93 lines of code
• 1 McCabe index (conditional complexity)

  render() {
    return (
      <div className="rule-list">
        <FileTools {...this.props} />
        <Accordion fluid styled>
          <Accordion.Title
            index={0}
            active={this.state.activeAccordionIndex === 0}
            onClick={this.handleAccordionTitleClick}
          >
            <label>
              <Icon name="dropdown" />
              Template
            </label>
          </Accordion.Title>
          <Accordion.Content active={this.state.activeAccordionIndex === 0}>
            <div className="rule-filters">
              <label>
                <Icon name="filter" />
                Filter Rules:
              </label>
              <Dropdown
                multiple
                labeled
                fluid
                selection
                closeOnChange={true}
                options={Object.values(RuleCategories).map(
                  (category: RuleCategory) => ({
                    text: category,
                    value: category,
                    icon: getLabelIcon(category),
                  })
                )}
                renderLabel={item => ({
                  content: item.text,
                  icon: item.icon,
                })}
                text="Choose one or more filters"
                value={this.props.editor.categories.toArray()}
                onChange={this.handleChangeFilters}
              />
            </div>
            <label>
              <Icon name="list" />
              Elements:
            </label>
            <select
              className="rule-selector"
              onChange={this.handleAddRule}
              value=""
            >
              <option value="" disabled={true}>
                + Add a new element...
              </option>
              <optgroup label="-----------------------------------" />
              {Object.values(RuleCategories).map((category: RuleCategory) => (
                <optgroup key={category} label={category}>
                  {this.props.ruleDefinitions
                    .sortBy(defintion => defintion.displayName)
                    .valueSeq()
                    .filter(definition => definition.category == category)
                    .map(ruleDefinition => (
                      <option
                        key={ruleDefinition.name}
                        value={ruleDefinition.name}
                        disabled={
                          !this.props.editor.categories.contains(
                            ruleDefinition.category
                          )
                        }
                      >
                        {ruleDefinition.displayName}
                      </option>
                    ))}
                </optgroup>
              ))}
            </select>
            <div className="scrollable" ref="scrollable">
              <SortableList
                {...this.props}
                pressDelay={200}
                items={this.props.rules.valueSeq()}
                onSortEnd={this.handleSortEnd}
              />
            </div>
          </Accordion.Content>
          <TransformationSettings
            {...this.props}
            accordionActive={this.state.activeAccordionIndex === 1}
            accordionIndex={1}
            onAccordionTitleClick={this.handleAccordionTitleClick}
          />
        </Accordion>
      </div>
    );
  }