diff --git a/src/Components/CustomFields/Select/CustomSelect.scss b/src/Components/CustomFields/Select/CustomSelect.scss index f979d63..5d0e830 100644 --- a/src/Components/CustomFields/Select/CustomSelect.scss +++ b/src/Components/CustomFields/Select/CustomSelect.scss @@ -108,6 +108,7 @@ border-top-left-radius: 30px !important; transition: 0.5s ease-in-out; + height: 2.5vw !important; // background-color: red !important; } diff --git a/src/Components/ValidationField/ValidationField.tsx b/src/Components/ValidationField/ValidationField.tsx index 7d3cc79..771ea8a 100644 --- a/src/Components/ValidationField/ValidationField.tsx +++ b/src/Components/ValidationField/ValidationField.tsx @@ -16,6 +16,7 @@ import { import { ValidationFieldProps, ValidationFieldType } from "./utils/types"; import LocalSearchField from "./View/LocalSearch"; import NumberFormate from "./View/NumberFormate"; +import NumberField from "./View/NumberField"; const components: { [key: string]: React.FC } = { Select: SelectField, @@ -30,10 +31,11 @@ const components: { [key: string]: React.FC } = { MaltyFile: MaltyFile, Checkbox: CheckboxField, NumberFormate: NumberFormate, + Number:NumberField }; const ValidationField: React.FC = React.memo( - ({ type, ...otherProps }) => { + ({ type, ...otherProps }:any) => { const Component = components[type as ValidationFieldType]; if (!Component) { diff --git a/src/Components/ValidationField/View/Default.tsx b/src/Components/ValidationField/View/Default.tsx index d26556a..79753d3 100644 --- a/src/Components/ValidationField/View/Default.tsx +++ b/src/Components/ValidationField/View/Default.tsx @@ -3,6 +3,7 @@ import React from "react"; import useFormField from "../../../Hooks/useFormField"; import { MdOutlineEdit } from "react-icons/md"; import { Field } from "formik"; +import { ValidationFieldPropsInput } from "../utils/types"; const Default = ({ name, @@ -14,7 +15,7 @@ const Default = ({ no_label, label_icon, ...props -}: any) => { +}: ValidationFieldPropsInput) => { const { errorMsg, isError, t } = useFormField(name, props); return ( @@ -50,9 +51,9 @@ const Default = ({ name={name} disabled={isDisabled} size="large" - {...props} - // onChange={onChange ? onChange : handleChange} + {...(type === "number" && { min: 0 })} + {...props} /> diff --git a/src/Components/ValidationField/View/NumberField.tsx b/src/Components/ValidationField/View/NumberField.tsx new file mode 100644 index 0000000..81c4d98 --- /dev/null +++ b/src/Components/ValidationField/View/NumberField.tsx @@ -0,0 +1,70 @@ +import { Form, Input, InputNumber } from "antd"; +import React from "react"; +import useFormField from "../../../Hooks/useFormField"; +import { MdOutlineEdit } from "react-icons/md"; +import { Field } from "formik"; +import { ValidationFieldPropsInput } from "../utils/types"; + +const NumberField = ({ + name, + label, + placeholder, + isDisabled, + onChange, + type, + no_label, + label_icon, + ...props +}: ValidationFieldPropsInput) => { + const { errorMsg, isError, t ,formik} = useFormField(name, props); + + const handleChange = ( + e: React.ChangeEvent, + ) => { + console.log('Change:', e); + formik.setFieldValue(name, e); + }; + + return ( +
+ {no_label ? ( + + ) : label_icon ? ( +
+ + +
+ ) : ( + + )} + + + + +
+ ); +}; + +export default React.memo(NumberField); diff --git a/src/Components/ValidationField/utils/ValidationField.scss b/src/Components/ValidationField/utils/ValidationField.scss index a2e8ee2..e3851d0 100644 --- a/src/Components/ValidationField/utils/ValidationField.scss +++ b/src/Components/ValidationField/utils/ValidationField.scss @@ -62,6 +62,10 @@ } .Checkboxs { padding: 4%; + +} +.ant-checkbox-wrapper{ + min-width: 100px; } .SearchField { button { @@ -209,4 +213,17 @@ input:-webkit-autofill:hover { svg{ color: var(--primary); } +} +.ValidationField:has(.input_number){ + max-width: 100px; + + .input_number{ + max-width: 100px; + } +} + +.flex{ + display: flex; + gap: 30px ; + max-width: 80% !important; } \ No newline at end of file diff --git a/src/Components/ValidationField/utils/types.ts b/src/Components/ValidationField/utils/types.ts index d2595cc..5535241 100644 --- a/src/Components/ValidationField/utils/types.ts +++ b/src/Components/ValidationField/utils/types.ts @@ -1,3 +1,5 @@ +import { InputProps } from "antd"; + export type ValidationFieldType = | "text" | "Select" @@ -159,8 +161,32 @@ export interface ValidationFieldPropstext { [key: string]: any; // Index signature to allow any additional props } + + + + +///// new +export interface BaseField { + name: string; + label?: string; + placeholder?: string; +} +export type OmitBaseType = 'placeholder' | 'name' | 'label' | 'type'; + +export type OmitPicker = OmitBaseType | 'format'; + +export interface ValidationFieldPropsInput + extends Omit, + BaseField { + type: 'text' | 'number' | 'password' | 'email' | "Number"; + isDisabled?:boolean +no_label?:string +label_icon?:string +} + + export type ValidationFieldProps = - | ValidationFieldPropsText + | ValidationFieldPropsInput | ValidationFieldPropsSelect | ValidationFieldPropsLocalSearch | ValidationFieldPropsDataRange diff --git a/src/Layout/Ui/NavBar.tsx b/src/Layout/Ui/NavBar.tsx index 2862f38..d96d1dd 100644 --- a/src/Layout/Ui/NavBar.tsx +++ b/src/Layout/Ui/NavBar.tsx @@ -51,7 +51,7 @@ const NavBar = () => {
- + {/* */} { - const { values } = useFormikContext(); - const [branchId, setbranchId] = useState(null); - const [cycleId, setcycleId] = useState(null); - const { cycle, branch } = values as any; - - useEffect(() => { - setbranchId(branch); - }, [branch]); - useEffect(() => { - setcycleId(cycle); - }, [cycle]); - - const { data: branchData } = useGetAllBranch(); - const { data: CycleData } = useGetAllCycle( - { br_id: branchId }, - { enabled: !!branchId }, - ); - const { data: TermData } = useGetAllTerm( - { cy_id: cycleId }, - { enabled: !!cycleId }, - ); - - const BranchDataSelect = useFormatAuthDataToSelect(branchData?.data); - const BranchCycleData = useFormatAuthDataToSelect(CycleData?.data); - const BranchTermData = useFormatAuthDataToSelect(TermData?.data); const [t] = useTranslation(); return (
- - - +