diff --git a/src/components/dialogs/parameters/load-flow-parameters.jsx b/src/components/dialogs/parameters/load-flow-parameters.jsx index 16a4254a9d..1a5ca7940f 100644 --- a/src/components/dialogs/parameters/load-flow-parameters.jsx +++ b/src/components/dialogs/parameters/load-flow-parameters.jsx @@ -5,33 +5,34 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import { FormattedMessage, useIntl } from 'react-intl'; -import { Autocomplete, Chip, Grid, TextField, Box } from '@mui/material'; -import { - DropDown, - LabelledButton, - SwitchWithLabel, - useParameterState, - styles, -} from './parameters'; -import { LineSeparator } from '../dialogUtils'; import { + DirectoryItemSelector, ElementType, FlatParameters, useSnackMessage, } from '@gridsuite/commons-ui'; -import { useLocalizedCountries } from '../../utils/localized-countries-hook'; -import { replaceAllDefaultValues } from '../../utils/utils'; +import { Autocomplete, Box, Chip, Grid, TextField } from '@mui/material'; +import { useCallback, useEffect, useMemo, useState } from 'react'; +import { FormattedMessage, useIntl } from 'react-intl'; +import { fetchLoadFlowParameters } from '../../../services/loadflow'; import { PARAM_DEVELOPER_MODE, PARAM_LIMIT_REDUCTION, } from '../../../utils/config-params'; -import { ParameterType, ParamLine, ParameterGroup } from './widget'; import { mergeSx } from '../../utils/functions'; +import { useLocalizedCountries } from '../../utils/localized-countries-hook'; +import { replaceAllDefaultValues } from '../../utils/utils'; +import { LineSeparator } from '../dialogUtils'; import CreateParameterDialog from './common/parameters-creation-dialog'; -import { DirectoryItemSelector } from '@gridsuite/commons-ui'; -import { fetchLoadFlowParameters } from '../../../services/loadflow'; +import { + DropDown, + LabelledButton, + SwitchWithLabel, + styles, + useParameterState, +} from './parameters'; +import { ParameterGroup } from './widget'; +import ParameterLineSlider from './widget/parameter-line-slider'; const CountrySelector = ({ value, label, callback }) => { const { translate, countryCodes } = useLocalizedCountries(); @@ -45,7 +46,7 @@ const CountrySelector = ({ value, label, callback }) => { callback(newValues)} options={countryCodes} getOptionLabel={(countryCode) => translate(countryCode)} @@ -638,9 +639,8 @@ export const LoadFlowParameters = ({ parametersBackend }) => { > - { const alertThresholdMarks = [ @@ -55,21 +56,18 @@ export const MapParameters = () => { marginTop={-3} justifyContent={'space-between'} > - - - { }} /> - { }} /> - - - { marginTop={-3} justifyContent={'space-between'} > - { /> - {enableDeveloperMode && ( diff --git a/src/components/dialogs/parameters/single-line-diagram-parameters.jsx b/src/components/dialogs/parameters/single-line-diagram-parameters.jsx index 1c4635fbe0..6fa74f3f03 100644 --- a/src/components/dialogs/parameters/single-line-diagram-parameters.jsx +++ b/src/components/dialogs/parameters/single-line-diagram-parameters.jsx @@ -5,19 +5,20 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import React, { useEffect, useMemo, useState } from 'react'; import { Grid } from '@mui/material'; -import { SubstationLayout } from '../../diagrams/diagram-common'; +import { useEffect, useMemo, useState } from 'react'; +import { getAvailableComponentLibraries } from '../../../services/study'; import { PARAM_CENTER_LABEL, + PARAM_COMPONENT_LIBRARY, PARAM_DIAGONAL_LABEL, PARAM_SUBSTATION_LAYOUT, - PARAM_COMPONENT_LIBRARY, } from '../../../utils/config-params'; -import { styles } from './parameters'; +import { SubstationLayout } from '../../diagrams/diagram-common'; import { LineSeparator } from '../dialogUtils'; -import { getAvailableComponentLibraries } from '../../../services/study'; -import { ParamLine, ParameterType } from './widget'; +import { styles } from './parameters'; +import ParameterLineDropdown from './widget/parameter-line-dropdown'; +import ParameterLineSwitch from './widget/parameter-line-switch'; export const useGetAvailableComponentLibraries = (user) => { const [componentLibraries, setComponentLibraries] = useState([]); @@ -53,21 +54,18 @@ export const SingleLineDiagramParameters = ({ componentLibraries }) => { marginTop={-3} justifyContent={'space-between'} > - - - { }} /> - { return ( - - - ); diff --git a/src/components/dialogs/parameters/widget/ParameterLine.tsx b/src/components/dialogs/parameters/widget/ParameterLine.tsx deleted file mode 100644 index 08e697c226..0000000000 --- a/src/components/dialogs/parameters/widget/ParameterLine.tsx +++ /dev/null @@ -1,233 +0,0 @@ -/** - * Copyright (c) 2023, RTE (http://www.rte-france.com) - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. - */ - -import React, { FunctionComponent, useState } from 'react'; -import { useParameterState, styles } from '../parameters'; -import { Grid, MenuItem, Select, Slider, Switch } from '@mui/material'; -import { FormattedMessage } from 'react-intl'; -import { Mark } from '@mui/base/useSlider'; -import { DirectoryItemsInput } from '@gridsuite/commons-ui'; -import { SelectInputProps } from '@mui/material/Select/SelectInput'; -import { mergeSx } from '../../../utils/functions'; - -export enum ParameterType { - Switch, - DropDown, - Slider, - DirectoryItems, -} - -type BaseParameterLineProps = { - readonly type: ParameterType; - readonly param_name_id: string; - disabled?: boolean; -}; - -type SwitchParameterLineProps = { - readonly type: ParameterType.Switch; - label?: string; -}; - -type DropDownParameterLineProps = { - readonly type: ParameterType.DropDown; - labelTitle?: string; - labelValue?: string; - values: Record; - defaultValueIfNull?: boolean; - onPreChange?: SelectInputProps['onChange']; -}; - -type SliderParameterLineProps = { - readonly type: ParameterType.Slider; - value: number; - label: string; - marks: boolean | Mark[]; - minValue?: number; //default = 0; - maxValue?: number; //default = 100; -}; - -//TODO: type elementType on @commons-ui/libs/utils/ElementType.elementType enum when migrated on ts -type DirectoryItemsInputLineProps = { - readonly type: ParameterType.DirectoryItems; - label: string; - name: string; - equipmentTypes: string[]; - elementType: string; - hideErrorMessage: boolean; -}; - -type ParameterLineProps = BaseParameterLineProps & - ( - | SwitchParameterLineProps - | DropDownParameterLineProps - | SliderParameterLineProps - | DirectoryItemsInputLineProps - ); - -/** - * This component represents a parameter in the list. - * This is an effort to uniformize the UI style. - * @constructor - * @param props Parameter line component properties - * @param context React context - */ -export const ParamLine: FunctionComponent = ( - props, - context -) => { - switch (props.type) { - case ParameterType.Switch: - return ParamLineSwitch(props, context); - - case ParameterType.DropDown: - return ParamLineDropdown(props, context); - - case ParameterType.Slider: - return ParamLineSlider(props, context); - - case ParameterType.DirectoryItems: - return ParamLineDirectoryItemsInput(props, context); - - default: - //TODO: how to manage in react component? throw new Error(`Not supported parameter type ${type}`); - return ( -

{`Not supported parameter type '${ - (props as any).type || '' - }'`}

- ); - } -}; - -const ParamLineSwitch: FunctionComponent< - BaseParameterLineProps & SwitchParameterLineProps -> = (props, context) => { - const [parameterValue, handleChangeParameterValue] = useParameterState( - props.param_name_id - ); - - return ( - <> - - - - - { - handleChangeParameterValue(isChecked); - }} - value={parameterValue} - inputProps={{ 'aria-label': 'primary checkbox' }} - disabled={props.disabled ?? false} - /> - - - ); -}; - -const ParamLineDropdown: FunctionComponent< - BaseParameterLineProps & DropDownParameterLineProps -> = (props, context) => { - const [parameterValue, handleChangeParameterValue] = useParameterState( - props.param_name_id - ); - - return ( - <> - - - - - - - - ); -}; - -/* separate in another component because of eslint-rule react-hooks/rules-of-hooks */ -const ParamLineSlider: FunctionComponent< - BaseParameterLineProps & SliderParameterLineProps -> = (props, context) => { - const [parameterValue, handleChangeParameterValue] = useParameterState( - props.param_name_id - ); - const [sliderValue, setSliderValue] = useState(Number(parameterValue)); - - return ( - <> - - - - - { - setSliderValue(Number(newValue)); - }} - onChangeCommitted={(event, value) => { - handleChangeParameterValue(value); - }} - value={sliderValue} - disabled={props.disabled ?? false} - marks={props.marks} - /> - - - ); -}; - -const ParamLineDirectoryItemsInput: FunctionComponent< - BaseParameterLineProps & DirectoryItemsInputLineProps -> = (props, context) => { - return ( - - - {/* as suggested in the doc?*/} - - - - - - - ); -}; diff --git a/src/components/dialogs/parameters/widget/index.ts b/src/components/dialogs/parameters/widget/index.ts index df690ea61a..c0fe4109d9 100644 --- a/src/components/dialogs/parameters/widget/index.ts +++ b/src/components/dialogs/parameters/widget/index.ts @@ -1,9 +1,14 @@ /** - * Copyright (c) 2023, RTE (http://www.rte-france.com) + * Copyright (c) 2024, RTE (http://www.rte-france.com) * This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. + * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -export * from './ParameterLine'; -export * from './ParameterGroup'; +export * from './parameter-float'; +export * from './parameter-group'; +export { default as parameterLineDirectoryItemsInput } from './parameter-line-directory-items-input'; +export { default as parameterLineDropdown } from './parameter-line-dropdown'; +export { default as parameterLineSlider } from './parameter-line-slider'; +export { default as parameterLineSwitch } from './parameter-line-switch'; +export * from './parameter-switch'; diff --git a/src/components/dialogs/parameters/widget/ParameterGroup.tsx b/src/components/dialogs/parameters/widget/parameter-group.tsx similarity index 93% rename from src/components/dialogs/parameters/widget/ParameterGroup.tsx rename to src/components/dialogs/parameters/widget/parameter-group.tsx index abf708d0f6..17b640a4b4 100644 --- a/src/components/dialogs/parameters/widget/ParameterGroup.tsx +++ b/src/components/dialogs/parameters/widget/parameter-group.tsx @@ -1,13 +1,15 @@ /** - * Copyright (c) 2023, RTE (http://www.rte-france.com) + * Copyright (c) 2024, RTE (http://www.rte-france.com) * This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. + * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { styles } from '../parameters'; -import React, { FunctionComponent, PropsWithChildren, useState } from 'react'; -import { FormattedMessage } from 'react-intl'; +import { + ExpandCircleDown, + ExpandMore, + Settings as SettingsIcon, +} from '@mui/icons-material'; import { Accordion, AccordionDetails, @@ -15,11 +17,9 @@ import { Grid, Typography, } from '@mui/material'; -import { - ExpandCircleDown, - ExpandMore, - Settings as SettingsIcon, -} from '@mui/icons-material'; +import { FunctionComponent, PropsWithChildren, useState } from 'react'; +import { FormattedMessage } from 'react-intl'; +import { styles } from '../parameters'; type ParameterGroupProps = { label: string; diff --git a/src/components/dialogs/parameters/widget/parameter-line-directory-items-input.tsx b/src/components/dialogs/parameters/widget/parameter-line-directory-items-input.tsx new file mode 100644 index 0000000000..54ca48821f --- /dev/null +++ b/src/components/dialogs/parameters/widget/parameter-line-directory-items-input.tsx @@ -0,0 +1,48 @@ +/** + * Copyright (c) 2024, RTE (http://www.rte-france.com) + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at https://mozilla.org/MPL/2.0/. + */ + +import { DirectoryItemsInput } from '@gridsuite/commons-ui'; +import { Grid } from '@mui/material'; +import { FormattedMessage } from 'react-intl'; +import { styles } from '../parameters'; + +type DirectoryItemsInputLineProps = { + label: string; + name: string; + equipmentTypes: string[]; + elementType: string; + hideErrorMessage: boolean; +}; + +const ParameterLineDirectoryItemsInput = ({ + label, + name, + equipmentTypes, + elementType, + hideErrorMessage, +}: DirectoryItemsInputLineProps) => { + return ( + + + + + + + + + ); +}; + +export default ParameterLineDirectoryItemsInput; diff --git a/src/components/dialogs/parameters/widget/parameter-line-dropdown.tsx b/src/components/dialogs/parameters/widget/parameter-line-dropdown.tsx new file mode 100644 index 0000000000..09d1fe5988 --- /dev/null +++ b/src/components/dialogs/parameters/widget/parameter-line-dropdown.tsx @@ -0,0 +1,65 @@ +/** + * Copyright (c) 2024, RTE (http://www.rte-france.com) + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at https://mozilla.org/MPL/2.0/. + */ + +import { Grid, MenuItem, Select } from '@mui/material'; +import { SelectInputProps } from '@mui/material/Select/SelectInput'; +import { FormattedMessage } from 'react-intl'; +import { styles, useParameterState } from '../parameters'; + +type DropDownParameterLineProps = { + readonly paramNameId: string; + values: Record; + defaultValueIfNull?: boolean; + disabled?: boolean; + labelTitle?: string; + labelValue?: string; + onPreChange?: SelectInputProps['onChange']; +}; +const ParameterLineDropdown = ({ + defaultValueIfNull, + labelTitle, + labelValue, + onPreChange, + paramNameId, + values, + disabled = false, +}: DropDownParameterLineProps) => { + const [parameterValue, handleChangeParameterValue] = + useParameterState(paramNameId); + + return ( + <> + + + + + + + + ); +}; + +export default ParameterLineDropdown; diff --git a/src/components/dialogs/parameters/widget/parameter-line-slider.tsx b/src/components/dialogs/parameters/widget/parameter-line-slider.tsx new file mode 100644 index 0000000000..575a934a4d --- /dev/null +++ b/src/components/dialogs/parameters/widget/parameter-line-slider.tsx @@ -0,0 +1,66 @@ +/** + * Copyright (c) 2024, RTE (http://www.rte-france.com) + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at https://mozilla.org/MPL/2.0/. + */ + +import { mergeSx } from '@gridsuite/commons-ui'; +import { Mark } from '@mui/base/useSlider'; +import { Grid, Slider } from '@mui/material'; +import { useState } from 'react'; +import { FormattedMessage } from 'react-intl'; +import { styles, useParameterState } from '../parameters'; + +type SliderParameterLineProps = { + readonly paramNameId: string; + disabled?: boolean; + label: string; + marks: boolean | Mark[]; + minValue?: number; //default = 0; + maxValue?: number; //default = 100; +}; + +const ParameterLineSlider = ({ + paramNameId, + label, + marks, + disabled = false, + minValue = 0, + maxValue = 100, +}: SliderParameterLineProps) => { + const [parameterValue, handleChangeParameterValue] = + useParameterState(paramNameId); + const [sliderValue, setSliderValue] = useState(Number(parameterValue)); + + return ( + <> + + + + + { + setSliderValue(Number(newValue)); + }} + onChangeCommitted={(_event, value) => { + handleChangeParameterValue(value); + }} + value={sliderValue} + disabled={disabled ?? false} + marks={marks} + /> + + + ); +}; + +export default ParameterLineSlider; diff --git a/src/components/dialogs/parameters/widget/parameter-line-switch.tsx b/src/components/dialogs/parameters/widget/parameter-line-switch.tsx new file mode 100644 index 0000000000..79ed723320 --- /dev/null +++ b/src/components/dialogs/parameters/widget/parameter-line-switch.tsx @@ -0,0 +1,45 @@ +/** + * Copyright (c) 2024, RTE (http://www.rte-france.com) + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at https://mozilla.org/MPL/2.0/. + */ + +import { Grid, Switch } from '@mui/material'; +import { FormattedMessage } from 'react-intl'; +import { styles, useParameterState } from '../parameters'; + +type SwitchParameterLineProps = { + readonly paramNameId: string; + disabled?: boolean; + label?: string; +}; +const ParameterLineSwitch = ({ + paramNameId, + label, + disabled = false, +}: SwitchParameterLineProps) => { + const [parameterValue, handleChangeParameterValue] = + useParameterState(paramNameId); + + return ( + <> + + + + + { + handleChangeParameterValue(isChecked); + }} + value={parameterValue} + inputProps={{ 'aria-label': 'primary checkbox' }} + disabled={disabled} + /> + + + ); +}; + +export default ParameterLineSwitch;