Skip to content

Commit 1fbdc61

Browse files
anserwaseemanserwaseem
committed
made AnimationControls common for all components using it
1 parent b9f5995 commit 1fbdc61

File tree

10 files changed

+202
-367
lines changed

10 files changed

+202
-367
lines changed

‎src/common/AnimationControls.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import {
2+
ButtonGroup,
3+
FormControl,
4+
InputLabel,
5+
Select,
6+
MenuItem,
7+
Button,
8+
} from "@mui/material";
9+
import { AnimationDurationOptions } from "../consts/AnimationDurationOptions";
10+
import PlayArrowRoundedIcon from "@mui/icons-material/PlayArrowRounded";
11+
import PauseRoundedIcon from "@mui/icons-material/PauseRounded";
12+
import ReplayRoundedIcon from "@mui/icons-material/ReplayRounded";
13+
import { AnimationControlsProps } from "./props/AnimationControlsProps";
14+
15+
export const AnimationControls = (props: AnimationControlsProps) => {
16+
return (
17+
<ButtonGroup disableElevation fullWidth variant="outlined" size="large">
18+
{props?.testStringTextFields}
19+
20+
<FormControl fullWidth>
21+
<InputLabel id="delay-select-label">Delay</InputLabel>
22+
<Select
23+
labelId="delay-select-label"
24+
id="delay-select"
25+
value={props.duration.toString()}
26+
label="Delay"
27+
onChange={props.handleDurationChange}
28+
>
29+
{AnimationDurationOptions.map((option) => (
30+
<MenuItem key={option} value={option}>
31+
{option}
32+
</MenuItem>
33+
))}
34+
</Select>
35+
</FormControl>
36+
37+
<Button
38+
onClick={props.handleAnimation}
39+
startIcon={
40+
props.isPlaying ? (
41+
<PauseRoundedIcon />
42+
) : props.isComplete ? (
43+
<ReplayRoundedIcon />
44+
) : (
45+
<PlayArrowRoundedIcon />
46+
)
47+
}
48+
>
49+
{props.isPlaying ? "Pause" : props.isComplete ? "Replay" : "Play"}
50+
</Button>
51+
52+
<Button
53+
variant={props.isComplete ? "contained" : "outlined"}
54+
onClick={props.showNextStep}
55+
disabled={props.isReady}
56+
>
57+
{props.isComplete ? "Complete" : "Next"}
58+
</Button>
59+
</ButtonGroup>
60+
);
61+
};

‎src/common/props/AnimationControlsProps.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { SelectChangeEvent } from "@mui/material";
2+
3+
export type AnimationControlsProps = {
4+
duration: number;
5+
isPlaying: boolean;
6+
isComplete: boolean;
7+
isReady: boolean;
8+
handleDurationChange: (event: SelectChangeEvent) => void;
9+
handleAnimation: () => void;
10+
showNextStep: () => void;
11+
testStringTextFields?: JSX.Element[];
12+
};

‎src/features/TestAString.tsx‎

Lines changed: 21 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,19 @@
1-
import Button from "@mui/material/Button";
2-
import TextField from "@mui/material/TextField";
3-
import Dialog from "@mui/material/Dialog";
4-
import DialogActions from "@mui/material/DialogActions";
5-
import DialogContent from "@mui/material/DialogContent";
6-
import DialogTitle from "@mui/material/DialogTitle";
71
import { useContext, useEffect, useState } from "react";
82
import { TestAStringProps } from "./props/TestAStringProps";
93
import {
104
Box,
115
Grid,
12-
ButtonGroup,
13-
FormControl,
14-
InputLabel,
15-
Select,
16-
MenuItem,
176
SelectChangeEvent,
187
DialogContentText,
8+
Dialog,
9+
Button,
10+
DialogActions,
11+
DialogContent,
12+
DialogTitle,
13+
TextField,
1914
} from "@mui/material";
2015
import { AnimationDurationOptions } from "../consts/AnimationDurationOptions";
2116
import { ToolsPlayground } from "./components/tools/Playground";
22-
import PlayArrowRoundedIcon from "@mui/icons-material/PlayArrowRounded";
23-
import PauseRoundedIcon from "@mui/icons-material/PauseRounded";
24-
import ReplayRoundedIcon from "@mui/icons-material/ReplayRounded";
2517
import { ToolsPlaygroundProps } from "./components/tools/props/PlaygroundProps";
2618
import { DraggableStateModel, TransitionModel } from "../models";
2719
import { DataContext } from "../pages/Editor";
@@ -37,6 +29,9 @@ import { CustomAppBar } from "../common/CustomAppBar";
3729
import { CustomDrawer } from "../common/CustomDrawer";
3830
import { CustomAppBarProps } from "../common/props/CustomAppBarProps";
3931
import { CustomDrawerProps } from "../common/props/CustomDrawerProps";
32+
import { AnimationControlsProps } from "../common/props/AnimationControlsProps";
33+
import { AnimationControls } from "../common/AnimationControls";
34+
import { GetTestStringTextFields } from "./components/testAString/GetTestStringTextFields";
4035

