110 lines
2.2 KiB
TypeScript
110 lines
2.2 KiB
TypeScript
import { Steps, Typography } from 'antd';
|
|
import _ from 'lodash';
|
|
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import { ProviderType } from '../config';
|
|
|
|
const { Text } = Typography;
|
|
|
|
const ANTD_STEP_KEYS = [
|
|
'title',
|
|
'icon',
|
|
'status',
|
|
'disabled',
|
|
'subTitle'
|
|
] as const;
|
|
|
|
const Wrapper = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
`;
|
|
|
|
/**
|
|
* --steps-item-base-width: 20px; type="panel"
|
|
*/
|
|
const Box = styled.div`
|
|
.indicates {
|
|
color: var(--ant-color-text-tertiary);
|
|
font-size: 14px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.ant-steps {
|
|
.ant-steps-item {
|
|
--steps-item-base-width: 20px;
|
|
}
|
|
.ant-steps-item-rail-wait {
|
|
--steps-item-solid-line-color: var(--ant-color-split);
|
|
}
|
|
.ant-steps-item-subtitle {
|
|
margin-left: 6px;
|
|
font-size: 13px;
|
|
color: var(--ant-color-text-tertiary);
|
|
}
|
|
&:not(.ant-steps-panel) {
|
|
.ant-steps-item-finish {
|
|
--steps-item-icon-bg-color: var(--ant-color-primary);
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
const ClusterSteps: React.FC<{
|
|
currentStep: number;
|
|
onChange?: (step: number) => void;
|
|
steps: any[];
|
|
selectedProvider?: ProviderType;
|
|
}> = (props) => {
|
|
const { steps, currentStep = 0, onChange } = props;
|
|
|
|
const visibleSteps = steps
|
|
.filter((step) => !step.hideInSteps)
|
|
.map((step, index) => {
|
|
return {
|
|
..._.pick(step, ANTD_STEP_KEYS),
|
|
subTitle: index === 0 ? <span>[{props.selectedProvider}]</span> : ''
|
|
};
|
|
});
|
|
|
|
const styles: Record<string, any> = {
|
|
root: {
|
|
'--ant-steps-description-max-width': 'auto'
|
|
},
|
|
item: {
|
|
paddingBlock: 0
|
|
},
|
|
itemIcon: {
|
|
fontSize: 0,
|
|
width: 8,
|
|
height: 8,
|
|
marginInlineStart: 0
|
|
},
|
|
itemWrapper: {
|
|
alignItems: 'center'
|
|
},
|
|
itemRail: {
|
|
borderWidth: 1.5,
|
|
borderRadius: 1,
|
|
insetInlineStart: 10,
|
|
insetInlineEnd: 2,
|
|
'--steps-horizontal-rail-margin': '12px'
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box>
|
|
<Wrapper>
|
|
<Steps
|
|
current={currentStep}
|
|
items={visibleSteps}
|
|
variant="filled"
|
|
size="small"
|
|
styles={styles}
|
|
></Steps>
|
|
</Wrapper>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default ClusterSteps;
|