43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { Step, StepProps } from './Step';
|
|
|
|
const StyledContainer = styled.div`
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: space-between;
|
|
`;
|
|
|
|
export type StepsProps = React.PropsWithChildren &
|
|
React.ComponentProps<'div'> & {
|
|
activeStep: number;
|
|
};
|
|
|
|
export const StepBar = ({ children, activeStep, ...restProps }: StepsProps) => {
|
|
return (
|
|
<StyledContainer {...restProps}>
|
|
{React.Children.map(children, (child, index) => {
|
|
if (!React.isValidElement(child)) {
|
|
return null;
|
|
}
|
|
|
|
// If the child is not a Step, return it as-is
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-expect-error
|
|
if (child.type?.displayName !== Step.displayName) {
|
|
return child;
|
|
}
|
|
|
|
return React.cloneElement<StepProps>(child as any, {
|
|
index,
|
|
isActive: index <= activeStep,
|
|
isLast: index === React.Children.count(children) - 1,
|
|
});
|
|
})}
|
|
</StyledContainer>
|
|
);
|
|
};
|
|
|
|
StepBar.Step = Step;
|