fix: ✨ lint clean up and docs

package.json

@@ -1,35 +1,35 @@
 {
-  "name": "imagecarouselwidget",
-  "widgetName": "Imagecarouselwidget",
-  "version": "1.0.0",
-  "description": "My widget description",
-  "copyright": "2020 Mendix Technology BV",
-  "author": "ahwelgemoed",
-  "config": {
-    "projectPath": "./tests/testProject/",
-    "mendixHost": "http://localhost:8080",
-    "developmentPort": "3000"
-  },
-  "packagePath": "mendix",
-  "scripts": {
-    "start": "pluggable-widgets-tools start:server --open",
-    "dev": "pluggable-widgets-tools start:web",
-    "build": "pluggable-widgets-tools build:web",
-    "lint": "pluggable-widgets-tools lint",
-    "lint:fix": "pluggable-widgets-tools lint:fix",
-    "prerelease": "npm run lint",
-    "release": "pluggable-widgets-tools release:web"
-  },
-  "license": "Apache-2.0",
-  "devDependencies": {
-    "@mendix/pluggable-widgets-tools": "^8.14.0",
-    "@types/big.js": "^4.0.5",
-    "@types/classnames": "^2.2.4",
-    "@types/react": "~16.9.0",
-    "@types/react-dom": "~16.9.0"
-  },
-  "dependencies": {
-    "classnames": "^2.2.6",
-    "react-responsive-carousel": "^3.2.12"
-  }
+    "name": "imagecarouselwidget",
+    "widgetName": "Imagecarouselwidget",
+    "version": "1.0.0",
+    "description": "My widget description",
+    "copyright": "2021 Mendix Technology BV",
+    "author": "ahwelgemoed",
+    "config": {
+        "projectPath": "./tests/testProject/",
+        "mendixHost": "http://localhost:8080",
+        "developmentPort": "3000"
+    },
+    "packagePath": "mendix",
+    "scripts": {
+        "start": "pluggable-widgets-tools start:server --open",
+        "dev": "pluggable-widgets-tools start:web",
+        "build": "pluggable-widgets-tools build:web",
+        "lint": "pluggable-widgets-tools lint",
+        "lint:fix": "pluggable-widgets-tools lint:fix",
+        "prerelease": "npm run lint",
+        "release": "pluggable-widgets-tools release:web"
+    },
+    "license": "Apache-2.0",
+    "devDependencies": {
+        "@mendix/pluggable-widgets-tools": "^8.14.0",
+        "@types/big.js": "^4.0.5",
+        "@types/classnames": "^2.2.4",
+        "@types/react": "~16.9.0",
+        "@types/react-dom": "~16.9.0"
+    },
+    "dependencies": {
+        "classnames": "^2.2.6",
+        "react-responsive-carousel": "^3.2.12"
+    }
 }

src/Imagecarouselwidget.tsx

@@ -1,18 +1,18 @@
-import { createElement, Fragment, useEffect, useState } from "react";
+import { createElement, Fragment, useEffect, useState, CSSProperties, ReactNode } from "react";
 import { ImagecarouselwidgetContainerProps } from "../typings/ImagecarouselwidgetProps";
 import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
 import { Carousel } from "react-responsive-carousel";
 
 import "./ui/Imagecarouselwidget.css";
 // http://localhost:3000/file?guid=8162774324609325&changedDate=1614241267582
-const Imagecarouselwidget = (props: ImagecarouselwidgetContainerProps) => {
+const Imagecarouselwidget = (props: ImagecarouselwidgetContainerProps): ReactNode => {
     const {
         content,
         autoPlay,
+        maxWidth,
         swipeable,
         maxHeight,
         showArrows,
-        showThumbs,
         stopOnHover,
         incomingData,
         infiniteLoop,
@@ -32,31 +32,68 @@ const Imagecarouselwidget = (props: ImagecarouselwidgetContainerProps) => {
             }, 0);
         }
     }, [incomingData.status]);
