diff --git a/package-lock.json b/package-lock.json index 548a0a7..c0d2a0d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "starwars", - "version": "0.1.0", + "version": "1.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "starwars", - "version": "0.1.0", + "version": "1.1.0", "dependencies": { "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", @@ -18,6 +18,7 @@ "@mui/joy": "5.0.0-alpha.59", "@mui/lab": "^5.0.0-alpha.121", "@mui/material": "^5.10.13", + "@mui/x-date-pickers": "^6.6.0", "@reduxjs/toolkit": "^1.9.2", "animate.css": "^4.1.1", "axios": "^0.27.2", @@ -4196,13 +4197,13 @@ } }, "node_modules/@mui/utils": { - "version": "5.11.11", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.11.tgz", - "integrity": "sha512-neMM5rrEXYQrOrlxUfns/TGgX4viS8K2zb9pbQh11/oUUYFlGI32Tn+PHePQx7n6Fy/0zq6WxdBFC9VpnJ5JrQ==", + "version": "5.13.1", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.1.tgz", + "integrity": "sha512-6lXdWwmlUbEU2jUI8blw38Kt+3ly7xkmV9ljzY4Q20WhsJMWiNry9CX8M+TaP/HbtuyR8XKsdMgQW7h7MM3n3A==", "dependencies": { "@babel/runtime": "^7.21.0", "@types/prop-types": "^15.7.5", - "@types/react-is": "^16.7.1 || ^17.0.0", + "@types/react-is": "^18.2.0", "prop-types": "^15.8.1", "react-is": "^18.2.0" }, @@ -4222,6 +4223,71 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, + "node_modules/@mui/x-date-pickers": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.6.0.tgz", + "integrity": "sha512-cF7Ijv0IgYi/tCQa2qdoCEHF5gtj/nn/gGdr3oOw/VI6QcKQkbLwA0baPfWEMS2weT9HR6JFerMQ5i57dWv+2A==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@mui/utils": "^5.13.1", + "@types/react-transition-group": "^4.4.6", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", + "@mui/base": "^5.0.0-alpha.87", + "@mui/material": "^5.8.6", + "@mui/system": "^5.8.0", + "date-fns": "^2.25.0", + "date-fns-jalali": "^2.13.0-0", + "dayjs": "^1.10.7", + "luxon": "^3.0.2", + "moment": "^2.29.4", + "moment-hijri": "^2.1.2", + "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "date-fns": { + "optional": true + }, + "date-fns-jalali": { + "optional": true + }, + "dayjs": { + "optional": true + }, + "luxon": { + "optional": true + }, + "moment": { + "optional": true + }, + "moment-hijri": { + "optional": true + }, + "moment-jalaali": { + "optional": true + } + } + }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -5271,17 +5337,17 @@ } }, "node_modules/@types/react-is": { - "version": "17.0.3", - "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz", - "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-1vz2yObaQkLL7YFe/pme2cpvDsCwI1WXIfL+5eLz0MI9gFG24Re16RzUsI8t9XZn9ZWvgLNDrJBmrqXJO7GNQQ==", "dependencies": { "@types/react": "*" } }, "node_modules/@types/react-transition-group": { - "version": "4.4.5", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", - "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", + "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", "dependencies": { "@types/react": "*" } @@ -22118,13 +22184,13 @@ "requires": {} }, "@mui/utils": { - "version": "5.11.11", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.11.tgz", - "integrity": "sha512-neMM5rrEXYQrOrlxUfns/TGgX4viS8K2zb9pbQh11/oUUYFlGI32Tn+PHePQx7n6Fy/0zq6WxdBFC9VpnJ5JrQ==", + "version": "5.13.1", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.1.tgz", + "integrity": "sha512-6lXdWwmlUbEU2jUI8blw38Kt+3ly7xkmV9ljzY4Q20WhsJMWiNry9CX8M+TaP/HbtuyR8XKsdMgQW7h7MM3n3A==", "requires": { "@babel/runtime": "^7.21.0", "@types/prop-types": "^15.7.5", - "@types/react-is": "^16.7.1 || ^17.0.0", + "@types/react-is": "^18.2.0", "prop-types": "^15.8.1", "react-is": "^18.2.0" }, @@ -22136,6 +22202,19 @@ } } }, + "@mui/x-date-pickers": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.6.0.tgz", + "integrity": "sha512-cF7Ijv0IgYi/tCQa2qdoCEHF5gtj/nn/gGdr3oOw/VI6QcKQkbLwA0baPfWEMS2weT9HR6JFerMQ5i57dWv+2A==", + "requires": { + "@babel/runtime": "^7.21.0", + "@mui/utils": "^5.13.1", + "@types/react-transition-group": "^4.4.6", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "react-transition-group": "^4.4.5" + } + }, "@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -22933,17 +23012,17 @@ } }, "@types/react-is": { - "version": "17.0.3", - "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz", - "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-1vz2yObaQkLL7YFe/pme2cpvDsCwI1WXIfL+5eLz0MI9gFG24Re16RzUsI8t9XZn9ZWvgLNDrJBmrqXJO7GNQQ==", "requires": { "@types/react": "*" } }, "@types/react-transition-group": { - "version": "4.4.5", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", - "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", + "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", "requires": { "@types/react": "*" } diff --git a/package.json b/package.json index 40ca94a..3a11fc4 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@mui/joy": "5.0.0-alpha.59", "@mui/lab": "^5.0.0-alpha.121", "@mui/material": "^5.10.13", + "@mui/x-date-pickers": "^6.6.0", "@reduxjs/toolkit": "^1.9.2", "animate.css": "^4.1.1", "axios": "^0.27.2", diff --git a/src/core/store/entities/entities.api.ts b/src/core/store/entities/entities.api.ts index 118b119..982ab9c 100644 --- a/src/core/store/entities/entities.api.ts +++ b/src/core/store/entities/entities.api.ts @@ -9,13 +9,14 @@ export const starshipsTag = "Starships"; export const vehiclesTag = "Vehicles"; export const planetsTag = "Planets"; export const peopleTag = "People"; +export const charactersTag = "Characters"; export const starwarsEntitiesApi = createApi({ reducerPath: 'swEntities', baseQuery: fetchBaseQuery({ baseUrl: BASE_SW_API }), - tagTypes: [speciesTag, starshipsTag, vehiclesTag, planetsTag, peopleTag], + tagTypes: [speciesTag, starshipsTag, vehiclesTag, planetsTag, peopleTag, charactersTag], endpoints: (builder) => ({ fetchEntitiesInfinite: builder.query, EntityFetchArg>({ @@ -38,7 +39,7 @@ export const starwarsEntitiesApi = createApi({ return currentArg?.url !== previousArg?.url; // if provided url has changed }, providesTags: (result, error, args: EntityFetchArg, meta) => { - const tags: TagDescription<"Species" | "Starships" | "Vehicles" | "Planets" | "People">[] = []; + const tags: TagDescription<"Species" | "Starships" | "Vehicles" | "Planets" | "People" | "Characters">[] = []; result?.results.forEach((res: StarwarsContent) => { tags.push({ type: args.entityId, id: res.uid }); }); diff --git a/src/core/store/entities/entities.state.ts b/src/core/store/entities/entities.state.ts index b84c958..fbaa750 100644 --- a/src/core/store/entities/entities.state.ts +++ b/src/core/store/entities/entities.state.ts @@ -1,6 +1,6 @@ import { Pagination } from "src/shared/models/http.model"; -export type EntityType = 'Species' | 'Starships' | 'Vehicles' | 'Planets' | 'People'; +export type EntityType = 'Species' | 'Starships' | 'Vehicles' | 'Planets' | 'People' | 'Characters'; export interface EntityFetchArg { url: string; diff --git a/src/create-new/core/CreateNewFilm.tsx b/src/create-new/core/CreateNewFilm.tsx index 08dc204..f53ed66 100644 --- a/src/create-new/core/CreateNewFilm.tsx +++ b/src/create-new/core/CreateNewFilm.tsx @@ -13,7 +13,6 @@ const CreateNewFilm = () => { setShowDialog(true); }; const handleClose = useCallback((payload: any) => { - console.log(payload); setShowDialog(false); }, []); diff --git a/src/create-new/schemas/all-schemas.ts b/src/create-new/schemas/all-schemas.ts index 450c7a3..a7f0707 100644 --- a/src/create-new/schemas/all-schemas.ts +++ b/src/create-new/schemas/all-schemas.ts @@ -11,6 +11,19 @@ export const newFilmValidationSchema = Yup.object({ vehicles: Yup.array().min(1, "At least one vehicle is required"), }); +export const newPersonalFilmValidationSchema = Yup.object({ + title: Yup.string().required(), + director: Yup.string().required().min(1), + producer: Yup.string().required().min(1), + episode_id: Yup.number().required().min(1), + opening_crawl: Yup.string().required('Opening crawl text is a required field').min(5, 'At least 5 characters is required for crawl text'), + release_date: Yup.string().required().min(1), + characters: Yup.array().min(1, "At least one character is required"), + starships: Yup.array().min(1, "At least one starship is required"), + planets: Yup.array().min(1, "At least one planet is required"), + species: Yup.array().min(1, "At least one species is required"), + vehicles: Yup.array().min(1, "At least one vehicle is required"), +}); export const editFilmValidationSchema = Yup.object().shape({ title: Yup.string().trim().min(2).required(), diff --git a/src/index.tsx b/src/index.tsx index 266bb48..1af88c6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -19,6 +19,9 @@ import { ThemeContextProvider } from './theme/ThemeContext'; import { Provider } from 'react-redux'; import { appStore, persistor } from './store/appStore'; import { PersistGate } from 'redux-persist/integration/react'; +import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'; +import { LocalizationProvider } from '@mui/x-date-pickers'; + const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement @@ -30,7 +33,9 @@ root.render( - + + + diff --git a/src/personal-movies/all/PersonalFilmsTable.tsx b/src/personal-movies/all/PersonalFilmsTable.tsx index fc38e9a..676f4e9 100644 --- a/src/personal-movies/all/PersonalFilmsTable.tsx +++ b/src/personal-movies/all/PersonalFilmsTable.tsx @@ -92,7 +92,6 @@ function PersonalFilmsTable({ films, loading }: PersonalFilmsTableProps) { }; const handleHeaderMenuClick = (colId: string) => (actionId: PersonalFilmTableHeaderActions) => { - console.log(colId, actionId); }; const handleFilterChange = useCallback((filters: QueryFilter[]) => { diff --git a/src/personal-movies/new-film/NewPersonalFilmDialog.tsx b/src/personal-movies/new-film/NewPersonalFilmDialog.tsx index 4baaa03..0e97458 100644 --- a/src/personal-movies/new-film/NewPersonalFilmDialog.tsx +++ b/src/personal-movies/new-film/NewPersonalFilmDialog.tsx @@ -1,13 +1,13 @@ import { Dialog, DialogActions, Button, DialogTitle, IconButton, Stack, Divider, DialogContent, FormControl, InputLabel, Select, - OutlinedInput, Box, Chip, SelectChangeEvent, Typography, Checkbox, ListItemText } from "@mui/material"; + OutlinedInput, Box, Chip, SelectChangeEvent, Typography, Checkbox, ListItemText, TextField, FormHelperText } from "@mui/material"; import MenuItem from '@mui/material/MenuItem'; import SaveIcon from '@mui/icons-material/Save'; import RestartAltIcon from '@mui/icons-material/RestartAlt'; import CloudDownloadIcon from '@mui/icons-material/CloudDownload'; import CloseIcon from '@mui/icons-material/Close'; import { Refresh } from "@mui/icons-material"; -import { Form, Formik, useFormikContext } from "formik"; -import { useRef, useState } from "react"; +import { ErrorMessage, Field, FieldInputProps, FieldMetaProps, Form, Formik, FormikContextType, useFormikContext } from "formik"; +import { useCallback, useEffect, useRef, useState } from "react"; import { useFetchCharactersInfiniteQuery } from "src/core/store/sw-entities-config/swapi"; import { useAppDispatch, useAppSelector } from "src/store/appHook"; import { selectFetchPageUrl, selectNextPageUrl } from "src/core/store/entities/entities.selectors"; @@ -19,7 +19,14 @@ import { EntityType } from "src/core/store/entities/entities.state"; import { StarwarsContent } from "src/shared/models/starwars.model"; import ProgressCircle from "src/shared/components/progress/CircleProgress"; import { getFilledIcon } from "src/shared/utils/left-nav.utils"; - +import FormInput from "src/shared/form/m-input/FormInput"; +import moment from "moment"; +import FormTextArea from "src/shared/form/m-textarea/FormTextArea"; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; +import FormDatepicker from "src/shared/form/m-datepicker/FormDatepicker"; +import { upperFirst } from "lodash"; +import { FormikFieldArgs } from "src/shared/models/form.model"; +import { newPersonalFilmValidationSchema } from "src/create-new/schemas/all-schemas"; export interface NewPersonalFilmDialogProps { open?: boolean; @@ -43,7 +50,7 @@ function NewPersonalFilmDialog({ open, onDialogClose }: NewPersonalFilmDialogPro }; return ( - + theme.palette.mode === 'light' ? 'primary.main' : null, color: (theme) => theme.palette.mode === 'light' ? '#fff' : null} }> @@ -62,8 +69,9 @@ function NewPersonalFilmDialog({ open, onDialogClose }: NewPersonalFilmDialogPro - @@ -78,8 +86,8 @@ export default NewPersonalFilmDialog; function NewFilmForm() { - const { values, submitForm, dirty, errors, isValid } = useFormikContext(); - + const { values, submitForm, dirty, errors, isValid, setValues, setFieldValue } = useFormikContext(); + console.log('----VALUES: ',values); const handleReset = () => { }; @@ -87,16 +95,67 @@ function NewFilmForm() { const handleSave = () => { }; + const handleOnValueChange = useCallback((entity: string, val: StarwarsContent[]) => { + setFieldValue(entity.toLowerCase(), val); + }, [setFieldValue]); + return (
- - - - - + }> + + + }> + + + }> + + + }> + + + }> + + + }> + + + + + + + + {({ + field, // { name, value, onChange, onBlur } + form, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc. + meta, + }: FormikFieldArgs) => { + return ; + }} + + + {({field, form, meta }: FormikFieldArgs) => { + return ; + }} + + + {({field, form, meta }: FormikFieldArgs) => { + return ; + }} + + + {({field, form, meta }: FormikFieldArgs) => { + return ; + }} + + + {({field, form, meta }: FormikFieldArgs) => { + return ; + }} + + @@ -104,7 +163,7 @@ function NewFilmForm() { - @@ -113,25 +172,31 @@ function NewFilmForm() { } export const DEFAULT_NEW_FORM_VALUE = { - title: '' + title: 'My Starwars Film', + director: 'Kevin' }; export interface RemoteSelectProps { entityId: EntityType; + fields: FieldInputProps; // formik use + form: FormikContextType; // formik use + meta: FieldMetaProps; // formik use + onValueChange?: (entityId: string, value: StarwarsContent[]) => void; // pass up for formik to set values } -function RemoteSelect({ entityId }: RemoteSelectProps) { +function RemoteSelect({ entityId, fields, form, meta, onValueChange }: RemoteSelectProps) { + const entityId2 = (entityId === 'Characters' ? 'People' : entityId); // swap it to People if Characters is used const dispatch = useAppDispatch(); const [ selectedEntities, setSelectedEntities ] = useState([]); - const fetchUrl: string | undefined = useAppSelector(selectFetchPageUrl(entityId)); - const nextPage: string | null | undefined = useAppSelector(selectNextPageUrl(entityId)); - const { data, isLoading, isFetching }= useFetchEntitiesInfiniteQuery({entityId, url: fetchUrl}); + const fetchUrl: string | undefined = useAppSelector(selectFetchPageUrl(entityId2)); + const nextPage: string | null | undefined = useAppSelector(selectNextPageUrl(entityId2)); + const { data, isLoading, isFetching }= useFetchEntitiesInfiniteQuery({entityId: entityId2, url: fetchUrl}); const selectedObject = useRef({} as {[uid: string]: boolean}); // used to highlight selections const onPageHandler = () => { - dispatch(dispatchPaging({entityId: entityId, pagination: { page: -1, fetchUrl: nextPage }})); + dispatch(dispatchPaging({entityId: (entityId2), pagination: { page: -1, fetchUrl: nextPage }})); }; /** @@ -158,20 +223,26 @@ function RemoteSelect({ entityId }: RemoteSelectProps) { }); }; + useEffect(() => { + onValueChange && onValueChange(entityId, selectedEntities); + }, [selectedEntities, onValueChange, entityId]); - return ( - - - - { getFilledIcon(entityId.toLowerCase()) } - - { entityId } {selectedEntities.length > 0 ? `(${selectedEntities.length})` : ''} + const leftContent = ( + <> + + { getFilledIcon(entityId.toLowerCase()) } + { entityId } {selectedEntities.length > 0 ? `(${selectedEntities.length})` : ''} + + ); + + return ( + { entityId } + + + { + (meta.touched && meta.error) ? + ( upperFirst(err) } />) : (<>{''}) + } + + - - { isFetching && } + + ); +} + +export interface IPersonalFilm { + title: string; + director: string; + producer: string; + episode_id: number; + release_date: moment.Moment; + opening_crawl: string; + characters: StarwarsContent[]; + starships: StarwarsContent[]; + planets: StarwarsContent[]; + species: StarwarsContent[]; + vehicles: StarwarsContent[]; + canon: boolean; + url?: string; +} + +const initValue: IPersonalFilm = { + title: 'My Starwars Film', + director: 'Kevin', + producer: '', + characters: [], + starships: [], + opening_crawl: 'In a galaxy far far away...', + planets: [], + species: [], + vehicles: [], + episode_id: 10, + release_date: moment(), + canon: false +}; + +function InputWithLeftLabel({ leftContent, children }: any) { + return ( + + + { leftContent } + { children } ); } \ No newline at end of file diff --git a/src/shared/form/m-custom/FormCustom.tsx b/src/shared/form/m-custom/FormCustom.tsx new file mode 100644 index 0000000..8cec2e9 --- /dev/null +++ b/src/shared/form/m-custom/FormCustom.tsx @@ -0,0 +1 @@ +export {}; \ No newline at end of file diff --git a/src/shared/form/m-datepicker/FormDatepicker.tsx b/src/shared/form/m-datepicker/FormDatepicker.tsx new file mode 100644 index 0000000..dcbd11e --- /dev/null +++ b/src/shared/form/m-datepicker/FormDatepicker.tsx @@ -0,0 +1,41 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +import React, { useEffect } from 'react'; +import TextField from '@mui/material/TextField'; +import { ErrorMessage, Field, Form, Formik, FormikProps, useFormikContext } from 'formik'; +import { FormDatepickerProps, FormikInputProps, FormInput2Props, FormInputProps } from 'src/shared/models/form.model'; +import { FormControl, FormHelperText, InputLabel } from '@mui/material'; +import { upperFirst, startCase } from 'lodash'; +import { DatePicker, DatePickerProps } from '@mui/x-date-pickers'; + + +const FormDatepicker = ({ label, name, validate, + disabled, placeholder, variant, ...props}: FormDatepickerProps) => { + + const formik = useFormikContext(); + return ( + + + + + { + (formik.touched[name] && formik.errors[name]) ? + ( upperFirst(err) } />) : (<>{props.helperText}) + } + + + + ); +}; + +export default FormDatepicker; \ No newline at end of file diff --git a/src/shared/form/m-input/FormInput.tsx b/src/shared/form/m-input/FormInput.tsx index 715942f..6c18eb4 100644 --- a/src/shared/form/m-input/FormInput.tsx +++ b/src/shared/form/m-input/FormInput.tsx @@ -8,18 +8,18 @@ import { upperFirst, startCase } from 'lodash'; const FormInput = ({ label, name, validate, - disabled, placeholder, ...props}: FormInput2Props) => { + disabled, placeholder, variant, ...props}: FormInput2Props) => { const formik = useFormikContext(); return ( - + diff --git a/src/shared/models/form.model.ts b/src/shared/models/form.model.ts index 3400f87..d37822f 100644 --- a/src/shared/models/form.model.ts +++ b/src/shared/models/form.model.ts @@ -1,4 +1,8 @@ import { TextFieldProps, SelectProps } from '@mui/material'; +import { DatePickerProps } from '@mui/x-date-pickers'; +import { FieldInputProps, FormikContextType, FieldMetaProps } from 'formik'; +import { Moment } from 'moment'; + export const NONE_SELECTED_VALUE = 'NONE_SELECTED'; export interface FormInputProps { @@ -8,7 +12,8 @@ export interface FormInputProps { showLabel?: boolean; helperText?: string; placeholder?: string; - type: string; + type?: string; + variant?: string; validate?: (value: any) => string | null; valueChange?: (payload: any) => void; } @@ -29,6 +34,14 @@ export interface FormSelectProps extends FormInputProps { useDefaultNoneSelected?: boolean | string; props?: SelectProps; } +export interface FormDatepickerProps extends FormInputProps { + props?: DatePickerProps; +} + +export interface FormCustomComponentrProps extends FormInputProps { + customComponent: any; + props?: any; +} export type FormikInputProps = TextFieldProps & FormInputProps; @@ -47,4 +60,10 @@ export interface FormFieldOptions { [key: string]: { options: T[] | undefined, } +} + +export interface FormikFieldArgs { + field: FieldInputProps; + form: FormikContextType; + meta: FieldMetaProps; } \ No newline at end of file