From e7180306c1061a8174c16391dd4cebb5f44af186 Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Fri, 9 Aug 2024 12:10:46 -0400 Subject: [PATCH 1/2] changing the accordion summary to not throw console warnings --- src/components/trays/layers/list.js | 37 +++++++++++++++++++++++++---- 1 file changed, 33 insertions(+), 4 deletions(-) diff --git a/src/components/trays/layers/list.js b/src/components/trays/layers/list.js index 7449a883..dd2ae22d 100644 --- a/src/components/trays/layers/list.js +++ b/src/components/trays/layers/list.js @@ -3,11 +3,16 @@ import { Accordion, AccordionDetails, AccordionGroup, - AccordionSummary, + //AccordionSummary, Box, Divider, IconButton, + Stack, + //ButtonGroup } from '@mui/joy'; +import { ActionButton } from '@components/buttons'; +import { useToggleState } from '@hooks'; +import { KeyboardArrowDown as ExpandIcon } from '@mui/icons-material'; import { useLayers } from '@context'; import { LayerCard } from './layer-card'; import { DeleteModelRunButton } from "@components/trays/layers/delete-layer-button"; @@ -248,6 +253,8 @@ export const LayersList = () => { setDefaultModelLayers(newLayerList); }; + const expanded = useToggleState(false); + /** * render the layers on the tray */ @@ -279,8 +286,18 @@ export const LayersList = () => { {(provided) => ( - - + + + {/**/} + + { { getHeaderSummary(layer['properties']) } - + + + + + + + {/**/} + { renderLayerCards(layers, layer['group'] )} From 0b42242b6a910aa30a13a905317954d47aea447a Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Mon, 12 Aug 2024 14:49:08 -0400 Subject: [PATCH 2/2] correcting the "button within a button" console warning. --- src/components/trays/layers/list.js | 105 ++++++++++++++++++++-------- 1 file changed, 76 insertions(+), 29 deletions(-) diff --git a/src/components/trays/layers/list.js b/src/components/trays/layers/list.js index dd2ae22d..3058aeb9 100644 --- a/src/components/trays/layers/list.js +++ b/src/components/trays/layers/list.js @@ -1,17 +1,7 @@ -import React from 'react'; -import { - Accordion, - AccordionDetails, - AccordionGroup, - //AccordionSummary, - Box, - Divider, - IconButton, - Stack, - //ButtonGroup +import React, { useState } from 'react'; +import { Accordion, AccordionDetails, AccordionGroup, Box, Divider, IconButton, Stack } from '@mui/joy'; import { ActionButton } from '@components/buttons'; -import { useToggleState } from '@hooks'; import { KeyboardArrowDown as ExpandIcon } from '@mui/icons-material'; import { useLayers } from '@context'; import { LayerCard } from './layer-card'; @@ -190,13 +180,16 @@ export const LayersList = () => { // get the unique groups in the selected model runs const groupList = getGroupList(layers); + // set some state for the accordion expansion view + const [expandedAccordion, setExpandedAccordion] = useState( []); + /** * handle the drag event * * @param result */ const onDragEnd = (result) => { - // handle case that there is no destination (could have been dragged out of the drop area) + // handle the case that there is no destination (could have been dragged out of the drop area) if (!result.destination) { return; } @@ -253,7 +246,63 @@ export const LayersList = () => { setDefaultModelLayers(newLayerList); }; - const expanded = useToggleState(false); + /** + * gets the current state of the accordion + * + * @param id + * @returns {boolean} + */ + const getAccordionState = (id) => { + // init the return + let ret_val = false; + + // find the index of this item in state + const index = expandedAccordion.findIndex(l => l.id === id); + + // add a new one to the list if it doesn't exist + if (index !== -1) { + // get the state + ret_val = expandedAccordion[index].enabled; + } + + // return the state + return ret_val; + }; + + /** + * toggles the accordion view in state + * + * @param id + */ + const toggleAccordionView = (id) => { + // get a copy of the state list + let newExpandedAccordion = [ ...expandedAccordion ]; + + // find the index of this item in state + const index = expandedAccordion.findIndex(l => l.id === id); + + // add a new one to the list if it doesn't exist + if (index === -1) { + // add a new item to the state list + newExpandedAccordion = [...expandedAccordion, { id: id, enabled: true }]; + + // update the state list + setExpandedAccordion(newExpandedAccordion); + } else { + // get the target instance in the state array + const alteredExpandedAccordion = newExpandedAccordion[index]; + + // toggle the view state of the accordion + alteredExpandedAccordion.enabled = !alteredExpandedAccordion.enabled; + + // rebuild the list of accordions with the altered view state + setExpandedAccordion([ + ...newExpandedAccordion.slice(0, index), + { alteredExpandedAccordion }, + ...newExpandedAccordion.slice(index + 1) + ]); + } + }; /** * render the layers on the tray @@ -273,8 +322,7 @@ export const LayersList = () => { '.MuiAccordionSummary-button': { alignItems: 'center', }, - }} - > + }}> { // loop through the layer groups and put them away groupList @@ -287,10 +335,8 @@ export const LayersList = () => { {(provided) => ( - - {/**/} + expanded={ getAccordionState(layer['group']) } + onChange={ () => toggleAccordionView(layer['group']) }> { + { ...provided['dragHandleProps'] }> + - + + { getHeaderSummary(layer['properties']) } + - + toggleAccordionView( layer['group']) }> - {/**/} - - { renderLayerCards(layers, layer['group'] )} + { renderLayerCards(layers, layer['group']) } - )} + ) + } )) } { provided.placeholder } )}