69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import React, { FC } from 'react'
|
|
import { Steps as AntdSteps, StepsProps as AntdStepsProps } from 'antd'
|
|
import { StepProps } from 'antd/es/steps'
|
|
import styled from 'styled-components'
|
|
import { StepIcon } from './StepIcon'
|
|
import { useBreakpoint } from '../Breakpoint'
|
|
|
|
export type StepsProps = Omit<AntdStepsProps, 'labelPlacement' | 'size' | 'status' | 'type' | 'items'> & {
|
|
items: Omit<StepProps, 'icon' | 'description'>[]
|
|
showBar?: boolean
|
|
barStyle?: React.CSSProperties
|
|
}
|
|
|
|
const StyledSteps = styled(AntdSteps)`
|
|
&.ant-steps-label-vertical {
|
|
.ant-steps-item-content {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.ant-steps-item-tail {
|
|
top: 8px;
|
|
margin-inline-start: 53px;
|
|
padding: 4px 12px;
|
|
}
|
|
}
|
|
|
|
.ant-steps-item-title {
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
|
|
color: #8F9296;
|
|
}
|
|
`
|
|
export const StyledBar = styled.div`
|
|
height: 5px;
|
|
margin-bottom: 9px;
|
|
position: relative;
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
height: 5px;
|
|
width: 134px;
|
|
background: #000022;
|
|
border-radius: 5px;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translate3d(-50%, 0, 0);
|
|
}
|
|
`
|
|
|
|
export const Steps: FC<StepsProps> = ({ items, current = 0, barStyle, showBar, ...props }) => {
|
|
const formattedItems = items.map((item, index) => {
|
|
return {
|
|
...item,
|
|
icon: <StepIcon active={index <= current}>{index + 1}</StepIcon>
|
|
}
|
|
})
|
|
const isSmallScreen = useBreakpoint({ s: true, down: true })
|
|
return (
|
|
<>
|
|
<StyledSteps responsive={false} labelPlacement="vertical" {...props} current={current} items={formattedItems} />
|
|
{isSmallScreen || showBar ? <StyledBar style={barStyle} /> : null}
|
|
</>
|
|
)
|
|
}
|