@lets-events/react 12.4.1 → 12.5.0

package/src/components/FormFields/DoubleCalendarFormField.tsx

@@ -1,90 +1,93 @@
-import { useCallback } from "react";
-import { FieldValues, useController, RegisterOptions } from "react-hook-form";
-import { Flex } from "../Flex";
-import { FormLabel } from "./subComponents/FormLabel";
-import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
-import { DoubleCalendar, DateRange, DoubleCalendarProps } from "../DoubleCalendar";
-
-export type DoubleCalendarFormFieldProps = Omit<
-    DoubleCalendarProps,
-    "selected" | "setSelected"
-> & {
-    name: string;
-    label?: string;
-    required?: boolean;
-    validate?: (value: DateRange) => boolean | string;
-    validationErrorMessage?: string;
-    rules?: Omit<
-        RegisterOptions<FieldValues, string>,
-        "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
-    >;
-    allowPastDates?: boolean;
-    maxYearsFromNow?: number;
-};
-
-export const DoubleCalendarFormField = ({
-    name,
-    label,
-    required,
-    validate,
-    validationErrorMessage = "Este campo é obrigatório.",
-    rules,
-    allowPastDates,
-    maxYearsFromNow = 20,
-    ...calendarProps
-}: DoubleCalendarFormFieldProps) => {
-    const handleValidate = useCallback(
-        (value?: DateRange) => {
-            if (value === undefined || value === null) {
-                if (required) return validationErrorMessage;
-                return true;
-            }
-            return validate?.(value) ?? true;
-        },
-        [validate, required, validationErrorMessage]
-    );
-
-    const { field, fieldState } = useController({
-        name,
-        rules: {
-            required: required ? validationErrorMessage : false,
-            validate: handleValidate,
-            ...rules,
-        },
-        defaultValue: undefined,
-    });
-
-    const fieldError = fieldState.error;
-    const haveError = !!fieldError;
-    const errorMsg = fieldError?.message;
-
-    const { value: selected, onChange: setSelected } = field as any;
-
-    const handleCalendarChange = (range: DateRange) => {
-        setSelected(range);
-    };
-
-    return (
-        <Flex direction="column" style={{ flex: "1" }}>
-            {label && (
-                <FormLabel name={name} label={label} required={required} haveError={haveError} />
-            )}
-
-            <DoubleCalendar
-                selected={selected}
-                setSelected={(value) => {
-                    const newValue = typeof value === "function" ? value(selected) : value;
-                    handleCalendarChange(newValue);
-                }}
-                hasError={haveError}
-                allowPastDates={allowPastDates}
-                maxYearsFromNow={maxYearsFromNow}
-                {...calendarProps}
-            />
-
-            <ErrorFormMessage message={errorMsg} />
-        </Flex>
-    );
-};
-
-export default DoubleCalendarFormField;
+import { useCallback } from "react";
+import { FieldValues, useController, RegisterOptions } from "react-hook-form";
+import { Flex } from "../Flex";
+import { FormLabel } from "./subComponents/FormLabel";
+import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
+import { DoubleCalendar, DateRange, DoubleCalendarProps } from "../DoubleCalendar";
+
+export type DoubleCalendarFormFieldProps = Omit<
+    DoubleCalendarProps,
+    "selected" | "setSelected"
+> & {
+    name: string;
+    label?: string;
+    required?: boolean;
+    validate?: (value: DateRange) => boolean | string;
+    validationErrorMessage?: string;
+    rules?: Omit<
+        RegisterOptions<FieldValues, string>,
+        "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
+    >;
+    disabled?: boolean;
+    allowPastDates?: boolean;
+    maxYearsFromNow?: number;
+};
+
+export const DoubleCalendarFormField = ({
+    name,
+    label,
+    required,
+    validate,
+    validationErrorMessage = "Este campo é obrigatório.",
+    rules,
+    allowPastDates,
+    maxYearsFromNow = 20,
+    disabled,
+    ...calendarProps
+}: DoubleCalendarFormFieldProps) => {
+    const handleValidate = useCallback(
+        (value?: DateRange) => {
+            if (value === undefined || value === null) {
+                if (required) return validationErrorMessage;
+                return true;
+            }
+            return validate?.(value) ?? true;
+        },
+        [validate, required, validationErrorMessage]
+    );
+
+    const { field, fieldState } = useController({
+        name,
+        rules: {
+            required: required ? validationErrorMessage : false,
+            validate: handleValidate,
+            ...rules,
+        },
+        defaultValue: undefined,
+    });
+
+    const fieldError = fieldState.error;
+    const haveError = !!fieldError;
+    const errorMsg = fieldError?.message;
+
+    const { value: selected, onChange: setSelected } = field as any;
+
+    const handleCalendarChange = (range: DateRange) => {
+        setSelected(range);
+    };
+
+    return (
+        <Flex direction="column" style={{ flex: "1" }}>
+            {label && (
+                <FormLabel name={name} label={label} required={required} haveError={haveError} />
+            )}
+
+            <DoubleCalendar
+                selected={selected}
+                setSelected={(value) => {
+                    const newValue = typeof value === "function" ? value(selected) : value;
+                    handleCalendarChange(newValue);
+                }}
+                disabled={disabled}
+                hasError={haveError}
+                allowPastDates={allowPastDates}
+                maxYearsFromNow={maxYearsFromNow}
+                {...calendarProps}
+            />
+
+            <ErrorFormMessage message={errorMsg} />
+        </Flex>
+    );
+};
+
+export default DoubleCalendarFormField;

