fix(core): 🐛 coreForm data driven from props in CoreDataTableDetailsPane

coreForm data driven from props in CoreDataTableDetailsPane Ref: #258
wrappid · Jul 6, 2024 · 13820c1 · 13820c1
1 parent 6b17306
commit 13820c1
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/package/components/dataDisplay/dataTable/CoreDataTable.js b/package/components/dataDisplay/dataTable/CoreDataTable.js
@@ -170,6 +170,7 @@ export default function CoreDataTable(props) {
     hideForm = false,
     hideCreateForm = false,
     hideUpdateForm = false,
+    formMode: formModeProps = FORM_VIEW_MODE,
     createFormID = null,
     updateFormID = null,
     // table props
@@ -180,6 +181,7 @@ export default function CoreDataTable(props) {
     afterCreateError, // function to be called after successfull Create
     afterDeleteSuccess, // function to be called after successfull Delete
     afterDeleteError, // function to be called after successfull Delete
+    afterEditCancel, // function to be called after cancel button click on edit form
     hideAuditDataDetailPane, //flag for hiding audit info in details pane
     preOnCreate, //function to be called when create button in clicked
     openCreateOnMount, //if true the details pane will be opened and create form will be shown
@@ -245,7 +247,11 @@ export default function CoreDataTable(props) {
   const [selected, setSelected] = React.useState([]);
   const [detailedRowId, setDetailedRowId] = React.useState(null);
   const [detailedRowData, setDetailedRowData] = React.useState(null);
-  const [formMode, setFormMode] = React.useState(FORM_VIEW_MODE);
+  const [formMode, setFormMode] = React.useState(formModeProps);
+
+  React.useEffect(() => {
+    setFormMode(formModeProps);
+  }, [formModeProps]);
 
   React.useEffect(() => {
     if (detailedRowData)
@@ -914,6 +920,7 @@ export default function CoreDataTable(props) {
           afterCreateError={afterCreateError}
           afterDeleteSuccess={afterDeleteSuccess}
           afterDeleteError={afterDeleteError}
+          afterEditCancel={afterEditCancel}
           hideAuditDataDetailPane={hideAuditDataDetailPane}
           platform={platform}
         />

diff --git a/package/components/dataDisplay/dataTable/CoreDataTableDetailsPane.js b/package/components/dataDisplay/dataTable/CoreDataTableDetailsPane.js
@@ -63,6 +63,7 @@ export default function CoreDataTableDetailsPane(props) {
     _expandedDevJSONSchema,
     set_expandedDevJSONSchema,
     _showDetailsPane,
+    afterEditCancel,
     afterEditSuccess,
     afterEditError,
     afterCreateSuccess,
@@ -71,6 +72,7 @@ export default function CoreDataTableDetailsPane(props) {
     afterDeleteError,
     hideAuditDataDetailPane,
     platform,
+    updateFormAPIMode // api mode
   } = props;
 
   const { config } = React.useContext(WrappidDataContext);
@@ -241,14 +243,20 @@ export default function CoreDataTableDetailsPane(props) {
                     <CoreDivider />
 
                     <CoreForm
-                      apiMode={"edit"}
+                      apiMode={updateFormAPIMode}
                       onMountRead={false}
                       formId={updateFormID}
                       mode={formMode}
                       allowEdit={editable}
                       allowDelete={deletable}
                       initData={detailedRowData}
                       afterCancel={() => {
+                        if (
+                          afterEditCancel &&
+                        typeof afterEditCancel === "function"
+                        ) {
+                          afterEditCancel();
+                        }
                         setFormMode(FORM_VIEW_MODE);
                       }}
                       afterEditSuccess={() => {