diff --git a/flow-typed/gui.js b/flow-typed/gui.js new file mode 100644 index 000000000..cf0182478 --- /dev/null +++ b/flow-typed/gui.js @@ -0,0 +1,6 @@ + +declare type ListInjectedItem = { + node: Node | (index: number, lastVisibleIndex: ?number, pageSize: ?number) => Node, + index?: number, + replace?: boolean +}; diff --git a/ui/component/claimList/view.jsx b/ui/component/claimList/view.jsx index 43c267378..88448822c 100644 --- a/ui/component/claimList/view.jsx +++ b/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) { - return injectedItem.node; + 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; }; diff --git a/ui/component/claimListDiscover/view.jsx b/ui/component/claimListDiscover/view.jsx index acf000000..420cac9c3 100644 --- a/ui/component/claimListDiscover/view.jsx +++ b/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, diff --git a/ui/component/claimTilesDiscover/view.jsx b/ui/component/claimTilesDiscover/view.jsx index 1f9477d3e..0b7d25a4c 100644 --- a/ui/component/claimTilesDiscover/view.jsx +++ b/ui/component/claimTilesDiscover/view.jsx @@ -32,7 +32,7 @@ type Props = { prefixUris?: Array, pins?: { urls?: Array, claimIds?: Array, onlyPinForOrder?: string }, uris: Array, - 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) { - return {injectedItem.node}; - } - + const inj = getInjectedItem(i); return ( - {lastVisibleIndex === i && injectedItem && injectedItem.node} - + {inj && inj} + {(!inj || !injectedItem || !injectedItem.replace) && ( + + )} ); } else {