fix validatio field

src/Components/Karimalden/View/SelectField.tsx

@@ -1,39 +0,0 @@
-import { Form, Select } from 'antd'
-import React from 'react'
-import useFormField from '../../../Hooks/useFormField';
-
-const SelectField = ({ name, label, placeholder, isDisabled,option,isMulti,onChange, props}: any) => {
-
-  const {  errorMsg, isError, t ,formik} = useFormField(name, props)
-  const SelecthandleChange = (value: { value: string; label: React.ReactNode }) => {
-     formik.setFieldValue(name, value)
-
-  };
-  return (
-     <div className='KarimField'>
-        <label htmlFor={name} className="text">
-        {t(`${label ?  label : name}`)}
-        </label>
-        <Form.Item
-          hasFeedback
-          validateStatus={isError ? "error" : ""}
-          help={isError ? errorMsg : ""}
-        >
-          <Select
-          placeholder={t(`${placeholder ?placeholder  : name}`)}
-            disabled={isDisabled}
-            options={option}
-            defaultValue={formik.values[name]}
-            allowClear
-            {...(isMulti && { mode: "multiple" })}
-            onChange={onChange || SelecthandleChange}
-
-
-
-          />
-        </Form.Item>
-      </div>
-  )
-}
-
-export default SelectField

src/Components/ValidationField/ValidationField.scss

