@yogiswara/honcho-editor-ui 3.6.4 → 3.6.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
interface HImageEditorSkeletonProps {
|
|
2
|
+
onBack?: () => void;
|
|
3
|
+
}
|
|
4
|
+
export default function HImageEditorSkeleton(props: HImageEditorSkeletonProps): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export {};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Stack, Paper, Skeleton, Box } from "@mui/material";
|
|
2
|
+
import { Stack, IconButton, Paper, Skeleton, Box, CardMedia } from "@mui/material";
|
|
3
3
|
import { alpha } from '@mui/material/styles';
|
|
4
4
|
import useColors from '../../themes/colors';
|
|
5
5
|
import useIsMobile from "../../utils/isMobile";
|
|
6
|
-
export default function HImageEditorSkeleton() {
|
|
6
|
+
export default function HImageEditorSkeleton(props) {
|
|
7
7
|
const colors = useColors();
|
|
8
8
|
const isMobile = useIsMobile();
|
|
9
9
|
return (_jsxs(Stack, { direction: "column", justifyContent: "center", sx: {
|
|
@@ -16,7 +16,18 @@ export default function HImageEditorSkeleton() {
|
|
|
16
16
|
pr: !isMobile ? "24px" : "6px",
|
|
17
17
|
pt: !isMobile ? "20px" : "15px",
|
|
18
18
|
pb: "12px"
|
|
19
|
-
}, children: [_jsx(Stack, { direction: "row", justifyContent: "flex-start", sx: { pl: !isMobile ? "0px" : "14px"
|
|
19
|
+
}, children: [_jsx(Stack, { direction: "row", justifyContent: "flex-start", sx: { pl: !isMobile ? "0px" : "14px", pt: !isMobile ? "4px" : "4px" }, children: _jsx(IconButton, { onClick: props.onBack, sx: {
|
|
20
|
+
mr: "0px",
|
|
21
|
+
pr: "0px",
|
|
22
|
+
'&:active': {
|
|
23
|
+
transform: 'scale(0.92)',
|
|
24
|
+
},
|
|
25
|
+
transition: 'transform 0.1s ease-in-out',
|
|
26
|
+
}, children: _jsx(CardMedia, { title: "back", src: "svg/Back.svg", component: "img" }) }) }), _jsx(Stack, { direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 0.1, sx: { pr: isMobile ? "10px" : "5px" }, children: _jsx(Skeleton, { variant: "rounded", width: "131px", height: "18px",
|
|
27
|
+
// animation="wave"
|
|
28
|
+
sx: {
|
|
29
|
+
bgcolor: alpha(colors.background, 0.1),
|
|
30
|
+
} }) })] }), _jsxs(Stack, { direction: isMobile ? "column" : "row", justifyContent: "space-between", alignItems: "stretch", sx: { width: '100%', flexGrow: 1, overflow: 'hidden', height: '100dvh' }, children: [_jsx(Box, { sx: {
|
|
20
31
|
flexGrow: 1,
|
|
21
32
|
display: 'flex',
|
|
22
33
|
justifyContent: 'center',
|
|
@@ -28,12 +39,12 @@ export default function HImageEditorSkeleton() {
|
|
|
28
39
|
right: '40px',
|
|
29
40
|
top: '55px',
|
|
30
41
|
width: '250px',
|
|
31
|
-
pt: '
|
|
42
|
+
pt: '4px',
|
|
32
43
|
height: 'calc(100vh - 70px)',
|
|
33
44
|
zIndex: 1200,
|
|
34
45
|
backgroundColor: '#000000',
|
|
35
46
|
overflow: 'hidden',
|
|
36
|
-
}, children: _jsxs(Stack, { direction: "row", sx: { height: '100%', p: "0px" }, children: [_jsxs(Stack, { direction: "column", sx: { height: '95%' }, children: [_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', p: "0px", pt: "8px" }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', py: "6px", gap: "8px" }, children: [_jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.1) } }), _jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.07) } })] }) }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', p: "0px", pt: "8px" }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', py: "6px", gap: "8px" }, children: [_jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.1) } }), _jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.07) } })] }) }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', p: "0px", pt: "8px" }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', py: "6px", gap: "8px" }, children: [_jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.1) } }), _jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.
|
|
47
|
+
}, children: _jsxs(Stack, { direction: "row", sx: { height: '100%', p: "0px" }, children: [_jsxs(Stack, { direction: "column", sx: { height: '95%' }, children: [_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', p: "0px", pt: "8px" }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', py: "6px", gap: "8px" }, children: [_jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.1), } }), _jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.07), } })] }) }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', p: "0px", pt: "8px" }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', py: "6px", gap: "8px" }, children: [_jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.1), } }), _jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.07), } })] }) }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', p: "0px", pt: "8px" }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', py: "6px", gap: "8px" }, children: [_jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.1), } }), _jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.07), } })] }) })] }), _jsxs(Stack, { justifyContent: "flex-start",
|
|
37
48
|
// spacing={"15px"}
|
|
38
49
|
sx: {
|
|
39
50
|
width: '10px',
|
|
@@ -45,13 +56,17 @@ export default function HImageEditorSkeleton() {
|
|
|
45
56
|
height: "52px",
|
|
46
57
|
py: "17px",
|
|
47
58
|
px: "16px",
|
|
48
|
-
}, children: _jsx(Skeleton, { variant: "circular", width: 18, height: 18, sx: { bgcolor: alpha(colors.background, 0.1) } }) }), _jsx(Box, { sx: {
|
|
59
|
+
}, children: _jsx(Skeleton, { variant: "circular", width: 18, height: 18, sx: { bgcolor: alpha(colors.background, 0.1), } }) }), _jsx(Box, { sx: {
|
|
49
60
|
width: "50px",
|
|
50
61
|
height: "52px",
|
|
51
|
-
|
|
52
|
-
|
|
62
|
+
py: "17px",
|
|
63
|
+
px: "16px",
|
|
64
|
+
}, children: _jsx(Skeleton, { variant: "circular", width: 18, height: 18, sx: { bgcolor: alpha(colors.background, 0.1), } }) }), _jsx(Box, { sx: {
|
|
65
|
+
width: "50px",
|
|
66
|
+
height: "52px",
|
|
67
|
+
py: "17px",
|
|
53
68
|
px: "16px",
|
|
54
|
-
}, children: _jsx(Skeleton, { variant: "circular", width: 18, height: 18, sx: { bgcolor: alpha(colors.background, 0.1) } }) })] })] }) })), isMobile && (_jsx(Paper, { elevation: 0, sx: {
|
|
69
|
+
}, children: _jsx(Skeleton, { variant: "circular", width: 18, height: 18, sx: { bgcolor: alpha(colors.background, 0.1), } }) })] })] }) })), isMobile && (_jsx(Paper, { elevation: 0, sx: {
|
|
55
70
|
position: 'fixed',
|
|
56
71
|
bottom: 0,
|
|
57
72
|
left: 0,
|
|
@@ -62,10 +77,10 @@ export default function HImageEditorSkeleton() {
|
|
|
62
77
|
py: "12px",
|
|
63
78
|
// px: "143px",
|
|
64
79
|
gap: "10px"
|
|
65
|
-
}, children: _jsx(Skeleton, { variant: "rounded", width: "156px", height: 18, sx: { bgcolor: alpha(colors.background, 0.1) } }) }), _jsx(Stack, { direction: "row", justifyContent: "center", alignItems: "center", sx: {
|
|
80
|
+
}, children: _jsx(Skeleton, { variant: "rounded", width: "156px", height: 18, sx: { bgcolor: alpha(colors.background, 0.1), } }) }), _jsx(Stack, { direction: "row", justifyContent: "center", alignItems: "center", sx: {
|
|
66
81
|
pt: "6px",
|
|
67
|
-
pb: "
|
|
82
|
+
pb: "13px",
|
|
68
83
|
px: "16px",
|
|
69
84
|
gap: "24px"
|
|
70
|
-
}, children: _jsx(Skeleton, { variant: "rounded", width: 74, height: 18, sx: { bgcolor: alpha(colors.background, 0.1) } }) })] }) }))] })] }));
|
|
85
|
+
}, children: _jsx(Skeleton, { variant: "rounded", width: 74, height: 18, sx: { bgcolor: alpha(colors.background, 0.1), } }) })] }) }))] })] }));
|
|
71
86
|
}
|