4136
const TestAString = (props: TestAStringProps) => {
4237
console.log("re rendering TestAString: props");
@@ -286,6 +281,17 @@ const TestAString = (props: TestAStringProps) => {
286281
},
287282
};
288283

284+
const animationControlsProps: AnimationControlsProps = {
285+
duration,
286+
isPlaying,
287+
isComplete,
288+
isReady,
289+
handleAnimation,
290+
showNextStep: showNextRow,
291+
handleDurationChange,
292+
testStringTextFields: GetTestStringTextFields(testString, testStringIndex),
293+
};
294+
289295
return (
290296
<>
291297
<Dialog open={props.isTestAStringDialogOpen} onClose={handleClose}>
@@ -332,79 +338,7 @@ const TestAString = (props: TestAStringProps) => {
332338
}}
333339
>
334340
<Grid item xs={12} alignItems={"center"}>
335-
<ButtonGroup
336-
disableElevation
337-
fullWidth
338-
variant="outlined"
339-
size="large"
340-
>
341-
{testString
342-
.replaceAll("^", "")
343-
.split("")
344-
.map((char, index) => (
345-
<TextField
346-
key={index}
347-
id={`testString${index}`}
348-
value={char}
349-
variant="standard"
350-
InputProps={{
351-
readOnly: true,
352-
sx: {
353-
textAlignLast: "center",
354-
},
355-
}}
356-
sx={{
357-
backgroundColor:
358-
Math.floor((testStringIndex - 1) / 2) === index
359-
? startingStateColor
360-
: "inherit",
361-
flexDirection: "inherit",
362-
borderRadius: "20px",
363-
border: `1px solid ${stateSelectedColor}`,
364-
borderWidth: "0 1px 0 1px",
365-
}}
366-
/>
367-
))}
368-
369-
<FormControl fullWidth>
370-
<InputLabel id="delay-select-label">Delay</InputLabel>
371-
<Select
372-
labelId="delay-select-label"
373-
id="delay-select"
374-
value={duration.toString()}
375-
label="Delay"
376-
onChange={handleDurationChange}
377-
>
378-
{AnimationDurationOptions.map((option) => (
379-
<MenuItem key={option} value={option}>
380-
{option}
381-
</MenuItem>
382-
))}
383-
</Select>
384-
</FormControl>
385-
386-
<Button
387-
onClick={handleAnimation}
388-
startIcon={
389-
isPlaying ? (
390-
<PauseRoundedIcon />
391-
) : isComplete ? (
392-
<ReplayRoundedIcon />
393-
) : (
394-
<PlayArrowRoundedIcon />
395-
)
396-
}
397-
>
398-
{isPlaying ? "Pause" : isComplete ? "Replay" : "Play"}
399-
</Button>
400-
<Button
401-
variant={isComplete ? "contained" : "outlined"}
402-
onClick={showNextRow}
403-
disabled={isReady}
404-
>
405-
{isComplete ? "Complete" : "Next"}
406-
</Button>
407-
</ButtonGroup>
341+
<AnimationControls {...animationControlsProps} />
408342
</Grid>
409343
{/* Playground grid */}
410344
<Grid item xs={12}>

‎src/features/components/minimzeDfa/EquivalentStates.tsx‎

