@yogiswara/honcho-editor-ui 2.8.10 → 2.9.1

package/dist/components/editor/HAccordionColorAdjustment.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Accordion, AccordionDetails, AccordionSummary, CardMedia, Stack, Typography } from "@mui/material";
+import HAccordionColor from "./HAccordionColor";
+import HAccordionLight from "./HAccordionLight";
+import HAccordionDetails from "./HAccordionDetails";
+import useHonchoTypography from "../../themes/honchoTheme";
+import useColors from '../../themes/colors';
+export default function HAccordionColorAdjustment(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    const accordionStyle = {
+        backgroundColor: colors.onBackground,
+        color: colors.surface,
+        '& .MuiAccordionSummary-root': {
+            backgroundColor: colors.onBackground,
+            color: colors.surface,
+        },
+        '& .MuiAccordionDetails-root': {
+            backgroundColor: colors.onBackground,
+            color: colors.surface,
+        },
+        '& .MuiTypography-root': {
+            color: colors.surface,
+        },
+        '& .MuiSvgIcon-root': {
+            color: colors.surface,
+        }
+    };
+    const isPanelExpanded = (panelName) => props.expandedPanels.includes(panelName);
+    return (_jsx(_Fragment, { children: _jsxs(Stack, { direction: "column", sx: { accordionStyle }, children: [_jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('whiteBalance'), onChange: props.onPanelChange('whiteBalance'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium }, children: "Color" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('whiteBalance') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "4px" }, children: _jsx(HAccordionColor, { TempScore: props.tempScore, TintScore: props.tintScore, VibranceScore: props.vibranceScore, SaturationScore: props.saturationScore, onTempChange: props.setTempScore, onTintChange: props.setTintScore, onVibranceChange: props.setVibranceScore, onSaturationChange: props.setSaturationScore, isBatchMode: props.isBatchMode, onDragStart: props.onDragStart, onDragEnd: props.onDragEnd }) })] }), _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('light'), onChange: props.onPanelChange('light'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium }, children: "Light" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('light') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "4px" }, children: _jsx(HAccordionLight, { ExposureScore: props.exposureScore, ContrastScore: props.contrastScore, HighlightsScore: props.HighlightsScore, ShadowsScore: props.shadowsScore, WhitesScore: props.whitesScore, BlacksScore: props.blacksScore, onExposureChange: props.setExposureScore, onContrastChange: props.setContrastScore, onHighlightsChange: props.setHighlightsScore, onShadowsChange: props.setShadowsScore, onWhitesChange: props.setWhitesScore, onBlacksChange: props.setBlacksScore, isBatchMode: props.isBatchMode, onDragStart: props.onDragStart, onDragEnd: props.onDragEnd }) })] }), _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('details'), onChange: props.onPanelChange('details'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium }, children: "Details" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('details') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "4px" }, children: _jsx(HAccordionDetails, { ClarityScore: props.clarityScore, SharpnessScore: props.sharpnessScore, onClarityChange: props.setClarityScore, onSharpnessChange: props.setSharpnessScore, isBatchMode: props.isBatchMode, onDragStart: props.onDragStart, onDragEnd: props.onDragEnd }) })] })] }) }));
+}

package/dist/components/editor/HAccordionDetails.d.ts