package/src/components/FormFields/EmailFormField.tsx

@@ -1,27 +1,27 @@
-import { TextFormField } from "./TextFormField";
-import { validateEmail } from "./utils/validation";
-
-export type EmailFormFieldProps = {
-  name: string;
-  label?: string;
-  required?: boolean;
-  placeholder?: string;
-};
-
-export const EmailFormField = ({
-  name,
-  label,
-  required,
-  placeholder,
-}: EmailFormFieldProps) => {
-  return (
-    <TextFormField
-      name={name}
-      label={label}
-      required={required}
-      placeholder={placeholder}
-      type="email"
-      validate={validateEmail("E-mail inválido.")}
-    />
-  );
-};
+import { TextFormField } from "./TextFormField";
+import { validateEmail } from "./utils/validation";
+
+export type EmailFormFieldProps = {
+  name: string;
+  label?: string;
+  required?: boolean;
+  placeholder?: string;
+};
+
+export const EmailFormField = ({
+  name,
+  label,
+  required,
+  placeholder,
+}: EmailFormFieldProps) => {
+  return (
+    <TextFormField
+      name={name}
+      label={label}
+      required={required}
+      placeholder={placeholder}
+      type="email"
+      validate={validateEmail("E-mail inválido.")}
+    />
+  );
+};

package/src/components/FormFields/Form.tsx

@@ -1,39 +1,39 @@
-import { JSX, useMemo } from "react";
-import {
-  FormProvider,
-  useForm,
-  SubmitHandler,
-  FieldValues,
-  UseFormProps,
-  UseFormReturn,
-} from "react-hook-form";
-
-export type FormProps<T extends FieldValues = FieldValues> = UseFormProps<T> & {
-  onSubmit: SubmitHandler<T>;
-  children: JSX.Element | ((p: UseFormReturn<T, any, T>) => JSX.Element);
-  methods?: ReturnType<typeof useForm<T>>;
-};
-
-export const Form = <T extends FieldValues = FieldValues>({
-  onSubmit,
-  children,
-  ...props
-}: FormProps<T>) => {
-  const formMethods = useForm<T>({
-    mode: "onTouched",
-    ...props,
-  });
-  
-  return (
-    <FormProvider {...formMethods}>
-      <form onSubmit={formMethods.handleSubmit(onSubmit)}>
-        {(() => {
-          if (typeof children === "function") {
-            return children(formMethods);
-          }
-          return children;
-        })()}
-      </form>
-    </FormProvider>
-  );
-};
+import { JSX, useMemo } from "react";
+import {
+  FormProvider,
+  useForm,
+  SubmitHandler,
+  FieldValues,
+  UseFormProps,
+  UseFormReturn,
+} from "react-hook-form";
+
+export type FormProps<T extends FieldValues = FieldValues> = UseFormProps<T> & {
+  onSubmit: SubmitHandler<T>;
+  children: JSX.Element | ((p: UseFormReturn<T, any, T>) => JSX.Element);
+  methods?: ReturnType<typeof useForm<T>>;
+};
+
+export const Form = <T extends FieldValues = FieldValues>({
+  onSubmit,
+  children,
+  ...props
+}: FormProps<T>) => {
+  const formMethods = useForm<T>({
+    mode: "onTouched",
+    ...props,
+  });
+  
+  return (
+    <FormProvider {...formMethods}>
+      <form onSubmit={formMethods.handleSubmit(onSubmit)}>
+        {(() => {
+          if (typeof children === "function") {
+            return children(formMethods);
+          }
+          return children;
+        })()}
+      </form>
+    </FormProvider>
+  );
+};

