Merge branch 'main' into create-native-pipeline

Author: NikolaSimsic

package.json

@@ -34,7 +34,7 @@
     "setup-android": "node ./detox/scripts/setup-android.js",
     "setup-ios": "node ./detox/scripts/setup-ios.js",
     "patch-package": "./scripts/patch/patch-package.sh",
-    "build:widgets": "node ./scripts/buildWidgets.js"
+    "build:widgets": "node ./scripts/widget/buildWidgets.js"
   },
   "workspaces": {
     "packages": [

packages/pluggableWidgets/accordion-native/CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   Fixed a bug where the accordion state was not updating correctly when the "Collapsed" attribute was selected.
+
+-   Resolved an issue where the accordion's dynamic content was not updating its height after the initial render.
+
 ## [2.2.0] - 2022-04-07
 
 ### Added

packages/pluggableWidgets/accordion-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "accordion-native",
   "widgetName": "Accordion",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

packages/pluggableWidgets/accordion-native/src/Accordion.tsx

@@ -1,5 +1,5 @@
 import { createElement, ReactElement, useState, useCallback, useEffect } from "react";
-import { View } from "react-native";
+import { View, LayoutAnimation, Platform, UIManager } from "react-native";
 import { flattenStyles } from "@mendix/piw-native-utils-internal";
 import { executeAction } from "@mendix/piw-utils-internal";
 import { ValueStatus } from "mendix";
@@ -10,6 +10,10 @@ import { AccordionGroup } from "./components/AccordionGroup";
 
 export type Props = AccordionProps<AccordionStyle>;
 
+if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
 export function Accordion(props: Props): ReactElement | null {
     const styles = flattenStyles(defaultAccordionStyle, props.style);
     const [expandedGroups, setExpandedGroups] = useState<number[]>(
@@ -41,15 +45,20 @@ export function Accordion(props: Props): ReactElement | null {
 
     const onPressGroupHeader = useCallback(
         (group: GroupsType, index: number): void => {
+            LayoutAnimation.easeInEaseOut();
             const expanded = expandedGroups.includes(index);
+            let newExpandedGroup: number[] = []; // use new expanded group, as we need to state before we call execute action.
             if (expanded) {
+                newExpandedGroup = expandedGroups.filter(i => i !== index);
                 collapseGroup(index);
             } else {
+                newExpandedGroup = props.collapseBehavior === "singleExpanded" ? [index] : [...expandedGroups, index];
                 expandGroup(index);
             }
+            props.groups.forEach((g, i) => g.groupCollapsedAttribute?.setValue(!newExpandedGroup.includes(i)));
             executeAction(group.groupOnChange);
         },
-        [expandedGroups, expandGroup, collapseGroup]
+        [expandedGroups, props.groups, props.collapseBehavior, collapseGroup, expandGroup]
     );
 
     const checkPropertyValues = (group: GroupsType, i: number): void => {

packages/pluggableWidgets/accordion-native/src/__tests__/__snapshots__/Accordion.spec.tsx.snap

@@ -101,29 +101,12 @@ exports[`Accordion in collapsible & single expanded group mode renders correctly
       </View>
     </View>
     <View
-      collapsable={false}
-      onLayout={[Function]}
       style={
         {
-          "height": undefined,
-          "overflow": undefined,
+          "overflow": "hidden",
         }
       }
-    >
-      <View
-        style={
-          {
-            "paddingBottom": 24,
-            "paddingHorizontal": 16,
-            "paddingTop": 8,
-          }
-        }
-      >
-        <Text>
-          Content
-        </Text>
-      </View>
-    </View>
+    />
   </View>
   <View
     style={
@@ -209,12 +192,9 @@ exports[`Accordion in collapsible & single expanded group mode renders correctly
       </View>
     </View>
     <View
-      collapsable={false}
-      onLayout={[Function]}
       style={
         {
-          "height": undefined,
-          "overflow": undefined,
+          "overflow": "hidden",
         }
       }
     >

packages/pluggableWidgets/accordion-native/src/components/CollapsibleView.tsx

@@ -1,5 +1,5 @@
-import { createElement, ReactElement, useState, useRef, useEffect, useCallback, ReactNode } from "react";
-import { Animated, Easing, View, ViewStyle, LayoutChangeEvent } from "react-native";
+import { createElement, ReactElement, ReactNode } from "react";
+import { View, ViewStyle } from "react-native";
 
 interface CollapsibleViewProps {
     isExpanded: boolean;
@@ -8,39 +8,5 @@ interface CollapsibleViewProps {
 }
 
 export function AnimatedCollapsibleView({ isExpanded, style, children }: CollapsibleViewProps): ReactElement {
-    const startingHeight = 0;
-    const animatedHeight = useRef(new Animated.Value(startingHeight)).current;
-    const [fullHeight, setFullHeight] = useState(startingHeight);
-    const isFullHeightCalculated = useRef(false);
-
-    useEffect(() => {
-        Animated.timing(animatedHeight, {
-            toValue: isExpanded ? fullHeight : startingHeight,
-            duration: 200,
-            easing: Easing.ease,
-            useNativeDriver: false
-        }).start();
-    }, [isExpanded, fullHeight, animatedHeight]);
-
-    const onLayout = useCallback(
-        (e: LayoutChangeEvent) => {
-            if (!isFullHeightCalculated.current) {
-                isFullHeightCalculated.current = true;
-                setFullHeight(e.nativeEvent.layout.height);
-            }
-        },
-        [isFullHeightCalculated.current]
-    );
-
-    return (
-        <Animated.View
-            style={{
-                height: isFullHeightCalculated.current ? animatedHeight : undefined,
-                overflow: isFullHeightCalculated.current ? "hidden" : undefined
-            }}
-            onLayout={onLayout}
-        >
-            <View style={style}>{children}</View>
-        </Animated.View>
-    );
+    return <View style={{ overflow: "hidden" }}>{isExpanded && <View style={style}>{children}</View>}</View>;
 }

packages/pluggableWidgets/accordion-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Accordion" version="2.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Accordion" version="2.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Accordion.xml" />
         </widgetFiles>

packages/pluggableWidgets/gallery-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We've resolved an issue where the loading indicator was triggered when pulling down the list, even in the absence of a pull-down event.
+
 ## [1.0.2] - 2023-5-24
 
 ### Fixed

packages/pluggableWidgets/gallery-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gallery-native",
   "widgetName": "Gallery",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A flexible gallery widget that renders columns, rows and layouts.",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "license": "Apache-2.0",

packages/pluggableWidgets/gallery-native/src/Gallery.tsx

@@ -115,7 +115,7 @@ export const Gallery = (props: GalleryProps<GalleryStyle>): ReactElement => {
             pagination={props.pagination}
             loadMoreButtonCaption={props.loadMoreButtonCaption}
             phoneColumns={props.phoneColumns}
-            pullDown={pullDown}
+            pullDown={props.pullDown && pullDown}
             pullDownIsExecuting={props.pullDown?.isExecuting ?? false}
             scrollDirection={props.scrollDirection}
             style={styles}