fix(client/dialogs): shrink images checked when it shouldn't (closes #6930)

This commit is contained in:
Elian Doran 2025-09-12 13:50:06 +03:00
parent 60ea415361
commit 1b711e2c08
No known key found for this signature in database
3 changed files with 8 additions and 9 deletions

View File

@ -161,7 +161,8 @@ textarea,
color: var(--muted-text-color);
}
.form-group.disabled {
.form-group.disabled,
.form-checkbox.disabled {
opacity: 0.5;
pointer-events: none;
}

View File

@ -8,15 +8,16 @@ import FormGroup, { FormMultiGroup } from "../react/FormGroup";
import Modal from "../react/Modal";
import RawHtml from "../react/RawHtml";
import importService, { UploadFilesOptions } from "../../services/import";
import { useTriliumEvent } from "../react/hooks";
import { useTriliumEvent, useTriliumOptionBool } from "../react/hooks";
export default function ImportDialog() {
const [ compressImages ] = useTriliumOptionBool("compressImages");
const [ parentNoteId, setParentNoteId ] = useState<string>();
const [ noteTitle, setNoteTitle ] = useState<string>();
const [ files, setFiles ] = useState<FileList | null>(null);
const [ safeImport, setSafeImport ] = useState(true);
const [ explodeArchives, setExplodeArchives ] = useState(true);
const [ shrinkImages, setShrinkImages ] = useState(true);
const [ shrinkImages, setShrinkImages ] = useState(compressImages);
const [ textImportedAsText, setTextImportedAsText ] = useState(true);
const [ codeImportedAsCode, setCodeImportedAsCode ] = useState(true);
const [ replaceUnderscoresWithSpaces, setReplaceUnderscoresWithSpaces ] = useState(true);
@ -69,7 +70,8 @@ export default function ImportDialog() {
/>
<FormCheckbox
name="shrink-images" hint={t("import.shrinkImagesTooltip")} label={t("import.shrinkImages")}
currentValue={shrinkImages} onChange={setShrinkImages}
currentValue={compressImages && shrinkImages} onChange={setShrinkImages}
disabled={!compressImages}
/>
<FormCheckbox
name="text-imported-as-text" label={t("import.textImportedAsText")}

View File

@ -22,7 +22,6 @@ const FormCheckbox = memo(({ name, disabled, label, currentValue, onChange, hint
const labelRef = useRef<HTMLLabelElement>(null);
const id = useUniqueName(name);
// Fix: Move useEffect outside conditional
useEffect(() => {
if (!hint || !labelRef.current) return;
@ -34,22 +33,19 @@ const FormCheckbox = memo(({ name, disabled, label, currentValue, onChange, hint
return () => tooltipInstance?.dispose();
}, [hint]); // Proper dependency
// Memoize style object
const labelStyle = useMemo(() =>
hint ? { textDecoration: "underline dotted var(--main-text-color)" } : undefined,
[hint]
);
// Memoize onChange handler
const handleChange = useCallback((e: Event) => {
onChange((e.target as HTMLInputElement).checked);
}, [onChange]);
// Memoize title attribute
const titleText = useMemo(() => hint ? escapeQuotes(hint) : undefined, [hint]);
return (
<div className="form-checkbox" style={containerStyle}>
<div className={`form-checkbox ${disabled ? "disabled" : ""}`} style={containerStyle}>
<label
className="form-check-label tn-checkbox"
style={labelStyle}