Create Custom Components Issue

[rafmachado]

• Hosting type
  • [x] Form.io
• formio/react version:
  • Version: 5.2.0
• Frontend framework:
  • React: 16.8.2

Steps to Reproduce

1. Create a custom component extending the behaviour of the Radio Form io Component. Code example:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import ReactComponent from "@formio/react/lib/components/ReactComponent";
import { Formio } from "formiojs";
import settingsForm from "./CustomRadioButton.settingsForm";
import ToggleButton from 'react-bootstrap/ToggleButton'

const Radio = Formio.Components.components.radio;

export default class CustomRadioButton extends Radio {
  /**
   * This function tells the form builder about your component. It's name, icon and what group it should be in.
   *
   * @returns {{title: string, icon: string, group: string, documentation: string, weight: number, schema: *}}
   */
  static get builderInfo() {
    return {
      title: "Custom Radio Button",
      icon: "square",
      group: "basic",
      documentation: "",
      weight: -10,
      schema: CustomRadioButton.schema(),
    };
  }

  /**
   * This function is the default settings for the component. At a minimum you want to set the type to the registered
   * type of your component (i.e. when you call Components.setComponent('type', MyComponent) these types should match.
   *
   * @param sources
   * @returns {*}
   */
  static schema() {
    return ReactComponent.schema({
      type: "radiobutton",
      label: "Default Radio Label",
    });
  }

  static editForm = settingsForm;

  /**
   * Override this function to insert your custom component.
   *
   * @param element
   * @param ref - callback ref
   */
  attachReact(element, ref) {
    return ReactDOM.render(
      <ToggleButton 
        type='radio'
        component={this.component} // These are the component settings if you want to use them to render the component.
        value={this.dataValue} // The starting value of the component.
        onChange={this.updateValue} // The onChange event to call when the value changes.

      />,
      element
    );
  }

  detachReact(element) {
    console.log("detachReact", element);
    if (element) {
      ReactDOM.unmountComponentAtNode(element);
    }
  }
}

Expected behavior

This code should extend the behaviour of the Formio and the css classes of our ToggleButton Component (Custom Component)

Observed behavior

We have the behaviour of Radio Button, but the css classes were not applied

@randallknutson

[jeriah-formio]

We're currently addressing a backlog of GitHub issues. Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!