Alter the RJSFB library to allow the setting of ui:placeholder elements (#155)

Alter the RJSFB library to allow the setting of ui:placeholder elements

Author: cnxumalo

flow-libdef/@ginkgo-bioworks/react-json-schema-form-builder_v2.x.x/test_react-json-schema-form-builder_v2.x.x.js

@@ -93,7 +93,7 @@ describe('@ginkgo-bioworks/react-json-schema-form-builder', () => {
         objectNameLabel: 'alternative object name label',
         displayNameLabel: 'alternative display name label',
         descriptionLabel: 'alternative description label',
-        inputTypeLabel: 'alternative input type lablel',
+        inputTypeLabel: 'alternative input type label',
       },
       showFormHead: false,
       deactivatedFormInputs: ['shortAnswer'],

src/formBuilder/CardGeneralParameterInputs.js

@@ -174,18 +174,20 @@ export default function CardGeneralParameterInputs({
               type='help'
             />
           </h5>
-          <Input
-            value={descriptionState || ''}
-            placeholder='Description'
-            type='text'
-            onChange={(ev: SyntheticInputEvent<HTMLInputElement>) =>
-              setDescriptionState(ev.target.value)
-            }
-            onBlur={(ev: SyntheticInputEvent<HTMLInputElement>) => {
-              onChange({ ...parameters, description: ev.target.value });
-            }}
-            className='card-text'
-          />
+          <FormGroup>
+            <Input
+              value={descriptionState || ''}
+              placeholder='Description'
+              type='text'
+              onChange={(ev: SyntheticInputEvent<HTMLInputElement>) =>
+                setDescriptionState(ev.target.value)
+              }
+              onBlur={(ev: SyntheticInputEvent<HTMLInputElement>) => {
+                onChange({ ...parameters, description: ev.target.value });
+              }}
+              className='card-text'
+            />
+          </FormGroup>
         </div>
         <div
           className={classnames('card-entry', {

src/formBuilder/FormBuilder.test.js

@@ -323,4 +323,50 @@ describe('FormBuilder', () => {
       .map((error) => error.text());
     expect(errors).toEqual([]);
   });
+
+  it('should support placeholder in the UI schema', () => {
+    const jsonSchema = {
+      $schema: 'http://json-schema.org/draft-07/schema#',
+      type: 'object',
+      properties: {
+        input1: {
+          $ref: '#/definitions/name',
+          title: 'First Name',
+          description: 'Please enter your first name',
+        },
+        input2: {
+          title: 'Last Name',
+          type: 'string',
+        },
+      },
+    };
+
+    const uischema = {
+      input1: {
+        'ui:placeholder': 'Reference Placeholder',
+      },
+      input2: {
+        'ui:placeholder': 'ShortAnswer Placeholder',
+      },
+      'ui:order': ['input1', 'input2'],
+    };
+
+    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([]);
+  });
 });

src/formBuilder/defaults/defaultFormInputs.js

@@ -4,10 +4,12 @@ import longAnswerInputs from './longAnswerInputs';
 import numberInputs from './numberInputs';
 import arrayInputs from './arrayInputs';
 import defaultInputs from './defaultInputs';
+import referenceInputs from './referenceInputs';
 import type { FormInput } from '../types';
 
 const DEFAULT_FORM_INPUTS = ({
   ...defaultInputs,
+  ...referenceInputs,
   ...shortAnswerInputs,
   ...longAnswerInputs,
   ...numberInputs,

src/formBuilder/defaults/defaultInputs.js

@@ -177,34 +177,6 @@ function MultipleChoice({
   );
 }
 
-function RefChoice({
-  parameters,
-  onChange,
-}: {
-  parameters: Parameters,
-  onChange: (newParams: Parameters) => void,
-}) {
-  return (
-    <div className='card-select'>
-      <Select
-        value={{
-          value: parameters.$ref,
-          label: parameters.$ref,
-        }}
-        placeholder='Reference'
-        options={Object.keys(parameters.definitionData || {}).map((key) => ({
-          value: `#/definitions/${key}`,
-          label: `#/definitions/${key}`,
-        }))}
-        onChange={(val: any) => {
-          onChange({ ...parameters, $ref: val.value });
-        }}
-        className='card-select'
-      />
-    </div>
-  );
-}
-
 const defaultInputs: { [string]: FormInput } = {
   dateTime: {
     displayName: 'Date-Time',
@@ -267,24 +239,6 @@ const defaultInputs: { [string]: FormInput } = {
     cardBody: Checkbox,
     modalBody: CardDefaultParameterInputs,
   },
-  ref: {
-    displayName: 'Reference',
-    matchIf: [
-      {
-        types: ['null'],
-        $ref: true,
-      },
-    ],
-    defaultDataSchema: {
-      $ref: '',
-      title: '',
-      description: '',
-    },
-    defaultUiSchema: {},
-    type: 'string',
-    cardBody: RefChoice,
-    modalBody: CardDefaultParameterInputs,
-  },
   radio: {
     displayName: 'Radio',
     matchIf: [

src/formBuilder/defaults/longAnswerInputs.js

@@ -1,12 +1,12 @@
 // @flow
 
 import React, { useState } from 'react';
-import Select from 'react-select';
 import { Input } from 'reactstrap';
 import FBCheckbox from '../checkbox/FBCheckbox';
 import Tooltip from '../Tooltip';
 import { getRandomId } from '../utils';
 import type { Parameters, FormInput } from '../types';
+import { PlaceholderInput } from '../inputs/PlaceholderInput';
 
 // specify the inputs required for a string type object
 function CardLongAnswerParameterInputs({
@@ -70,6 +70,7 @@ function CardLongAnswerParameterInputs({
         }}
         className='card-modal-text'
       />
+      <PlaceholderInput parameters={parameters} onChange={onChange} />
       <div className='card-modal-boolean'>
         <FBCheckbox
           onChangeValue={() => {

src/formBuilder/defaults/referenceInputs.js

@@ -0,0 +1,72 @@
+// @flow
+
+import type { FormInput, Parameters } from '../types';
+import Select from 'react-select';
+import React, { useState } from 'react';
+import type { Node } from 'react';
+import { PlaceholderInput } from '../inputs/PlaceholderInput';
+
+export function CardReferenceParameterInputs({
+  parameters,
+  onChange,
+}: {
+  parameters: Parameters,
+  onChange: (Parameters) => void,
+}): Node {
+  return (
+    <div>
+      <PlaceholderInput parameters={parameters} onChange={onChange} />
+    </div>
+  );
+}
+
+function RefChoice({
+  parameters,
+  onChange,
+}: {
+  parameters: Parameters,
+  onChange: (newParams: Parameters) => void,
+}) {
+  return (
+    <div className='card-select'>
+      <Select
+        value={{
+          value: parameters.$ref,
+          label: parameters.$ref,
+        }}
+        placeholder='Reference'
+        options={Object.keys(parameters.definitionData || {}).map((key) => ({
+          value: `#/definitions/${key}`,
+          label: `#/definitions/${key}`,
+        }))}
+        onChange={(val: any) => {
+          onChange({ ...parameters, $ref: val.value });
+        }}
+        className='card-select'
+      />
+    </div>
+  );
+}
+
+const referenceInputs: { [string]: FormInput } = {
+  ref: {
+    displayName: 'Reference',
+    matchIf: [
+      {
+        types: ['null'],
+        $ref: true,
+      },
+    ],
+    defaultDataSchema: {
+      $ref: '',
+      title: '',
+      description: '',
+    },
+    defaultUiSchema: {},
+    type: 'string',
+    cardBody: RefChoice,
+    modalBody: CardReferenceParameterInputs,
+  },
+};
+
+export default referenceInputs;

src/formBuilder/defaults/shortAnswerInputs.js

@@ -7,6 +7,7 @@ import FBCheckbox from '../checkbox/FBCheckbox';
 import Tooltip from '../Tooltip';
 import { getRandomId } from '../utils';
 import type { Parameters, FormInput } from '../types';
+import { PlaceholderInput } from '../inputs/PlaceholderInput';
 
 const formatDictionary = {
   '': 'None',
@@ -176,6 +177,7 @@ function CardShortAnswerParameterInputs({
         }}
         className='card-modal-select'
       />
+      <PlaceholderInput parameters={parameters} onChange={onChange} />
       <h4>
         Column Size{' '}
         <a

src/formBuilder/inputs/PlaceholderInput.js

@@ -0,0 +1,49 @@
+// @flow
+
+import React, { useState } from 'react';
+import type { Node } from 'react';
+import type { Parameters } from '../types';
+import { getRandomId } from '../utils';
+import Tooltip from '../Tooltip';
+import { Input } from 'reactstrap';
+
+export function PlaceholderInput({
+  parameters,
+  onChange,
+}: {
+  parameters: Parameters,
+  onChange: (Parameters) => void,
+}): Node {
+  const [elementId] = useState(getRandomId());
+  return (
+    <React.Fragment>
+      <h4>
+        Placeholder{' '}
+        <a
+          href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          <Tooltip
+            id={`${elementId}_placeholder`}
+            type='help'
+            text='Hint to the user as to what kind of information is expected in the field'
+          />
+        </a>
+      </h4>
+      <Input
+        value={parameters['ui:placeholder']}
+        placeholder='Placeholder'
+        key='placeholder'
+        type='text'
+        onChange={(ev: SyntheticInputEvent<HTMLInputElement>) => {
+          onChange({
+            ...parameters,
+            'ui:placeholder': ev.target.value,
+          });
+        }}
+        className='card-modal-text'
+      />
+    </React.Fragment>
+  );
+}

src/formBuilder/utils.js

@@ -156,6 +156,7 @@ const supportedUiParameters = new Set([
   'ui:autocomplete',
   'ui:options',
   'ui:field',
+  'ui:placeholder',
   'ui:column',
   'items',
   'definitions',
@@ -808,7 +809,8 @@ export function generateUiSchemaFromElementProps(
         typeof element.$ref === 'string' ? element.$ref.split('/') : [];
       if (definitions && definitions[pathArr[2]])
         uiSchema[element.name] = definitions[pathArr[2]];
-    } else if (element.propType === 'card' && element.uiOptions) {
+    }
+    if (element.propType === 'card' && element.uiOptions) {
       Object.keys(element.uiOptions).forEach((uiOption) => {
         if (!uiSchema[element.name]) uiSchema[element.name] = {};
         if (uiOption.startsWith('ui:*')) {