@react-native-ohos/flash-list 1.8.3-rc.1 → 1.8.3-rc.2

package/harmony/flash_list/src/main/cpp/AutoLayoutNode.cpp

@@ -22,42 +22,119 @@
  * SOFTWARE.
  */
 
-#include "AutoLayoutNode.h"
-#include <memory>
+#include <react/renderer/components/view/ViewProps.h>
 #include <glog/logging.h>
+#include <sys/param.h>
+#include <thread>
+#include "AutoLayoutShadow.h"
+#include <random>
 
 namespace rnoh {
 
-AutoLayoutNode::AutoLayoutNode()
-    : ArkUINode(NativeNodeApi::getInstance()->createNode(ArkUI_NodeType::ARKUI_NODE_STACK)) {
-    maybeThrow(NativeNodeApi::getInstance()->registerNodeEvent(m_nodeHandle, NODE_EVENT_ON_APPEAR, 0, this));
-}
-
-void AutoLayoutNode::insertChild(ArkUINode &child, std::size_t index) {
-    maybeThrow(NativeNodeApi::getInstance()->insertChildAt(m_nodeHandle, child.getArkUINodeHandle(), index));
-}
-
-void AutoLayoutNode::removeChild(ArkUINode &child) {
-    maybeThrow(NativeNodeApi::getInstance()->removeChild(m_nodeHandle, child.getArkUINodeHandle()));
-}
-
-void AutoLayoutNode::onNodeEvent(ArkUI_NodeEventType eventType, EventArgs &eventArgs) {
-    if (eventType == ArkUI_NodeEventType::NODE_EVENT_ON_APPEAR) {
-        m_autoLayoutNodeDelegate->onAppear();
+/**checks for overlaps or gaps.between adjacent items and then applies a correction (Only Grid layouts with varying
+ * spans) Performance: RecyclerListView renders very small number of views and this is not going to trigger multiple
+ * layouts on Android side. Not expecting any major perf issu.*/
+void AutoLayoutShadow::clearGapsAndOverlaps(std::vector<CellContainerComponentInstance::Shared> sortedItems) {
+    if (sortedItems.empty()) {
+        return;
     }
+    Float maxBound = 0;
+    Float minBound = INT_MAX;
+    Float maxBoundNeighbour = 0;
+    lastMaxBoundOverall = 0;
+    for (int i = 0; i < sortedItems.size() - 1; i++) {
+        auto cell = sortedItems[i];
+        auto neighbour = sortedItems[i + 1];
+        std::optional<facebook::react::LayoutMetrics> neighbourMetrics;
+        // Only apply correction if the next cell is consecutive.
+        bool isNeighbourConsecutive = neighbour->getIndex() == cell->getIndex() + 1;
+        if (isWithinBounds(cell->getLayoutMetrics())) {
+            if (!horizontal) {
+                maxBound = MAX(maxBound, cell->getBottom());
+                minBound = MIN(minBound, cell->getTop());
+                maxBoundNeighbour = maxBound;
+                if (isNeighbourConsecutive) {
+                    neighbourMetrics = neighbour->getLayoutMetrics();
+                    if (cell->getLeft() < neighbour->getLeft()) {
+                        if (cell->getRight() != neighbour->getLeft()) {
+                            neighbourMetrics.value().frame.origin.x = cell->getRight();
+                        }
+                        if (cell->getTop() != neighbour->getTop()) {
+                            neighbourMetrics.value().frame.origin.y = cell->getTop();
+                        }
+                    } else {
+                        neighbourMetrics.value().frame.origin.y = maxBound;
+                    }
+                }
+                if (isWithinBounds(*neighbourMetrics)) {
+                    float bottom = neighbourMetrics->frame.origin.y + neighbourMetrics->frame.size.height;
+                    maxBoundNeighbour = MAX(maxBound, bottom);
+                }
+            } else {
+                maxBound = MAX(maxBound, cell->getRight());
+                minBound = MIN(minBound, cell->getLeft());
+                maxBoundNeighbour = maxBound;
+                if (isNeighbourConsecutive) {
+                    neighbourMetrics = neighbour->getLayoutMetrics();
+                    if (cell->getTop() < neighbour->getTop()) {
+                        if (cell->getBottom() != neighbour->getTop()) {
+                            neighbourMetrics.value().frame.origin.y = cell->getBottom();
+                        }
+                        if (cell->getLeft() != neighbour->getLeft()) {
+                            neighbourMetrics.value().frame.origin.x = cell->getLeft();
+                        }
+                    } else {
+                        neighbourMetrics.value().frame.origin.x = maxBound;
+                    }
+                }
+                if (isWithinBounds(*neighbourMetrics)) {
+                    float right = neighbourMetrics->frame.origin.x + neighbourMetrics->frame.size.width;
+                    maxBoundNeighbour = MAX(maxBound, right);
+                }
+            }
+        }
+        if (horizontal) {
+            lastMaxBoundOverall = MAX(lastMaxBoundOverall, cell->getRight());
+            float right = neighbourMetrics->frame.origin.x + neighbourMetrics->frame.size.width;
+            lastMaxBoundOverall = MAX(lastMaxBoundOverall, neighbour->getRight());
+        } else {
+            lastMaxBoundOverall = MAX(lastMaxBoundOverall, cell->getBottom());
+            float bottom = neighbourMetrics->frame.origin.y + neighbourMetrics->frame.size.height;
+            lastMaxBoundOverall = MAX(lastMaxBoundOverall, bottom);
+        }
+        cell->setLayout(cell->getLayoutMetrics());
+        neighbour->setLayout(neighbourMetrics ? neighbourMetrics.value() : neighbour->getLayoutMetrics());
+    }
+    lastMaxBound = maxBoundNeighbour;
+    lastMinBound = minBound;
 }
 
-void AutoLayoutNode::setAutoLayoutNodeDelegate(AutoLayoutNodeDelegate *scrollNodeDelegate) {
-    m_autoLayoutNodeDelegate = scrollNodeDelegate;
-}
-
-AutoLayoutNode::~AutoLayoutNode() {
-    NativeNodeApi::getInstance()->unregisterNodeEvent(m_nodeHandle, NODE_EVENT_ON_APPEAR);
+/** Offset provider by react can be one frame behind the real one, it's important that this method is called with
+ * offset taken directly from scrollview object*/
+Float AutoLayoutShadow::computeBlankFromGivenOffset(Float actualScrollOffset, Float distanceFromWindowStart,
+                                                    Float distanceFromWindowEnd) {
+    blankOffsetAtStart = lastMinBound - actualScrollOffset - distanceFromWindowStart;
+    blankOffsetAtEnd = actualScrollOffset + windowSize - renderOffset - lastMaxBound - distanceFromWindowEnd;
+    return MAX(blankOffsetAtStart, blankOffsetAtEnd);
 }
 
-void AutoLayoutNode::setAlign(int32_t align) {
-    ArkUI_NumberValue value[] = {{.i32 = align}};
-    ArkUI_AttributeItem item = {.value = value, .size = 1};
-    maybeThrow(NativeNodeApi::getInstance()->setAttribute(m_nodeHandle, NODE_STACK_ALIGN_CONTENT, &item));
+/**It's importance to aviod correcting views outside the render window. An item that isn't being recycled might
+ * still remain in the view tree. If views outside get considered then gaps between unused items will cause
+ * algorithm to fail.*/
+bool AutoLayoutShadow::isWithinBounds(const facebook::react::LayoutMetrics& metrics) {
+    auto boundsStart = scrollOffset - renderOffset;
+    auto boundsEnd = scrollOffset + windowSize;
+    float top = metrics.frame.origin.y;
+    float bottom = metrics.frame.origin.y + metrics.frame.size.height;
+    float left = metrics.frame.origin.x;
+    float right = metrics.frame.origin.x + metrics.frame.size.width;
+    
+    if (!this->horizontal) {
+        return (top >= boundsStart || bottom >= boundsStart) &&
+               (top <= boundsEnd || bottom <= boundsEnd);
+    } else {
+        return (left >= boundsStart || right >= boundsStart) &&
+               (left <= boundsEnd || right <= boundsEnd);
+    }
 }
-} // namespace rnoh
+} // namespace rnoh

package/jestSetup.js

@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 
-
 jest.mock("@shopify/flash-list", () => {
   const ActualFlashList = jest.requireActual("@shopify/flash-list").FlashList;
   class MockFlashList extends ActualFlashList {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-ohos/flash-list",
-  "version": "1.8.3-rc.1",
+  "version": "1.8.3-rc.2",
   "keywords": [
     "react-native",
     "recyclerview",
@@ -22,12 +22,12 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/react-native-oh-library/flash-list.git"
+    "url": "https://gitcode.com/openharmony-sig/rntpc_flash-list.git"
   },
   "description": "FlashList is a more performant FlatList replacement",
   "author": "shopify",
   "license": "MIT",
-  "homepage": "https://shopify.github.io/flash-list/",
+  "homepage": "https://gitcode.com/openharmony-sig/rntpc_flash-list/tree/br_rnoh0.77#readme",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {

package/src/FlashList.tsx

@@ -82,6 +82,7 @@ export interface FlashListState<T> {
   data?: ReadonlyArray<T> | null;
   extraData?: ExtraData<unknown>;
   renderItem?: FlashListProps<T>["renderItem"];
+  lastInverted?: boolean;
 }
 
 interface ExtraData<T> {
@@ -95,10 +96,6 @@ class FlashList<T> extends React.PureComponent<
   private rlvRef?: RecyclerListView<RecyclerListViewProps, any>;
   private stickyContentContainerRef?: PureComponentWrapper;
   private listFixedDimensionSize = 0;
-  private transformStyle = PlatformConfig.invertedTransformStyle;
-  private transformStyleHorizontal =
-    PlatformConfig.invertedTransformStyleHorizontal;
-
   private distanceFromWindow = 0;
   private contentStyle: ContentStyleExplicit = {
     paddingBottom: 0,
@@ -207,11 +204,13 @@ class FlashList<T> extends React.PureComponent<
     newState.layoutProvider.shouldRefreshWithAnchoring = Boolean(
       !prevState.layoutProvider?.hasExpired
     );
-
-    if (nextProps.data !== prevState.data) {
-      newState.data = nextProps.data;
+    if (nextProps.data !== prevState.data || prevState.lastInverted !== nextProps.inverted) {
+      const processedData = nextProps.inverted
+        ? (nextProps.data ? [...nextProps.data].reverse() : nextProps.data)
+        : nextProps.data;
+      newState.data = processedData;
       newState.dataProvider = prevState.dataProvider.cloneWithRows(
-        nextProps.data as any[]
+        processedData as any[]
       );
       if (nextProps.renderItem !== prevState.renderItem) {
         newState.extraData = { ...prevState.extraData };
@@ -221,6 +220,7 @@ class FlashList<T> extends React.PureComponent<
       newState.extraData = { value: nextProps.extraData };
     }
     newState.renderItem = nextProps.renderItem;
+    newState.lastInverted = nextProps.inverted ?? undefined;
     return newState;
   }
 
@@ -287,6 +287,8 @@ class FlashList<T> extends React.PureComponent<
           numColumns,
           props.extraData
         );
+        console.log('mutableLayout:', mutableLayout);
+        
         return mutableLayout?.size;
       },
       flashListProps
@@ -359,8 +361,8 @@ class FlashList<T> extends React.PureComponent<
         stickyHeaderIndices={stickyHeaderIndices}
         style={
           this.props.horizontal
-            ? { ...this.getTransform() }
-            : { flex: 1, overflow: "hidden", ...this.getTransform() }
+            ? { }
+            : { flex: 1, overflow: "hidden" }
         }
       >
         <ProgressiveListView
@@ -533,7 +535,6 @@ class FlashList<T> extends React.PureComponent<
           ...props.style,
           flexDirection: this.props.horizontal ? "row" : "column",
           alignItems: "stretch",
-          ...this.getTransform(),
           ...getCellContainerPlatformStyles(this.props.inverted!!, parentProps),
         }}
         index={parentProps.index}
@@ -561,13 +562,6 @@ class FlashList<T> extends React.PureComponent<
     }
   };
 
-  private getTransform() {
-    const transformStyle = this.props.horizontal
-      ? this.transformStyleHorizontal
-      : this.transformStyle;
-    return (this.props.inverted && transformStyle) || undefined;
-  }
-
   private separator = (index: number) => {
     // Make sure we have data and don't read out of bounds
     if (
@@ -602,7 +596,7 @@ class FlashList<T> extends React.PureComponent<
         />
 
         <View
-          style={[this.props.ListHeaderComponentStyle, this.getTransform()]}
+          style={[this.props.ListHeaderComponentStyle]}
         >
           {this.getValidComponent(this.props.ListHeaderComponent)}
         </View>
@@ -619,7 +613,7 @@ class FlashList<T> extends React.PureComponent<
       <>
         <FooterContainer
           index={-1}
-          style={[this.props.ListFooterComponentStyle, this.getTransform()]}
+          style={[this.props.ListFooterComponentStyle]}
         >
           {this.getValidComponent(this.props.ListFooterComponent)}
         </FooterContainer>
@@ -674,7 +668,7 @@ class FlashList<T> extends React.PureComponent<
   private rowRendererWithIndex = (index: number, target: RenderTarget) => {
     // known issue: expected to pass separators which isn't available in RLV
     return this.props.renderItem?.({
-      item: this.props.data![index],
+      item: this.state.data![index],
       index,
       target,
       extraData: this.state.extraData?.value,
@@ -693,7 +687,6 @@ class FlashList<T> extends React.PureComponent<
   private getCellContainerChild = (index: number) => {
     return (
       <>
-        {this.props.inverted ? this.separator(index) : null}
         <View
           style={{
             flexDirection:
@@ -704,7 +697,7 @@ class FlashList<T> extends React.PureComponent<
         >
           {this.rowRendererWithIndex(index, RenderTargetOptions.Cell)}
         </View>
-        {this.props.inverted ? null : this.separator(index)}
+        {this.separator(index)}
       </>
     );
   };
@@ -920,7 +913,8 @@ class FlashList<T> extends React.PureComponent<
    * @returns {Object} The layout of the item at the given index.
    */
   public getLayout(index: number) : Layout | undefined {
-    return this.rlvRef?.getLayout(index);
+    const l = this.rlvRef?.getLayout(index);
+    return l;
   }
 
   /**