Fix auto submit of sub-object

Devs can now add null label Devs can now get ace editor ref
MAIF · Jan 27, 2022 · 5a0a591 · 5a0a591
1 parent 80d359d
commit 5a0a591
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -67,7 +67,7 @@ export const Example = () => {
 - **format**: Over the type you can display a special format for the field. It provided by the imported object `format` or just a string
   - `select`: display a [react-select](https://react-select.com/home) field with provided options
   - `buttonsSelect`: display a buttons group, drawn with the same options than the format `select`
-  - `code`: if the type is `string`, display a code input (draw with [react-ace](https://github.com/securingsincity/react-ace))
+  - `code`: if the type is `string`, display a code input (draw with [react-ace](https://github.com/securingsincity/react-ace)) (add a props.setRef to get ace editor ref)
   - `markdown`: if the type is `string`, display a markdown input
   - `text`: if the type is `string`, display a textarea
   - `email`: if the type is `string`, display an email input
@@ -86,7 +86,7 @@ export const Example = () => {
 - **defaultKeyValue**: if the format is setup to object, this default key/value is set for all added entries
 - **visible**: a boolean option to hide/display form field. It can be an object with `ref` property to get a value by reference an a key `test` as a function to test it. if there is no `test` key, it's base just on boolean value of the reference.
 - **disabled**: A boolean option to enable/disable form field
-- **label**: The label of form field
+- **label**: The label of form field (you can pass `null` to not render a label)
 - **placeholder**: the placeholder of form field
 - **defaultValue**: A default value to fill field by default
 - **help**: the text display hover a help button
@@ -96,7 +96,7 @@ export const Example = () => {
   ```javascript
   ({rawValues, value, onChange, error}) => <input type="text" className="is-invalid" value={value} onChange={e => onChange(e.target.value)} />
   ```
-- **props**: a json object merged with default props. For exemple, if format `select` is setup, you can add all [props](https://react-select.com/props) to csutomize react-select
+- **props**: a json object merged with default props. For exemple, if format `select` is setup, you can add all [props](https://react-select.com/props) to customize react-select
 - **options**: An array of options for the select field (if format `select` is setup)
 - **optionsFrom**: A url to fetch array of options for the select field (if format `select` is setup)
 - **transformer**: A function to transform options to a valid format for react select, by default the code try to do it himself.

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/form.js b/src/form.js
@@ -22,7 +22,7 @@ const usePrevious = (value) => {
 
   // Store current value in ref
   useEffect(() => {
-    ref.current = value;
+    ref.current = JSON.parse(JSON.stringify(value));
   }, [value]); // Only re-run if value changes
 
   // Return previous value (happens before update in useEffect above)
@@ -43,15 +43,15 @@ const BasicWrapper = ({ entry, label, error, help, children, render }) => {
 
   return (
     <div className="form-group mt-3">
-      <label className="form-label d-flex align-content-center" htmlFor={entry}>
+      {label && <label className="form-label d-flex align-content-center" htmlFor={entry}>
         <span className="mr-2">{label}</span>
         {help && <>
           <ReactToolTip html={true} place={'bottom'} id={id} />
           <span data-html={true} data-tip={help} data-for={id}>
             <HelpCircle style={{ color: 'gray', width: 17, marginLeft: '.5rem', cursor: 'help' }} />
           </span>
         </>}
-      </label>
+      </label>}
 
       {children}
       {error && <div className={classes.invalid_feedback}>{error.message}</div>}
@@ -194,7 +194,9 @@ export const Form = React.forwardRef(({ schema, flow, value, inputWrapper, onSub
   }, [data])
 
   if (options.watch) {
+    console.group('react-form watch')
     console.log(watch())
+    console.groupEnd()
   }
 
   useImperativeHandle(ref, () => ({
@@ -237,7 +239,7 @@ export const Form = React.forwardRef(({ schema, flow, value, inputWrapper, onSub
 
 
           return (
-            <BasicWrapper key={`${entry}-${idx}`} entry={entry} error={error} label={step?.label || entry} help={step?.help} render={inputWrapper}>
+            <BasicWrapper key={`${entry}-${idx}`} entry={entry} error={error} label={step?.label === null ? null : step?.label || entry} help={step?.help} render={inputWrapper}>
               <Step key={idx} entry={entry} step={step} error={error} errors={errors}
                 register={register} schema={schema} control={control} trigger={trigger} getValues={getValues}
                 setValue={setValue} watch={watch} inputWrapper={inputWrapper} httpClient={maybeCustomHttpClient} />
@@ -299,7 +301,7 @@ const Step = ({ entry, step, error, errors, register, schema, control, trigger,
           }
 
           return (
-            <BasicWrapper key={`collapse-${en}-${entryIdx}`} entry={en} error={err} label={stp?.label || en} help={stp?.help} render={inputWrapper}>
+            <BasicWrapper key={`collapse-${en}-${entryIdx}`} entry={en} error={err} label={stp?.label === null ? null : stp?.label || en} help={stp?.help} render={inputWrapper}>
               <Step entry={en} step={stp} error={err} errors={errors}
                 register={register} schema={schema} control={control} trigger={trigger} getValues={getValues}
                 setValue={setValue} watch={watch} inputWrapper={inputWrapper} httpClient={httpClient} defaultValue={stp.defaultValue}/>
@@ -354,13 +356,12 @@ const Step = ({ entry, step, error, errors, register, schema, control, trigger,
               return (
                 <CustomizableInput render={step.render} field={{ setValue: (key, value) => setValue(key, value), rawValues: getValues(), ...field }} error={error}>
                   <CodeInput
-                    {...step.props}
                     className={classNames({ [classes.input__invalid]: error })}
                     readOnly={step.disabled ? 'readOnly' : null}
                     onChange={field.onChange}
                     value={field.value}
                     defaultValue={defaultValue}
-                    {...step}
+                    {...step.props}
                   />
                 </CustomizableInput>
               )
@@ -722,7 +723,7 @@ const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient,
         const realError = error && error[entry]
 
         return (
-          <BasicWrapper key={`${entry}.${idx}`} entry={`${parent}.${entry}`} error={realError} label={step.label || entry} help={step.help} render={inputWrapper}>
+          <BasicWrapper key={`${entry}.${idx}`} entry={`${parent}.${entry}`} error={realError} label={step?.label === null ? null : step?.label || entry} help={step.help} render={inputWrapper}>
             <Step key={`step.${entry}.${idx}`} entry={`${parent}.${entry}`} step={schemaAndFlow.schema[entry]} error={realError}
               register={register} schema={schemaAndFlow.schema} control={control} trigger={trigger} getValues={getValues}
               setValue={setValue} watch={watch} inputWrapper={inputWrapper} httpClient={maybeCustomHttpClient}

diff --git a/src/inputs/CodeInput.js b/src/inputs/CodeInput.js
@@ -25,7 +25,8 @@ export const CodeInput = ({ onChange, value, className = '', readOnly, theme = '
       value={value}
       name="scriptParam"
       editorProps={{ $blockScrolling: true }}
-      onLoad={editorInstance => {
+      onLoad={editorInstance => { 
+
         editorInstance.container.style.resize = "both";
         // mouseup = css resize end
         document.addEventListener("mouseup", e => (
@@ -39,6 +40,8 @@ export const CodeInput = ({ onChange, value, className = '', readOnly, theme = '
       highlightActiveLine={true}
       enableBasicAutocompletion={true}
       enableLiveAutocompletion={true}
+      {...props}
+      ref={props.setRef}
     />
   );
 

diff --git a/yarn.lock b/yarn.lock
@@ -2632,9 +2632,9 @@
   "version" "1.0.0"
 
 "caniuse-lite@^1.0.30001248":
-  "integrity" "sha512-vcX4U8lwVXPdqzPWi6cAJ3FnQaqXbBqy/GZseKNQzRj37J7qZdGcBtxq/QLFNLLlfsoXLUdHw8Iwenri86Tagw=="
-  "resolved" "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001249.tgz"
-  "version" "1.0.30001249"
+  "integrity" "sha512-/Mqc1oESndUNszJP0kx0UaQU9kEv9nNtJ7Kn8AdA0mNnH8eR1cj0kG+NbNuC1Wq/b21eA8prhKRA3bbkjONegQ=="
+  "resolved" "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001303.tgz"
+  "version" "1.0.30001303"
 
 "ccount@^1.0.0":
   "integrity" "sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg=="
@@ -3939,6 +3939,11 @@
   "resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   "version" "1.0.0"
 
+"fsevents@^2.3.2", "fsevents@~2.3.2":
+  "integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
+  "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
+  "version" "2.3.2"
+
 "function-bind@^1.1.1":
   "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
   "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"