jb-textarea 3.3.2 → 3.5.0

package/react/dist/lib/JBTextarea.d.ts

@@ -0,0 +1,44 @@
+import React, { CSSProperties } from 'react';
+import 'jb-textarea';
+import { JBTextareaWebComponent, type ValidationValue } from 'jb-textarea';
+import { type ValidationItem } from "jb-validation";
+import { EventProps } from './events-hook.js';
+declare global {
+    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;
+        }
+    }
+}
+declare const JBTextarea: React.ForwardRefExoticComponent<EventProps & {
+    label?: string;
+    value?: string | null | undefined;
+    placeholder?: string;
+    className?: string;
+    style?: CSSProperties;
+    validationList?: ValidationItem<ValidationValue>[];
+    autoHeight?: boolean;
+    message?: string;
+    name?: string;
+    required?: boolean;
+} & React.RefAttributes<unknown>>;
+export type Props = EventProps & {
+    label?: string;
+    value?: string | null | undefined;
+    placeholder?: string;
+    className?: string;
+    style?: CSSProperties;
+    validationList?: ValidationItem<ValidationValue>[];
+    autoHeight?: boolean;
+    message?: string;
+    name?: string;
+    required?: boolean;
+};
+export { JBTextarea };

package/react/dist/lib/events-hook.d.ts

@@ -0,0 +1,20 @@
+import { RefObject } from "react";
+import type { JBTextareaWebComponent, JBTextareaEventType } from 'jb-textarea';
+export type EventProps = {
+    /**
+     * 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
+     */
+    onLoad?: (e: JBTextareaEventType<CustomEvent>) => void;
+    /**
+   * 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
+   */
+    onInit?: (e: JBTextareaEventType<CustomEvent>) => void;
+    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;
+};
+export declare function useEvents(element: RefObject<JBTextareaWebComponent>, props: EventProps): void;

package/react/dist/web-component/jb-textarea/react/lib/JBTextarea.d.ts

@@ -0,0 +1,44 @@
+import React, { CSSProperties } from 'react';
+import 'jb-textarea';
+import { JBTextareaWebComponent, type ValidationValue } from 'jb-textarea';
+import { type ValidationItem } from "jb-validation";
+import { EventProps } from './events-hook.js';
+declare global {
+    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;
+        }
+    }
+}
+declare const JBTextarea: React.ForwardRefExoticComponent<EventProps & {
+    label?: string;
+    value?: string | null | undefined;
+    placeholder?: string;
+    className?: string;
+    style?: CSSProperties;
+    validationList?: ValidationItem<ValidationValue>[];
+    autoHeight?: boolean;
+    message?: string;
+    name?: string;
+    required?: boolean;
+} & React.RefAttributes<unknown>>;
+export type Props = EventProps & {
+    label?: string;
+    value?: string | null | undefined;
+    placeholder?: string;
+    className?: string;
+    style?: CSSProperties;
+    validationList?: ValidationItem<ValidationValue>[];
+    autoHeight?: boolean;
+    message?: string;
+    name?: string;
+    required?: boolean;
+};
+export { JBTextarea };

package/react/dist/web-component/jb-textarea/react/lib/events-hook.d.ts

@@ -0,0 +1,20 @@
+import { RefObject } from "react";
+import type { JBTextareaWebComponent, JBTextareaEventType } from 'jb-textarea';
+export type EventProps = {
+    /**
+     * 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
+     */
+    onLoad?: (e: JBTextareaEventType<CustomEvent>) => void;
+    /**
+   * 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
+   */
+    onInit?: (e: JBTextareaEventType<CustomEvent>) => void;
+    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;
+};
+export declare function useEvents(element: RefObject<JBTextareaWebComponent>, props: EventProps): void;

package/react/index.js

@@ -0,0 +1 @@
+export * from './dist/JBTextarea.js';

package/react/lib/JBTextarea.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable no-inner-declarations */
+import React, { useRef, useImperativeHandle, CSSProperties } from 'react';
+import 'jb-textarea';
+// eslint-disable-next-line no-duplicate-imports
+import {JBTextareaWebComponent} from 'jb-textarea';
+import { EventProps, useEvents } from './events-hook.js';
+import { JBTextareaAttributes, useJBTextareaAttribute } from './attributes-hook.js';
+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:Props, ref) => {
+  {
+    //we set this state so when ref change we have a render and our event listener will be updated
+    const element = useRef<JBTextareaWebComponent>(null);
+    useImperativeHandle(
+      ref,
+      () => (element ? element.current : undefined),
+      [element],
+    );
+    useJBTextareaAttribute(element, props);
+    useEvents(element,props);
+    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 Props = EventProps & JBTextareaAttributes & {
+    label?: string,
+    placeholder?:string,
+    className?: string,
+    message?:string,
+    style?:CSSProperties,
+    name?:string,
+}
+export {JBTextarea};

package/react/lib/attributes-hook.ts

@@ -0,0 +1,45 @@
+import { JBTextareaWebComponent, type ValidationValue } from "jb-textarea";
+import { type ValidationItem } from "jb-validation";
+import { RefObject, useEffect } from "react";
+
+export type JBTextareaAttributes = {
+  value?: string | null | undefined,
+  validationList?:ValidationItem<ValidationValue>[],
+  autoHeight?: boolean,
+  required?:boolean
+  error?: string,
+}
+export function useJBTextareaAttribute(element: RefObject<JBTextareaWebComponent>, props: JBTextareaAttributes) {
+
+  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]);
+  
+  useEffect(() => {
+    if (props.error) {
+      element?.current?.setAttribute('error', props.error);
+    } else {
+      element?.current?.removeAttribute('error');
+    }
+  }, [props.error]);
+}

package/react/lib/events-hook.ts

@@ -0,0 +1,32 @@
+import { useEvent } from "jb-core/react";
+import { RefObject } from "react";
+import type { JBTextareaWebComponent, JBTextareaEventType } from 'jb-textarea';
+
+export type EventProps = {
+  /**
+   * 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
+   */
+  onLoad?: (e: JBTextareaEventType<CustomEvent>) => void,
+  /**
+ * 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
+ */
+  onInit?: (e: JBTextareaEventType<CustomEvent>) => void,
+  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,
+
+}
+export function useEvents(element: RefObject<JBTextareaWebComponent>, props: EventProps) {
+  useEvent(element, 'load', props.onLoad, true);
+  useEvent(element, 'init', props.onInit, true);
+  useEvent(element, 'change', props.onChange);
+  useEvent(element, 'keydown', props.onKeyDown);
+  useEvent(element, 'input', props.onInput);
+  useEvent(element, 'keyup', props.onKeyUp);
+  useEvent(element, 'focus', props.onFocus);
+  useEvent(element, 'blur', props.onBlur);
+}

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/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,17 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "rootDir": "./lib",
+        "declarationDir": "./dist"
+    },
+    "include": [
+        "lib/**/*.ts",
+        "lib/**/*.tsx"
+    ],
+    "exclude": [
+        "node_modules",
+        "**/*.spec.ts",
+        "dist",
+    ],
+    "extends":"jb-core/configs/tsconfig-react.json"
+}