infoBox.tsx 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import {Dispatch, SetStateAction, useState} from 'react';
  2. import {Manager, Reference} from 'react-popper';
  3. import styled from '@emotion/styled';
  4. import space from 'sentry/styles/space';
  5. import IconPopper from './popper';
  6. import IconSample from './sample';
  7. import {ExtendedIconData, SelectedIcon} from './searchPanel';
  8. type Props = {
  9. groupId: string;
  10. icon: ExtendedIconData;
  11. selectedIcon: SelectedIcon;
  12. setSelectedIcon: Dispatch<SetStateAction<SelectedIcon>>;
  13. };
  14. const IconInfoBox = ({icon, selectedIcon, setSelectedIcon, groupId}: Props) => {
  15. const isSelected = selectedIcon.group === groupId && selectedIcon.icon === icon.id;
  16. const [boxRef, setBoxRef] = useState(null);
  17. return (
  18. <Manager>
  19. <Reference>
  20. {({ref: popperRef}) => (
  21. <BoxWrap
  22. ref={ref => {
  23. setBoxRef(ref);
  24. popperRef(ref);
  25. }}
  26. selected={isSelected}
  27. onClick={() =>
  28. setSelectedIcon(
  29. isSelected ? {group: '', icon: ''} : {group: groupId, icon: icon.id}
  30. )
  31. }
  32. >
  33. <IconSample
  34. name={icon.name}
  35. size="sm"
  36. color="gray500"
  37. {...icon.defaultProps}
  38. />
  39. <Name>{icon.name}</Name>
  40. </BoxWrap>
  41. )}
  42. </Reference>
  43. {isSelected && (
  44. <IconPopper icon={icon} setSelectedIcon={setSelectedIcon} boxRef={boxRef} />
  45. )}
  46. </Manager>
  47. );
  48. };
  49. export default IconInfoBox;
  50. const BoxWrap = styled('div')<{selected: boolean}>`
  51. display: flex;
  52. align-items: center;
  53. gap: ${space(1)};
  54. padding: ${space(1)};
  55. border: solid 1px transparent;
  56. border-radius: ${p => p.theme.borderRadius};
  57. cursor: pointer;
  58. svg {
  59. flex-shrink: 0;
  60. width: 24px;
  61. }
  62. &:hover {
  63. border-color: ${p => p.theme.innerBorder};
  64. }
  65. ${p =>
  66. p.selected &&
  67. `
  68. border-color: ${p.theme.blue200};
  69. background: ${p.theme.blue100};
  70. &:hover {
  71. border-color: ${p.theme.blue200};
  72. }
  73. `}
  74. `;
  75. const Name = styled('p')`
  76. position: relative;
  77. line-height: 1;
  78. margin-bottom: 0;
  79. font-size: ${p => p.theme.fontSizeMedium};
  80. text-transform: capitalize;
  81. `;