Allow ui:column to be configured for sections.

Author: Sabantu

src/formBuilder/CardModal.js

@@ -1,19 +1,19 @@
 // @flow
 
+import type { Node } from 'react';
 import * as React from 'react';
+import { createUseStyles } from 'react-jss';
 import {
-  Modal,
-  ModalHeader,
   Button,
+  Input,
+  Modal,
   ModalBody,
   ModalFooter,
-  Input,
+  ModalHeader,
 } from 'reactstrap';
-import { createUseStyles } from 'react-jss';
 import DependencyField from './dependencies/DependencyField';
-import type { Node } from 'react';
-import type { Parameters } from './types';
 import Tooltip from './Tooltip';
+import type { Parameters } from './types';
 
 const useStyles = createUseStyles({
   cardModal: {
@@ -64,7 +64,6 @@ export default function CardModal({
   React.useEffect(() => {
     setComponentProps(componentProps);
   }, [componentProps]);
-
   return (
     <Modal isOpen={isOpen} data-test='card-modal' className={classes.cardModal}>
       <ModalHeader className='card-modal-header'>
@@ -99,15 +98,17 @@ export default function CardModal({
           </h4>
           <Input
             value={
-              componentProps['ui:column'] ? componentProps['ui:column'] : ''
+              componentPropsState['ui:column']
+                ? componentPropsState['ui:column']
+                : ''
             }
             placeholder='Column size'
             key='ui:column'
             type='number'
             min={0}
             onChange={(ev: SyntheticInputEvent<HTMLInputElement>) => {
-              onChange({
-                ...componentProps,
+              setComponentProps({
+                ...componentPropsState,
                 'ui:column': ev.target.value,
               });
             }}

src/formBuilder/Section.js

@@ -1,40 +1,39 @@
 // @flow
-import React, { useState } from 'react';
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
-import Select from 'react-select';
+import {
+  faArrowDown,
+  faArrowUp,
+  faPencilAlt,
+  faTrash,
+} from '@fortawesome/free-solid-svg-icons';
+import type { Node } from 'react';
+import React from 'react';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { createUseStyles } from 'react-jss';
+import Select from 'react-select';
 import {
   Alert,
+  FormFeedback,
+  FormGroup,
   Input,
   UncontrolledTooltip,
-  FormGroup,
-  FormFeedback,
 } from 'reactstrap';
-import {
-  faArrowUp,
-  faArrowDown,
-  faPencilAlt,
-  faTrash,
-} from '@fortawesome/free-solid-svg-icons';
+import Add from './Add';
+import Card from './Card';
+import CardModal from './CardModal';
 import FBCheckbox from './checkbox/FBCheckbox';
 import Collapse from './Collapse/Collapse';
-import CardModal from './CardModal';
 import { CardDefaultParameterInputs } from './defaults/defaultInputs';
+import FontAwesomeIcon from './FontAwesomeIcon';
 import Tooltip from './Tooltip';
-import Add from './Add';
-import Card from './Card';
 import {
-  checkForUnsupportedFeatures,
-  generateElementComponentsFromSchemas,
-  countElementsFromSchema,
   addCardObj,
   addSectionObj,
+  checkForUnsupportedFeatures,
+  countElementsFromSchema,
+  generateElementComponentsFromSchemas,
+  getRandomId,
   onDragEnd,
 } from './utils';
-import FontAwesomeIcon from './FontAwesomeIcon';
-import { getRandomId } from './utils';
-import type { Node } from 'react';
-import type { FormInput, Mods } from './types';
 
 const useStyles = createUseStyles({
   sectionContainer: {
@@ -506,11 +505,17 @@ export default function Section({
             name: keyName,
             schema,
             type: 'object',
+            'ui:column': uischema['ui:column'] ?? '',
           }}
           isOpen={modalOpen}
           onClose={() => setModalOpen(false)}
           onChange={(newComponentProps: { [string]: any }) => {
             onDependentsChange(newComponentProps.dependents);
+
+            onChange(schema, {
+              ...uischema,
+              'ui:column': newComponentProps['ui:column'],
+            });
           }}
           TypeSpecificParameters={CardDefaultParameterInputs}
         />