renderAddUserForm()

in addons/addon-base-ui/packages/base-ui/src/parts/users/AddUser.js [52:159]
99 lines of code
5 McCabe index (conditional complexity)

  renderAddUserForm() {
    const processing = this.formProcessing;
    const fields = this.addUserFormFields;
    const toEditableInput = (attributeName, type = 'text') => {
      const handleChange = action(event => {
        event.preventDefault();
        this.user[attributeName] = event.target.value;
      });
      return (
        <div className="ui focus input">
          <input
            type={type}
            defaultValue={this.user[attributeName]}
            placeholder={fields[attributeName].placeholder || ''}
            onChange={handleChange}
          />
        </div>
      );
    };
    const toRadioGroupInput = ({
      attributeName,
      radioOptions,
      defaultSelected,
      isBooleanInput = true,
      trueValue = 'yes',
    }) => {
      const handleChange = () =>
        action((event, { value }) => {
          if (isBooleanInput) {
            this.user[attributeName] = value === trueValue;
          } else {
            this.user[attributeName] = value;
          }
          event.stopPropagation();
        });
      let count = 0;
      return (
        <span>
          {_.map(radioOptions, radioOption => {
            return (
              <Radio
                key={++count}
                className="ml1"
                name={attributeName}
                checked={defaultSelected === radioOption.value}
                value={radioOption.value}
                label={radioOption.label}
                onChange={handleChange()}
              />
            );
          })}
        </span>
      );
    };

    return (
      <Segment basic className="ui fluid form">
        <Dimmer active={processing} inverted>
          <Loader inverted>Checking</Loader>
        </Dimmer>

        {this.renderField('username', toEditableInput('username'))}
        <div className="mb4" />

        {this.renderField('password', toEditableInput('password', 'password'))}
        <div className="mb4" />

        {this.renderField('email', toEditableInput('email', 'email'))}
        <div className="mb4" />

        {this.renderField('firstName', toEditableInput('firstName'))}
        <div className="mb4" />

        {this.renderField('lastName', toEditableInput('lastName'))}
        <div className="mb4" />

        {this.renderField(
          'isAdmin',
          toRadioGroupInput({
            attributeName: 'isAdmin',
            defaultSelected: this.user.isAdmin ? 'yes' : 'no',
            isBooleanInput: true,
            radioOptions: [
              { value: 'yes', label: 'Yes' },
              { value: 'no', label: 'No' },
            ],
          }),
        )}
        <div className="mb4" />

        {this.renderField(
          'status',
          toRadioGroupInput({
            attributeName: 'status',
            defaultSelected: this.user.status || 'active',
            isBooleanInput: false,
            radioOptions: [
              { value: 'active', label: 'Active' },
              { value: 'inactive', label: 'Inactive' },
            ],
          }),
        )}
        <div className="mb4" />

        {this.renderButtons()}
      </Segment>
    );
  }