Skip to content

Commit

Permalink
Implement custom list item component and improve null checks
Browse files Browse the repository at this point in the history
  • Loading branch information
@benjamindehli
benjamindehli committed Apr 25, 2024
1 parent 75a1044 commit 9b68b88
Show file tree
Hide file tree
Showing 24 changed files with 345 additions and 604 deletions.
41 changes: 16 additions & 25 deletions src/components/DecentSampler/Binding/BindingItemComponent.js
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -58,7 +61,7 @@ export function BindingItemComponent({ bindingItem }) {
});
}

/* useEffect(() => {
/* useEffect(() => {
const controllableParameter = getControlParameterForBindingItem(bindingItem);
setControllableParameterForBinding(controllableParameter);
if (!controllableParameter) {
Expand Down Expand Up @@ -98,22 +101,10 @@ export function BindingItemComponent({ bindingItem }) {

return (
<Fragment>
<ListItem
sx={{ bgcolor: getBgColorForElementType(bindingItem?.elementType) }}
disablePadding
secondaryAction={
<Fragment>
<IconButton
edge="start"
aria-label="edit binding"
id={`${bindingItem?.id}-edit-button`}
onClick={() => handleClickOpenEditBindingItemDialog()}
>
<EditIcon />
</IconButton>
<SettingsMenu elementItem={bindingItem} menuItems={settingsMenuItems}></SettingsMenu>
</Fragment>
}
<DefaultListItem
elementItem={bindingItem}
settingsMenuItems={settingsMenuItems}
onEditButtonClick={handleClickOpenEditBindingItemDialog}
>
<ListItemButton
sx={{ pl: getIndentSize(bindingItem, false) }}
Expand All @@ -127,7 +118,7 @@ export function BindingItemComponent({ bindingItem }) {
</ListItemIcon>
<ListItemText primary={primaryText} secondary={secondaryText} />
</ListItemButton>
</ListItem>
</DefaultListItem>
<EditBindingItemDialog
bindingItem={bindingItem}
controllableParameters={controllableParameters}
Expand Down
43 changes: 16 additions & 27 deletions src/components/DecentSampler/Button/ButtonItemComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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, SmartButton } from "@mui/icons-material";

// Components
import { StateItemComponent } from "../State/StateItemComponent";

// 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";
Expand Down Expand Up @@ -76,22 +75,10 @@ export function ButtonItemComponent({ buttonItem }) {

return (
<Fragment>
<ListItem
sx={{ bgcolor: getBgColorForElementType(buttonItem?.elementType) }}
disablePadding
secondaryAction={
<Fragment>
<IconButton
edge="start"
aria-label="button edit button"
id={`${buttonItem?.id}-edit-button`}
onClick={() => console.log("onClick")}
>
<EditIcon />
</IconButton>
<SettingsMenu elementItem={buttonItem} menuItems={settingsMenuItems}></SettingsMenu>
</Fragment>
}
<DefaultListItem
elementItem={buttonItem}
settingsMenuItems={settingsMenuItems}
onEditButtonClick={() => console.log("onClick")}
>
<ListItemButton
sx={{ pl: getIndentSize(buttonItem, hasChildren()) }}
Expand All @@ -103,13 +90,15 @@ export function ButtonItemComponent({ buttonItem }) {
</ListItemIcon>
<ListItemText primary={primaryText} secondary={secondaryText} />
</ListItemButton>
</ListItem>
<Collapse in={isExpanded} timeout="auto" unmountOnExit>
<List dense component="div" disablePadding>
{buttonItem?.childElements?.length &&
buttonItem.childElements.map((childElement) => renderChildElement(childElement))}
</List>
</Collapse>
</DefaultListItem>
{hasChildren() && (
<Collapse in={isExpanded} timeout="auto" unmountOnExit>
<List dense component="div" disablePadding>
{!!buttonItem?.childElements?.length &&
buttonItem.childElements.map((childElement) => renderChildElement(childElement))}
</List>
</Collapse>
)}
</Fragment>
);
}
28 changes: 8 additions & 20 deletions src/components/DecentSampler/Color/ColorItemComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";
Expand Down Expand Up @@ -76,30 +76,18 @@ export function ColorItemComponent({ colorItem }) {

return (
<Fragment>
<ListItem
sx={{ bgcolor: getBgColorForElementType(colorItem?.elementType) }}
disablePadding
secondaryAction={
<Fragment>
<IconButton
edge="start"
aria-label="edit color"
id={`${colorItem?.id}-edit-button`}
onClick={() => handleClickOpenEditColorItemDialog()}
>
<EditIcon />
</IconButton>
<SettingsMenu elementItem={colorItem} menuItems={settingsMenuItems}></SettingsMenu>
</Fragment>
}
<DefaultListItem
elementItem={colorItem}
settingsMenuItems={settingsMenuItems}
onEditButtonClick={handleClickOpenEditColorItemDialog}
>
<ListItemButton sx={{ pl: getIndentSize(colorItem, false) }} onClick={() => setIsExpanded(!isExpanded)}>
<ListItemIcon sx={{ minWidth: "32px", color: getFgColorForElementType(colorItem?.elementType) }}>
<IconColor color={convertColorValueToHex(colorItem.color)} />
</ListItemIcon>
<ListItemText primary={primaryText} secondary={secondaryText} />
</ListItemButton>
</ListItem>
</DefaultListItem>
<EditColorItemDialog
colorItem={colorItem}
open={editColorItemDialogIsOpen}
Expand Down
32 changes: 10 additions & 22 deletions src/components/DecentSampler/Effect/EffectItemComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,23 @@
import { Fragment, useEffect, 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 { AudioFile, RestorePage } from "@mui/icons-material";
import { Tune } from "@mui/icons-material";

// Components
//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";

// Data
import effectTypesData from "@/data/effectTypes";
Expand Down Expand Up @@ -87,33 +87,21 @@ export function EffectItemComponent({ effectItem }) {

return (
<Fragment>
<ListItem
sx={{ bgcolor: getBgColorForElementType(effectItem?.elementType) }}
disablePadding
secondaryAction={
<Fragment>
<IconButton
edge="start"
aria-label="edit effect"
id={`${effectItem?.id}-edit-button`}
onClick={() => handleClickOpenEditSampleItemDialog()}
>
<EditIcon />
</IconButton>
<SettingsMenu elementItem={effectItem} menuItems={settingsMenuItems}></SettingsMenu>
</Fragment>
}
<DefaultListItem
elementItem={effectItem}
settingsMenuItems={settingsMenuItems}
onEditButtonClick={handleClickOpenEditSampleItemDialog}
>
<ListItemButton
sx={{ pl: getIndentSize(effectItem, false) }}
onClick={() => setIsExpanded(!isExpanded)}
>
<ListItemIcon sx={{ minWidth: "32px", color: getFgColorForElementType(effectItem?.elementType) }}>
<RestorePage />
<Tune />
</ListItemIcon>
<ListItemText primary={primaryText} secondary={secondaryText} />
</ListItemButton>
</ListItem>
</DefaultListItem>
{/*
<EditSampleItemDialog
sampleItem={sampleItem}
Expand Down
41 changes: 13 additions & 28 deletions src/components/DecentSampler/Effects/EffectsItemComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
import { DefaultListItem } from "@/components/Template/DefaultListItem";

// Components
import { EffectItemComponent } from "../Effect/EffectItemComponent";

// Template
import { SettingsMenu } from "@/components/Template/SettingsMenu";
import { IconAdd } from "@/components/Template/Icons/IconAdd";
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";
Expand Down Expand Up @@ -93,23 +92,7 @@ export function EffectsItemComponent({ effectsItem }) {

return (
<Fragment>
<ListItem
sx={{ bgcolor: getBgColorForElementType(effectsItem?.elementType) }}
disablePadding
secondaryAction={
<Fragment>
<IconButton
edge="start"
aria-label="edit effects"
id={`${effectsItem?.id}-edit-button`}
onClick={() => console.log("onClick")}
>
<EditIcon />
</IconButton>
<SettingsMenu elementItem={effectsItem} menuItems={settingsMenuItems}></SettingsMenu>
</Fragment>
}
>
<DefaultListItem elementItem={effectsItem} settingsMenuItems={settingsMenuItems}>
<ListItemButton
sx={{ pl: getIndentSize(effectsItem, hasChildren()) }}
onClick={() => setIsExpanded(!isExpanded)}
Expand All @@ -120,13 +103,15 @@ export function EffectsItemComponent({ effectsItem }) {
</ListItemIcon>
<ListItemText primary={primaryText} secondary={secondaryText} />
</ListItemButton>
</ListItem>
<Collapse in={isExpanded} timeout="auto" unmountOnExit>
<List dense component="div" disablePadding>
{effectsItem?.childElements?.length &&
effectsItem.childElements.map((childElement) => renderChildElement(childElement))}
</List>
</Collapse>
</DefaultListItem>
{hasChildren() && (
<Collapse in={isExpanded} timeout="auto" unmountOnExit>
<List dense component="div" disablePadding>
{!!effectsItem?.childElements?.length &&
effectsItem.childElements.map((childElement) => renderChildElement(childElement))}
</List>
</Collapse>
)}
</Fragment>
);
}
Loading

0 comments on commit 9b68b88

Please sign in to comment.