@situaction/traq-ui-ste 1.2.11 → 1.2.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -18,6 +18,7 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
|
18
18
|
defaultValue?: string;
|
|
19
19
|
/** Disable the input field **/
|
|
20
20
|
disabled?: boolean;
|
|
21
|
+
fullWidth?: boolean;
|
|
21
22
|
}
|
|
22
23
|
/**
|
|
23
24
|
* The Input component renders an input field with optional icons or labels on the left and right.
|
|
@@ -1,77 +1,80 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useState as
|
|
3
|
-
import '../../styles/Input.css';const j = "
|
|
4
|
-
"input-style": "_input-
|
|
5
|
-
"input-style-disabled": "_input-style-
|
|
6
|
-
"input-style-focused": "_input-style-
|
|
7
|
-
"input-style-secondary": "_input-style-
|
|
8
|
-
"input-style-ghost": "_input-style-
|
|
9
|
-
"input-style-error": "_input-style-
|
|
10
|
-
"input-container": "_input-
|
|
11
|
-
"input-style-size-xl": "_input-style-size-
|
|
12
|
-
"input-style-size-l": "_input-style-size-
|
|
13
|
-
"input-style-size-m": "_input-style-size-
|
|
14
|
-
"input-style-size-s": "_input-style-size-
|
|
15
|
-
"input-style-radius": "_input-style-
|
|
16
|
-
|
|
17
|
-
|
|
1
|
+
import { jsxs as p, jsx as e, Fragment as a } from "react/jsx-runtime";
|
|
2
|
+
import { useState as c, useRef as _ } from "react";
|
|
3
|
+
import '../../styles/Input.css';const j = "_fullWidth_1pmuq_141", N = "_flexHorizontalBetween_1pmuq_145", W = "_flexHorizontal_1pmuq_145", t = {
|
|
4
|
+
"input-style": "_input-style_1pmuq_30",
|
|
5
|
+
"input-style-disabled": "_input-style-disabled_1pmuq_60",
|
|
6
|
+
"input-style-focused": "_input-style-focused_1pmuq_71",
|
|
7
|
+
"input-style-secondary": "_input-style-secondary_1pmuq_78",
|
|
8
|
+
"input-style-ghost": "_input-style-ghost_1pmuq_92",
|
|
9
|
+
"input-style-error": "_input-style-error_1pmuq_95",
|
|
10
|
+
"input-container": "_input-container_1pmuq_105",
|
|
11
|
+
"input-style-size-xl": "_input-style-size-xl_1pmuq_109",
|
|
12
|
+
"input-style-size-l": "_input-style-size-l_1pmuq_116",
|
|
13
|
+
"input-style-size-m": "_input-style-size-m_1pmuq_123",
|
|
14
|
+
"input-style-size-s": "_input-style-size-s_1pmuq_130",
|
|
15
|
+
"input-style-radius": "_input-style-radius_1pmuq_137",
|
|
16
|
+
fullWidth: j,
|
|
17
|
+
flexHorizontalBetween: N,
|
|
18
|
+
flexHorizontal: W
|
|
18
19
|
}, R = ({
|
|
19
20
|
sizeStyle: y = "m",
|
|
20
|
-
labelUnit:
|
|
21
|
+
labelUnit: l,
|
|
21
22
|
status: n = "default",
|
|
22
|
-
childrenLeft:
|
|
23
|
-
childrenRight:
|
|
23
|
+
childrenLeft: u,
|
|
24
|
+
childrenRight: i,
|
|
24
25
|
round: d,
|
|
25
|
-
disabled:
|
|
26
|
+
disabled: o,
|
|
26
27
|
defaultValue: f,
|
|
27
|
-
|
|
28
|
+
fullWidth: m = !1,
|
|
29
|
+
...h
|
|
28
30
|
}) => {
|
|
29
|
-
const [z, r] =
|
|
31
|
+
const [z, r] = c(!1), [q, x] = c(f || ""), g = _(null), s = _(null), B = () => r(!0), C = () => r(!1), H = (F) => {
|
|
30
32
|
x(F.target.value);
|
|
31
|
-
},
|
|
33
|
+
}, S = () => {
|
|
32
34
|
s.current && s.current.focus();
|
|
33
|
-
},
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
d &&
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
n === "
|
|
35
|
+
}, v = [
|
|
36
|
+
t["input-style"],
|
|
37
|
+
t[`input-style-size-${y}`],
|
|
38
|
+
d && t["input-style-radius"],
|
|
39
|
+
t.flexHorizontalBetween,
|
|
40
|
+
m && t.fullWidth
|
|
41
|
+
].filter(Boolean).join(" "), w = [
|
|
42
|
+
z && t["input-style-focused"],
|
|
43
|
+
o && t["input-style-disabled"],
|
|
44
|
+
n === "secondary" && t["input-style-secondary"],
|
|
45
|
+
n === "ghost" && t["input-style-ghost"]
|
|
43
46
|
].filter(Boolean).join(" ");
|
|
44
|
-
return /* @__PURE__ */
|
|
47
|
+
return /* @__PURE__ */ p(
|
|
45
48
|
"div",
|
|
46
49
|
{
|
|
47
|
-
ref:
|
|
48
|
-
className: `${
|
|
50
|
+
ref: g,
|
|
51
|
+
className: `${v} ${(() => {
|
|
49
52
|
switch (n) {
|
|
50
53
|
case "error":
|
|
51
|
-
return
|
|
54
|
+
return t["input-style-error"];
|
|
52
55
|
default:
|
|
53
|
-
return
|
|
56
|
+
return w;
|
|
54
57
|
}
|
|
55
58
|
})()}`,
|
|
56
|
-
onFocus:
|
|
57
|
-
onBlur:
|
|
58
|
-
onClick:
|
|
59
|
+
onFocus: B,
|
|
60
|
+
onBlur: C,
|
|
61
|
+
onClick: S,
|
|
59
62
|
children: [
|
|
60
|
-
|
|
61
|
-
/* @__PURE__ */
|
|
63
|
+
u && /* @__PURE__ */ e(a, { children: u }),
|
|
64
|
+
/* @__PURE__ */ e("div", { className: t["input-container"], children: /* @__PURE__ */ e(
|
|
62
65
|
"input",
|
|
63
66
|
{
|
|
64
67
|
autoCorrect: "off",
|
|
65
|
-
disabled:
|
|
66
|
-
value:
|
|
67
|
-
onChange:
|
|
68
|
+
disabled: o,
|
|
69
|
+
value: q,
|
|
70
|
+
onChange: H,
|
|
68
71
|
ref: s,
|
|
69
|
-
...
|
|
72
|
+
...h
|
|
70
73
|
}
|
|
71
74
|
) }),
|
|
72
|
-
/* @__PURE__ */ a
|
|
73
|
-
|
|
74
|
-
|
|
75
|
+
/* @__PURE__ */ p(a, { children: [
|
|
76
|
+
l && /* @__PURE__ */ e("div", { children: l }),
|
|
77
|
+
i && /* @__PURE__ */ e("span", { className: t.flexHorizontal, children: i })
|
|
75
78
|
] })
|
|
76
79
|
]
|
|
77
80
|
}
|
package/dist/styles/Input.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._input-
|
|
1
|
+
._input-style_1pmuq_30{font-family:Urbanist,sans-serif;border:1px solid var(--input-primary-default-border);color:var(--input-primary-default-text)}._input-style_1pmuq_30 input{font:inherit;color:var(--input-primary-actived-text);background-color:transparent;border:none;width:100%}._input-style_1pmuq_30 input:focus{outline:none;box-shadow:none;border-color:transparent}._input-style_1pmuq_30 input::placeholder{font:inherit;color:var(--input-primary-default-text)}._input-style_1pmuq_30 input:-webkit-autofill{box-shadow:0 0 0 1000px transparent inset!important;-webkit-text-fill-color:inherit!important;background-color:transparent!important}._input-style_1pmuq_30 *{fill:var(--input-primary-default-icons)}._input-style-disabled_1pmuq_60{background-color:#0000000d;border-color:var(--input-primary-disabled-border);pointer-events:none}._input-style-disabled_1pmuq_60 input{color:var(--input-primary-disabled-text)}._input-style-disabled_1pmuq_60 *{fill:var(--input-primary-disabled-icons)}._input-style-focused_1pmuq_71{color:var(--input-primary-actived-text);border-color:var(--input-primary-actived-border)}._input-style-focused_1pmuq_71 *{fill:var(--icon-selector-button-default-icon)}._input-style-secondary_1pmuq_78{color:var(--input-secondary-default-text);border:1px solid var(--input-secondary-default-border);background:var(--input-secondary-default-background)}._input-style-secondary_1pmuq_78 input{color:var(--input-primary-actived-text)}._input-style-secondary_1pmuq_78 input::placeholder{color:var(--input-secondary-default-text)}._input-style-secondary_1pmuq_78 *{fill:var(--input-secondary-default-icons)}._input-style-ghost_1pmuq_92{border:none}._input-style-error_1pmuq_95{border-color:var(--input-primary-error-border);color:var(--input-primary-error-text)}._input-style-error_1pmuq_95 input::placeholder{color:var(--input-primary-error-text)}._input-style-error_1pmuq_95 *{fill:var(--input-primary-error-icons)}._input-style_1pmuq_30 ._input-container_1pmuq_105{position:relative;width:100%}._input-style-size-xl_1pmuq_109{padding:1rem;font-size:1.125em;line-height:28px;border-radius:8px;gap:.625rem}._input-style-size-l_1pmuq_116{padding:.75rem;font-size:1em;line-height:24px;border-radius:8px;gap:.5rem}._input-style-size-m_1pmuq_123{padding:.5rem;font-size:.875em;line-height:20px;border-radius:4px;gap:.375rem}._input-style-size-s_1pmuq_130{padding:.375rem;font-size:.875em;line-height:20px;border-radius:4px;gap:.25rem}._input-style-radius_1pmuq_137{border-radius:50px}._fullWidth_1pmuq_141{width:100%}._flexHorizontalBetween_1pmuq_145{display:flex;justify-content:space-between;align-items:center;flex-direction:row}._flexHorizontal_1pmuq_145{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}
|