package/src/components/FormFields/IdentityDocumentNumberFormField.tsx

@@ -1,32 +1,32 @@
-import { TextFormField } from "./TextFormField";
-
-type IdentityDocumentNumberFormFieldProps = {
-  name: string;
-  label: string;
-  required?: boolean;
-  placeholder?: string;
-  validationErrorMessage: string;
-};
-
-export const IdentityDocumentNumberFormField = ({
-  name,
-  label,
-  required,
-  placeholder,
-  validationErrorMessage,
-}: IdentityDocumentNumberFormFieldProps) => {
-  return (
-    <TextFormField
-      name={name}
-      label={label}
-      required={required}
-      placeholder={placeholder || "__.___.___-_"}
-      validate={(value: string) => {
-        const isEmpty = value.length === 0;
-        if (!required && isEmpty) return true;
-        if (value.length >= 3) return true;
-        return false || validationErrorMessage;
-      }}
-    />
-  );
-};
+import { TextFormField } from "./TextFormField";
+
+type IdentityDocumentNumberFormFieldProps = {
+  name: string;
+  label: string;
+  required?: boolean;
+  placeholder?: string;
+  validationErrorMessage: string;
+};
+
+export const IdentityDocumentNumberFormField = ({
+  name,
+  label,
+  required,
+  placeholder,
+  validationErrorMessage,
+}: IdentityDocumentNumberFormFieldProps) => {
+  return (
+    <TextFormField
+      name={name}
+      label={label}
+      required={required}
+      placeholder={placeholder || "__.___.___-_"}
+      validate={(value: string) => {
+        const isEmpty = value.length === 0;
+        if (!required && isEmpty) return true;
+        if (value.length >= 3) return true;
+        return false || validationErrorMessage;
+      }}
+    />
+  );
+};

package/src/components/FormFields/MultiSelectFormField.tsx

