Skip to content

Commit

Permalink
fix collapsable option
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zwiterrion
Zwiterrion committed Apr 29, 2022
1 parent 0b7c846 commit 14d4c99
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 47 deletions.
61 changes: 35 additions & 26 deletions src/form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const usePrevious = (value) => {
return ref.current;
}

const BasicWrapper = ({ entry, className, label, help, children, render, collapsed }) => {
const BasicWrapper = ({ entry, className, label, help, children, render }) => {
if (typeof entry === 'object') {
return children
}
Expand All @@ -47,16 +47,9 @@ const BasicWrapper = ({ entry, className, label, help, children, render, collaps
const errorDisplayed = formState.isSubmitted || isDirty || isTouched

if (render) {
return render({ entry, label, error, help, children, collapsed })
return render({ entry, label, error, help, children })
}

const childrenWithProps = React.Children.map(children, child => {
if (React.isValidElement(child)) {
return React.cloneElement(child, { collapsed });
}
return child;
});

return (
<div className={`${classes.mt_10} ${className}`} style={{ position: 'relative' }}>
{label && <label className={`${classes.flex} ${classes.ai_center} ${classes.mb_5}`} htmlFor={entry}>
Expand All @@ -69,7 +62,7 @@ const BasicWrapper = ({ entry, className, label, help, children, render, collaps
</>}
</label>}

{childrenWithProps}
{children}
{error && <div className={classNames(classes.feedback, { [classes.txt_red]: errorDisplayed })}>{error.message}</div>}
</div>
)
Expand Down Expand Up @@ -223,6 +216,8 @@ export const Form = React.forwardRef(({ schema, flow, value, inputWrapper, onSub
})
}

const [expandedAll, setExpandedAll] = useState(false)

const defaultValues = getDefaultValues(formFlow, schema, value);
//FIXME: get real schema through the switch

Expand Down Expand Up @@ -293,6 +288,19 @@ export const Form = React.forwardRef(({ schema, flow, value, inputWrapper, onSub
const clean = cleanOutputArray(data, schema)
onSubmit(clean)
}, onError)}>
<div className={classNames(classes.flex, classes.mt_20)}>
<button
type="button"
className={classNames(classes.btn, classes.btn_sm)}
style={{ marginLeft: 'auto' }}
onClick={e => {
if (e)
e.stopPropagation()
setExpandedAll(!expandedAll)
}}>
{expandedAll ? 'Expand all' : 'Collapse all'}
</button>
</div>
{formFlow.map((entry, idx) => {
const step = schema[entry]

Expand Down Expand Up @@ -327,7 +335,8 @@ export const Form = React.forwardRef(({ schema, flow, value, inputWrapper, onSub
<BasicWrapper key={`${entry}-${idx}`} entry={entry} dirtyFields={dirtyFields} label={functionalProperty(entry, step?.label === null ? null : step?.label || entry)} help={step?.help} render={inputWrapper}>
<Step key={idx} entry={entry} step={step}
schema={schema} inputWrapper={inputWrapper}
httpClient={maybeCustomHttpClient} functionalProperty={functionalProperty} />
httpClient={maybeCustomHttpClient} functionalProperty={functionalProperty}
expandedAll={expandedAll} />
</BasicWrapper>
)
})}
Expand Down Expand Up @@ -355,14 +364,14 @@ const Footer = (props) => {
)
}

const Step = ({ entry, realEntry, step, schema, inputWrapper, httpClient, defaultValue, index, functionalProperty, parent, onAfterChange, collapsed }) => {
const Step = ({ entry, realEntry, step, schema, inputWrapper, httpClient, defaultValue, index, functionalProperty, parent, onAfterChange, expandedAll }) => {
const classes = useCustomStyle();
const { formState: { errors, dirtyFields, touchedFields, isSubmitted }, control, trigger, getValues, setValue, watch, register } = useFormContext();

if (entry && typeof entry === 'object') {
const errored = entry.flow.some(step => !!errors[step] && (dirtyFields[step] || touchedFields[step]))
return (
<Collapse {...entry} errored={errored} collapsed={collapsed}>
<Collapse {...entry} errored={errored}>
{entry.flow.map((en, entryIdx) => {
const stp = schema[en]
const err = typeof en === 'object' ? undefined : en.split('.').reduce((object, key) => {
Expand Down Expand Up @@ -394,9 +403,9 @@ const Step = ({ entry, realEntry, step, schema, inputWrapper, httpClient, defaul
}

return (
<BasicWrapper key={`collapse-${en}-${entryIdx}`} entry={en} label={functionalProperty(en, stp?.label === null ? null : stp?.label || en)} help={stp?.help} render={inputWrapper} collapsed={collapsed}>
<BasicWrapper key={`collapse-${en}-${entryIdx}`} entry={en} label={functionalProperty(en, stp?.label === null ? null : stp?.label || en)} help={stp?.help} render={inputWrapper}>
<Step entry={en} step={stp} schema={schema}
collapsed={collapsed}
expandedAll={expandedAll}
inputWrapper={inputWrapper} httpClient={httpClient}
defaultValue={stp?.defaultValue} functionalProperty={functionalProperty} />
</BasicWrapper>
Expand Down Expand Up @@ -458,7 +467,7 @@ const Step = ({ entry, realEntry, step, schema, inputWrapper, httpClient, defaul
value={props.value}
index={idx}
functionalProperty={functionalProperty}
collapsed={collapsed} />
expandedAll={expandedAll} />
)
})} />
</CustomizableInput >
Expand Down Expand Up @@ -579,9 +588,9 @@ const Step = ({ entry, realEntry, step, schema, inputWrapper, httpClient, defaul
return (
<CustomizableInput render={step.render} field={{ parent, setValue: (key, value) => setValue(key, value), rawValues: getValues(), value: getValues(entry), onChange: v => setValue(entry, v, { shouldValidate: true }) }}>
<NestedForm
schema={step.schema} flow={flow} step={step} parent={entry} collapsed={collapsed}
schema={step.schema} flow={flow} step={step} parent={entry}
inputWrapper={inputWrapper} maybeCustomHttpClient={httpClient} value={getValues(entry) || defaultValue}
index={index} functionalProperty={functionalProperty} errorDisplayed={errorDisplayed} />
index={index} functionalProperty={functionalProperty} errorDisplayed={errorDisplayed} expandedAll={expandedAll} />
</CustomizableInput>
)

Expand Down Expand Up @@ -755,16 +764,15 @@ const ArrayStep = ({ entry, step, component, disabled }) => {
)
}

const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient, errorDisplayed, value, step, functionalProperty, index, ...props }) => {
const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient, errorDisplayed, value, step, functionalProperty, index, expandedAll }) => {
const { getValues, setValue, watch, trigger, formState } = useFormContext();
const [collapsed, setCollapsed] = useState(!!step.collapsed || props.collapsed);

useEffect(() => {
setCollapsed(props.collapsed)
}, [props.collapsed])

const [collapsed, setCollapsed] = useState(!!step.collapsed);
const classes = useCustomStyle();

useEffect(() => {
if (!expandedAll || (expandedAll && parent.split('.').length >= 2))
setCollapsed(expandedAll)
}, [expandedAll])

const schemaAndFlow = option(step.conditionalSchema)
.map(condiSchema => {
Expand Down Expand Up @@ -842,7 +850,8 @@ const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient,
inputWrapper={inputWrapper}
httpClient={maybeCustomHttpClient}
defaultValue={value && value[entry]}
functionalProperty={functionalProperty} />
functionalProperty={functionalProperty}
expandedAll={expandedAll} />
</BasicWrapper>
)
})}
Expand Down
22 changes: 1 addition & 21 deletions src/inputs/Collapse.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,52 +5,32 @@ import { useCustomStyle } from '../styleContext'

export const Collapse = (props) => {
const [collapsed, setCollapsed] = useState(props.initCollapsed || props.collapsed)
const [expandedAll, setExpandedAll] = useState(false)
const classes = useCustomStyle()

const toggle = (e) => {
if (e && e.preventDefault) e.stopPropagation()
setCollapsed(!collapsed)
};

const childrenWithProps = React.Children.map(props.children, child => {
if (React.isValidElement(child)) {
return React.cloneElement(child, { collapsed: expandedAll });
}
return child;
});

return (
<div>
<hr className={classNames({ [classes.collapse_error]: props.errored })} />
<div className={`${classes.cursor_pointer} ${classes.flex} ${classes.jc_between}`} onClick={toggle}>
<span className={classNames(classes.collapse_label, { [classes.collapse_error]: props.errored })}>{props.label}</span>
<div style={{ marginLeft: 'auto' }} className={classNames(classes.flex)}>
<button
type="button"
className={classNames(classes.btn, classes.btn_sm, { [classes.collapse_error]: props.errored })}
onClick={e => {
if (e)
e.stopPropagation()
setExpandedAll(!expandedAll)
}}>
{expandedAll ? 'Expand all' : 'Collapse all'}
</button>
<button
type="button"
className={classNames(classes.btn, classes.btn_sm, classes.ml_5, { [classes.collapse_error]: props.errored })}
onClick={toggle}>
{!!collapsed && <Eye size={16} />}
{!collapsed && <EyeOff size={16} />}
</button>
</div>
</div>
<div className={classNames(`${classes.ml_10}`, {
[classes.display__none]: !!collapsed,
[classes.flex]: !!props.inline,
[classes.collapse__inline]: !!props.inline,
})}>
{childrenWithProps}
{props.children}
</div>
{props.lineEnd && <hr />}
</div>
Expand Down

0 comments on commit 14d4c99

Please sign in to comment.