@yogiswara/honcho-editor-ui 3.4.2 → 3.4.4
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/HImageEditorBulkDekstop.d.ts +0 -6
- package/dist/components/editor/HImageEditorBulkDekstop.js +12 -8
- package/dist/components/editor/HImageEditorBulkMobile.d.ts +2 -3
- package/dist/hooks/editor/type.d.ts +5 -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
|
}
|
|
@@ -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;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { AdjustmentValues } from "../../lib/editor/honcho-editor";
|
|
1
2
|
interface Log {
|
|
2
3
|
created_at: string;
|
|
3
4
|
updated_at: string;
|
|
@@ -59,10 +60,11 @@ export interface GallerySetup {
|
|
|
59
60
|
sizes?: string | string[] | undefined;
|
|
60
61
|
width: number;
|
|
61
62
|
height: number;
|
|
62
|
-
alt: string
|
|
63
|
-
key: string
|
|
64
|
-
frame?: string |
|
|
63
|
+
alt: string;
|
|
64
|
+
key: string;
|
|
65
|
+
frame?: string | null;
|
|
65
66
|
isSelected?: boolean | undefined;
|
|
67
|
+
adjustments?: Partial<AdjustmentValues>;
|
|
66
68
|
}
|
|
67
69
|
export interface Gallery {
|
|
68
70
|
id: string;
|