Skip to content

Commit 1b740e2

Browse files
garronejgarronej
committed
Add more component in the playground
1 parent b1c5d7d commit 1b740e2

File tree

1 file changed

+268
-1
lines changed

1 file changed

+268
-1
lines changed

‎test/integration/next/pages/mui.tsx‎

Lines changed: 268 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,21 @@ import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
3131
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
3232
import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
3333

34+
import Box from '@mui/material/Box';
35+
import Badge from '@mui/material/Badge';
36+
import ButtonGroup from '@mui/material/ButtonGroup';
37+
import AddIcon from '@mui/icons-material/Add';
38+
import RemoveIcon from '@mui/icons-material/Remove';
39+
import MailIcon from '@mui/icons-material/Mail';
40+
41+
42+
import Stepper from '@mui/material/Stepper';
43+
import Step from '@mui/material/Step';
44+
import StepLabel from '@mui/material/StepLabel';
45+
46+
import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
47+
48+
3449
const { MuiDsfrThemeProvider } = createMuiDsfrThemeProvider({
3550
"augmentMuiTheme": noAugmentation
3651
});
@@ -75,6 +90,9 @@ export default function Mui() {
7590
<BasicChips />
7691
<IconMenu />
7792
<MaterialUIPickers />
93+
<BadgeVisibility />
94+
<HorizontalLinearStepper />
95+
<DataGridDemo />
7896
</>
7997
);
8098

