From 9b68b88ca58ef82c7ed3b11eee72a4160357a77e Mon Sep 17 00:00:00 2001 From: Benjamin Dehli Date: Thu, 25 Apr 2024 20:29:56 +0200 Subject: [PATCH] Implement custom list item component and improve null checks --- .../Binding/BindingItemComponent.js | 41 +++++------ .../Button/ButtonItemComponent.js | 43 +++++------- .../DecentSampler/Color/ColorItemComponent.js | 28 +++----- .../Effect/EffectItemComponent.js | 32 +++------ .../Effects/EffectsItemComponent.js | 41 ++++------- .../Envelope/EnvelopeItemComponent.js | 44 ++++-------- .../DecentSampler/Group/GroupItemComponent.js | 44 +++--------- .../Groups/GroupsItemComponent.js | 68 +++++++------------ .../DecentSampler/Image/ImageItemComponent.js | 29 +++----- .../Keyboard/KeyboardItemComponent.js | 43 +++++------- .../DecentSampler/Lfo/LfoItemComponent.js | 43 +++++------- .../DecentSampler/Menu/MenuItemComponent.js | 43 +++++------- .../DecentSampler/Midi/MidiItemComponent.js | 2 +- .../Modulators/ModulatorsItemComponent.js | 34 +++++----- .../{NoteItem.js => NoteItemComponent.js} | 43 +++++------- .../NoteSequences/NoteSequencesItem.js | 50 ++++++-------- .../Option/OptionItemComponent.js | 43 +++++------- .../Sample/SampleItemComponent.js | 28 +++----- ...quenceItem.js => SequenceItemComponent.js} | 45 +++++------- .../DecentSampler/State/StateItemComponent.js | 43 +++++------- .../DecentSampler/Tab/TabItemComponent.js | 52 +++++--------- .../DecentSampler/Tag/TagItemComponent.js | 44 ++++-------- .../DecentSampler/Tags/TagsItemComponent.js | 35 +++++----- .../DecentSampler/Ui/UiItemComponent.js | 31 +++++---- 24 files changed, 345 insertions(+), 604 deletions(-) rename src/components/DecentSampler/Note/{NoteItem.js => NoteItemComponent.js} (73%) rename src/components/DecentSampler/Sequence/{SequenceItem.js => SequenceItemComponent.js} (65%) diff --git a/src/components/DecentSampler/Binding/BindingItemComponent.js b/src/components/DecentSampler/Binding/BindingItemComponent.js index c098c7e..2df3b0a 100644 --- a/src/components/DecentSampler/Binding/BindingItemComponent.js +++ b/src/components/DecentSampler/Binding/BindingItemComponent.js @@ -1,29 +1,32 @@ // Dependencies -import { Fragment, useContext, useEffect, useState } from "react"; +import { Fragment, useContext, useState } from "react"; // Material UI import MenuItem from "@mui/material/MenuItem"; -import EditIcon from "@mui/icons-material/Edit"; -import { IconButton, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; +import { ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; import { Folder } from "@mui/icons-material"; +// Components +import { EditBindingItemDialog } from "./EditBindingItemDialog"; + // Template import { IconControllableParameter } from "@/components/Template/Icons/IconControllableParameter"; import { IconAdd } from "@/components/Template/Icons/IconAdd"; -import { SettingsMenu } from "../../Template/SettingsMenu"; import { ListItemSecondaryText } from "@/components/Template/ListItemSecondaryText"; +import { DefaultListItem } from "@/components/Template/DefaultListItem"; // Functions import { getIndentSize } from "@/functions/helpers"; -import { getBgColorForElementType, getFgColorForElementType } from "@/functions/styles"; +import { getFgColorForElementType } from "@/functions/styles"; + +// Classes +import { ControllableParameter } from "@/classes/ControllableParameter"; // Store import DecentSamplerContext from "@/store/DecentSamplerContext"; // Data import controllableParametersData from "@/data/controllableParameters.js"; -import { EditBindingItemDialog } from "./EditBindingItemDialog"; -import { ControllableParameter } from "@/classes/ControllableParameter"; export function BindingItemComponent({ bindingItem }) { const decentSamplerContext = useContext(DecentSamplerContext); @@ -58,7 +61,7 @@ export function BindingItemComponent({ bindingItem }) { }); } - /* useEffect(() => { + /* useEffect(() => { const controllableParameter = getControlParameterForBindingItem(bindingItem); setControllableParameterForBinding(controllableParameter); if (!controllableParameter) { @@ -98,22 +101,10 @@ export function BindingItemComponent({ bindingItem }) { return ( - - handleClickOpenEditBindingItemDialog()} - > - - - - - } + - + - - console.log("onClick")} - > - - - - - } + console.log("onClick")} > - - - - {buttonItem?.childElements?.length && - buttonItem.childElements.map((childElement) => renderChildElement(childElement))} - - + + {hasChildren() && ( + + + {!!buttonItem?.childElements?.length && + buttonItem.childElements.map((childElement) => renderChildElement(childElement))} + + + )} ); } diff --git a/src/components/DecentSampler/Color/ColorItemComponent.js b/src/components/DecentSampler/Color/ColorItemComponent.js index 8af3762..70346fd 100644 --- a/src/components/DecentSampler/Color/ColorItemComponent.js +++ b/src/components/DecentSampler/Color/ColorItemComponent.js @@ -2,7 +2,7 @@ import { Fragment, useState } from "react"; // Material UI -import { IconButton, ListItem, ListItemButton, ListItemIcon, ListItemText, MenuItem } from "@mui/material"; +import { ListItemButton, ListItemIcon, ListItemText, MenuItem } from "@mui/material"; import EditIcon from "@mui/icons-material/Edit"; import ArchiveIcon from "@mui/icons-material/Archive"; import FileCopyIcon from "@mui/icons-material/FileCopy"; @@ -12,13 +12,13 @@ import MoreHorizIcon from "@mui/icons-material/MoreHoriz"; import { EditColorItemDialog } from "./EditColorItemDialog"; // Template -import { SettingsMenu } from "@/components/Template/SettingsMenu"; import { IconColor } from "@/components/Template/Icons/IconColor"; import { ListItemSecondaryText } from "@/components/Template/ListItemSecondaryText"; +import { DefaultListItem } from "@/components/Template/DefaultListItem"; // Functions import { getIndentSize } from "@/functions/helpers"; -import { getBgColorForElementType, getFgColorForElementType } from "@/functions/styles"; +import { getFgColorForElementType } from "@/functions/styles"; // Data import midiNotes from "@/data/midiNotes"; @@ -76,22 +76,10 @@ export function ColorItemComponent({ colorItem }) { return ( - - handleClickOpenEditColorItemDialog()} - > - - - - - } + setIsExpanded(!isExpanded)}> @@ -99,7 +87,7 @@ export function ColorItemComponent({ colorItem }) { - + - - handleClickOpenEditSampleItemDialog()} - > - - - - - } + setIsExpanded(!isExpanded)} > - + - + {/* - - console.log("onClick")} - > - - - - - } - > + setIsExpanded(!isExpanded)} @@ -120,13 +103,15 @@ export function EffectsItemComponent({ effectsItem }) { - - - - {effectsItem?.childElements?.length && - effectsItem.childElements.map((childElement) => renderChildElement(childElement))} - - + + {hasChildren() && ( + + + {!!effectsItem?.childElements?.length && + effectsItem.childElements.map((childElement) => renderChildElement(childElement))} + + + )} ); } diff --git a/src/components/DecentSampler/Envelope/EnvelopeItemComponent.js b/src/components/DecentSampler/Envelope/EnvelopeItemComponent.js index 448c38a..8f827fb 100644 --- a/src/components/DecentSampler/Envelope/EnvelopeItemComponent.js +++ b/src/components/DecentSampler/Envelope/EnvelopeItemComponent.js @@ -3,21 +3,20 @@ import { Fragment, useContext, useState } from "react"; // Material UI import MenuItem from "@mui/material/MenuItem"; -import EditIcon from "@mui/icons-material/Edit"; -import { Chip, Collapse, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; +import { Chip, Collapse, List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; import { ChevronRight, ExpandMore, Folder, ShowChart } from "@mui/icons-material"; // Components import { BindingItemComponent } from "../Binding/BindingItemComponent"; // Template -import { SettingsMenu } from "@/components/Template/SettingsMenu"; import { IconAdd } from "@/components/Template/Icons/IconAdd"; import { ListItemSecondaryText } from "@/components/Template/ListItemSecondaryText"; +import { DefaultListItem } from "@/components/Template/DefaultListItem"; // Functions import { getIndentSize } from "@/functions/helpers"; -import { getBgColorForElementType, getFgColorForElementType } from "@/functions/styles"; +import { getFgColorForElementType } from "@/functions/styles"; // Store import DecentSamplerContext from "@/store/DecentSamplerContext"; @@ -64,7 +63,8 @@ export function EnvelopeItemComponent({ envelopeItem }) { const secondaryText = ( - {envelopeItem?.childElements?.length || 0} {envelopeItem?.childElements?.length === 1 ? "binding" : "bindings"} + {envelopeItem?.childElements?.length || 0}{" "} + {envelopeItem?.childElements?.length === 1 ? "binding" : "bindings"} ); @@ -79,23 +79,7 @@ export function EnvelopeItemComponent({ envelopeItem }) { return ( - - console.log("onClick")} - > - - - - - } - > + setIsExpanded(!isExpanded)} @@ -106,13 +90,15 @@ export function EnvelopeItemComponent({ envelopeItem }) { - - - - {envelopeItem?.childElements?.length && - envelopeItem.childElements.map((childElement) => renderChildElement(childElement))} - - + + {hasChildren() && ( + + + {!!envelopeItem?.childElements?.length && + envelopeItem.childElements.map((childElement) => renderChildElement(childElement))} + + + )} ); } diff --git a/src/components/DecentSampler/Group/GroupItemComponent.js b/src/components/DecentSampler/Group/GroupItemComponent.js index d625b32..d61d3a1 100644 --- a/src/components/DecentSampler/Group/GroupItemComponent.js +++ b/src/components/DecentSampler/Group/GroupItemComponent.js @@ -3,20 +3,8 @@ import { Fragment, useContext, useState } from "react"; // Material UI import { AudioFile, ChevronRight, ExpandMore, Folder, FolderOff, Tune } from "@mui/icons-material"; -import EditIcon from "@mui/icons-material/Edit"; import MoreHorizIcon from "@mui/icons-material/MoreHoriz"; -import { - Chip, - Collapse, - IconButton, - List, - ListItem, - ListItemButton, - ListItemIcon, - ListItemText, - ListSubheader, - MenuItem -} from "@mui/material"; +import { Chip, Collapse, List, ListItemButton, ListItemIcon, ListItemText, MenuItem } from "@mui/material"; // Components import { EditGroupItemDialog } from "./Dialogs/EditGroupItemDialog"; @@ -26,15 +14,15 @@ import { SampleItemComponent } from "../Sample/SampleItemComponent"; // Template import { IconRemove } from "@/components/Template/Icons/IconRemove"; import { IconAdd } from "@/components/Template/Icons/IconAdd"; -import { SettingsMenu } from "@/components/Template/SettingsMenu"; import { ListItemSecondaryText } from "@/components/Template/ListItemSecondaryText"; // Functions import { getIndentSize } from "@/functions/helpers"; -import { getBgColorForElementType, getFgColorForElementType } from "@/functions/styles"; +import { getFgColorForElementType } from "@/functions/styles"; // Store import DecentSamplerContext from "@/store/DecentSamplerContext"; +import { DefaultListItem } from "@/components/Template/DefaultListItem"; export function GroupItemComponent({ groupItem }) { const decentSamplerContext = useContext(DecentSamplerContext); @@ -120,7 +108,7 @@ export function GroupItemComponent({ groupItem }) { effect: 0, sample: 0 }; - groupItem.childElements.forEach((childElement) => { + groupItem?.childElements?.forEach((childElement) => { if (childElement?.elementType === "sample") { childElementTypes.sample++; } else if (childElement?.elementType === "effects") { @@ -164,22 +152,10 @@ export function GroupItemComponent({ groupItem }) { return ( - - handleClickOpenEditGroupItemDialog()} - > - - - - - } + - + {hasChildren() && ( - {groupItem?.childElements?.length && + {!!groupItem?.childElements?.length && groupItem.childElements.map((childElement) => renderChildElement(childElement))} diff --git a/src/components/DecentSampler/Groups/GroupsItemComponent.js b/src/components/DecentSampler/Groups/GroupsItemComponent.js index 7e79c56..6867094 100644 --- a/src/components/DecentSampler/Groups/GroupsItemComponent.js +++ b/src/components/DecentSampler/Groups/GroupsItemComponent.js @@ -1,23 +1,22 @@ // Dependencies -import { Fragment, useContext, useState } from "react"; +import { Fragment, useContext, useEffect, useState } from "react"; // Material UI import MenuItem from "@mui/material/MenuItem"; -import EditIcon from "@mui/icons-material/Edit"; -import { Collapse, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; +import { Collapse, List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; import { ChevronRight, ExpandMore, Folder, Topic } from "@mui/icons-material"; // Components import { GroupItemComponent } from "../Group/GroupItemComponent"; // Template -import { SettingsMenu } from "@/components/Template/SettingsMenu"; import { IconAdd } from "@/components/Template/Icons/IconAdd"; import { ListItemSecondaryText } from "@/components/Template/ListItemSecondaryText"; +import { DefaultListItem } from "@/components/Template/DefaultListItem"; // Functions import { getIndentSize } from "@/functions/helpers"; -import { getBgColorForElementType, getFgColorForElementType } from "@/functions/styles"; +import { getFgColorForElementType } from "@/functions/styles"; // Store import DecentSamplerContext from "@/store/DecentSamplerContext"; @@ -27,16 +26,20 @@ export function GroupsItemComponent({ groupsItem }) { const [isExpanded, setIsExpanded] = useState(false); + const [numberOfGroups, setNumberOfGroups] = useState(); + + useEffect(() => { + setNumberOfGroups(groupsItem?.getGroupItems()?.length || 0); + }, [groupsItem]); + const settingsMenuItems = ( { - if (!groupsItem.groups.length) { - // Automatically expand the group if it's the first group - setIsExpanded(true); - } - groupsItem.newGroup(); // This is a method from the Groups class. It's not available in - decentSamplerContext.updateGroupsItem(groupsItem); + groupsItem.addGroupItem(); + setIsExpanded(true); + setNumberOfGroups(numberOfGroups + 1); + // decentSamplerContext.updateGroupsItem(groupsItem); }} disableRipple > @@ -47,12 +50,7 @@ export function GroupsItemComponent({ groupsItem }) { { - if (!groupsItem.groups.length) { - // Automatically expand the group if it's the first group - setIsExpanded(true); - } - groupsItem.newGroup(); // This is a method from the Groups class. It's not available in - decentSamplerContext.updateGroupsItem(groupsItem); + console.log("Add multiple groups"); }} disableRipple > @@ -69,7 +67,7 @@ export function GroupsItemComponent({ groupsItem }) { const primaryText = "Groups"; const secondaryText = ( - {groupsItem?.childElements?.length || 0} {groupsItem?.childElements?.length === 1 ? "group" : "groups"} + {numberOfGroups} {numberOfGroups === 1 ? "group" : "groups"} ); @@ -84,23 +82,7 @@ export function GroupsItemComponent({ groupsItem }) { return ( - - console.log("onClick")} - > - - - - - } - > + setIsExpanded(!isExpanded)} @@ -111,13 +93,15 @@ export function GroupsItemComponent({ groupsItem }) { - - - - {groupsItem?.childElements?.length && - groupsItem.childElements.map((childElement) => renderChildElement(childElement))} - - + + {hasChildren() && ( + + + {!!groupsItem?.childElements?.length && + groupsItem.childElements.map((childElement) => renderChildElement(childElement))} + + + )} ); } diff --git a/src/components/DecentSampler/Image/ImageItemComponent.js b/src/components/DecentSampler/Image/ImageItemComponent.js index bd9fc18..6ab7275 100644 --- a/src/components/DecentSampler/Image/ImageItemComponent.js +++ b/src/components/DecentSampler/Image/ImageItemComponent.js @@ -3,18 +3,17 @@ import { Fragment, useContext, useState } from "react"; // Material UI import MenuItem from "@mui/material/MenuItem"; -import EditIcon from "@mui/icons-material/Edit"; -import { IconButton, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; +import { ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; import { Folder, Image as ImageIcon } from "@mui/icons-material"; // Template -import { SettingsMenu } from "@/components/Template/SettingsMenu"; import { IconAdd } from "@/components/Template/Icons/IconAdd"; import { ListItemSecondaryText } from "@/components/Template/ListItemSecondaryText"; +import { DefaultListItem } from "@/components/Template/DefaultListItem"; // Functions import { getIndentSize } from "@/functions/helpers"; -import { getBgColorForElementType, getFgColorForElementType } from "@/functions/styles"; +import { getFgColorForElementType } from "@/functions/styles"; // Store import DecentSamplerContext from "@/store/DecentSamplerContext"; @@ -60,22 +59,10 @@ export function ImageItemComponent({ imageItem }) { return ( - - console.log("onClick")} - > - - - - - } + console.log("onClick")} > setIsExpanded(!isExpanded)}> @@ -83,7 +70,7 @@ export function ImageItemComponent({ imageItem }) { - + ); } diff --git a/src/components/DecentSampler/Keyboard/KeyboardItemComponent.js b/src/components/DecentSampler/Keyboard/KeyboardItemComponent.js index 656b005..9afcd7c 100644 --- a/src/components/DecentSampler/Keyboard/KeyboardItemComponent.js +++ b/src/components/DecentSampler/Keyboard/KeyboardItemComponent.js @@ -3,21 +3,20 @@ import { Fragment, useContext, useState } from "react"; // Material UI import MenuItem from "@mui/material/MenuItem"; -import EditIcon from "@mui/icons-material/Edit"; -import { Collapse, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; +import { Collapse, List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; import { ChevronRight, ExpandMore, Folder, Piano } from "@mui/icons-material"; // Components import { ColorItemComponent } from "../Color/ColorItemComponent"; // Template -import { SettingsMenu } from "@/components/Template/SettingsMenu"; import { IconAdd } from "@/components/Template/Icons/IconAdd"; import { ListItemSecondaryText } from "@/components/Template/ListItemSecondaryText"; +import { DefaultListItem } from "@/components/Template/DefaultListItem"; // Functions import { getIndentSize } from "@/functions/helpers"; -import { getBgColorForElementType, getFgColorForElementType } from "@/functions/styles"; +import { getFgColorForElementType } from "@/functions/styles"; // Store import DecentSamplerContext from "@/store/DecentSamplerContext"; @@ -76,22 +75,10 @@ export function KeyboardItemComponent({ keyboardItem }) { return ( - - console.log("onClick")} - > - - - - - } + console.log("onClick")} > - - - - {keyboardItem?.childElements?.length && - keyboardItem.childElements.map((childElement) => renderChildElement(childElement))} - - + + {hasChildren() && ( + + + {!!keyboardItem?.childElements?.length && + keyboardItem.childElements.map((childElement) => renderChildElement(childElement))} + + + )} ); } diff --git a/src/components/DecentSampler/Lfo/LfoItemComponent.js b/src/components/DecentSampler/Lfo/LfoItemComponent.js index 3572fcf..066a7e8 100644 --- a/src/components/DecentSampler/Lfo/LfoItemComponent.js +++ b/src/components/DecentSampler/Lfo/LfoItemComponent.js @@ -3,21 +3,20 @@ import { Fragment, useContext, useState } from "react"; // Material UI import MenuItem from "@mui/material/MenuItem"; -import EditIcon from "@mui/icons-material/Edit"; -import { Chip, Collapse, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; +import { Chip, Collapse, List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; import { ChevronRight, ExpandMore, Folder, ToggleOn } from "@mui/icons-material"; // Components import { BindingItemComponent } from "../Binding/BindingItemComponent"; // Template -import { SettingsMenu } from "@/components/Template/SettingsMenu"; import { IconAdd } from "@/components/Template/Icons/IconAdd"; import { ListItemSecondaryText } from "@/components/Template/ListItemSecondaryText"; +import { DefaultListItem } from "@/components/Template/DefaultListItem"; // Functions import { getIndentSize } from "@/functions/helpers"; -import { getBgColorForElementType, getFgColorForElementType } from "@/functions/styles"; +import { getFgColorForElementType } from "@/functions/styles"; // Store import DecentSamplerContext from "@/store/DecentSamplerContext"; @@ -79,22 +78,10 @@ export function LfoItemComponent({ lfoItem }) { return ( - - console.log("onClick")} - > - - - - - } + console.log("onClick")} > - - - - {lfoItem?.childElements?.length && - lfoItem.childElements.map((childElement) => renderChildElement(childElement))} - - + + {hasChildren() && ( + + + {!!lfoItem?.childElements?.length && + lfoItem.childElements.map((childElement) => renderChildElement(childElement))} + + + )} ); } diff --git a/src/components/DecentSampler/Menu/MenuItemComponent.js b/src/components/DecentSampler/Menu/MenuItemComponent.js index f60d0c6..386b919 100644 --- a/src/components/DecentSampler/Menu/MenuItemComponent.js +++ b/src/components/DecentSampler/Menu/MenuItemComponent.js @@ -3,24 +3,23 @@ import { Fragment, useContext, useState } from "react"; // Material UI import MenuItem from "@mui/material/MenuItem"; -import EditIcon from "@mui/icons-material/Edit"; -import { Collapse, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; +import { Collapse, List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; import { ChevronRight, ExpandMore, Folder, ListAlt } from "@mui/icons-material"; // Components import { OptionItemComponent } from "../Option/OptionItemComponent"; // Template -import { SettingsMenu } from "@/components/Template/SettingsMenu"; import { IconAdd } from "@/components/Template/Icons/IconAdd"; import { ListItemSecondaryText } from "@/components/Template/ListItemSecondaryText"; +import { DefaultListItem } from "@/components/Template/DefaultListItem"; // Functions import { getIndentSize } from "@/functions/helpers"; // Store import DecentSamplerContext from "@/store/DecentSamplerContext"; -import { getBgColorForElementType, getFgColorForElementType } from "@/functions/styles"; +import { getFgColorForElementType } from "@/functions/styles"; export function MenuItemComponent({ menuItem }) { const decentSamplerContext = useContext(DecentSamplerContext); @@ -76,22 +75,10 @@ export function MenuItemComponent({ menuItem }) { return ( - - console.log("onClick")} - > - - - - - } + console.log("onClick")} > - - - - {menuItem?.childElements?.length && - menuItem.childElements.map((childElement) => renderChildElement(childElement))} - - + + {hasChildren() && ( + + + {!!menuItem?.childElements?.length && + menuItem.childElements.map((childElement) => renderChildElement(childElement))} + + + )} ); } diff --git a/src/components/DecentSampler/Midi/MidiItemComponent.js b/src/components/DecentSampler/Midi/MidiItemComponent.js index b09d7f2..f0b022c 100644 --- a/src/components/DecentSampler/Midi/MidiItemComponent.js +++ b/src/components/DecentSampler/Midi/MidiItemComponent.js @@ -7,7 +7,7 @@ import { Collapse, List, ListItemButton, ListItemIcon, ListItemText } from "@mui import { ChevronRight, ExpandMore, Folder, ListAlt } from "@mui/icons-material"; // Components -import { NoteItemComponent } from "../Note/NoteItem"; +import { NoteItemComponent } from "../Note/NoteItemComponent"; // Template import { IconAdd } from "@/components/Template/Icons/IconAdd"; diff --git a/src/components/DecentSampler/Modulators/ModulatorsItemComponent.js b/src/components/DecentSampler/Modulators/ModulatorsItemComponent.js index cd2fdf9..b1a3123 100644 --- a/src/components/DecentSampler/Modulators/ModulatorsItemComponent.js +++ b/src/components/DecentSampler/Modulators/ModulatorsItemComponent.js @@ -2,7 +2,7 @@ import { Fragment, useState } from "react"; // Material UI -import { Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText, MenuItem } from "@mui/material"; +import { Collapse, List, ListItemButton, ListItemIcon, ListItemText, MenuItem } from "@mui/material"; import { Bookmarks, ChevronRight, ExpandMore, Web } from "@mui/icons-material"; import EditIcon from "@mui/icons-material/Edit"; import ArchiveIcon from "@mui/icons-material/Archive"; @@ -14,12 +14,12 @@ import { LfoItemComponent } from "../Lfo/LfoItemComponent"; import { EnvelopeItemComponent } from "../Envelope/EnvelopeItemComponent"; // Template -import { SettingsMenu } from "@/components/Template/SettingsMenu"; import { ListItemSecondaryText } from "@/components/Template/ListItemSecondaryText"; +import { DefaultListItem } from "@/components/Template/DefaultListItem"; // Functions import { getIndentSize } from "@/functions/helpers"; -import { getBgColorForElementType, getFgColorForElementType } from "@/functions/styles"; +import { getFgColorForElementType } from "@/functions/styles"; export function ModulatorsItemComponent({ modulatorsItem }) { const [isExpanded, setIsExpanded] = useState(false); @@ -67,7 +67,7 @@ export function ModulatorsItemComponent({ modulatorsItem }) { envelope: 0, lfo: 0 }; - modulatorsItem.childElements.forEach((childElement) => { + modulatorsItem.childElements?.forEach((childElement) => { if (childElementTypes[childElement.elementType] !== undefined) { childElementTypes[childElement.elementType]++; } @@ -101,12 +101,10 @@ export function ModulatorsItemComponent({ modulatorsItem }) { return ( {/* */} - - } + console.log("onClick")} > - - - - {modulatorsItem?.childElements?.length && - modulatorsItem.childElements.map((childElement) => renderChildElement(childElement))} - - + + {hasChildren() && ( + + + {!!modulatorsItem?.childElements?.length && + modulatorsItem.childElements.map((childElement) => renderChildElement(childElement))} + + + )} ); } diff --git a/src/components/DecentSampler/Note/NoteItem.js b/src/components/DecentSampler/Note/NoteItemComponent.js similarity index 73% rename from src/components/DecentSampler/Note/NoteItem.js rename to src/components/DecentSampler/Note/NoteItemComponent.js index a33d5fa..e1da9aa 100644 --- a/src/components/DecentSampler/Note/NoteItem.js +++ b/src/components/DecentSampler/Note/NoteItemComponent.js @@ -3,21 +3,20 @@ import { Fragment, useContext, useState } from "react"; // Material UI import MenuItem from "@mui/material/MenuItem"; -import EditIcon from "@mui/icons-material/Edit"; -import { Chip, Collapse, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; +import { Chip, Collapse, List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; import { ChevronRight, ExpandMore, Folder, ToggleOn } from "@mui/icons-material"; // Components import { BindingItemComponent } from "../Binding/BindingItemComponent"; // Template -import { SettingsMenu } from "@/components/Template/SettingsMenu"; import { IconAdd } from "@/components/Template/Icons/IconAdd"; import { ListItemSecondaryText } from "@/components/Template/ListItemSecondaryText"; +import { DefaultListItem } from "@/components/Template/DefaultListItem"; // Functions import { getIndentSize } from "@/functions/helpers"; -import { getBgColorForElementType, getFgColorForElementType } from "@/functions/styles"; +import { getFgColorForElementType } from "@/functions/styles"; // Store import DecentSamplerContext from "@/store/DecentSamplerContext"; @@ -95,22 +94,10 @@ export function NoteItemComponent({ noteItem }) { return ( - - console.log("onClick")} - > - - - - - } + console.log("onClick")} > - - - - {noteItem?.childElements?.length && - noteItem.childElements.map((childElement) => renderChildElement(childElement))} - - + + {hasChildren() && ( + + + {!!noteItem?.childElements?.length && + noteItem.childElements.map((childElement) => renderChildElement(childElement))} + + + )} ); } diff --git a/src/components/DecentSampler/NoteSequences/NoteSequencesItem.js b/src/components/DecentSampler/NoteSequences/NoteSequencesItem.js index 5e99575..aa2b163 100644 --- a/src/components/DecentSampler/NoteSequences/NoteSequencesItem.js +++ b/src/components/DecentSampler/NoteSequences/NoteSequencesItem.js @@ -3,21 +3,20 @@ import { Fragment, useContext, useState } from "react"; // Material UI import MenuItem from "@mui/material/MenuItem"; -import EditIcon from "@mui/icons-material/Edit"; -import { Collapse, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; +import { Collapse, List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; import { ChevronRight, ExpandMore, Folder, Topic } from "@mui/icons-material"; // Components import { SequenceItemComponent } from "../Sequence/SequenceItem"; // Template -import { SettingsMenu } from "@/components/Template/SettingsMenu"; import { IconAdd } from "@/components/Template/Icons/IconAdd"; import { ListItemSecondaryText } from "@/components/Template/ListItemSecondaryText"; +import { DefaultListItem } from "@/components/Template/DefaultListItem"; // Functions import { getIndentSize } from "@/functions/helpers"; -import { getBgColorForElementType, getFgColorForElementType } from "@/functions/styles"; +import { getFgColorForElementType } from "@/functions/styles"; // Store import DecentSamplerContext from "@/store/DecentSamplerContext"; @@ -59,7 +58,8 @@ export function NoteSequencesItemComponent({ noteSequencesItem }) { const primaryText = "Note sequences"; const secondaryText = ( - {noteSequencesItem?.childElements?.length || 0} {noteSequencesItem?.childElements?.length === 1 ? "sequence" : "sequences"} + {noteSequencesItem?.childElements?.length || 0}{" "} + {noteSequencesItem?.childElements?.length === 1 ? "sequence" : "sequences"} ); @@ -74,40 +74,32 @@ export function NoteSequencesItemComponent({ noteSequencesItem }) { return ( - - console.log("onClick")} - > - - - - - } + console.log("onClick")} > setIsExpanded(!isExpanded)} > {hasChildren() ? isExpanded ? : : null} - + - - - - {noteSequencesItem?.childElements?.length && - noteSequencesItem.childElements.map((childElement) => renderChildElement(childElement))} - - + + {hasChildren() && ( + + + {!!noteSequencesItem?.childElements?.length && + noteSequencesItem.childElements.map((childElement) => renderChildElement(childElement))} + + + )} ); } diff --git a/src/components/DecentSampler/Option/OptionItemComponent.js b/src/components/DecentSampler/Option/OptionItemComponent.js index aa21a82..be2c7f5 100644 --- a/src/components/DecentSampler/Option/OptionItemComponent.js +++ b/src/components/DecentSampler/Option/OptionItemComponent.js @@ -3,21 +3,20 @@ import { Fragment, useContext, useState } from "react"; // Material UI import MenuItem from "@mui/material/MenuItem"; -import EditIcon from "@mui/icons-material/Edit"; -import { Chip, Collapse, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; +import { Chip, Collapse, List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; import { ChevronRight, ExpandMore, Folder, MenuOpen } from "@mui/icons-material"; // Components import { BindingItemComponent } from "../Binding/BindingItemComponent"; // Template -import { SettingsMenu } from "@/components/Template/SettingsMenu"; import { IconAdd } from "@/components/Template/Icons/IconAdd"; import { ListItemSecondaryText } from "@/components/Template/ListItemSecondaryText"; +import { DefaultListItem } from "@/components/Template/DefaultListItem"; // Functions import { getIndentSize } from "@/functions/helpers"; -import { getBgColorForElementType, getFgColorForElementType } from "@/functions/styles"; +import { getFgColorForElementType } from "@/functions/styles"; // Store import DecentSamplerContext from "@/store/DecentSamplerContext"; @@ -79,22 +78,10 @@ export function OptionItemComponent({ optionItem }) { return ( - - console.log("onClick")} - > - - - - - } + console.log("onClick")} > - - - - {optionItem?.childElements?.length && - optionItem.childElements.map((childElement) => renderChildElement(childElement))} - - + + {hasChildren() && ( + + + {!!optionItem?.childElements?.length && + optionItem.childElements.map((childElement) => renderChildElement(childElement))} + + + )} ); } diff --git a/src/components/DecentSampler/Sample/SampleItemComponent.js b/src/components/DecentSampler/Sample/SampleItemComponent.js index c75cd64..8ec8a94 100644 --- a/src/components/DecentSampler/Sample/SampleItemComponent.js +++ b/src/components/DecentSampler/Sample/SampleItemComponent.js @@ -2,7 +2,7 @@ import { Fragment, useState } from "react"; // Material UI -import { IconButton, ListItem, ListItemButton, ListItemIcon, ListItemText, MenuItem } from "@mui/material"; +import { ListItemButton, ListItemIcon, ListItemText, MenuItem } from "@mui/material"; import EditIcon from "@mui/icons-material/Edit"; import ArchiveIcon from "@mui/icons-material/Archive"; import FileCopyIcon from "@mui/icons-material/FileCopy"; @@ -13,12 +13,12 @@ import { AudioFile, RestorePage } from "@mui/icons-material"; import { EditSampleItemDialog } from "./Dialogs/EditSampleItemDialog"; // Template -import { SettingsMenu } from "../../Template/SettingsMenu"; import { ListItemSecondaryText } from "@/components/Template/ListItemSecondaryText"; +import { DefaultListItem } from "@/components/Template/DefaultListItem"; // Functions import { getIndentSize } from "@/functions/helpers"; -import { getBgColorForElementType, getFgColorForElementType } from "@/functions/styles"; +import { getFgColorForElementType } from "@/functions/styles"; export function SampleItemComponent({ sampleItem }) { const [isExpanded, setIsExpanded] = useState(false); @@ -70,22 +70,10 @@ export function SampleItemComponent({ sampleItem }) { return ( - - handleClickOpenEditSampleItemDialog()} - > - - - - - } + - + - - console.log("onClick")} - > - - - - - } + console.log("onClick")} > - - - - {sequenceItem?.childElements?.length && - sequenceItem.childElements.map((childElement) => renderChildElement(childElement))} - - + + {hasChildren() && ( + + + {!!sequenceItem?.childElements?.length && + sequenceItem.childElements.map((childElement) => renderChildElement(childElement))} + + + )} ); } diff --git a/src/components/DecentSampler/State/StateItemComponent.js b/src/components/DecentSampler/State/StateItemComponent.js index e7e41f8..697504a 100644 --- a/src/components/DecentSampler/State/StateItemComponent.js +++ b/src/components/DecentSampler/State/StateItemComponent.js @@ -3,21 +3,20 @@ import { Fragment, useContext, useState } from "react"; // Material UI import MenuItem from "@mui/material/MenuItem"; -import EditIcon from "@mui/icons-material/Edit"; -import { Chip, Collapse, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; +import { Chip, Collapse, List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; import { ChevronRight, ExpandMore, Folder, ToggleOn } from "@mui/icons-material"; // Components import { BindingItemComponent } from "../Binding/BindingItemComponent"; // Template -import { SettingsMenu } from "@/components/Template/SettingsMenu"; import { IconAdd } from "@/components/Template/Icons/IconAdd"; import { ListItemSecondaryText } from "@/components/Template/ListItemSecondaryText"; +import { DefaultListItem } from "@/components/Template/DefaultListItem"; // Functions import { getIndentSize } from "@/functions/helpers"; -import { getBgColorForElementType, getFgColorForElementType } from "@/functions/styles"; +import { getFgColorForElementType } from "@/functions/styles"; // Store import DecentSamplerContext from "@/store/DecentSamplerContext"; @@ -79,22 +78,10 @@ export function StateItemComponent({ stateItem }) { return ( - - console.log("onClick")} - > - - - - - } + console.log("onClick")} > - - - - {stateItem?.childElements?.length && - stateItem.childElements.map((childElement) => renderChildElement(childElement))} - - + + {hasChildren() && ( + + + {!!stateItem?.childElements?.length && + stateItem.childElements.map((childElement) => renderChildElement(childElement))} + + + )} ); } diff --git a/src/components/DecentSampler/Tab/TabItemComponent.js b/src/components/DecentSampler/Tab/TabItemComponent.js index 491e27a..0fb9c4f 100644 --- a/src/components/DecentSampler/Tab/TabItemComponent.js +++ b/src/components/DecentSampler/Tab/TabItemComponent.js @@ -3,17 +3,7 @@ import { Fragment, useContext, useState } from "react"; // Material UI import MenuItem from "@mui/material/MenuItem"; -import EditIcon from "@mui/icons-material/Edit"; -import { - Collapse, - IconButton, - List, - ListItem, - ListItemButton, - ListItemIcon, - ListItemText, - ListSubheader -} from "@mui/material"; +import { Collapse, List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; import { ChevronRight, ExpandMore, Folder, Tab } from "@mui/icons-material"; // Components @@ -23,12 +13,12 @@ import { MenuItemComponent } from "../Menu/MenuItemComponent"; // Template import { IconAdd } from "@/components/Template/Icons/IconAdd"; -import { SettingsMenu } from "@/components/Template/SettingsMenu"; import { ListItemSecondaryText } from "@/components/Template/ListItemSecondaryText"; +import { DefaultListItem } from "@/components/Template/DefaultListItem"; // Functions import { getIndentSize } from "@/functions/helpers"; -import { getBgColorForElementType, getFgColorForElementType } from "@/functions/styles"; +import { getFgColorForElementType } from "@/functions/styles"; // Store import DecentSamplerContext from "@/store/DecentSamplerContext"; @@ -119,22 +109,10 @@ export function TabItemComponent({ tabItem }) { return ( - - console.log("onClick")} - > - - - - - } + console.log("onClick")} > - - - - {tabItem?.childElements?.length && - tabItem.childElements.map((childElement) => renderChildElement(childElement))} - - + + {hasChildren() && ( + + + {!!tabItem?.childElements?.length && + tabItem.childElements.map((childElement) => renderChildElement(childElement))} + + + )} ); } diff --git a/src/components/DecentSampler/Tag/TagItemComponent.js b/src/components/DecentSampler/Tag/TagItemComponent.js index 4ef3579..c2baaad 100644 --- a/src/components/DecentSampler/Tag/TagItemComponent.js +++ b/src/components/DecentSampler/Tag/TagItemComponent.js @@ -2,35 +2,31 @@ import { Fragment, useState } from "react"; // Material UI -import { IconButton, ListItem, ListItemButton, ListItemIcon, ListItemText, MenuItem } from "@mui/material"; +import { ListItemButton, ListItemIcon, ListItemText, MenuItem } from "@mui/material"; import EditIcon from "@mui/icons-material/Edit"; import ArchiveIcon from "@mui/icons-material/Archive"; import FileCopyIcon from "@mui/icons-material/FileCopy"; import MoreHorizIcon from "@mui/icons-material/MoreHoriz"; +import { Label, LabelOff } from "@mui/icons-material"; // Template -import { SettingsMenu } from "@/components/Template/SettingsMenu"; -import { IconColor } from "@/components/Template/Icons/IconColor"; import { ListItemSecondaryText } from "@/components/Template/ListItemSecondaryText"; +import { DefaultListItem } from "@/components/Template/DefaultListItem"; // Functions import { getIndentSize } from "@/functions/helpers"; -import { getBgColorForElementType, getFgColorForElementType } from "@/functions/styles"; - -// Data -import midiNotes from "@/data/midiNotes"; -import { Label, LabelOff, Tag } from "@mui/icons-material"; +import { getFgColorForElementType } from "@/functions/styles"; export function TagItemComponent({ tagItem }) { const [isExpanded, setIsExpanded] = useState(false); - const [editColorItemDialogIsOpen, setEditColorItemDialogIsOpen] = useState(false); + const [editTagItemDialogIsOpen, setEditTagItemDialogIsOpen] = useState(false); - const handleClickOpenEditColorItemDialog = () => { - setEditColorItemDialogIsOpen(true); + const handleClickOpenEditTagItemDialog = () => { + setEditTagItemDialogIsOpen(true); }; - const handleCloseEditColorItemDialog = () => { - setEditColorItemDialogIsOpen(false); + const handleCloseEditTagItemDialog = () => { + setEditTafItemDialogIsOpen(false); }; const settingsMenuItems = ( @@ -64,22 +60,10 @@ export function TagItemComponent({ tagItem }) { return ( - - handleClickOpenEditColorItemDialog()} - > - - - - - } + setIsExpanded(!isExpanded)}> @@ -87,7 +71,7 @@ export function TagItemComponent({ tagItem }) { - + ); } diff --git a/src/components/DecentSampler/Tags/TagsItemComponent.js b/src/components/DecentSampler/Tags/TagsItemComponent.js index 8a8e3d9..186a674 100644 --- a/src/components/DecentSampler/Tags/TagsItemComponent.js +++ b/src/components/DecentSampler/Tags/TagsItemComponent.js @@ -2,7 +2,7 @@ import { Fragment, useState } from "react"; // Material UI -import { Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText, MenuItem } from "@mui/material"; +import { Collapse, List, ListItemButton, ListItemIcon, ListItemText, MenuItem } from "@mui/material"; import { Bookmarks, ChevronRight, ExpandMore, Web } from "@mui/icons-material"; import EditIcon from "@mui/icons-material/Edit"; import ArchiveIcon from "@mui/icons-material/Archive"; @@ -10,17 +10,15 @@ import FileCopyIcon from "@mui/icons-material/FileCopy"; import MoreHorizIcon from "@mui/icons-material/MoreHoriz"; // Components -import { KeyboardItemComponent } from "../Keyboard/KeyboardItemComponent"; -import { TabItemComponent } from "../Tab/TabItemComponent"; +import { TagItemComponent } from "../Tag/TagItemComponent"; // Template -import { SettingsMenu } from "@/components/Template/SettingsMenu"; import { ListItemSecondaryText } from "@/components/Template/ListItemSecondaryText"; +import { DefaultListItem } from "@/components/Template/DefaultListItem"; // Functions import { getIndentSize } from "@/functions/helpers"; -import { getBgColorForElementType, getFgColorForElementType } from "@/functions/styles"; -import { TagItemComponent } from "../Tag/TagItemComponent"; +import { getFgColorForElementType } from "@/functions/styles"; export function TagsItemComponent({ tagsItem }) { const [isExpanded, setIsExpanded] = useState(false); @@ -74,11 +72,10 @@ export function TagsItemComponent({ tagsItem }) { return ( - {/* */} - } + console.log("onClick")} > - - - - {tagsItem?.childElements?.length && - tagsItem.childElements.map((childElement) => renderChildElement(childElement))} - - + + {hasChildren() && ( + + + {!!tagsItem?.childElements?.length && + tagsItem.childElements.map((childElement) => renderChildElement(childElement))} + + + )} ); } diff --git a/src/components/DecentSampler/Ui/UiItemComponent.js b/src/components/DecentSampler/Ui/UiItemComponent.js index 12a7ccc..7603718 100644 --- a/src/components/DecentSampler/Ui/UiItemComponent.js +++ b/src/components/DecentSampler/Ui/UiItemComponent.js @@ -2,7 +2,7 @@ import { Fragment, useState } from "react"; // Material UI -import { Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText, MenuItem } from "@mui/material"; +import { Collapse, List, ListItemButton, ListItemIcon, ListItemText, MenuItem } from "@mui/material"; import { ChevronRight, ExpandMore, Web } from "@mui/icons-material"; import EditIcon from "@mui/icons-material/Edit"; import ArchiveIcon from "@mui/icons-material/Archive"; @@ -14,12 +14,12 @@ import { KeyboardItemComponent } from "../Keyboard/KeyboardItemComponent"; import { TabItemComponent } from "../Tab/TabItemComponent"; // Template -import { SettingsMenu } from "@/components/Template/SettingsMenu"; import { ListItemSecondaryText } from "@/components/Template/ListItemSecondaryText"; +import { DefaultListItem } from "@/components/Template/DefaultListItem"; // Functions import { getIndentSize } from "@/functions/helpers"; -import { getBgColorForElementType, getFgColorForElementType } from "@/functions/styles"; +import { getFgColorForElementType } from "@/functions/styles"; export function UiItemComponent({ uiItem }) { const [isExpanded, setIsExpanded] = useState(false); @@ -74,11 +74,10 @@ export function UiItemComponent({ uiItem }) { return ( - {/* */} - } + console.log("click")} > - - - - {uiItem?.childElements?.length && - uiItem.childElements.map((childElement) => renderChildElement(childElement))} - - + + {hasChildren() && ( + + + {!!uiItem?.childElements?.length && + uiItem.childElements.map((childElement) => renderChildElement(childElement))} + + + )} ); }