Skip to content

Commit

Permalink
update demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbrookes
mbrookes committed Sep 12, 2020
1 parent 36daf97 commit 86fb915
Show file tree
Hide file tree
Showing 21 changed files with 477 additions and 1,419 deletions.
105 changes: 17 additions & 88 deletions docs/src/pages/components/steppers/CustomizedSteppers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,15 @@ import SettingsIcon from '@material-ui/icons/Settings';
import GroupAddIcon from '@material-ui/icons/GroupAdd';
import VideoLabelIcon from '@material-ui/icons/VideoLabel';
import StepConnector from '@material-ui/core/StepConnector';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles({
root: {
width: '100%',
},
quontoStepper: {
marginBottom: 32,
},
});

const QontoConnector = withStyles({
alternativeLabel: {
Expand Down Expand Up @@ -177,66 +184,22 @@ ColorlibStepIcon.propTypes = {
icon: PropTypes.node,
};

const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
},
button: {
marginRight: theme.spacing(1),
},
instructions: {
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),
},
}));

function getSteps() {
return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
}

function getStepContent(step) {
switch (step) {
case 0:
return 'Select campaign settings...';
case 1:
return 'What is an ad group anyways?';
case 2:
return 'This is the bit I really care about!';
default:
return 'Unknown step';
}
}
const steps = [
'Select campaign settings',
'Create an ad group',
'Create an ad',
];

export default function CustomizedSteppers() {
const classes = useStyles();
const [activeStep, setActiveStep] = React.useState(1);
const steps = getSteps();

const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};

const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};

const handleReset = () => {
setActiveStep(0);
};

return (
<div className={classes.root}>
<Stepper alternativeLabel activeStep={activeStep}>
{steps.map((label) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
<Stepper
alternativeLabel
activeStep={activeStep}
activeStep={1}
connector={<QontoConnector />}
className={classes.quontoStepper}
>
{steps.map((label) => (
<Step key={label}>
Expand All @@ -246,7 +209,7 @@ export default function CustomizedSteppers() {
</Stepper>
<Stepper
alternativeLabel
activeStep={activeStep}
activeStep={1}
connector={<ColorlibConnector />}
>
{steps.map((label) => (
Expand All @@ -255,40 +218,6 @@ export default function CustomizedSteppers() {
</Step>
))}
</Stepper>
<div>
{activeStep === steps.length ? (
<div>
<Typography className={classes.instructions}>
All steps completed - you&apos;re finished
</Typography>
<Button onClick={handleReset} className={classes.button}>
Reset
</Button>
</div>
) : (
<div>
<Typography className={classes.instructions}>
{getStepContent(activeStep)}
</Typography>
<div>
<Button
disabled={activeStep === 0}
onClick={handleBack}
className={classes.button}
>
Back
</Button>
<Button
variant="contained"
onClick={handleNext}
className={classes.button}
>
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</Button>
</div>
</div>
)}
</div>
</div>
);
}
114 changes: 18 additions & 96 deletions docs/src/pages/components/steppers/CustomizedSteppers.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
import * as React from 'react';
import {
makeStyles,
Theme,
createStyles,
withStyles,
} from '@material-ui/core/styles';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
Expand All @@ -14,10 +9,17 @@ import SettingsIcon from '@material-ui/icons/Settings';
import GroupAddIcon from '@material-ui/icons/GroupAdd';
import VideoLabelIcon from '@material-ui/icons/VideoLabel';
import StepConnector from '@material-ui/core/StepConnector';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import { StepIconProps } from '@material-ui/core/StepIcon';

const useStyles = makeStyles({
root: {
width: '100%',
},
quontoStepper: {
marginBottom: 32,
},
});

const QontoConnector = withStyles({
alternativeLabel: {
top: 10,
Expand Down Expand Up @@ -152,68 +154,22 @@ function ColorlibStepIcon(props: StepIconProps) {
);
}

const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: '100%',
},
button: {
marginRight: theme.spacing(1),
},
instructions: {
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),
},
}),
);

function getSteps() {
return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
}

function getStepContent(step: number) {
switch (step) {
case 0:
return 'Select campaign settings...';
case 1:
return 'What is an ad group anyways?';
case 2:
return 'This is the bit I really care about!';
default:
return 'Unknown step';
}
}
const steps = [
'Select campaign settings',
'Create an ad group',
'Create an ad',
];

export default function CustomizedSteppers() {
const classes = useStyles();
const [activeStep, setActiveStep] = React.useState(1);
const steps = getSteps();

const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};

const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};

const handleReset = () => {
setActiveStep(0);
};

return (
<div className={classes.root}>
<Stepper alternativeLabel activeStep={activeStep}>
{steps.map((label) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
<Stepper
alternativeLabel
activeStep={activeStep}
activeStep={1}
connector={<QontoConnector />}
className={classes.quontoStepper}
>
{steps.map((label) => (
<Step key={label}>
Expand All @@ -223,7 +179,7 @@ export default function CustomizedSteppers() {
</Stepper>
<Stepper
alternativeLabel
activeStep={activeStep}
activeStep={1}
connector={<ColorlibConnector />}
>
{steps.map((label) => (
Expand All @@ -232,40 +188,6 @@ export default function CustomizedSteppers() {
</Step>
))}
</Stepper>
<div>
{activeStep === steps.length ? (
<div>
<Typography className={classes.instructions}>
All steps completed - you&apos;re finished
</Typography>
<Button onClick={handleReset} className={classes.button}>
Reset
</Button>
</div>
) : (
<div>
<Typography className={classes.instructions}>
{getStepContent(activeStep)}
</Typography>
<div>
<Button
disabled={activeStep === 0}
onClick={handleBack}
className={classes.button}
>
Back
</Button>
<Button
variant="contained"
onClick={handleNext}
className={classes.button}
>
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</Button>
</div>
</div>
)}
</div>
</div>
);
}
Loading

0 comments on commit 86fb915

Please sign in to comment.