106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
import React from 'react';
|
|
import { Stepper, Step, StepLabel, StepIconProps, Typography } from '@mui/material';
|
|
import AirplanemodeActiveIcon from '@mui/icons-material/AirplanemodeActive';
|
|
import StoreIcon from '@mui/icons-material/Store';
|
|
import bottleIcon from '../assets/icons/bottle-svgrepo-com-grey.svg';
|
|
import { Dewar } from "../../openapi";
|
|
|
|
// Constants
|
|
const ICON_STYLE = { width: 24, height: 24 };
|
|
|
|
// Define types for icons mapping.
|
|
const ICONS: { [key: number]: React.ReactElement } = {
|
|
0: <img src={bottleIcon} alt="Bottle Icon" style={ICON_STYLE} />,
|
|
1: <AirplanemodeActiveIcon style={ICON_STYLE} />,
|
|
2: <StoreIcon style={ICON_STYLE} />,
|
|
};
|
|
|
|
// Define StepIconContainer to accept correct props and handle typing better
|
|
interface StepIconContainerProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
color: string;
|
|
}
|
|
|
|
const StepIconContainer: React.FC<StepIconContainerProps> = ({ color, children, ...rest }) => (
|
|
<div style={{ color }} {...rest}>
|
|
{children}
|
|
</div>
|
|
);
|
|
|
|
type StepIconComponentProps = {
|
|
icon: number;
|
|
dewar: Dewar;
|
|
} & StepIconProps;
|
|
|
|
const StepIconComponent = ({ icon, dewar, ...props }: StepIconComponentProps) => {
|
|
const { iconIndex, color } = getIconProperties(icon, dewar);
|
|
|
|
return (
|
|
<StepIconContainer color={color} {...props}>
|
|
{ICONS[iconIndex]}
|
|
</StepIconContainer>
|
|
);
|
|
};
|
|
|
|
// Extracted function to determine icon properties
|
|
const getIconProperties = (icon: number, dewar: Dewar) => {
|
|
const iconIndex = icon - 1;
|
|
const color = determineIconColor(dewar, iconIndex);
|
|
return { iconIndex, color };
|
|
};
|
|
|
|
// Original determineIconColor function remains unchanged
|
|
const determineIconColor = (dewar: Dewar, index: number) => {
|
|
let color = 'grey';
|
|
|
|
if (index === 0) {
|
|
if (dewar.status === 'In Preparation') {
|
|
color = 'blue';
|
|
} else if (dewar.status === 'Ready for Shipping') {
|
|
color = 'green';
|
|
}
|
|
}
|
|
if (index === 1) {
|
|
if (dewar.status === 'Ready for Shipping' && dewar.shippingStatus !== 'shipped') {
|
|
color = 'blue';
|
|
} else if (dewar.shippingStatus === 'shipped') {
|
|
color = 'green';
|
|
}
|
|
}
|
|
if (index === 2) {
|
|
if (dewar.shippingStatus === 'shipped' && dewar.arrivalStatus !== 'arrived') {
|
|
color = 'blue';
|
|
} else if (dewar.arrivalStatus === 'arrived') {
|
|
color = 'green';
|
|
}
|
|
}
|
|
return color;
|
|
};
|
|
|
|
// Define your steps
|
|
const steps = ['In Preparation', 'Ready for Shipping', 'Arrived'];
|
|
|
|
const CustomStepper = ({ dewar }: { dewar: Dewar }) => {
|
|
// Determine the current active step
|
|
const activeStep = steps.indexOf(dewar.status) !== -1 ? steps.indexOf(dewar.status) : 0;
|
|
|
|
return (
|
|
<Stepper alternativeLabel activeStep={activeStep}>
|
|
{steps.map((label, index) => (
|
|
<Step key={label}>
|
|
<StepLabel
|
|
StepIconComponent={(stepProps) => <StepIconComponent {...stepProps} icon={index + 1} dewar={dewar} />}
|
|
>
|
|
{label}
|
|
</StepLabel>
|
|
<Typography variant="body2">
|
|
{index === 0 ? dewar.ready_date :
|
|
index === 1 ? dewar.shipping_date :
|
|
index === 2 ? dewar.arrival_date : ''}
|
|
</Typography>
|
|
</Step>
|
|
))}
|
|
</Stepper>
|
|
);
|
|
};
|
|
|
|
export default CustomStepper; |