github.com/grafana/pyroscope@v1.18.0/public/app/ui/Modals/index.ts (about)

     1  import Swal, { SweetAlertInput, SweetAlertOptions } from 'sweetalert2';
     2  
     3  import styles from './Modal.module.css';
     4  
     5  const defaultParams: Partial<SweetAlertOptions> = {
     6    showCancelButton: true,
     7    allowOutsideClick: true,
     8    backdrop: true,
     9    focusConfirm: false,
    10    customClass: {
    11      popup: styles.popup,
    12      title: styles.title,
    13      input: styles.input,
    14      confirmButton: styles.button,
    15      denyButton: styles.button,
    16      cancelButton: styles.button,
    17      validationMessage: styles.validationMessage,
    18    },
    19    inputAttributes: {
    20      required: 'true',
    21    },
    22  };
    23  
    24  export type ShowModalParams = {
    25    title: string;
    26    html?: string;
    27    confirmButtonText: string;
    28    type: 'danger' | 'normal';
    29    onConfirm?: ShamefulAny;
    30    input?: SweetAlertInput;
    31    inputValue?: string;
    32    inputLabel?: string;
    33    inputPlaceholder?: string;
    34    validationMessage?: string;
    35    inputValidator?: (value: string) => string | null;
    36  };
    37  
    38  const ShowModal = async ({
    39    title,
    40    html,
    41    confirmButtonText,
    42    type,
    43    onConfirm,
    44    input,
    45    inputValue,
    46    inputLabel,
    47    inputPlaceholder,
    48    validationMessage,
    49    inputValidator,
    50  }: ShowModalParams) => {
    51    const baseOptions = {
    52      title,
    53      html,
    54      confirmButtonText,
    55      confirmButtonColor: getButtonStyleFromType(type),
    56      ...defaultParams,
    57    };
    58  
    59    const options = input
    60      ? {
    61          ...baseOptions,
    62          input,
    63          inputLabel,
    64          inputPlaceholder,
    65          inputValue,
    66          validationMessage,
    67          inputValidator,
    68        }
    69      : baseOptions;
    70  
    71    const { isConfirmed, value } = await Swal.fire(options as SweetAlertOptions);
    72  
    73    if (isConfirmed) {
    74      onConfirm(value);
    75    }
    76  
    77    return value;
    78  };
    79  
    80  function getButtonStyleFromType(type: 'danger' | 'normal') {
    81    if (type === 'danger') {
    82      return '#dc3545'; // red
    83    }
    84  
    85    return '#0074d9'; // blue
    86  }
    87  
    88  export default ShowModal;