m3-academy-template-vtexio/custom/react/components/B2bForm/Fields/M3CnpjField.tsx
Caroline Moran f2a03c53ae first commit
2022-08-11 09:06:07 -04:00

27 lines
1017 B
TypeScript

import { useFormikContext } from "formik";
import React from "react";
import InputMask from "react-input-mask";
import styles from "./M3Field.css";
import { FormFields } from "../B2bForm";
import { FieldProps } from "./M3Field";
export const M3CnpjField: StorefrontFunctionComponent<FieldProps> = (
{ type, name, label }: FieldProps) => {
const { values, touched, handleChange, handleBlur, errors } = useFormikContext<FormFields>();
return <div className={`${styles.fieldGroup} ${errors[name] && touched[name] && styles.fieldGroupError}`}>
<label htmlFor={name} className={styles.fieldLabel}>{label}</label>
<InputMask
mask="99.999.999/9999-99"
type={type ? type : "text"}
name={name}
onChange={handleChange}
onBlur={handleBlur}
value={values[name]}
className={styles.fieldInput}
/>
<span className={styles.error}> {errors[name] && touched[name] && errors[name]} </span>
</div>;
};