fix(react/options): plain text not disabled

This commit is contained in:
Elian Doran
2025-08-27 20:14:33 +03:00
parent e328f18558
commit 8125e8afcd
2 changed files with 10 additions and 4 deletions

View File

@@ -131,18 +131,22 @@ function CodeMimeTypes() {
) )
} }
type MimeTypeWithDisabled = MimeType & { disabled?: boolean };
export function CodeMimeTypesList() { export function CodeMimeTypesList() {
const [ codeNotesMimeTypes, setCodeNotesMimeTypes ] = useTriliumOptionJson<string[]>("codeNotesMimeTypes"); const [ codeNotesMimeTypes, setCodeNotesMimeTypes ] = useTriliumOptionJson<string[]>("codeNotesMimeTypes");
const groupedMimeTypes: Record<string, MimeType[]> = useMemo(() => { const groupedMimeTypes: Record<string, MimeType[]> = useMemo(() => {
mime_types.loadMimeTypes(); mime_types.loadMimeTypes();
const ungroupedMimeTypes = Array.from(mime_types.getMimeTypes()); const ungroupedMimeTypes = Array.from(mime_types.getMimeTypes()) as MimeTypeWithDisabled[];
const plainTextMimeType = ungroupedMimeTypes.shift(); const plainTextMimeType = ungroupedMimeTypes.shift();
const result: Record<string, MimeType[]> = {}; const result: Record<string, MimeType[]> = {};
ungroupedMimeTypes.sort((a, b) => a.title.localeCompare(b.title)); ungroupedMimeTypes.sort((a, b) => a.title.localeCompare(b.title));
if (plainTextMimeType) { if (plainTextMimeType) {
result[""] = [ plainTextMimeType ]; result[""] = [ plainTextMimeType ];
plainTextMimeType.enabled = true;
plainTextMimeType.disabled = true;
} }
for (const mimeType of ungroupedMimeTypes) { for (const mimeType of ungroupedMimeTypes) {
@@ -161,8 +165,8 @@ export function CodeMimeTypesList() {
<section> <section>
{ initial && <h5>{initial}</h5> } { initial && <h5>{initial}</h5> }
<CheckboxList <CheckboxList
values={mimeTypes} values={mimeTypes as MimeTypeWithDisabled[]}
keyProperty="mime" titleProperty="title" keyProperty="mime" titleProperty="title" disabledProperty="disabled"
currentValue={codeNotesMimeTypes} onChange={setCodeNotesMimeTypes} currentValue={codeNotesMimeTypes} onChange={setCodeNotesMimeTypes}
columnWidth="inherit" columnWidth="inherit"
/> />

View File

@@ -2,12 +2,13 @@ interface CheckboxListProps<T> {
values: T[]; values: T[];
keyProperty: keyof T; keyProperty: keyof T;
titleProperty?: keyof T; titleProperty?: keyof T;
disabledProperty?: keyof T;
currentValue: string[]; currentValue: string[];
onChange: (newValues: string[]) => void; onChange: (newValues: string[]) => void;
columnWidth?: string; columnWidth?: string;
} }
export default function CheckboxList<T>({ values, keyProperty, titleProperty, currentValue, onChange, columnWidth }: CheckboxListProps<T>) { export default function CheckboxList<T>({ values, keyProperty, titleProperty, disabledProperty, currentValue, onChange, columnWidth }: CheckboxListProps<T>) {
function toggleValue(value: string) { function toggleValue(value: string) {
if (currentValue.includes(value)) { if (currentValue.includes(value)) {
// Already there, needs removing. // Already there, needs removing.
@@ -28,6 +29,7 @@ export default function CheckboxList<T>({ values, keyProperty, titleProperty, cu
className="form-check-input" className="form-check-input"
value={String(value[keyProperty])} value={String(value[keyProperty])}
checked={currentValue.includes(String(value[keyProperty]))} checked={currentValue.includes(String(value[keyProperty]))}
disabled={!!(disabledProperty && value[disabledProperty])}
onChange={e => toggleValue((e.target as HTMLInputElement).value)} onChange={e => toggleValue((e.target as HTMLInputElement).value)}
/> />
{String(value[titleProperty ?? keyProperty] ?? value[keyProperty])} {String(value[titleProperty ?? keyProperty] ?? value[keyProperty])}