IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-01-09 23:54:09 -06:00
Code Issues Packages Projects Releases Wiki Activity

Added beforeNext and beforeBack method in Wizard.

Browse Source
This commit is contained in:
Akshay Joshi 2021-12-22 14:25:08 +05:30
parent e302a6199a
commit ae73f13812
2 changed files with 23 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/pgadmin/static/js/helpers/wizard/Wizard.jsx
View File

@ -107,7 +107,9 @@ const useStyles = makeStyles((theme) =>
},
stepDefaultStyle: {
width: '100%',
height: '100%'
height: '100%',
paddingRight: '1em',
paddingBottom: '1em',
}
}),
@ -121,11 +123,25 @@ function Wizard({ stepList, onStepChange, onSave, className, ...props }) {
const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
// beforeNext should always return a promise
if(props.beforeNext) {
props.beforeNext(activeStep).then(()=>{
setActiveStep((prevActiveStep) => prevActiveStep + 1);
}).catch(()=>{});
} else {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
}
};
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1 < 0 ? prevActiveStep : prevActiveStep - 1);
// beforeBack should always return a promise
if(props.beforeBack) {
props.beforeBack(activeStep).then(()=>{
setActiveStep((prevActiveStep) => prevActiveStep - 1 < 0 ? prevActiveStep : prevActiveStep - 1);
}).catch(()=>{});
} else {
setActiveStep((prevActiveStep) => prevActiveStep - 1 < 0 ? prevActiveStep : prevActiveStep - 1);
}
};
React.useEffect(() => {
@ -158,7 +174,7 @@ function Wizard({ stepList, onStepChange, onSave, className, ...props }) {
{
React.Children.map(props.children, (child) => {
return (
<div hidden={child.props.stepId !== activeStep} className={clsx(child.props.className, classes.stepDefaultStyle)}>
<div hidden={child.props.stepId !== activeStep} className={clsx(classes.stepDefaultStyle, child.props.className)}>
{child}
</div>
);

28
web/pgadmin/static/js/helpers/wizard/WizardStep.jsx
View File

@ -8,29 +8,10 @@
//////////////////////////////////////////////////////////////
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Box } from '@material-ui/core';
import clsx from 'clsx';
import PropTypes from 'prop-types';
const useStyles = makeStyles(() =>
({
stepPanel: {
height: '100%',
width: '100%',
minHeight: '100px',
paddingBottom: '1em',
paddingRight: '1em',
overflow: 'auto',
}
}));
export default function WizardStep({stepId, className, ...props }) {
const classes = useStyles();
export default function WizardStep({ ...props }) {
return (
<Box id={stepId} className={clsx(classes.stepPanel, className)} style={props?.height ? {height: props.height} : null}>
{
<> {
React.Children.map(props.children, (child) => {
return (
<>
@ -39,13 +20,10 @@ export default function WizardStep({stepId, className, ...props }) {
);
})
}
</Box>
</>
);
}
WizardStep.propTypes = {
stepId: PropTypes.number,
height: PropTypes.number,
className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
};