feat(dashboardeditor): added custom preview card renderer prop

carbon-design-system · Sep 22, 2020 · a32edaf · a32edaf
1 parent c38531b
commit a32edaf
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 21 deletions.
diff --git a/src/components/DashboardEditor/DashboardEditor.jsx b/src/components/DashboardEditor/DashboardEditor.jsx
@@ -14,16 +14,19 @@ const defaultProps = {
     layouts: {},
   },
   renderHeader: null,
+  renderCardPreview: null,
 };
 
 const propTypes = {
   /** initial dashboard data to edit */
   initialValue: PropTypes.array, // eslint-disable-line react/forbid-prop-types
   /** if provided, renders header content above preview */
   renderHeader: PropTypes.func,
+  /** if provided, is used to render cards in dashboard */
+  renderCardPreview: PropTypes.func,
 };
 
-const DashboardEditor = ({ initialValue, renderHeader }) => {
+const DashboardEditor = ({ initialValue, renderHeader, renderCardPreview }) => {
   const baseClassName = `${iotPrefix}--dashboard-editor`;
 
   // show the gallery if no card is being edited
@@ -58,25 +61,29 @@ const DashboardEditor = ({ initialValue, renderHeader }) => {
               })
             }
           >
-            {dashboardData.cards.map(i => (
-              <Card
-                id={i.id}
-                size={i.size}
-                title={i.title}
-                isEditable
-                availableActions={{ edit: true, delete: true }}
-                onCardAction={(id, actionId) => {
-                  if (actionId === CARD_ACTIONS.EDIT_CARD) {
-                    setSelectedCardId(id);
-                  }
-                  if (actionId === CARD_ACTIONS.DELETE_CARD) {
-                    removeCard(id);
-                  }
-                }}
-              >
-                <div style={{ padding: '1rem' }}>{JSON.stringify(i, null, 4)}</div>
-              </Card>
-            ))}
+            {dashboardData.cards.map(i =>
+              renderCardPreview ? (
+                renderCardPreview(i, setSelectedCardId, removeCard)
+              ) : (
+                <Card
+                  id={i.id}
+                  size={i.size}
+                  title={i.title}
+                  isEditable
+                  availableActions={{ edit: true, delete: true }}
+                  onCardAction={(id, actionId) => {
+                    if (actionId === CARD_ACTIONS.EDIT_CARD) {
+                      setSelectedCardId(id);
+                    }
+                    if (actionId === CARD_ACTIONS.DELETE_CARD) {
+                      removeCard(id);
+                    }
+                  }}
+                >
+                  <div style={{ padding: '1rem' }}>{JSON.stringify(i, null, 4)}</div>
+                </Card>
+              )
+            )}
           </DashboardGrid>
           <pre style={{ paddingTop: '4rem' }}>{JSON.stringify(dashboardData, null, 4)}</pre>
         </div>

diff --git a/src/components/DashboardEditor/DashboardEditor.story.jsx b/src/components/DashboardEditor/DashboardEditor.story.jsx
@@ -3,7 +3,8 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, object } from '@storybook/addon-knobs';
 
-import { PageTitleBar, Button } from '../../index';
+import { PageTitleBar, Button, Card } from '../../index';
+import { CARD_ACTIONS } from '../../constants/LayoutConstants';
 
 import DashboardEditor from './DashboardEditor';
 
@@ -20,4 +21,35 @@ storiesOf('Watson IoT Experimental/DashboardEditor', module)
         )}
       />
     </div>
+  ))
+  .add('custom card preview renderer', () => (
+    <div style={{ height: 'calc(100vh - 6rem)' }}>
+      <DashboardEditor
+        renderHeader={() => (
+          <PageTitleBar
+            title="Custom Header content"
+            extraContent={<Button>Do something</Button>}
+          />
+        )}
+        renderCardPreview={(cardJson, onCardSelect, onCardRemove) => (
+          <Card
+            id={cardJson.id}
+            size={cardJson.size}
+            title={cardJson.title}
+            isEditable
+            availableActions={{ edit: true, delete: true }}
+            onCardAction={(id, actionId) => {
+              if (actionId === CARD_ACTIONS.EDIT_CARD) {
+                onCardSelect(id);
+              }
+              if (actionId === CARD_ACTIONS.DELETE_CARD) {
+                onCardRemove(id);
+              }
+            }}
+          >
+            Custom content!
+          </Card>
+        )}
+      />
+    </div>
   ));