github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/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 { isConfirmed, value } = await Swal.fire({
    52      title,
    53      html,
    54      confirmButtonText,
    55      input,
    56      inputLabel,
    57      inputPlaceholder,
    58      inputValue,
    59      validationMessage,
    60      inputValidator,
    61      confirmButtonColor: getButtonStyleFromType(type),
    62      ...defaultParams,
    63    });
    64  
    65    if (isConfirmed) {
    66      onConfirm(value);
    67    }
    68  
    69    return value;
    70  };
    71  
    72  function getButtonStyleFromType(type: 'danger' | 'normal') {
    73    if (type === 'danger') {
    74      return '#dc3545'; // red
    75    }
    76  
    77    return '#0074d9'; // blue
    78  }
    79  
    80  export default ShowModal;