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 {