From 1cc0f9e5279d0b0195ada7b1711ead5563163511 Mon Sep 17 00:00:00 2001
From: KarimAldeen <MhmadKarimAldeen@gmail.com>
Date: Wed, 27 Mar 2024 11:50:01 +0300
Subject: [PATCH] #43

---
 .../ValidationField/ValidationField.tsx       |  4 +-
 .../ValidationField/View/Default.tsx          |  2 +
 .../ValidationField/View/TextArea.tsx         | 45 +++++++++++++++++++
 src/Components/ValidationField/View/index.tsx |  6 +--
 src/Components/ValidationField/types.ts       |  2 +-
 src/Pages/Notifcation/View/AddForm.tsx        | 13 +++---
 .../Users/SendNotifcation/View/AddForm.tsx    | 19 ++++----
 7 files changed, 71 insertions(+), 20 deletions(-)
 create mode 100644 src/Components/ValidationField/View/TextArea.tsx

diff --git a/src/Components/ValidationField/ValidationField.tsx b/src/Components/ValidationField/ValidationField.tsx
index 722bc5a..6e25672 100644
--- a/src/Components/ValidationField/ValidationField.tsx
+++ b/src/Components/ValidationField/ValidationField.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import "./ValidationField.scss";
-import { Date, Time, File, DataRange, SelectField, Default, CheckboxField } from './View';
+import { Date, Time, File, DataRange, SelectField, Default, CheckboxField ,TextAreaField} from './View';
 import { ValidationFieldProps } from "./types";
 import MaltyFile from "./View/MaltyFile";
 import SearchField from "./View/SearchField";
@@ -24,6 +24,8 @@ const ValidationField: React.FC<ValidationFieldProps> = ({type , ...otherProps})
         return <MaltyFile {...otherProps} />;
     case "Checkbox":
       return <CheckboxField {...otherProps} />;
+      case "TextArea":
+      return <TextAreaField {...otherProps} />;
     default:
       return <Default {...otherProps} type={type}/>;
   }
diff --git a/src/Components/ValidationField/View/Default.tsx b/src/Components/ValidationField/View/Default.tsx
index 62b7544..1d0678d 100644
--- a/src/Components/ValidationField/View/Default.tsx
+++ b/src/Components/ValidationField/View/Default.tsx
@@ -5,6 +5,8 @@ import useFormField from '../../../Hooks/useFormField';
 const Default = ({ name, label, placeholder, isDisabled, onChange, props,type }: any) => {
   const { Field, formik, isError, errorMsg, t } = useFormField(name, props);
 
+
+  
   return (
     <div className="ValidationField w-100" >
       <label htmlFor={name} className="text">
diff --git a/src/Components/ValidationField/View/TextArea.tsx b/src/Components/ValidationField/View/TextArea.tsx
new file mode 100644
index 0000000..62b9794
--- /dev/null
+++ b/src/Components/ValidationField/View/TextArea.tsx
@@ -0,0 +1,45 @@
+import { Form, Input } from 'antd'
+import React from 'react'
+import useFormField from '../../../Hooks/useFormField';
+const { TextArea } = Input;
+
+const TextAreaField = ({ name, label, placeholder, isDisabled, onChange, props,type }: any) => {
+  const { Field, formik, isError, errorMsg, t } = useFormField(name, props);
+
+
+  
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    console.log('Change:', e.target.value);
+    formik.setFieldValue(name, e.target.value)
+
+  };
+
+  return (
+    <div className="ValidationField w-100" >
+      <label htmlFor={name} className="text">
+        {t(`${label ?  label : name}`)}
+        </label>
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? 'error' : ''}
+        help={isError ? errorMsg : ''}
+      >
+        <Field
+          as={TextArea}
+          placeholder={t(`${placeholder ?placeholder  : name}`)}
+          name={name}
+          disabled={isDisabled}
+          size="large" 
+          onChange={onChange || handleChange}
+          
+
+          
+        //  onChange={onChange ? onChange : handleChange}
+        />
+      </Form.Item>
+    </div>
+  );
+};
+
+export default  React.memo(TextAreaField);
+;
diff --git a/src/Components/ValidationField/View/index.tsx b/src/Components/ValidationField/View/index.tsx
index ca46bc9..606e8e6 100644
--- a/src/Components/ValidationField/View/index.tsx
+++ b/src/Components/ValidationField/View/index.tsx
@@ -5,8 +5,7 @@ import DataRange from "./DataRange";
 import CheckboxField from "./CheckboxField";
 import Default from "./Default";
 import File from "./File";
