@yogiswara/honcho-editor-ui 3.4.1 → 3.4.3
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.
- package/dist/components/editor/HBulkPresetMobile.d.ts +2 -3
- package/dist/components/editor/HBulkPresetMobile.js +5 -2
- package/dist/components/editor/HHeaderEditor.d.ts +10 -2
- package/dist/components/editor/HHeaderEditor.js +4 -2
- package/dist/components/editor/HImageEditorBulkDekstop.d.ts +0 -6
- package/dist/components/editor/HImageEditorBulkDekstop.js +12 -8
- package/dist/components/editor/HImageEditorBulkMobile.d.ts +2 -3
- package/package.json +1 -1
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { SelectChangeEvent } from "@mui/material";
|
|
3
2
|
type Preset = {
|
|
4
3
|
id: string;
|
|
5
4
|
name: string;
|
|
@@ -8,8 +7,8 @@ interface Props {
|
|
|
8
7
|
presets: Preset[];
|
|
9
8
|
selectedPresetBulk: string;
|
|
10
9
|
onOpenPresetModalBulk: () => void;
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
onSelectPresetBulk: (id: string) => void;
|
|
11
|
+
onPresetMenuClickBulk: (event: React.MouseEvent<HTMLElement>, presetId: string) => void;
|
|
13
12
|
}
|
|
14
13
|
export default function HBulkPresetMobile(props: Props): import("react/jsx-runtime").JSX.Element;
|
|
15
14
|
export {};
|
|
@@ -10,7 +10,10 @@ export default function HBulkPresetMobile(props) {
|
|
|
10
10
|
const isExpanded = iconProps.className?.includes('MuiSelect-iconOpen');
|
|
11
11
|
return (_jsx(CardMedia, { component: "img", image: isExpanded ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px", right: '14px', position: 'absolute', pointerEvents: 'none' } }));
|
|
12
12
|
};
|
|
13
|
-
|
|
13
|
+
const handleSelectChange = (event) => {
|
|
14
|
+
props.onSelectPresetBulk(event.target.value); // Extracts the string value from the event
|
|
15
|
+
};
|
|
16
|
+
return (_jsx(_Fragment, { children: _jsxs(Stack, { direction: "column", sx: { px: "0px", mx: "16px", mt: "6px", mb: "0px" }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Preset" }), _jsx(FormControl, { fullWidth: true, children: _jsxs(Select, { fullWidth: true, value: props.selectedPresetBulk, onChange: handleSelectChange, IconComponent: CustomSelectIcon, renderValue: (selectedId) => {
|
|
14
17
|
// Uses props.presets to find the name
|
|
15
18
|
const selectedPresetBulkObject = props.presets.find(p => p.id === selectedId);
|
|
16
19
|
if (!selectedPresetBulkObject) {
|
|
@@ -22,5 +25,5 @@ export default function HBulkPresetMobile(props) {
|
|
|
22
25
|
transformOrigin: { vertical: 'bottom', horizontal: 'left' },
|
|
23
26
|
sx: { marginTop: '-10px' },
|
|
24
27
|
slotProps: { paper: { sx: { backgroundColor: colors.onBackground, color: colors.surface, border: `1px solid ${colors.onSurfaceVariant1}`, borderRadius: '4px', width: '328px' } } }
|
|
25
|
-
}, sx: { border: `1px solid ${colors.outlineVariant}`, height: '44px', width: '328px', mt: '6px' }, children: [props.presets.map((preset) => (_jsx(MenuItem, { value: preset.id, sx: { padding: '8px 10px', minHeight: 'auto', mb: '4px' }, children: _jsxs(Stack, { direction: "row", alignItems: "center", sx: { width: '100%' }, children: [_jsx(CardMedia, { component: "img", image: "v1/svg/check-ratio-editor.svg", sx: { width: "20px", height: "20px", mr: '12px', px: '0px', visibility: props.selectedPresetBulk === preset.id ? 'visible' : 'hidden' } }), _jsx(Typography, { sx: { width: '24px', textWrap: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'block', color: colors.surface, pr: "82px", pl: "0px", mr: "165px", justifyContent: 'flex-start', ...typography.bodyMedium }, children: preset.name }), _jsx(IconButton, { "aria-label": `Options for ${preset.name}`, onClick: (event) => props.
|
|
28
|
+
}, sx: { border: `1px solid ${colors.outlineVariant}`, height: '44px', width: '328px', mt: '6px' }, children: [props.presets.map((preset) => (_jsx(MenuItem, { value: preset.id, sx: { padding: '8px 10px', minHeight: 'auto', mb: '4px' }, children: _jsxs(Stack, { direction: "row", alignItems: "center", sx: { width: '100%' }, children: [_jsx(CardMedia, { component: "img", image: "v1/svg/check-ratio-editor.svg", sx: { width: "20px", height: "20px", mr: '12px', px: '0px', visibility: props.selectedPresetBulk === preset.id ? 'visible' : 'hidden' } }), _jsx(Typography, { sx: { width: '24px', textWrap: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'block', color: colors.surface, pr: "82px", pl: "0px", mr: "165px", justifyContent: 'flex-start', ...typography.bodyMedium }, children: preset.name }), _jsx(IconButton, { "aria-label": `Options for ${preset.name}`, onClick: (event) => props.onPresetMenuClickBulk(event, preset.id), sx: { padding: "0px", margin: "0px", mr: "0px" }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/dots-editor.svg", alt: "Options", sx: { width: '20px', height: '20px' } }) })] }) }, preset.id))), _jsx(Box, { sx: { px: '16px', my: '8px' }, children: _jsx(Button, { fullWidth: true, variant: "outlined", sx: { ...typography.labelMedium, height: '40px', pt: '5px', color: colors.onBackground, backgroundColor: colors.surface, borderRadius: '100px', borderColor: colors.surface, textTransform: 'none', '&:hover': { backgroundColor: '#e0e0e0', borderColor: colors.surface } }, onClick: props.onOpenPresetModalBulk, children: "Create Preset" }) })] }) })] }) }));
|
|
26
29
|
}
|
|
@@ -3,8 +3,13 @@ interface Props {
|
|
|
3
3
|
anchorEl?: null | HTMLElement;
|
|
4
4
|
valueSelect?: string;
|
|
5
5
|
isPasteEnabled?: boolean;
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
isCopyEnabled?: boolean;
|
|
7
|
+
canUndo?: boolean;
|
|
8
|
+
canRedo?: boolean;
|
|
9
|
+
isSelectedMode?: boolean;
|
|
10
|
+
isNoneSelected?: boolean;
|
|
11
|
+
selectedCount?: number;
|
|
12
|
+
totalCount?: number;
|
|
8
13
|
onBack?: () => void;
|
|
9
14
|
onUndo?: () => void;
|
|
10
15
|
onRedo?: () => void;
|
|
@@ -14,6 +19,9 @@ interface Props {
|
|
|
14
19
|
onMenuClick?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
15
20
|
onMenuClose?: () => void;
|
|
16
21
|
onSelectButton?: () => void;
|
|
22
|
+
onSelectAll?: () => void;
|
|
23
|
+
onSelectedMode?: () => void;
|
|
24
|
+
onCloseSelection?: () => void;
|
|
17
25
|
}
|
|
18
26
|
export default function HHeaderEditor(props: Props): import("react/jsx-runtime").JSX.Element;
|
|
19
27
|
export {};
|
|
@@ -17,12 +17,14 @@ export default function HHeaderEditor(props) {
|
|
|
17
17
|
right: isMobile ? 0 : 'auto',
|
|
18
18
|
zIndex: 1300,
|
|
19
19
|
backgroundColor: 'transparent',
|
|
20
|
+
pt: !isMobile ? "20px" : "15px",
|
|
21
|
+
pb: "12px",
|
|
20
22
|
}, children: [_jsx(Stack, { direction: "row", justifyContent: "flex-start", sx: { pl: !isMobile ? "0px" : "14px" }, children: _jsx(IconButton, { "aria-label": "back", onClick: props.onBack, sx: {
|
|
21
23
|
'&:active': {
|
|
22
24
|
transform: 'scale(0.92)',
|
|
23
25
|
},
|
|
24
26
|
transition: 'transform 0.1s ease-in-out',
|
|
25
|
-
}, children: _jsx(CardMedia, { title: "back", src: "svg/Back.svg", component: "img" }) }) }), _jsxs(Stack, { direction: "row", justifyContent: "flex-end", alignItems: "center",
|
|
27
|
+
}, children: _jsx(CardMedia, { title: "back", src: "svg/Back.svg", component: "img" }) }) }), _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: {
|
|
26
28
|
paper: {
|
|
27
29
|
sx: {
|
|
28
30
|
backgroundColor: colors.onBackground,
|
|
@@ -30,7 +32,7 @@ export default function HHeaderEditor(props) {
|
|
|
30
32
|
border: `1px solid ${colors.outlineVariant}`,
|
|
31
33
|
},
|
|
32
34
|
},
|
|
33
|
-
}, 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, children: [_jsx(ListItemIcon, { sx: { minWidth: 0, mr: "0px", px: "0px" }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/copy-editor.svg", sx: { width: "20px", height: "20px" } }) }), _jsx(ListItemText, { children: _jsx(Typography, { sx: { fontSize: "14px", color: colors.surface }, children: "Copy edits" }) }), !isMobile &&
|
|
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: "/v1/svg/copy-editor.svg", sx: { width: "20px", height: "20px" } }) }), _jsx(ListItemText, { children: _jsx(Typography, { sx: { fontSize: "14px", color: !props.isCopyEnabled ? colors.onSurfaceVariant1 : colors.surface }, children: "Copy edits" }) }), !isMobile &&
|
|
34
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.onSurfaceVariant1 : colors.surface }, children: "Paste edits" }) }), !isMobile &&
|
|
35
37
|
_jsx(ListItemIcon, { sx: { marginLeft: '30px' }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/shortcut-paste-editor.svg", sx: { width: "25px", height: "20px" } }) })] })] })] })] }) }));
|
|
36
38
|
}
|
|
@@ -2,14 +2,8 @@ import React from "react";
|
|
|
2
2
|
interface Props {
|
|
3
3
|
activePanel: string;
|
|
4
4
|
isPanelOpen: boolean;
|
|
5
|
-
anchorElZoom: null | HTMLElement;
|
|
6
5
|
children: React.ReactNode;
|
|
7
|
-
footer: React.ReactNode;
|
|
8
6
|
setActivePanel: (accordion: string) => void;
|
|
9
|
-
onScale: (event: React.MouseEvent<HTMLElement>) => void;
|
|
10
|
-
onBeforeAfter: () => void;
|
|
11
|
-
onZoomMenuClose: () => void;
|
|
12
|
-
onZoomAction: (zoomLevel: string) => void;
|
|
13
7
|
}
|
|
14
8
|
export default function HImageEditorBulkDekstop(props: Props): import("react/jsx-runtime").JSX.Element;
|
|
15
9
|
export {};
|
|
@@ -5,25 +5,29 @@ import useColors from "../../themes/colors";
|
|
|
5
5
|
export default function HImageEditorBulkDekstop(props) {
|
|
6
6
|
const typography = useHonchoTypography();
|
|
7
7
|
const colors = useColors();
|
|
8
|
-
const isZoomMenuOpen = Boolean(props.anchorElZoom);
|
|
9
8
|
return (_jsx(_Fragment, { children: _jsx(Slide, { direction: "left", in: props.isPanelOpen, mountOnEnter: true, unmountOnExit: true, children: _jsx(Paper, { elevation: 3, sx: {
|
|
10
9
|
position: 'inherit',
|
|
11
10
|
right: '40px',
|
|
12
11
|
top: '55px',
|
|
13
|
-
width: '
|
|
12
|
+
width: '294px',
|
|
13
|
+
minWidth: '294px',
|
|
14
|
+
maxWidth: '294px',
|
|
15
|
+
flexShrink: 0,
|
|
14
16
|
height: 'calc(100vh - 70px)',
|
|
15
17
|
// pb: '10px',
|
|
16
18
|
zIndex: 1200,
|
|
17
19
|
backgroundColor: '#000000',
|
|
18
20
|
overflow: 'hidden',
|
|
19
21
|
// pl: "20px"
|
|
20
|
-
}, children: _jsxs(Stack, { direction: "row", sx: { height: '100%'
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
}, children: _jsxs(Stack, { direction: "row", sx: { height: '100%' }, children: [_jsx(Stack, { direction: "column", sx: {
|
|
23
|
+
width: { xs: 'calc(100% - 40px)', sm: 'calc(100% - 50px)', md: 'calc(100% - 60px)' },
|
|
24
|
+
minWidth: { xs: 'calc(100% - 40px)', sm: 'calc(100% - 50px)', md: 'calc(100% - 60px)' },
|
|
25
|
+
height: '95%',
|
|
26
|
+
flexShrink: 0
|
|
27
|
+
}, children: _jsx(Stack, { sx: { flexGrow: 1, overflowY: 'auto', pl: '0px', pr: '0px', msOverflowStyle: 'none', scrollbarWidth: 'none', '&::-webkit-scrollbar': { display: 'none' } }, children: props.children }) }), _jsxs(Stack, { justifyContent: "flex-start", spacing: "15px", sx: {
|
|
28
|
+
width: 'auto',
|
|
25
29
|
flexShrink: 0,
|
|
26
30
|
pt: 1,
|
|
27
|
-
pl: "
|
|
31
|
+
pl: "0px",
|
|
28
32
|
}, children: [_jsx(IconButton, { onClick: () => props.setActivePanel('colorAdjustment'), children: _jsx(CardMedia, { component: "img", image: props.activePanel === 'colorAdjustment' ? "/v1/svg/color-adjustment-active.svg" : "/v1/svg/color-adjustment-inactive.svg", sx: { width: "20px", height: "20px" } }) }), _jsx(IconButton, { onClick: () => props.setActivePanel('preset'), children: _jsx(CardMedia, { component: "img", image: props.activePanel === 'preset' ? "/v1/svg/watermark-editor-active.svg" : "/v1/svg/watermark-editor-inactive.svg", sx: { width: "20px", height: "20px" } }) })] })] }) }) }) }));
|
|
29
33
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { SelectChangeEvent } from "@mui/material";
|
|
3
2
|
type Preset = {
|
|
4
3
|
id: string;
|
|
5
4
|
name: string;
|
|
@@ -64,8 +63,8 @@ interface Props {
|
|
|
64
63
|
onSharpnessIncrease: () => void;
|
|
65
64
|
onSharpnessIncreaseMax: () => void;
|
|
66
65
|
selectedPresetBulk: string;
|
|
67
|
-
|
|
68
|
-
|
|
66
|
+
onSelectPresetBulk: (id: string) => void;
|
|
67
|
+
onPresetMenuClickBulk: (event: React.MouseEvent<HTMLElement>, presetId: string) => void;
|
|
69
68
|
onOpenPresetModalBulk: () => void;
|
|
70
69
|
}
|
|
71
70
|
export default function HImageEditorBulkMobile(props: Props): import("react/jsx-runtime").JSX.Element;
|