forked from OctoWoW/OctoLauncher
48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import cls from 'classnames';
|
|
import { forwardRef, type HTMLProps } from 'react';
|
|
import { AppWindow, FolderOpen } from 'lucide-react';
|
|
|
|
import { api, type RouterInputs } from '~renderer/utils/api';
|
|
|
|
import TextButton from '../styled/TextButton';
|
|
|
|
type Props = HTMLProps<HTMLInputElement> & {
|
|
setValue: (newVal: string) => void;
|
|
options: RouterInputs['general']['filePicker'];
|
|
};
|
|
|
|
const FilePickerInput = forwardRef<HTMLInputElement, Props>(
|
|
({ setValue, options, className, ...props }, ref) => {
|
|
const filePicker = api.general.filePicker.useMutation();
|
|
return (
|
|
<div className="relative flex grow">
|
|
<input
|
|
ref={ref}
|
|
id={props.name}
|
|
{...props}
|
|
className={cls(
|
|
'grow border-b border-blueGray bg-inherit p-1 pr-[44px] hocus:border-orange',
|
|
className
|
|
)}
|
|
/>
|
|
<TextButton
|
|
className="absolute right-1 top-0 h-full"
|
|
icon={
|
|
options.properties?.includes('openDirectory')
|
|
? FolderOpen
|
|
: AppWindow
|
|
}
|
|
title="Pick file"
|
|
onClick={async () => {
|
|
const r = await filePicker.mutateAsync(options);
|
|
if (r.canceled) return;
|
|
setValue(r.path[0]);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
export default FilePickerInput;
|