Clean up format dropdown in Short Answer input

- Move Time and Date time out of Short Answer format into their own
  input types.
- Rename "Time" to "Date-Time". Add a "Time" Input Type.
- Add matchIf entries for the Format entries in Short Answer.
- Remove Format menu from Long Answer, which never really worked is not
  very appropriate.

Author: raymond-lam

src/formBuilder/defaults/defaultInputs.js

@@ -26,28 +26,29 @@ export function CardDefaultParameterInputs({
   return <div />;
 }
 
-function TimeField({
-  parameters,
-  onChange,
-}: {
-  parameters: Parameters,
-  onChange: (newParams: Parameters) => void,
-}) {
-  return (
-    <React.Fragment>
-      <h5>Default time</h5>
-      <Input
-        value={parameters.default || ''}
-        placeholder='Default'
-        type='datetime-local'
-        onChange={(ev: SyntheticInputEvent<HTMLInputElement>) =>
-          onChange({ ...parameters, default: ev.target.value })
-        }
-        className='card-text'
-      />
-    </React.Fragment>
-  );
-}
+const getInputCardBodyComponent = ({ type }: { type: string }) =>
+  function InputCardBodyComponent({
+    parameters,
+    onChange,
+  }: {
+    parameters: Parameters,
+    onChange: (newParams: Parameters) => void,
+  }) {
+    return (
+      <React.Fragment>
+        <h5>Default value</h5>
+        <Input
+          value={parameters.default || ''}
+          placeholder='Default'
+          type={type}
+          onChange={(ev: SyntheticInputEvent<HTMLInputElement>) =>
+            onChange({ ...parameters, default: ev.target.value })
+          }
+          className='card-text'
+        />
+      </React.Fragment>
+    );
+  };
 
 function Checkbox({
   parameters,
@@ -205,8 +206,8 @@ function RefChoice({
 }
 
 const defaultInputs: { [string]: FormInput } = {
-  time: {
-    displayName: 'Time',
+  dateTime: {
+    displayName: 'Date-Time',
     matchIf: [
       {
         types: ['string'],
@@ -218,7 +219,39 @@ const defaultInputs: { [string]: FormInput } = {
     },
     defaultUiSchema: {},
     type: 'string',
-    cardBody: TimeField,
+    cardBody: getInputCardBodyComponent({ type: 'datetime-local' }),
+    modalBody: CardDefaultParameterInputs,
+  },
+  date: {
+    displayName: 'Date',
+    matchIf: [
+      {
+        types: ['string'],
+        format: 'date',
+      },
+    ],
+    defaultDataSchema: {
+      format: 'date',
+    },
+    defaultUiSchema: {},
+    type: 'string',
+    cardBody: getInputCardBodyComponent({ type: 'date' }),
+    modalBody: CardDefaultParameterInputs,
+  },
+  time: {
+    displayName: 'Time',
+    matchIf: [
+      {
+        types: ['string'],
+        format: 'time',
+      },
+    ],
+    defaultDataSchema: {
+      format: 'time',
+    },
+    defaultUiSchema: {},
+    type: 'string',
+    cardBody: getInputCardBodyComponent({ type: 'time' }),
     modalBody: CardDefaultParameterInputs,
   },
   checkbox: {

src/formBuilder/defaults/longAnswerInputs.js

@@ -8,16 +8,6 @@ import Tooltip from '../Tooltip';
 import { getRandomId } from '../utils';
 import type { Parameters, FormInput } from '../types';
 
-const formatDictionary = {
-  '': 'None',
-  'date-time': 'Date-Time',
-  email: 'Email',
-  hostname: 'Hostname',
-  time: 'Time',
-  uri: 'URI',
-  regex: 'Regular Expression',
-};
-
 // specify the inputs required for a string type object
 function CardLongAnswerParameterInputs({
   parameters,
@@ -80,41 +70,6 @@ function CardLongAnswerParameterInputs({
         }}
         className='card-modal-text'
       />
-      <h4>
-        Format{' '}
-        <Tooltip
-          id={`${elementId}_format`}
-          type='help'
-          text='Require string input to match a certain common format'
-        />
-      </h4>
-      <Select
-        value={{
-          value: parameters.format
-            ? formatDictionary[
-                typeof parameters.format === 'string' ? parameters.format : ''
-              ]
-            : '',
-          label: parameters.format
-            ? formatDictionary[
-                typeof parameters.format === 'string' ? parameters.format : ''
-              ]
-            : 'None',
-        }}
-        placeholder='Format'
-        key='format'
-        options={Object.keys(formatDictionary).map((key) => ({
-          value: key,
-          label: formatDictionary[key],
-        }))}
-        onChange={(val: any) => {
-          onChange({
-            ...parameters,
-            format: val.value,
-          });
-        }}
-        className='card-modal-select'
-      />
       <div className='card-modal-boolean'>
         <FBCheckbox
           onChangeValue={() => {
@@ -146,7 +101,7 @@ function LongAnswer({
 }) {
   return (
     <React.Fragment>
-      <h5>Default input</h5>
+      <h5>Default value</h5>
       <Input
         value={parameters.default}
         placeholder='Default'

src/formBuilder/defaults/shortAnswerInputs.js

@@ -10,14 +10,17 @@ import type { Parameters, FormInput } from '../types';
 
 const formatDictionary = {
   '': 'None',
-  'date-time': 'Date-Time',
   email: 'Email',
   hostname: 'Hostname',
-  time: 'Time',
   uri: 'URI',
   regex: 'Regular Expression',
 };
 
+const formatTypeDictionary = {
+  email: 'email',
+  url: 'uri',
+};
+
 const autoDictionary = {
   '': 'None',
   email: 'Email',
@@ -208,7 +211,7 @@ function ShortAnswerField({
       <Input
         value={parameters.default}
         placeholder='Default'
-        type='text'
+        type={formatTypeDictionary[parameters.format] || 'text'}
         onChange={(ev: SyntheticInputEvent<HTMLInputElement>) =>
           onChange({ ...parameters, default: ev.target.value })
         }
@@ -248,6 +251,10 @@ const shortAnswerInput: { [string]: FormInput } = {
       {
         types: ['string'],
       },
+      ...['email', 'hostname', 'uri', 'regex'].map((format) => ({
+        types: ['string'],
+        format,
+      })),
     ],
     defaultDataSchema: {},
     defaultUiSchema: {},