Support callback method to inject items

1341

flow-typed/gui.js

@@ -0,0 +1,6 @@
+
+declare type ListInjectedItem = {
+  node: Node | (index: number, lastVisibleIndex: ?number, pageSize: ?number) => Node,
+  index?: number,
+  replace?: boolean
+};

ui/component/claimList/view.jsx

@@ -41,7 +41,7 @@ type Props = {
   renderActions?: (Claim) => ?Node,
   renderProperties?: (Claim) => ?Node,
   includeSupportAction?: boolean,
-  injectedItem?: { node: Node, index?: number, replace?: boolean },
+  injectedItem?: ListInjectedItem,
   timedOutMessage?: Node,
   tileLayout?: boolean,
   searchInLanguage: boolean,
@@ -206,9 +206,18 @@ export default function ClaimList(props: Props) {
   );
 
   const getInjectedItem = (index) => {
-    if (injectedItem && injectedItem.node && lastVisibleIndex === index) {
+    if (injectedItem && injectedItem.node) {
-      return injectedItem.node;
+      if (typeof injectedItem.node === 'function') {
+        return injectedItem.node(index, lastVisibleIndex, pageSize);
+      } else {
+        if (injectedItem.index === undefined || injectedItem.index === null) {
+          return index === lastVisibleIndex ? injectedItem.node : null;
+        } else {
+          return index === injectedItem.index ? injectedItem.node : null;
+        }
+      }
     }
+
     return null;
   };
 

ui/component/claimListDiscover/view.jsx

@@ -76,7 +76,7 @@ type Props = {
   header?: Node,
   headerLabel?: string | Node,
   hiddenNsfwMessage?: Node,
-  injectedItem?: { node: Node, index?: number, replace?: boolean },
+  injectedItem?: ListInjectedItem,
   meta?: Node,
   subSection?: Node, // Additional section below [Header|Meta]
   renderProperties?: (Claim) => Node,

ui/component/claimTilesDiscover/view.jsx

@@ -32,7 +32,7 @@ type Props = {
   prefixUris?: Array<string>,
   pins?: { urls?: Array<string>, claimIds?: Array<string>, onlyPinForOrder?: string },
   uris: Array<string>,
-  injectedItem?: { node: Node, index?: number, replace?: boolean },
+  injectedItem?: ListInjectedItem,
   showNoSourceClaims?: boolean,
   renderProperties?: (Claim) => ?Node,
   fetchViewCount?: boolean,
@@ -142,6 +142,22 @@ function ClaimTilesDiscover(props: Props) {
     }
   }
 
+  const getInjectedItem = (index) => {
+    if (injectedItem && injectedItem.node) {
+      if (typeof injectedItem.node === 'function') {
+        return injectedItem.node(index, lastVisibleIndex, pageSize);
+      } else {
+        if (injectedItem.index === undefined || injectedItem.index === null) {
+          return index === lastVisibleIndex ? injectedItem.node : null;
+        } else {
+          return index === injectedItem.index ? injectedItem.node : null;
+        }
+      }
+    }
+
+    return null;
+  };
+
   // --------------------------------------------------------------------------
   // --------------------------------------------------------------------------
 
@@ -187,18 +203,17 @@ function ClaimTilesDiscover(props: Props) {
       {finalUris && finalUris.length
         ? finalUris.map((uri, i) => {
             if (uri) {
-              if (lastVisibleIndex === i && injectedItem && injectedItem.replace) {
+              const inj = getInjectedItem(i);
-                return <React.Fragment key={uri}>{injectedItem.node}</React.Fragment>;
-              }
-
               return (
                 <React.Fragment key={uri}>
-                  {lastVisibleIndex === i && injectedItem && injectedItem.node}
+                  {inj && inj}
-                  <ClaimPreviewTile
+                  {(!inj || !injectedItem || !injectedItem.replace) && (
-                    showNoSourceClaims={hasNoSource || showNoSourceClaims}
+                    <ClaimPreviewTile
-                    uri={uri}
+                      showNoSourceClaims={hasNoSource || showNoSourceClaims}
-                    properties={renderProperties}
+                      uri={uri}
-                  />
+                      properties={renderProperties}
+                    />
+                  )}
                 </React.Fragment>
               );
             } else {