diff --git a/package.json b/package.json index a89fb35f8..a4ff1d38b 100644 --- a/package.json +++ b/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": [ diff --git a/packages/pluggableWidgets/accordion-native/CHANGELOG.md b/packages/pluggableWidgets/accordion-native/CHANGELOG.md index f00e0ad25..9860391a8 100644 --- a/packages/pluggableWidgets/accordion-native/CHANGELOG.md +++ b/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 diff --git a/packages/pluggableWidgets/accordion-native/package.json b/packages/pluggableWidgets/accordion-native/package.json index 64496cbe0..acb15e3ab 100644 --- a/packages/pluggableWidgets/accordion-native/package.json +++ b/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", diff --git a/packages/pluggableWidgets/accordion-native/src/Accordion.tsx b/packages/pluggableWidgets/accordion-native/src/Accordion.tsx index 39b74cf41..b1f2a5dd1 100644 --- a/packages/pluggableWidgets/accordion-native/src/Accordion.tsx +++ b/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; +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( @@ -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 => { diff --git a/packages/pluggableWidgets/accordion-native/src/__tests__/__snapshots__/Accordion.spec.tsx.snap b/packages/pluggableWidgets/accordion-native/src/__tests__/__snapshots__/Accordion.spec.tsx.snap index ca53622db..205ba4caa 100644 --- a/packages/pluggableWidgets/accordion-native/src/__tests__/__snapshots__/Accordion.spec.tsx.snap +++ b/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 - - - Content - - - + /> diff --git a/packages/pluggableWidgets/accordion-native/src/components/CollapsibleView.tsx b/packages/pluggableWidgets/accordion-native/src/components/CollapsibleView.tsx index 1be71e98c..f36b7acb0 100644 --- a/packages/pluggableWidgets/accordion-native/src/components/CollapsibleView.tsx +++ b/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 ( - - {children} - - ); + return {isExpanded && {children}}; } diff --git a/packages/pluggableWidgets/accordion-native/src/package.xml b/packages/pluggableWidgets/accordion-native/src/package.xml index 17bc83740..ea5297c6a 100644 --- a/packages/pluggableWidgets/accordion-native/src/package.xml +++ b/packages/pluggableWidgets/accordion-native/src/package.xml @@ -1,6 +1,6 @@ - + diff --git a/packages/pluggableWidgets/gallery-native/CHANGELOG.md b/packages/pluggableWidgets/gallery-native/CHANGELOG.md index 28b93b07b..1426977a9 100644 --- a/packages/pluggableWidgets/gallery-native/CHANGELOG.md +++ b/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 diff --git a/packages/pluggableWidgets/gallery-native/package.json b/packages/pluggableWidgets/gallery-native/package.json index bad4248b4..a7b313c2a 100644 --- a/packages/pluggableWidgets/gallery-native/package.json +++ b/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", diff --git a/packages/pluggableWidgets/gallery-native/src/Gallery.tsx b/packages/pluggableWidgets/gallery-native/src/Gallery.tsx index 6e829a1a5..a32886d77 100644 --- a/packages/pluggableWidgets/gallery-native/src/Gallery.tsx +++ b/packages/pluggableWidgets/gallery-native/src/Gallery.tsx @@ -115,7 +115,7 @@ export const Gallery = (props: GalleryProps): 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} diff --git a/packages/pluggableWidgets/gallery-native/src/package.xml b/packages/pluggableWidgets/gallery-native/src/package.xml index c6cd20781..4b7e53c21 100644 --- a/packages/pluggableWidgets/gallery-native/src/package.xml +++ b/packages/pluggableWidgets/gallery-native/src/package.xml @@ -1,6 +1,6 @@ - + diff --git a/scripts/widget/buildWidgets.js b/scripts/widget/buildWidgets.js index 188ef34b3..e4fab0a59 100644 --- a/scripts/widget/buildWidgets.js +++ b/scripts/widget/buildWidgets.js @@ -43,7 +43,7 @@ const deleteDistFolders = () => { } log.info("Deleting 'dist' folders in 'packages/pluggableWidgets/*'..."); - const distFolderPath = path.join(__dirname, "..", "packages", "pluggableWidgets"); + const distFolderPath = path.join(__dirname, "..", "..", "packages", "pluggableWidgets"); fs.readdir(distFolderPath, { withFileTypes: true }, (err, files) => { if (err) { log.error(`Error reading directories: ${err}`); @@ -101,8 +101,11 @@ const runYarnBuild = () => { const copyMPKFiles = () => { return new Promise((resolve, reject) => { log.info("Copying '.mpk' files to 'dist/pluggableWidgets'..."); - const widgetsFolderPath = path.join(__dirname, "..", "packages", "pluggableWidgets"); - const destinationFolderPath = path.join(__dirname, "..", "dist", "pluggableWidgets"); + const widgetsFolderPath = path.join(__dirname, "..", "..", "packages", "pluggableWidgets"); + const destinationFolderPath = path.join(__dirname, "..", "..", "dist", "pluggableWidgets"); + + console.log("widgetsFolderPath", widgetsFolderPath); + console.log("destinationFolderPath", destinationFolderPath); if (!fs.existsSync(destinationFolderPath)) { fs.mkdirSync(destinationFolderPath, { recursive: true }); @@ -138,10 +141,8 @@ const copyMPKFiles = () => { files.forEach(file => { if (path.extname(file) === ".mpk") { const sourceFile = path.join(mpkFolderPath, file); - const destinationFile = path.join( - destinationFolderPath, - widget.name + "_" + file - ); + const destinationFile = path.join(destinationFolderPath, file); + fs.copyFileSync(sourceFile, destinationFile); log.success( `Copied '${widget.name}/${file}' to 'dist/pluggableWidgets'`