Can hide default inputs with mods (#69)

Add ability to hide default inputs with mods

Author: Bradley Marques

docs/Background.md

@@ -93,8 +93,8 @@ When a form element is dependent on another form element, it will appear with da
 
 The Form Builder also supports the **definitions** property in JSON Schema Form and the resulting **$ref** tags pointing to those definitions. By default, if there are no definitiosn detected in the underlying schema, the option to choose an input type as a reference will be disabled. However, if there is at least one defined definition, then a new option in the *Input Types* dropdown will appear, allowing the Form Builder to select a form input to have a reference to an existing definition. Any changes to that definition will propagate to all form elements that have a reference to it.
 
-When a card is of a reference type, many of the usual options are no longer editable - instead, they become inherited from the parent definition.
-
 ![reference](img/reference.png)
 
+Since [this pull request](https://github.com/rjsf-team/react-jsonschema-form/pull/179), the `react-jsonschema-form` package has supported local overrides to `$ref` titles and descriptions. The Form Builder also supports this.
+
 In the [usage doc](Usage.md), there is an optional additional component called the **PredefinedGallery** that allows a builder to also visually build the definitions.

docs/Mods.md

@@ -33,6 +33,14 @@ declare type Mods = {|
     inputTypeLabel?: string,
   |},
   showFormHead?: boolean,
+  deactivatedFormInputs?: Array<string>,
+  newElementDefaultDataOptions?: {
+    title: string,
+    type?: string,
+    description?: string,
+    $ref?: string,
+    default?: string,
+  },
 |};
 ```
 

docs/Usage.md

@@ -14,9 +14,9 @@ The following example is a React component that simply maintains a Form Builder
 
 ```react
 import React, { Component } from 'react';
- 
+
 import {FormBuilder} from 'react-json-schema-form-builder';
- 
+
 class Example extends Component {
   constructor(props) {
     super(props);
@@ -56,10 +56,10 @@ The following example uses this form preview adjacent to the Form Builder:
 
 ``` react
 import React, { Component } from 'react';
- 
+
 import {FormBuilder} from 'react-json-schema-form-builder';
 import Form from '@rjsf/core';
- 
+
 class Example extends Component {
   constructor(props) {
     super(props);
@@ -101,9 +101,9 @@ JSON Schema forms also make use of definitions, allowing a form builder to defin
 
 ``` react
 import React, { Component } from 'react';
- 
+
 import {FormBuilder, PredefinedGallery} from "@ginkgo-bioworks/react-json-schema-form-builder";
- 
+
 class Example extends Component {
   constructor(props) {
     super(props);
@@ -147,9 +147,9 @@ The following is an example that implements the `FormBuilder` in a React functio
 
 ``` react
 import * as React from 'react';
- 
+
 import {FormBuilder, PredefinedGallery} from "@ginkgo-bioworks/react-json-schema-form-builder";
- 
+
 export default function Example() {
   const [schema, setSchema] = React.useState('{}');
   const [uischema, setUiSchema] = React.useState('{}');
@@ -222,9 +222,9 @@ This can then be passed into an app using the `FormBuilder` as follows:
 
 ```react
 import React, { Component } from 'react';
- 
+
 import { FormBuilder } from 'react-json-schema-form-builder';
- 
+
 class Example extends Component {
   constructor(props) {
     super(props);
@@ -246,7 +246,7 @@ class Example extends Component {
         }}
         mods={
           {
-            optionalFormInputs: customFormInputs
+            customFormInputs
           }
         }
       />
@@ -255,26 +255,46 @@ class Example extends Component {
 }
 ```
 
-The full type definition of the mods that can be passed into the `FormBuilder` and `PredefinedGallery` (they must be passed into both!) are as follows:
+The `customFormInputs` define the logic that translates abstract "Input Types" into raw data schema and UI schema. For more information about these Custon Form Inputs, see the page [here](Mods.md).
 
-``` react
-export type Mods = {
-  customFormInputs?: {
-    [string]: FormInput
-  },
-  tooltipDescriptions?: {
-    add?: string,
-    cardObjectName?: string,
-    cardDisplayName?: string,
-    cardDescription?: string,
-    cardInputType?: string
-  }
+The `tooltipDescriptions` allows an implementation of the `FormBuilder` that changes the tooltip descriptions that appear on hover over certain areas of the tool. The `add` popup appears when hovering over the plus buttons, the `cardObjectName` is the name of the back end name that appears in every card object input, the `cardDisplayName` allows rewriting the description of the display name tooltip, the `cardDescription` option allows overwriting the tooltip for the description, and the `cardInputType` allows setting a custom tooltip for the Input Type dropdown.
+
+### Deactivated Form Inputs
+
+It is also possible to deactivate (hide) certain Input Types by setting the `deactivatedFormInputs` property on mods.  For example, to hide the `time` and `checkbox` form inputs that are usually included by default, you may set the mods to:
+
+```react
+mods = {
+  deactivatedFormInputs: ['time', 'checkbox'],
 }
 ```
 
-The `customFormInputs` define the logic that translates abstract "Input Types" into raw data schema and UI schema. For more information about these Custon Form Inputs, see the page [here](Mods.md).
+This will hide these Input Types on the `FormBuilder` component.
 
-The `tooltipDescriptions` allows an implementation of the `FormBuilder` that changes the tooltip descriptions that appear on hover over certain areas of the tool. The `add` popup appears when hovering over the plus buttons, the `cardObjectName` is the name of the back end name that appears in every card object input, the `cardDisplayName` allows rewriting the description of the display name tooltip, the `cardDescription` option allows overwriting the tooltip for the description, and the `cardInputType` allows setting a custom tooltip for the Input Type dropdown.
+### Default New Form Element (newElementDefaultDataOptions)
+
+By default, when adding a new form element, the dataOptions are set to:
+
+```react
+{
+  title: `New Input ${i}`,
+  type: 'string',
+  default: '',
+}
+```
+
+This means that by default, a new form element has the "Short answer" input type.  If you wish to override this (for example, if the "Short answer" input is deactivated), you can do so by using the `newElementDefaultDataOptions` mod.  For example, setting the mods to the following:
+
+```react
+mods = {
+  newElementDefaultDataOptions: {
+    '$ref': '#/definitions/firstNames',
+    title: 'Field',
+  },
+};
+```
+
+will default new form elements to a "Reference" type to some definition "firstNames" defined in the schema.
 
 ### Styling
 

example/src/JsonSchemaFormSuite.js

@@ -149,6 +149,7 @@ class JsonSchemaFormEditor extends React.Component<Props, State> {
                     <FormBuilder
                       schema={this.props.schema}
                       uischema={this.props.uischema}
+                      mods={this.props.mods}
                       onChange={(newSchema: string, newUiSchema: string) => {
                         if (this.props.onChange)
                           this.props.onChange(newSchema, newUiSchema);
@@ -317,6 +318,7 @@ class JsonSchemaFormEditor extends React.Component<Props, State> {
                     <PredefinedGallery
                       schema={this.props.schema}
                       uischema={this.props.uischema}
+                      mods={{}}
                       onChange={(newSchema: string, newUiSchema: string) => {
                         if (this.props.onChange)
                           this.props.onChange(newSchema, newUiSchema);

example/src/PlaygroundContainer.js

@@ -18,9 +18,16 @@ const useStyles = createUseStyles({
   },
 });
 
+// Can be used to set initial schemas and mods (useful for development)
+const initialJsonSchema = {};
+const initialUiSchema = {};
+const mods = {};
+
 export default function PlaygroundContainer({ title }: { title: string }) {
-  const [schema, setSchema] = React.useState('{}');
-  const [uischema, setUischema] = React.useState('{}');
+  const [schema, setSchema] = React.useState(JSON.stringify(initialJsonSchema));
+  const [uischema, setUischema] = React.useState(
+    JSON.stringify(initialUiSchema),
+  );
   const classes = useStyles();
   return (
     <div className='playground'>
@@ -48,6 +55,7 @@ export default function PlaygroundContainer({ title }: { title: string }) {
         lang={'json'}
         schema={schema}
         uischema={uischema}
+        mods={mods}
         schemaTitle='Data Schema'
         uischemaTitle='UI Schema'
         onChange={(newSchema: string, newUiSchema: string) => {

flow-libdef/@ginkgo-bioworks/react-json-schema-form-builder_v1.x.x/flow_v0.92.x-/react-json-schema-form-builder_v1.x.x.js

@@ -54,6 +54,14 @@ declare module '@ginkgo-bioworks/react-json-schema-form-builder' {
     modalBody?: React$ComponentType<CardBodyProps>,
   |};
 
+  declare type DataOptions = {|
+    title: string,
+    type?: string,
+    description?: string,
+    $ref?: string,
+    default?: string,
+  |};
+
   // optional properties that can add custom features to the form builder
   declare type Mods = {|
     customFormInputs?: {
@@ -79,6 +87,8 @@ declare module '@ginkgo-bioworks/react-json-schema-form-builder' {
       inputTypeLabel?: string,
     |},
     showFormHead?: boolean,
+    deactivatedFormInputs?: Array<string>,
+    newElementDefaultDataOptions?: DataOptions,
   |};
 
   declare type FormBuilderProps = {|

src/formBuilder/CardGallery.js

@@ -81,6 +81,7 @@ export default function CardGallery({
               addCardObj({
                 schema: { properties: definitionSchema },
                 uischema: definitionUiSchema,
+                mods: mods,
                 onChange: (newDefinitions, newDefinitionUis) => {
                   const oldUi = newDefinitionUis;
                   const newUi = {};

src/formBuilder/CardGeneralParameterInputs.js

@@ -9,6 +9,7 @@ import {
   defaultDataProps,
   categoryToNameMap,
   categoryType,
+  subtractArray,
 } from './utils';
 import type { Parameters, Mods, FormInput } from './types';
 import Tooltip from './Tooltip';
@@ -43,6 +44,22 @@ export default function CardGeneralParameterInputs({
   const descriptionLabel = fetchLabel('descriptionLabel', 'Description');
   const inputTypeLabel = fetchLabel('inputTypeLabel', 'Input Type');
 
+  const availableInputTypes = () => {
+    const definitionsInSchema =
+      parameters.definitionData &&
+      Object.keys(parameters.definitionData).length !== 0;
+
+    // Hide the "Reference" option if there are no definitions in the schema
+    let inputKeys = Object.keys(categoryMap).filter(
+      (key) => key !== 'ref' || definitionsInSchema,
+    );
+
+    // Exclude hidden inputs based on mods
+    if (mods) inputKeys = subtractArray(inputKeys, mods.deactivatedFormInputs);
+
+    return inputKeys.map((key) => ({ value: key, label: categoryMap[key] }));
+  };
+
   return (
     <div>
       <div className='card-entry'>
@@ -158,17 +175,7 @@ export default function CardGeneralParameterInputs({
             label: categoryMap[parameters.category],
           }}
           placeholder='Category'
-          options={Object.keys(categoryMap)
-            .filter(
-              (key) =>
-                key !== 'ref' ||
-                (parameters.definitionData &&
-                  Object.keys(parameters.definitionData).length !== 0),
-            )
-            .map((key) => ({
-              value: key,
-              label: categoryMap[key],
-            }))}
+          options={availableInputTypes()}
           onChange={(val: any) => {
             // figure out the new 'type'
             const newCategory = val.value;

src/formBuilder/FormBuilder.js

@@ -385,6 +385,7 @@ export default function FormBuilder({
               addCardObj({
                 schema: schemaData,
                 uischema: uiSchemaData,
+                mods: mods,
                 onChange: (newSchema, newUiSchema) =>
                   onChange(stringify(newSchema), stringify(newUiSchema)),
                 definitionData: schemaData.definitions,

src/formBuilder/Section.js

@@ -421,6 +421,7 @@ export default function Section({
                   addCardObj({
                     schema,
                     uischema,
+                    mods,
                     onChange,
                     definitionData,
                     definitionUi,