@yogiswara/honcho-editor-ui 3.4.12 → 3.4.14
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.
|
@@ -6,6 +6,7 @@ type Preset = {
|
|
|
6
6
|
interface Props {
|
|
7
7
|
presets: Preset[];
|
|
8
8
|
selectedPresetBulk: string;
|
|
9
|
+
isPresetCreatedSet?: boolean;
|
|
9
10
|
onOpenPresetModalBulk: () => void;
|
|
10
11
|
onSelectPresetBulk: (id: string) => void;
|
|
11
12
|
onPresetMenuClickBulk: (event: React.MouseEvent<HTMLElement>, presetId: string) => void;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback } from "react";
|
|
2
3
|
import { Typography, Stack, IconButton, CardMedia, Button, MenuItem, Box, FormControl, Select } from "@mui/material";
|
|
3
4
|
import useHonchoTypography from "../../themes/honchoTheme";
|
|
4
5
|
import useColors from '../../themes/colors';
|
|
@@ -11,19 +12,25 @@ export default function HBulkPresetMobile(props) {
|
|
|
11
12
|
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
13
|
};
|
|
13
14
|
const handleSelectChange = (event) => {
|
|
14
|
-
props.onSelectPresetBulk(event.target.value);
|
|
15
|
+
props.onSelectPresetBulk(event.target.value);
|
|
15
16
|
};
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
17
|
+
const renderValue = useCallback((selectedId) => {
|
|
18
|
+
if (selectedId === 'MULTIPLE_PRESETS') {
|
|
19
|
+
return _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Multiple presets" });
|
|
20
|
+
}
|
|
21
|
+
if (selectedId === 'NO_SELECTION' || !selectedId || selectedId === '') {
|
|
22
|
+
return _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Select" });
|
|
23
|
+
}
|
|
24
|
+
const selectedPresetObject = props.presets.find(p => p.id === selectedId);
|
|
25
|
+
if (!selectedPresetObject) {
|
|
26
|
+
return _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Select" });
|
|
27
|
+
}
|
|
28
|
+
return _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: selectedPresetObject.name });
|
|
29
|
+
}, [props.presets, typography.bodyMedium, colors.surface]);
|
|
30
|
+
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: renderValue, MenuProps: {
|
|
24
31
|
anchorOrigin: { vertical: 'top', horizontal: 'left' },
|
|
25
32
|
transformOrigin: { vertical: 'bottom', horizontal: 'left' },
|
|
26
33
|
sx: { marginTop: '-10px' },
|
|
27
34
|
slotProps: { paper: { sx: { backgroundColor: colors.onBackground, color: colors.surface, border: `1px solid ${colors.onSurfaceVariant1}`, borderRadius: '4px', width: '328px' } } }
|
|
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: '
|
|
35
|
+
}, 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: '100%', textWrap: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'block', color: colors.surface, 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, disabled: props.isPresetCreatedSet, children: "Create Preset" }) })] }) })] }) }));
|
|
29
36
|
}
|
package/dist/hooks/usePaging.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
|
|
2
|
+
import { log } from '../utils/logger';
|
|
2
3
|
/**
|
|
3
4
|
* Hook for managing paginated image loading with ControllerBulk.
|
|
4
5
|
*
|
|
@@ -67,7 +68,7 @@ export function usePaging(controller, firebaseUid, eventId, options = {}) {
|
|
|
67
68
|
// Helper function to log debug messages
|
|
68
69
|
const debugLog = useCallback((message, data) => {
|
|
69
70
|
if (memoizedOptions.devWarnings) {
|
|
70
|
-
|
|
71
|
+
log.debug({ data }, `[usePaging] ${message}`);
|
|
71
72
|
}
|
|
72
73
|
}, [memoizedOptions.devWarnings]);
|
|
73
74
|
// Helper function to handle errors
|