diff options
Diffstat (limited to 'subprojects/frontend/src/editor/AnimatedButton.tsx')
-rw-r--r-- | subprojects/frontend/src/editor/AnimatedButton.tsx | 14 |
1 files changed, 9 insertions, 5 deletions
diff --git a/subprojects/frontend/src/editor/AnimatedButton.tsx b/subprojects/frontend/src/editor/AnimatedButton.tsx index 7f6c61f0..f75d4617 100644 --- a/subprojects/frontend/src/editor/AnimatedButton.tsx +++ b/subprojects/frontend/src/editor/AnimatedButton.tsx | |||
@@ -1,6 +1,6 @@ | |||
1 | import Box from '@mui/material/Box'; | 1 | import Box from '@mui/material/Box'; |
2 | import Button from '@mui/material/Button'; | 2 | import Button from '@mui/material/Button'; |
3 | import { styled } from '@mui/material/styles'; | 3 | import { styled, type SxProps, type Theme } from '@mui/material/styles'; |
4 | import { type ReactNode, useLayoutEffect, useState } from 'react'; | 4 | import { type ReactNode, useLayoutEffect, useState } from 'react'; |
5 | 5 | ||
6 | const AnimatedButtonBase = styled(Button, { | 6 | const AnimatedButtonBase = styled(Button, { |
@@ -9,7 +9,9 @@ const AnimatedButtonBase = styled(Button, { | |||
9 | // Transition copied from `@mui/material/Button`. | 9 | // Transition copied from `@mui/material/Button`. |
10 | const colorTransition = theme.transitions.create( | 10 | const colorTransition = theme.transitions.create( |
11 | ['background-color', 'box-shadow', 'border-color', 'color'], | 11 | ['background-color', 'box-shadow', 'border-color', 'color'], |
12 | { duration: theme.transitions.duration.short }, | 12 | { |
13 | duration: theme.transitions.duration.short, | ||
14 | }, | ||
13 | ); | 15 | ); |
14 | return { | 16 | return { |
15 | width, | 17 | width, |
@@ -19,7 +21,6 @@ const AnimatedButtonBase = styled(Button, { | |||
19 | ${colorTransition}, | 21 | ${colorTransition}, |
20 | ${theme.transitions.create(['width'], { | 22 | ${theme.transitions.create(['width'], { |
21 | duration: theme.transitions.duration.short, | 23 | duration: theme.transitions.duration.short, |
22 | easing: theme.transitions.easing.easeOut, | ||
23 | })} | 24 | })} |
24 | `, | 25 | `, |
25 | '@media (prefers-reduced-motion: reduce)': { | 26 | '@media (prefers-reduced-motion: reduce)': { |
@@ -34,6 +35,7 @@ export default function AnimatedButton({ | |||
34 | color, | 35 | color, |
35 | disabled, | 36 | disabled, |
36 | startIcon, | 37 | startIcon, |
38 | sx, | ||
37 | children, | 39 | children, |
38 | }: { | 40 | }: { |
39 | 'aria-label'?: string; | 41 | 'aria-label'?: string; |
@@ -41,6 +43,7 @@ export default function AnimatedButton({ | |||
41 | color: 'error' | 'warning' | 'primary' | 'inherit'; | 43 | color: 'error' | 'warning' | 'primary' | 'inherit'; |
42 | disabled?: boolean; | 44 | disabled?: boolean; |
43 | startIcon: JSX.Element; | 45 | startIcon: JSX.Element; |
46 | sx?: SxProps<Theme> | undefined; | ||
44 | children?: ReactNode; | 47 | children?: ReactNode; |
45 | }): JSX.Element { | 48 | }): JSX.Element { |
46 | const [width, setWidth] = useState<string | undefined>(); | 49 | const [width, setWidth] = useState<string | undefined>(); |
@@ -65,9 +68,9 @@ export default function AnimatedButton({ | |||
65 | <AnimatedButtonBase | 68 | <AnimatedButtonBase |
66 | {...(ariaLabel === undefined ? {} : { 'aria-label': ariaLabel })} | 69 | {...(ariaLabel === undefined ? {} : { 'aria-label': ariaLabel })} |
67 | {...(onClick === undefined ? {} : { onClick })} | 70 | {...(onClick === undefined ? {} : { onClick })} |
71 | {...(sx === undefined ? {} : { sx })} | ||
68 | color={color} | 72 | color={color} |
69 | variant="outlined" | 73 | className="rounded shaded" |
70 | className="rounded" | ||
71 | disabled={disabled ?? false} | 74 | disabled={disabled ?? false} |
72 | startIcon={startIcon} | 75 | startIcon={startIcon} |
73 | width={width === undefined ? 'auto' : `calc(${width} + 50px)`} | 76 | width={width === undefined ? 'auto' : `calc(${width} + 50px)`} |
@@ -91,5 +94,6 @@ AnimatedButton.defaultProps = { | |||
91 | 'aria-label': undefined, | 94 | 'aria-label': undefined, |
92 | onClick: undefined, | 95 | onClick: undefined, |
93 | disabled: false, | 96 | disabled: false, |
97 | sx: undefined, | ||
94 | children: undefined, | 98 | children: undefined, |
95 | }; | 99 | }; |