diff --git a/CHANGELOG.md b/CHANGELOG.md index bbd429e..3072e1e 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/lib/AsyncTypeaheadInput.tsx b/src/lib/AsyncTypeaheadInput.tsx index 88bf76b..a45d173 100644 --- a/src/lib/AsyncTypeaheadInput.tsx +++ b/src/lib/AsyncTypeaheadInput.tsx @@ -43,6 +43,7 @@ const AsyncTypeaheadInput = (props: AsyncTypeaheadInputPr disabled, variant, label, + labelToolTip, helpText, hideValidationMessage, onBlur, @@ -139,6 +140,7 @@ const AsyncTypeaheadInput = (props: AsyncTypeaheadInputPr return ( (props: F labelStyle={labelStyle} fieldName={props.name} fieldId={id} - tooltip={labelToolTip} + labelToolTip={labelToolTip} layout={layout} /> {switchLayout || checkboxLayout || muiInputLayout ? ( diff --git a/src/lib/FormGroupLayoutLabel.tsx b/src/lib/FormGroupLayoutLabel.tsx index 6f6f5a2..83143ad 100644 --- a/src/lib/FormGroupLayoutLabel.tsx +++ b/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 { - label: ReactNode; - tooltip?: ReactNode; +type TooltipProps = Pick, "labelToolTip" | "fieldId">; + +const Tooltip = (props: TooltipProps) => { + const { fieldId, labelToolTip } = props; + + if (!labelToolTip) { + return null; + } + + if (typeof labelToolTip !== "string") { + return labelToolTip; + } + + return ( + <> + + + + + {labelToolTip} + + + ); +}; + +interface FormGroupLayoutLabelProps extends Pick< + FormGroupLayoutProps, + "labelToolTip" | "layout" | "labelStyle" | "label" +> { fieldName: FieldPath; fieldId: string; - layout?: "checkbox" | "switch" | "muiInput"; - labelStyle?: CSSProperties; } const FormGroupLayoutLabel = (props: FormGroupLayoutLabelProps) => { - const { label, tooltip, fieldName, layout, fieldId, labelStyle } = props; + const { label, labelToolTip, fieldName, layout, fieldId, labelStyle } = props; const { requiredFields } = useFormContext(); - if (!label && !!tooltip) { + if (!label && !!labelToolTip) { throw new Error("You can't have a tooltip without a label"); } @@ -30,33 +66,10 @@ const FormGroupLayoutLabel = (props: FormGroupLayoutLabel const checkboxLayout = layout === "checkbox"; return ( - <> - - {tooltip && ( - - {tooltip} - - )} - + ); }; diff --git a/src/lib/StaticTypeaheadInput.tsx b/src/lib/StaticTypeaheadInput.tsx index 56f4e15..1357623 100644 --- a/src/lib/StaticTypeaheadInput.tsx +++ b/src/lib/StaticTypeaheadInput.tsx @@ -36,6 +36,7 @@ const StaticTypeaheadInput = (props: StaticTypeaheadInput disabled, variant, label, + labelToolTip, helpText, hideValidationMessage, onChange, @@ -112,6 +113,7 @@ const StaticTypeaheadInput = (props: StaticTypeaheadInput return ( { id?: string; helpText?: ReactNode; disabled?: boolean; - labelToolTip?: string; + labelToolTip?: ReactNode; markAllOnFocus?: boolean; inputOnly?: boolean;