#43

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}/>;
   }

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">

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);
+;

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
 
 }

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;

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} /> */}
 

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} /> */}