Use function components

.gitattributes

@@ -1,4 +1,8 @@
+# Set the default behavior, in case people don't have core.autocrlf set.
 * text=auto
+
+# Explicitly declare text files you want to always be normalized and converted
+# to native line endings on checkout.
 *.ts text eol=lf
 *.tsx text eol=lf
 *.js text eol=lf
@@ -10,6 +14,8 @@
 *.md text eol=lf
 *.gitattributes eol=lf
 *.gitignore eol=lf
+
+# Denote all files that are truly binary and should not be modified.
 *.png binary
 *.jpg binary
 *.gif binary

package.json

@@ -1,13 +1,14 @@
 {
   "name": "nativeresponsivelistview",
   "widgetName": "NativeResponsiveListview",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "description": "Native responsive listview",
   "copyright": "ITvisors 2020",
   "author": "Marcel Groeneweg",
   "engines": {
     "node": ">=12"
   },
+  "license": "Apache-2.0",
   "config": {
     "projectPath": "./test/"
   },
@@ -20,12 +21,8 @@
     "prerelease": "npm run lint",
     "release": "pluggable-widgets-tools release:native"
   },
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/Marcel Groeneweg/nativeresponsivelistview/issues"
-  },
   "devDependencies": {
-    "@mendix/pluggable-widgets-tools": "^9.6.1",
+    "@mendix/pluggable-widgets-tools": "^9.0.0",
     "@types/big.js": "^6.0.2",
     "@types/react": "~17.0.1",
     "@types/react-native": "~0.63.52"

prettier.config.js

@@ -1,5 +1,6 @@
 const base = require("@mendix/pluggable-widgets-tools/configs/prettier.base.json");
 
 module.exports = {
-    ...base
+    ...base,
+    plugins: [require.resolve("@prettier/plugin-xml")],
 };

src/NativeResponsiveListview.tsx

@@ -1,23 +1,19 @@
-import { Component, ReactNode, createElement } from "react";
-import { ViewStyle } from "react-native";
+import { createElement, ReactElement } from "react";
 import { NativeResponsiveListviewProps } from "../typings/NativeResponsiveListviewProps";
-import { Style } from "./utils/common";
 import { ResponsiveListview } from "./components/ResponsiveListview";
+import { CustomStyle } from "./ui/styles";
 
-export interface CustomStyle extends Style {
-    container: ViewStyle;
-}
-
-export class NativeResponsiveListview extends Component<NativeResponsiveListviewProps<CustomStyle>> {
-    render(): ReactNode {
-        const { ds, content, style } = this.props;
-        if (!ds || !ds.items) {
-            return null;
-        }
-        let showVertically = false;
-        if (this.props.showVertically && this.props.showVertically.value) {
-            showVertically = true;
-        }
-        return <ResponsiveListview ds={ds} content={content} style={style} showVertically={showVertically} />;
+export function NativeResponsiveListview(props: NativeResponsiveListviewProps<CustomStyle>): ReactElement | null {
+    const { ds, showVertically } = props;
+    if (!ds || !ds.items) {
+        return null;
     }
+    return (
+        <ResponsiveListview
+            dsItems={ds.items}
+            content={props.content}
+            style={props.style}
+            showVertically={!!showVertically?.value}
+        />
+    );
 }

src/components/ResponsiveListview.tsx

@@ -1,48 +1,30 @@
-import { Component, ReactNode, createElement } from "react";
+import { ReactElement, createElement } from "react";
 import { View } from "react-native";
-import { ListValue, ListWidgetValue } from "mendix";
+import { ListWidgetValue, ObjectItem } from "mendix";
+import { CustomStyle, defaultStyle, defaultVerticalStyle } from "../ui/styles";
 
-import { CustomStyle } from "../NativeResponsiveListview";
-import { flattenStyles } from "../utils/common";
+import { mergeNativeStyles } from "@mendix/pluggable-widgets-tools";
 
 export interface ResponsiveListviewProps {
-    ds: ListValue;
+    dsItems: ObjectItem[];
     content: ListWidgetValue;
     style: CustomStyle[];
     showVertically: boolean;
 }
 
-const defaultStyle: CustomStyle = {
-    container: {
-        flexDirection: "row",
-        flexWrap: "wrap"
-    }
-};
-
-const defaultVerticalStyle: CustomStyle = {
-    container: {
-        flexDirection: "column"
-    }
-};
-
-export class ResponsiveListview extends Component<ResponsiveListviewProps> {
-    render(): ReactNode {
-        const { ds, content, showVertically } = this.props;
-        let styles: CustomStyle;
-        if (showVertically) {
-            styles = flattenStyles(defaultVerticalStyle, this.props.style);
-        } else {
-            styles = flattenStyles(defaultStyle, this.props.style);
-        }
-        if (!ds || !ds.items) {
-            return null;
-        }
-        return (
-            <View style={styles.container}>
-                {ds.items.map(item => (
-                    <View key={item.id}>{content.get(item)}</View>
-                ))}
-            </View>
-        );
+export function ResponsiveListview(props: ResponsiveListviewProps): ReactElement {
+    const { dsItems, content, showVertically } = props;
+    let styles: CustomStyle;
+    if (showVertically) {
+        styles = mergeNativeStyles(defaultVerticalStyle, props.style);
+    } else {
+        styles = mergeNativeStyles(defaultStyle, props.style);
     }
+    return (
+        <View style={styles.container}>
+            {dsItems.map(item => (
+                <View key={item.id}>{content.get(item)}</View>
+            ))}
+        </View>
+    );
 }

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="NativeResponsiveListview" version="1.4.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="NativeResponsiveListview" version="2.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="NativeResponsiveListview.xml"/>
         </widgetFiles>

src/ui/styles.ts

@@ -0,0 +1,20 @@
+import { ViewStyle } from "react-native";
+
+import { Style } from "@mendix/pluggable-widgets-tools";
+
+export interface CustomStyle extends Style {
+    container: ViewStyle;
+}
+
+export const defaultStyle: CustomStyle = {
+    container: {
+        flexDirection: "row",
+        flexWrap: "wrap"
+    }
+};
+
+export const defaultVerticalStyle: CustomStyle = {
+    container: {
+        flexDirection: "column"
+    }
+};

tsconfig.json

@@ -1,3 +1,7 @@
 {
-  "extends": "./node_modules/@mendix/pluggable-widgets-tools/configs/tsconfig.base.json"
+  "extends": "@mendix/pluggable-widgets-tools/configs/tsconfig.base",
+  "compilerOptions": {
+    "baseUrl": "./"
+  },
+  "include": ["./src", "./typings"]
 }