@yogiswara/honcho-editor-ui 3.4.0 → 3.4.1
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,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;
|
|
@@ -10,14 +9,11 @@ interface Props {
|
|
|
10
9
|
expandedPanels: string[];
|
|
11
10
|
presetMenuAnchorEl: null | HTMLElement;
|
|
12
11
|
activePresetMenuId: string | null;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
onSelectPreset: (
|
|
12
|
+
isPresetCreatedSet?: boolean;
|
|
13
|
+
onChange: (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => void;
|
|
14
|
+
onSelectPreset: (id: string) => void;
|
|
16
15
|
onPresetMenuClick: (event: React.MouseEvent<HTMLElement>, presetId: string) => void;
|
|
17
16
|
onPresetMenuClose: () => void;
|
|
18
|
-
onRemovePreset: () => void;
|
|
19
|
-
onRenamePreset: () => void;
|
|
20
|
-
onDeletePreset: () => void;
|
|
21
17
|
onOpenPresetModal: () => void;
|
|
22
18
|
}
|
|
23
19
|
export default function HBulkPreset(props: Props): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback } from "react";
|
|
2
3
|
import { Box, MenuItem, FormControl, Select, Stack, Accordion, AccordionSummary, AccordionDetails, CardMedia, Typography, IconButton, Button } from "@mui/material";
|
|
3
4
|
import useHonchoTypography from "../../themes/honchoTheme";
|
|
4
5
|
import useColors from "../../themes/colors";
|
|
5
|
-
// Static `presets` array has been removed.
|
|
6
6
|
export default function HBulkPreset(props) {
|
|
7
7
|
const typography = useHonchoTypography();
|
|
8
8
|
const colors = useColors();
|
|
9
|
-
const isMenuOpen = Boolean(props.presetMenuAnchorEl);
|
|
10
9
|
const isPanelExpanded = (panelName) => props.expandedPanels.includes(panelName);
|
|
11
10
|
const accordionStyle = {
|
|
12
11
|
backgroundColor: colors.onBackground,
|
|
@@ -18,26 +17,26 @@ export default function HBulkPreset(props) {
|
|
|
18
17
|
};
|
|
19
18
|
const CustomSelectIcon = (iconProps) => {
|
|
20
19
|
const isExpanded = iconProps.className?.includes('MuiSelect-iconOpen');
|
|
21
|
-
return (_jsx(CardMedia, { component: "img", image: isExpanded ? "/v1/svg/
|
|
20
|
+
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' } }));
|
|
22
21
|
};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
22
|
+
const handleSelectChange = (event) => {
|
|
23
|
+
props.onSelectPreset(event.target.value);
|
|
24
|
+
};
|
|
25
|
+
const renderValue = useCallback((selectedId) => {
|
|
26
|
+
if (selectedId === 'MULTIPLE_PRESETS') {
|
|
27
|
+
return _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Multiple presets" });
|
|
28
|
+
}
|
|
29
|
+
if (selectedId === 'NO_SELECTION' || !selectedId || selectedId === '') {
|
|
30
|
+
return _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Select" });
|
|
31
|
+
}
|
|
32
|
+
const selectedPresetObject = props.presets.find(p => p.id === selectedId);
|
|
33
|
+
if (!selectedPresetObject) {
|
|
34
|
+
return _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Select" });
|
|
35
|
+
}
|
|
36
|
+
return _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: selectedPresetObject.name });
|
|
37
|
+
}, [props.presets, typography.bodyMedium, colors.surface]);
|
|
38
|
+
// The useEffect that forced re-renders has been removed.
|
|
39
|
+
return (_jsx(_Fragment, { children: _jsx(Stack, { children: _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('preset'), onChange: props.onChange('preset'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%', pr: "16px" }, children: [_jsx(Typography, { sx: { ...typography.titleMedium, color: colors.surface }, children: "Preset" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('preset') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pl: "16px" }, children: _jsx(FormControl, { fullWidth: true, children: _jsxs(Select, { fullWidth: true, value: props.selectedPreset, onChange: handleSelectChange, IconComponent: CustomSelectIcon, renderValue: renderValue, MenuProps: {
|
|
35
40
|
slotProps: { paper: { sx: { backgroundColor: colors.onBackground, color: colors.surface, border: `1px solid ${colors.onSurfaceVariant1}`, mt: '20px', width: '178px', boxShadow: 'none' } } }
|
|
36
|
-
}, sx: { border: `1px solid ${colors.outlineVariant}`, height: '44px', width: '
|
|
37
|
-
width: '100%',
|
|
38
|
-
textAlign: 'center',
|
|
39
|
-
color: colors.surface,
|
|
40
|
-
opacity: 0.7,
|
|
41
|
-
...typography.bodyMedium
|
|
42
|
-
}, children: "No Preset" }) }) }), props.presets.map((preset) => (_jsx(MenuItem, { value: preset.id, sx: { borderRadius: '4px', py: '4px', my: '0px', px: '0px', mx: '0px' }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-around", alignItems: "center", sx: { width: '100%', py: '0px', px: '0px', mx: '0px', my: '4px' }, children: [_jsx(CardMedia, { component: "img", image: "v1/svg/check-ratio-editor.svg", sx: { width: "20px", height: "20px", mr: '-16px', px: '0px', visibility: props.selectedPreset === preset.id ? 'visible' : 'hidden' } }), _jsx(Typography, { sx: { width: '24px', textWrap: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'block', color: colors.surface, pr: "82px", pl: "0px", ml: "0px", justifyContent: 'flex-start', ...typography.bodyMedium }, children: preset.name }), _jsx(IconButton, { "aria-label": `Options for ${preset.name}`, onClick: (event) => props.onPresetMenuClick(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', color: colors.onBackground, backgroundColor: colors.surface, borderRadius: '100px', borderColor: colors.surface, textTransform: 'none', '&:hover': { backgroundColor: '#e0e0e0', borderColor: colors.surface } }, onClick: props.onOpenPresetModal, children: "Create Preset" }) })] }) }) })] }) }) }));
|
|
41
|
+
}, sx: { border: `1px solid ${colors.outlineVariant}`, height: '44px', width: '202px', boxShadow: 'none' }, children: [props.presets.map((preset) => (_jsx(MenuItem, { value: preset.id, sx: { borderRadius: '4px', py: '4px', my: '0px', px: '0px', mx: '0px' }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-around", alignItems: "center", sx: { width: '100%', py: '0px', px: '0px', mx: '0px', my: '4px' }, children: [_jsx(CardMedia, { component: "img", image: "/v1/svg/check-ratio-editor.svg", sx: { width: "20px", height: "20px", mr: '-16px', px: '0px', visibility: props.selectedPreset === preset.id ? 'visible' : 'hidden' } }), _jsx(Typography, { sx: { width: '24px', textWrap: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'block', color: colors.surface, pr: "82px", pl: "0px", ml: "0px", justifyContent: 'flex-start', ...typography.bodyMedium }, children: preset.name }), _jsx(IconButton, { "aria-label": `Options for ${preset.name}`, onClick: (event) => props.onPresetMenuClick(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', color: colors.onBackground, backgroundColor: colors.surface, borderRadius: '100px', borderColor: colors.surface, textTransform: 'none', '&:hover': { backgroundColor: '#e0e0e0', borderColor: colors.surface } }, onClick: props.onOpenPresetModal, disabled: props.isPresetCreatedSet, children: "Create Preset" }) })] }) }) })] }) }) }));
|
|
43
42
|
}
|