Make ComponentRegistry non-global

src/components/FormManager.jsx

@@ -5,7 +5,7 @@ import Wizard from './wizard/Wizard';
 import { FormUtils } from '../s-forms';
 import FormWindow from './FormWindow';
 import Card from 'react-bootstrap/Card';
-import ComponentRegistry from '../util/ComponentRegistry';
+import Question from './Question';
 
 class FormManager extends React.Component {
   getFormData = () => {
@@ -35,7 +35,7 @@ class FormManager extends React.Component {
 
   _mapQuestion(question, index) {
 
-    let component = ComponentRegistry.mapComponent(question, index);
+    let component = this.props.mapComponent(question, Question);
     return React.createElement(component, {
       key: question['@id'],
       question: question,

src/components/Question.jsx

@@ -15,7 +15,6 @@ import MediaContent from './MediaContent';
 import { CaretSquareUp, CaretSquareDown, InfoCircle } from '../styles/icons';
 import { ConfigurationContext } from '../contexts/ConfigurationContext';
 import classNames from 'classnames';
-import ComponentRegistry from '../util/ComponentRegistry';
 
 // TODO Remove once the pretty layout is tested
 const PRETTY_ANSWERABLE_LAYOUT = true;
@@ -306,7 +305,7 @@ export default class Question extends React.Component {
     for (let i = 0; i < subQuestions.length; i++) {
 
       let question = subQuestions[i];
-      let component = ComponentRegistry.mapComponent(question, i);
+      let component = this.context.mapComponent(question, Question);
 
       let element = React.createElement(component, {
         key: 'sub-question-' + i,

src/components/SForms.jsx

@@ -34,15 +34,37 @@ const SForms = forwardRef((props, ref) => {
     return props.loader || <Card className="p-3 font-italic">Loading SForms...</Card>;
   }
 
+  const _getComponentMappingFunction = (components) => {
+
+    return (question, defaultComponent) => {
+
+      if (!components) {
+        return defaultComponent;
+      }
+
+      for (let { component, mapRule } of components) {
+        if (mapRule(question)) {
+          return component;
+        }
+      }
+
+      return defaultComponent;
+    };
+  }
+
+  const _mapComponent = _getComponentMappingFunction(props.componentMapRules);
+
+
   return (
     <ConfigurationContextProvider
       components={props.components}
       componentsOptions={props.componentsOptions}
+      mapComponent={_mapComponent}
       options={props.options}
     >
       <FormGenContextProvider fetchTypeAheadValues={props.fetchTypeAheadValues}>
         <FormQuestionsProvider data={form} formQuestions={formProperties.formQuestions} isFormValid={props.isFormValid}>
-          <FormManager ref={ref} modalView={props.options && props.options.modalView} />
+          <FormManager ref={ref} modalView={props.options && props.options.modalView} mapComponent={_mapComponent} />
         </FormQuestionsProvider>
       </FormGenContextProvider>
     </ConfigurationContextProvider>
@@ -52,6 +74,7 @@ const SForms = forwardRef((props, ref) => {
 SForms.propTypes = {
   form: PropTypes.object.isRequired,
   options: PropTypes.object.isRequired,
+  componentMapRules: PropTypes.array,
   components: PropTypes.object,
   componentsOptions: PropTypes.object,
   fetchTypeAheadValues: PropTypes.func,

src/components/wizard/Wizard.jsx

@@ -7,7 +7,6 @@ import { ConfigurationContext } from '../../contexts/ConfigurationContext';
 import { FormQuestionsContext } from '../../contexts/FormQuestionsContext';
 import Utils from '../../util/Utils';
 import Constants from '../../constants/Constants';
-import ComponentRegistry from '../../util/ComponentRegistry';
 
 const findStepByQuestionId = (stepData, id) => {
   const findQuestionTraversal = (question, index) => {
@@ -29,7 +28,7 @@ const findStepByQuestionId = (stepData, id) => {
 
 const Wizard = () => {
   const formQuestionsContext = React.useContext(FormQuestionsContext);
-  const { options } = React.useContext(ConfigurationContext);
+  const { options, mapComponent } = React.useContext(ConfigurationContext);
 
   let startingStep = 0;
   if (options.startingQuestionId) {
@@ -101,13 +100,14 @@ const Wizard = () => {
 
     const step = stepData[currentStep];
 
-    let stepComponent = ComponentRegistry.mapComponent(step, currentStep, WizardStep);
+    let stepComponent = mapComponent(step, WizardStep);
     return React.createElement(stepComponent, {
       options: options,
       key: 'step' + currentStep,
       step: step,
       onNextStep: onNextStep,
       onPreviousStep: onPreviousStep,
+      mapComponent: mapComponent,
       stepIndex: currentStep,
       isFirstStep: currentStep === 0,
       isLastStep: currentStep === formQuestionsContext.getFormQuestionsData().length - 1

src/components/wizard/WizardStep.jsx

@@ -6,7 +6,6 @@ import Constants from '../../constants/Constants';
 import HelpIcon from '../HelpIcon';
 import { FormQuestionsContext } from '../../contexts/FormQuestionsContext';
 import Question from '../Question';
-import ComponentRegistry from '../../util/ComponentRegistry';
 
 
 export default class WizardStep extends React.Component {
@@ -60,7 +59,7 @@ export default class WizardStep extends React.Component {
 
     const categoryClass = Question._getQuestionCategoryClass(this.props.step);
 
-    let questionComponent = ComponentRegistry.mapComponent(this.props.step, 0);
+    let questionComponent = this.props.mapComponent(this.props.step, Question);
     let questionElement = React.createElement(questionComponent, {
       question: this.props.step,
       onChange: this.onChange,
@@ -96,6 +95,7 @@ WizardStep.propTypes = {
   step: PropTypes.object.isRequired,
   onNextStep: PropTypes.func,
   onPreviousStep: PropTypes.func,
+  mapComponent: PropTypes.func,
   stepIndex: PropTypes.number.isRequired,
   isFirstStep: PropTypes.bool,
   isLastStep: PropTypes.bool

src/contexts/ConfigurationContext.js

@@ -33,7 +33,8 @@ const ConfigurationContextProvider = ({ children, ...props }) => {
     () => ({
       inputComponent: (props.components && props.components.inputComponent) || defaultProps.components.inputComponent,
       componentsOptions: { ...defaultProps.componentsOptions, ...props.componentsOptions },
-      options: { ...defaultProps.options, ...props.options }
+      options: { ...defaultProps.options, ...props.options },
+      mapComponent: props.mapComponent
     }),
     [props]
   );
@@ -44,7 +45,7 @@ const ConfigurationContextProvider = ({ children, ...props }) => {
 ConfigurationContextProvider.propTypes = {
   children: PropTypes.element.isRequired,
   components: PropTypes.object,
-  componentsOptions: PropTypes.object,
+  mapComponent: PropTypes.func,
   options: PropTypes.object
 };
 

src/s-forms.js

@@ -7,7 +7,6 @@ import FormUtils from './util/FormUtils';
 import Question from './components/Question';
 import { ConfigurationContext } from './contexts/ConfigurationContext';
 import Answer from './components/Answer';
-import ComponentRegistry from './util/ComponentRegistry';
 import HelpIcon from './components/HelpIcon';
 import WizardStep from './components/wizard/WizardStep';
 
@@ -22,6 +21,5 @@ export {
   Answer,
   HelpIcon,
   ConfigurationContext,
-  ComponentRegistry,
   WizardStep
 };

types/s-forms.d.ts

@@ -189,13 +189,6 @@ export class FormUtils {
   static testCondition(condition): boolean;
 }
 
-export class ComponentRegistry {
-
-  static registerComponent(component, mapRule): void;
-
-  static mapComponent(question, index, def): any;
-}
-
 declare const SForms: React.ForwardRefExoticComponent<SFormsProps>;
 
 export default SForms;