sortableWidget.tsx 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. import {ComponentProps} from 'react';
  2. import styled from '@emotion/styled';
  3. import PanelAlert from 'sentry/components/panels/panelAlert';
  4. import WidgetCard from 'sentry/views/dashboards/widgetCard';
  5. import {DashboardFilters, Widget} from './types';
  6. const TABLE_ITEM_LIMIT = 20;
  7. type Props = {
  8. index: string;
  9. isEditing: boolean;
  10. onDelete: () => void;
  11. onDuplicate: () => void;
  12. onEdit: () => void;
  13. widget: Widget;
  14. widgetLimitReached: boolean;
  15. dashboardFilters?: DashboardFilters;
  16. isMobile?: boolean;
  17. isPreview?: boolean;
  18. windowWidth?: number;
  19. };
  20. function SortableWidget(props: Props) {
  21. const {
  22. widget,
  23. isEditing,
  24. widgetLimitReached,
  25. onDelete,
  26. onEdit,
  27. onDuplicate,
  28. isPreview,
  29. isMobile,
  30. windowWidth,
  31. index,
  32. dashboardFilters,
  33. } = props;
  34. const widgetProps: ComponentProps<typeof WidgetCard> = {
  35. widget,
  36. isEditing,
  37. widgetLimitReached,
  38. onDelete,
  39. onEdit,
  40. onDuplicate,
  41. showContextMenu: true,
  42. isPreview,
  43. index,
  44. dashboardFilters,
  45. renderErrorMessage: errorMessage => {
  46. return (
  47. typeof errorMessage === 'string' && (
  48. <PanelAlert type="error">{errorMessage}</PanelAlert>
  49. )
  50. );
  51. },
  52. isMobile,
  53. windowWidth,
  54. tableItemLimit: TABLE_ITEM_LIMIT,
  55. };
  56. return (
  57. <GridWidgetWrapper>
  58. <WidgetCard {...widgetProps} />
  59. </GridWidgetWrapper>
  60. );
  61. }
  62. export default SortableWidget;
  63. const GridWidgetWrapper = styled('div')`
  64. height: 100%;
  65. `;