jb-textarea 3.3.1 → 3.4.0

package/react/lib/JBTextarea.tsx

@@ -0,0 +1,124 @@
+/* eslint-disable no-inner-declarations */
+import React, { useRef, useEffect, useImperativeHandle, useState, CSSProperties } from 'react';
+import 'jb-textarea';
+// eslint-disable-next-line no-duplicate-imports
+import {JBTextareaWebComponent, type ValidationValue} from 'jb-textarea';
+import { useBindEvent } from '../../../../common/hooks/use-event.js';
+import { type ValidationItem } from "jb-validation";
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+      interface IntrinsicElements {
+        'jb-textarea': JBTextareaType;
+      }
+      interface JBTextareaType extends React.DetailedHTMLProps<React.HTMLAttributes<JBTextareaWebComponent>, JBTextareaWebComponent> {
+        class?:string,
+        label?: string,
+        name?:string,
+        message?:string,
+        placeholder?:string,
+        // ref:React.RefObject<JBDateInputWebComponent>,
+      }
+    }
+}
+// eslint-disable-next-line react/display-name
+const JBTextarea = React.forwardRef((props:JBTextareaProps, ref) => {
+  {
+    //we set this state so when ref change we have a render and our event listener will be updated
+    const [refChangeCount , refChangeCountSetter] = useState(0);
+    const element = useRef<JBTextareaWebComponent>(null);
+    useImperativeHandle(
+      ref,
+      () => (element ? element.current : {}),
+      [element],
+    );
+    useEffect(()=>{
+      refChangeCountSetter(refChangeCount+1);
+    },[element.current]);
+    function onChange(e:JBTextareaEventType<Event>) {
+      if (props.onChange) {
+        props.onChange(e);
+      }
+    }
+    function onKeydown(e:JBTextareaEventType<KeyboardEvent>) {
+      if (props.onKeydown) {
+        props.onKeydown(e);
+      }
+    }
+    function onInput(e:JBTextareaEventType<InputEvent>) {
+      if (props.onInput) {
+        props.onInput(e);
+      }
+    }
+    function onKeyup(e:JBTextareaEventType<KeyboardEvent>) {
+      if (props.onKeyup) {
+        props.onKeyup(e);
+      }
+    }
+    function onFocus(e:JBTextareaEventType<FocusEvent>) {
+      if (props.onFocus && e instanceof FocusEvent) {
+        props.onFocus(e);
+      }
+    }
+    function onBlur(e:JBTextareaEventType<FocusEvent>) {
+      if (props.onBlur && e instanceof FocusEvent) {
+        props.onBlur(e);
+      }
+    }
+    useEffect(() => {
+      const value:string = props.value || '';
+      if(element.current){
+        element.current.value = value;
+      }
+    }, [props.value]);
+
+    useEffect(() => {
+      if(element.current){
+        element.current.validation.list = props.validationList || [];
+      }
+    }, [props.validationList]);
+    useEffect(() => {
+      if(element.current && props.required!== undefined){
+        props.required?element.current.setAttribute("required",''):element.current.removeAttribute("required");
+      }
+    }, [props.required]);
+
+    useEffect(() => {
+      if(element.current){
+        element.current.autoHeight = props.autoHeight || false;
+      }
+    }, [props.autoHeight]);
+    useBindEvent(element, 'change', onChange);
+    useBindEvent(element, 'keydown', onKeydown);
+    useBindEvent(element, 'input', onInput);
+    useBindEvent(element, 'keyup', onKeyup);
+    useBindEvent(element, 'focus', onFocus);
+    useBindEvent(element, 'blur', onBlur);
+    return (
+      <jb-textarea placeholder={props.placeholder} class={props.className} style={props.style} ref={element} label={props.label} message={props.message} name={props.name}></jb-textarea>
+    );
+  }
+});
+export type JBTextareaEventType<T> = T & {
+    target: JBTextareaWebComponent
+}
+type JBTextareaProps = {
+    label?: string,
+    value?: string | null | undefined,
+    onChange?: (e:JBTextareaEventType<Event>)=>void,
+    onFocus?:(e:JBTextareaEventType<FocusEvent>)=>void,
+    onBlur?:(e:JBTextareaEventType<FocusEvent>)=>void,
+    onKeydown?: (e:JBTextareaEventType<KeyboardEvent>)=>void,
+    onKeyup?: (e:JBTextareaEventType<KeyboardEvent>)=>void,
+    onInput?: (e:JBTextareaEventType<InputEvent>)=>void,
+    onBeforeinput?: (e:JBTextareaEventType<InputEvent>)=>void,
+    placeholder?:string,
+    className?: string,
+    style?:CSSProperties,
+    validationList?:ValidationItem<ValidationValue>[],
+    autoHeight?: boolean,
+    message?:string,
+    name?:string,
+    required?:boolean
+}
+export {JBTextarea};

package/react/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "jb-textarea-react",
+  "description": "textarea react component",
+  "type": "module",
+  "author": {
+		"name": "mohammad javad bathaei",
+		"email": "javadbat@gmail.com"
+	},
+  "keywords": [
+    "jb",
+    "jb-textarea",
+    "textarea",
+    "long input",
+    "multiline input",
+    "react component"
+  ],
+  "version": "3.2.0",
+  "bugs": "https://github.com/javadbat/jb-textarea/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "lib/",
+    "dist/"
+  ],
+  "main": "index.js",
+  "types": "./dist/web-component/jb-textarea/react/lib/JBTextarea.d.ts",
+  "repository": {
+		"type": "git",
+		"url": "git@github.com:javadbat/jb-textarea.git"
+  },
+  "dependencies": {
+    "jb-textarea": ">=3.2.0"
+  }
+}

package/react/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "baseUrl": "."
+    },
+    "include": [
+        "../../../common/scripts/**/*.ts",
+        "../../../common/hooks/**/*.ts",
+        "../../../common/hooks/**/*.js",
+        "lib/**/*.ts",
+        "lib/**/*.tsx"
+    ],
+    "exclude": [
+        "node_modules",
+        "**/*.spec.ts",
+        "dist",
+    ],
+    "extends":"../../tsconfig-react.json"
+}