@yogiswara/honcho-editor-ui 2.8.0 → 2.8.2
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,4 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import React from "react";
|
|
2
3
|
import { Stack, Slider, Typography, TextField } from "@mui/material";
|
|
3
4
|
import useHonchoTypography from "../../themes/honchoTheme";
|
|
4
5
|
import useColors from '../../themes/colors';
|
|
@@ -10,6 +11,8 @@ export default function HAccordionDetails(props) {
|
|
|
10
11
|
return `+${value}`;
|
|
11
12
|
return value.toString();
|
|
12
13
|
};
|
|
14
|
+
const [clarityInput, setClarityInput] = React.useState(formatValue(props.ClarityScore));
|
|
15
|
+
const [sharpnessInput, setSharpnessInput] = React.useState(formatValue(props.SharpnessScore));
|
|
13
16
|
const focusedInputStyle = {
|
|
14
17
|
backgroundColor: "#1C1B1FB2",
|
|
15
18
|
borderRadius: '5px 5px 0px 0px',
|
|
@@ -26,7 +29,25 @@ export default function HAccordionDetails(props) {
|
|
|
26
29
|
const clampedValue = Math.max(min, Math.min(max, numericValue));
|
|
27
30
|
onChange(clampedValue);
|
|
28
31
|
};
|
|
29
|
-
|
|
32
|
+
const commitInput = (rawValue, min, max, onChange) => {
|
|
33
|
+
let numericValue = parseInt(rawValue, 10);
|
|
34
|
+
if (isNaN(numericValue))
|
|
35
|
+
numericValue = 0;
|
|
36
|
+
const clamped = Math.max(min, Math.min(max, numericValue));
|
|
37
|
+
onChange(clamped);
|
|
38
|
+
};
|
|
39
|
+
React.useEffect(() => {
|
|
40
|
+
setClarityInput(formatValue(props.ClarityScore));
|
|
41
|
+
}, [props.ClarityScore]);
|
|
42
|
+
React.useEffect(() => {
|
|
43
|
+
setSharpnessInput(formatValue(props.SharpnessScore));
|
|
44
|
+
}, [props.SharpnessScore]);
|
|
45
|
+
return (_jsx(_Fragment, { children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "column", gap: "4px", sx: { pt: '6px', pb: '2px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "clarity-input", sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Clarity" }), _jsx(TextField, { hiddenLabel: true, id: "clarity-input", value: formatValue(props.ClarityScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onClarityChange("clarityScore", val)), onBlur: () => commitInput(clarityInput, -100, 100, (val) => props.onClarityChange("clarityScore", val)), onKeyDown: (e) => {
|
|
46
|
+
if (e.key === "Enter") {
|
|
47
|
+
commitInput(clarityInput, -100, 100, (val) => props.onClarityChange("clarityScore", val));
|
|
48
|
+
e.currentTarget.blur(); // blur so it formats
|
|
49
|
+
}
|
|
50
|
+
}, sx: {
|
|
30
51
|
width: "40px",
|
|
31
52
|
height: "10px",
|
|
32
53
|
alignItems: "center",
|
|
@@ -89,7 +110,12 @@ export default function HAccordionDetails(props) {
|
|
|
89
110
|
}
|
|
90
111
|
}, onTouchEnd: () => {
|
|
91
112
|
props.onDragEnd();
|
|
92
|
-
} })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "sharpness-input", sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Sharpness" }), _jsx(TextField, { hiddenLabel: true, id: "sharpness-input", value: formatValue(props.SharpnessScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onSharpnessChange("sharpnessScore", val)),
|
|
113
|
+
} })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "sharpness-input", sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Sharpness" }), _jsx(TextField, { hiddenLabel: true, id: "sharpness-input", value: formatValue(props.SharpnessScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onSharpnessChange("sharpnessScore", val)), onBlur: () => commitInput(sharpnessInput, -100, 100, (val) => props.onSharpnessChange("sharpnessScore", val)), onKeyDown: (e) => {
|
|
114
|
+
if (e.key === "Enter") {
|
|
115
|
+
commitInput(sharpnessInput, -100, 100, (val) => props.onSharpnessChange("sharpnessScore", val));
|
|
116
|
+
e.currentTarget.blur(); // blur so it formats
|
|
117
|
+
}
|
|
118
|
+
}, sx: {
|
|
93
119
|
width: "40px",
|
|
94
120
|
height: "10px",
|
|
95
121
|
alignItems: "center",
|
|
@@ -24,7 +24,7 @@ export function HDialogCopy(props) {
|
|
|
24
24
|
color: colors.onSurface,
|
|
25
25
|
'&.Mui-checked, &.Mui-indeterminate': { color: colors.onSurface },
|
|
26
26
|
};
|
|
27
|
-
return (_jsxs(Stack, { direction: "column", spacing: 1, sx: { padding: 0, margin: 0, width: '100%' }, children: [_jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Color" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isColorParentChecked, indeterminate: isColorParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${colorCheckedCount}/${colorValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('color'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { colors: colors.background, transition: 'transform 0.3s', transform: props.expanded.color ? 'rotate(
|
|
27
|
+
return (_jsxs(Stack, { direction: "column", spacing: 1, sx: { padding: 0, margin: 0, width: '100%' }, children: [_jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Color" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isColorParentChecked, indeterminate: isColorParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${colorCheckedCount}/${colorValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('color'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { colors: colors.background, transition: 'transform 0.3s', transform: props.expanded.color ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.color, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Temperature" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "temperature", checked: props.colorChecks.temperature, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Tint" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "tint", checked: props.colorChecks.tint, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Vibrance" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "vibrance", checked: props.colorChecks.vibrance, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Saturation" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "saturation", checked: props.colorChecks.saturation, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) })] }) })] }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Light" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isLightParentChecked, indeterminate: isLightParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${lightCheckedCount}/${lightValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('light'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: props.expanded.light ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.light, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Exposure" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "exposure", checked: props.lightChecks.exposure, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Contrast" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "contrast", checked: props.lightChecks.contrast, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Highlights" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "highlights", checked: props.lightChecks.highlights, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Shadows" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "shadows", checked: props.lightChecks.shadows, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Whites" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "whites", checked: props.lightChecks.whites, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Blacks" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "blacks", checked: props.lightChecks.blacks, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) })] }) })] }), _jsx(Button, { onClick: props.onCopyEdit, sx: { ...typography.labelMedium, mt: '20px', height: '40px', color: colors.surface, backgroundColor: colors.onSurface, borderRadius: '100px', textTransform: 'none' }, children: "Copy" })] }));
|
|
28
28
|
}
|
|
29
29
|
// A component for the UNCHECKED box
|
|
30
30
|
const RoundedSquareIcon = ({ color }) => (_jsx("div", { style: {
|
|
@@ -5,5 +5,5 @@ import useColors from '../../themes/colors';
|
|
|
5
5
|
export default function HModalMobile(props) {
|
|
6
6
|
const colors = useColors();
|
|
7
7
|
const typography = useHonchoTypography();
|
|
8
|
-
return (_jsx(_Fragment, { children: _jsx(Modal, { open: props.modalOpen, onClose: props.modalClose, children: _jsxs(Stack, { direction: "column", spacing: 2, height: "100%", sx: { p: "10px", backgroundColor: colors.surface }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Stack, { direction: "row", justifyContent: "flex-start", alignItems: "center", spacing: 1, children: [_jsx(IconButton, { "aria-label": "close", onClick: props.modalClose, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/exit-button-modal-mobile.svg" }) }), _jsx(Typography, { variant: "h6", color: "initial", children: props.modalTitle })] }), _jsx(Button, { onClick: props.onConfirm,
|
|
8
|
+
return (_jsx(_Fragment, { children: _jsx(Modal, { open: props.modalOpen, onClose: props.modalClose, children: _jsxs(Stack, { direction: "column", spacing: 2, height: "100%", sx: { p: "10px", backgroundColor: colors.surface }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Stack, { direction: "row", justifyContent: "flex-start", alignItems: "center", spacing: 1, children: [_jsx(IconButton, { "aria-label": "close", onClick: props.modalClose, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/exit-button-modal-mobile.svg" }) }), _jsx(Typography, { variant: "h6", color: "initial", children: props.modalTitle })] }), _jsx(Button, { onClick: props.onConfirm, sx: { textTransform: "none" }, children: "Save" })] }), _jsx(Typography, { variant: "inherit", color: "initial", children: props.modalInformation }), _jsx(Box, { sx: { mt: 2 }, children: props.children }), _jsx(Stack, { sx: { px: "2px" }, children: props.action })] }) }) }));
|
|
9
9
|
}
|