WithLabelAndTooltip

The withLabelAndTooltip HOC enhances a React component by adding a label, tooltip, and support for conditional visibility. It ensures consistent styling and behavior across your form components.

Note: If you are using pre-build Form or FormContent components, those fields Input, MaskedInput, Password, Datepicker, RadioButtons, Switch, UploadFile, Checkboxes will be wrapped in this component by default. Other fields handle same functionality inside

---

Features

1. Label: Automatically adds a label above the wrapped component, with customizable styles.
2. Tooltip: Optionally displays a tooltip icon next to the label with additional information.
3. Conditional Visibility: Dynamically hides or shows the component based on another field's value using the dependsOnField prop.

---

Props

Name	Type	Default	Description
label	string	-	The label displayed above the component.
labelConfig	object	{ labelClassName: {}, labelTextClassName: {} }	Configuration for customizing label styles. Includes labelClassName (container) and labelTextClassName (text styles).
id	string	-	The unique identifier for the component. Used to associate the label with the component via the htmlFor attribute.
tooltip	string	''	Tooltip content displayed as additional information next to the label.
dependsOnField	object	{ fieldName: '', value: [] }	Determines the visibility of the component based on the value of another field in the form.
dependsOnField.fieldName	string	''	The name of the field that this component depends on for visibility.
dependsOnField.value	array	[]	The value(s) of the dependent field that make this component visible.

---

Usage

Wrapping a Component

const ComponentWithLabelAndTooltip = withLabelAndTooltip(Component)

---

Explanation

Label Addition

• A label is added above the component using Material-UI's InputLabel.
• The label can be styled via the labelConfig prop.

Tooltip

• If a tooltip is provided, a tooltip icon (InfoOutlinedIcon) is rendered next to the label.
• Tooltip content is displayed on hover using Material-UI's Tooltip component.

Conditional Visibility

• The dependsOnField prop allows the component to be shown or hidden based on the value of another field.
• This uses react-hook-form's watch function and the getComponentVisibility utility.