render()

in src/js/components/TransformationSettings.react.js [101:206]
105 lines of code
4 McCabe index (conditional complexity)

  render() {
    const audienceNetworkDiv = this.renderAudienceNetworkDiv();
    const adsRawHtmlDiv = this.renderAdsRawHtmlDiv();

    return (
      <div>
        <Accordion.Title
          index={this.props.accordionIndex}
          active={this.props.accordionActive}
          onClick={this.props.onAccordionTitleClick}
        >
          <label>
            <Icon name="dropdown" />
            Settings
          </label>
        </Accordion.Title>
        <Accordion.Content active={this.props.accordionActive}>
          <div className="settings">
            <div className="settings-fields">
              <div className="general-settings field-line">
                <label>
                  <Icon name="edit" />
                  General
                </label>
                <label className="sub-label" htmlFor="styleName">
                  <span>{this.props.settings.styleName ? '✔' : '•'}</span>&nbsp;
                  Style Name
                </label>
                <div className="field">
                  <input
                    type="text"
                    name="styleName"
                    placeholder="default"
                    onChange={this.handleStyleNameChanged}
                    value={this.props.settings.styleName}
                  />
                </div>
              </div>
              <div className="analytics-settings field-line">
                <label>
                  <Icon name="bar chart" />
                  Analytics
                </label>
                <label className="sub-label" htmlFor="pixelId">
                  <span>
                    {this.props.settings.analyticsSettings.fbPixelId
                      ? '✔'
                      : '•'}
                  </span>
                  &nbsp; Pixel ID
                </label>
                <div className="field">
                  <input
                    type="text"
                    name="pixelId"
                    placeholder="123456"
                    onChange={this.handleFbPixelIdChanged}
                    value={this.props.settings.analyticsSettings.fbPixelId}
                  />
                </div>
                <label className="sub-label" htmlFor="analyticsRawHtml">
                  <span>
                    {this.props.settings.analyticsSettings.rawHtml ? '✔' : '•'}
                  </span>
                  &nbsp; Raw HTML
                </label>
                <div className="field">
                  <textarea
                    name="analyticsRawHtml"
                    placeholder="<script>...</script>"
                    onChange={this.handleAnalyticsRawHtmlChanged}
                    rows="4"
                    value={this.props.settings.analyticsSettings.rawHtml}
                  />
                </div>
              </div>
              <div className="ads-settigns field-line">
                <label>
                  <Icon name="money" />
                  Ads
                </label>
                <label className="sub-label" htmlFor="adsType">
                  Type
                </label>
                <div className="field">
                  <select
                    name="adsType"
                    onChange={this.handleAdsTypeChanged}
                    value={this.props.settings.adsSettings.type}
                  >
                    <option value={AdsTypes.NONE}>None</option>
                    <option value={AdsTypes.AUDIENCE_NETWORK}>
                      Audience Network
                    </option>
                    <option value={AdsTypes.RAW_HTML}>Other / Raw HTML</option>
                  </select>
                </div>
                {audienceNetworkDiv}
                {adsRawHtmlDiv}
              </div>
            </div>
          </div>
        </Accordion.Content>
      </div>
    );
  }