@@ -1,64 +1,64 @@
-import { useController } from "react-hook-form";
-import { Flex } from "../Flex";
-import { FormLabel } from "./subComponents/FormLabel";
-import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
-import { MultiSelect, MultiSelectProps } from "../MultiSelect";
-
-export type MultiSelectFormFieldProps = MultiSelectProps & {
-  name: string;
-  label?: string;
-  required?: boolean;
-  selectedOrientation?: "row" | "column";
-  zIndex?: string;
-  maxHeight?: string;
-};
-
-export const MultiSelectFormField = ({
-  name,
-  label,
-  required,
-  selectedOrientation = "column",
-  zIndex,
-  maxHeight,
-  ...rest
-}: MultiSelectFormFieldProps) => {
-  const { field, fieldState } = useController({
-    name,
-    rules: {
-      required,
-    },
-    defaultValue: [],
-  });
-
-  const { value, onChange, ref, onBlur, disabled } = field;
-
-  const haveError = !!fieldState.error;
-
-  const errorMsg = fieldState.error?.message;
-
-  const handleChange = (v: any) => {
-    onChange(v);
-  };
-
-  return (
-    <Flex direction={"column"}>
-      <FormLabel
-        name={name}
-        label={label}
-        required={required}
-        haveError={haveError}
-      />
-      <MultiSelect
-        value={value}
-        onValueChange={handleChange}
-        ref={ref}
-        color={haveError ? "error" : "default"}
-        selectedOrientation={selectedOrientation}
-        zIndex={zIndex}
-        maxHeight={maxHeight}
-        {...rest}
-      />
-      <ErrorFormMessage message={errorMsg} />
-    </Flex>
-  );
-};
+import { useController } from "react-hook-form";
+import { Flex } from "../Flex";
+import { FormLabel } from "./subComponents/FormLabel";
+import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
+import { MultiSelect, MultiSelectProps } from "../MultiSelect";
+
+export type MultiSelectFormFieldProps = MultiSelectProps & {
+  name: string;
+  label?: string;
+  required?: boolean;
+  selectedOrientation?: "row" | "column";
+  zIndex?: string;
+  maxHeight?: string;
+};
+
+export const MultiSelectFormField = ({
+  name,
+  label,
+  required,
+  selectedOrientation = "column",
+  zIndex,
+  maxHeight,
+  ...rest
+}: MultiSelectFormFieldProps) => {
+  const { field, fieldState } = useController({
+    name,
+    rules: {
+      required,
+    },
+    defaultValue: [],
+  });
+
+  const { value, onChange, ref, onBlur, disabled } = field;
+
+  const haveError = !!fieldState.error;
+
+  const errorMsg = fieldState.error?.message;
+
+  const handleChange = (v: any) => {
+    onChange(v);
+  };
+
+  return (
+    <Flex direction={"column"}>
+      <FormLabel
+        name={name}
+        label={label}
+        required={required}
+        haveError={haveError}
+      />
+      <MultiSelect
+        value={value}
+        onValueChange={handleChange}
+        ref={ref}
+        color={haveError ? "error" : "default"}
+        selectedOrientation={selectedOrientation}
+        zIndex={zIndex}
+        maxHeight={maxHeight}
+        {...rest}
+      />
+      <ErrorFormMessage message={errorMsg} />
+    </Flex>
+  );
+};

package/src/components/FormFields/PhoneFormField.tsx

@@ -1,40 +1,40 @@
-import { TextFormField } from "./TextFormField";
-import { minMaxLength } from "./utils/validation";
-
-export type PhoneFormFieldProps = {
-  name: string;
-  label?: string;
-  required?: boolean;
-};
-
-export const PhoneFormField = ({
-  name,
-  label,
-  required,
-}: PhoneFormFieldProps) => {
-  return (
-    <TextFormField
-      name={name}
-      label={label}
-      required={required}
-      addon={"+ 55"}
-      mask={{
-        mask: "(__) _____-____}",
-        replacement: { _: /\d/ },
-      }}
-      placeholder="(00) 00000-0000"
-      type="tel"
-      validate={minMaxLength(13, 14, "Telefone inválido")}
-      valueFormatter={{
-        format(v) {
-          if (!v || v === "") return v;
-          return v.replace(/^\+55/, "");
-        },
-        unformat(v) {
-          if (!v || v === "") return v;
-          return "+55" + v;
-        },
-      }}
-    />
-  );
-};
+import { TextFormField } from "./TextFormField";
+import { minMaxLength } from "./utils/validation";
+
+export type PhoneFormFieldProps = {
+  name: string;
+  label?: string;
+  required?: boolean;
+};
+
+export const PhoneFormField = ({
+  name,
+  label,
+  required,
+}: PhoneFormFieldProps) => {
+  return (
+    <TextFormField
+      name={name}
+      label={label}
+      required={required}
+      addon={"+ 55"}
+      mask={{
+        mask: "(__) _____-____}",
+        replacement: { _: /\d/ },
+      }}
+      placeholder="(00) 00000-0000"
+      type="tel"
+      validate={minMaxLength(13, 14, "Telefone inválido")}
+      valueFormatter={{
+        format(v) {
+          if (!v || v === "") return v;
+          return v.replace(/^\+55/, "");
+        },
+        unformat(v) {
+          if (!v || v === "") return v;
+          return "+55" + v;
+        },
+      }}
+    />
+  );
+};