addWidget.tsx 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. import {useSortable} from '@dnd-kit/sortable';
  2. import styled from '@emotion/styled';
  3. import {Button} from 'sentry/components/button';
  4. import {IconAdd} from 'sentry/icons';
  5. import {t} from 'sentry/locale';
  6. import {DisplayType} from './types';
  7. import WidgetWrapper from './widgetWrapper';
  8. export const ADD_WIDGET_BUTTON_DRAG_ID = 'add-widget-button';
  9. const initialStyles = {
  10. x: 0,
  11. y: 0,
  12. scaleX: 1,
  13. scaleY: 1,
  14. };
  15. type Props = {
  16. onAddWidget: () => void;
  17. };
  18. function AddWidget({onAddWidget}: Props) {
  19. const {setNodeRef, transform} = useSortable({
  20. disabled: true,
  21. id: ADD_WIDGET_BUTTON_DRAG_ID,
  22. transition: null,
  23. });
  24. return (
  25. <WidgetWrapper
  26. key="add"
  27. ref={setNodeRef}
  28. displayType={DisplayType.BIG_NUMBER}
  29. layoutId={ADD_WIDGET_BUTTON_DRAG_ID}
  30. style={{originX: 0, originY: 0}}
  31. animate={
  32. transform
  33. ? {
  34. x: transform.x,
  35. y: transform.y,
  36. scaleX: transform?.scaleX && transform.scaleX <= 1 ? transform.scaleX : 1,
  37. scaleY: transform?.scaleY && transform.scaleY <= 1 ? transform.scaleY : 1,
  38. }
  39. : initialStyles
  40. }
  41. transition={{
  42. duration: 0.25,
  43. }}
  44. >
  45. <InnerWrapper onClick={onAddWidget}>
  46. <AddButton
  47. data-test-id="widget-add"
  48. icon={<IconAdd size="lg" isCircled color="inactive" />}
  49. aria-label={t('Add widget')}
  50. />
  51. </InnerWrapper>
  52. </WidgetWrapper>
  53. );
  54. }
  55. export default AddWidget;
  56. const AddButton = styled(Button)`
  57. border: none;
  58. &,
  59. &:focus,
  60. &:active,
  61. &:hover {
  62. background: transparent;
  63. box-shadow: none;
  64. }
  65. `;
  66. const InnerWrapper = styled('div')<{onClick?: () => void}>`
  67. width: 100%;
  68. height: 110px;
  69. border: 2px dashed ${p => p.theme.border};
  70. border-radius: ${p => p.theme.borderRadius};
  71. display: flex;
  72. align-items: center;
  73. justify-content: center;
  74. cursor: ${p => (p.onClick ? 'pointer' : '')};
  75. `;