Line data    Source code

       1              : /*
       2              :  * Copyright (C) 2023 Red Hat, Inc.
       3              :  * SPDX-License-Identifier: LGPL-2.1-or-later
       4              :  */
       5              : 
       6          213 : import React from "react";
       7              : 
       8              : import { FormHelperText } from "@patternfly/react-core/dist/esm/components/Form/index.js";
       9              : import {
      10              :     HelperText, HelperTextItem, type HelperTextItemProps
      11              : } from "@patternfly/react-core/dist/esm/components/HelperText";
      12              : 
      13           25 : export const FormHelper = ({ helperText, helperTextInvalid, variant, icon, fieldId } :
      14              :   {
      15              :       helperText?: React.ReactNode,
      16              :       helperTextInvalid?: React.ReactNode,
      17              :       variant?: HelperTextItemProps["variant"],
      18              :       icon?: HelperTextItemProps["icon"],
      19              :       fieldId?: string,
      20              :   }
      21           25 : ) => {
      22            9 :     const formHelperVariant = variant || (helperTextInvalid ? "error" : "default");
      23              : 
      24           21 :     if (!(helperText || helperTextInvalid))
      25           21 :         return null;
      26              : 
      27           16 :     return (
      28           16 :         <FormHelperText>
      29           16 :             <HelperText>
      30           16 :                 <HelperTextItem
      31              :                     // TODO @Venefilyn: Handle screenreader for this and add translation
      32           10 :                     {...fieldId && { id: fieldId + '-helper' }}
      33           25 :                     variant={formHelperVariant}
      34           25 :                     icon={icon}>
      35            3 :                     {formHelperVariant === "error" ? helperTextInvalid : helperText}
      36           25 :                 </HelperTextItem>
      37           25 :             </HelperText>
      38           25 :         </FormHelperText>
      39              :     );
      40           25 : };