diff --git a/src/components/DataDimension/Calculation/CalculationModal.js b/src/components/DataDimension/Calculation/CalculationModal.js
index 2619bcd04..df326af24 100644
--- a/src/components/DataDimension/Calculation/CalculationModal.js
+++ b/src/components/DataDimension/Calculation/CalculationModal.js
@@ -48,6 +48,7 @@ const CalculationModal = ({
onClose,
onDelete,
displayNameProp,
+ height,
}) => {
const { show: showError } = useAlert((error) => error, { critical: true })
const mutationParams = { onError: (error) => showError(error) }
@@ -311,6 +312,7 @@ const CalculationModal = ({
@@ -484,6 +486,7 @@ CalculationModal.propTypes = {
id: PropTypes.string,
name: PropTypes.string,
}),
+ height: PropTypes.string,
}
export default CalculationModal
diff --git a/src/components/DataDimension/Calculation/DataElementSelector.js b/src/components/DataDimension/Calculation/DataElementSelector.js
index 123fe20fd..36a5b4539 100644
--- a/src/components/DataDimension/Calculation/DataElementSelector.js
+++ b/src/components/DataDimension/Calculation/DataElementSelector.js
@@ -23,6 +23,8 @@ import {
import DataElementOption from './DataElementOption.js'
import styles from './styles/DataElementSelector.style.js'
+const SCROLLBOX_HEIGHT = '337px'
+
const getOptions = () => ({
[TOTALS]: i18n.t('Totals only'),
[DETAIL]: i18n.t('Details only'),
@@ -123,7 +125,11 @@ DisaggregationSelector.propTypes = {
onChange: PropTypes.func.isRequired,
}
-const DataElementSelector = ({ displayNameProp, onDoubleClick }) => {
+const DataElementSelector = ({
+ displayNameProp,
+ onDoubleClick,
+ height = SCROLLBOX_HEIGHT,
+}) => {
const dataEngine = useDataEngine()
const [searchTerm, setSearchTerm] = useState('')
@@ -271,6 +277,7 @@ const DataElementSelector = ({ displayNameProp, onDoubleClick }) => {
{
if (isSorting) {
rootRef.current.scrollTo({
@@ -319,6 +326,7 @@ const DataElementSelector = ({ displayNameProp, onDoubleClick }) => {
DataElementSelector.propTypes = {
displayNameProp: PropTypes.string.isRequired,
onDoubleClick: PropTypes.func.isRequired,
+ height: PropTypes.string,
}
export default DataElementSelector
diff --git a/src/components/DataDimension/Calculation/styles/DataElementSelector.style.js b/src/components/DataDimension/Calculation/styles/DataElementSelector.style.js
index f3f5211bd..55cc1f03b 100644
--- a/src/components/DataDimension/Calculation/styles/DataElementSelector.style.js
+++ b/src/components/DataDimension/Calculation/styles/DataElementSelector.style.js
@@ -9,7 +9,6 @@ export default css`
.dimension-list-scrollbox {
position: relative;
width: 100%;
- height: 337px;
overflow: hidden;
overflow-y: auto;
border: 1px solid ${colors.grey400};
diff --git a/src/components/DataDimension/DataDimension.js b/src/components/DataDimension/DataDimension.js
index 61b372a14..c7b38d011 100644
--- a/src/components/DataDimension/DataDimension.js
+++ b/src/components/DataDimension/DataDimension.js
@@ -31,6 +31,9 @@ const DataDimension = ({
infoBoxMessage,
onCalculationSave,
visType,
+ height,
+ heightCalculation,
+ maxSelections,
}) => {
const { serverVersion } = useConfig()
@@ -130,6 +133,9 @@ const DataDimension = ({
infoDataItem={infoDataItem}
setInfoDataItem={setInfoDataItem}
onEditClick={onEditClick}
+ height={height}
+ heightCalculation={heightCalculation}
+ maxSelections={maxSelections}
/>
{currentDataItem && (
setCurrentDataItem()}
onEditClick={onEditClick}
+ height={height}
+ maxSelections={maxSelections}
/>
)}
{infoDataItem && (
@@ -172,7 +180,10 @@ DataDimension.propTypes = {
onSelect: PropTypes.func.isRequired,
currentUser: PropTypes.object,
enabledDataTypes: PropTypes.array,
+ height: PropTypes.string,
+ heightCalculation: PropTypes.string,
infoBoxMessage: PropTypes.string,
+ maxSelections: PropTypes.number,
visType: PropTypes.string,
onCalculationSave: PropTypes.func,
}
diff --git a/src/components/DataDimension/ItemOptionsSelector/ItemOptionsSelector.js b/src/components/DataDimension/ItemOptionsSelector/ItemOptionsSelector.js
index 6094025ce..87e57a193 100644
--- a/src/components/DataDimension/ItemOptionsSelector/ItemOptionsSelector.js
+++ b/src/components/DataDimension/ItemOptionsSelector/ItemOptionsSelector.js
@@ -54,6 +54,8 @@ export const ItemOptionsSelector = ({
onSelect,
onClose,
dataTest,
+ height = TRANSFER_HEIGHT,
+ maxSelections,
}) => {
const [state, setState] = useState({
searchTerm: '',
@@ -235,8 +237,8 @@ export const ItemOptionsSelector = ({
rightHeader={
{i18n.t('Selected items')}
}
- enableOrderChange
- height={TRANSFER_HEIGHT}
+ enableOrderChange={!maxSelections || maxSelections > 1}
+ height={height}
optionsWidth={TRANSFER_OPTIONS_WIDTH}
selectedWidth={TRANSFER_SELECTED_WIDTH}
selectedEmptyComponent={}
@@ -266,6 +268,7 @@ export const ItemOptionsSelector = ({
/>
)
}}
+ maxSelections={maxSelections}
dataTest={`${dataTest}-option-view-mode-transfer`}
/>
@@ -282,8 +285,10 @@ ItemOptionsSelector.propTypes = {
onClose: PropTypes.func.isRequired,
onSelect: PropTypes.func.isRequired,
dataTest: PropTypes.string,
+ height: PropTypes.string,
infoDataItem: PropTypes.object,
itemsRef: PropTypes.object,
+ maxSelections: PropTypes.number,
selectedItems: PropTypes.arrayOf(
PropTypes.exact({
label: PropTypes.string.isRequired,
diff --git a/src/components/DataDimension/ItemSelector/ItemSelector.js b/src/components/DataDimension/ItemSelector/ItemSelector.js
index bf450c92b..a4bbb0c74 100644
--- a/src/components/DataDimension/ItemSelector/ItemSelector.js
+++ b/src/components/DataDimension/ItemSelector/ItemSelector.js
@@ -136,6 +136,9 @@ const ItemSelector = ({
onEditClick,
isOptionViewMode,
supportsEDI,
+ height = TRANSFER_HEIGHT,
+ heightCalculation,
+ maxSelections,
}) => {
const [state, setState] = useState({
searchTerm: '',
@@ -411,8 +414,8 @@ const ItemSelector = ({
) : undefined
}
- enableOrderChange
- height={TRANSFER_HEIGHT}
+ enableOrderChange={!maxSelections || maxSelections > 1}
+ height={height}
optionsWidth={TRANSFER_OPTIONS_WIDTH}
selectedWidth={TRANSFER_SELECTED_WIDTH}
selectedEmptyComponent={}
@@ -442,6 +445,7 @@ const ItemSelector = ({
/* eslint-enable react/prop-types */
/>
)}
+ maxSelections={maxSelections}
dataTest={`${dataTest}-transfer`}
/>
{currentCalculation && supportsEDI && (
@@ -451,6 +455,7 @@ const ItemSelector = ({
onClose={() => setCurrentCalculation()}
onDelete={onDeleteCalculation}
displayNameProp={displayNameProp}
+ height={heightCalculation}
/>
)}
@@ -464,10 +469,13 @@ ItemSelector.propTypes = {
currentCalculation: PropTypes.object,
dataTest: PropTypes.string,
dataTypes: PropTypes.array,
+ height: PropTypes.string,
+ heightCalculation: PropTypes.string,
infoBoxMessage: PropTypes.string,
infoDataItem: PropTypes.object,
isOptionViewMode: PropTypes.bool,
itemsRef: PropTypes.object,
+ maxSelections: PropTypes.number,
noItemsMessage: PropTypes.string,
rightFooter: PropTypes.node,
selectedItems: PropTypes.arrayOf(