@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\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":";;;;;;;;AAiCO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAc,GAAA,MAAA;AAAA,EACd,cAAiB,GAAA,SAAA;AAAA,EACjB,QAAW,GAAA,KAAA;AAAA,EACX,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAO,GAAA;AACT,CAAa,KAAA;AACX,EAAM,MAAA,aAAA,GAAgB,OAA0B,IAAI,CAAA;AACpD,EAAM,MAAA,gBAAA,GAAmB,OAA0B,IAAI,CAAA;AACvD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AACpD,EAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,CAAA,GAAI,SAAS,KAAK,CAAA;AAClE,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EAAA,SAAA,CAAU,MAAM;AAnDlB,IAAA,IAAA,EAAA,EAAA,EAAA;AAoDI,IAAA,IAAI,WAAa,EAAA;AACf,MAAA,CAAA,EAAA,GAAA,gBAAA,CAAiB,YAAjB,IAA0B,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AAC1B,MAAA,qBAAA,CAAsB,IAAI,CAAA;AAAA,KACrB,MAAA;AACL,MAAA,IAAI,kBAAoB,EAAA;AACtB,QAAA,CAAA,EAAA,GAAA,aAAA,CAAc,YAAd,IAAuB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AACvB,QAAA,qBAAA,CAAsB,KAAK,CAAA;AAAA;AAC7B;AACF,GACC,EAAA,CAAC,kBAAoB,EAAA,WAAW,CAAC,CAAA;AAEpC,EAAM,MAAA,aAAA,GAAgB,CAAC,KAA+C,KAAA;AACpE,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,KAAA,CAAM,cAAe,EAAA;AAAA;AAGvB,IAAA,cAAA,CAAe,IAAI,CAAA;AACnB,IAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,EAAA;AAAA,GACF;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAA+C,KAAA;AAxExE,IAAA,IAAA,EAAA;AAyEI,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,KAAA,CAAM,cAAe,EAAA;AAAA;AAEvB,IAAA,cAAA,CAAe,KAAK,CAAA;AACpB,IAAA,CAAA,EAAA,GAAA,aAAA,CAAc,YAAd,IAAuB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AACvB,IAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,EAAA;AAAA,GACF;AAEA,EAAM,MAAA,cAAA,GAAiB,CAAC,KAA+C,KAAA;AACrE,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,KAAA,CAAM,cAAe,EAAA;AAAA;AAEvB,IAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,EAAA;AACA,IAAA,IAAI,cAAgB,EAAA;AAClB,MAAA,cAAA,CAAe,KAAK,CAAA;AAAA;AACtB,GACF;AAEA,EAAA,MAAM,WAAc,GAAA,EAAA,CAAG,SAAW,EAAA,MAAA,CAAO,UAAY,EAAA;AAAA,IACnD,CAAC,MAAO,CAAA,cAAc,GAAG;AAAA,GAC1B,CAAA;AACD,EAAM,MAAA,kBAAA,GAAqB,EAAG,CAAA,MAAA,CAAO,aAAe,EAAA;AAAA,IAClD,CAAC,MAAA,CAAO,iBAAiB,GAAG,CAAC;AAAA,GAC9B,CAAA;AACD,EAAM,MAAA,2BAAA,GAA8B,EAAG,CAAA,MAAA,CAAO,sBAAwB,EAAA;AAAA,IACpE,CAAC,MAAA,CAAO,0BAA0B,GAAG,CAAC;AAAA,GACvC,CAAA;AAED,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,SACrB,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,WACd,EAAA,QAAA,EAAA,OAAO,QAAa,KAAA,QAAA,mBAClB,GAAA,CAAA,MAAA,EAAA,EAAO,QAAoB,EAAA,IAAA,EAAY,IAAK,EAAA,MAAA,EAAO,OAAS,EAAA,aAAA,EAAe,GAAK,EAAA,aAAA,EAC9E,QACH,EAAA,CAAA,GAEA,KAAM,CAAA,YAAA,CAAa,QAAU,EAAA,EAAE,QAAU,EAAA,OAAA,EAAS,aAAe,EAAA,GAAA,EAAK,aAAc,EAAC,CAEzF,EAAA,CAAA;AAAA,wBACC,KAAI,EAAA,EAAA,SAAA,EAAW,6BACd,QAAC,kBAAA,IAAA,CAAA,MAAA,EAAA,EAAK,WAAW,kBACf,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA,EAAO,MAAY,OAAS,EAAA,cAAA,EAAgB,SAAS,cAAgB,EAAA,GAAA,EAAK,kBACxE,QACH,EAAA,WAAA,EAAA,CAAA;AAAA,sBACC,GAAA,CAAA,MAAA,EAAA,EAAO,IAAY,EAAA,IAAA,EAAK,MAAO,EAAA,OAAA,EAAS,aACvC,EAAA,QAAA,kBAAA,GAAA,CAAC,KAAM,EAAA,EAAA,OAAA,EAAQ,kCAAmC,EAAA,QAAA,EAAA,QAAA,EAAM,CAC1D,EAAA;AAAA,KAAA,EACF,CACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;AACA,aAAA,CAAc,WAAc,GAAA,eAAA;AAE5B,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,WAAW,GAAI,CAAA;AAAA,MACb,UAAY,EAAA,QAAA;AAAA,MACZ,OAAS,EAAA,MAAA;AAAA,MACT,cAAgB,EAAA,UAAA;AAAA,MAChB,QAAU,EAAA;AAAA,KACX,CAAA;AAAA,IACD,YAAY,GAAI,CAAA;AAAA,MACd,OAAS,EAAA,CAAA;AAAA,MACT,CAAC,KAAM,CAAA,WAAA,CAAY,YAAa,CAAA,eAAe,CAAC,GAAG;AAAA,QACjD,YAAY,KAAM,CAAA,WAAA,CAAY,MAAO,CAAA,CAAC,SAAS,CAAG,EAAA;AAAA,UAChD,QAAA,EAAU,KAAM,CAAA,WAAA,CAAY,QAAS,CAAA,QAAA;AAAA,UACrC,MAAA,EAAQ,KAAM,CAAA,WAAA,CAAY,MAAO,CAAA;AAAA,SAClC;AAAA,OACH;AAAA,MACA,MAAQ,EAAA;AAAA,KACT,CAAA;AAAA,IACD,gBAAgB,GAAI,CAAA;AAAA,MAClB,OAAS,EAAA,CAAA;AAAA,MACT,CAAC,KAAM,CAAA,WAAA,CAAY,YAAa,CAAA,eAAe,CAAC,GAAG;AAAA,QACjD,YAAY,KAAM,CAAA,WAAA,CAAY,OAAO,CAAC,SAAA,EAAW,YAAY,CAAG,EAAA;AAAA,UAC9D,QAAA,EAAU,KAAM,CAAA,WAAA,CAAY,QAAS,CAAA,QAAA;AAAA,UACrC,MAAA,EAAQ,KAAM,CAAA,WAAA,CAAY,MAAO,CAAA;AAAA,SAClC;AAAA,OACH;AAAA,MACA,UAAY,EAAA,QAAA;AAAA,MACZ,MAAQ,EAAA;AAAA,KACT,CAAA;AAAA,IACD,wBAAwB,GAAI,CAAA;AAAA,MAC1B,QAAU,EAAA,SAAA;AAAA,MACV,QAAU,EAAA,UAAA;AAAA,MACV,aAAe,EAAA,KAAA;AAAA,MACf,KAAO,EAAA;AAAA,KACR,CAAA;AAAA,IACD,4BAA4B,GAAI,CAAA;AAAA,MAC9B,QAAU,EAAA,QAAA;AAAA,MACV,aAAe,EAAA;AAAA,KAChB,CAAA;AAAA,IACD,eAAe,GAAI,CAAA;AAAA,MACjB,UAAY,EAAA,YAAA;AAAA,MACZ,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,OAAA;AAAA,MACpC,OAAS,EAAA,MAAA;AAAA,MACT,OAAS,EAAA,CAAA;AAAA,MACT,SAAW,EAAA,eAAA;AAAA,MACX,CAAC,KAAM,CAAA,WAAA,CAAY,YAAa,CAAA,eAAe,CAAC,GAAG;AAAA,QACjD,YAAY,KAAM,CAAA,WAAA,CAAY,OAAO,CAAC,SAAA,EAAW,WAAW,CAAG,EAAA;AAAA,UAC7D,QAAA,EAAU,KAAM,CAAA,WAAA,CAAY,QAAS,CAAA,QAAA;AAAA,UACrC,MAAA,EAAQ,KAAM,CAAA,WAAA,CAAY,MAAO,CAAA;AAAA,SAClC;AAAA,OACH;AAAA,MACA,MAAQ,EAAA;AAAA,KACT,CAAA;AAAA,IACD,mBAAmB,GAAI,CAAA;AAAA,MACrB,OAAS,EAAA,CAAA;AAAA,MACT,SAAW,EAAA,kBAAA;AAAA,MACX,CAAC,KAAM,CAAA,WAAA,CAAY,YAAa,CAAA,eAAe,CAAC,GAAG;AAAA,QACjD,UAAA,EAAY,MAAM,WAAY,CAAA,MAAA,CAAO,CAAC,SAAW,EAAA,WAAA,EAAa,YAAY,CAAG,EAAA;AAAA,UAC3E,QAAA,EAAU,KAAM,CAAA,WAAA,CAAY,QAAS,CAAA,QAAA;AAAA,UACrC,MAAA,EAAQ,KAAM,CAAA,WAAA,CAAY,MAAO,CAAA;AAAA,SAClC;AAAA,OACH;AAAA,MACA,UAAY,EAAA;AAAA,KACb;AAAA,GACH;AACF,CAAA;;;;"}