jb-textarea 3.12.2 → 3.13.0
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/README.md +240 -171
- package/index.js +1 -1
- package/package.json +20 -7
- package/react/README.md +93 -30
- package/react/dist/JBTextarea.cjs.js +65 -1
- package/react/dist/JBTextarea.cjs.js.map +1 -1
- package/react/dist/JBTextarea.d.ts +68 -30
- package/react/dist/JBTextarea.js +53 -1
- package/react/dist/JBTextarea.js.map +1 -1
- package/react/dist/JBTextarea.umd.js +70 -1
- package/react/dist/JBTextarea.umd.js.map +1 -1
- package/react/lib/JBTextarea.tsx +16 -33
- package/react/lib/attributes-hook.ts +5 -13
- package/react/lib/events-hook.ts +4 -4
- package/react/lib/module-declaration.ts +20 -0
- package/react/tsconfig.json +2 -2
- package/web-component/custom-elements.json +494 -0
- package/web-component/dist/jb-textarea.cjs.js +238 -0
- package/web-component/dist/jb-textarea.cjs.js.br +0 -0
- package/web-component/dist/jb-textarea.cjs.js.gz +0 -0
- package/web-component/dist/jb-textarea.cjs.js.map +1 -0
- package/web-component/dist/jb-textarea.d.ts +311 -0
- package/web-component/dist/jb-textarea.d.ts.map +1 -0
- package/web-component/dist/jb-textarea.js +241 -0
- package/web-component/dist/jb-textarea.js.br +0 -0
- package/web-component/dist/jb-textarea.js.gz +0 -0
- package/web-component/dist/jb-textarea.js.map +1 -0
- package/web-component/dist/jb-textarea.umd.js +247 -0
- package/web-component/dist/jb-textarea.umd.js.br +0 -0
- package/web-component/dist/jb-textarea.umd.js.gz +0 -0
- package/web-component/dist/jb-textarea.umd.js.map +1 -0
- package/{lib → web-component/lib}/jb-textarea.css +12 -15
- package/{lib → web-component/lib}/jb-textarea.ts +58 -29
- package/{lib → web-component/lib}/render.ts +5 -5
- package/web-component/lib/variables.css +99 -0
- package/dist/jb-textarea.cjs.js +0 -2
- package/dist/jb-textarea.cjs.js.br +0 -0
- package/dist/jb-textarea.cjs.js.gz +0 -0
- package/dist/jb-textarea.cjs.js.map +0 -1
- package/dist/jb-textarea.d.ts +0 -39
- package/dist/jb-textarea.d.ts.map +0 -1
- package/dist/jb-textarea.js +0 -2
- package/dist/jb-textarea.js.br +0 -0
- package/dist/jb-textarea.js.gz +0 -0
- package/dist/jb-textarea.js.map +0 -1
- package/dist/jb-textarea.umd.js +0 -2
- package/dist/jb-textarea.umd.js.br +0 -0
- package/dist/jb-textarea.umd.js.gz +0 -0
- package/dist/jb-textarea.umd.js.map +0 -1
- package/lib/global.d.ts +0 -15
- package/lib/variables.css +0 -39
- /package/{dist → web-component/dist}/render.d.ts +0 -0
- /package/{dist → web-component/dist}/render.d.ts.map +0 -0
- /package/{dist → web-component/dist}/types.d.ts +0 -0
- /package/{dist → web-component/dist}/types.d.ts.map +0 -0
- /package/{lib → web-component/lib}/types.ts +0 -0
|
@@ -1,2 +1,66 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
var e = Object.create, t = Object.defineProperty, r = Object.getOwnPropertyDescriptor, n = Object.getOwnPropertyNames, o = Object.getPrototypeOf, u = Object.prototype.hasOwnProperty;
|
|
3
|
+
let a = require("react");
|
|
4
|
+
var i, l = 1, c = null != (i = a) ? e(o(i)) : {};
|
|
5
|
+
a = ((e, o, a, i) => {
|
|
6
|
+
if (o && "object" == typeof o || "function" == typeof o) for (var l, c = n(o), s = 0, d = c.length; s < d; s++) l = c[s], u.call(e, l) || l === a || t(e, l, {
|
|
7
|
+
get: ((e) => o[e]).bind(null, l),
|
|
8
|
+
enumerable: !(i = r(o, l)) || i.enumerable
|
|
9
|
+
});
|
|
10
|
+
return e;
|
|
11
|
+
})(!l && i && i.__esModule ? c : t(c, "default", {
|
|
12
|
+
value: i,
|
|
13
|
+
enumerable: !0
|
|
14
|
+
}), i), require("jb-textarea");
|
|
15
|
+
let s = require("jb-core/react");
|
|
16
|
+
const d = a.default.forwardRef((e, t) => {
|
|
17
|
+
{
|
|
18
|
+
const r = (0, a.useRef)(null);
|
|
19
|
+
(0, a.useImperativeHandle)(t, () => r.current ?? void 0, [r]);
|
|
20
|
+
const { onBeforeInput: n, onBlur: o, onChange: u, onEnter: i, onFocus: l, onInput: c, onKeyDown: d, onKeyUp: f, onInit: b, onLoad: p, placeholder: v, name: E, autoHeight: g, disabled: y, error: h, initialValue: m, required: j, validationList: O, value: q, ...I } = e;
|
|
21
|
+
return function(e, t) {
|
|
22
|
+
(0, a.useEffect)(() => {
|
|
23
|
+
e.current && (e.current.validation.list = t.validationList || []);
|
|
24
|
+
}, [t.validationList]), (0, a.useEffect)(() => {
|
|
25
|
+
e.current && void 0 !== t.disabled && (t.disabled ? e.current.disabled = !0 : e.current.disabled = !1);
|
|
26
|
+
}, [e.current, t.disabled]), (0, a.useEffect)(() => {
|
|
27
|
+
e.current && void 0 !== t.required && (t.required ? e.current.setAttribute("required", "") : e.current.removeAttribute("required"));
|
|
28
|
+
}, [t.required]), (0, a.useEffect)(() => {
|
|
29
|
+
e.current && (e.current.autoHeight = t.autoHeight || !1);
|
|
30
|
+
}, [t.autoHeight]), (0, a.useEffect)(() => {
|
|
31
|
+
t.error ? e?.current?.setAttribute("error", t.error) : e?.current?.removeAttribute("error");
|
|
32
|
+
}, [t.error]);
|
|
33
|
+
}(r, {
|
|
34
|
+
autoHeight: g,
|
|
35
|
+
disabled: y,
|
|
36
|
+
error: h,
|
|
37
|
+
required: j,
|
|
38
|
+
validationList: O
|
|
39
|
+
}), function(e, t) {
|
|
40
|
+
(0, s.useEvent)(e, "load", t.onLoad, !0), (0, s.useEvent)(e, "init", t.onInit, !0), (0, s.useEvent)(e, "change", t.onChange), (0, s.useEvent)(e, "keydown", t.onKeyDown), (0, s.useEvent)(e, "input", t.onInput), (0, s.useEvent)(e, "beforeinput", t.onBeforeInput), (0, s.useEvent)(e, "keyup", t.onKeyUp), (0, s.useEvent)(e, "focus", t.onFocus), (0, s.useEvent)(e, "blur", t.onBlur), (0, s.useEvent)(e, "enter", t.onEnter);
|
|
41
|
+
}(r, {
|
|
42
|
+
onBeforeInput: n,
|
|
43
|
+
onBlur: o,
|
|
44
|
+
onChange: u,
|
|
45
|
+
onEnter: i,
|
|
46
|
+
onFocus: l,
|
|
47
|
+
onInput: c,
|
|
48
|
+
onKeyDown: d,
|
|
49
|
+
onKeyUp: f,
|
|
50
|
+
onInit: b,
|
|
51
|
+
onLoad: p
|
|
52
|
+
}), a.default.createElement("jb-textarea", {
|
|
53
|
+
ref: r,
|
|
54
|
+
value: q ?? "",
|
|
55
|
+
initialValue: m ?? "",
|
|
56
|
+
name: E,
|
|
57
|
+
label: e.label,
|
|
58
|
+
message: e.message,
|
|
59
|
+
placeholder: v,
|
|
60
|
+
...I
|
|
61
|
+
}, e.children);
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
exports.JBTextarea = d;
|
|
65
|
+
|
|
2
66
|
//# sourceMappingURL=JBTextarea.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JBTextarea.cjs.js","names":[],"sources":["../lib/events-hook.ts","../lib/attributes-hook.ts","../lib/JBTextarea.tsx"],"sourcesContent":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"JBTextarea.cjs.js","names":["useEvent","useEvents","element","props","onLoad","onInit","onChange","onKeyDown","onInput","onBeforeInput","onKeyUp","onFocus","onBlur","onEnter","useEffect","useJBTextareaAttribute","element","props","current","validation","list","validationList","disabled","undefined","required","setAttribute","removeAttribute","autoHeight","error","React","useRef","useImperativeHandle","useEvents","useJBTextareaAttribute","JBTextarea","forwardRef","props","ref","element","current","undefined","onBeforeInput","onBlur","onChange","onEnter","onFocus","onInput","onKeyDown","onKeyUp","onInit","onLoad","placeholder","name","autoHeight","disabled","error","initialValue","required","validationList","value","otherProps","jb-textarea","label","message","children"],"sources":["../lib/events-hook.ts","../lib/attributes-hook.ts","../lib/JBTextarea.tsx"],"sourcesContent":["import { useEvent } from \"jb-core/react\";\nimport type { RefObject } from \"react\";\nimport type { JBTextareaWebComponent, JBTextareaEventType } from 'jb-textarea';\r\n\r\nexport type EventProps = {\r\n /**\r\n * when component loaded, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount\r\n */\r\n onLoad?: (e: JBTextareaEventType<CustomEvent>) => void,\r\n /**\r\n * when all property set and ready to use, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount\r\n */\r\n onInit?: (e: JBTextareaEventType<CustomEvent>) => void,\r\n onChange?: (e: JBTextareaEventType<Event>) => void,\r\n onFocus?: (e: JBTextareaEventType<FocusEvent>) => void,\r\n onBlur?: (e: JBTextareaEventType<FocusEvent>) => void,\r\n onKeyDown?: (e: JBTextareaEventType<KeyboardEvent>) => void,\r\n onKeyUp?: (e: JBTextareaEventType<KeyboardEvent>) => void,\r\n onInput?: (e: JBTextareaEventType<InputEvent>) => void,\r\n onBeforeInput?: (e: JBTextareaEventType<InputEvent>) => void,\r\n onEnter?: (e: JBTextareaEventType<KeyboardEvent>) => void,\r\n\r\n}\r\nexport function useEvents(element: RefObject<JBTextareaWebComponent | null>, props: EventProps) {\n useEvent(element, 'load', props.onLoad, true);\r\n useEvent(element, 'init', props.onInit, true);\r\n useEvent(element, 'change', props.onChange);\r\n useEvent(element, 'keydown', props.onKeyDown);\r\n useEvent(element, 'input', props.onInput);\r\n useEvent(element, 'beforeinput', props.onBeforeInput);\r\n useEvent(element, 'keyup', props.onKeyUp);\r\n useEvent(element, 'focus', props.onFocus);\r\n useEvent(element, 'blur', props.onBlur);\r\n useEvent(element, 'enter', props.onEnter);\r\n}\n","import { type JBTextareaWebComponent, type ValidationValue } from \"jb-textarea\";\nimport { type ValidationItem } from \"jb-validation\";\nimport { type RefObject, useEffect } from \"react\";\n\r\nexport type JBTextareaAttributes = {\r\n validationList?:ValidationItem<ValidationValue>[],\r\n autoHeight?: boolean,\r\n required?:boolean\r\n error?: string,\r\n disabled?:boolean\r\n}\r\nexport function useJBTextareaAttribute(element: RefObject<JBTextareaWebComponent | null>, props: JBTextareaAttributes) {\n\r\n useEffect(() => {\r\n if(element.current){\r\n element.current.validation.list = props.validationList || [];\r\n }\r\n }, [props.validationList]);\r\n\r\n useEffect(() => {\r\n if(element.current && props.disabled!== undefined){\r\n props.disabled?element.current.disabled = true:element.current.disabled = false\r\n }\r\n }, [element.current,props.disabled]);\r\n\r\n useEffect(() => {\r\n if(element.current && props.required!== undefined){\r\n props.required?element.current.setAttribute(\"required\",''):element.current.removeAttribute(\"required\");\r\n }\r\n }, [props.required]);\r\n\r\n useEffect(() => {\r\n if(element.current){\r\n element.current.autoHeight = props.autoHeight || false;\r\n }\r\n }, [props.autoHeight]);\r\n \r\n useEffect(() => {\r\n if (props.error) {\r\n element?.current?.setAttribute('error', props.error);\r\n } else {\r\n element?.current?.removeAttribute('error');\r\n }\r\n }, [props.error]);\r\n}\n","'use client'\r\n/* eslint-disable no-inner-declarations */\r\nimport React, { useRef, useImperativeHandle, type PropsWithChildren } from 'react';\r\nimport 'jb-textarea';\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport type {JBTextareaWebComponent} from 'jb-textarea';\r\nimport { type EventProps, useEvents } from './events-hook.js';\nimport { type JBTextareaAttributes, useJBTextareaAttribute } from './attributes-hook.js';\nimport type { JBElementStandardProps } from 'jb-core/react';\nimport './module-declaration.js';\n\n// eslint-disable-next-line react/display-name\nconst JBTextarea = React.forwardRef((props:Props, ref) => {\r\n {\r\n //we set this state so when ref change we have a render and our event listener will be updated\r\n const element = useRef<JBTextareaWebComponent>(null);\r\n useImperativeHandle(ref, () => element.current ?? undefined, [element]);\n const {onBeforeInput,onBlur,onChange,onEnter,onFocus,onInput,onKeyDown,onKeyUp,onInit,onLoad, placeholder, name,autoHeight,disabled,error,initialValue,required,validationList,value,...otherProps} = props;\n useJBTextareaAttribute(element, {autoHeight,disabled,error,required,validationList});\n useEvents(element,{onBeforeInput,onBlur,onChange,onEnter,onFocus,onInput,onKeyDown,onKeyUp,onInit,onLoad});\r\n return (\r\n <jb-textarea ref={element} value={value ?? \"\"} initialValue={initialValue ?? \"\"} name={name} label={props.label} message={props.message} placeholder={placeholder} {...otherProps}>\n {props.children}\r\n </jb-textarea>\r\n );\r\n }\r\n});\r\n\r\ntype JBTextareaProps = EventProps & JBTextareaAttributes & {\r\n label?: string,\r\n message?:string,\r\n name?:string,\r\n placeholder?:string\n value?: string | null,\n initialValue?: string | null,\n}\nexport type Props = PropsWithChildren<JBTextareaProps> & JBElementStandardProps<JBTextareaWebComponent, keyof JBTextareaProps>;\r\nexport {JBTextarea};\n"],"mappings":"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"}
|
|
@@ -1,36 +1,74 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import React$1, { PropsWithChildren } from "react";
|
|
2
|
+
import { JBTextareaEventType, JBTextareaWebComponent, ValidationValue } from "jb-textarea";
|
|
3
|
+
import { ValidationItem } from "jb-validation";
|
|
4
|
+
import { JBElementStandardProps } from "jb-core/react";
|
|
5
|
+
|
|
6
|
+
//#region modules/jb-textarea/react/lib/events-hook.d.ts
|
|
7
|
+
type EventProps = {
|
|
8
|
+
/**
|
|
9
|
+
* when component loaded, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount
|
|
10
|
+
*/
|
|
11
|
+
onLoad?: (e: JBTextareaEventType<CustomEvent>) => void;
|
|
12
|
+
/**
|
|
13
|
+
* when all property set and ready to use, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount
|
|
14
|
+
*/
|
|
15
|
+
onInit?: (e: JBTextareaEventType<CustomEvent>) => void;
|
|
16
|
+
onChange?: (e: JBTextareaEventType<Event>) => void;
|
|
17
|
+
onFocus?: (e: JBTextareaEventType<FocusEvent>) => void;
|
|
18
|
+
onBlur?: (e: JBTextareaEventType<FocusEvent>) => void;
|
|
19
|
+
onKeyDown?: (e: JBTextareaEventType<KeyboardEvent>) => void;
|
|
20
|
+
onKeyUp?: (e: JBTextareaEventType<KeyboardEvent>) => void;
|
|
21
|
+
onInput?: (e: JBTextareaEventType<InputEvent>) => void;
|
|
22
|
+
onBeforeInput?: (e: JBTextareaEventType<InputEvent>) => void;
|
|
23
|
+
onEnter?: (e: JBTextareaEventType<KeyboardEvent>) => void;
|
|
24
|
+
};
|
|
25
|
+
//#endregion
|
|
26
|
+
//#region modules/jb-textarea/react/lib/attributes-hook.d.ts
|
|
27
|
+
type JBTextareaAttributes = {
|
|
28
|
+
validationList?: ValidationItem<ValidationValue>[];
|
|
29
|
+
autoHeight?: boolean;
|
|
30
|
+
required?: boolean;
|
|
31
|
+
error?: string;
|
|
32
|
+
disabled?: boolean;
|
|
33
|
+
};
|
|
34
|
+
//#endregion
|
|
35
|
+
//#region modules/jb-textarea/react/lib/module-declaration.d.ts
|
|
7
36
|
declare module "react" {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
37
|
+
namespace JSX {
|
|
38
|
+
interface IntrinsicElements {
|
|
39
|
+
'jb-textarea': JBTextareaType;
|
|
40
|
+
}
|
|
41
|
+
interface JBTextareaType extends React.DetailedHTMLProps<React.HTMLAttributes<JBTextareaWebComponent>, JBTextareaWebComponent> {
|
|
42
|
+
class?: string;
|
|
43
|
+
label?: string;
|
|
44
|
+
name?: string;
|
|
45
|
+
message?: string;
|
|
46
|
+
placeholder?: string;
|
|
47
|
+
value?: string;
|
|
48
|
+
initialValue?: string;
|
|
19
49
|
}
|
|
50
|
+
}
|
|
20
51
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
52
|
+
//#endregion
|
|
53
|
+
//#region modules/jb-textarea/react/lib/JBTextarea.d.ts
|
|
54
|
+
declare const JBTextarea: React$1.ForwardRefExoticComponent<EventProps & JBTextareaAttributes & {
|
|
55
|
+
label?: string;
|
|
56
|
+
message?: string;
|
|
57
|
+
name?: string;
|
|
58
|
+
placeholder?: string;
|
|
59
|
+
value?: string | null;
|
|
60
|
+
initialValue?: string | null;
|
|
26
61
|
} & {
|
|
27
|
-
|
|
28
|
-
} &
|
|
62
|
+
children?: React$1.ReactNode | undefined;
|
|
63
|
+
} & JBElementStandardProps<JBTextareaWebComponent, keyof EventProps | keyof JBTextareaAttributes | "label" | "message" | "name" | "placeholder" | "value" | "initialValue"> & React$1.RefAttributes<unknown>>;
|
|
29
64
|
type JBTextareaProps = EventProps & JBTextareaAttributes & {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
65
|
+
label?: string;
|
|
66
|
+
message?: string;
|
|
67
|
+
name?: string;
|
|
68
|
+
placeholder?: string;
|
|
69
|
+
value?: string | null;
|
|
70
|
+
initialValue?: string | null;
|
|
34
71
|
};
|
|
35
|
-
|
|
36
|
-
|
|
72
|
+
type Props = PropsWithChildren<JBTextareaProps> & JBElementStandardProps<JBTextareaWebComponent, keyof JBTextareaProps>;
|
|
73
|
+
//#endregion
|
|
74
|
+
export { JBTextarea, Props };
|
package/react/dist/JBTextarea.js
CHANGED
|
@@ -1,2 +1,54 @@
|
|
|
1
|
-
import e,{useEffect as r,useImperativeHandle as
|
|
1
|
+
import e, { useEffect as r, useImperativeHandle as n, useRef as t } from "react";
|
|
2
|
+
import "jb-textarea";
|
|
3
|
+
import { useEvent as o } from "jb-core/react";
|
|
4
|
+
const i = e.forwardRef((i, u) => {
|
|
5
|
+
{
|
|
6
|
+
const a = t(null);
|
|
7
|
+
n(u, () => a.current ?? void 0, [a]);
|
|
8
|
+
const { onBeforeInput: d, onBlur: l, onChange: c, onEnter: s, onFocus: b, onInput: p, onKeyDown: f, onKeyUp: h, onInit: m, onLoad: v, placeholder: g, name: I, autoHeight: y, disabled: q, error: L, initialValue: B, required: K, validationList: w, value: H, ...A } = i;
|
|
9
|
+
return function(e, n) {
|
|
10
|
+
r(() => {
|
|
11
|
+
e.current && (e.current.validation.list = n.validationList || []);
|
|
12
|
+
}, [n.validationList]), r(() => {
|
|
13
|
+
e.current && void 0 !== n.disabled && (n.disabled ? e.current.disabled = !0 : e.current.disabled = !1);
|
|
14
|
+
}, [e.current, n.disabled]), r(() => {
|
|
15
|
+
e.current && void 0 !== n.required && (n.required ? e.current.setAttribute("required", "") : e.current.removeAttribute("required"));
|
|
16
|
+
}, [n.required]), r(() => {
|
|
17
|
+
e.current && (e.current.autoHeight = n.autoHeight || !1);
|
|
18
|
+
}, [n.autoHeight]), r(() => {
|
|
19
|
+
n.error ? e?.current?.setAttribute("error", n.error) : e?.current?.removeAttribute("error");
|
|
20
|
+
}, [n.error]);
|
|
21
|
+
}(a, {
|
|
22
|
+
autoHeight: y,
|
|
23
|
+
disabled: q,
|
|
24
|
+
error: L,
|
|
25
|
+
required: K,
|
|
26
|
+
validationList: w
|
|
27
|
+
}), function(e, r) {
|
|
28
|
+
o(e, "load", r.onLoad, !0), o(e, "init", r.onInit, !0), o(e, "change", r.onChange), o(e, "keydown", r.onKeyDown), o(e, "input", r.onInput), o(e, "beforeinput", r.onBeforeInput), o(e, "keyup", r.onKeyUp), o(e, "focus", r.onFocus), o(e, "blur", r.onBlur), o(e, "enter", r.onEnter);
|
|
29
|
+
}(a, {
|
|
30
|
+
onBeforeInput: d,
|
|
31
|
+
onBlur: l,
|
|
32
|
+
onChange: c,
|
|
33
|
+
onEnter: s,
|
|
34
|
+
onFocus: b,
|
|
35
|
+
onInput: p,
|
|
36
|
+
onKeyDown: f,
|
|
37
|
+
onKeyUp: h,
|
|
38
|
+
onInit: m,
|
|
39
|
+
onLoad: v
|
|
40
|
+
}), e.createElement("jb-textarea", {
|
|
41
|
+
ref: a,
|
|
42
|
+
value: H ?? "",
|
|
43
|
+
initialValue: B ?? "",
|
|
44
|
+
name: I,
|
|
45
|
+
label: i.label,
|
|
46
|
+
message: i.message,
|
|
47
|
+
placeholder: g,
|
|
48
|
+
...A
|
|
49
|
+
}, i.children);
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
export { i as JBTextarea };
|
|
53
|
+
|
|
2
54
|
//# sourceMappingURL=JBTextarea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JBTextarea.js","names":[],"sources":["../lib/events-hook.ts","../lib/attributes-hook.ts","../lib/JBTextarea.tsx"],"sourcesContent":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"JBTextarea.js","names":["useEvent","useEvents","element","props","onLoad","onInit","onChange","onKeyDown","onInput","onBeforeInput","onKeyUp","onFocus","onBlur","onEnter","useEffect","useJBTextareaAttribute","element","props","current","validation","list","validationList","disabled","undefined","required","setAttribute","removeAttribute","autoHeight","error","React","useRef","useImperativeHandle","useEvents","useJBTextareaAttribute","JBTextarea","forwardRef","props","ref","element","current","undefined","onBeforeInput","onBlur","onChange","onEnter","onFocus","onInput","onKeyDown","onKeyUp","onInit","onLoad","placeholder","name","autoHeight","disabled","error","initialValue","required","validationList","value","otherProps","jb-textarea","label","message","children"],"sources":["../lib/events-hook.ts","../lib/attributes-hook.ts","../lib/JBTextarea.tsx"],"sourcesContent":["import { useEvent } from \"jb-core/react\";\nimport type { RefObject } from \"react\";\nimport type { JBTextareaWebComponent, JBTextareaEventType } from 'jb-textarea';\r\n\r\nexport type EventProps = {\r\n /**\r\n * when component loaded, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount\r\n */\r\n onLoad?: (e: JBTextareaEventType<CustomEvent>) => void,\r\n /**\r\n * when all property set and ready to use, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount\r\n */\r\n onInit?: (e: JBTextareaEventType<CustomEvent>) => void,\r\n onChange?: (e: JBTextareaEventType<Event>) => void,\r\n onFocus?: (e: JBTextareaEventType<FocusEvent>) => void,\r\n onBlur?: (e: JBTextareaEventType<FocusEvent>) => void,\r\n onKeyDown?: (e: JBTextareaEventType<KeyboardEvent>) => void,\r\n onKeyUp?: (e: JBTextareaEventType<KeyboardEvent>) => void,\r\n onInput?: (e: JBTextareaEventType<InputEvent>) => void,\r\n onBeforeInput?: (e: JBTextareaEventType<InputEvent>) => void,\r\n onEnter?: (e: JBTextareaEventType<KeyboardEvent>) => void,\r\n\r\n}\r\nexport function useEvents(element: RefObject<JBTextareaWebComponent | null>, props: EventProps) {\n useEvent(element, 'load', props.onLoad, true);\r\n useEvent(element, 'init', props.onInit, true);\r\n useEvent(element, 'change', props.onChange);\r\n useEvent(element, 'keydown', props.onKeyDown);\r\n useEvent(element, 'input', props.onInput);\r\n useEvent(element, 'beforeinput', props.onBeforeInput);\r\n useEvent(element, 'keyup', props.onKeyUp);\r\n useEvent(element, 'focus', props.onFocus);\r\n useEvent(element, 'blur', props.onBlur);\r\n useEvent(element, 'enter', props.onEnter);\r\n}\n","import { type JBTextareaWebComponent, type ValidationValue } from \"jb-textarea\";\nimport { type ValidationItem } from \"jb-validation\";\nimport { type RefObject, useEffect } from \"react\";\n\r\nexport type JBTextareaAttributes = {\r\n validationList?:ValidationItem<ValidationValue>[],\r\n autoHeight?: boolean,\r\n required?:boolean\r\n error?: string,\r\n disabled?:boolean\r\n}\r\nexport function useJBTextareaAttribute(element: RefObject<JBTextareaWebComponent | null>, props: JBTextareaAttributes) {\n\r\n useEffect(() => {\r\n if(element.current){\r\n element.current.validation.list = props.validationList || [];\r\n }\r\n }, [props.validationList]);\r\n\r\n useEffect(() => {\r\n if(element.current && props.disabled!== undefined){\r\n props.disabled?element.current.disabled = true:element.current.disabled = false\r\n }\r\n }, [element.current,props.disabled]);\r\n\r\n useEffect(() => {\r\n if(element.current && props.required!== undefined){\r\n props.required?element.current.setAttribute(\"required\",''):element.current.removeAttribute(\"required\");\r\n }\r\n }, [props.required]);\r\n\r\n useEffect(() => {\r\n if(element.current){\r\n element.current.autoHeight = props.autoHeight || false;\r\n }\r\n }, [props.autoHeight]);\r\n \r\n useEffect(() => {\r\n if (props.error) {\r\n element?.current?.setAttribute('error', props.error);\r\n } else {\r\n element?.current?.removeAttribute('error');\r\n }\r\n }, [props.error]);\r\n}\n","'use client'\r\n/* eslint-disable no-inner-declarations */\r\nimport React, { useRef, useImperativeHandle, type PropsWithChildren } from 'react';\r\nimport 'jb-textarea';\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport type {JBTextareaWebComponent} from 'jb-textarea';\r\nimport { type EventProps, useEvents } from './events-hook.js';\nimport { type JBTextareaAttributes, useJBTextareaAttribute } from './attributes-hook.js';\nimport type { JBElementStandardProps } from 'jb-core/react';\nimport './module-declaration.js';\n\n// eslint-disable-next-line react/display-name\nconst JBTextarea = React.forwardRef((props:Props, ref) => {\r\n {\r\n //we set this state so when ref change we have a render and our event listener will be updated\r\n const element = useRef<JBTextareaWebComponent>(null);\r\n useImperativeHandle(ref, () => element.current ?? undefined, [element]);\n const {onBeforeInput,onBlur,onChange,onEnter,onFocus,onInput,onKeyDown,onKeyUp,onInit,onLoad, placeholder, name,autoHeight,disabled,error,initialValue,required,validationList,value,...otherProps} = props;\n useJBTextareaAttribute(element, {autoHeight,disabled,error,required,validationList});\n useEvents(element,{onBeforeInput,onBlur,onChange,onEnter,onFocus,onInput,onKeyDown,onKeyUp,onInit,onLoad});\r\n return (\r\n <jb-textarea ref={element} value={value ?? \"\"} initialValue={initialValue ?? \"\"} name={name} label={props.label} message={props.message} placeholder={placeholder} {...otherProps}>\n {props.children}\r\n </jb-textarea>\r\n );\r\n }\r\n});\r\n\r\ntype JBTextareaProps = EventProps & JBTextareaAttributes & {\r\n label?: string,\r\n message?:string,\r\n name?:string,\r\n placeholder?:string\n value?: string | null,\n initialValue?: string | null,\n}\nexport type Props = PropsWithChildren<JBTextareaProps> & JBElementStandardProps<JBTextareaWebComponent, keyof JBTextareaProps>;\r\nexport {JBTextarea};\n"],"mappings":";;;AEYA,MAAMkC,IAAaL,EAAMM,YAAYC,GAAaC,MAAAA;CAChD;EAEE,MAAMC,IAAUR,EAA+B,IAAA;EAC/CC,EAAoBM,SAAWC,EAAQC,WAAAA,KAAWC,GAAW,CAACF,CAAAA,CAAAA;EAC9D,MAAA,EAAM,eAACG,GAAAA,QAAcC,GAAAA,UAAOC,GAAAA,SAASC,GAAAA,SAAQC,GAAAA,SAAQC,GAAAA,WAAQC,GAAAA,SAAUC,GAAAA,QAAQC,GAAAA,QAAOC,GAAAA,aAAQC,GAAAA,MAAaC,GAAAA,YAAKC,GAAAA,UAAWC,GAAAA,OAASC,GAAAA,cAAMC,GAAAA,UAAaC,GAAAA,gBAASC,GAAAA,OAAeC,GAAAA,GAASC,MAAcxB;EAGtM,ODTJ,SAAuCpB,GAAmDC,GAAAA;GAExFH,QAAAA;IACKE,EAAQE,YACTF,EAAQE,QAAQC,WAAWC,OAAOH,EAAMI,kBAAkB,CAAA;GAAA,GAE3D,CAACJ,EAAMI,cAAAA,CAAAA,GAEVP,QAAAA;IACKE,EAAQE,WAAAA,KAA6BK,MAAlBN,EAAMK,aAC1BL,EAAMK,WAASN,EAAQE,QAAQI,WAAAA,CAAW,IAAKN,EAAQE,QAAQI,WAAAA,CAAW;GAAA,GAE3E,CAACN,EAAQE,SAAQD,EAAMK,QAAAA,CAAAA,GAE1BR,QAAAA;IACKE,EAAQE,WAAAA,KAA6BK,MAAlBN,EAAMO,aAC1BP,EAAMO,WAASR,EAAQE,QAAQO,aAAa,YAAW,EAAA,IAAIT,EAAQE,QAAQQ,gBAAgB,UAAA;GAAA,GAE5F,CAACT,EAAMO,QAAAA,CAAAA,GAEVV,QAAAA;IACKE,EAAQE,YACTF,EAAQE,QAAQS,aAAaV,EAAMU,cAAAA,CAAc;GAAA,GAElD,CAACV,EAAMU,UAAAA,CAAAA,GAEVb,QAAAA;IACMG,EAAMW,QACRZ,GAASE,SAASO,aAAa,SAASR,EAAMW,KAAAA,IAE9CZ,GAASE,SAASQ,gBAAgB,OAAA;GAAA,GAEnC,CAACT,EAAMW,KAAAA,CAAAA;EACZ,EC1B2BU,GAAS;GAACe,YAAAA;GAAWC,UAAAA;GAASC,OAAAA;GAAME,UAAAA;GAASC,gBAAAA;EAAAA,CAAAA,GFKxE,SAA0BxD,GAAmDC,GAAAA;GAC3EH,EAASE,GAAS,QAAQC,EAAMC,QAAAA,CAAQ,CAAA,GACxCJ,EAASE,GAAS,QAAQC,EAAME,QAAAA,CAAQ,CAAA,GACxCL,EAASE,GAAS,UAAUC,EAAMG,QAAAA,GAClCN,EAASE,GAAS,WAAWC,EAAMI,SAAAA,GACnCP,EAASE,GAAS,SAASC,EAAMK,OAAAA,GACjCR,EAASE,GAAS,eAAeC,EAAMM,aAAAA,GACvCT,EAASE,GAAS,SAASC,EAAMO,OAAAA,GACjCV,EAASE,GAAS,SAASC,EAAMQ,OAAAA,GACjCX,EAASE,GAAS,QAAQC,EAAMS,MAAAA,GAChCZ,EAASE,GAAS,SAASC,EAAMU,OAAAA;EACnC,EEfcyB,GAAQ;GAACG,eAAAA;GAAcC,QAAAA;GAAOC,UAAAA;GAASC,SAAAA;GAAQC,SAAAA;GAAQC,SAAAA;GAAQC,WAAAA;GAAUC,SAAAA;GAAQC,QAAAA;GAAOC,QAAAA;EAAAA,CAAAA,GAEhG,EAAA,cAACW,eAAAA;GAAYxB,KAAKC;GAASqB,OAAOA,KAAS;GAAIH,cAAcA,KAAgB;GAAUJ,MAAAA;GAAMU,OAAO1B,EAAM0B;GAAOC,SAAS3B,EAAM2B;GAAsBZ,aAAAA;GAAAA,GAAiBS;EAAAA,GACpKxB,EAAM4B,QAAAA;CAGb;AAAA,CAAA;AAAA,SAAA,KAAA"}
|
|
@@ -1,2 +1,71 @@
|
|
|
1
|
-
|
|
1
|
+
(function(e, t) {
|
|
2
|
+
"object" == typeof exports && "undefined" != typeof module ? t(exports, require("react"), require("jb-textarea"), require("jb-core/react")) : "function" == typeof define && define.amd ? define([
|
|
3
|
+
"exports",
|
|
4
|
+
"react",
|
|
5
|
+
"jb-textarea",
|
|
6
|
+
"jb-core/react"
|
|
7
|
+
], t) : t((e = "undefined" != typeof globalThis ? globalThis : e || self).JBTextareaReact = {}, e.React, e.JBTextarea, e.JBCoreReact);
|
|
8
|
+
})(this, function(e, t, r, n) {
|
|
9
|
+
Object.defineProperty(e, Symbol.toStringTag, { value: "Module" });
|
|
10
|
+
var o, u, a, i = Object.create, l = Object.defineProperty, c = Object.getOwnPropertyDescriptor, d = Object.getOwnPropertyNames, s = Object.getPrototypeOf, f = Object.prototype.hasOwnProperty;
|
|
11
|
+
u = 1, a = null != (o = t) ? i(s(o)) : {};
|
|
12
|
+
e.JBTextarea = (t = ((e, t, r, n) => {
|
|
13
|
+
if (t && "object" == typeof t || "function" == typeof t) for (var o, u = d(t), a = 0, i = u.length; a < i; a++) o = u[a], f.call(e, o) || o === r || l(e, o, {
|
|
14
|
+
get: ((e) => t[e]).bind(null, o),
|
|
15
|
+
enumerable: !(n = c(t, o)) || n.enumerable
|
|
16
|
+
});
|
|
17
|
+
return e;
|
|
18
|
+
})(!u && o && o.__esModule ? a : l(a, "default", {
|
|
19
|
+
value: o,
|
|
20
|
+
enumerable: !0
|
|
21
|
+
}), o)).default.forwardRef((e, r) => {
|
|
22
|
+
{
|
|
23
|
+
const o = (0, t.useRef)(null);
|
|
24
|
+
(0, t.useImperativeHandle)(r, () => o.current ?? void 0, [o]);
|
|
25
|
+
const { onBeforeInput: u, onBlur: a, onChange: i, onEnter: l, onFocus: c, onInput: d, onKeyDown: s, onKeyUp: f, onInit: b, onLoad: p, placeholder: v, name: y, autoHeight: g, disabled: E, error: h, initialValue: m, required: j, validationList: O, value: q, ...B } = e;
|
|
26
|
+
return function(e, r) {
|
|
27
|
+
(0, t.useEffect)(() => {
|
|
28
|
+
e.current && (e.current.validation.list = r.validationList || []);
|
|
29
|
+
}, [r.validationList]), (0, t.useEffect)(() => {
|
|
30
|
+
e.current && void 0 !== r.disabled && (r.disabled ? e.current.disabled = !0 : e.current.disabled = !1);
|
|
31
|
+
}, [e.current, r.disabled]), (0, t.useEffect)(() => {
|
|
32
|
+
e.current && void 0 !== r.required && (r.required ? e.current.setAttribute("required", "") : e.current.removeAttribute("required"));
|
|
33
|
+
}, [r.required]), (0, t.useEffect)(() => {
|
|
34
|
+
e.current && (e.current.autoHeight = r.autoHeight || !1);
|
|
35
|
+
}, [r.autoHeight]), (0, t.useEffect)(() => {
|
|
36
|
+
r.error ? e?.current?.setAttribute("error", r.error) : e?.current?.removeAttribute("error");
|
|
37
|
+
}, [r.error]);
|
|
38
|
+
}(o, {
|
|
39
|
+
autoHeight: g,
|
|
40
|
+
disabled: E,
|
|
41
|
+
error: h,
|
|
42
|
+
required: j,
|
|
43
|
+
validationList: O
|
|
44
|
+
}), function(e, t) {
|
|
45
|
+
(0, n.useEvent)(e, "load", t.onLoad, !0), (0, n.useEvent)(e, "init", t.onInit, !0), (0, n.useEvent)(e, "change", t.onChange), (0, n.useEvent)(e, "keydown", t.onKeyDown), (0, n.useEvent)(e, "input", t.onInput), (0, n.useEvent)(e, "beforeinput", t.onBeforeInput), (0, n.useEvent)(e, "keyup", t.onKeyUp), (0, n.useEvent)(e, "focus", t.onFocus), (0, n.useEvent)(e, "blur", t.onBlur), (0, n.useEvent)(e, "enter", t.onEnter);
|
|
46
|
+
}(o, {
|
|
47
|
+
onBeforeInput: u,
|
|
48
|
+
onBlur: a,
|
|
49
|
+
onChange: i,
|
|
50
|
+
onEnter: l,
|
|
51
|
+
onFocus: c,
|
|
52
|
+
onInput: d,
|
|
53
|
+
onKeyDown: s,
|
|
54
|
+
onKeyUp: f,
|
|
55
|
+
onInit: b,
|
|
56
|
+
onLoad: p
|
|
57
|
+
}), t.default.createElement("jb-textarea", {
|
|
58
|
+
ref: o,
|
|
59
|
+
value: q ?? "",
|
|
60
|
+
initialValue: m ?? "",
|
|
61
|
+
name: y,
|
|
62
|
+
label: e.label,
|
|
63
|
+
message: e.message,
|
|
64
|
+
placeholder: v,
|
|
65
|
+
...B
|
|
66
|
+
}, e.children);
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
|
|
2
71
|
//# sourceMappingURL=JBTextarea.umd.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JBTextarea.umd.js","names":[],"sources":["../lib/events-hook.ts","../lib/attributes-hook.ts","../lib/JBTextarea.tsx"],"sourcesContent":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"JBTextarea.umd.js","names":["useEvent","useEvents","element","props","onLoad","onInit","onChange","onKeyDown","onInput","onBeforeInput","onKeyUp","onFocus","onBlur","onEnter","useEffect","useJBTextareaAttribute","element","props","current","validation","list","validationList","disabled","undefined","required","setAttribute","removeAttribute","autoHeight","error","React","useRef","useImperativeHandle","useEvents","useJBTextareaAttribute","JBTextarea","forwardRef","props","ref","element","current","undefined","onBeforeInput","onBlur","onChange","onEnter","onFocus","onInput","onKeyDown","onKeyUp","onInit","onLoad","placeholder","name","autoHeight","disabled","error","initialValue","required","validationList","value","otherProps","jb-textarea","label","message","children"],"sources":["../lib/events-hook.ts","../lib/attributes-hook.ts","../lib/JBTextarea.tsx"],"sourcesContent":["import { useEvent } from \"jb-core/react\";\nimport type { RefObject } from \"react\";\nimport type { JBTextareaWebComponent, JBTextareaEventType } from 'jb-textarea';\r\n\r\nexport type EventProps = {\r\n /**\r\n * when component loaded, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount\r\n */\r\n onLoad?: (e: JBTextareaEventType<CustomEvent>) => void,\r\n /**\r\n * when all property set and ready to use, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount\r\n */\r\n onInit?: (e: JBTextareaEventType<CustomEvent>) => void,\r\n onChange?: (e: JBTextareaEventType<Event>) => void,\r\n onFocus?: (e: JBTextareaEventType<FocusEvent>) => void,\r\n onBlur?: (e: JBTextareaEventType<FocusEvent>) => void,\r\n onKeyDown?: (e: JBTextareaEventType<KeyboardEvent>) => void,\r\n onKeyUp?: (e: JBTextareaEventType<KeyboardEvent>) => void,\r\n onInput?: (e: JBTextareaEventType<InputEvent>) => void,\r\n onBeforeInput?: (e: JBTextareaEventType<InputEvent>) => void,\r\n onEnter?: (e: JBTextareaEventType<KeyboardEvent>) => void,\r\n\r\n}\r\nexport function useEvents(element: RefObject<JBTextareaWebComponent | null>, props: EventProps) {\n useEvent(element, 'load', props.onLoad, true);\r\n useEvent(element, 'init', props.onInit, true);\r\n useEvent(element, 'change', props.onChange);\r\n useEvent(element, 'keydown', props.onKeyDown);\r\n useEvent(element, 'input', props.onInput);\r\n useEvent(element, 'beforeinput', props.onBeforeInput);\r\n useEvent(element, 'keyup', props.onKeyUp);\r\n useEvent(element, 'focus', props.onFocus);\r\n useEvent(element, 'blur', props.onBlur);\r\n useEvent(element, 'enter', props.onEnter);\r\n}\n","import { type JBTextareaWebComponent, type ValidationValue } from \"jb-textarea\";\nimport { type ValidationItem } from \"jb-validation\";\nimport { type RefObject, useEffect } from \"react\";\n\r\nexport type JBTextareaAttributes = {\r\n validationList?:ValidationItem<ValidationValue>[],\r\n autoHeight?: boolean,\r\n required?:boolean\r\n error?: string,\r\n disabled?:boolean\r\n}\r\nexport function useJBTextareaAttribute(element: RefObject<JBTextareaWebComponent | null>, props: JBTextareaAttributes) {\n\r\n useEffect(() => {\r\n if(element.current){\r\n element.current.validation.list = props.validationList || [];\r\n }\r\n }, [props.validationList]);\r\n\r\n useEffect(() => {\r\n if(element.current && props.disabled!== undefined){\r\n props.disabled?element.current.disabled = true:element.current.disabled = false\r\n }\r\n }, [element.current,props.disabled]);\r\n\r\n useEffect(() => {\r\n if(element.current && props.required!== undefined){\r\n props.required?element.current.setAttribute(\"required\",''):element.current.removeAttribute(\"required\");\r\n }\r\n }, [props.required]);\r\n\r\n useEffect(() => {\r\n if(element.current){\r\n element.current.autoHeight = props.autoHeight || false;\r\n }\r\n }, [props.autoHeight]);\r\n \r\n useEffect(() => {\r\n if (props.error) {\r\n element?.current?.setAttribute('error', props.error);\r\n } else {\r\n element?.current?.removeAttribute('error');\r\n }\r\n }, [props.error]);\r\n}\n","'use client'\r\n/* eslint-disable no-inner-declarations */\r\nimport React, { useRef, useImperativeHandle, type PropsWithChildren } from 'react';\r\nimport 'jb-textarea';\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport type {JBTextareaWebComponent} from 'jb-textarea';\r\nimport { type EventProps, useEvents } from './events-hook.js';\nimport { type JBTextareaAttributes, useJBTextareaAttribute } from './attributes-hook.js';\nimport type { JBElementStandardProps } from 'jb-core/react';\nimport './module-declaration.js';\n\n// eslint-disable-next-line react/display-name\nconst JBTextarea = React.forwardRef((props:Props, ref) => {\r\n {\r\n //we set this state so when ref change we have a render and our event listener will be updated\r\n const element = useRef<JBTextareaWebComponent>(null);\r\n useImperativeHandle(ref, () => element.current ?? undefined, [element]);\n const {onBeforeInput,onBlur,onChange,onEnter,onFocus,onInput,onKeyDown,onKeyUp,onInit,onLoad, placeholder, name,autoHeight,disabled,error,initialValue,required,validationList,value,...otherProps} = props;\n useJBTextareaAttribute(element, {autoHeight,disabled,error,required,validationList});\n useEvents(element,{onBeforeInput,onBlur,onChange,onEnter,onFocus,onInput,onKeyDown,onKeyUp,onInit,onLoad});\r\n return (\r\n <jb-textarea ref={element} value={value ?? \"\"} initialValue={initialValue ?? \"\"} name={name} label={props.label} message={props.message} placeholder={placeholder} {...otherProps}>\n {props.children}\r\n </jb-textarea>\r\n );\r\n }\r\n});\r\n\r\ntype JBTextareaProps = EventProps & JBTextareaAttributes & {\r\n label?: string,\r\n message?:string,\r\n name?:string,\r\n placeholder?:string\n value?: string | null,\n initialValue?: string | null,\n}\nexport type Props = PropsWithChildren<JBTextareaProps> & JBElementStandardProps<JBTextareaWebComponent, keyof JBTextareaProps>;\r\nexport {JBTextarea};\n"],"mappings":"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"}
|
package/react/lib/JBTextarea.tsx
CHANGED
|
@@ -4,41 +4,22 @@ import React, { useRef, useImperativeHandle, type PropsWithChildren } from 'reac
|
|
|
4
4
|
import 'jb-textarea';
|
|
5
5
|
// eslint-disable-next-line no-duplicate-imports
|
|
6
6
|
import type {JBTextareaWebComponent} from 'jb-textarea';
|
|
7
|
-
import { type EventProps, useEvents } from './events-hook.js';
|
|
8
|
-
import { type JBTextareaAttributes, useJBTextareaAttribute } from './attributes-hook.js';
|
|
9
|
-
import type { JBElementStandardProps } from 'jb-core/react';
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
namespace JSX {
|
|
14
|
-
interface IntrinsicElements {
|
|
15
|
-
'jb-textarea': JBTextareaType;
|
|
16
|
-
}
|
|
17
|
-
interface JBTextareaType extends React.DetailedHTMLProps<React.HTMLAttributes<JBTextareaWebComponent>, JBTextareaWebComponent> {
|
|
18
|
-
class?:string,
|
|
19
|
-
label?: string,
|
|
20
|
-
name?:string,
|
|
21
|
-
message?:string,
|
|
22
|
-
placeholder?:string,
|
|
23
|
-
// ref:React.RefObject<JBDateInputWebComponent>,
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
// eslint-disable-next-line react/display-name
|
|
7
|
+
import { type EventProps, useEvents } from './events-hook.js';
|
|
8
|
+
import { type JBTextareaAttributes, useJBTextareaAttribute } from './attributes-hook.js';
|
|
9
|
+
import type { JBElementStandardProps } from 'jb-core/react';
|
|
10
|
+
import './module-declaration.js';
|
|
11
|
+
|
|
12
|
+
// eslint-disable-next-line react/display-name
|
|
28
13
|
const JBTextarea = React.forwardRef((props:Props, ref) => {
|
|
29
14
|
{
|
|
30
15
|
//we set this state so when ref change we have a render and our event listener will be updated
|
|
31
16
|
const element = useRef<JBTextareaWebComponent>(null);
|
|
32
|
-
useImperativeHandle(
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
[element],
|
|
36
|
-
);
|
|
37
|
-
const {onBeforeInput,onBlur,onChange,onEnter,onFocus,onInput,onKeyDown,onKeyUp,onInit,onLoad, placeholder, name,autoHeight,disabled,error,required,validationList,value,...otherProps} = props;
|
|
38
|
-
useJBTextareaAttribute(element, {autoHeight,disabled,error,required,validationList,value});
|
|
17
|
+
useImperativeHandle(ref, () => element.current ?? undefined, [element]);
|
|
18
|
+
const {onBeforeInput,onBlur,onChange,onEnter,onFocus,onInput,onKeyDown,onKeyUp,onInit,onLoad, placeholder, name,autoHeight,disabled,error,initialValue,required,validationList,value,...otherProps} = props;
|
|
19
|
+
useJBTextareaAttribute(element, {autoHeight,disabled,error,required,validationList});
|
|
39
20
|
useEvents(element,{onBeforeInput,onBlur,onChange,onEnter,onFocus,onInput,onKeyDown,onKeyUp,onInit,onLoad});
|
|
40
21
|
return (
|
|
41
|
-
<jb-textarea ref={element} name={name} label={props.label} message={props.message} placeholder={placeholder} {...otherProps}>
|
|
22
|
+
<jb-textarea ref={element} value={value ?? ""} initialValue={initialValue ?? ""} name={name} label={props.label} message={props.message} placeholder={placeholder} {...otherProps}>
|
|
42
23
|
{props.children}
|
|
43
24
|
</jb-textarea>
|
|
44
25
|
);
|
|
@@ -49,7 +30,9 @@ type JBTextareaProps = EventProps & JBTextareaAttributes & {
|
|
|
49
30
|
label?: string,
|
|
50
31
|
message?:string,
|
|
51
32
|
name?:string,
|
|
52
|
-
placeholder?:string
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
33
|
+
placeholder?:string
|
|
34
|
+
value?: string | null,
|
|
35
|
+
initialValue?: string | null,
|
|
36
|
+
}
|
|
37
|
+
export type Props = PropsWithChildren<JBTextareaProps> & JBElementStandardProps<JBTextareaWebComponent, keyof JBTextareaProps>;
|
|
38
|
+
export {JBTextarea};
|
|
@@ -1,23 +1,15 @@
|
|
|
1
|
-
import { JBTextareaWebComponent, type ValidationValue } from "jb-textarea";
|
|
2
|
-
import { type ValidationItem } from "jb-validation";
|
|
3
|
-
import { RefObject, useEffect } from "react";
|
|
1
|
+
import { type JBTextareaWebComponent, type ValidationValue } from "jb-textarea";
|
|
2
|
+
import { type ValidationItem } from "jb-validation";
|
|
3
|
+
import { type RefObject, useEffect } from "react";
|
|
4
4
|
|
|
5
5
|
export type JBTextareaAttributes = {
|
|
6
|
-
value?: string | null | undefined,
|
|
7
6
|
validationList?:ValidationItem<ValidationValue>[],
|
|
8
7
|
autoHeight?: boolean,
|
|
9
8
|
required?:boolean
|
|
10
9
|
error?: string,
|
|
11
10
|
disabled?:boolean
|
|
12
11
|
}
|
|
13
|
-
export function useJBTextareaAttribute(element: RefObject<JBTextareaWebComponent>, props: JBTextareaAttributes) {
|
|
14
|
-
|
|
15
|
-
useEffect(() => {
|
|
16
|
-
const value:string = props.value || '';
|
|
17
|
-
if(element.current){
|
|
18
|
-
element.current.value = value;
|
|
19
|
-
}
|
|
20
|
-
}, [props.value]);
|
|
12
|
+
export function useJBTextareaAttribute(element: RefObject<JBTextareaWebComponent | null>, props: JBTextareaAttributes) {
|
|
21
13
|
|
|
22
14
|
useEffect(() => {
|
|
23
15
|
if(element.current){
|
|
@@ -50,4 +42,4 @@ export function useJBTextareaAttribute(element: RefObject<JBTextareaWebComponent
|
|
|
50
42
|
element?.current?.removeAttribute('error');
|
|
51
43
|
}
|
|
52
44
|
}, [props.error]);
|
|
53
|
-
}
|
|
45
|
+
}
|
package/react/lib/events-hook.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { useEvent } from "jb-core/react";
|
|
2
|
-
import { RefObject } from "react";
|
|
1
|
+
import { useEvent } from "jb-core/react";
|
|
2
|
+
import type { RefObject } from "react";
|
|
3
3
|
import type { JBTextareaWebComponent, JBTextareaEventType } from 'jb-textarea';
|
|
4
4
|
|
|
5
5
|
export type EventProps = {
|
|
@@ -21,7 +21,7 @@ export type EventProps = {
|
|
|
21
21
|
onEnter?: (e: JBTextareaEventType<KeyboardEvent>) => void,
|
|
22
22
|
|
|
23
23
|
}
|
|
24
|
-
export function useEvents(element: RefObject<JBTextareaWebComponent>, props: EventProps) {
|
|
24
|
+
export function useEvents(element: RefObject<JBTextareaWebComponent | null>, props: EventProps) {
|
|
25
25
|
useEvent(element, 'load', props.onLoad, true);
|
|
26
26
|
useEvent(element, 'init', props.onInit, true);
|
|
27
27
|
useEvent(element, 'change', props.onChange);
|
|
@@ -32,4 +32,4 @@ export function useEvents(element: RefObject<JBTextareaWebComponent>, props: Eve
|
|
|
32
32
|
useEvent(element, 'focus', props.onFocus);
|
|
33
33
|
useEvent(element, 'blur', props.onBlur);
|
|
34
34
|
useEvent(element, 'enter', props.onEnter);
|
|
35
|
-
}
|
|
35
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { JBTextareaWebComponent } from 'jb-textarea';
|
|
2
|
+
|
|
3
|
+
declare module "react" {
|
|
4
|
+
// eslint-disable-next-line @typescript-eslint/no-namespace
|
|
5
|
+
namespace JSX {
|
|
6
|
+
interface IntrinsicElements {
|
|
7
|
+
'jb-textarea': JBTextareaType;
|
|
8
|
+
}
|
|
9
|
+
interface JBTextareaType extends React.DetailedHTMLProps<React.HTMLAttributes<JBTextareaWebComponent>, JBTextareaWebComponent> {
|
|
10
|
+
class?:string,
|
|
11
|
+
label?: string,
|
|
12
|
+
name?:string,
|
|
13
|
+
message?:string,
|
|
14
|
+
placeholder?:string,
|
|
15
|
+
value?: string,
|
|
16
|
+
initialValue?: string,
|
|
17
|
+
// ref:React.RefObject<JBDateInputWebComponent>,
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|