_renderSetting()

in modules/monochrome/src/form/form.js [61:124]

• 57 lines of code
• 14 McCabe index (conditional complexity)

  _renderSetting({settingName, setting, value, isEnabled = true, level}) {
    const {theme, style} = this.props;
    const {enabled = true, visible = true, children} = setting;
    let isVisible;

    if (typeof enabled === 'function') {
      isEnabled = isEnabled && enabled(this.props.values);
    } else {
      isEnabled = isEnabled && Boolean(enabled);
    }

    if (typeof visible === 'function') {
      isVisible = visible(this.props.values);
    } else {
      isVisible = Boolean(visible);
    }

    if (!isVisible) {
      return null;
    }

    const collapsed =
      typeof this.state.collapsed[settingName] !== 'undefined'
        ? this.state.collapsed[settingName]
        : false;

    const input = (
      <Input
        key={settingName}
        {...setting}
        label={setting.title || settingName}
        name={settingName}
        value={value}
        theme={theme}
        style={style}
        level={level}
        isEnabled={isEnabled}
        onChange={this._onChange}
      />
    );

    if (!children) {
      return input;
    }

    return (
      <div key={settingName} style={SETTING_STYLES}>
        {setting.collapsible && (
          <Expander
            theme={theme}
            userStyle={style.expander}
            onClick={() => this.toggleCollapsed({settingName, collapsed})}
            isExpanded={!collapsed}
          >
            {collapsed
              ? style.iconCollapsed || <CollapsedIcon />
              : style.iconExpanded || <ExpandedIcon />}
          </Expander>
        )}
        {input}
        {!collapsed && this._renderSettings(children, {isEnabled, level: level + 1})}
      </div>
    );
  }