handy online tools for AT Protocol
boat.kelinci.net
atproto
bluesky
atcute
typescript
solidjs
refactor: pass the input events
+21
-8
+4
src/components/inputs/_types.ts
+4
src/components/inputs/_types.ts
+4
-2
src/components/inputs/multiline-input.tsx
+4
-2
src/components/inputs/multiline-input.tsx
···
2
2
3
3
import { createId } from '~/lib/hooks/id';
4
4
5
+
import { BoundInputEvent } from './_types';
6
+
5
7
interface MultilineInputProps {
6
8
label: JSX.Element;
7
9
name?: string;
···
10
12
autocorrect?: 'off' | 'on';
11
13
value?: string;
12
14
autofocus?: boolean;
13
-
onChange?: (next: string) => void;
15
+
onChange?: (next: string, event: BoundInputEvent<HTMLTextAreaElement>) => void;
14
16
}
15
17
16
18
const MultilineInput = (props: MultilineInputProps) => {
···
43
45
value={props.value}
44
46
class="resize-y break-all rounded border border-gray-400 px-3 py-2 font-mono text-xs tracking-wider placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0"
45
47
style="field-sizing: content"
46
-
onInput={(ev) => onChange?.(ev.target.value)}
48
+
onInput={(event) => onChange?.(event.target.value, event)}
47
49
/>
48
50
</div>
49
51
);
+4
-2
src/components/inputs/radio-input.tsx
+4
-2
src/components/inputs/radio-input.tsx
···
2
2
3
3
import { createId } from '~/lib/hooks/id';
4
4
5
+
import { BoundInputEvent } from './_types';
6
+
5
7
interface RadioInputProps<T extends string> {
6
8
label: JSX.Element;
7
9
name?: string;
8
10
required?: boolean;
9
11
value?: T | undefined;
10
12
options: { value: T; label: string }[];
11
-
onChange?: (next: T) => void;
13
+
onChange?: (next: T, event: BoundInputEvent<HTMLInputElement>) => void;
12
14
}
13
15
14
16
const RadioInput = <T extends string>(props: RadioInputProps<T>) => {
···
36
38
value={value}
37
39
checked={hasValue ? props.value === value : false}
38
40
class="border-gray-400 text-purple-800 focus:ring-purple-800"
39
-
onInput={() => onChange?.(value)}
41
+
onInput={(event) => onChange?.(value, event)}
40
42
/>
41
43
42
44
<label for={optionId} class="text-sm">
+4
-2
src/components/inputs/select-input.tsx
+4
-2
src/components/inputs/select-input.tsx
···
2
2
3
3
import { createId } from '~/lib/hooks/id';
4
4
5
+
import { BoundInputEvent } from './_types';
6
+
5
7
interface SelectInputProps<T extends string> {
6
8
label: JSX.Element;
7
9
blurb?: string;
···
10
12
value?: T;
11
13
autofocus?: boolean;
12
14
options: { value: T; label: string; disabled?: boolean }[];
13
-
onChange?: (next: T) => void;
15
+
onChange?: (next: T, event: BoundInputEvent<HTMLSelectElement>) => void;
14
16
}
15
17
16
18
const SelectInput = <T extends string>(props: SelectInputProps<T>) => {
···
39
41
required={props.required}
40
42
value={props.value ?? ''}
41
43
class="rounded border border-gray-400 py-2 pl-3 pr-8 text-sm focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0"
42
-
onInput={(ev) => onChange?.(ev.target.value as T)}
44
+
onInput={(event) => onChange?.(event.target.value as T, event)}
43
45
>
44
46
{props.options.map((props) => {
45
47
return (
+5
-2
src/components/inputs/text-input.tsx
+5
-2
src/components/inputs/text-input.tsx
···
1
1
import { createEffect, JSX } from 'solid-js';
2
+
2
3
import { createId } from '~/lib/hooks/id';
4
+
5
+
import { BoundInputEvent } from './_types';
3
6
4
7
interface TextInputProps {
5
8
label: JSX.Element;
···
14
17
placeholder?: string;
15
18
value?: string;
16
19
autofocus?: boolean;
17
-
onChange?: (next: string) => void;
20
+
onChange?: (next: string, event: BoundInputEvent<HTMLInputElement>) => void;
18
21
}
19
22
20
23
const textInputStyles = ({ monospace = false }: TextInputProps) => {
···
57
60
placeholder={props.placeholder}
58
61
value={props.value ?? ''}
59
62
class={textInputStyles(props)}
60
-
onInput={(ev) => onChange?.(ev.target.value)}
63
+
onInput={(event) => onChange?.(event.target.value, event)}
61
64
/>
62
65
63
66
<p class="text-pretty text-[0.8125rem] leading-5 text-gray-500 empty:hidden">{props.blurb}</p>