fix: don't allow adding/removing groups & items in non-editable presets

This commit is contained in:
thecodrr
2022-07-01 16:07:22 +05:00
parent ec16a02eb9
commit 6ec5937a15
2 changed files with 33 additions and 26 deletions

View File

@@ -7,6 +7,7 @@ export type Preset = {
id: PresetId;
title: string;
tools: ToolbarGroupDefinition[];
editable?: boolean;
};
const presets: Record<PresetId, Preset> = {
default: { id: "default", title: "Default", tools: DEFAULT_TOOLS },
@@ -25,7 +26,7 @@ const presets: Record<PresetId, Preset> = {
],
],
},
custom: { id: "custom", title: "Custom", tools: [] },
custom: { id: "custom", title: "Custom", tools: [], editable: true },
};
export function getCurrentPreset() {

View File

@@ -124,22 +124,24 @@ export function ToolbarConfigDialog(props: ToolbarConfigDialogProps) {
</Label>
))}
</Flex>
<Button
variant={"secondary"}
sx={{
display: "flex",
flexShrink: 0,
alignItems: "center",
p: 1,
}}
title="Add group"
onClick={() => {
setItems(addGroup);
showToast("success", "Group added successfully");
}}
>
<Icon path={Icons.plus} color="text" size={18} />
</Button>
{currentPreset.editable && (
<Button
variant={"secondary"}
sx={{
display: "flex",
flexShrink: 0,
alignItems: "center",
p: 1,
}}
title="Add group"
onClick={() => {
setItems(addGroup);
showToast("success", "Group added successfully");
}}
>
<Icon path={Icons.plus} color="text" size={18} />
</Button>
)}
</Flex>
<DndContext
@@ -184,6 +186,10 @@ export function ToolbarConfigDialog(props: ToolbarConfigDialogProps) {
const hasSubGroup =
isGroup(item) &&
!!getGroup(items, item.id)?.items.some((t) => isSubgroup(t));
const canAddSubGroup =
currentPreset.editable && !deleted && !hasSubGroup;
const canRemoveGroup = currentPreset.editable && !deleted;
const canRemoveItem = currentPreset.editable && !deleted;
return (
<TreeNodeComponent
@@ -191,26 +197,26 @@ export function ToolbarConfigDialog(props: ToolbarConfigDialogProps) {
item={item}
activeItem={activeItem}
onAddSubGroup={
deleted || hasSubGroup
? undefined
: () => {
canAddSubGroup
? () => {
setItems((items) => addSubGroup(items, item.id));
showToast("success", "Subgroup added successfully");
}
: undefined
}
onRemoveGroup={
deleted
? undefined
: (group) => {
canRemoveGroup
? (group) => {
setItems(removeGroup(items, group.id));
}
: undefined
}
onRemoveItem={
deleted
? undefined
: (item) => {
canRemoveItem
? (item) => {
setItems(removeItem(items, item.id));
}
: undefined
}
/>
);