diff --git a/README.md b/README.md
index 578c12f..cb81d13 100644
--- a/README.md
+++ b/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}) => {value.firstname} {value.name}
+ }
+```
- **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
diff --git a/src/form/step.tsx b/src/form/step.tsx
index 3ca62ef..1af6e8f 100644
--- a/src/form/step.tsx
+++ b/src/form/step.tsx
@@ -539,7 +539,14 @@ const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient,
{!!step.collapsable && schemaAndFlow.flow.length > 1 && !collapsed &&
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 (
any }) => JSX.Element); // TODO doc : indicate wether schema can be collapsed, only for objects with form
+
}
export interface FlowObject {