Skip to content

Commit

Permalink
feat: replace onResetField by onChange
Browse files Browse the repository at this point in the history
  • Loading branch information
@RenauxLeaInsee
RenauxLeaInsee committed Nov 27, 2024
1 parent 9dc0da2 commit 64609c9
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 80 deletions.
12 changes: 0 additions & 12 deletions src/ui/Contact/ContactFormDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import { useFetchMutation } from "../../hooks/useFetchQuery.ts";
import { AddressFormFields } from "../Form/AddressFormFields.tsx";
import { useState } from "react";
import { contactSchema } from "../../schemas/contactSchema.ts";
import { z } from "zod";

type Props = {
open: boolean;
Expand Down Expand Up @@ -87,10 +86,6 @@ export const ContactFormDialog = ({ open, onClose, contact, onSave }: Props) =>
onClose();
};

const onResetField = (name: keyof z.infer<typeof contactSchema>) => {
setValue(name, "");
};

return (
<Dialog open={open} onClose={handleClose} sx={{ ".MuiPaper-root": { maxWidth: "80vw", p: 2 } }}>
<form action="#" onSubmit={onSubmit}>
Expand All @@ -117,47 +112,41 @@ export const ContactFormDialog = ({ open, onClose, contact, onSave }: Props) =>
label="Nom"
error={errors.lastName?.message}
{...register("lastName")}
onResetField={() => onResetField("lastName")}
/>
<Field
control={control}
type="text"
label="Prénom"
error={errors.firstName?.message}
{...register("firstName")}
onResetField={() => onResetField("firstName")}
/>
<Field
control={control}
type="text"
label="Fonction"
error={errors.function?.message}
{...register("function")}
onResetField={() => onResetField("function")}
/>
<Field
control={control}
type="text"
label="Adresse mail"
error={errors.email?.message}
{...register("email")}
onResetField={() => onResetField("email")}
/>
<Field
control={control}
type="text"
label="Téléphone 1"
error={errors.phone?.message}
{...register("phone")}
onResetField={() => onResetField("phone")}
/>
<Field
control={control}
type="text"
label="Téléphone 2"
error={errors.otherPhone?.message}
{...register("otherPhone")}
onResetField={() => onResetField("otherPhone")}
/>
</Stack>
<Divider orientation="vertical" variant="middle" />
Expand All @@ -173,7 +162,6 @@ export const ContactFormDialog = ({ open, onClose, contact, onSave }: Props) =>
setValue("address.codeChoice", e.target.value);
}}
control={control}
onResetField={onResetField}
type="contact"
/>
</Box>
Expand Down
108 changes: 47 additions & 61 deletions src/ui/Form/AddressFormFields.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import { Field } from "./Field.tsx";
import { Row } from "../Row.tsx";
Expand All @@ -24,7 +23,6 @@ type Props = {
codeType: string;
onChangeCodeChoice: (event: React.ChangeEvent<HTMLInputElement>) => void;
control: Control<any, any, any>;
onResetField: (name: any) => void;
type?: "contact" | "surveyUnit";
};

