menu.tsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503
  1. import {useCallback} from 'react';
  2. import styled from '@emotion/styled';
  3. import memoize from 'lodash/memoize';
  4. import AutoComplete from 'sentry/components/autoComplete';
  5. import DropdownBubble from 'sentry/components/dropdownBubble';
  6. import Input from 'sentry/components/input';
  7. import LoadingIndicator from 'sentry/components/loadingIndicator';
  8. import {t} from 'sentry/locale';
  9. import space from 'sentry/styles/space';
  10. import defaultAutoCompleteFilter from './autoCompleteFilter';
  11. import List from './list';
  12. import {Item, ItemsBeforeFilter} from './types';
  13. type AutoCompleteChildrenArgs = Parameters<AutoComplete<Item>['props']['children']>[0];
  14. type Actions = AutoCompleteChildrenArgs['actions'];
  15. export type MenuFooterChildProps = {
  16. actions: Actions;
  17. };
  18. type ListProps = React.ComponentProps<typeof List>;
  19. type Props = {
  20. children: (
  21. args: Pick<
  22. AutoCompleteChildrenArgs,
  23. 'getInputProps' | 'getActorProps' | 'actions' | 'isOpen' | 'selectedItem'
  24. >
  25. ) => React.ReactNode;
  26. /** null items indicates loading */
  27. items: ItemsBeforeFilter | null;
  28. /**
  29. * Dropdown menu alignment.
  30. */
  31. alignMenu?: 'left' | 'right';
  32. /**
  33. * Optionally provide a custom implementation for filtering result items
  34. * Useful if you want to show items that don't strictly match the input value
  35. */
  36. autoCompleteFilter?: typeof defaultAutoCompleteFilter;
  37. /**
  38. * Should menu visually lock to a direction (so we don't display a rounded corner)
  39. */
  40. blendCorner?: boolean;
  41. /**
  42. * Show loading indicator next to input and "Searching..." text in the list
  43. */
  44. busy?: boolean;
  45. /**
  46. * Show loading indicator next to input but don't hide list items
  47. */
  48. busyItemsStillVisible?: boolean;
  49. /**
  50. * for passing styles to the DropdownBubble
  51. */
  52. className?: string;
  53. /**
  54. * AutoComplete prop
  55. */
  56. closeOnSelect?: boolean;
  57. css?: any;
  58. 'data-test-id'?: string;
  59. /**
  60. * If true, the menu will be visually detached from actor.
  61. */
  62. detached?: boolean;
  63. /**
  64. * Disables padding for the label.
  65. */
  66. disableLabelPadding?: boolean;
  67. /**
  68. * passed down to the AutoComplete Component
  69. */
  70. disabled?: boolean;
  71. /**
  72. * Hide's the input when there are no items. Avoid using this when querying
  73. * results in an async fashion.
  74. */
  75. emptyHidesInput?: boolean;
  76. /**
  77. * Message to display when there are no items initially
  78. */
  79. emptyMessage?: React.ReactNode;
  80. /**
  81. * If this is undefined, autocomplete filter will use this value instead of the
  82. * current value in the filter input element.
  83. *
  84. * This is useful if you need to strip characters out of the search
  85. */
  86. filterValue?: string;
  87. /**
  88. * Hides the default filter input
  89. */
  90. hideInput?: boolean;
  91. /**
  92. * renderProp for the end (right side) of the search input
  93. */
  94. inputActions?: React.ReactElement;
  95. /**
  96. * Props to pass to input/filter component
  97. */
  98. inputProps?: {style: React.CSSProperties};
  99. /**
  100. * Used to control the input value (optional)
  101. */
  102. inputValue?: string;
  103. /**
  104. * Used to control dropdown state (optional)
  105. */
  106. isOpen?: boolean;
  107. /**
  108. * Max height of dropdown menu. Units are assumed as `px`
  109. */
  110. maxHeight?: ListProps['maxHeight'];
  111. menuFooter?:
  112. | React.ReactElement
  113. | ((props: MenuFooterChildProps) => React.ReactElement | null);
  114. menuHeader?: React.ReactElement;
  115. /**
  116. * Props to pass to menu component
  117. */
  118. menuProps?: Parameters<AutoCompleteChildrenArgs['getMenuProps']>[0];
  119. /**
  120. * Minimum menu width, defaults to 250
  121. */
  122. minWidth?: number;
  123. /**
  124. * Message to display when there are no items that match the search
  125. */
  126. noResultsMessage?: React.ReactNode;
  127. /**
  128. * When AutoComplete input changes
  129. */
  130. onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
  131. /**
  132. * Callback for when dropdown menu closes
  133. */
  134. onClose?: () => void;
  135. /**
  136. * Callback for when the input value changes
  137. */
  138. onInputValueChange?: (value: string) => void;
  139. /**
  140. * Callback for when dropdown menu opens
  141. */
  142. onOpen?: (event?: React.MouseEvent) => void;
  143. /**
  144. * When an item is selected (via clicking dropdown, or keyboard navigation)
  145. */
  146. onSelect?: (
  147. item: Item,
  148. state?: AutoComplete<Item>['state'],
  149. e?: React.MouseEvent | React.KeyboardEvent
  150. ) => void;
  151. /**
  152. * for passing simple styles to the root container
  153. */
  154. rootClassName?: string;
  155. /**
  156. * Search input's placeholder text
  157. */
  158. searchPlaceholder?: string;
  159. /**
  160. * the styles are forward to the Autocomplete's getMenuProps func
  161. */
  162. style?: React.CSSProperties;
  163. /**
  164. * Optional element to be rendered on the right side of the dropdown menu
  165. */
  166. subPanel?: React.ReactNode;
  167. } & Pick<
  168. ListProps,
  169. 'virtualizedHeight' | 'virtualizedLabelHeight' | 'itemSize' | 'onScroll'
  170. >;
  171. function Menu({
  172. autoCompleteFilter = defaultAutoCompleteFilter,
  173. maxHeight = 300,
  174. emptyMessage = t('No items'),
  175. searchPlaceholder = t('Filter search'),
  176. blendCorner = true,
  177. detached = false,
  178. alignMenu = 'left',
  179. minWidth = 250,
  180. hideInput = false,
  181. disableLabelPadding = false,
  182. busy = false,
  183. busyItemsStillVisible = false,
  184. disabled = false,
  185. subPanel = null,
  186. itemSize,
  187. virtualizedHeight,
  188. virtualizedLabelHeight,
  189. menuProps,
  190. noResultsMessage,
  191. inputProps,
  192. children,
  193. rootClassName,
  194. className,
  195. emptyHidesInput,
  196. menuHeader,
  197. filterValue,
  198. items,
  199. menuFooter,
  200. style,
  201. onScroll,
  202. inputActions,
  203. onChange,
  204. onSelect,
  205. onOpen,
  206. onClose,
  207. css,
  208. closeOnSelect,
  209. 'data-test-id': dataTestId,
  210. ...props
  211. }: Props) {
  212. // Can't search if there are no items
  213. const hasItems = !!items?.length;
  214. // Items are loading if null
  215. const itemsLoading = items === null;
  216. // Hide the input when we have no items to filter, only if
  217. // emptyHidesInput is set to true.
  218. const showInput = !hideInput && (hasItems || !emptyHidesInput);
  219. // Only redefine the autocomplete function if our items list has changed.
  220. // This avoids producing a new array on every call.
  221. const stableItemFilter = useCallback(
  222. (filterValueOrInput: string) => autoCompleteFilter(items, filterValueOrInput),
  223. [autoCompleteFilter, items]
  224. );
  225. // Memoize the filterValueOrInput to the stableItemFilter so that we get the
  226. // same list every time when the filter value doesn't change.
  227. const getFilteredItems = memoize(stableItemFilter);
  228. return (
  229. <AutoComplete
  230. onSelect={onSelect}
  231. inputIsActor={false}
  232. onOpen={onOpen}
  233. onClose={onClose}
  234. disabled={disabled}
  235. closeOnSelect={closeOnSelect}
  236. resetInputOnClose
  237. {...props}
  238. >
  239. {({
  240. getActorProps,
  241. getRootProps,
  242. getInputProps,
  243. getMenuProps,
  244. getItemProps,
  245. registerItemCount,
  246. registerVisibleItem,
  247. inputValue,
  248. selectedItem,
  249. highlightedIndex,
  250. isOpen,
  251. actions,
  252. }) => {
  253. // This is the value to use to filter (default to value in filter input)
  254. const filterValueOrInput = filterValue ?? inputValue;
  255. // Only filter results if menu is open and there are items. Uses
  256. // `getFilteredItems` to ensure we get a stable items list back.
  257. const autoCompleteResults =
  258. isOpen && hasItems ? getFilteredItems(filterValueOrInput) : [];
  259. // Has filtered results
  260. const hasResults = !!autoCompleteResults.length;
  261. // No items to display
  262. const showNoItems = !busy && !filterValueOrInput && !hasItems;
  263. // Results mean there was an attempt to search
  264. const showNoResultsMessage =
  265. !busy && !busyItemsStillVisible && filterValueOrInput && !hasResults;
  266. // When virtualization is turned on, we need to pass in the number of
  267. // selectable items for arrow-key limits
  268. const itemCount = virtualizedHeight
  269. ? autoCompleteResults.filter(i => !i.groupLabel).length
  270. : undefined;
  271. const renderedFooter =
  272. typeof menuFooter === 'function' ? menuFooter({actions}) : menuFooter;
  273. // XXX(epurkhiser): Would be better if this happened in a useEffect,
  274. // but hooks do not work inside render-prop callbacks.
  275. registerItemCount(itemCount);
  276. return (
  277. <AutoCompleteRoot
  278. {...getRootProps()}
  279. className={rootClassName}
  280. disabled={disabled}
  281. data-is-open={isOpen}
  282. data-test-id={dataTestId}
  283. >
  284. {children({
  285. getInputProps,
  286. getActorProps,
  287. actions,
  288. isOpen,
  289. selectedItem,
  290. })}
  291. {isOpen && (
  292. <StyledDropdownBubble
  293. className={className}
  294. {...getMenuProps(menuProps)}
  295. {...{style, css, blendCorner, detached, alignMenu, minWidth}}
  296. >
  297. <DropdownMainContent minWidth={minWidth}>
  298. {itemsLoading && <LoadingIndicator mini />}
  299. {showInput && (
  300. <InputWrapper>
  301. <StyledInput
  302. autoFocus
  303. placeholder={searchPlaceholder}
  304. {...getInputProps({...inputProps, onChange})}
  305. />
  306. <InputLoadingWrapper>
  307. {(busy || busyItemsStillVisible) && (
  308. <LoadingIndicator size={16} mini />
  309. )}
  310. </InputLoadingWrapper>
  311. {inputActions}
  312. </InputWrapper>
  313. )}
  314. <div>
  315. {menuHeader && (
  316. <LabelWithPadding disableLabelPadding={disableLabelPadding}>
  317. {menuHeader}
  318. </LabelWithPadding>
  319. )}
  320. <ItemList data-test-id="autocomplete-list" maxHeight={maxHeight}>
  321. {showNoItems && <EmptyMessage>{emptyMessage}</EmptyMessage>}
  322. {showNoResultsMessage && (
  323. <EmptyMessage>
  324. {noResultsMessage ?? `${emptyMessage} ${t('found')}`}
  325. </EmptyMessage>
  326. )}
  327. {busy && (
  328. <BusyMessage>
  329. <EmptyMessage>{t('Searching\u2026')}</EmptyMessage>
  330. </BusyMessage>
  331. )}
  332. {!busy && (
  333. <List
  334. items={autoCompleteResults}
  335. {...{
  336. maxHeight,
  337. highlightedIndex,
  338. inputValue,
  339. onScroll,
  340. getItemProps,
  341. registerVisibleItem,
  342. virtualizedLabelHeight,
  343. virtualizedHeight,
  344. itemSize,
  345. }}
  346. />
  347. )}
  348. </ItemList>
  349. {renderedFooter && (
  350. <LabelWithPadding disableLabelPadding={disableLabelPadding}>
  351. {renderedFooter}
  352. </LabelWithPadding>
  353. )}
  354. </div>
  355. </DropdownMainContent>
  356. {subPanel}
  357. </StyledDropdownBubble>
  358. )}
  359. </AutoCompleteRoot>
  360. );
  361. }}
  362. </AutoComplete>
  363. );
  364. }
  365. export default Menu;
  366. const StyledInput = styled(Input)`
  367. flex: 1;
  368. border: 1px solid transparent;
  369. &,
  370. &:focus,
  371. &:active,
  372. &:hover {
  373. border: 0;
  374. box-shadow: none;
  375. font-size: 13px;
  376. padding: ${space(1)};
  377. font-weight: normal;
  378. color: ${p => p.theme.gray300};
  379. }
  380. `;
  381. const InputLoadingWrapper = styled('div')`
  382. display: flex;
  383. background: ${p => p.theme.background};
  384. align-items: center;
  385. flex-shrink: 0;
  386. width: 30px;
  387. .loading.mini {
  388. height: 16px;
  389. margin: 0;
  390. }
  391. `;
  392. const EmptyMessage = styled('div')`
  393. color: ${p => p.theme.gray200};
  394. padding: ${space(2)};
  395. text-align: center;
  396. text-transform: none;
  397. `;
  398. export const AutoCompleteRoot = styled('div')<{disabled?: boolean}>`
  399. position: relative;
  400. display: inline-block;
  401. ${p => p.disabled && 'pointer-events: none;'}
  402. `;
  403. const StyledDropdownBubble = styled(DropdownBubble)<{minWidth: number}>`
  404. display: flex;
  405. min-width: ${p => p.minWidth}px;
  406. ${p => p.detached && p.alignMenu === 'left' && 'right: auto;'}
  407. ${p => p.detached && p.alignMenu === 'right' && 'left: auto;'}
  408. `;
  409. const DropdownMainContent = styled('div')<{minWidth: number}>`
  410. width: 100%;
  411. min-width: ${p => p.minWidth}px;
  412. `;
  413. const InputWrapper = styled('div')`
  414. display: flex;
  415. border-bottom: 1px solid ${p => p.theme.innerBorder};
  416. border-radius: ${p => `${p.theme.borderRadius} ${p.theme.borderRadius} 0 0`};
  417. align-items: center;
  418. `;
  419. const LabelWithPadding = styled('div')<{disableLabelPadding: boolean}>`
  420. background-color: ${p => p.theme.backgroundSecondary};
  421. border-bottom: 1px solid ${p => p.theme.innerBorder};
  422. border-width: 1px 0;
  423. color: ${p => p.theme.subText};
  424. font-size: ${p => p.theme.fontSizeMedium};
  425. &:first-child {
  426. border-top: none;
  427. }
  428. &:last-child {
  429. border-bottom: none;
  430. }
  431. padding: ${p => !p.disableLabelPadding && `${space(0.25)} ${space(1)}`};
  432. `;
  433. const ItemList = styled('div')<{maxHeight: NonNullable<Props['maxHeight']>}>`
  434. max-height: ${p => `${p.maxHeight}px`};
  435. overflow-y: auto;
  436. `;
  437. const BusyMessage = styled('div')`
  438. display: flex;
  439. justify-content: center;
  440. padding: ${space(1)};
  441. `;