@@ -370,4 +388,253 @@ function MaterialUIPickers() {
370388
</Stack>
371389
</LocalizationProvider>
372390
);
373-
}
391+
392+
}
393+
function BadgeVisibility() {
394+
const [count, setCount] = React.useState(1);
395+
const [invisible, setInvisible] = React.useState(false);
396+
397+
const handleBadgeVisibility = () => {
398+
setInvisible(!invisible);
399+
};
400+
401+
return (
402+
<Box
403+
sx={{
404+
mt: 7,
405+
color: 'action.active',
406+
display: 'flex',
407+
flexDirection: 'column',
408+
'& > *': {
409+
marginBottom: 2,
410+
},
411+
'& .MuiBadge-root': {
412+
marginRight: 4,
413+
},
414+
}}
415+
>
416+
<div>
417+
<Badge color="secondary" badgeContent={count}>
418+
<MailIcon />
419+
</Badge>
420+
<ButtonGroup>
421+
<Button
422+
aria-label="reduce"
423+
onClick={() => {
424+
setCount(Math.max(count - 1, 0));
425+
}}
426+
>
427+
<RemoveIcon fontSize="small" />
428+
</Button>
429+
<Button
430+
aria-label="increase"
431+
onClick={() => {
432+
setCount(count + 1);
433+
}}
434+
>
435+
<AddIcon fontSize="small" />
436+
</Button>
437+
</ButtonGroup>
438+
</div>
439+
<div>
440+
<Badge color="secondary" variant="dot" invisible={invisible}>
441+
<MailIcon />
442+
</Badge>
443+
<FormControlLabel
444+
sx={{ color: 'text.primary' }}
445+
control={<Switch checked={!invisible} onChange={handleBadgeVisibility} />}
446+
label="Show Badge"
447+
/>
448+
</div>
449+
</Box>
450+
);
451+
}
452+
453+
454+
const { HorizontalLinearStepper } = (() => {
455+
456+
const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
457+
458+
function HorizontalLinearStepper() {
459+
const [activeStep, setActiveStep] = React.useState(0);
460+
const [skipped, setSkipped] = React.useState(new Set<number>());
461+
462+
const isStepOptional = (step: number) => {
463+
return step === 1;
464+
};
465+
466+
const isStepSkipped = (step: number) => {
467+
return skipped.has(step);
468+
};
469+
470+
const handleNext = () => {
471+
let newSkipped = skipped;
472+
if (isStepSkipped(activeStep)) {
473+
newSkipped = new Set(newSkipped.values());
474+
newSkipped.delete(activeStep);
475+
}
476+
477+
setActiveStep((prevActiveStep) => prevActiveStep + 1);
478+
setSkipped(newSkipped);
479+
};
480+
481+
const handleBack = () => {
482+
setActiveStep((prevActiveStep) => prevActiveStep - 1);
483+
};
484+
485+
const handleSkip = () => {
486+
if (!isStepOptional(activeStep)) {
487+
// You probably want to guard against something like this,
488+
// it should never occur unless someone's actively trying to break something.
489+
throw new Error("You can't skip a step that isn't optional.");
490+
}
491+
492+
setActiveStep((prevActiveStep) => prevActiveStep + 1);
493+
setSkipped((prevSkipped) => {
494+
const newSkipped = new Set(prevSkipped.values());
495+
newSkipped.add(activeStep);
496+
return newSkipped;
497+
});
498+
};
499+
500+
const handleReset = () => {
501+
setActiveStep(0);
502+
};
503+
504+
return (
505+
<Box sx={{ width: '100%', mt: 7 }}>
506+
<Stepper activeStep={activeStep}>
507+
{steps.map((label, index) => {
508+
const stepProps: { completed?: boolean } = {};
509+
const labelProps: {
510+
optional?: React.ReactNode;
511+
} = {};
512+
if (isStepOptional(index)) {
513+
labelProps.optional = (
514+
<Typography variant="caption">Optional</Typography>
515+
);
516+
}
517+
if (isStepSkipped(index)) {
518+
stepProps.completed = false;
519+
}
520+
return (
521+
<Step key={label} {...stepProps}>
522+
<StepLabel {...labelProps}>{label}</StepLabel>
523+
</Step>
524+
);
525+
})}
526+
</Stepper>
527+
{activeStep === steps.length ? (
528+
<React.Fragment>
529+
<Typography sx={{ mt: 2, mb: 1 }}>
530+
All steps completed - you&apos;re finished
531+
</Typography>
532+
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
533+
<Box sx={{ flex: '1 1 auto' }} />
534+
<Button onClick={handleReset}>Reset</Button>
535+
</Box>
536+
</React.Fragment>
537+
) : (
538+
<React.Fragment>
539+
<Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
540+
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
541+
<Button
542+
color="inherit"
543+
disabled={activeStep === 0}
544+
onClick={handleBack}
545+
sx={{ mr: 1 }}
546+
>
547+
Back
548+
</Button>
549+
<Box sx={{ flex: '1 1 auto' }} />
550+
{isStepOptional(activeStep) && (
551+
<Button color="inherit" onClick={handleSkip} sx={{ mr: 1 }}>
552+
Skip
553+
</Button>
554+
)}
555+
<Button onClick={handleNext}>
556+
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
557+
</Button>
558+
</Box>
559+
</React.Fragment>
560+
)}
561+
</Box>
562+
);
563+
}
564+
565+
566+
return { HorizontalLinearStepper };
567+
568+
569+
})();
570+
571+
572+
const { DataGridDemo } = (() => {
573+
574+
575+
576+
const columns: GridColDef[] = [
577+
{ field: 'id', headerName: 'ID', width: 90 },
578+
{
579+
field: 'firstName',
580+
headerName: 'First name',
581+
width: 150,
582+
editable: true,
583+
},
584+
{
585+
field: 'lastName',
586+
headerName: 'Last name',
587+
width: 150,
588+
editable: true,
589+
},
590+
{
591+
field: 'age',
592+
headerName: 'Age',
593+
type: 'number',
594+
width: 110,
595+
editable: true,
596+
},
597+
{
598+
field: 'fullName',
599+
headerName: 'Full name',
600+
description: 'This column has a value getter and is not sortable.',
601+
sortable: false,
602+
width: 160,
603+
valueGetter: (params: GridValueGetterParams) =>
604+
`${params.row.firstName || ''} ${params.row.lastName || ''}`,
605+
},
606+
];
607+
608+
const rows = [
609+
{ id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
610+
{ id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
611+
{ id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
612+
{ id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
613+
{ id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
614+
{ id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
615+
{ id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
616+
{ id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
617+
{ id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
618+
];
619+
620+
function DataGridDemo() {
621+
return (
622+
<Box sx={{ height: 400, width: '100%', mt: 7 }}>
623+
<DataGrid
624+
rows={rows}
625+
columns={columns}
626+
pageSize={5}
627+
rowsPerPageOptions={[5]}
628+
checkboxSelection
629+
disableSelectionOnClick
630+
experimentalFeatures={{ newEditingApi: true }}
631+
/>
632+
</Box>
633+
);
634+
}
635+
636+
return { DataGridDemo };
637+
638+
639+
640+
})();

0 commit comments

Comments
 (0)