src/WizardMaster/mountWizards.tsx
import React, { MutableRefObject } from 'react'
import { Box, chakra } from '@chakra-ui/react'
import { Wizard } from './components'
import { getWizardFromCallable } from './utils'
import type { WizardFieldDescription, WizardFieldElement } from '../admin/fields/FieldDescription'
import type { BaseNotifier } from '../common/notifier'
import type { Provider } from '../admin/providers/interfaces'
import type { BaseAnalytic } from '../integration/analytics'
import type { DetailObject, WizardControl } from '../typing'
type MountWizardsKwargs = {
resourceName: string
mainDetailObject: DetailObject
notifier: BaseNotifier
ViewType: string
elements: WizardFieldDescription
elementsKey: string
provider: Provider
setMainDetailObject: Function
refreshMainDetailObject: Function
analytics?: BaseAnalytic
user: object
activeWizardRef: MutableRefObject<WizardControl | null>
}
const WizardWrapper = chakra(Box, {
baseStyle: {
borderTop: '1px solid',
borderColor: 'blackAlpha.300',
_empty: {
border: 0,
},
},
})
function isWizardEmpty({ elements, mainDetailObject }: MountWizardsKwargs): boolean {
return elements.every((wizardInstance) => !getWizardFromCallable(wizardInstance, mainDetailObject))
}
const mountWizards = (kwargs: MountWizardsKwargs): JSX.Element => {
/*
Function mounts widgets for Wizard View.
Widgets of Wizard View type use store.
They do not send user data to the backend immediately, but put it in store.
*/
const {
mainDetailObject,
notifier,
ViewType,
elements,
elementsKey,
provider,
setMainDetailObject,
refreshMainDetailObject,
analytics,
user,
resourceName,
activeWizardRef,
} = kwargs
return (
<WizardWrapper border={isWizardEmpty(kwargs) ? 0 : undefined} key={elementsKey}>
{elements.map((wizardInstance: WizardFieldElement, index) => {
const wizard = getWizardFromCallable(wizardInstance, mainDetailObject)
const key = `wizard-element_${index}`
if (!wizard) {
return <div key={key} />
}
return (
<Wizard
key={wizard.title}
data-grid={wizard.layout}
wizard={wizard}
provider={provider}
mainDetailObject={mainDetailObject}
setMainDetailObject={setMainDetailObject}
refreshMainDetailObject={refreshMainDetailObject}
notifier={notifier}
analytics={analytics}
ViewType={ViewType}
user={user}
resourceName={resourceName}
allowToggle={wizard.allowToggle}
isExpanded={wizard.isExpanded}
activeWizardRef={activeWizardRef}
/>
)
})}
</WizardWrapper>
)
}
export { mountWizards }