Lines changed: 13 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,8 @@
11
import {
22
Alert,
33
Box,
4-
Button,
5-
ButtonGroup,
64
CssBaseline,
7-
FormControl,
85
Grid,
9-
InputLabel,
10-
MenuItem,
11-
Select,
126
SelectChangeEvent,
137
Snackbar,
148
} from "@mui/material";
@@ -17,9 +11,6 @@ import { useContext, useEffect, useState } from "react";
1711
import { AnimationDurationOptions } from "../../../consts/AnimationDurationOptions";
1812
import { PossibleTransitionValues } from "../../../consts/PossibleTransitionValues";
1913
import { EquivalentStatesProps } from "./props/EquivalentStatesProps";
20-
import PlayArrowRoundedIcon from "@mui/icons-material/PlayArrowRounded";
21-
import PauseRoundedIcon from "@mui/icons-material/PauseRounded";
22-
import ReplayRoundedIcon from "@mui/icons-material/ReplayRounded";
2314
import { MaxNumberOfStates } from "../../../consts/MaxNumberOfStates";
2415
import { ToolsTransitionTableProps } from "../tools/props/TransitionTableProps";
2516
import { DataContext } from "../../../pages/Editor";
@@ -35,6 +26,8 @@ import { CustomAppBar } from "../../../common/CustomAppBar";
3526
import { CustomDrawer } from "../../../common/CustomDrawer";
3627
import { CustomAppBarProps } from "../../../common/props/CustomAppBarProps";
3728
import { CustomDrawerProps } from "../../../common/props/CustomDrawerProps";
29+
import { AnimationControls } from "../../../common/AnimationControls";
30+
import { AnimationControlsProps } from "../../../common/props/AnimationControlsProps";
3831

3932
const columnNames = PossibleTransitionValues.filter((value) => value !== "^");
4033
let columnIndex = 0;
@@ -498,6 +491,16 @@ export const EquivalentStates = (props: EquivalentStatesProps) => {
498491
transitionTableProps: transitionTableProps,
499492
};
500493

494+
const animationControlsProps: AnimationControlsProps = {
495+
duration,
496+
isPlaying,
497+
isComplete,
498+
isReady,
499+
handleAnimation,
500+
showNextStep,
501+
handleDurationChange,
502+
};
503+
501504
return (
502505
<>
503506
<Box sx={{ display: "flex" }}>
@@ -558,50 +561,7 @@ export const EquivalentStates = (props: EquivalentStatesProps) => {
558561
<DrawerHeader />
559562
<Grid container>
560563
<Grid item alignItems={"center"} xs={12}>
561-
<ButtonGroup
562-
disableElevation
563-
fullWidth
564-
variant="outlined"
565-
size="large"
566-
>
567-
<FormControl fullWidth>
568-
<InputLabel id="delay-select-label">Delay</InputLabel>
569-
<Select
570-
labelId="delay-select-label"
571-
id="delay-select"
572-
value={duration.toString()}
573-
label="Delay"
574-
onChange={handleDurationChange}
575-
>
576-
{AnimationDurationOptions.map((option) => (
577-
<MenuItem key={option} value={option}>
578-
{option}
579-
</MenuItem>
580-
))}
581-
</Select>
582-
</FormControl>
583-
<Button
584-
onClick={handleAnimation}
585-
startIcon={
586-
isPlaying ? (
587-
<PauseRoundedIcon />
588-
) : isComplete ? (
589-
<ReplayRoundedIcon />
590-
) : (
591-
<PlayArrowRoundedIcon />
592-
)
593-
}
594-
>
595-
{isPlaying ? "Pause" : isComplete ? "Replay" : "Play"}
596-
</Button>
597-
<Button
598-
variant={isComplete ? "contained" : "outlined"}
599-
onClick={showNextStep}
600-
disabled={isReady}
601-
>
602-
{isComplete ? "Complete" : "Next"}
603-
</Button>
604-
</ButtonGroup>
564+
<AnimationControls {...animationControlsProps} />
605565
</Grid>
606566
<Grid item xs={12}>
607567
<Box

0 commit comments

Comments
 (0)