Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dynamically change of each pane #284

Open
HarshitSahu8 opened this issue Aug 2, 2023 · 0 comments
Open

dynamically change of each pane #284

HarshitSahu8 opened this issue Aug 2, 2023 · 0 comments

Comments

@HarshitSahu8
Copy link

I am currently using the react-collapse-pane library to implement a split-pane layout in my React application. However, I have encountered an issue while attempting to update the pane sizing dynamically via JavaScript.

Implement the react-collapse-pane in a React application.
Create a split-pane layout with three panes (left, middle and right).
Attempt to programmatically update the size of one of the panes using JavaScript.

Expected Behavior:
When I update the size of the pane using JavaScript, I expect the UI to reflect the changes immediately, and the pane to resize accordingly.

Actual Behavior:
Despite my efforts to update the pane size using JavaScript (e.g., by changing the state that controls the pane size), the UI does not reflect the changes, and the pane size remains unchanged.

code example

const SplitScreen = () => {
const store = useStore();
const { reactSpliData, setReactSpliData } = store;
if (reactSpliData.childComponents.length === 0) {
setReactSpliData({
...reactSpliData,
childComponents,
});
}

const reactSplitPaneFunc = (reactSpliData) => {
return (
reactSpliData.childComponents.length > 0 && (

{reactSpliData.childComponents.map((pane) => (
<div
style={{
overflowY: "scroll",
height: "100vh",
}}
key={pane.id}
>
{pane.component}

))}

)
);
};

return

{reactSplitPaneFunc(reactSpliData)}
;
};

react-collapse-pane version: 3.0.1
React version:18.2.0
Browser: [Chrome
Operating System: Windows 10

Additional Information:
I have checked the React Developer Tools, and it appears that the state updates correctly, but the pane size does not update in the UI.

Please let me know if there is a workaround or any additional information required to address this issue. Thank you for your support and the effort put into maintaining this library!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant