All files / modules/72-templates-library/components/TemplatesActionPopover TemplatesActionPopover.tsx

100% Statements 14/14
100% Branches 2/2
100% Functions 4/4
100% Lines 13/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64              48x 48x 48x   48x 48x                             48x 85x   83x       11x                   278x         7x 7x 7x                        
/*
 * Copyright 2021 Harness Inc. All rights reserved.
 * Use of this source code is governed by the PolyForm Shield 1.0.0 license
 * that can be found in the licenses directory at the root of this repository, also available at
 * https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
 */
 
import React from 'react'
import { Menu, Position } from '@blueprintjs/core'
import { Popover, Icon, IconName, Text } from '@wings-software/uicore'
import type { PopoverProps } from '@wings-software/uicore/dist/components/Popover/Popover'
import cx from 'classnames'
import css from './TemplatesActionPopover.module.scss'
 
export interface TemplateMenuItem {
  icon?: IconName
  label: string
  disabled?: boolean
  onClick: () => void
}
 
export interface TemplatesActionPopoverProps extends PopoverProps {
  open?: boolean
  items: TemplateMenuItem[]
  setMenuOpen: (flag: boolean) => void
  className?: string
}
export const TemplatesActionPopover = (props: React.PropsWithChildren<TemplatesActionPopoverProps>) => {
  const { items, open, children, setMenuOpen, className, portalClassName, ...popoverProps } = props
 
  return (
    <Popover
      isOpen={open}
      onInteraction={nextOpenState => {
        setMenuOpen(nextOpenState)
      }}
      position={Position.BOTTOM_RIGHT}
      className={cx(css.main, className)}
      portalClassName={cx(css.popover, portalClassName)}
      {...popoverProps}
    >
      {children}
      <Menu>
        {items.map(item => {
          return (
            <li
              key={item.label}
              className={cx(css.menuItem, { [css.disabled]: item.disabled })}
              onClick={e => {
                e.stopPropagation()
                item.onClick()
                setMenuOpen(false)
              }}
            >
              {item.icon && <Icon name={item.icon} size={12} />}
              <Text lineClamp={1}>{item.label}</Text>
            </li>
          )
        })}
      </Menu>
    </Popover>
  )
}