Elgato_dark/void
1
0
Fork 0
mirror of https://github.com/voideditor/void synced 2026-05-24 09:58:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

checkbox

Browse source
This commit is contained in:
Andrew Pareles 2024-12-09 16:45:03 -08:00
parent 582b25dc44
commit 55884ed1c9
3 changed files with 75 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/vs/platform/void/common/configTypes.ts
View file

@ -250,17 +250,17 @@ export const descOfSettingName = (providerName: ProviderName, settingName: Union
export const inputTypeOfSettingName = (settingName: UnionOfKeys<VoidConfigState[ProviderName]>) => {
if (settingName === 'apiKey')
return 'string'
return 'string' as const
else if (settingName === 'endpoint')
return 'string'
return 'string' as const
else if (settingName === 'maxTokens')
return 'number'
return 'number' as const
else if (settingName === 'model')
return 'string'
return 'string' as const
else if (settingName === 'enabled')
return 'boolean'
return 'boolean' as const
else if (settingName === 'models')
return 'string[]?'
return 'string[]?' as const
throw new Error(`inputType: Unknown setting name: "${settingName}"`)
}

30
src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarProviderSettings.tsx
View file

@ -4,8 +4,8 @@
*--------------------------------------------------------------------------------------------*/
import React, { Fragment } from 'react'
import { descOfSettingName, ProviderName, providerNames, voidProviderDefaults } from '../../../../../../../platform/void/common/configTypes.js'
import { VoidInputBox, VoidSelectBox } from './inputs.js'
import { descOfSettingName, inputTypeOfSettingName, ProviderName, providerNames, voidProviderDefaults } from '../../../../../../../platform/void/common/configTypes.js'
import { VoidCheckBox, VoidInputBox, VoidSelectBox } from './inputs.js'
import { useConfigState, useService } from '../util/services.js'
const SettingsForProvider = ({ providerName }: { providerName: ProviderName }) => {
@ -25,13 +25,22 @@ const SettingsForProvider = ({ providerName }: { providerName: ProviderName }) =
return <Fragment key={i}>
<h2>{descOfSettingName(providerName, sName)}</h2>
<VoidInputBox
initVal={defaultVal}
onChangeText={(newVal) => { () => { voidConfigService.setState(providerName, sName, newVal) } }}
placeholder={settingName}
multiline={false}
inputBoxRef={{ current: null }}
/>
{
inputTypeOfSettingName(sName) === 'boolean' ?
<VoidCheckBox
initVal={defaultVal === 'true'}
onChangeChecked={(newVal) => { voidConfigService.setState(providerName, sName, newVal ? 'true' : 'false') }}
label={settingName}
checkboxRef={{ current: null }}
/>
:
<VoidInputBox
initVal={defaultVal}
onChangeText={(newVal) => { () => { voidConfigService.setState(providerName, sName, newVal) } }}
placeholder={settingName}
multiline={false}
inputBoxRef={{ current: null }}
/>}
</Fragment>
})}
@ -45,8 +54,7 @@ const SettingsForProvider = ({ providerName }: { providerName: ProviderName }) =
selectBoxRef={{ current: null }}
/>}
<h2>{'Enabled'}</h2>
todo
</>
}

51
src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/inputs.tsx
View file

@ -1,8 +1,11 @@
import React, { useEffect, useRef } from 'react';
import { useService } from '../util/services.js';
import { HistoryInputBox, InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
import { defaultInputBoxStyles } from '../../../../../../../platform/theme/browser/defaultStyles.js';
import { defaultCheckboxStyles, defaultInputBoxStyles, defaultToggleStyles } from '../../../../../../../platform/theme/browser/defaultStyles.js';
import { SelectBox, unthemedSelectBoxStyles } from '../../../../../../../base/browser/ui/selectBox/selectBox.js';
import { Checkbox, Toggle } from '../../../../../../../base/browser/ui/toggle/toggle.js';
// settingitem
export const VoidInputBox = ({ onChangeText, initVal, placeholder, inputBoxRef, multiline }: {
onChangeText: (value: string) => void;
@ -102,3 +105,49 @@ export const VoidSelectBox = ({ onChangeSelection, initVal, selectBoxRef, option
return <div ref={containerRef} className="w-full" />;
};
export const VoidCheckBox = ({ onChangeChecked, initVal, label, checkboxRef, }: {
onChangeChecked: (checked: boolean) => void;
initVal: boolean;
checkboxRef: React.MutableRefObject<Toggle | null>;
label: string;
}) => {
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!containerRef.current) return;
// Create and mount the Checkbox using VSCode's implementation
checkboxRef.current = new Toggle({
title: label,
isChecked: initVal,
...defaultToggleStyles
});
containerRef.current.appendChild(checkboxRef.current.domNode);
checkboxRef.current.onChange(checked => {
console.log('CHANGE checked state on checkbox', checked);
onChangeChecked(checked);
});
// cleanup
return () => {
if (checkboxRef.current) {
checkboxRef.current.dispose();
if (containerRef.current) {
while (containerRef.current.firstChild) {
containerRef.current.removeChild(containerRef.current.firstChild);
}
}
checkboxRef.current = null;
}
};
}, [checkboxRef, label, initVal, onChangeChecked]);
return <div ref={containerRef} className="w-full" />;
};