render()

in src/js/components/PropertyPicker.react.js [51:140]
85 lines of code
13 McCabe index (conditional complexity)

  render() {
    let property = this.props.property;
    let attributes = null;

    // Look for the attributes for the current selector on the global attribute store
    if (property.selector) {
      attributes = this.props.editor.elementAttributes.get(property.selector);
    }

    const dateTimeFormatPicker = property.definition.supportedTypes.includes(
      RulePropertyTypes.DATETIME
    ) ? (
        <DateTimeFormatPicker {...this.props} />
      ) : null;

    const attributePicker =
      attributes != null || property.attribute != null ? (
        <div className="attributes">
          <label className="sub-label">Attribute</label>
          <select
            value={property.attribute || property.definition.defaultAttribute}
            onChange={this.handleAttributeChange}
          >
            {property.attribute != null &&
            (attributes == null || !attributes.has(property.attribute)) ? (
                <option
                  value={property.attribute}
                  data-attribute-value={property.attribute}
                  key={property.attribute}
                >
                  {property.attribute}
                </option>
              ) : null}
            {attributes != null
              ? attributes
                .valueSeq()
                .filter(attribute =>
                  this.props.property.definition.supportedTypes.includes(
                    attribute.type
                  )
                )
                .map(attribute => (
                  <option
                    value={attribute.name}
                    data-attribute-value={attribute.value}
                    key={attribute.name}
                  >
                    {attribute.name}: "{attribute.value.trim()}"
                  </option>
                ))
              : null}
          </select>
          {dateTimeFormatPicker}
        </div>
      ) : null;

    const propertyClass =
      'property-' + this.props.property.definition.name.replace('.', '-');
    const labelDisplayName = this.props.property.definition.displayName;
    return (
      <div
        className={classNames({
          'field-line': true,
          'single-element-found':
            this.props.editor.elementCounts.get(this.props.property.selector) ==
            1,
          'multiple-elements-found':
            (this.props.editor.elementCounts.get(
              this.props.property.selector
            ) || 0) > 1,
          active: this.props.editor.focusedField == this.props.property,
          multiple: !this.props.property.definition.unique,
          required: this.props.property.definition.required,
          valid: RulePropertyUtils.isValid(this.props.property),
          [propertyClass]: true,
        })}
      >
        {RulePropertyUtils.isValid(this.props.property) ? (
          <LabelIconValid>{labelDisplayName}</LabelIconValid>
        ) : this.props.property.definition.required ? (
          <LabelIconRequired>{labelDisplayName}</LabelIconRequired>
        ) : (
          <LabelIconOptional>{labelDisplayName}</LabelIconOptional>
        )}{' '}
        <label className="sub-label selector-label">Selector</label>
        <SelectorPicker {...this.props} field={this.props.property} />
        {attributePicker}
      </div>
    );
  }