-
-
+import TextAreaField from './TextArea'
 
 
 
@@ -17,6 +16,7 @@ export {
     DataRange,
     CheckboxField,
     Default,
-    File
+    File,
+    TextAreaField
 
 }
\ No newline at end of file
diff --git a/src/Components/ValidationField/types.ts b/src/Components/ValidationField/types.ts
index 9673f8c..539f2bd 100644
--- a/src/Components/ValidationField/types.ts
+++ b/src/Components/ValidationField/types.ts
@@ -117,7 +117,7 @@
   }
   export interface ValidationFieldPropstext {
     name: string;
-    type?: "text" | "number" | "password";
+    type?: "text" | "number" | "password" | "TextArea";
     label?: string;
     className?: string;
     placeholder?: string;
diff --git a/src/Pages/Notifcation/View/AddForm.tsx b/src/Pages/Notifcation/View/AddForm.tsx
index 9037571..9cc139b 100644
--- a/src/Pages/Notifcation/View/AddForm.tsx
+++ b/src/Pages/Notifcation/View/AddForm.tsx
@@ -50,18 +50,19 @@ function Form() {
   return (
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
       <Col>
-        <ValidationField name="body_en" />
-        <ValidationField name="body_ar" />
-        <ValidationField name="body_de" />
+      <ValidationField name="title_en" />
+        <ValidationField name="title_ar" />
+        <ValidationField name="title_de" />
+    
         {/* <ValidationField name="meta" /> */}
         <ValidationField name="user_ids" label='user' type="Search" option={option} searchBy={"name"}  isMulti />
 
 
       </Col>
       <Col>
-        <ValidationField name="title_en" />
-        <ValidationField name="title_ar" />
-        <ValidationField name="title_de" />
+      <ValidationField name="body_en" type='TextArea' />
+        <ValidationField name="body_ar" type='TextArea'/>
+        <ValidationField name="body_de" type='TextArea'/>
 
         {/* <ValidationField name="type" type="Select" option={type} /> */}
 
diff --git a/src/Pages/Users/SendNotifcation/View/AddForm.tsx b/src/Pages/Users/SendNotifcation/View/AddForm.tsx
index aa95cf8..60ac461 100644
--- a/src/Pages/Users/SendNotifcation/View/AddForm.tsx
+++ b/src/Pages/Users/SendNotifcation/View/AddForm.tsx
@@ -3,25 +3,26 @@ import { Col, Row } from 'reactstrap';
 import ValidationField from '../../../../Components/ValidationField/ValidationField';
 
 function Form() {
-  const type = [{ lable: "other", value: "other" },{ lable: "product", value: "product"},{ lable: "order", value: "order" }]
+  // const type = [{ lable: "other", value: "other" },{ lable: "product", value: "product"},{ lable: "order", value: "order" }]
 
 
 
   return (
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
-      <Col>
-      <ValidationField name="body_en" />
-      <ValidationField name="body_ar" />
-      <ValidationField name="body_de" />
-      {/* <ValidationField name="meta" /> */}
-
-
-      </Col>
       <Col>
       <ValidationField name="title_en" />
       <ValidationField name="title_ar" />
       <ValidationField name="title_de" />
 
+ 
+
+
+      </Col>
+      <Col>
+    
+      <ValidationField name="body_en" type='TextArea' />
+        <ValidationField name="body_ar" type='TextArea'/>
+        <ValidationField name="body_de" type='TextArea'/>
       {/* <ValidationField name="type" type="Select" option={type} /> */}