feat(hotspot): need to expose the method to return demo hotspots

Author: scottdickerson

src/components/CardEditor/CardEditForm/CardEditForm.jsx

@@ -191,6 +191,8 @@ const CardEditForm = ({
   currentBreakpoint,
   availableDimensions,
   testID,
+  // eslint-disable-next-line react/prop-types
+  onFetchDynamicDemoHotspots,
 }) => {
   const mergedI18n = { ...defaultProps.i18n, ...i18n };
   const [showEditor, setShowEditor] = useState(false);
@@ -242,6 +244,7 @@ const CardEditForm = ({
               getValidDataItems={getValidDataItems}
               getValidTimeRanges={getValidTimeRanges}
               currentBreakpoint={currentBreakpoint}
+              onFetchDynamicDemoHotspots={onFetchDynamicDemoHotspots}
             />
           </Tab>
           <Tab label={mergedI18n.settingsTabLabel}>

src/components/CardEditor/CardEditForm/CardEditFormContent.jsx

@@ -99,6 +99,8 @@ const CardEditFormContent = ({
   getValidTimeRanges,
   currentBreakpoint,
   availableDimensions,
+  // eslint-disable-next-line react/prop-types
+  onFetchDynamicDemoHotspots,
 }) => {
   const { type, timeRange } = cardConfig;
   const mergedI18n = { ...defaultProps.i18n, ...i18n };
@@ -142,6 +144,7 @@ const CardEditFormContent = ({
           dataItems={dataItems}
           availableDimensions={availableDimensions}
           translateWithId={handleTranslation}
+          onFetchDynamicDemoHotspots={onFetchDynamicDemoHotspots}
         />
       ) : type === CARD_TYPES.TABLE ? (
         <TableCardFormContent

src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormContent.jsx

@@ -39,6 +39,9 @@ const propTypes = {
    *  ex: { manufacturer: ['Rentech', 'GHI Industries'], deviceid: ['73000', '73001', '73002'] }
    */
   availableDimensions: PropTypes.shape({}),
+  /** call back to retrieve the dynamic demo hotspots, by default just returns one example dynamic hotspot, override to return true hotspots.
+   * See HotspotEditorModal propTypes for params and details */
+  onFetchDynamicDemoHotspots: PropTypes.func,
 };
 
 const defaultProps = {
@@ -51,6 +54,7 @@ const defaultProps = {
   },
   dataItems: [],
   availableDimensions: {},
+  onFetchDynamicDemoHotspots: () => Promise.resolve([{ x: 50, y: 50 }]),
 };
 
 const ImageCardFormItems = ({
@@ -60,6 +64,7 @@ const ImageCardFormItems = ({
   dataItems,
   availableDimensions,
   translateWithId,
+  onFetchDynamicDemoHotspots,
 }) => {
   const [isHotspotModalShowing, setIsHotspotModalShowing] = useState(false);
   const mergedI18n = { ...defaultProps.i18n, ...i18n };
@@ -94,8 +99,7 @@ const ImageCardFormItems = ({
           onClose={handleCloseHotspotEditor}
           translateWithId={translateWithId}
           i18n={mergedI18n}
-          // TODO go get the hotspots from the real data layer
-          onFetchDynamicHotspots={() => Promise.resolve([{ x: 10, y: 10 }])}
+          onFetchDynamicDemoHotspots={onFetchDynamicDemoHotspots}
         />
       ) : null}
       <div

src/components/CardEditor/CardEditor.jsx

@@ -145,6 +145,8 @@ const CardEditor = ({
   i18n,
   currentBreakpoint,
   testID,
+  // eslint-disable-next-line react/prop-types
+  onFetchDynamicDemoHotspots,
 }) => {
   const mergedI18n = { ...defaultProps.i18n, ...i18n };
 
@@ -191,6 +193,7 @@ const CardEditor = ({
             availableDimensions={availableDimensions}
             i18n={mergedI18n}
             currentBreakpoint={currentBreakpoint}
+            onFetchDynamicDemoHotspots={onFetchDynamicDemoHotspots}
           />
         )}
       </div>

src/components/DashboardEditor/DashboardEditor.jsx

@@ -340,6 +340,8 @@ const DashboardEditor = ({
   availableDimensions,
   isLoading,
   i18n,
+  // eslint-disable-next-line react/prop-types
+  onFetchDynamicDemoHotspots, // needed for the hotspoteditormodal, see the proptypes for more details
 }) => {
   const mergedI18n = useMemo(() => ({ ...defaultProps.i18n, ...i18n }), [i18n]);
   // Need to keep track of whether the image gallery is open or not
@@ -696,6 +698,7 @@ const DashboardEditor = ({
             availableDimensions={availableDimensions}
             i18n={mergedI18n}
             currentBreakpoint={currentBreakpoint}
+            onFetchDynamicDemoHotspots={onFetchDynamicDemoHotspots}
           />
         </ErrorBoundary>
       </div>

src/components/HotspotEditorModal/HotspotEditorModal.jsx

@@ -143,8 +143,13 @@ const propTypes = {
   /** Callback for modal cancel button and close icon button */
   onClose: PropTypes.func.isRequired,
   /**
-   * Callback to fetch dynamic hotstpots. Returns a Propmise that resolves to an array of demo hotspots
-   * matching the x & y source in param {maxHotspots, xSource, ySource }.
+   * Callback to fetch dynamic hotstpots. Should returns a Promise that resolves to an array of demo hotspots
+   * matching the x & y source.  Called with one param, an object with 3 values
+   * {
+   *  maxHotspots: maximum number to return,
+   *  xSource: the name of the data item to use as the xSource,
+   *  ySource: the name of the data item to use as the ySource
+   * }.
    * */
   onFetchDynamicDemoHotspots: PropTypes.func,
   /** Callback for modal save button returns the entire updated card config */