|
| 1 | +import React, { useContext } from 'react' |
| 2 | +import { useTranslation } from '../../hooks' |
| 3 | +import { convertJsxToString } from '../../../../shared/component-helper' |
| 4 | +import WizardContext from '../Context/WizardContext' |
| 5 | +import Step, { |
| 6 | + Props as StepProps, |
| 7 | + handleDeprecatedProps as handleDeprecatedStepProps, |
| 8 | +} from '../Step/Step' |
| 9 | + |
| 10 | +export function IterateOverSteps({ children }) { |
| 11 | + const { |
| 12 | + check, |
| 13 | + stepsRef, |
| 14 | + activeIndexRef, |
| 15 | + totalStepsRef, |
| 16 | + stepStatusRef, |
| 17 | + prerenderFieldProps, |
| 18 | + prerenderFieldPropsRef, |
| 19 | + } = useContext(WizardContext) |
| 20 | + |
| 21 | + stepsRef.current = {} |
| 22 | + let incrementIndex = -1 |
| 23 | + |
| 24 | + const translations = useTranslation() |
| 25 | + |
| 26 | + const childrenArray = React.Children.map(children, (child) => { |
| 27 | + if (React.isValidElement(child)) { |
| 28 | + let step = child |
| 29 | + |
| 30 | + if (child?.type !== Step && typeof child.type === 'function') { |
| 31 | + step = child.type.apply(child.type, [ |
| 32 | + child.props, |
| 33 | + ]) as React.ReactElement |
| 34 | + |
| 35 | + if (step?.type === Step) { |
| 36 | + child = step |
| 37 | + } |
| 38 | + } |
| 39 | + |
| 40 | + if (child?.type === Step) { |
| 41 | + const { title, inactive, include, includeWhen, id } = |
| 42 | + handleDeprecatedStepProps(child.props) |
| 43 | + |
| 44 | + if (include === false) { |
| 45 | + return null |
| 46 | + } |
| 47 | + |
| 48 | + if ( |
| 49 | + includeWhen && |
| 50 | + !check({ |
| 51 | + visibleWhen: includeWhen, |
| 52 | + }) |
| 53 | + ) { |
| 54 | + return null |
| 55 | + } |
| 56 | + |
| 57 | + incrementIndex++ |
| 58 | + const index = incrementIndex |
| 59 | + const state = stepStatusRef.current[index] |
| 60 | + |
| 61 | + stepsRef.current[index] = { |
| 62 | + id, |
| 63 | + title: |
| 64 | + title !== undefined |
| 65 | + ? convertJsxToString(title) |
| 66 | + : 'Title missing', |
| 67 | + inactive, |
| 68 | + status: |
| 69 | + state === 'error' |
| 70 | + ? translations.Step.stepHasError |
| 71 | + : state === 'unknown' |
| 72 | + ? 'Unknown state' |
| 73 | + : undefined, |
| 74 | + statusState: state === 'error' ? 'error' : undefined, // undefined shows 'warn' by default |
| 75 | + } |
| 76 | + const key = `${index}-${activeIndexRef.current}` |
| 77 | + const clone = (props) => |
| 78 | + React.cloneElement(child as React.ReactElement<StepProps>, props) |
| 79 | + |
| 80 | + if ( |
| 81 | + prerenderFieldProps && |
| 82 | + typeof document !== 'undefined' && |
| 83 | + index !== activeIndexRef.current && |
| 84 | + typeof prerenderFieldPropsRef.current['step-' + index] === |
| 85 | + 'undefined' |
| 86 | + ) { |
| 87 | + prerenderFieldPropsRef.current['step-' + index] = () => |
| 88 | + clone({ |
| 89 | + key, |
| 90 | + index, |
| 91 | + prerenderFieldProps: true, |
| 92 | + }) |
| 93 | + } |
| 94 | + |
| 95 | + return clone({ |
| 96 | + key, |
| 97 | + index, |
| 98 | + }) |
| 99 | + } |
| 100 | + } |
| 101 | + |
| 102 | + return child |
| 103 | + }) |
| 104 | + |
| 105 | + // Ensure we never have a higher index than the available children |
| 106 | + // else we get a white screen |
| 107 | + if (childrenArray?.length === 0) { |
| 108 | + activeIndexRef.current = 0 |
| 109 | + } else if (childrenArray?.length < activeIndexRef.current + 1) { |
| 110 | + activeIndexRef.current = childrenArray.length - 1 |
| 111 | + } |
| 112 | + |
| 113 | + totalStepsRef.current = childrenArray?.length |
| 114 | + |
| 115 | + return childrenArray |
| 116 | +} |
0 commit comments