2020-10-09 06:48:50 +00:00
|
|
|
import { Popover } from "@patternfly/react-core";
|
2020-09-08 17:12:42 +00:00
|
|
|
import { HelpIcon } from "@patternfly/react-icons";
|
2021-07-21 09:30:18 +00:00
|
|
|
import React, { isValidElement, ReactNode } from "react";
|
2020-09-08 17:12:42 +00:00
|
|
|
import { useTranslation } from "react-i18next";
|
2021-07-21 09:30:18 +00:00
|
|
|
import { useHelp } from "./HelpHeader";
|
2020-09-08 17:12:42 +00:00
|
|
|
|
|
|
|
type HelpItemProps = {
|
2021-07-09 14:23:49 +00:00
|
|
|
helpText: string | ReactNode;
|
2020-10-09 06:48:50 +00:00
|
|
|
forLabel: string;
|
|
|
|
forID: string;
|
2021-04-07 17:55:50 +00:00
|
|
|
noVerticalAlign?: boolean;
|
2021-04-20 08:06:20 +00:00
|
|
|
unWrap?: boolean;
|
2021-06-18 20:04:20 +00:00
|
|
|
id?: string;
|
2020-09-08 17:12:42 +00:00
|
|
|
};
|
|
|
|
|
2021-04-07 17:55:50 +00:00
|
|
|
export const HelpItem = ({
|
|
|
|
helpText,
|
|
|
|
forLabel,
|
|
|
|
forID,
|
2021-06-18 20:04:20 +00:00
|
|
|
id,
|
2021-04-07 17:55:50 +00:00
|
|
|
noVerticalAlign = true,
|
2021-04-20 08:06:20 +00:00
|
|
|
unWrap = false,
|
2021-04-07 17:55:50 +00:00
|
|
|
}: HelpItemProps) => {
|
2020-09-08 17:12:42 +00:00
|
|
|
const { t } = useTranslation();
|
2021-07-21 09:30:18 +00:00
|
|
|
const { enabled } = useHelp();
|
2020-09-08 17:12:42 +00:00
|
|
|
return (
|
2020-09-25 17:11:25 +00:00
|
|
|
<>
|
|
|
|
{enabled && (
|
2021-07-09 14:23:49 +00:00
|
|
|
<Popover
|
|
|
|
bodyContent={
|
|
|
|
isValidElement(helpText) ? helpText : t(helpText as string)
|
|
|
|
}
|
|
|
|
>
|
2021-04-20 08:06:20 +00:00
|
|
|
<>
|
|
|
|
{!unWrap && (
|
|
|
|
<button
|
2021-06-18 20:04:20 +00:00
|
|
|
id={id}
|
2021-04-20 08:06:20 +00:00
|
|
|
aria-label={t(`helpLabel`, { label: forLabel })}
|
|
|
|
onClick={(e) => e.preventDefault()}
|
|
|
|
aria-describedby={forID}
|
|
|
|
className="pf-c-form__group-label-help"
|
|
|
|
>
|
|
|
|
<HelpIcon noVerticalAlign={noVerticalAlign} />
|
|
|
|
</button>
|
|
|
|
)}
|
|
|
|
{unWrap && <HelpIcon noVerticalAlign={noVerticalAlign} />}
|
|
|
|
</>
|
2020-10-09 06:48:50 +00:00
|
|
|
</Popover>
|
2020-09-25 17:11:25 +00:00
|
|
|
)}
|
|
|
|
</>
|
2020-09-08 17:12:42 +00:00
|
|
|
);
|
|
|
|
};
|