@@ -1,4 +1,4 @@
-.KarimField{
+.ValidationField{
   >*{
     width: 100%;
   }

src/Components/ValidationField/ValidationField.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import "./KarimField.scss";
+import "./ValidationField.scss";
 import { Date, Time, File, DataRange, SelectField, Default, CheckboxField } from './View';
 
-export interface KarimFieldProps {
+export interface ValidationFieldProps {
   name: string;
   type?: "text" | "Select" | "DataRange" | "Date" | "Time" | "File" | "number" | "Checkbox" | "password";
   placeholder?: string;
@@ -19,7 +19,7 @@ export interface KarimFieldProps {
   dir?: 'ltr' | "rtl"
 }
 
-const KarimField = (props: KarimFieldProps) => {
+const ValidationField = (props: ValidationFieldProps) => {
   switch (props?.type) {
     case 'Select':
       return <SelectField {...props} />;
@@ -38,7 +38,7 @@ const KarimField = (props: KarimFieldProps) => {
   }
 };
 
-KarimField.defaultProps = {
+ValidationField.defaultProps = {
   type: "text",
   className: 'default-class',
   option: [],
@@ -52,4 +52,4 @@ KarimField.defaultProps = {
 
 };
 
-export default KarimField;
+export default ValidationField;

src/Components/ValidationField/View/DataRange.tsx

@@ -15,7 +15,7 @@ const DataRange = ({ name, label, isDisabled, option, isMulti,Format ,props }: a
   };
   return (
 
-    <div className='KarimField'>
+    <div className='ValidationField'>
       <label htmlFor={name} className="text">
         {t(`${label}`)}
       </label>

src/Components/ValidationField/View/Date.tsx

@@ -13,7 +13,7 @@ const Date = ({ name, label, isDisabled, option, isMulti,picker="date" ,props }:
   };
   return (
 
-    <div className='KarimField'>
+    <div className='ValidationField'>
       <label htmlFor={name} className="text">
         {t(`${label}`)}
       </label>

src/Components/ValidationField/View/Default.tsx

@@ -7,7 +7,7 @@ const Default = ({ name, label, placeholder, isDisabled, onChange, props }: any)
 
 
   return (
-    <div className="KarimField">
+    <div className="ValidationField">
       <label htmlFor={name} className="text">
         {t(`${label ? label : name}`)}
       </label>

src/Components/ValidationField/View/File.tsx

@@ -29,7 +29,7 @@ const File = ({ name, label, onChange, isDisabled,accept, props }: any) => {
     onSuccess();
   };
   return (
-    <div className="KarimField">
+    <div className="ValidationField">
       <label htmlFor={name} className="text">
         {t(`${label || name}`)}
       </label>

src/Components/ValidationField/View/SelectField.tsx

@@ -0,0 +1,39 @@
+import { Form, Select } from 'antd'
+import React from 'react'
+import useFormField from '../../../Hooks/useFormField';
+
+const SelectField = ({ name, label, placeholder, isDisabled, option, isMulti, onChange, props }: any) => {
+
+  const { errorMsg, isError, t, formik } = useFormField(name, props)
+  const SelecthandleChange = (value: { value: string; label: React.ReactNode }) => {
+    formik.setFieldValue(name, value)
+
+  };
+  return (
+    <div className='ValidationField'>
+      <label htmlFor={name} className="text">
+        {t(`${label ? label : name}`)}
+      </label>
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
+        <Select
+          placeholder={t(`${placeholder ? placeholder : name}`)}
+          disabled={isDisabled}
+          options={option}
+          defaultValue={formik.values[name]}
+          allowClear
+          {...(isMulti && { mode: "multiple" })}
+          onChange={onChange || SelecthandleChange}
+
+
+
+        />
+      </Form.Item>
+    </div>
+  )
+}
+
+export default SelectField

src/Components/ValidationField/View/Time.tsx

@@ -12,7 +12,7 @@ const Time = ({ name, label,props }: any) => {
   };
   return (
 
-    <div className='KarimField'>
+    <div className='ValidationField'>
       <label htmlFor={name} className="text">
         {t(`${label}`)}
       </label>

src/Extensions/FileGenerator/generateForm.js

@@ -12,7 +12,7 @@ if (!fileName) {
 let FileContiner = `
 import React from 'react'
 import { Col, Row } from 'reactstrap';
-import KarimField from '../../Components/Karimalden/KarimField';
+import ValidationField from '../../Components/Karimalden/ValidationField';
 import { FakeSelectData } from '../../Layout/app/Const';
 import { useFormikContext } from 'formik';
 
@@ -27,7 +27,7 @@ function Form${capitalizeFirstLetter(fileName)}() {
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
     <Col>
     {/* name from form utils */}
-      <KarimField name="name" type="text"label='name'  placeholder='placeholder' />
+      <ValidationField name="name" type="text"label='name'  placeholder='placeholder' />
       
     </Col>
     <Col>

src/Layout/app/Types.tsx

@@ -4,7 +4,7 @@ export  interface FormTableState {
   OpenAdd: boolean;
 }
 
-  export type KarimFieldProps = {
+export type ValidationFieldProps = {
   name: string;
   name2?: string;
   type: string;

src/Pages/Auth/LoginForm.tsx

@@ -2,16 +2,12 @@ import React from 'react'
 import { Formik, Form, Field } from 'formik';
 import Translate from '../../Components/Utils/Translate';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { TOKEN_KEY } from '../../config/AppKey';
 import { useLoginAdmin } from '../../api/auth';
 
-import * as Yup from "yup";
 import { getInitialValues, getValidationSchema } from './formUtil';
-import KarimField from '../../Components/Karimalden/KarimField';
-import { LoadingButton } from '../../Components/Ui/LoadingButton';
 import useNavigateOnSuccess from '../../Hooks/useNavigateOnSuccess';
 import useAuthState from '../../lib/state mangment/AuthState';
+import ValidationField from '../../Components/ValidationField/ValidationField';
 
 const LoginForm = () => {
   const [t] = useTranslation();
@@ -47,7 +43,7 @@ const LoginForm = () => {
               {t("Welcome back, please login to your account.")}
             </h4>
 
-            <KarimField
+            <ValidationField
               placeholder={t('email')}
               type='text'
               name='email'
@@ -56,7 +52,7 @@ const LoginForm = () => {
           </div>
 
           <div className='form-outline mb-4'>
-            <KarimField
+            <ValidationField
               placeholder={t('password')}
               type='password'
               name='password'

src/Pages/Contact/FormContact.tsx

@@ -1,11 +1,11 @@
 
 import React from 'react'
 import { Col, Row } from 'reactstrap';
-import KarimField from '../../Components/Karimalden/KarimField';
 import { FakeSelectData } from '../../Layout/app/Const';
 import { useFormikContext } from 'formik';
 
 import { DatePicker } from 'antd';
+import ValidationField from '../../Components/ValidationField/ValidationField';
 
 function FormContact() {
   const formik = useFormikContext<any>();
@@ -25,16 +25,14 @@ function FormContact() {
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
       <Col>
         {/* name from form utils */}
-      <KarimField name="title" type="text"label='title'  placeholder='placeholder' />
-      <KarimField name="sub_title" type="text"label='sub_title'  placeholder='placeholder' />
-      <KarimField name="description" type="text"label='description'  placeholder='placeholder' />
-
-      
+        <ValidationField name="title" type="text" label='title' placeholder='placeholder' />
+        <ValidationField name="sub_title" type="text" label='sub_title' placeholder='placeholder' />
+        <ValidationField name="description" type="text" label='description' placeholder='placeholder' />
       </Col>
       <Col>
-    <KarimField name="direction" option={directionOptions || []} type="Select" label='direction'  placeholder='placeholder' />
-    <KarimField name="is_have_button" type="Checkbox" label='Have button'  placeholder='placeholder' />
-    <KarimField name="image" type="File"label='image'  placeholder='placeholder' />
+        <ValidationField name="direction" option={directionOptions || []} type="Select" label='direction' placeholder='placeholder' />
+        <ValidationField name="is_have_button" type="Checkbox" label='Have button' placeholder='placeholder' />
+        <ValidationField name="image" type="File" label='image' placeholder='placeholder' />
 
       </Col>
 

src/Pages/RecentWorks/FormRecentWorks.tsx

@@ -1,11 +1,11 @@
 
 import React from 'react'
 import { Col, Row } from 'reactstrap';
-import KarimField from '../../Components/Karimalden/KarimField';
 import { FakeSelectData } from '../../Layout/app/Const';
 import { useFormikContext } from 'formik';
 
 import { DatePicker } from 'antd';
+import ValidationField from '../../Components/ValidationField/ValidationField';
 
 function FormRecentWorks() {
   const formik = useFormikContext<any>();
@@ -16,12 +16,12 @@ function FormRecentWorks() {
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
       <Col>
         {/* name from form utils */}
-      <KarimField name="title" type="text"label='title'  placeholder='placeholder' />
-      <KarimField name="description" type="text"label='description'  placeholder='placeholder' />
+        <ValidationField name="title" type="text" label='title' placeholder='placeholder' />
+        <ValidationField name="description" type="text" label='description' placeholder='placeholder' />
 
       </Col>
       <Col>
-      <KarimField name="image" type="File"label='image'  placeholder='placeholder' />
+        <ValidationField name="image" type="File" label='image' placeholder='placeholder' />
 
       </Col>
 

src/Pages/Services/FormServices.tsx

@@ -1,11 +1,11 @@
 
 import React from 'react'
 import { Col, Row } from 'reactstrap';
-import KarimField from '../../Components/Karimalden/KarimField';
 import { FakeSelectData } from '../../Layout/app/Const';
 import { useFormikContext } from 'formik';
 
 import { DatePicker } from 'antd';
+import ValidationField from '../../Components/ValidationField/ValidationField';
 
 function FormServices() {
   const formik = useFormikContext<any>();
@@ -16,12 +16,12 @@ function FormServices() {
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
       <Col>
         {/* name from form utils */}
-      <KarimField name="title" type="text"label='title'  placeholder='placeholder' />
-      <KarimField name="description" type="text"label='description'  placeholder='placeholder' />
+        <ValidationField name="title" type="text" label='title' placeholder='placeholder' />
+        <ValidationField name="description" type="text" label='description' placeholder='placeholder' />
 
       </Col>
       <Col>
-      <KarimField name="image" type="File"label='image'  placeholder='placeholder' />
+        <ValidationField name="image" type="File" label='image' placeholder='placeholder' />
 
       </Col>
 

src/Pages/SocialMedia/FormSocialMedia.tsx

@@ -1,8 +1,8 @@
 
 import React from 'react'
 import { Col, Row } from 'reactstrap';
-import KarimField from '../../Components/Karimalden/KarimField';
 import { useFormikContext } from 'formik';
+import ValidationField from '../../Components/ValidationField/ValidationField';
 
 function FormSocialMedia() {
   const formik = useFormikContext<any>();
@@ -12,12 +12,12 @@ function FormSocialMedia() {
   return (
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
       <Col>
-      <KarimField name="link" type="text"label='link'  placeholder='placeholder' />
+        <ValidationField name="link" type="text" label='link' placeholder='placeholder' />
 
       </Col>
       <Col>
-      <KarimField name="image"  type="File" label='image' placeholder='placeholder'  />
-      <KarimField name="is_active"  type="Checkbox" label='is_active' placeholder='placeholder' Group />
+        <ValidationField name="image" type="File" label='image' placeholder='placeholder' />
+        <ValidationField name="is_active" type="Checkbox" label='is_active' placeholder='placeholder' Group />
 
       </Col>
 

src/Pages/StaticInfo/FormStaticInfo.tsx

@@ -1,11 +1,11 @@
 
 import React from 'react'
 import { Col, Row } from 'reactstrap';
-import KarimField from '../../Components/Karimalden/KarimField';
 import { FakeSelectData } from '../../Layout/app/Const';
 import { useFormikContext } from 'formik';
 
 import { DatePicker } from 'antd';
+import ValidationField from '../../Components/ValidationField/ValidationField';
 
 function FormStaticInfo({ isDisable = false }: { isDisable?: boolean }) {
   const formik = useFormikContext<any>();
@@ -24,13 +24,13 @@ function FormStaticInfo({isDisable= false}:{isDisable?:boolean}) {
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
       <Col>
         {/* name from form utils */}
-      <KarimField name="key" type="text"label='key' isDisabled={isDisable?true:false} placeholder='placeholder' />
+        <ValidationField name="key" type="text" label='key' isDisabled={isDisable ? true : false} placeholder='placeholder' />
 
       </Col>
       <Col>
-      <KarimField name="value_type" option={valueTypeOptions || []} type="Select" label='value_type'  placeholder='placeholder' />
+        <ValidationField name="value_type" option={valueTypeOptions || []} type="Select" label='value_type' placeholder='placeholder' />
 
-      <KarimField name="value" type={formik?.values?.value_type == 'image'? 'File':'text'}label='value'  placeholder='placeholder' />
+        <ValidationField name="value" type={formik?.values?.value_type == 'image' ? 'File' : 'text'} label='value' placeholder='placeholder' />
 
       </Col>
 

src/Pages/projects/FormProjects.tsx

@@ -1,11 +1,11 @@
 
 import React from 'react'
 import { Col, Row } from 'reactstrap';
-import KarimField from '../../Components/Karimalden/KarimField';
 import { FakeSelectData } from '../../Layout/app/Const';
 import { useFormikContext } from 'formik';
 
 import { DatePicker } from 'antd';
+import ValidationField from '../../Components/ValidationField/ValidationField';
 
 function FormProjects() {
   const formik = useFormikContext<any>();
@@ -16,12 +16,12 @@ function FormProjects() {
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
       <Col>
         {/* name from form utils */}
-      <KarimField name="title" type="text"label='title'  placeholder='placeholder' />
+        <ValidationField name="title" type="text" label='title' placeholder='placeholder' />
       </Col>
       <Col>
-      <KarimField name="image" type="File"label='image'  placeholder='placeholder' />      
-      <KarimField name="hover_image" type="File"label='hover_image'  placeholder='placeholder' />      
-      <KarimField name="video" type="File"label='video'  placeholder='placeholder' accept={".mp4"} />      
+        <ValidationField name="image" type="File" label='image' placeholder='placeholder' />
+        <ValidationField name="hover_image" type="File" label='hover_image' placeholder='placeholder' />
+        <ValidationField name="video" type="File" label='video' placeholder='placeholder' accept={".mp4"} />
 
       </Col>
 

src/Pages/works/FormWorks.tsx

@@ -1,11 +1,11 @@
 
 import React from 'react'
 import { Col, Row } from 'reactstrap';
-import KarimField from '../../Components/Karimalden/KarimField';
 import { FakeSelectData } from '../../Layout/app/Const';
 import { useFormikContext } from 'formik';
 
 import { DatePicker } from 'antd';
+import ValidationField from '../../Components/ValidationField/ValidationField';
 
 function FormWorks() {
   const formik = useFormikContext<any>();
@@ -16,7 +16,7 @@ function FormWorks() {
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
       <Col>
         {/* name from form utils */}
-      <KarimField name="image" type="File"label='image'  placeholder='placeholder' />
+        <ValidationField name="image" type="File" label='image' placeholder='placeholder' />
 
       </Col>
 

src/Styles/Layout/Layout.scss

@@ -244,12 +244,12 @@ background: var(--bg);
  background-color:transparent;
  color:var(--text);
 }
-.react-tabs__tab-panel--selected .KarimField .ant-input-affix-wrapper,.modal-body .KarimField .ant-input-affix-wrapper{
+.react-tabs__tab-panel--selected .ValidationField .ant-input-affix-wrapper,.modal-body .ValidationField .ant-input-affix-wrapper{
  background-color:transparent;
 }
 
 /* Input */
-.react-tabs__tab-panel--selected .KarimField input[type=text],.modal-body .KarimField input{
+.react-tabs__tab-panel--selected .ValidationField input[type=text],.modal-body .ValidationField input{
  background-color:transparent;
  color:var(--text)!important;
  &::placeholder{