improvement: make error tooltip placement configurable

We want to be able to configure the placement of the error tooltip on
fields. The default is bottom, but when using the datepicker that
position clashes with the datepicker tooltip.

Added tooltipPlacement property to withField.

Author: Gido Manders

src/form/withField/withField.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
-import { Field, FieldProps as FieldValidationProps } from '@42.nl/final-form-field-validation';
+import {
+  Field,
+  FieldProps as FieldValidationProps
+} from '@42.nl/final-form-field-validation';
 import getDisplayName from 'react-display-name';
 import { merge, omit, pick } from 'lodash';
 
@@ -10,10 +13,11 @@ import { FieldCompatible } from '../types';
 import { FieldValidator } from 'final-form';
 import { FieldRenderProps } from 'react-final-form';
 import { ErrorMode, FieldError } from '../FormError/FieldError';
+import { TippyPlacement } from '../../core/types';
 
 // This is a list of props that `withField` will pass to the `final-form`
 // Field, but not the wrapper.
-const passedFieldProps = [ 'initialValue', 'format', 'formatOnBlur', 'parse' ];
+const passedFieldProps = ['initialValue', 'format', 'formatOnBlur', 'parse'];
 
 // These are the props that are managed by `withField` and should not
 // be set manually by the user.
@@ -27,20 +31,19 @@ const managedProps = [
   'error'
 ];
 
-export type FieldProps<Value, ChangeValue> = FieldCompatible<Value,
-  ChangeValue> & {
+export type FieldProps<Value, ChangeValue> = FieldCompatible<
+  Value,
+  ChangeValue
+> & {
   errorMode?: ErrorMode;
+  tooltipPlacement?: TippyPlacement;
 };
 
 export type WithFieldProps<Value, P> = FieldValidationProps<Value, any> &
-  Omit<P,
-    | 'onFocus'
-    | 'onBlur'
-    | 'onChange'
-    | 'value'
-    | 'color'
-    | 'valid'
-    | 'error'>;
+  Omit<
+    P,
+    'onFocus' | 'onBlur' | 'onChange' | 'value' | 'color' | 'valid' | 'error'
+  >;
 
 /**
  * withField is a Higher Order Component which takes an input element
@@ -58,9 +61,16 @@ export type WithFieldProps<Value, P> = FieldValidationProps<Value, any> &
  * @param Wrapper The Component which is `FieldCompatible`.
  * @param defaultValidators Optional validators the field should use by default
  */
-export function withField<Value,
+export function withField<
+  Value,
   ChangeValue,
-  P extends FieldProps<Value, ChangeValue>>(Wrapper: React.ComponentType<P>, defaultValidators?: (props: WithFieldProps<Value, P>) => FieldValidator<Value>[]) {
+  P extends FieldProps<Value, ChangeValue>
+>(
+  Wrapper: React.ComponentType<P>,
+  defaultValidators?: (
+    props: WithFieldProps<Value, P>
+  ) => FieldValidator<Value>[]
+) {
   const displayName = `Field${getDisplayName(Wrapper)}`;
 
   WithField.displayName = displayName;
@@ -69,13 +79,19 @@ export function withField<Value,
     const illegalProps = managedProps.filter((p) => props[p] !== undefined);
 
     if (illegalProps.length > 0) {
-      illegalPropsDetected('withField', displayName, illegalProps, managedProps);
+      illegalPropsDetected(
+        'withField',
+        displayName,
+        illegalProps,
+        managedProps
+      );
     }
 
-    const [ hasErrors, setHasErrors ] = useHasErrors();
+    const [hasErrors, setHasErrors] = useHasErrors();
 
     const {
       errorMode = 'below',
+      tooltipPlacement = 'bottom',
       name,
       validators,
       asyncValidators,
@@ -86,7 +102,7 @@ export function withField<Value,
 
     // A bit magical this one but this makes TypeScript accept all other
     // props as the Props to the wrapped component.
-    const wrapperProps = (omit(rest, passedFieldProps) as unknown) as P;
+    const wrapperProps = omit(rest, passedFieldProps) as unknown as P;
 
     const fieldProps = pick(rest, [
       'initialValue',
@@ -114,7 +130,11 @@ export function withField<Value,
     return (
       <Field<Value, any>
         name={name}
-        validators={defaultValidators ? merge(defaultValidators(props), validators) : validators}
+        validators={
+          defaultValidators
+            ? merge(defaultValidators(props), validators)
+            : validators
+        }
         asyncValidators={asyncValidators}
         asyncValidatorsDebounce={asyncValidatorsDebounce}
         subscription={fieldSubscription}
@@ -124,7 +144,7 @@ export function withField<Value,
               content={error}
               tag="div"
               className="w-100"
-              placement="bottom"
+              placement={tooltipPlacement}
             >
               <Wrapper
                 {...wrapperProps}