diff --git a/client/src/pages/Params/Param/Active.js b/client/src/pages/Params/Param/Active.js index c737e8d5..5831ae2d 100644 --- a/client/src/pages/Params/Param/Active.js +++ b/client/src/pages/Params/Param/Active.js @@ -1,4 +1,4 @@ -import React, { useState } from "react" +import React, { useEffect, useState } from "react" import { Row, Column } from "components/Containers" import { Label } from "components/UIElements" @@ -9,27 +9,32 @@ import Submit from "./Submit" import { useParameters } from "../../Params" -const Active = ({ listRef, style, height, data, index, setActiveIndex, setModifiedIndexes, parametersSave }) => { +const Active = ({ listRef, style, data, index, setActiveIndex, setModifiedIndexes, setActiveSize, parametersSave }) => { const [value, setValue] = useState(data.value) const deactivate = () => setActiveIndex(-1) const [params, setParameters] = useParameters() + const root = React.useRef() + + useEffect(() => { + setActiveSize(root.current.getBoundingClientRect().height) + }, []) return (
handleSubmit(e, deactivate)}> - -
+ +
- +
- + {data.DisplayName}{data.DisplayName ? ". " : ""}{data.Description} @@ -39,7 +44,7 @@ const Active = ({ listRef, style, height, data, index, setActiveIndex, setModifi display: "flex", flexDirection: "column", rowGap: "1rem", - height: "96%", + paddingBottom: "2px" }} > { get() }, []) + const [activeSize, setActiveSize] = useState(35) + return (
{ width={width} itemCount={parametersDisplay.length} ref={listRef} - itemSize={(index) => { - return activeParamIndex === parametersDisplay[index] ? 130 : 35 + itemSize={(i) => { + return i == activeParamIndex ? activeSize : 35 }} > {({ index, style }) => { return ( { setActiveIndex={setActiveIndex} setModifiedIndexes={setModifiedIndexes} parametersSave={parametersSave} + setActiveSize={setActiveSize} listRef={listRef} /> )