@ttoss/forms 0.19.0 → 0.21.0

package/src/FormFieldPatternFormat.tsx

@@ -0,0 +1,36 @@
+import { FormField } from './FormField';
+import { Input } from '@ttoss/ui';
+import { PatternFormat, PatternFormatProps } from 'react-number-format';
+
+export type FormFieldPatternFormatProps = {
+  label?: string;
+  name: string;
+} & PatternFormatProps;
+
+export const FormFieldPatternFormat = ({
+  label,
+  name,
+  ...patternFormatProps
+}: FormFieldPatternFormatProps) => {
+  return (
+    <FormField
+      name={name}
+      label={label}
+      render={({ field, fieldState }) => {
+        return (
+          <PatternFormat
+            name={field.name}
+            value={field.value}
+            onBlur={field.onBlur}
+            onValueChange={(values) => {
+              field.onChange(values.value);
+            }}
+            customInput={Input}
+            aria-invalid={Boolean(fieldState.error).valueOf()}
+            {...patternFormatProps}
+          />
+        );
+      }}
+    />
+  );
+};

package/src/FormFieldSelect.tsx

@@ -1,110 +1,57 @@
-import { FieldPath, FieldPathValue, FieldValues } from 'react-hook-form';
+import { FieldPath, FieldValues } from 'react-hook-form';
 import { FormField, FormFieldProps } from './FormField';
-import { Select, type SelectProps } from '@ttoss/ui';
-
-type FormRadioOption = {
-  value: string | number;
-  label: string;
-};
-
-type SelectSwitchProps =
-  | (SelectProps & { placeholder?: never })
-  | (SelectProps & { defaultValue?: never });
-
-const checkDefaultValue = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({
-  options,
-  defaultValue,
-  placeholder,
-}: {
-  options: Array<FormRadioOption>;
-  defaultValue?: FieldPathValue<TFieldValues, TName>;
-  placeholder?: string;
-}): FieldPathValue<TFieldValues, TName> => {
-  if (defaultValue) {
-    return defaultValue;
-  }
-
-  const hasEmptyValue = options.some((opt) => {
-    return opt.value === '' || opt.value === 0;
-  });
-
-  const EMPTY_VALUE = '' as FieldPathValue<TFieldValues, TName>;
-
-  if (placeholder && hasEmptyValue) {
-    return EMPTY_VALUE;
-  }
-
-  if (placeholder && !hasEmptyValue) {
-    options.unshift({
-      label: placeholder,
-      value: '',
-    });
-    return EMPTY_VALUE;
-  }
-
-  if (!placeholder && defaultValue) return EMPTY_VALUE;
-  if (options.length === 0) return EMPTY_VALUE;
-
-  return options?.[0]?.value as FieldPathValue<TFieldValues, TName>;
-};
+import { Select, SelectOption, type SelectProps } from '@ttoss/ui';
 
 type FormFieldSelectProps<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
-> = SelectSwitchProps &
-  FormFieldProps & {
-    label?: string;
-    name: FieldPath<TFieldValues>;
-    options: FormRadioOption[];
-    defaultValue?: FieldPathValue<TFieldValues, TName>;
-  };
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = Omit<SelectProps, 'defaultValue'> & FormFieldProps<TFieldValues, TName>;
 
 export const FormFieldSelect = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 >({
   label,
   name,
-  options,
+  id,
+  defaultValue,
   sx,
+  css,
+  disabled,
+  tooltip,
+  onTooltipClick,
   ...selectProps
-}: FormFieldSelectProps<TFieldValues, TName>) => {
-  const { defaultValue, placeholder } = selectProps;
-
-  const checkedDefaultValue = checkDefaultValue<TFieldValues, TName>({
-    options,
-    defaultValue,
-    placeholder,
-  });
-
+}: FormFieldSelectProps<TFieldValues>) => {
   return (
     <FormField
       name={name}
       label={label}
-      disabled={selectProps.disabled}
-      tooltip={selectProps.tooltip}
-      onTooltipClick={selectProps.onTooltipClick}
+      id={id}
+      defaultValue={defaultValue}
+      disabled={disabled}
+      tooltip={tooltip}
+      onTooltipClick={onTooltipClick}
       sx={sx}
-      defaultValue={checkedDefaultValue}
+      css={css}
       render={({ field, fieldState }) => {
+        const value = selectProps.options?.find((option) => {
+          if ('value' in option) {
+            return option.value === field.value;
+          }
+
+          return false;
+        }) as SelectOption | undefined;
+
         return (
           <Select
             {...selectProps}
             {...field}
-            {...{ ...selectProps, defaultValue: undefined }}
+            defaultValue={value}
+            value={value}
+            onChange={(value) => {
+              field.onChange(value?.value);
+            }}
             aria-invalid={fieldState.error ? 'true' : undefined}
-          >
-            {options.map((option: FormRadioOption) => {
-              return (
-                <option key={option.label} value={option.value}>
-                  {option.label}
-                </option>
-              );
-            })}
-          </Select>
+          />
         );
       }}
     />

package/src/index.ts

@@ -7,7 +7,10 @@ export * as yup from 'yup';
 export { Form } from './Form';
 export { FormField } from './FormField';
 export { FormFieldCheckbox } from './FormFieldCheckbox';
+export { FormFieldCreditCardNumber } from './FormFieldCreditCardNumber';
 export { FormFieldNumericFormat } from './FormFieldNumericFormat';
+export { FormFieldPatternFormat } from './FormFieldPatternFormat';
+export { FormFieldCurrencyInput } from './FormFieldCurrencyInput';
 export { FormFieldInput } from './FormFieldInput';
 export { FormFieldPassword } from './FormFieldPassword';
 export { FormFieldRadio } from './FormFieldRadio';