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 (
diff --git a/src/components/ItemGrid/gridUtil.js b/src/components/ItemGrid/gridUtil.js index 1d807839c..9f72a140f 100644 --- a/src/components/ItemGrid/gridUtil.js +++ b/src/components/ItemGrid/gridUtil.js @@ -11,7 +11,6 @@ const GRID_LAYOUT = 'FLEXIBLE'; // FIXED | FLEXIBLE export const MARGIN = [10, 10]; export const NEW_ITEM_SHAPE = { x: 0, y: 0, w: 20, h: 29 }; -export const ITEM_MIN_HEIGHT = 4; // Dimensions for getShape @@ -61,6 +60,13 @@ export const getShape = i => { }; }; +export const getGridItemProperties = itemId => { + return { + i: itemId, + minH: 4, // minimum height for item + }; +}; + /** * Calculates the grid item's original height in pixels based * on the height in grid units. This calculation diff --git a/src/modules/uiBackendItemConverter.js b/src/modules/uiBackendItemConverter.js index 5020f4fa9..f9f342ca4 100644 --- a/src/modules/uiBackendItemConverter.js +++ b/src/modules/uiBackendItemConverter.js @@ -1,4 +1,5 @@ import { TEXT, SPACER } from './itemTypes'; +import { getGridItemProperties } from '../components/ItemGrid/gridUtil'; export const spacerContent = 'SPACER_ITEM_FOR_DASHBOARD_LAYOUT_CONVENIENCE'; export const emptyTextItemContent = 'TEXT_ITEM_WITH_NO_CONTENT'; @@ -26,6 +27,7 @@ export const convertUiItemsToBackend = items => export const convertBackendItemsToUi = items => items.map(item => { const type = isBackendSpacerType(item) ? SPACER : item.type; + const gridProperties = getGridItemProperties(item.id); const text = isTextType(item) ? item.text === emptyTextItemContent @@ -37,5 +39,6 @@ export const convertBackendItemsToUi = items => ...item, ...(text !== null ? { text } : {}), type, + ...gridProperties, }; }); diff --git a/src/reducers/editDashboard.js b/src/reducers/editDashboard.js index 942b4326f..8d135325e 100644 --- a/src/reducers/editDashboard.js +++ b/src/reducers/editDashboard.js @@ -103,7 +103,13 @@ export default (state = DEFAULT_STATE_EDIT_DASHBOARD, action) => { if (dashboardItemIndex > -1) { const newState = update(state, { dashboardItems: { - $splice: [[dashboardItemIndex, 1, dashboardItem]], + $splice: [ + [ + dashboardItemIndex, + 1, + Object.assign({}, dashboardItem), + ], + ], }, });