@uva-glass/component-library 3.34.4 → 3.34.6
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.
- package/dist/assets/CheckboxButtonBar.css +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js +47 -46
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js.map +1 -1
- package/dist/components/TextArea/TextArea.js +4 -4
- package/dist/components/TextArea/TextArea.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
._checkbox-button-
|
|
1
|
+
._checkbox-button-bar__container_148ge_1{display:grid;gap:.5rem;grid-template-columns:1fr;grid-template-rows:auto auto auto;width:fit-content}._checkbox-button-bar__container--label-left_148ge_9{grid-template-columns:auto 1fr;grid-template-rows:auto auto}._checkbox-button-bar__label_148ge_14{align-self:center;grid-column:1;grid-row:1}._checkbox-button-bar__bar_148ge_20{grid-column:1;grid-row:2}._checkbox-button-bar__bar--label-left_148ge_25{grid-column:2;grid-row:1}._checkbox-button-bar__footer_148ge_30{grid-column:1;grid-row:3}._checkbox-button-bar__footer-text_148ge_35{color:var(--new-color-grey-700);font-size:var(--font-size-text-non-essential)}._checkbox-button-bar__footer--label-left_148ge_40{grid-column:2;grid-row:2}._checkbox-button-bar__row_148ge_45{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-700);border-radius:.5rem;display:flex;flex-wrap:nowrap;gap:.25rem;padding:.25rem;width:fit-content}._checkbox-button-bar__row--not-validated_148ge_57{border-color:var(--new-color-red-600)}
|
|
@@ -1,85 +1,86 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useState as
|
|
1
|
+
import { jsxs as u, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { useState as N } from "react";
|
|
3
3
|
import { c as r } from "../../clsx-OuTLNxxd.js";
|
|
4
|
-
import { Label as
|
|
4
|
+
import { Label as C } from "../Label/Label.js";
|
|
5
5
|
import { FeedbackBox as S } from "../FeedbackBox/FeedbackBox.js";
|
|
6
6
|
import { ControlsButton as j } from "../ControlsButton/ControlsButton.js";
|
|
7
|
-
import '../../assets/CheckboxButtonBar.css';const
|
|
8
|
-
"checkbox-button-bar__container": "_checkbox-button-
|
|
9
|
-
"checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-
|
|
10
|
-
"checkbox-button-bar__label": "_checkbox-button-
|
|
11
|
-
"checkbox-button-bar__bar": "_checkbox-button-
|
|
12
|
-
"checkbox-button-bar__bar--label-left": "_checkbox-button-bar__bar--label-
|
|
13
|
-
"checkbox-button-bar__footer": "_checkbox-button-
|
|
14
|
-
"checkbox-button-bar__footer
|
|
15
|
-
"checkbox-button-
|
|
16
|
-
"checkbox-button-bar__row
|
|
7
|
+
import '../../assets/CheckboxButtonBar.css';const b = {
|
|
8
|
+
"checkbox-button-bar__container": "_checkbox-button-bar__container_148ge_1",
|
|
9
|
+
"checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_148ge_9",
|
|
10
|
+
"checkbox-button-bar__label": "_checkbox-button-bar__label_148ge_14",
|
|
11
|
+
"checkbox-button-bar__bar": "_checkbox-button-bar__bar_148ge_20",
|
|
12
|
+
"checkbox-button-bar__bar--label-left": "_checkbox-button-bar__bar--label-left_148ge_25",
|
|
13
|
+
"checkbox-button-bar__footer": "_checkbox-button-bar__footer_148ge_30",
|
|
14
|
+
"checkbox-button-bar__footer-text": "_checkbox-button-bar__footer-text_148ge_35",
|
|
15
|
+
"checkbox-button-bar__footer--label-left": "_checkbox-button-bar__footer--label-left_148ge_40",
|
|
16
|
+
"checkbox-button-bar__row": "_checkbox-button-bar__row_148ge_45",
|
|
17
|
+
"checkbox-button-bar__row--not-validated": "_checkbox-button-bar__row--not-validated_148ge_57"
|
|
17
18
|
}, B = ({
|
|
18
|
-
checkboxes:
|
|
19
|
+
checkboxes: i,
|
|
19
20
|
defaultValues: c,
|
|
20
21
|
label: h,
|
|
21
22
|
labelPosition: _ = "top",
|
|
22
23
|
required: m = !1,
|
|
23
24
|
notValidated: d = !1,
|
|
24
25
|
notValidatedText: a = "",
|
|
25
|
-
actAsRadioButtonBar:
|
|
26
|
-
footerText:
|
|
27
|
-
disableGroup:
|
|
28
|
-
onSetValues:
|
|
26
|
+
actAsRadioButtonBar: n = !1,
|
|
27
|
+
footerText: x = "",
|
|
28
|
+
disableGroup: g = !1,
|
|
29
|
+
onSetValues: k
|
|
29
30
|
}) => {
|
|
30
|
-
const [
|
|
31
|
-
c && !
|
|
32
|
-
),
|
|
33
|
-
let
|
|
34
|
-
|
|
31
|
+
const [f, s] = N(
|
|
32
|
+
c && !n ? c.map(String) : c && n ? c.slice(0, 1) : []
|
|
33
|
+
), p = (t) => {
|
|
34
|
+
let e = f;
|
|
35
|
+
n ? (s([t]), k([t])) : (e.includes(t) ? e = e.filter((l) => l !== t) : e = [...e, t], s(e), k(e));
|
|
35
36
|
};
|
|
36
|
-
return /* @__PURE__ */
|
|
37
|
+
return /* @__PURE__ */ u(
|
|
37
38
|
"div",
|
|
38
39
|
{
|
|
39
|
-
className: r(
|
|
40
|
-
_ === "left" &&
|
|
40
|
+
className: r(b["checkbox-button-bar__container"], [
|
|
41
|
+
_ === "left" && b["checkbox-button-bar__container--label-left"]
|
|
41
42
|
]),
|
|
42
43
|
children: [
|
|
43
|
-
/* @__PURE__ */
|
|
44
|
-
/* @__PURE__ */
|
|
44
|
+
/* @__PURE__ */ o("div", { className: b["checkbox-button-bar__label"], children: h && /* @__PURE__ */ o(C, { htmlFor: "", required: m, children: h }) }),
|
|
45
|
+
/* @__PURE__ */ o(
|
|
45
46
|
"div",
|
|
46
47
|
{
|
|
47
|
-
className: r(
|
|
48
|
-
_ === "left" &&
|
|
48
|
+
className: r(b["checkbox-button-bar__bar"], [
|
|
49
|
+
_ === "left" && b["checkbox-button-bar__bar--label-left"]
|
|
49
50
|
]),
|
|
50
|
-
children: /* @__PURE__ */
|
|
51
|
+
children: /* @__PURE__ */ o(
|
|
51
52
|
"div",
|
|
52
53
|
{
|
|
53
|
-
className: r(
|
|
54
|
-
[
|
|
54
|
+
className: r(b["checkbox-button-bar__row"], {
|
|
55
|
+
[b["checkbox-button-bar__row--not-validated"]]: d || a
|
|
55
56
|
}),
|
|
56
|
-
children:
|
|
57
|
+
children: i.map(({ label: t, value: e, prefix: l, disabled: v }) => /* @__PURE__ */ o(
|
|
57
58
|
j,
|
|
58
59
|
{
|
|
59
60
|
type: "checkbox",
|
|
60
|
-
label:
|
|
61
|
-
prefix:
|
|
61
|
+
label: t,
|
|
62
|
+
prefix: l,
|
|
62
63
|
forceSquared: !0,
|
|
63
|
-
value:
|
|
64
|
-
checked:
|
|
65
|
-
disabled:
|
|
66
|
-
onSetValue: (
|
|
64
|
+
value: e,
|
|
65
|
+
checked: f.includes(e),
|
|
66
|
+
disabled: v || g,
|
|
67
|
+
onSetValue: (w) => p(w.target.value)
|
|
67
68
|
},
|
|
68
|
-
`${
|
|
69
|
+
`${e}`
|
|
69
70
|
))
|
|
70
71
|
}
|
|
71
72
|
)
|
|
72
73
|
}
|
|
73
74
|
),
|
|
74
|
-
/* @__PURE__ */
|
|
75
|
+
/* @__PURE__ */ u(
|
|
75
76
|
"div",
|
|
76
77
|
{
|
|
77
|
-
className: r(
|
|
78
|
-
_ === "left" &&
|
|
78
|
+
className: r(b["checkbox-button-bar__footer"], [
|
|
79
|
+
_ === "left" && b["checkbox-button-bar__footer--label-left"]
|
|
79
80
|
]),
|
|
80
81
|
children: [
|
|
81
|
-
|
|
82
|
-
a !== "" && /* @__PURE__ */
|
|
82
|
+
x && /* @__PURE__ */ o("div", { className: b["checkbox-button-bar__footer-text"], children: x }),
|
|
83
|
+
a !== "" && /* @__PURE__ */ o(S, { level: "error", feedback: a })
|
|
83
84
|
]
|
|
84
85
|
}
|
|
85
86
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { Label } from 'components/Label';\nimport { FeedbackBox } from 'components/FeedbackBox';\nimport { ControlsButton } from 'components/ControlsButton';\n\ntype CheckboxProps = {\n label: string;\n value: string;\n prefix?: string;\n disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n /** array with objects with label, value, prefix and disabled*/\n checkboxes: CheckboxProps[];\n //** array with value(s) */\n defaultValues?: string[];\n label?: string;\n /** 'top' | 'left' */\n labelPosition?: 'top' | 'left';\n /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n required?: boolean;\n /** `true` to color border red to show missing in validation; otherwise, `false`. */\n notValidated?: boolean;\n /** error text to display under the bar */\n notValidatedText?: string;\n /** returns an array with only one value */\n actAsRadioButtonBar?: boolean;\n /** optional footer text */\n footerText?: string;\n /** disables all checkboxes in the bar */\n disableGroup?: boolean;\n onSetValues: (value: string[]) => void;\n}\n\nexport const CheckboxButtonBar = ({\n checkboxes,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidated = false,\n notValidatedText = '',\n actAsRadioButtonBar = false,\n footerText = '',\n disableGroup = false,\n onSetValues,\n}: CheckboxButtonBarProps) => {\n const [currentValues, setCurrentValues] = useState<string[]>(\n defaultValues && !actAsRadioButtonBar\n ? defaultValues.map(String)\n : defaultValues && actAsRadioButtonBar\n ? defaultValues.slice(0, 1)\n : []\n );\n\n const handleChange = (value: string) => {\n let values = currentValues;\n\n if (actAsRadioButtonBar) {\n setCurrentValues([value]);\n onSetValues([value]);\n } else {\n if (values.includes(value)) {\n values = values.filter((val) => val !== value);\n } else {\n values = [...values, value];\n }\n setCurrentValues(values);\n onSetValues(values);\n }\n };\n\n return (\n <div\n className={clsx(styles['checkbox-button-bar__container'], [\n labelPosition === 'left' && styles['checkbox-button-bar__container--label-left'],\n ])}\n >\n <div className={styles['checkbox-button-bar__label']}>\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n </div>\n <div\n className={clsx(styles['checkbox-button-bar__bar'], [\n labelPosition === 'left' && styles['checkbox-button-bar__bar--label-left'],\n ])}\n >\n <div\n className={clsx(styles['checkbox-button-bar__row'], {\n [styles['checkbox-button-bar__row--not-validated']]: notValidated || notValidatedText,\n })}\n >\n {checkboxes.map(({ label, value, prefix, disabled }) => (\n <ControlsButton\n key={`${value}`}\n type=\"checkbox\"\n label={label}\n prefix={prefix}\n forceSquared={true}\n value={value}\n checked={currentValues.includes(value)}\n disabled={disabled || disableGroup}\n onSetValue={(event) => handleChange(event.target.value)}\n />\n ))}\n </div>\n </div>\n <div\n className={clsx(styles['checkbox-button-bar__footer'], [\n labelPosition === 'left' && styles['checkbox-button-bar__footer--label-left'],\n ])}\n >\n {footerText && <div className={styles['checkbox-button-bar__footer']}>{footerText}</div>}\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValidated","notValidatedText","actAsRadioButtonBar","footerText","disableGroup","onSetValues","currentValues","setCurrentValues","useState","handleChange","value","values","val","jsxs","clsx","styles","jsx","Label","prefix","disabled","ControlsButton","event","FeedbackBox"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { Label } from 'components/Label';\nimport { FeedbackBox } from 'components/FeedbackBox';\nimport { ControlsButton } from 'components/ControlsButton';\n\ntype CheckboxProps = {\n label: string;\n value: string;\n prefix?: string;\n disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n /** array with objects with label, value, prefix and disabled*/\n checkboxes: CheckboxProps[];\n //** array with value(s) */\n defaultValues?: string[];\n label?: string;\n /** 'top' | 'left' */\n labelPosition?: 'top' | 'left';\n /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n required?: boolean;\n /** `true` to color border red to show missing in validation; otherwise, `false`. */\n notValidated?: boolean;\n /** error text to display under the bar */\n notValidatedText?: string;\n /** returns an array with only one value */\n actAsRadioButtonBar?: boolean;\n /** optional footer text */\n footerText?: string;\n /** disables all checkboxes in the bar */\n disableGroup?: boolean;\n onSetValues: (value: string[]) => void;\n}\n\nexport const CheckboxButtonBar = ({\n checkboxes,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidated = false,\n notValidatedText = '',\n actAsRadioButtonBar = false,\n footerText = '',\n disableGroup = false,\n onSetValues,\n}: CheckboxButtonBarProps) => {\n const [currentValues, setCurrentValues] = useState<string[]>(\n defaultValues && !actAsRadioButtonBar\n ? defaultValues.map(String)\n : defaultValues && actAsRadioButtonBar\n ? defaultValues.slice(0, 1)\n : []\n );\n\n const handleChange = (value: string) => {\n let values = currentValues;\n\n if (actAsRadioButtonBar) {\n setCurrentValues([value]);\n onSetValues([value]);\n } else {\n if (values.includes(value)) {\n values = values.filter((val) => val !== value);\n } else {\n values = [...values, value];\n }\n setCurrentValues(values);\n onSetValues(values);\n }\n };\n\n return (\n <div\n className={clsx(styles['checkbox-button-bar__container'], [\n labelPosition === 'left' && styles['checkbox-button-bar__container--label-left'],\n ])}\n >\n <div className={styles['checkbox-button-bar__label']}>\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n </div>\n <div\n className={clsx(styles['checkbox-button-bar__bar'], [\n labelPosition === 'left' && styles['checkbox-button-bar__bar--label-left'],\n ])}\n >\n <div\n className={clsx(styles['checkbox-button-bar__row'], {\n [styles['checkbox-button-bar__row--not-validated']]: notValidated || notValidatedText,\n })}\n >\n {checkboxes.map(({ label, value, prefix, disabled }) => (\n <ControlsButton\n key={`${value}`}\n type=\"checkbox\"\n label={label}\n prefix={prefix}\n forceSquared={true}\n value={value}\n checked={currentValues.includes(value)}\n disabled={disabled || disableGroup}\n onSetValue={(event) => handleChange(event.target.value)}\n />\n ))}\n </div>\n </div>\n <div\n className={clsx(styles['checkbox-button-bar__footer'], [\n labelPosition === 'left' && styles['checkbox-button-bar__footer--label-left'],\n ])}\n >\n {footerText && <div className={styles['checkbox-button-bar__footer-text']}>{footerText}</div>}\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValidated","notValidatedText","actAsRadioButtonBar","footerText","disableGroup","onSetValues","currentValues","setCurrentValues","useState","handleChange","value","values","val","jsxs","clsx","styles","jsx","Label","prefix","disabled","ControlsButton","event","FeedbackBox"],"mappings":";;;;;;;;;;;;;;;;;GAuCaA,IAAoB,CAAC;AAAA,EAChC,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,kBAAAC,IAAmB;AAAA,EACnB,qBAAAC,IAAsB;AAAA,EACtB,YAAAC,IAAa;AAAA,EACb,cAAAC,IAAe;AAAA,EACf,aAAAC;AACF,MAA8B;AAC5B,QAAM,CAACC,GAAeC,CAAgB,IAAIC;AAAA,IACxCZ,KAAiB,CAACM,IACdN,EAAc,IAAI,MAAM,IACxBA,KAAiBM,IACfN,EAAc,MAAM,GAAG,CAAC,IACxB,CAAA;AAAA,EAAC,GAGHa,IAAe,CAACC,MAAkB;AACtC,QAAIC,IAASL;AAEb,IAAIJ,KACFK,EAAiB,CAACG,CAAK,CAAC,GACxBL,EAAY,CAACK,CAAK,CAAC,MAEfC,EAAO,SAASD,CAAK,IACvBC,IAASA,EAAO,OAAO,CAACC,MAAQA,MAAQF,CAAK,IAE7CC,IAAS,CAAC,GAAGA,GAAQD,CAAK,GAE5BH,EAAiBI,CAAM,GACvBN,EAAYM,CAAM;AAAA,EACpB;AAGF,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,gCAAgC,GAAG;AAAA,QACxDjB,MAAkB,UAAUiB,EAAO,4CAA4C;AAAA,MAAA,CAChF;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,4BAA4B,GAChD,UAAAlB,KACC,gBAAAmB,EAACC,GAAA,EAAM,SAAQ,IAAG,UAAAlB,GACf,UAAAF,EAAA,CACH,GAEJ;AAAA,QACA,gBAAAmB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,0BAA0B,GAAG;AAAA,cAClDjB,MAAkB,UAAUiB,EAAO,sCAAsC;AAAA,YAAA,CAC1E;AAAA,YAED,UAAA,gBAAAC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWF,EAAKC,EAAO,0BAA0B,GAAG;AAAA,kBAClD,CAACA,EAAO,yCAAyC,CAAC,GAAGf,KAAgBC;AAAA,gBAAA,CACtE;AAAA,gBAEA,UAAAN,EAAW,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAa,GAAO,QAAAQ,GAAQ,UAAAC,EAAA,MACvC,gBAAAH;AAAA,kBAACI;AAAA,kBAAA;AAAA,oBAEC,MAAK;AAAA,oBACL,OAAOvB;AAAAA,oBACP,QAAAqB;AAAA,oBACA,cAAc;AAAA,oBACd,OAAAR;AAAA,oBACA,SAASJ,EAAc,SAASI,CAAK;AAAA,oBACrC,UAAUS,KAAYf;AAAA,oBACtB,YAAY,CAACiB,MAAUZ,EAAaY,EAAM,OAAO,KAAK;AAAA,kBAAA;AAAA,kBARjD,GAAGX,CAAK;AAAA,gBAAA,CAUhB;AAAA,cAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,QAEF,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAKC,EAAO,6BAA6B,GAAG;AAAA,cACrDjB,MAAkB,UAAUiB,EAAO,yCAAyC;AAAA,YAAA,CAC7E;AAAA,YAEA,UAAA;AAAA,cAAAZ,uBAAe,OAAA,EAAI,WAAWY,EAAO,kCAAkC,GAAI,UAAAZ,GAAW;AAAA,cACtFF,MAAqB,MAAM,gBAAAe,EAACM,KAAY,OAAM,SAAQ,UAAUrB,EAAA,CAAkB;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACrF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -11,8 +11,8 @@ import '../../assets/TextArea.css';const e = {
|
|
|
11
11
|
"text-area__word-count--alert": "_text-area__word-count--alert_iztus_36",
|
|
12
12
|
"text-area": "_text-area_iztus_1"
|
|
13
13
|
};
|
|
14
|
-
function b({ onChange: u, label: l, subLabel: s, maxCharacters: a = 0, defaultValue:
|
|
15
|
-
const t = x(null), [
|
|
14
|
+
function b({ onChange: u, label: l, subLabel: s, maxCharacters: a = 0, defaultValue: n = "" }) {
|
|
15
|
+
const t = x(null), [c, o] = p(n.length), i = () => {
|
|
16
16
|
t.current && (t.current.style.height = "auto", t.current.style.height = `${t.current.scrollHeight}px`, o(t.current.value.length), u(t.current.value.trim()));
|
|
17
17
|
};
|
|
18
18
|
return /* @__PURE__ */ r("div", { className: e["text-area__wrapper"], children: [
|
|
@@ -22,7 +22,7 @@ function b({ onChange: u, label: l, subLabel: s, maxCharacters: a = 0, defaultVa
|
|
|
22
22
|
s && /* @__PURE__ */ _("span", { className: e["text-area__sub-label"], children: s })
|
|
23
23
|
] }),
|
|
24
24
|
a > 0 && /* @__PURE__ */ r("div", { className: e["text-area__word-count"], children: [
|
|
25
|
-
/* @__PURE__ */ _("span", { className: d({ [e["text-area__word-count--alert"]]:
|
|
25
|
+
/* @__PURE__ */ _("span", { className: d({ [e["text-area__word-count--alert"]]: c === a }), children: c }),
|
|
26
26
|
" / ",
|
|
27
27
|
a
|
|
28
28
|
] })
|
|
@@ -34,7 +34,7 @@ function b({ onChange: u, label: l, subLabel: s, maxCharacters: a = 0, defaultVa
|
|
|
34
34
|
className: e["text-area"],
|
|
35
35
|
maxLength: a > 0 ? a : void 0,
|
|
36
36
|
onInput: i,
|
|
37
|
-
defaultValue:
|
|
37
|
+
defaultValue: n
|
|
38
38
|
}
|
|
39
39
|
)
|
|
40
40
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps {\n /** Returns entered values as trimmed string */\n onChange: (value: string) => void;\n /** The label for the text area */\n label?: string;\n /** Optional sub label for the text area */\n subLabel?: string;\n /** The max amount of allowed charecters in the text area */\n maxCharacters?: number;\n /** The default value for the text area */\n defaultValue?: string;\n}\n\nexport function TextArea({ onChange, label, subLabel, maxCharacters = 0, defaultValue = '' }: TextAreaProps) {\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n const [characterCount, setCharacterCount] = useState(
|
|
1
|
+
{"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps {\n /** Returns entered values as trimmed string */\n onChange: (value: string) => void;\n /** The label for the text area */\n label?: string;\n /** Optional sub label for the text area */\n subLabel?: string;\n /** The max amount of allowed charecters in the text area */\n maxCharacters?: number;\n /** The default value for the text area */\n defaultValue?: string;\n}\n\nexport function TextArea({ onChange, label, subLabel, maxCharacters = 0, defaultValue = '' }: TextAreaProps) {\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n const [characterCount, setCharacterCount] = useState(defaultValue.length);\n\n const handleInput = () => {\n if (textAreaRef.current) {\n textAreaRef.current.style.height = 'auto';\n textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;\n\n setCharacterCount(textAreaRef.current.value.length);\n onChange(textAreaRef.current.value.trim());\n }\n };\n\n return (\n <div className={styles['text-area__wrapper']}>\n {(label || maxCharacters > 0) && (\n <div className={styles['text-area__header']}>\n <span className={styles['text-area__label-wrapper']}>\n {label && <span className={styles['text-area__label']}>{label}</span>}\n {subLabel && <span className={styles['text-area__sub-label']}>{subLabel}</span>}\n </span>\n {maxCharacters > 0 && (\n <div className={styles['text-area__word-count']}>\n <span className={clsx({ [styles['text-area__word-count--alert']]: characterCount === maxCharacters })}>\n {characterCount}\n </span>\n / {maxCharacters}\n </div>\n )}\n </div>\n )}\n\n <textarea\n ref={textAreaRef}\n className={styles['text-area']}\n maxLength={maxCharacters > 0 ? maxCharacters : undefined}\n onInput={handleInput}\n defaultValue={defaultValue}\n />\n </div>\n );\n}\n"],"names":["TextArea","onChange","label","subLabel","maxCharacters","defaultValue","textAreaRef","useRef","characterCount","setCharacterCount","useState","handleInput","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;;;AAkBO,SAASA,EAAS,EAAE,UAAAC,GAAU,OAAAC,GAAO,UAAAC,GAAU,eAAAC,IAAgB,GAAG,cAAAC,IAAe,MAAqB;AAC3G,QAAMC,IAAcC,EAA4B,IAAI,GAC9C,CAACC,GAAgBC,CAAiB,IAAIC,EAASL,EAAa,MAAM,GAElEM,IAAc,MAAM;AACxB,IAAIL,EAAY,YACdA,EAAY,QAAQ,MAAM,SAAS,QACnCA,EAAY,QAAQ,MAAM,SAAS,GAAGA,EAAY,QAAQ,YAAY,MAEtEG,EAAkBH,EAAY,QAAQ,MAAM,MAAM,GAClDL,EAASK,EAAY,QAAQ,MAAM,KAAA,CAAM;AAAA,EAC3C;AAGF,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAWC,EAAO,oBAAoB,GACvC,UAAA;AAAA,KAAAX,KAASE,IAAgB,MACzB,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,gBAAAD,EAAC,QAAA,EAAK,WAAWC,EAAO,0BAA0B,GAC/C,UAAA;AAAA,QAAAX,uBAAU,QAAA,EAAK,WAAWW,EAAO,kBAAkB,GAAI,UAAAX,GAAM;AAAA,QAC7DC,KAAY,gBAAAW,EAAC,QAAA,EAAK,WAAWD,EAAO,sBAAsB,GAAI,UAAAV,EAAA,CAAS;AAAA,MAAA,GAC1E;AAAA,MACCC,IAAgB,KACf,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,uBAAuB,GAC5C,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWC,EAAK,EAAE,CAACF,EAAO,8BAA8B,CAAC,GAAGL,MAAmBJ,EAAA,CAAe,GACjG,UAAAI,EAAA,CACH;AAAA,QAAO;AAAA,QACOJ;AAAA,MAAA,EAAA,CAChB;AAAA,IAAA,GAEJ;AAAA,IAGF,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKR;AAAA,QACL,WAAWO,EAAO,WAAW;AAAA,QAC7B,WAAWT,IAAgB,IAAIA,IAAgB;AAAA,QAC/C,SAASO;AAAA,QACT,cAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
|