diff --git a/src/actions/editDashboard.js b/src/actions/editDashboard.js index ea16b806a..593795b1b 100644 --- a/src/actions/editDashboard.js +++ b/src/actions/editDashboard.js @@ -14,7 +14,10 @@ import { import { sGetEditDashboardRoot } from '../reducers/editDashboard'; import { updateDashboard, postDashboard } from '../api/editDashboard'; import { tSetSelectedDashboardById } from '../actions/selected'; -import { NEW_ITEM_SHAPE } from '../components/ItemGrid/gridUtil'; +import { + NEW_ITEM_SHAPE, + getGridItemProperties, +} from '../components/ItemGrid/gridUtil'; import { itemTypeMap } from '../modules/itemTypes'; import { convertUiItemsToBackend } from '../modules/uiBackendItemConverter'; @@ -65,13 +68,17 @@ export const acAddDashboardItem = item => { delete item.type; const itemPropName = itemTypeMap[type].propName; + const id = generateUid(); + const gridItemProperties = getGridItemProperties(id); + return { type: ADD_DASHBOARD_ITEM, value: { - id: generateUid(), + id, type, [itemPropName]: item.content, ...NEW_ITEM_SHAPE, + ...gridItemProperties, }, }; }; diff --git a/src/components/ItemGrid/ItemGrid.js b/src/components/ItemGrid/ItemGrid.js index 0f1fd56e3..b7b6fc113 100644 --- a/src/components/ItemGrid/ItemGrid.js +++ b/src/components/ItemGrid/ItemGrid.js @@ -1,7 +1,6 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; -import memoize from 'lodash/memoize'; import i18n from '@dhis2/d2-i18n'; import ReactGridLayout from 'react-grid-layout'; import { CircularLoader, ScreenCover } from '@dhis2/ui-core'; @@ -16,7 +15,6 @@ import { isVisualizationType } from '../../modules/itemTypes'; import { GRID_ROW_HEIGHT, GRID_COMPACT_TYPE, - ITEM_MIN_HEIGHT, MARGIN, getGridColumns, hasShape, @@ -52,12 +50,6 @@ export class ItemGrid extends Component { expandedItems: {}, }; - constructor(props) { - super(props); - - this.getMemoizedItem = memoize(this.getItem); - } - onToggleItemExpanded = clickedId => { const isExpanded = typeof this.state.expandedItems[clickedId] === 'boolean' @@ -100,24 +92,18 @@ export class ItemGrid extends Component { onRemoveItemWrapper = id => () => this.onRemoveItem(id); - getItem = dashboardItem => { + adjustHeightForExpanded = dashboardItem => { const expandedItem = this.state.expandedItems[dashboardItem.id]; - const hProp = { h: dashboardItem.h }; if (expandedItem && expandedItem === true) { - hProp.h = dashboardItem.h + EXPANDED_HEIGHT; + return Object.assign({}, dashboardItem, { + h: dashboardItem.h + EXPANDED_HEIGHT, + }); } - return Object.assign({}, dashboardItem, hProp, { - i: dashboardItem.id, - minH: ITEM_MIN_HEIGHT, - randomNumber: Math.random(), - }); + return dashboardItem; }; - getItems = dashboardItems => - dashboardItems.map(item => this.getMemoizedItem(item)); - getItemComponent = item => { const itemClassNames = [ item.type, @@ -152,8 +138,8 @@ export class ItemGrid extends Component { } const items = edit - ? this.getItems(dashboardItems) - : dashboardItems.map(this.getItem); + ? dashboardItems + : dashboardItems.map(this.adjustHeightForExpanded); return (