@@ -0,0 +1,12 @@
+import { AdjustmentState } from '../../hooks/editor/type';
+interface Props {
+    ClarityScore: number;
+    SharpnessScore: number;
+    onClarityChange: (field: keyof AdjustmentState, value: number) => void;
+    onSharpnessChange: (field: keyof AdjustmentState, value: number) => void;
+    onDragStart: () => void;
+    onDragEnd: () => void;
+    isBatchMode: boolean;
+}
+export default function HAccordionDetails(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HAccordionDetails.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Stack, Slider, Typography, TextField } from "@mui/material";
+import useHonchoTypography from "../../themes/honchoTheme";
+import useColors from '../../themes/colors';
+export default function HAccordionDetails(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    const formatValue = (value) => {
+        if (value > 0)
+            return `+${value}`;
+        return value.toString();
+    };
+    const [clarityInput, setClarityInput] = React.useState(formatValue(props.ClarityScore));
+    const [sharpnessInput, setSharpnessInput] = React.useState(formatValue(props.SharpnessScore));
+    const focusedInputStyle = {
+        backgroundColor: "#1C1B1FB2",
+        borderRadius: '5px 5px 0px 0px',
+        borderBottom: 'none',
+        pl: '2px',
+    };
+    const handleInputChange = (event, min, max, onChange) => {
+        const value = event.target.value;
+        if (value === '+' || value === '-')
+            return;
+        let numericValue = parseInt(value, 10);
+        if (isNaN(numericValue))
+            numericValue = 0;
+        const clampedValue = Math.max(min, Math.min(max, numericValue));
+        onChange(clampedValue);
+    };
+    const commitInput = (rawValue, min, max, onChange) => {
+        let numericValue = parseInt(rawValue, 10);
+        if (isNaN(numericValue))
+            numericValue = 0;
+        const clamped = Math.max(min, Math.min(max, numericValue));
+        onChange(clamped);
+    };
+    React.useEffect(() => {
+        setClarityInput(formatValue(props.ClarityScore));
+    }, [props.ClarityScore]);
+    React.useEffect(() => {
+        setSharpnessInput(formatValue(props.SharpnessScore));
+    }, [props.SharpnessScore]);
+    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: clarityInput, 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) => {
+                                        if (e.key === "Enter") {
+                                            commitInput(clarityInput, -100, 100, (val) => props.onClarityChange("clarityScore", val));
+                                            e.currentTarget.blur(); // blur so it formats
+                                        }
+                                    }, sx: {
+                                        width: "40px",
+                                        height: "10px",
+                                        alignItems: "center",
+                                        textAlign: "right",
+                                        display: "flex",
+                                        '& .MuiFilledInput-root': {
+                                            // backgroundColor: 'transparent',
+                                            // border: '',
+                                            '&:before': {
+                                                borderBottom: 'none',
+                                            },
+                                            '&:after': {
+                                                borderBottom: 'none',
+                                            },
+                                            '&:hover:not(.Mui-disabled):before': {
+                                                borderBottom: 'none',
+                                            },
+                                            '&.Mui-focused:after': {
+                                                borderBottom: 'none',
+                                            },
+                                        },
+                                        '& .MuiFilledInput-input': {
+                                            textAlign: 'right',
+                                            padding: 0,
+                                            pr: '4px',
+                                            color: colors.surface,
+                                            fontSize: "14px",
+                                        },
+                                        '& .Mui-focused': {
+                                            '& .MuiFilledInput-input': {
+                                                backgroundColor: "#1C1B1FB2",
+                                                textAlign: 'right',
+                                                borderRadius: '5px 5px 0px 0px',
+                                                borderBottom: 'none',
+                                                // pr: '8px',
+                                                pl: '2px',
+                                            }
+                                        }
+                                    } })] }), _jsx(Slider, { sx: {
+                                width: "200px",
+                                color: colors.onSurfaceVariant,
+                                '& .MuiSlider-rail': {
+                                    background: colors.onSurfaceVariant,
+                                    opacity: 1,
+                                },
+                                '& .MuiSlider-thumb': {
+                                    background: colors.surface,
+                                    opacity: 1,
+                                    boxShadow: 'none',
+                                },
+                            }, size: "small", value: props.ClarityScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onClarityChange("clarityScore", newValue), onDoubleClick: () => props.onClarityChange("clarityScore", 0), onMouseDown: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onMouseUp: () => {
+                                props.onDragEnd();
+                            }, onTouchStart: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onTouchEnd: () => {
+                                props.onDragEnd();
+                            } })] }), _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: sharpnessInput, 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) => {
+                                        if (e.key === "Enter") {
+                                            commitInput(sharpnessInput, -100, 100, (val) => props.onSharpnessChange("sharpnessScore", val));
+                                            e.currentTarget.blur(); // blur so it formats
+                                        }
+                                    }, sx: {
+                                        width: "40px",
+                                        height: "10px",
+                                        alignItems: "center",
+                                        textAlign: "right",
+                                        display: "flex",
+                                        '& .MuiFilledInput-root': {
+                                            backgroundColor: 'transparent',
+                                            borderRadius: "0px",
+                                            border: 'none',
+                                            '&:before': {
+                                                borderBottom: 'none',
+                                            },
+                                            '&:after': {
+                                                borderBottom: 'none',
+                                            },
+                                            '&:hover:not(.Mui-disabled):before': {
+                                                borderBottom: 'none',
+                                            },
+                                            '&.Mui-focused:after': {
+                                                borderBottom: 'none',
+                                            },
+                                        },
+                                        '& .MuiFilledInput-input': {
+                                            textAlign: 'right',
+                                            padding: 0,
+                                            pr: '4px',
+                                            color: colors.surface,
+                                            fontSize: "14px",
+                                        },
+                                        '& .Mui-focused': {
+                                            '& .MuiFilledInput-input': {
+                                                backgroundColor: "#1C1B1FB2",
+                                                textAlign: 'right',
+                                                borderRadius: '5px 5px 0px 0px',
+                                                borderBottom: 'none',
+                                                // pr: '8px',
+                                                pl: '2px',
+                                            }
+                                        }
+                                    } })] }), _jsx(Slider, { sx: {
+                                width: "200px",
+                                color: colors.onSurfaceVariant,
+                                '& .MuiSlider-rail': {
+                                    background: colors.onSurfaceVariant,
+                                    opacity: 1,
+                                },
+                                '& .MuiSlider-thumb': {
+                                    background: colors.surface,
+                                    opacity: 1,
+                                    boxShadow: 'none',
+                                },
+                            }, size: "small", value: props.SharpnessScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSharpnessChange("sharpnessScore", newValue), onDoubleClick: () => props.onSharpnessChange("sharpnessScore", 0), onMouseDown: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onMouseUp: () => {
+                                props.onDragEnd();
+                            }, onTouchStart: () => {
+                                if (!props.isBatchMode) {
+                                    props.onDragStart();
+                                }
+                            }, onTouchEnd: () => {
+                                props.onDragEnd();
+                            } })] })] }) }));
+}

package/dist/components/editor/HAccordionLight.d.ts

@@ -0,0 +1,20 @@
+import { AdjustmentState } from '../../hooks/editor/type';
+interface Props {
+    ExposureScore: number;
+    ContrastScore: number;
+    HighlightsScore: number;
+    ShadowsScore: number;
+    WhitesScore: number;
+    BlacksScore: number;
+    isBatchMode: boolean;
+    onExposureChange: (field: keyof AdjustmentState, value: number) => void;
+    onContrastChange: (field: keyof AdjustmentState, value: number) => void;
+    onHighlightsChange: (field: keyof AdjustmentState, value: number) => void;
+    onShadowsChange: (field: keyof AdjustmentState, value: number) => void;
+    onWhitesChange: (field: keyof AdjustmentState, value: number) => void;
+    onBlacksChange: (field: keyof AdjustmentState, value: number) => void;
+    onDragStart: () => void;
+    onDragEnd: () => void;
+}
+export default function HAccordionLight(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};