Allow DefaultTabRenderer to be reused

eea · Sep 8, 2020 · 1f39d59 · 1f39d59
1 parent 517f0eb
commit 1f39d59
Showing 1 changed file with 36 additions and 6 deletions.
diff --git a/src/Tabs/DefaultTabsRenderer.jsx b/src/Tabs/DefaultTabsRenderer.jsx
@@ -59,7 +59,15 @@ const DefaultTabsRenderer = (props) => {
   const blocksFieldname = getBlocksFieldname(properties);
 
   const renderTab = React.useCallback(
-    (index, tab) => {
+    ({
+      index,
+      tab,
+      tabsLayout,
+      properties,
+      intl,
+      blocksFieldname,
+      pathname,
+    }) => {
       const blockIds = tabsLayout[index] || [];
       const blocklist = blockIds.map((blockId) => {
         return [blockId, properties[blocksFieldname]?.[blockId]];
@@ -89,25 +97,47 @@ const DefaultTabsRenderer = (props) => {
         </Tab.Pane>
       );
     },
-    [tabsLayout, intl, blocksFieldname, pathname, properties], // TODO: fill in the rest of the array
+    [],
   );
   const menu = getMenu(props);
+  const tabRenderer = props.renderTab || renderTab;
 
   return tabs.length ? (
     <Tab
       grid={GRID}
       menu={menu}
       onTabChange={onTabChange}
       activeIndex={globalActiveTab}
-      panes={tabs.map((child, index) => ({
-        render: () => mode === 'view' && renderTab(index, child),
-        menuItem: child.title,
+      panes={tabs.map((tab, index) => ({
+        // render: () => mode === 'view' && renderTab(index, child),
+        render: () =>
+          mode === 'view' &&
+          tabRenderer({
+            index,
+            tab,
+            tabsLayout,
+            properties,
+            intl,
+            blocksFieldname,
+            pathname,
+          }),
+        menuItem: tab.title,
       }))}
     />
   ) : (
     <>
       <hr className="block section" />
-      {mode === 'view' ? renderTab(0, {}) : ''}
+      {mode === 'view'
+        ? tabRenderer({
+            index: 0,
+            tab: {},
+            tabsLayout,
+            properties,
+            intl,
+            blocksFieldname,
+            pathname,
+          })
+        : ''}
     </>
   );
 };