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

remove void Widget inputs for now

Browse source
This commit is contained in:
Andrew Pareles 2024-12-07 17:20:02 -08:00
parent 4ba00f6216
commit 0f920fb867
2 changed files with 114 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarSettings.tsx
View file

@ -5,7 +5,6 @@
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useConfigState, useService } from '../util/services.js';
import { VoidSelectBox, VoidInputBox } from './inputs.js';
import { HistoryInputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
import { SelectBox } from '../../../../../../../base/browser/ui/selectBox/selectBox.js';
import { ConfigState, IVoidConfigStateService } from '../../../registerConfig.js';
@ -53,41 +52,40 @@ const SettingOfFieldAndParam = ({ field, param, configState, configStateService
</button>
const inputElement = enumArr === undefined ?
// string
(<VoidInputBox
onChangeText={updateState}
initVal={initValRef.current}
multiline={false}
placeholder=''
inputBoxRef={inputBoxRef}
/>)
// <input
// className='input p-1 w-full'
// type='text'
// value={val}
// onChange={(e) => updateState(e.target.value)}
// />
// (<VoidInputBox
// onChangeText={updateState}
// initVal={initValRef.current}
// multiline={false}
// placeholder=''
// inputBoxRef={inputBoxRef}
// />)
<input
className='input p-1 w-full'
type='text'
value={val}
onChange={(e) => updateState(e.target.value)}
/>
:
// enum
(<VoidSelectBox
onChangeSelection={updateState}
initVal={initValRef.current}
options={enumArr}
selectBoxRef={selectBoxRef}
/>)
// (<select
// className='dropdown p-1 w-full'
// value={val}
// onChange={(e) => updateState(e.target.value)}
// >
// {enumArr.map((option) => (
// <option key={option} value={option}>
// {option}
// </option>
// ))}
// </select>)
// (<VoidSelectBox
// onChangeSelection={updateState}
// initVal={initValRef.current}
// options={enumArr}
// selectBoxRef={selectBoxRef}
// />)
(<select
className='dropdown p-1 w-full'
value={val}
onChange={(e) => updateState(e.target.value)}
>
{enumArr.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</select>)
return <div>
<label className='hidden'>{param}</label>

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

@ -1,104 +1,104 @@
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 { SelectBox, unthemedSelectBoxStyles } from '../../../../../../../base/browser/ui/selectBox/selectBox.js';
// 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 { SelectBox, unthemedSelectBoxStyles } from '../../../../../../../base/browser/ui/selectBox/selectBox.js';
export const VoidInputBox = ({ onChangeText, initVal, placeholder, inputBoxRef, multiline }: {
onChangeText: (value: string) => void;
placeholder: string;
inputBoxRef: React.MutableRefObject<InputBox | null>;
multiline: boolean;
initVal: string;
}) => {
const contextViewProvider = useService('contextViewService');
// export const VoidInputBox = ({ onChangeText, initVal, placeholder, inputBoxRef, multiline }: {
// onChangeText: (value: string) => void;
// placeholder: string;
// inputBoxRef: React.MutableRefObject<InputBox | null>;
// multiline: boolean;
// initVal: string;
// }) => {
// const contextViewProvider = useService('contextViewService');
const containerRef = useRef<HTMLDivElement>(null);
// const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!containerRef.current) return;
// useEffect(() => {
// if (!containerRef.current) return;
// create and mount the HistoryInputBox
inputBoxRef.current = new InputBox(
containerRef.current,
contextViewProvider,
{
inputBoxStyles: {
...defaultInputBoxStyles,
inputBackground: 'transparent',
},
placeholder,
flexibleHeight: multiline,
flexibleMaxHeight: 500,
flexibleWidth: false,
// // create and mount the HistoryInputBox
// inputBoxRef.current = new InputBox(
// containerRef.current,
// contextViewProvider,
// {
// inputBoxStyles: {
// ...defaultInputBoxStyles,
// inputBackground: 'transparent',
// },
// placeholder,
// flexibleHeight: multiline,
// flexibleMaxHeight: 500,
// flexibleWidth: false,
}
);
inputBoxRef.current.value = initVal;
// }
// );
// inputBoxRef.current.value = initVal;
inputBoxRef.current.onDidChange((newStr) => {
console.log('CHANGE TEXT on inputbox', newStr)
onChangeText(newStr)
})
// inputBoxRef.current.onDidChange((newStr) => {
// console.log('CHANGE TEXT on inputbox', newStr)
// onChangeText(newStr)
// })
// cleanup
return () => {
if (inputBoxRef.current) {
inputBoxRef.current.dispose();
if (containerRef.current) {
while (containerRef.current.firstChild) {
containerRef.current.removeChild(containerRef.current.firstChild);
}
}
inputBoxRef.current = null;
}
};
}, [inputBoxRef, contextViewProvider, placeholder, multiline, initVal, onChangeText]); // Empty dependency array since we only want to mount/unmount once
// // cleanup
// return () => {
// if (inputBoxRef.current) {
// inputBoxRef.current.dispose();
// if (containerRef.current) {
// while (containerRef.current.firstChild) {
// containerRef.current.removeChild(containerRef.current.firstChild);
// }
// }
// inputBoxRef.current = null;
// }
// };
// }, [inputBoxRef, contextViewProvider, placeholder, multiline, initVal, onChangeText]);
return <div ref={containerRef} className="w-full" />;
};
// return <div ref={containerRef} className="w-full" />;
// };
export const VoidSelectBox = ({ onChangeSelection, initVal, selectBoxRef, options }: {
onChangeSelection: (value: string) => void;
initVal: string;
selectBoxRef: React.MutableRefObject<SelectBox | null>;
options: readonly string[];
// export const VoidSelectBox = ({ onChangeSelection, initVal, selectBoxRef, options }: {
// onChangeSelection: (value: string) => void;
// initVal: string;
// selectBoxRef: React.MutableRefObject<SelectBox | null>;
// options: readonly string[];
}) => {
const containerRef = useRef<HTMLDivElement>(null);
const contextViewProvider = useService('contextViewService');
// }) => {
// const containerRef = useRef<HTMLDivElement>(null);
// const contextViewProvider = useService('contextViewService');
useEffect(() => {
if (!containerRef.current) return;
// useEffect(() => {
// if (!containerRef.current) return;
const defaultIndex = options.indexOf(initVal);
// const defaultIndex = options.indexOf(initVal);
selectBoxRef.current = new SelectBox(
options.map(opt => ({ text: opt })),
defaultIndex,
contextViewProvider,
unthemedSelectBoxStyles
);
// selectBoxRef.current = new SelectBox(
// options.map(opt => ({ text: opt })),
// defaultIndex,
// contextViewProvider,
// unthemedSelectBoxStyles
// );
selectBoxRef.current.render(containerRef.current);
// selectBoxRef.current.render(containerRef.current);
selectBoxRef.current.onDidSelect(e => { onChangeSelection(e.selected); });
// selectBoxRef.current.onDidSelect(e => { onChangeSelection(e.selected); });
// cleanup
return () => {
if (selectBoxRef.current) {
selectBoxRef.current.dispose();
if (containerRef.current) {
while (containerRef.current.firstChild) {
containerRef.current.removeChild(containerRef.current.firstChild);
}
}
}
};
}, [options, initVal, onChangeSelection, contextViewProvider, selectBoxRef]);
// // cleanup
// return () => {
// if (selectBoxRef.current) {
// selectBoxRef.current.dispose();
// if (containerRef.current) {
// while (containerRef.current.firstChild) {
// containerRef.current.removeChild(containerRef.current.firstChild);
// }
// }
// }
// };
// }, [options, initVal, onChangeSelection, contextViewProvider, selectBoxRef]);
return <div ref={containerRef} className="w-full" />;
};
// return <div ref={containerRef} className="w-full" />;
// };