Feature Tooltip: support react node

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- support to react node for `labelToolTip`
+
 ### Changed
 
 - Licence information added

src/lib/AsyncTypeaheadInput.tsx

@@ -43,6 +43,7 @@ const AsyncTypeaheadInput = <T extends FieldValues>(props: AsyncTypeaheadInputPr
     disabled,
     variant,
     label,
+    labelToolTip,
     helpText,
     hideValidationMessage,
     onBlur,
@@ -139,6 +140,7 @@ const AsyncTypeaheadInput = <T extends FieldValues>(props: AsyncTypeaheadInputPr
   return (
     <FormGroupLayout
       name={name}
+      labelToolTip={labelToolTip}
       label={useBootstrapStyle ? label : undefined}
       labelStyle={useBootstrapStyle ? { color: "#8493A5", fontSize: 14 } : undefined}
       layout="muiInput"

src/lib/FormGroupLayout.tsx

@@ -82,7 +82,7 @@ const FormGroupLayout = <T extends FieldValues, TRenderAddon = unknown>(props: F
         labelStyle={labelStyle}
         fieldName={props.name}
         fieldId={id}
-        tooltip={labelToolTip}
+        labelToolTip={labelToolTip}
         layout={layout}
       />
       {switchLayout || checkboxLayout || muiInputLayout ? (

src/lib/FormGroupLayoutLabel.tsx

@@ -1,23 +1,59 @@
-import { CSSProperties, ReactNode } from "react";
 import { useFormContext } from "./context/FormContext";
 import { FieldPath, FieldValues } from "react-hook-form";
 import { Label, UncontrolledTooltip } from "@neolution-ch/reactstrap";
 import { getRequiredLabel } from "./helpers/form";
+import type { FormGroupLayoutProps } from "./FormGroupLayout";
 
-interface FormGroupLayoutLabelProps<T extends FieldValues> {
-  label: ReactNode;
-  tooltip?: ReactNode;
+type TooltipProps<T extends FieldValues> = Pick<FormGroupLayoutLabelProps<T>, "labelToolTip" | "fieldId">;
+
+const Tooltip = <T extends FieldValues>(props: TooltipProps<T>) => {
+  const { fieldId, labelToolTip } = props;
+
+  if (!labelToolTip) {
+    return null;
+  }
+
+  if (typeof labelToolTip !== "string") {
+    return labelToolTip;
+  }
+
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        id={`Tooltip-${fieldId}`}
+        className="tooltip--icon"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
+        />
+      </svg>
+      <UncontrolledTooltip placement="top" target={`Tooltip-${fieldId}`}>
+        {labelToolTip}
+      </UncontrolledTooltip>
+    </>
+  );
+};
+
+interface FormGroupLayoutLabelProps<T extends FieldValues> extends Pick<
+  FormGroupLayoutProps<T, unknown>,
+  "labelToolTip" | "layout" | "labelStyle" | "label"
+> {
   fieldName: FieldPath<T>;
   fieldId: string;
-  layout?: "checkbox" | "switch" | "muiInput";
-  labelStyle?: CSSProperties;
 }
 
 const FormGroupLayoutLabel = <T extends FieldValues>(props: FormGroupLayoutLabelProps<T>) => {
-  const { label, tooltip, fieldName, layout, fieldId, labelStyle } = props;
+  const { label, labelToolTip, fieldName, layout, fieldId, labelStyle } = props;
   const { requiredFields } = useFormContext<T>();
 
-  if (!label && !!tooltip) {
+  if (!label && !!labelToolTip) {
     throw new Error("You can't have a tooltip without a label");
   }
 
@@ -30,33 +66,10 @@ const FormGroupLayoutLabel = <T extends FieldValues>(props: FormGroupLayoutLabel
   const checkboxLayout = layout === "checkbox";
 
   return (
-    <>
-      <Label check={checkboxLayout || switchLayout} for={fieldId} style={labelStyle}>
-        {finalLabel}
-        {tooltip && (
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            strokeWidth={1.5}
-            stroke="currentColor"
-            id={`Tooltip-${fieldId}`}
-            className="tooltip--icon"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
-            />
-          </svg>
-        )}
-      </Label>
-      {tooltip && (
-        <UncontrolledTooltip placement="top" target={`Tooltip-${fieldId}`}>
-          {tooltip}
-        </UncontrolledTooltip>
-      )}
-    </>
+    <Label check={checkboxLayout || switchLayout} for={fieldId} style={labelStyle}>
+      {finalLabel}
+      <Tooltip<T> labelToolTip={labelToolTip} fieldId={fieldId} />
+    </Label>
   );
 };
 

src/lib/StaticTypeaheadInput.tsx

@@ -36,6 +36,7 @@ const StaticTypeaheadInput = <T extends FieldValues>(props: StaticTypeaheadInput
     disabled,
     variant,
     label,
+    labelToolTip,
     helpText,
     hideValidationMessage,
     onChange,
@@ -112,6 +113,7 @@ const StaticTypeaheadInput = <T extends FieldValues>(props: StaticTypeaheadInput
   return (
     <FormGroupLayout
       name={name}
+      labelToolTip={labelToolTip}
       label={useBootstrapStyle ? label : undefined}
       labelStyle={useBootstrapStyle ? { color: "#8493A5", fontSize: 14 } : undefined}
       layout="muiInput"

src/lib/types/CommonInputProps.ts

@@ -15,7 +15,7 @@ interface CommonInputProps<T extends FieldValues, TRenderAddon = unknown> {
   id?: string;
   helpText?: ReactNode;
   disabled?: boolean;
-  labelToolTip?: string;
+  labelToolTip?: ReactNode;
   markAllOnFocus?: boolean;
   inputOnly?: boolean;