feat: add height property to CalculationModal

Author: BRaimbault

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 = ({
                                 <DataElementSelector
                                     displayNameProp={displayNameProp}
                                     onDoubleClick={addItem}
+                                    height={height}
                                 />
                                 <MathOperatorSelector onDoubleClick={addItem} />
                             </div>
@@ -484,6 +486,7 @@ CalculationModal.propTypes = {
         id: PropTypes.string,
         name: PropTypes.string,
     }),
+    height: PropTypes.string,
 }
 
 export default CalculationModal

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 = 337
+
 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 }) => {
                 <div
                     className="dimension-list-scrollbox"
                     ref={rootRef}
+                    style={{ height }}
                     onScroll={() => {
                         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

src/components/DataDimension/ItemSelector/ItemSelector.js

@@ -137,6 +137,7 @@ const ItemSelector = ({
     isOptionViewMode,
     supportsEDI,
     height = TRANSFER_HEIGHT,
+    heightCalculation,
 }) => {
     const [state, setState] = useState({
         searchTerm: '',
@@ -452,6 +453,7 @@ const ItemSelector = ({
                     onClose={() => setCurrentCalculation()}
                     onDelete={onDeleteCalculation}
                     displayNameProp={displayNameProp}
+                    height={heightCalculation}
                 />
             )}
             <style jsx>{styles}</style>
@@ -466,6 +468,7 @@ ItemSelector.propTypes = {
     dataTest: PropTypes.string,
     dataTypes: PropTypes.array,
     height: PropTypes.string,
+    heightCalculation: PropTypes.string,
     infoBoxMessage: PropTypes.string,
     infoDataItem: PropTypes.object,
     isOptionViewMode: PropTypes.bool,