Skip to content

changed auto stepper as per new design requirement #132

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sreeneshkini merged 1 commit into from
Jun 6, 2024
Merged

changed auto stepper as per new design requirement #132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
display: flex;
align-items: baseline;
justify-content: flex-start;
border-bottom: 1px solid $color-brand-secondary-lightest;
gap: 8px;


}

.migration-vertical-stepper .stepper-title {
Expand All @@ -14,6 +18,9 @@
line-height: 135%;
color: $color-stepper-title;
margin-bottom: $space-10;
margin: 10px 20px;


}

.migration-vertical-stepper .stepper-discription {
Expand All @@ -24,6 +31,7 @@
line-height: 185%;
color: $color-base-gray-20;
margin-bottom: $space-10;
margin: 10px 20px;
}

.migration-vertical-stepper .summery-edit,
Expand All @@ -42,6 +50,7 @@
width: 2rem;
height: 2rem;
left: -17px;
overflow-y: auto;
}

.stepper-titleNote {
Expand Down Expand Up @@ -98,3 +107,11 @@
height: $space-24;
margin-right: $space-10;
}
.step_block{
border-radius: 4px;
border: 1px solid $color-brand-secondary-lightest;
background-color: $color-brand-white-base;
padding: 24px 30px, 24px, 30px;
gap: 24px;
margin-bottom: 40px;
}
218 changes: 74 additions & 144 deletions ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
import React, { useEffect, useImperativeHandle, useMemo, useState } from 'react';
import { Icon, Tooltip } from '@contentstack/venus-components';

// Utilities
import { addDomainInPath } from '../../../utilities/functions';

// Styles
import './AutoVerticalStepper.scss';
import { Tooltip, Heading } from '@contentstack/venus-components';
import { addDomainInPath } from '../../../utilities/functions';

export enum StepStatus {
ACTIVE = 'ACTIVE',
Expand All @@ -17,7 +13,6 @@ type AutoVerticalStepperProps = {
steps: any[];
className?: string;
stepComponentProps?: any;
stepTitleClassName?: string;
isEdit: boolean;
handleOnAllStepsComplete: (flag: boolean) => void;
};
Expand All @@ -26,7 +21,6 @@ export type AutoVerticalStepperComponentHandles = {
handleDynamicStepChange: (stepIndex: number, closeStep?: boolean) => void;
};

// eslint-disable-next-line react/display-name
const AutoVerticalStepper = React.forwardRef<
AutoVerticalStepperComponentHandles,
React.PropsWithChildren<AutoVerticalStepperProps>
Expand All @@ -39,7 +33,6 @@ const AutoVerticalStepper = React.forwardRef<
steps,
className = '',
stepComponentProps,
stepTitleClassName = '',
isEdit = false,
handleOnAllStepsComplete = () => {
return;
Expand All @@ -54,27 +47,6 @@ const AutoVerticalStepper = React.forwardRef<
}
}, [stepComponentProps?.step?.step_id, stepComponentProps?.connector?.group_name]);

const StepperStepTitleCreator: (data: any) => JSX.Element = (data: any) => {
return (
<>
<div className="migration-vertical-stepper-container">
<div>
<span className="stepper-title">{data.title}</span>
<span className="stepper-titleNote">{data.titleNote ? data.titleNote : ''}</span>
</div>
{data.lock ? (
<Tooltip content={data.step_lock_text} position="right" type="primary" maxWidth={500}>
<div className="" style={{ cursor: 'not-allowed', marginLeft: '10px' }}>
<img src={addDomainInPath('images/lock.png')} alt="lock-icon" />
</div>
</Tooltip>
) : null}
</div>
<div className="stepper-discription"> {data.description}</div>
</>
);
};

const handleStepChange = (stepIndex: number, closeStep = false) => {
if (closeStep) {
const data = stepStatus.map((s: any, i: number) => {
Expand All @@ -84,8 +56,6 @@ const AutoVerticalStepper = React.forwardRef<
return s;
});
setStepStatus(data);

//Call when all steps are completed;
handleOnAllStepsComplete(true);
} else {
const data: string[] = stepStatus.map((s: any, i: number) => {
Expand All @@ -98,16 +68,30 @@ const AutoVerticalStepper = React.forwardRef<
}
});
setStepStatus(data);
// setTimeout(() => {
// document.getElementById(steps?.[stepIndex + 1]?.step_id)?.scrollIntoView({
// behavior: 'smooth',
// block: 'center',
// inline: 'nearest'
// });
// }, 100);
}
};

const StepperStepTitleCreator: (data: any) => JSX.Element = (data: any) => {
return (
<>
<div className="migration-vertical-stepper-container">
<div>
<Heading className='stepper-title'tagName='h3' text={data.title}/>
<span className="stepper-titleNote">{data.titleNote ? data.titleNote : ''}</span>
</div>
{data.lock ? (
<Tooltip content={data.step_lock_text} position="right" type="primary" maxWidth={500}>
<div className="" style={{ cursor: 'not-allowed', marginLeft: '10px' }}>
<img src={addDomainInPath('images/lock.png')} alt="lock-icon" />
</div>
</Tooltip>
) : null}
</div>
<div className="stepper-discription"> {data.description}</div>
</>
);
};

