From c570858190f70a454102311580892b29001ba04b Mon Sep 17 00:00:00 2001 From: andrearutrecht <122883866+andrearutrecht@users.noreply.github.com> Date: Tue, 28 Jan 2025 08:59:53 +0100 Subject: [PATCH] Use `EditDialog` instead of MUI's `Dialog` in best practices stories (#2901) --- .../GridAndFormLayouts.stories.tsx | 154 ++++++------------ 1 file changed, 53 insertions(+), 101 deletions(-) diff --git a/storybook/src/docs/bestPractices/GridAndFormLayouts.stories.tsx b/storybook/src/docs/bestPractices/GridAndFormLayouts.stories.tsx index 6d40787c0a..276e1a1d88 100644 --- a/storybook/src/docs/bestPractices/GridAndFormLayouts.stories.tsx +++ b/storybook/src/docs/bestPractices/GridAndFormLayouts.stories.tsx @@ -1,6 +1,5 @@ import { Button, - CancelButton, CrudMoreActionsMenu, DataGridToolbar, FieldSet, @@ -11,7 +10,6 @@ import { GridColDef, GridFilterButton, Loading, - OkayButton, RouterTab, RouterTabs, SaveBoundary, @@ -28,9 +26,10 @@ import { ToolbarAutomaticTitleItem, ToolbarBackButton, ToolbarItem, + useEditDialog, } from "@comet/admin"; import { Add, Edit, Html, Select as SelectIcon } from "@comet/admin-icons"; -import { Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Typography } from "@mui/material"; +import { IconButton, Typography } from "@mui/material"; import { DataGrid, GridSelectionModel, GridToolbarQuickFilter } from "@mui/x-data-grid"; import { useEffect, useState } from "react"; @@ -198,20 +197,19 @@ export const LargeFormOnAPage = { export const SimpleFormInADialog = { render: () => { - const Form = ({ id }: { id?: string }) => { + const Form = ({ id, mode = "add" }: { id?: string; mode?: "edit" | "add" }) => { const { rows, loading } = useData(); - const editingExistingItem = Boolean(id); - if (editingExistingItem && loading) { + if (mode === "edit" && loading) { return ; } return ( { - // Submit data + onSubmit={async ({ title, description }) => { + window.alert(`title: ${title}\ndescription: ${description}`); }} - mode={editingExistingItem ? "edit" : "add"} + mode={mode} initialValues={rows.find((row) => row.id === id)} > @@ -220,33 +218,25 @@ export const SimpleFormInADialog = { ); }; - const [showDialog, setShowDialog] = useState(true); // In a real application, this would generally be `false` by default - const editingId: string | undefined = undefined; // In a real application, this would be set when editing an existing item + const [EditDialog, { id: selectedId, mode }, editDialogApi] = useEditDialog(); return ( - setShowDialog(false)}> + <> - + Open the dialog to see the form. - setShowDialog(false)}> - Dialog title - -
- - - setShowDialog(false)} /> - - -
- + + + + ); }, }; @@ -263,8 +253,8 @@ export const LargeFormInADialog = { return ( { - // Submit data + onSubmit={async ({ title, description }) => { + window.alert(`title: ${title}\ndescription: ${description}`); }} mode={editingExistingItem ? "edit" : "add"} initialValues={rows.find((row) => row.id === id)} @@ -286,33 +276,25 @@ export const LargeFormInADialog = { ); }; - const [showDialog, setShowDialog] = useState(true); // In a real application, this would generally be `false` by default - const editingId: string | undefined = undefined; // In a real application, this would be set when editing an existing item + const [EditDialog, { id: selectedId }, editDialogApi] = useEditDialog(); return ( - setShowDialog(false)}> + <> - + Open the dialog to see the form. - setShowDialog(false)}> - Dialog title - - - - - setShowDialog(false)} /> - - - + + + - + ); }, }; @@ -408,8 +390,8 @@ export const GridWithFormInADialog = { return ( { - // Submit data + onSubmit={async ({ title, description }) => { + window.alert(`title: ${title}\ndescription: ${description}`); }} mode={editingExistingItem ? "edit" : "add"} initialValues={rows.find((row) => row.id === id)} @@ -420,7 +402,7 @@ export const GridWithFormInADialog = { ); }; - const [editingId, setEditingId] = useState(); + const [EditDialog, { id: selectedId, mode }, editDialogApi] = useEditDialog(); const { rows, loading } = useData(); const GridToolbar = () => { @@ -434,7 +416,7 @@ export const GridWithFormInADialog = { - @@ -450,7 +432,7 @@ export const GridWithFormInADialog = { headerName: "", width: 52, renderCell: ({ row }) => ( - setEditingId(row.id)}> + editDialogApi.openEditDialog(row.id)}> ), @@ -466,18 +448,9 @@ export const GridWithFormInADialog = { - setEditingId(undefined)}> - setEditingId(undefined)}> - {editingId === "add" ? "Add new item" : `${rows.find((row) => row.id === editingId)?.title}`} - - - - - setEditingId(undefined)} /> - - - - + row.id === selectedId)?.title}`}> + + ); }, @@ -495,8 +468,8 @@ export const GridWithFormOnAPage = { return ( { - // Submit data + onSubmit={async ({ title, description }) => { + window.alert(`title: ${title}\ndescription: ${description}`); }} mode={editingExistingItem ? "edit" : "add"} initialValues={rows.find((row) => row.id === id)} @@ -606,8 +579,8 @@ export const NestedGridsAndFormsWithTabs = { return ( { - // Submit data + onSubmit={async ({ title, description }) => { + window.alert(`title: ${title}\ndescription: ${description}`); }} mode={editingExistingItem ? "edit" : "add"} initialValues={rows.find((row) => row.id === id)} @@ -618,7 +591,7 @@ export const NestedGridsAndFormsWithTabs = { ); }; - const [showAddDialog, setShowAddDialog] = useState(false); + const [EditDialog, , editDialogApi] = useEditDialog(); const { rows, loading } = useData(); const GridToolbar = () => { @@ -632,7 +605,7 @@ export const NestedGridsAndFormsWithTabs = { - @@ -707,18 +680,9 @@ export const NestedGridsAndFormsWithTabs = { }} - setShowAddDialog(false)}> - setShowAddDialog(false)}> - Add new item - - - - - setShowAddDialog(false)} /> - - - - + + + ); }, @@ -736,8 +700,8 @@ export const NestedFormInGridInTabsInGrid = { return ( { - // Submit data + onSubmit={async ({ title, description }) => { + window.alert(`title: ${title}\ndescription: ${description}`); }} mode={editingExistingItem ? "edit" : "add"} initialValues={rows.find((row) => row.id === id)} @@ -748,7 +712,7 @@ export const NestedFormInGridInTabsInGrid = { ); }; - const [showAddDialog, setShowAddDialog] = useState(false); + const [EditDialog, , editDialogApi] = useEditDialog(); const { rows, loading } = useData(); const GridToolbar = () => { @@ -762,7 +726,7 @@ export const NestedFormInGridInTabsInGrid = { - @@ -852,18 +816,9 @@ export const NestedFormInGridInTabsInGrid = { }} - setShowAddDialog(false)}> - setShowAddDialog(false)}> - Add new item - - - - - setShowAddDialog(false)} /> - - - - + + + ); }, @@ -944,10 +899,11 @@ export const GridWithSelectionAndMoreActionsMenu = { export const GridWithSelectionInDialog = { render: () => { - const [showDialog, setShowDialog] = useState(true); // In a real application, this would generally be `false` by default - const [selectionModel, setSelectionModel] = useState([]); // TODO: Check why this is reset every time the dialog is opened. Is this only in storybook? + const [selectionModel, setSelectionModel] = useState([]); const { rows, loading } = useData(); + const [EditDialog, , editDialogApi] = useEditDialog(); + const GridToolbar = () => { return ( @@ -973,7 +929,7 @@ export const GridWithSelectionInDialog = { - @@ -1001,8 +957,7 @@ export const GridWithSelectionInDialog = { No items selected :( )} - setShowDialog(false)}> - Selected items + editDialogApi.closeDialog()} title="Selected items"> - - setShowDialog(false)} /> - - + ); },