Alter the library to enable the column size (#156)

Add ability to change column size

Author: monwabisi-gaga

src/formBuilder/CardGeneralParameterInputs.js

@@ -60,7 +60,6 @@ export default function CardGeneralParameterInputs({
     let inputKeys = Object.keys(categoryMap).filter(
       (key) => key !== 'ref' || definitionsInSchema,
     );
-
     // Exclude hidden inputs based on mods
     if (mods) inputKeys = subtractArray(inputKeys, mods.deactivatedFormInputs);
 
@@ -243,6 +242,7 @@ export default function CardGeneralParameterInputs({
           />
         </div>
       </div>
+
       <div className='card-category-options'>
         <GeneralParameterInputs
           category={parameters.category}

src/formBuilder/FormBuilder.test.js

@@ -264,11 +264,44 @@ describe('FormBuilder', () => {
     expect(errors).toEqual([]);
   });
 
+  it('supports column size', () => {
+    const jsonSchema = {
+      $schema: 'http://json-schema.org/draft-07/schema#',
+      meta: {
+        some: 'meta information',
+      },
+    };
+
+    const uischema = {
+      newInput1: {
+        'ui:column': 4,
+      },
+      'ui:order': ['newInput1'],
+    };
+
+    const props = {
+      schema: JSON.stringify(jsonSchema),
+      uiSchema: JSON.stringify(uischema),
+      onChange: jest.fn(() => {}),
+      mods: {},
+      className: 'my-form-builder',
+    };
+
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    const wrapper = mount(<FormBuilder {...props} />, { attachTo: div });
+    const errors = wrapper
+      .find('.alert-warning')
+      .first()
+      .find('li')
+      .map((error) => error.text());
+    expect(errors).toEqual([]);
+  });
+
   it('validates additionalProperties as a valid property', () => {
     const jsonSchema = {
       $schema: `http://json-schema.org/draft-07/schema#`,
       properties: {},
-      required: [],
       additionalProperties: false,
     };
 

src/formBuilder/defaults/shortAnswerInputs.js

@@ -176,6 +176,33 @@ function CardShortAnswerParameterInputs({
         }}
         className='card-modal-select'
       />
+      <h4>
+        Column Size{' '}
+        <a
+          href='https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          <Tooltip
+            id={`${elementId}_column_size`}
+            type='help'
+            text='Set the column size of the input'
+          />
+        </a>
+      </h4>
+      <Input
+        value={parameters['ui:column'] ? parameters['ui:column'] : ''}
+        placeholder='Column size'
+        key='ui:column'
+        type='number'
+        onChange={(ev: SyntheticInputEvent<HTMLInputElement>) => {
+          onChange({
+            ...parameters,
+            'ui:column': ev.target.value,
+          });
+        }}
+        className='card-modal-text'
+      />
       <div className='card-modal-boolean'>
         <FBCheckbox
           onChangeValue={() => {

src/formBuilder/utils.js

@@ -156,6 +156,7 @@ const supportedUiParameters = new Set([
   'ui:autocomplete',
   'ui:options',
   'ui:field',
+  'ui:column',
   'items',
   'definitions',
 ]);