const goToStep = (stepIndex: number) => {
const data: string[] = stepStatus.map((s: any, i: number) => {
if (s === StepStatus.ACTIVE && i !== stepIndex) {
Expand All @@ -124,12 +108,23 @@ const AutoVerticalStepper = React.forwardRef<
setStepStatus(data);
};

const summaryActivateStep = (e: any) => {
const index = e.currentTarget.getAttribute('data-step-index');
handleOnAllStepsComplete(false);

if (isEdit) {
goToStep(+index);
} else {
handleStepChange(index - 1);
}
};

// Export Methods to Parent Component
useImperativeHandle(ref, () => ({
handleDynamicStepChange: (stepIndex, closeStep = false) =>
handleStepChange(stepIndex, closeStep)
}));

return useMemo(() => {
const stepClassNameObject: any = {
[StepStatus.ACTIVE]: 'active',
Expand All @@ -150,133 +145,68 @@ const AutoVerticalStepper = React.forwardRef<
return stepStatus[idx];
};

const summaryActivateStep = (e: any) => {
const index = e.currentTarget.getAttribute('data-step-index');
handleOnAllStepsComplete(false);

if (isEdit) {
goToStep(+index);
} else {
handleStepChange(index - 1);
}
};

return (
<div className={`migration-vertical-stepper StepperWrapper ${className}`}>
<div className={`migration-vertical-stepper ${className}`}>
<ol className="Vertical">
{steps?.map((step: any, index: number) => {
const shouldShowIcon =
step?.title !== 'Select Stack' && step?.title !== 'Upload File'
? !step?.lock
: false;

const DataComponent = step?.data as React.ElementType;
const SummeryComponent = step?.summery as React.ElementType;


let stepClassName = stepClassNameObject[getStepStatus(index)];
if (step?.lock) stepClassName = 'completed';
const getGridientClass =
stepClassNameObject[`${getStepStatus(index)}__${getStepStatus(index + 1)}`];

return (
<li
id={step?.step_id}
className={`${stepClassName} ${getGridientClass}`}
className="step_block"
key={step?.step_id}
style={{ paddingBottom: '40px' }}
>
<div className={`step__title ${stepTitleClassName}`}>
<div className={`step__title `}>
{StepperStepTitleCreator(step)}
</div>
{stepClassName === 'disabled' ? (
<></>
) : (
<>
{stepClassName === 'active' ? (
<div className="step-content-wrapper">
<div className="action-content step-content">
<div
className={
step?.step_id === 'Step1' ||
step?.step_id === 'Step2' ||
step?.step_id === 'Step3'
? ''
: 'StepperWrapper__step'
<div className="step-content-wrapper">
<div className="action-content step-content">
<div
className={
step?.step_id === 'Step1' ||
step?.step_id === 'Step2' ||
step?.step_id === 'Step3'
? ''
: 'StepperWrapper__step'
}
onClick={
!step?.lock
? summaryActivateStep
: () => {
return;
}
>
<DataComponent
handleStepChange={handleStepChange}
currentStep={index}
{...(stepComponentProps && {
stepComponentProps: stepComponentProps
})}
/>
</div>
</div>
</div>
) : (
<></>
)}
{stepClassName === 'completed' ? (
<div
className={`action-summary-wrapper ${
shouldShowIcon ? '' : 'step-content-wrapper step-summary-wrapper'
}`}
data-step-index={index}
onClick={
!step?.lock
? summaryActivateStep
: () => {
return;
}
}
>
<div className="action-content step-content">
<div className={'StepperWrapper__step'}>
<SummeryComponent
onClick={
!step?.lock
? summaryActivateStep
: () => {
return;
}
}
currentStep={index}
stepData={step}
{...(stepComponentProps && {
stepComponentProps: {
...stepComponentProps,

//pass onStepLockHandler
...(step?.lock && {
handleOnStepLock: handleStepChange
})
}
})}
/>

{shouldShowIcon ? (
<span className="summery-edit">
<Icon icon="Edit" size="small" version="v2" />
</span>
) : (
<></>
)}
</div>
</div>
</div>
) : (
<></>
)}
</>
)}
}
>
{step.data && (
<step.data
handleStepChange={handleStepChange}
currentStep={index}
{...(stepComponentProps && {
stepComponentProps: stepComponentProps
})}
/>
)}
</div>
</div>
</div>
</li>
);
})}
</ol>
</div>

</div>

);

}, [steps, stepStatus]);
}
);

AutoVerticalStepper.displayName= 'AutoverticalStepper';
export default AutoVerticalStepper;