@yogiswara/honcho-editor-ui 2.7.20 → 2.7.21
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.
|
@@ -35,7 +35,7 @@ interface PropsPreset {
|
|
|
35
35
|
setColorChecks: React.Dispatch<React.SetStateAction<any>>;
|
|
36
36
|
setLightChecks: React.Dispatch<React.SetStateAction<any>>;
|
|
37
37
|
setDetailsChecks: React.Dispatch<React.SetStateAction<any>>;
|
|
38
|
-
|
|
38
|
+
descriptionOnCopy?: string;
|
|
39
39
|
}
|
|
40
|
-
export declare function HDialogPreset(
|
|
40
|
+
export declare function HDialogPreset(propsPreset: PropsPreset): import("react/jsx-runtime").JSX.Element;
|
|
41
41
|
export {};
|
|
@@ -56,19 +56,19 @@ const RoundedSquareIndeterminateIcon = ({ color }) => (_jsx("div", { style: {
|
|
|
56
56
|
alignItems: 'center',
|
|
57
57
|
justifyContent: 'center',
|
|
58
58
|
}, children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#FFFFFF", strokeWidth: "3", children: _jsx("path", { d: "M5 12L19 12" }) }) }));
|
|
59
|
-
export function HDialogPreset(
|
|
59
|
+
export function HDialogPreset(propsPreset) {
|
|
60
60
|
const colors = useColors();
|
|
61
61
|
const typography = useHonchoTypography();
|
|
62
|
-
// --- Derived state is now calculated from
|
|
63
|
-
const colorValues = Object.values(
|
|
62
|
+
// --- Derived state is now calculated from propsPreset ---
|
|
63
|
+
const colorValues = Object.values(propsPreset.colorChecks);
|
|
64
64
|
const colorCheckedCount = colorValues.filter(Boolean).length;
|
|
65
65
|
const isColorParentChecked = colorCheckedCount === colorValues.length;
|
|
66
66
|
const isColorParentIndeterminate = colorCheckedCount > 0 && !isColorParentChecked;
|
|
67
|
-
const lightValues = Object.values(
|
|
67
|
+
const lightValues = Object.values(propsPreset.lightChecks);
|
|
68
68
|
const lightCheckedCount = lightValues.filter(Boolean).length;
|
|
69
69
|
const isLightParentChecked = lightCheckedCount === lightValues.length;
|
|
70
70
|
const isLightParentIndeterminate = lightCheckedCount > 0 && !isLightParentChecked;
|
|
71
|
-
const detailsValues = Object.values(
|
|
71
|
+
const detailsValues = Object.values(propsPreset.detailsChecks);
|
|
72
72
|
const detailsCheckedCount = detailsValues.filter(Boolean).length;
|
|
73
73
|
const isDetailsParentChecked = detailsCheckedCount === detailsValues.length;
|
|
74
74
|
const isDetailsParentIndeterminate = detailsCheckedCount > 0 && !isDetailsParentChecked;
|
|
@@ -76,5 +76,5 @@ export function HDialogPreset(props) {
|
|
|
76
76
|
color: colors.onSurface,
|
|
77
77
|
'&.Mui-checked, &.Mui-indeterminate': { color: colors.onSurface },
|
|
78
78
|
};
|
|
79
|
-
return (_jsxs(Stack, { direction: "column", spacing: 1, sx: { padding: 0, margin: 0, width: '100%' }, children: [_jsxs(Stack, { children: [_jsx(Stack, { direction: "column", alignItems: "flex-start", children: _jsx(Typography, { variant: "inherit", color: "initial", children:
|
|
79
|
+
return (_jsxs(Stack, { direction: "column", spacing: 1, sx: { padding: 0, margin: 0, width: '100%' }, children: [_jsxs(Stack, { children: [_jsx(Stack, { direction: "column", alignItems: "flex-start", children: _jsx(Typography, { variant: "inherit", color: "initial", children: propsPreset.descriptionOnCopy }) }), _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) => propsPreset.onParentChange(e, propsPreset.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: () => propsPreset.onToggleExpand('color'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { colors: colors.background, transition: 'transform 0.3s', transform: propsPreset.expanded.color ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: propsPreset.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: propsPreset.colorChecks.temperature, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.colorChecks.tint, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.colorChecks.vibrance, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.colorChecks.saturation, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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) => propsPreset.onParentChange(e, propsPreset.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: () => propsPreset.onToggleExpand('light'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: propsPreset.expanded.light ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: propsPreset.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: propsPreset.lightChecks.exposure, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.lightChecks.contrast, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.lightChecks.highlights, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.lightChecks.shadows, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.lightChecks.whites, onChange: (e) => propsPreset.onChildChange(e, propsPreset.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: propsPreset.lightChecks.blacks, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) })] }) })] })] }));
|
|
80
80
|
}
|
|
@@ -42,7 +42,7 @@ export default function HSliderColorMobile(props) {
|
|
|
42
42
|
const clampedValue = Math.max(min, Math.min(max, numericValue));
|
|
43
43
|
onChange(clampedValue);
|
|
44
44
|
};
|
|
45
|
-
return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1, m: "0px" }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Temperature" }), _jsx(TextField, {
|
|
45
|
+
return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1, m: "0px" }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onTempChange("tempScore", 0), children: "Temperature" }), _jsx(TextField, { hiddenLabel: true, id: "temperature-input", value: formatValue(props.tempScore), variant: "filled", InputProps: { readOnly: true }, onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onTempChange("tempScore", val)), sx: {
|
|
46
46
|
width: "40px",
|
|
47
47
|
alignItems: "center",
|
|
48
48
|
textAlign: "right",
|
|
@@ -98,7 +98,7 @@ export default function HSliderColorMobile(props) {
|
|
|
98
98
|
}
|
|
99
99
|
}, onTouchEnd: () => {
|
|
100
100
|
props.onDragEnd();
|
|
101
|
-
} }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Tint" }), _jsx(TextField, {
|
|
101
|
+
} }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onTintChange("tintScore", 0), children: "Tint" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.tintScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onTintChange("tintScore", val)), sx: {
|
|
102
102
|
width: "40px",
|
|
103
103
|
alignItems: "center",
|
|
104
104
|
textAlign: "right",
|
|
@@ -154,7 +154,7 @@ export default function HSliderColorMobile(props) {
|
|
|
154
154
|
}
|
|
155
155
|
}, onTouchEnd: () => {
|
|
156
156
|
props.onDragEnd();
|
|
157
|
-
} }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Vibrance" }), _jsx(TextField, {
|
|
157
|
+
} }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onVibranceChange("vibranceScore", 0), children: "Vibrance" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.vibranceScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onVibranceChange("vibranceScore", val)), sx: {
|
|
158
158
|
width: "40px",
|
|
159
159
|
alignItems: "center",
|
|
160
160
|
textAlign: "right",
|
|
@@ -210,7 +210,7 @@ export default function HSliderColorMobile(props) {
|
|
|
210
210
|
}
|
|
211
211
|
}, onTouchEnd: () => {
|
|
212
212
|
props.onDragEnd();
|
|
213
|
-
} }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Saturation" }), _jsx(TextField, {
|
|
213
|
+
} }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onSaturationChange("saturationScore", 0), children: "Saturation" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.saturationScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onSaturationChange("saturationScore", val)), sx: {
|
|
214
214
|
width: "40px",
|
|
215
215
|
alignItems: "center",
|
|
216
216
|
textAlign: "right",
|
|
@@ -20,7 +20,7 @@ export default function HSliderLightMobile(props) {
|
|
|
20
20
|
const clampedValue = Math.max(min, Math.min(max, numericValue));
|
|
21
21
|
onChange(clampedValue);
|
|
22
22
|
};
|
|
23
|
-
return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1 }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Exposure" }), _jsx(TextField, {
|
|
23
|
+
return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1 }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onExposureChange("exposureScore", 0), children: "Exposure" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.exposureScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onExposureChange("exposureScore", val)), sx: {
|
|
24
24
|
width: "40px",
|
|
25
25
|
alignItems: "center",
|
|
26
26
|
textAlign: "right",
|
|
@@ -86,7 +86,7 @@ export default function HSliderLightMobile(props) {
|
|
|
86
86
|
}
|
|
87
87
|
}, onTouchEnd: () => {
|
|
88
88
|
props.onDragEnd();
|
|
89
|
-
} }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Contrast" }), _jsx(TextField, {
|
|
89
|
+
} }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Contrast" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.contrastScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onContrastChange("contrastScore", val)), sx: {
|
|
90
90
|
width: "40px",
|
|
91
91
|
alignItems: "center",
|
|
92
92
|
textAlign: "right",
|
|
@@ -152,7 +152,7 @@ export default function HSliderLightMobile(props) {
|
|
|
152
152
|
}
|
|
153
153
|
}, onTouchEnd: () => {
|
|
154
154
|
props.onDragEnd();
|
|
155
|
-
} }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Highlights" }), _jsx(TextField, {
|
|
155
|
+
} }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0), children: "Highlights" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.highlightsScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onHighlightsChange("highlightsScore", val)), sx: {
|
|
156
156
|
width: "40px",
|
|
157
157
|
alignItems: "center",
|
|
158
158
|
textAlign: "right",
|
|
@@ -218,7 +218,7 @@ export default function HSliderLightMobile(props) {
|
|
|
218
218
|
}
|
|
219
219
|
}, onTouchEnd: () => {
|
|
220
220
|
props.onDragEnd();
|
|
221
|
-
} }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Shadows" }), _jsx(TextField, {
|
|
221
|
+
} }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onShadowsChange("shadowsScore", 0), children: "Shadows" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.shadowScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onShadowsChange("shadowsScore", val)), sx: {
|
|
222
222
|
width: "40px",
|
|
223
223
|
alignItems: "center",
|
|
224
224
|
textAlign: "right",
|
|
@@ -284,7 +284,7 @@ export default function HSliderLightMobile(props) {
|
|
|
284
284
|
}
|
|
285
285
|
}, onTouchEnd: () => {
|
|
286
286
|
props.onDragEnd();
|
|
287
|
-
} }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Whites" }), _jsx(TextField, {
|
|
287
|
+
} }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onWhitesChange("whitesScore", 0), children: "Whites" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.whiteScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onWhitesChange("whitesScore", val)), sx: {
|
|
288
288
|
width: "40px",
|
|
289
289
|
alignItems: "center",
|
|
290
290
|
textAlign: "right",
|
|
@@ -350,7 +350,7 @@ export default function HSliderLightMobile(props) {
|
|
|
350
350
|
}
|
|
351
351
|
}, onTouchEnd: () => {
|
|
352
352
|
props.onDragEnd();
|
|
353
|
-
} }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Blacks" }), _jsx(TextField, {
|
|
353
|
+
} }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onBlacksChange("blacksScore", 0), children: "Blacks" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.blackScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onBlacksChange("blacksScore", val)), sx: {
|
|
354
354
|
width: "40px",
|
|
355
355
|
alignItems: "center",
|
|
356
356
|
textAlign: "right",
|