Expand All @@ -37,7 +35,6 @@ export const AddressFormFields = ({
codeType,
onChangeCodeChoice,
control,
onResetField,
type = "surveyUnit",
}: Props) => {
const [country, setCountry] = useState(countryValue);
Expand All @@ -64,93 +61,86 @@ export const AddressFormFields = ({
label="Raison sociale"
error={errors.identificationName?.message}
{...register("identificationName")}
onResetField={() => onResetField("identificationName")}
type="text"
control={control}
/>
)}
<Row gap={2} justifyContent={"space-between"}>
<Field
sx={{ width: "7vw" }}
sx={{ width: "8vw" }}
label="N°"
error={errors.address?.streetNumber?.message}
{...register("address.streetNumber")}
onResetField={() => onResetField("address.streetNumber")}
type="text"
control={control}
/>
<Box sx={{ width: "10vw" }}>
{!country || country === "FRANCE" ? (
<Field
type="select"
control={control}
selectoptions={repetitionIndexEnum}
defaultValue={repetitionIndexValue}
label="Indice"
error={errors.address?.repetitionIndex?.message}
{...register("address.repetitionIndex")}
onResetField={() => onResetField("address.repetitionIndex")}
/>
) : (
<Field
type="text"
control={control}
label="Indice"
defaultValue={repetitionIndexValue ?? ""}
error={errors.address?.repetitionIndex?.message}
{...register("address.repetitionIndex")}
onResetField={() => onResetField("address.repetitionIndex")}
/>
)}
</Box>
<Box sx={{ width: "18vw" }}>
{!country || country === "FRANCE" ? (
<Field
type="select"
control={control}
label="Type de voie"
selectoptions={streetTypes}
defaultValue={streetTypeValue}
error={errors.address?.streetType?.message}
{...register("address.streetType")}
onResetField={() => onResetField("address.streetType")}
/>
) : (
<Field
type="text"
control={control}
label="Type de voie"
defaultValue={streetTypeValue ?? ""}
error={errors.address?.streetType?.message}
{...register("address.streetType")}
onResetField={() => onResetField("address.streetType")}
/>
)}
</Box>

{!country || country === "FRANCE" ? (
<Field
sx={{ width: "10vw" }}
type="select"
control={control}
selectoptions={repetitionIndexEnum}
defaultValue={repetitionIndexValue}
label="Indice"
error={errors.address?.repetitionIndex?.message}
{...register("address.repetitionIndex")}
/>
) : (
<Field
sx={{ width: "10vw" }}
type="text"
control={control}
label="Indice"
defaultValue={repetitionIndexValue ?? ""}
error={errors.address?.repetitionIndex?.message}
{...register("address.repetitionIndex")}
/>
)}

{!country || country === "FRANCE" ? (
<Field
sx={{ width: "18vw" }}
type="select"
control={control}
label="Type de voie"
selectoptions={streetTypes}
defaultValue={streetTypeValue}
error={errors.address?.streetType?.message}
{...register("address.streetType")}
/>
) : (
<Field
sx={{ width: "18vw" }}
type="text"
control={control}
label="Type de voie"
defaultValue={streetTypeValue ?? ""}
error={errors.address?.streetType?.message}
{...register("address.streetType")}
/>
)}
</Row>
<Field
type="text"
control={control}
label="Nom de la voie"
error={errors.address?.streetName?.message}
{...register("address.streetName")}
onResetField={() => onResetField("address.streetName")}
/>
<Field
type="text"
control={control}
label="Mention spéciale"
error={errors.address?.specialDistribution?.message}
{...register("address.specialDistribution")}
onResetField={() => onResetField("address.specialDistribution")}
/>
<Field
type="text"
control={control}
label="Complément"
error={errors.address?.addressSupplement?.message}
{...register("address.addressSupplement")}
onResetField={() => onResetField("address.addressSupplement")}
/>
<FormControl>
<FormLabel
Expand Down Expand Up @@ -199,15 +189,13 @@ export const AddressFormFields = ({
error={errors.address?.zipCode?.message}
type="number"
{...register("address.zipCode")}
onResetField={() => onResetField("address.zipCode")}
/>
<Field
type="text"
control={control}
label="Commune *"
error={errors.address?.cityName?.message}
{...register("address.cityName")}
onResetField={() => onResetField("address.cityName")}
/>
</>
)}
Expand All @@ -219,15 +207,13 @@ export const AddressFormFields = ({
error={errors.address?.cedexCode?.message}
type="number"
{...register("address.cedexCode")}
onResetField={() => onResetField("address.cedexCode")}
/>
<Field
type="text"
control={control}
label="Libellé Cedex * (exemple : Paris CEDEX 14) "
error={errors.address?.cedexName?.message}
{...register("address.cedexName")}
onResetField={() => onResetField("address.cedexName")}
/>
</>
)}
Expand Down
14 changes: 7 additions & 7 deletions src/ui/Form/Field.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ type Props = Pick<TextFieldProps, "onChange" | "onBlur" | "name" | "label" | "re
labelOutside?: boolean;
options?: { label: string; value: string }[];
selectoptions?: string[];
onResetField?: () => void;
};

export const Field = forwardRef<HTMLElement, Props>((props, ref) => {
Expand Down Expand Up @@ -100,7 +99,6 @@ export function uncontrolledField(props: Props, ref: any) {
<InputLabel id={labelId}>{props.label}</InputLabel>
<Select
IconComponent={props => <ExpandMoreOutlinedIcon {...props} sx={{ color: "text.primary" }} />}
disabled={props.disabled}
fullWidth
{...props}
labelId={labelId}
Expand Down Expand Up @@ -172,7 +170,7 @@ export function uncontrolledField(props: Props, ref: any) {
}

export function controlledField(
{ type, name, options, error, label, onResetField, selectoptions, disabled }: Props,
{ type, name, options, error, label, selectoptions, disabled, sx }: Props,
field: any,
) {
if (type === "switch") {
Expand Down Expand Up @@ -237,12 +235,13 @@ export function controlledField(
return (
<TextField
{...field}
sx={sx}
label={label}
fullWidth
InputProps={{
disableUnderline: true,
endAdornment: field.value !== "" && (
<IconButton size="small" onClick={onResetField}>
<IconButton size="small" onClick={() => field.onChange("")}>
<CloseIcon />
</IconButton>
),
Expand All @@ -267,6 +266,7 @@ export function controlledField(
return (
<TextField
fullWidth
sx={sx}
label={label}
{...field}
type="text"
Expand All @@ -276,7 +276,7 @@ export function controlledField(
InputProps={{
disableUnderline: true,
endAdornment: field.value !== "" && (
<IconButton size="small" onClick={onResetField}>
<IconButton size="small" onClick={() => field.onChange("")}>
<CloseIcon />
</IconButton>
),
Expand All @@ -301,15 +301,15 @@ export function controlledField(
const labelId = `label-${name}`;

return (
<FormControl fullWidth variant="filled">
<FormControl fullWidth variant="filled" sx={sx}>
<InputLabel id={labelId}>{label}</InputLabel>
<Select
IconComponent={props => <ExpandMoreOutlinedIcon {...props} sx={{ color: "text.primary" }} />}
disabled={disabled}
fullWidth
endAdornment={
field.value !== "" && (
<IconButton sx={{ mr: 2 }} size="small" onClick={onResetField}>
<IconButton sx={{ mr: 2 }} size="small" onClick={() => field.onChange("")}>
<CloseIcon />
</IconButton>
)
Expand Down

0 comments on commit 64609c9

Please sign in to comment.