FIX #93

README.md

@@ -77,7 +77,12 @@ export const Example = () => {
   - `email`: if the type is `string`, display an email input
   - `password`: if the type is `string`, display a password input
   - `hidden`: if the type is `string`, add an hidden input in your form
-  - `form`: if the type is `object`, display a form in your form draw with given schema and flow. The form drawn is  collapsable, by default on the first input but with `visibleOnCollapse` you can choose which field will be visble or not.
+  - `form`: if the type is `object`, display a form in your form draw with given schema and flow. The form drawn is `collapsable`, you can choose which field will be visble or not by setting up the `visibleOnCollapse` props on subschema element properties. `collapsable` can be a boolean or a function to render JSX (with `rawValues`, `value` & `getValue` params)
+```javascript
+  {
+    collapsable: ({rawValue, value, getValue}) => <span>{value.firstname} {value.name}</span>
+  }
+```
 - **array**: boolean value to display multiple fields with "add" and "remove" buttons (`false` by default)
 - **createOption**: if `select` format is choosen, `createOption` property is to render a Creatable component
 - **onCreateOption**: if `select` format is choosen, `onCreateOption` property is a function called before new option creation

src/form/step.tsx

@@ -539,7 +539,14 @@ const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient,
       {!!step.collapsable && schemaAndFlow.flow.length > 1 && !collapsed &&
         <ChevronUp size={30} className='mrf-cursor_pointer' style={{ position: 'absolute', top: -35, right: 0, zIndex: 100 }} strokeWidth="2" onClick={() => setCollapsed(!collapsed)} />}
 
-      {computedSandF.map(({ step, entry }, idx: number) => {
+      {collapsed && !!step.collapsable && typeof step.collapsable === 'function' && step.collapsable({rawValues: getValues(), getValue: (key: string) => getValues(key), value})}
+
+      {(typeof step.collapsable !== 'function' || !collapsed) && computedSandF.map(({ step, entry }, idx: number) => {
+        if (collapsed && !step.visibleOnCollapse) {
+          return null;
+        }
+
+
         if (typeof entry === 'object') {
           return (
             <CollapsedStep key={idx}

src/form/types.ts

@@ -74,7 +74,8 @@ export interface SchemaEntry {
   visibleOnCollapse?: boolean;
   addableDefaultValue?: any; /* TODO doc : possible only with array, used to give default value to dynamically added elements */
   collapsed?: boolean; // TODO doc : indicate wether form is closed or not, only for objects with form
-  collapsable?: boolean; // TODO doc : indicate wether schema can be collapsed, only for objects with form
+  collapsable?: boolean | ((param: { rawValues: { [x: string]: any }, value: any, getValue: (key: string) => any  }) => JSX.Element); // TODO doc : indicate wether schema can be collapsed, only for objects with form
+
 }
 
 export interface FlowObject {