Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | 66x 66x 1x 1x 1x 3x 3x 3x 1x 3x 3x 3x 3x 3x 3x 3x 3x 1x 1x | import React, { ReactElement } from 'react';
import { Steps, Tooltip } from 'antd';
import { PauseCircleOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import { WizardMetaProps } from '@props/RecordProps';
import { DynamicIcon } from "../../components";
const { Step } = Steps;
const StepsComponent = (props: {
wizardDirection: 'vertical' | 'horizontal';
wizardMeta?: WizardMetaProps;
current: number;
disabledSteps?: Array<string>;
}): ReactElement => {
const { wizardMeta, current, disabledSteps, wizardDirection } = props;
const { t } = useTranslation();
const trimDescription = (desc?: string): string => {
Iif (desc == null) {
return "";
}
Iif (desc.length > 45) {
return desc.substr(0, 45) + "...";
}
return desc;
};
function getDisabledToolTipElem(title: string, showIcon: boolean): React.ReactNode {
return (
<Tooltip title={t("This step is disabled based on input data and server side logic")}>
{title} {showIcon ? <PauseCircleOutlined /> : ""}
</Tooltip>
);
}
const stepElems = wizardMeta?.steps.map((step, idx) => {
const { id, name, label, description, icon } = step;
const status = (idx > current) ? "wait" : (idx === current ? "process" : "finish");
const stepIcon = (icon == null) ? undefined : <DynamicIcon type={icon} />;
const isDisabledStep = disabledSteps?.includes(name);
const displayLabel = label ?? name;
const trimmedDesc = trimDescription(description);
const title = isDisabledStep ? getDisabledToolTipElem(displayLabel, true) : displayLabel;
return (<Step
status={status}
title={title}
icon={stepIcon}
description={trimmedDesc}
key={id}
disabled={isDisabledStep}
/>);
});
const stepsElem = (
<div className={`wizard-steps-${wizardDirection}`}>
<Steps
direction={wizardDirection === "vertical" ? "horizontal" : "vertical"}
current={current}
>
{stepElems}
</Steps>
</div>
);
return stepsElem;
};
export default StepsComponent;
|