@grafana/ui/dist/esm/components/ConfirmButton/ConfirmButton.mjs.map

Grafana Components Library

{"version":3,"file":"ConfirmButton.mjs","sources":["../../../../src/components/ConfirmButton/ConfirmButton.tsx"],"sourcesContent":["import { cx, css } from '@emotion/css';\nimport { ReactElement, useEffect, useRef, useState } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Trans } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { ComponentSize } from '../../types/size';\nimport { Button, ButtonVariant } from '../Button/Button';\n\nexport interface Props {\n  /** Confirm action callback */\n  onConfirm(): void;\n  children: string | ReactElement;\n  /** Custom button styles */\n  className?: string;\n  /** Button size */\n  size?: ComponentSize;\n  /** Text for the Confirm button */\n  confirmText?: string;\n  /** Disable button click action */\n  disabled?: boolean;\n  /** Variant of the Confirm button */\n  confirmVariant?: ButtonVariant;\n  /** Hide confirm actions when after of them is clicked */\n  closeOnConfirm?: boolean;\n  /** Optional on click handler for the original button */\n  onClick?(): void;\n  /** Callback for the cancel action */\n  onCancel?(): void;\n}\n\n/**\n * The ConfirmButton is an interactive component that adds a double-confirm option to a clickable action. When clicked, the action is replaced by an inline confirmation with the option to cancel. In Grafana, this is used, for example, for editing values in settings tables.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-confirmbutton--docs\n */\nexport const ConfirmButton = ({\n  children,\n  className,\n  closeOnConfirm,\n  confirmText = 'Save',\n  confirmVariant = 'primary',\n  disabled = false,\n  onCancel,\n  onClick,\n  onConfirm,\n  size = 'md',\n}: Props) => {\n  const mainButtonRef = useRef<HTMLButtonElement>(null);\n  const confirmButtonRef = useRef<HTMLButtonElement>(null);\n  const [showConfirm, setShowConfirm] = useState(false);\n  const [shouldRestoreFocus, setShouldRestoreFocus] = useState(false);\n  const styles = useStyles2(getStyles);\n\n  useEffect(() => {\n    if (showConfirm) {\n      confirmButtonRef.current?.focus();\n      setShouldRestoreFocus(true);\n    } else {\n      if (shouldRestoreFocus) {\n        mainButtonRef.current?.focus();\n        setShouldRestoreFocus(false);\n      }\n    }\n  }, [shouldRestoreFocus, showConfirm]);\n\n  const onClickButton = (event: React.MouseEvent<HTMLButtonElement>) => {\n    if (event) {\n      event.preventDefault();\n    }\n\n    setShowConfirm(true);\n    onClick?.();\n  };\n\n  const onClickCancel = (event: React.MouseEvent<HTMLButtonElement>) => {\n    if (event) {\n      event.preventDefault();\n    }\n    setShowConfirm(false);\n    mainButtonRef.current?.focus();\n    onCancel?.();\n  };\n\n  const onClickConfirm = (event: React.MouseEvent<HTMLButtonElement>) => {\n    if (event) {\n      event.preventDefault();\n    }\n    onConfirm?.();\n    if (closeOnConfirm) {\n      setShowConfirm(false);\n    }\n  };\n\n  const buttonClass = cx(className, styles.mainButton, {\n    [styles.mainButtonHide]: showConfirm,\n  });\n  const confirmButtonClass = cx(styles.confirmButton, {\n    [styles.confirmButtonHide]: !showConfirm,\n  });\n  const confirmButtonContainerClass = cx(styles.confirmButtonContainer, {\n    [styles.confirmButtonContainerHide]: !showConfirm,\n  });\n\n  return (\n    <div className={styles.container}>\n      <span className={buttonClass}>\n        {typeof children === 'string' ? (\n          <Button disabled={disabled} size={size} fill=\"text\" onClick={onClickButton} ref={mainButtonRef}>\n            {children}\n          </Button>\n        ) : (\n          React.cloneElement(children, { disabled, onClick: onClickButton, ref: mainButtonRef })\n        )}\n      </span>\n      <div className={confirmButtonContainerClass}>\n        <span className={confirmButtonClass}>\n          <Button size={size} variant={confirmVariant} onClick={onClickConfirm} ref={confirmButtonRef}>\n            {confirmText}\n          </Button>\n          <Button size={size} fill=\"text\" onClick={onClickCancel}>\n            <Trans i18nKey=\"grafana-ui.confirm-button.cancel\">Cancel</Trans>\n          </Button>\n        </span>\n      </div>\n    </div>\n  );\n};\nConfirmButton.displayName = 'ConfirmButton';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    container: css({\n      alignItems: 'center',\n      display: 'flex',\n      justifyContent: 'flex-end',\n      position: 'relative',\n    }),\n    mainButton: css({\n      opacity: 1,\n      [theme.transitions.handleMotion('no-preference')]: {\n        transition: theme.transitions.create(['opacity'], {\n          duration: theme.transitions.duration.shortest,\n          easing: theme.transitions.easing.easeOut,\n        }),\n      },\n      zIndex: 2,\n    }),\n    mainButtonHide: css({\n      opacity: 0,\n      [theme.transitions.handleMotion('no-preference')]: {\n        transition: theme.transitions.create(['opacity', 'visibility'], {\n          duration: theme.transitions.duration.shortest,\n          easing: theme.transitions.easing.easeIn,\n        }),\n      },\n      visibility: 'hidden',\n      zIndex: 0,\n    }),\n    confirmButtonContainer: css({\n      overflow: 'visible',\n      position: 'absolute',\n      pointerEvents: 'all',\n      right: 0,\n    }),\n    confirmButtonContainerHide: css({\n      overflow: 'hidden',\n      pointerEvents: 'none',\n    }),\n    confirmButton: css({\n      alignItems: 'flex-start',\n      background: theme.colors.background.primary,\n      display: 'flex',\n      opacity: 1,\n      transform: 'translateX(0)',\n      [theme.transitions.handleMotion('no-preference')]: {\n        transition: theme.transitions.create(['opacity', 'transform'], {\n          duration: theme.transitions.duration.shortest,\n          easing: theme.transitions.easing.easeOut,\n        }),\n      },\n      zIndex: 1,\n    }),\n    confirmButtonHide: css({\n      opacity: 0,\n      transform: 'translateX(100%)',\n      [theme.transitions.handleMotion('no-preference')]: {\n        transition: theme.transitions.create(['opacity', 'transform', 'visibility'], {\n          duration: theme.transitions.duration.shortest,\n          easing: theme.transitions.easing.easeIn,\n        }),\n      },\n      visibility: 'hidden',\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}