+
+    const arrowStyles: CSSProperties = {
+        position: "absolute",
+        zIndex: 2,
+        top: "calc(50% - 15px)",
+        fontSize: 22,
+        cursor: "pointer",
+        color: "#0595DB"
+    };
+
+    console.log("maxWidth", maxWidth);
     return (
-        <div>
+        <div style={{ maxWidth: maxWidth ? maxWidth : "none", margin: "0 auto" }}>
             {!loading && (
                 <Carousel
+                    showThumbs={false}
                     autoPlay={autoPlay}
                     swipeable={swipeable}
-                    showThumbs={showThumbs}
                     showArrows={showArrows}
                     stopOnHover={stopOnHover}
                     infiniteLoop={infiniteLoop}
                     dynamicHeight={dynamicHeight}
                     showIndicators={showIndicators}
                     useKeyboardArrows={useKeyboardArrows}
+                    renderArrowPrev={(onClickHandler, hasPrev, label) =>
+                        hasPrev && (
+                            <span
+                                onClick={onClickHandler}
+                                title={label}
+                                className="Image-Carousel__Prev"
+                                style={{ ...arrowStyles, left: 15 }}
+                            >
+                                {"<"}
+                            </span>
+                        )
+                    }
+                    renderArrowNext={(onClickHandler, hasNext, label) =>
+                        hasNext && (
+                            <span
+                                onClick={onClickHandler}
+                                title={label}
+                                className="Image-Carousel__Next"
+                                style={{ ...arrowStyles, right: 15 }}
+                            >
+                                {">"}
+                            </span>
+                        )
+                    }
                 >
-                    {incomingData.items?.map((item: any) => {
+                    {incomingData.items?.map((item: any, i: number) => {
                         return (
-                            <Fragment>
+                            <Fragment key={i}>
                                 <img
                                     style={{
                                         maxHeight: maxHeight ? maxHeight : "auto",
                                         width: maxHeight ? "auto" : "100%"
                                     }}
                                     src={`${window.location.origin}/file?guid=${item.id}`}
                                 />
-                                <h2 style={{ position: "absolute", top: 10, left: 10 }}>{content(item)}</h2>
+                                <div className={`Image-Carousel__Content Image-Carousel__Content__${i}`}>
+                                    {content(item)}
+                                </div>
                             </Fragment>
                         );
                     })}

src/Imagecarouselwidget.xml

@@ -5,7 +5,7 @@
         xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
     <name>Imagecarouselwidget</name>
     <description>My widget description</description>
-    <icon/>
+    <icon>iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAL4SURBVHgB7Zo7b9NQFMf/edDISZpYSicYqFjoBF8AwUdgYQ0LWRhYaL9BZsTADAOsLCwsiEqp6BSWdgGJhyhQUJoaEqLYSskDH0tuQ+pr3/i6rZN7f1NkH0c6v3vvOdePxMgGEpOE5CgBkBwlAJKjBEBylABIjhIAyVECIDlKACQnzTrxaLuF4sLs+ylmUoD9xOPmpZzneU8BtR8Wrp/XcHUpg3mABpMFc4gdc3NCcYGdSxocPH3/BzudvvO7vFLA8iLXZTMBp4AONuxlQdDSmCcBqgvwBN1eWcSNC5rz+2LhHDOOHjBblgX3QXM6nUYmc1RIK+t7qO2a+FBeRlzgFFDwPU8Jt9ttJ/lJUqkU8vk8XjVGTi0hqCrfu6IjDggvgcFggGaz6Zm8e57k3N/YOzxWrf9CqzdEHBASQCNvGIaTpB/Pv/bxrXsUQ8mThDggJMA0zcDkv5sjPHx3cOw4LYOt/R54uLPe4I6dFiEB3W43MIaSJwlerL7ZD7rcqRvP7DbMExuG0AKGwyHX6NP0Z0F7i9qu5fsf7lKh2Befg4VPS2gBPO9Uvab+JBV7erMKIiXv7kCJtc1m5MXzxDZCNPJ+o+9CCXrdrOx0/h4rlKxYEUILoP6eTLIv5xl9F0pqcmSr9d/M2C+dYLG8CM2AbDbrefzxxz6z8HlBya/a09tly+gdbpq8Yqt1A1EhJCCXyzkzYRxK/Mkn/tF3oUrvFsRbL39yx4oiJICWQKlU+k+CX9sLgtb8+K13UGwUCBdBSp4kaJoW2PaCoFa3tsnX7ymWtUymIZIuQBJ0XcfdtwOIMk2bI1mibTGyNkijsW2czHaVBSUv2hYjE3BWNzeibTESAZM7ttOEZkHldQNhERYQxTQUheeegkUkTzfLlwtoHYgXQBHCFkNhAXomiQfXljCrqJejkBxPAfocvBQdh5YpiwTra/Eotplxgd4Nst4OJ9Tn8pKjBEBylABIjhIAyVECIDlKACRHCYDkKAGQnLh983rqzyb+AamVY4hxGRlDAAAAAElFTkSuQmCC</icon>
     <properties>
         <propertyGroup caption="General">
             <propertyGroup caption="Data">
@@ -14,25 +14,29 @@
                     <description>Nanoflow or Microflow of flitered and sorted data to display</description>
                 </property>
                 <property key="content" type="widgets" required="true" dataSource="incomingData">
-                    <caption>Style the List Card</caption>
+                    <caption>Content On Image</caption>
                     <description>Widgets using data source</description>
                 </property>
                  <property key="maxHeight" type="integer" defaultValue="0" required='true'>
                     <caption>Max Height</caption>
                     <description></description>
                 </property>
+                 <property key="maxWidth" type="integer" defaultValue="0" required='true'>
+                    <caption>Max Width</caption>
+                    <description></description>
+                </property>
             </propertyGroup>
             <propertyGroup caption="Enable/disable">
                 <property key="autoPlay" type="boolean" defaultValue="true">
                     <caption>Auto Play</caption>
                     <description></description>
                 </property>
                 <property key="stopOnHover" type="boolean" defaultValue="true">
-                    <caption>DisableWeekends</caption>
+                    <caption>Stop OnHover</caption>
                     <description></description>
                 </property>    
                 <property key="infiniteLoop" type="boolean" defaultValue="true">
-                    <caption>DisableWeekends</caption>
+                    <caption>Infinite Loop</caption>
                     <description></description>
                 </property>    
                 <property key="swipeable" type="boolean" defaultValue="true">
@@ -47,10 +51,7 @@
                     <caption>Dynamic Height</caption>
                     <description></description>
                 </property>    
-                <property key="showThumbs" type="boolean" defaultValue="true">
-                    <caption>Show Thumbs</caption>
-                    <description></description>
-                </property>    
+
                 <property key="showIndicators" type="boolean" defaultValue="true">
                     <caption>Show Indicators</caption>
                     <description></description>

src/ui/Imagecarouselwidget.css

@@ -1,14 +1,27 @@
 /*
 Place your custom CSS here
 */
-.widget-hello-world {
-}
-/* .carousel .thumb img {
-    width: 100% !important;
-    height: 100% !important;
-} */
 
-/* .carousel .slide img {
-    max-height: 300px; 
-    width: auto;
-} */
+.Image-Carousel__Content {
+    width: 100%;
+    position: absolute;
+    /* background-color: aqua; */
+    /* background-color: azure; */
+    color: white;
+    font-size: 30px;
+    bottom: 50px;
+    left: 10px;
+}
+.Image-Carousel__Content__0 {
+    width: 100%;
+    position: absolute;
+    /* background-color: aqua; */
+    /* background-color: azure; */
+    color: white;
+    font-size: 30px;
+    top: 50px;
+    left: 10px;
+}
+.carousel-status {
+    display: none;
+}

typings/ImagecarouselwidgetProps.d.ts

@@ -14,13 +14,13 @@ export interface ImagecarouselwidgetContainerProps {
     incomingData: ListValue;
     content: ListWidgetValue;
     maxHeight: number;
+    maxWidth: number;
     autoPlay: boolean;
     stopOnHover: boolean;
     infiniteLoop: boolean;
     swipeable: boolean;
     showArrows: boolean;
     dynamicHeight: boolean;
-    showThumbs: boolean;
     showIndicators: boolean;
     useKeyboardArrows: boolean;
 }
@@ -31,13 +31,13 @@ export interface ImagecarouselwidgetPreviewProps {
     incomingData: {} | null;
     content: { widgetCount: number; renderer: ComponentType };
     maxHeight: number | null;
+    maxWidth: number | null;
     autoPlay: boolean;
     stopOnHover: boolean;
     infiniteLoop: boolean;
     swipeable: boolean;
     showArrows: boolean;
     dynamicHeight: boolean;
-    showThumbs: boolean;
     showIndicators: boolean;
     useKeyboardArrows: boolean;
 }