@yogiswara/honcho-editor-ui 3.4.8 → 3.4.10
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,13 +1,18 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
2
|
-
import { Stack, IconButton, CardMedia, MenuItem, ListItemText, ListItemIcon, Menu, Typography } from "@mui/material";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Stack, IconButton, CardMedia, MenuItem, ListItemText, ListItemIcon, Menu, Box, Typography } from "@mui/material";
|
|
3
3
|
import useHonchoTypography from "../../themes/honchoTheme";
|
|
4
4
|
import useColors from '../../themes/colors';
|
|
5
5
|
import useIsMobile from "../../utils/isMobile";
|
|
6
|
+
import { MinusCirlce, TickCircle } from "iconsax-react";
|
|
6
7
|
export default function HHeaderEditor(props) {
|
|
8
|
+
props.totalCount = props.totalCount || 0;
|
|
9
|
+
props.selectedCount = props.selectedCount || 0;
|
|
7
10
|
const typography = useHonchoTypography();
|
|
8
11
|
const colors = useColors();
|
|
9
12
|
const open = Boolean(props.anchorEl);
|
|
10
13
|
const isMobile = useIsMobile();
|
|
14
|
+
const isAllSelected = props.selectedCount === props.totalCount && props.totalCount > 0;
|
|
15
|
+
const isPartiallySelected = props.selectedCount > 0 && props.selectedCount < props.totalCount;
|
|
11
16
|
return (_jsx(_Fragment, { children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", width: "100%", sx: {
|
|
12
17
|
id: 'HHeaderEditor',
|
|
13
18
|
pr: !isMobile ? "24px" : "6px",
|
|
@@ -16,15 +21,26 @@ export default function HHeaderEditor(props) {
|
|
|
16
21
|
left: isMobile ? 0 : 'auto',
|
|
17
22
|
right: isMobile ? 0 : 'auto',
|
|
18
23
|
zIndex: 1300,
|
|
19
|
-
backgroundColor: colors.onBackground,
|
|
24
|
+
backgroundColor: isMobile ? colors.onBackground : 'transparent',
|
|
20
25
|
pt: !isMobile ? "20px" : "15px",
|
|
21
|
-
pb: "12px"
|
|
22
|
-
}, children: [_jsx(Stack, { direction: "row", justifyContent: "flex-start", sx: { pl: !isMobile ? "0px" : "14px" }, children: _jsx(IconButton, { "aria-label": "back", onClick: props.onBack, sx: {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
pb: "12px"
|
|
27
|
+
}, children: [_jsx(Stack, { direction: "row", justifyContent: "flex-start", sx: { pl: !isMobile ? "0px" : "14px" }, children: _jsxs(Box, { sx: { flexGrow: 0, display: "flex", alignItems: "center", m: "0px", p: "0px" }, children: [_jsx(IconButton, { "aria-label": "back", onClick: props.onBack, sx: {
|
|
28
|
+
mr: "0px",
|
|
29
|
+
pr: "0px",
|
|
30
|
+
'&:active': {
|
|
31
|
+
transform: 'scale(0.92)',
|
|
32
|
+
},
|
|
33
|
+
transition: 'transform 0.1s ease-in-out',
|
|
34
|
+
}, children: _jsx(CardMedia, { title: "back", src: "svg/Back.svg", component: "img" }) }), props.isSelectedMode && (_jsxs(_Fragment, { children: [_jsx(IconButton, { onClick: props.onSelectAll, color: "inherit", "aria-label": "select all", sx: {
|
|
35
|
+
ml: "4px",
|
|
36
|
+
pl: "0px",
|
|
37
|
+
'&:active': {
|
|
38
|
+
transform: 'scale(0.92)',
|
|
39
|
+
},
|
|
40
|
+
transition: 'transform 0.1s ease-in-out',
|
|
41
|
+
}, children: isAllSelected ? (_jsx(TickCircle, { variant: "Bold", color: colors.surface || "white", size: 24 })) : isPartiallySelected ? (_jsx(MinusCirlce, { variant: "Bold", color: colors.surface || "white", size: 24 })) : (_jsx(TickCircle, { variant: "Linear", color: colors.surface || "white", size: 24 })) }), _jsx(Typography, { variant: "titleSmall", noWrap: true, sx: {
|
|
42
|
+
color: colors.surface || "white",
|
|
43
|
+
}, children: `${props.selectedCount}` })] }))] }) }), _jsxs(Stack, { direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 0.1, children: [_jsx(IconButton, { "aria-label": "undo", onClick: props.onUndo, sx: { color: colors.outlineVariant, opacity: props.canUndo ? 1 : 0.5 }, disabled: !props.canUndo, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/undo-editor.svg" }) }), _jsx(IconButton, { "aria-label": "redo", onClick: props.onRedo, sx: { color: colors.outlineVariant, opacity: props.canRedo ? 1 : 0.5 }, disabled: !props.canRedo, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/redo-editor.svg" }) }), _jsx(IconButton, { "aria-label": "option", onClick: props.onMenuClick, "aria-controls": open ? 'options-menu' : undefined, "aria-haspopup": "true", "aria-expanded": open ? 'true' : undefined, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/dots-editor.svg" }) }), _jsxs(Menu, { id: "options-menu", anchorEl: props.anchorEl, open: open, onClose: props.onMenuClose, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' }, slotProps: {
|
|
28
44
|
paper: {
|
|
29
45
|
sx: {
|
|
30
46
|
backgroundColor: colors.onBackground,
|
|
@@ -32,7 +48,7 @@ export default function HHeaderEditor(props) {
|
|
|
32
48
|
border: `1px solid ${colors.outlineVariant}`,
|
|
33
49
|
},
|
|
34
50
|
},
|
|
35
|
-
}, children: [_jsxs(MenuItem, { onClick: props.onRevert, children: [_jsx(ListItemIcon, { sx: { minWidth: 0, mr: "0px", px: "0px" }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/revert-editor.svg", sx: { width: "20px", height: "20px" } }) }), _jsx(ListItemText, { children: _jsx(Typography, { sx: { fontSize: "14px", color: colors.surface }, children: "Revert to original" }) })] }), _jsxs(MenuItem, { onClick: props.onCopyEdit, disabled: !props.isCopyEnabled, children: [_jsx(ListItemIcon, { sx: { minWidth: 0, mr: "0px", px: "0px" }, children: _jsx(CardMedia, { component: "img", image: !props.isCopyEnabled ? "/v1/svg/copy-editor-grey.svg" : "/v1/svg/copy-editor.svg", sx: { width: "20px", height: "20px" } }) }), _jsx(ListItemText, { children: _jsx(Typography, { sx: { fontSize: "14px", color: !props.isCopyEnabled ? colors.
|
|
36
|
-
_jsx(ListItemIcon, { sx: { marginLeft: 'auto' }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/shortcut-copy-editor.svg", sx: { width: "25px", height: "20px" } }) })] }), _jsxs(MenuItem, { onClick: props.onPasteEdit, disabled: !props.isPasteEnabled, children: [_jsx(ListItemIcon, { sx: { minWidth: 0, mr: "0px", px: "0px" }, children: _jsx(CardMedia, { component: "img", image: !props.isPasteEnabled ? "/v1/svg/paste-editor.svg" : "/v1/svg/paste-white.svg", sx: { width: "20px", height: "20px" } }) }), _jsx(ListItemText, { children: _jsx(Typography, { sx: { fontSize: "14px", color: !props.isPasteEnabled ? colors.
|
|
51
|
+
}, children: [_jsxs(MenuItem, { onClick: props.onRevert, children: [_jsx(ListItemIcon, { sx: { minWidth: 0, mr: "0px", px: "0px" }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/revert-editor.svg", sx: { width: "20px", height: "20px" } }) }), _jsx(ListItemText, { children: _jsx(Typography, { sx: { fontSize: "14px", color: colors.surface }, children: "Revert to original" }) })] }), _jsxs(MenuItem, { onClick: props.onCopyEdit, disabled: !props.isCopyEnabled, children: [_jsx(ListItemIcon, { sx: { minWidth: 0, mr: "0px", px: "0px" }, children: _jsx(CardMedia, { component: "img", image: !props.isCopyEnabled ? "/v1/svg/copy-editor-grey.svg" : "/v1/svg/copy-editor.svg", sx: { width: "20px", height: "20px" } }) }), _jsx(ListItemText, { children: _jsx(Typography, { sx: { fontSize: "14px", color: !props.isCopyEnabled ? colors.onSurfaceVariant : colors.surface }, children: "Copy edits" }) }), !isMobile &&
|
|
52
|
+
_jsx(ListItemIcon, { sx: { marginLeft: 'auto' }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/shortcut-copy-editor.svg", sx: { width: "25px", height: "20px" } }) })] }), _jsxs(MenuItem, { onClick: props.onPasteEdit, disabled: !props.isPasteEnabled, children: [_jsx(ListItemIcon, { sx: { minWidth: 0, mr: "0px", px: "0px" }, children: _jsx(CardMedia, { component: "img", image: !props.isPasteEnabled ? "/v1/svg/paste-editor.svg" : "/v1/svg/paste-white.svg", sx: { width: "20px", height: "20px" } }) }), _jsx(ListItemText, { children: _jsx(Typography, { sx: { fontSize: "14px", color: !props.isPasteEnabled ? colors.onSurfaceVariant : colors.surface }, children: "Paste edits" }) }), !isMobile &&
|
|
37
53
|
_jsx(ListItemIcon, { sx: { marginLeft: '30px' }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/shortcut-paste-editor.svg", sx: { width: "25px", height: "20px" } }) })] })] })] })] }) }));
|
|
38
54
|
}
|