All files / app/pages/stacking/components stacking-form-container.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Hr } from '@components/hr';
import { Box } from '@stacks/ui';
import { BoxProps } from '@stacks/ui-core';
import { increment } from '@utils/mutate-numbers';
import React, { cloneElement, isValidElement } from 'react';
 
interface ChildProps extends BoxProps {
  step: number;
}
 
type TChild = React.ReactElement<ChildProps>;
 
interface Props {
  children: TChild | TChild[];
}
 
export const StackingFormContainer = ({ children }: Props) => {
  const parsedChildren = Array.isArray(children) ? children : [children];
  const parsedFormSteps = parsedChildren.flatMap((child, index) => {
    Iif (!isValidElement(child)) return null;
    return [
      <Hr mt="extra-loose" mb="48px" key={index.toString() + '-hr'} />,
      cloneElement(child, {
        key: index,
        step: increment(index),
        mb: increment(index) === parsedChildren.length ? '280px' : undefined,
      }),
    ];
  });
  return <Box mt="48px">{parsedFormSteps}</Box>;
};