menuItem.tsx 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  1. import * as React from 'react';
  2. import styled from '@emotion/styled';
  3. import omit from 'lodash/omit';
  4. import Link from 'app/components/links/link';
  5. import space from 'app/styles/space';
  6. import {callIfFunction} from 'app/utils/callIfFunction';
  7. import {Theme} from 'app/utils/theme';
  8. type MenuItemProps = {
  9. /**
  10. * Should this item act as a header
  11. */
  12. header?: boolean;
  13. /**
  14. * Renders a bottom border (excludes the last item)
  15. */
  16. withBorder?: boolean;
  17. /**
  18. * Renders an icon next to the item
  19. */
  20. icon?: React.ReactNode;
  21. /**
  22. * Should this item act as a divider
  23. */
  24. divider?: boolean;
  25. /**
  26. * The title/tooltipe of the item
  27. */
  28. title?: string;
  29. /**
  30. * Is the item disabled?
  31. */
  32. disabled?: boolean;
  33. /**
  34. * Triggered when the item is clicked
  35. */
  36. onSelect?: (eventKey: any) => void;
  37. /**
  38. * Provided to the onSelect callback when this item is selected
  39. */
  40. eventKey?: any;
  41. /**
  42. * Is the item actively seleted?
  43. */
  44. isActive?: boolean;
  45. /**
  46. * Enable to provide custom button/contents via children
  47. */
  48. noAnchor?: boolean;
  49. /**
  50. * A router target destination
  51. */
  52. to?: React.ComponentProps<typeof Link>['to'];
  53. /**
  54. * A server rendered URL.
  55. */
  56. href?: string;
  57. /**
  58. * Enable to allow default event on click
  59. */
  60. allowDefaultEvent?: boolean;
  61. /**
  62. * Enable to stop event propagation on click
  63. */
  64. stopPropagation?: boolean;
  65. className?: string;
  66. };
  67. type Props = MenuItemProps & Omit<React.HTMLProps<HTMLLIElement>, keyof MenuItemProps>;
  68. const MenuItem = ({
  69. header,
  70. icon,
  71. divider,
  72. isActive,
  73. noAnchor,
  74. className,
  75. children,
  76. ...props
  77. }: Props) => {
  78. const {
  79. to,
  80. href,
  81. title,
  82. withBorder,
  83. disabled,
  84. onSelect,
  85. eventKey,
  86. allowDefaultEvent,
  87. stopPropagation,
  88. } = props;
  89. const handleClick = (e: React.MouseEvent): void => {
  90. if (disabled) {
  91. return;
  92. }
  93. if (onSelect) {
  94. if (allowDefaultEvent !== true) {
  95. e.preventDefault();
  96. }
  97. if (stopPropagation) {
  98. e.stopPropagation();
  99. }
  100. callIfFunction(onSelect, eventKey);
  101. }
  102. };
  103. const renderAnchor = (): React.ReactNode => {
  104. const linkProps = {
  105. onClick: handleClick,
  106. tabIndex: -1,
  107. isActive,
  108. disabled,
  109. withBorder,
  110. };
  111. if (to) {
  112. return (
  113. <MenuLink to={to} {...linkProps} title={title}>
  114. {icon && <MenuIcon>{icon}</MenuIcon>}
  115. {children}
  116. </MenuLink>
  117. );
  118. }
  119. if (href) {
  120. return (
  121. <MenuAnchor {...linkProps} href={href}>
  122. {icon && <MenuIcon>{icon}</MenuIcon>}
  123. {children}
  124. </MenuAnchor>
  125. );
  126. }
  127. return (
  128. <MenuTarget role="button" {...linkProps} title={title}>
  129. {icon && <MenuIcon>{icon}</MenuIcon>}
  130. {children}
  131. </MenuTarget>
  132. );
  133. };
  134. let renderChildren: React.ReactNode | null = null;
  135. if (noAnchor) {
  136. renderChildren = children;
  137. } else if (header) {
  138. renderChildren = children;
  139. } else if (!divider) {
  140. renderChildren = renderAnchor();
  141. }
  142. return (
  143. <MenuListItem
  144. className={className}
  145. role="presentation"
  146. isActive={isActive}
  147. divider={divider}
  148. noAnchor={noAnchor}
  149. header={header}
  150. {...omit(props, ['href', 'title', 'onSelect', 'eventKey', 'to', 'as'])}
  151. >
  152. {renderChildren}
  153. </MenuListItem>
  154. );
  155. };
  156. type MenuListItemProps = {
  157. header?: boolean;
  158. withBorder?: boolean;
  159. noAnchor?: boolean;
  160. isActive?: boolean;
  161. disabled?: boolean;
  162. divider?: boolean;
  163. } & React.HTMLProps<HTMLLIElement>;
  164. function getListItemStyles(props: MenuListItemProps & {theme: Theme}) {
  165. const common = `
  166. display: block;
  167. padding: ${space(0.5)} ${space(2)};
  168. &:focus {
  169. outline: none;
  170. }
  171. `;
  172. if (props.disabled) {
  173. return `
  174. ${common}
  175. color: ${props.theme.disabled};
  176. background: transparent;
  177. cursor: not-allowed;
  178. `;
  179. }
  180. if (props.isActive) {
  181. return `
  182. ${common}
  183. color: ${props.theme.white};
  184. background: ${props.theme.active};
  185. &:hover {
  186. color: ${props.theme.black};
  187. }
  188. `;
  189. }
  190. return `
  191. ${common}
  192. &:hover {
  193. background: ${props.theme.focus};
  194. }
  195. `;
  196. }
  197. function getChildStyles(props: MenuListItemProps & {theme: Theme}) {
  198. if (!props.noAnchor) {
  199. return '';
  200. }
  201. return `
  202. & a {
  203. ${getListItemStyles(props)}
  204. }
  205. `;
  206. }
  207. const shouldForwardProp = (p: PropertyKey) =>
  208. typeof p === 'string' && ['isActive', 'disabled', 'withBorder'].includes(p) === false;
  209. const MenuAnchor = styled('a', {shouldForwardProp})<MenuListItemProps>`
  210. ${getListItemStyles}
  211. `;
  212. const MenuListItem = styled('li')<MenuListItemProps>`
  213. display: block;
  214. ${p =>
  215. p.withBorder &&
  216. `
  217. border-bottom: 1px solid ${p.theme.innerBorder};
  218. &:last-child {
  219. border-bottom: none;
  220. }
  221. `};
  222. ${p =>
  223. p.divider &&
  224. `
  225. height: 1px;
  226. margin: ${space(0.5)} 0;
  227. overflow: hidden;
  228. background-color: ${p.theme.innerBorder};
  229. `}
  230. ${p =>
  231. p.header &&
  232. `
  233. padding: ${space(0.25)} ${space(0.5)};
  234. font-size: ${p.theme.fontSizeSmall};
  235. line-height: 1.4;
  236. color: ${p.theme.gray300};
  237. `}
  238. ${getChildStyles}
  239. `;
  240. const MenuTarget = styled('span')<MenuListItemProps>`
  241. ${getListItemStyles}
  242. display: flex;
  243. align-items: center;
  244. `;
  245. const MenuIcon = styled('div')`
  246. display: flex;
  247. align-items: center;
  248. margin-right: ${space(1)};
  249. `;
  250. const MenuLink = styled(Link, {shouldForwardProp})<MenuListItemProps>`
  251. ${getListItemStyles}
  252. `;
  253. export default MenuItem;