menuItemActionLink.tsx 831 B

123456789101112131415161718192021222324252627282930313233
  1. import * as React from 'react';
  2. import styled from '@emotion/styled';
  3. import ActionLink from 'app/components/actions/actionLink';
  4. import MenuItem from 'app/components/menuItem';
  5. import overflowEllipsis from 'app/styles/overflowEllipsis';
  6. function MenuItemActionLink({
  7. className,
  8. ...props
  9. }: React.ComponentProps<typeof ActionLink>) {
  10. return (
  11. <MenuItem noAnchor withBorder disabled={props.disabled} className={className}>
  12. <InnerActionLink {...props} />
  13. </MenuItem>
  14. );
  15. }
  16. const InnerActionLink = styled(ActionLink)`
  17. color: ${p => p.theme.textColor};
  18. ${overflowEllipsis}
  19. &:hover {
  20. color: ${p => p.theme.textColor};
  21. }
  22. .dropdown-menu > li > &,
  23. .dropdown-menu > span > li > & {
  24. &.disabled:hover {
  25. background: ${p => p.theme.background};
  26. }
  27. }
  28. `;
  29. export default MenuItemActionLink;