forstok-ui-lib 5.2.26 → 5.2.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.2.26",
+  "version": "5.2.28",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/components/index.ts

@@ -18,6 +18,8 @@ export { default as MenuList } from './select/menulist';
 export { default as ErrorComponent } from './error';
 export { default as UploadComponent } from './upload';
 export { default as UploadDragDropComponent } from './upload/drag_drop';
+export { default as TextAreaComponent } from './textarea';
+export { default as TextAreaRefComponent } from './textarea/ref';
 
 export * from './dropdown/typed';
 export * from './message/typed';

package/src/components/textarea/index.tsx

@@ -0,0 +1,64 @@
+import { type ChangeEvent, type FocusEvent, type TextareaHTMLAttributes, useEffect, useState } from 'react';
+import { TextAreaContainer } from './styles';
+import { TState } from '../../typeds';
+
+type TTextArea = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  $isError?: boolean
+  reset?: boolean 
+  setReset?: TState<boolean>
+  isForceUpdate?: boolean 
+  setForceUpdate?: TState<boolean>
+  evChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void
+  evBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void
+  isField?: boolean
+  evChangeCustom?: (name: string, value: any) => void
+}
+
+const TextAreaComponent = ({ $isError, reset, setReset, isForceUpdate, setForceUpdate, evChange, evBlur, isField, evChangeCustom,...props }: TTextArea) => {
+  const { name, defaultValue } = props
+
+  const [valueInput, setValueInput] = useState<string>(defaultValue?.toString() ?? '')
+
+  useEffect(() => {
+    if (isForceUpdate) {
+      setValueInput(defaultValue?.toString() ?? '')
+      setForceUpdate && setForceUpdate(false)
+    }
+    if (reset) {
+      setValueInput('')
+      setReset && setReset(false)
+    }
+  }, [isForceUpdate, setForceUpdate, reset, setReset, defaultValue])
+
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const _value = e.target.value
+    setValueInput(_value)
+  }
+
+  const _evBlur = (e: FocusEvent<HTMLTextAreaElement>) => {
+    evBlur && evBlur(e);
+    if (isField && name) {
+      evChangeCustom && evChangeCustom(name, e.target.value)
+    }
+  }
+
+  let parseProps = {...props}
+  delete parseProps.defaultValue
+
+  return (
+    <TextAreaContainer 
+      $isError={$isError} 
+      value={valueInput}
+      onChange={(e: ChangeEvent<HTMLTextAreaElement>) => { 
+        handleChange(e)
+        evChange && evChange(e)
+      }} 
+      onBlur={(e: FocusEvent<HTMLTextAreaElement>) => { 
+        handleChange(e)
+        _evBlur(e)
+      }} 
+      {...parseProps} />
+  )
+}
+
+export default TextAreaComponent

package/src/components/textarea/ref.tsx

@@ -0,0 +1,6 @@
+import { type TextareaHTMLAttributes, forwardRef } from 'react'
+import { TextAreaContainer } from './styles';
+
+const TextAreaWithRefComponent = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement> & { $isError?: boolean }>(({ $isError, ...props }, ref) => <TextAreaContainer ref={ref} $isError={$isError} {...props} />);
+
+export default TextAreaWithRefComponent;

package/src/components/textarea/styles.ts

@@ -0,0 +1,11 @@
+import styled, { css } from 'styled-components'
+
+export const TextAreaContainer = styled.textarea<{ $isError?: boolean }>`
+  ${( { $isError }: { $isError?: boolean }) => {
+    if ($isError) {
+      return css` 
+        border:1px solid var(--err-clr-ln);
+      `
+    }
+  }}  
+`