-
Notifications
You must be signed in to change notification settings - Fork 0
/
input.tsx
78 lines (69 loc) · 1.59 KB
/
input.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import type { ComponentProps } from "preact";
export type InputType = {
size?: "sm" | "md" | "lg";
rounded?: "square" | "sm" | "lg" | "full";
invalid?: boolean;
} & Omit<ComponentProps<"input">, "size">;
/** *
* @function Input
*
* @see {@link https://rfui.deno.dev/atoms/input}
*
* @example
* <Input type="text" />
*/
export const Input = (
{
size = "md",
rounded,
invalid = false,
...rest
}: InputType,
) => {
const { class: restClass, ...restWithoutClass } = rest;
let className =
"w-full border border-neutral-500 px-2 py-1 focus:border-neutral-900 focus:shadow-sm focus:outline-none";
className += " " + (() => {
switch (size) {
case "sm":
return "px-2 text-sm";
case "md":
return "px-3 py-2";
case "lg":
return "px-4 py-3 text-lg";
}
})();
className += " " + (() => {
switch (rounded) {
case "square":
return "rounded-none";
case "sm":
return "rounded";
case "lg":
return "rounded-lg";
case "full":
return "rounded-full px-3";
default:
return "rfui-rounded-default";
}
})();
if (rest.disabled) {
className += " cursor-not-allowed bg-neutral-50";
}
if (rest.readOnly || rest.readonly) {
className += " cursor-not-allowed";
}
if (invalid) {
className +=
" border-supporting-red-300 bg-supporting-red-50 text-supporting-red-900 focus:border-supporting-red-700";
}
if (restClass) {
className += ` ${restClass}`;
}
return (
<input
class={className}
{...restWithoutClass}
/>
);
};