diff --git a/src/components/ScenarioParameters/components/ScenarioParametersInputs/GenericDateInput.js b/src/components/ScenarioParameters/components/ScenarioParametersInputs/GenericDateInput.js index 822cb1ae5..012604c1a 100644 --- a/src/components/ScenarioParameters/components/ScenarioParametersInputs/GenericDateInput.js +++ b/src/components/ScenarioParameters/components/ScenarioParametersInputs/GenericDateInput.js @@ -1,6 +1,7 @@ // Copyright (c) Cosmo Tech. // Licensed under the MIT license. import React from 'react'; +import { useWatch } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; import PropTypes from 'prop-types'; import { Grid } from '@mui/material'; @@ -16,6 +17,21 @@ export const GenericDateInput = ({ parameterData, context, parameterValue, setPa const { t } = useTranslation(); const minDate = parameterData.minValue ? new Date(parameterData.minValue) : undefined; const maxDate = parameterData.maxValue ? new Date(parameterData.maxValue) : undefined; + + // Example of customized component to behave differently based on the value of another parameter in the dataset + // creation dialog. Note that in the context of the dataset creation dialog, in React Hook Form data, the parameter + // ids are prefixed with the id of the datasource run template followed by a dot character (e.g. + // my_datasource_etl.my_parameter). If the id of the run template contains a dot, it is replaced by "__DOT__" to + // prevent accidental conflicts with parameter and run template ids + const watchedValue = useWatch({ + name: '__DOT__////etl_sub_dataset_by_filter.etl_param_subdataset_filter_start_date', + }); + // Id of the parameter with a custom behavior, without the custom prefix that is used only for RHF data + if (parameterData.id === 'etl_param_subdataset_filter_end_date') { + // Example of how to hide the end date component if the start date is after 2026-01-01 + if (watchedValue >= new Date('2026-01-01')) return null; + } + const dateProps = { disabled: !context.editMode, id: `date-input-${parameterData.id}`, diff --git a/src/components/ScenarioParameters/components/ScenarioParametersInputs/GenericSliderInput.js b/src/components/ScenarioParameters/components/ScenarioParametersInputs/GenericSliderInput.js index e38826d60..9c7813e62 100644 --- a/src/components/ScenarioParameters/components/ScenarioParametersInputs/GenericSliderInput.js +++ b/src/components/ScenarioParameters/components/ScenarioParametersInputs/GenericSliderInput.js @@ -1,6 +1,7 @@ // Copyright (c) Cosmo Tech. // Licensed under the MIT license. import React from 'react'; +import { useWatch } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; import PropTypes from 'prop-types'; import { Grid } from '@mui/material'; @@ -17,6 +18,10 @@ export const GenericSliderInput = ({ parameterData, context, parameterValue, set const max = getMaxValue(parameterData); const { t } = useTranslation(); + // Example of customized component to behave differently based on the value of another scenario parameter + const watchedValue = useWatch({ name: 'currency_used' }); // "currency_used" is the id of the parameter to watch + if (watchedValue === false) return null; // Do not render the slider component if the parameter value is false + return (