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(