Adds AnimatedImage component (#79)

Author: a7ul

package-lock.json

@@ -31,7 +31,7 @@
     "react": "^16.9.0"
   },
   "devDependencies": {
-    "@nodegui/nodegui": "^0.6.9",
+    "@nodegui/nodegui": "^0.7.0",
     "@types/node": "^12.0.10",
     "prettier": "^1.18.2",
     "react": "^16.9.0",

package.json

@@ -0,0 +1,55 @@
+import { QLabel, NodeWidget, QMovie, QSize } from "@nodegui/nodegui";
+import { TextProps, setTextProps } from "../Text/RNText";
+import { RNWidget } from "../config";
+import { throwUnsupported } from "../../utils/helpers";
+
+export interface AnimatedImageProps extends TextProps {
+  src?: string;
+}
+
+const setAnimatedImageProps = (
+  widget: RNAnimatedImage,
+  newProps: AnimatedImageProps,
+  oldProps: AnimatedImageProps
+) => {
+  const setter: AnimatedImageProps = {
+    set src(imageUrl: string) {
+      if (!imageUrl) {
+        return;
+      }
+      const movie = new QMovie();
+      movie.setFileName(imageUrl);
+      widget.setMovie(movie);
+      const size = widget.size();
+      movie.setScaledSize(size);
+    }
+  };
+  Object.assign(setter, newProps);
+  setTextProps(widget, newProps, oldProps);
+};
+
+/**
+ * @ignore
+ */
+export class RNAnimatedImage extends QLabel implements RNWidget {
+  setProps(newProps: AnimatedImageProps, oldProps: AnimatedImageProps): void {
+    setAnimatedImageProps(this, newProps, oldProps);
+  }
+  appendInitialChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget, beforeChild: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  static tagName = "animatedimage";
+  scaleMovie(size: QSize) {
+    const movie = this.movie();
+    movie?.setScaledSize(size);
+  }
+}

src/components/AnimatedImage/RNAnimatedImage.ts

@@ -0,0 +1,49 @@
+import { Fiber } from "react-reconciler";
+import { registerComponent, ComponentConfig } from "../config";
+import { RNAnimatedImage, AnimatedImageProps } from "./RNAnimatedImage";
+import { AppContainer } from "../../reconciler";
+import { QLabelEvents } from "@nodegui/nodegui";
+
+class AnimatedImageConfig extends ComponentConfig {
+  tagName = RNAnimatedImage.tagName;
+  shouldSetTextContent(nextProps: AnimatedImageProps): boolean {
+    return true;
+  }
+  createInstance(
+    newProps: AnimatedImageProps,
+    rootInstance: AppContainer,
+    context: any,
+    workInProgress: Fiber
+  ): RNAnimatedImage {
+    const widget = new RNAnimatedImage();
+    widget.setProps(newProps, {});
+    widget.movie()?.start();
+    widget.addEventListener(QLabelEvents.Resize, () => {
+      widget.scaleMovie(widget.size());
+    });
+    return widget;
+  }
+  commitMount(
+    instance: RNAnimatedImage,
+    newProps: AnimatedImageProps,
+    internalInstanceHandle: any
+  ): void {
+    if (newProps.visible !== false) {
+      instance.show();
+    }
+    return;
+  }
+  commitUpdate(
+    instance: RNAnimatedImage,
+    updatePayload: any,
+    oldProps: AnimatedImageProps,
+    newProps: AnimatedImageProps,
+    finishedWork: Fiber
+  ): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+
+export const AnimatedImage = registerComponent<AnimatedImageProps>(
+  new AnimatedImageConfig()
+);

src/components/AnimatedImage/index.ts

@@ -1,4 +1,10 @@
-import { QLabel, QPixmap, AspectRatioMode, NodeWidget } from "@nodegui/nodegui";
+import {
+  QLabel,
+  QPixmap,
+  AspectRatioMode,
+  NodeWidget,
+  QSize
+} from "@nodegui/nodegui";
 import { TextProps, setTextProps } from "../Text/RNText";
 import { RNWidget } from "../config";
 import { throwUnsupported } from "../../utils/helpers";
@@ -21,7 +27,7 @@ const setImageProps = (
       const pixMap = new QPixmap(imageUrl);
       widget.setPixmap(pixMap);
       const size = widget.size();
-      widget.scalePixmap(size.width(), size.height());
+      widget.scalePixmap(size);
     },
     set aspectRatioMode(mode: AspectRatioMode) {
       widget.setAspectRatioMode(mode);
@@ -58,15 +64,19 @@ export class RNImage extends QLabel implements RNWidget {
     super.setPixmap(pixmap);
     this.originalPixmap = pixmap;
   };
-  setAspectRatioMode = (mode: AspectRatioMode) => {
+  setAspectRatioMode(mode: AspectRatioMode) {
     // react:✓ TODO://getter
     this.aspectRatioMode = mode;
-  };
-  scalePixmap = (width: number, height: number) => {
+  }
+  scalePixmap(size: QSize) {
     if (this.originalPixmap) {
       return super.setPixmap(
-        this.originalPixmap.scaled(width, height, this.aspectRatioMode)
+        this.originalPixmap.scaled(
+          size.width(),
+          size.height(),
+          this.aspectRatioMode
+        )
       );
     }
-  };
+  }
 }

src/components/Image/RNImage.ts

@@ -17,8 +17,7 @@ class ImageConfig extends ComponentConfig {
     const widget = new RNImage();
     widget.setProps(newProps, {});
     widget.addEventListener(QLabelEvents.Resize, () => {
-      const size = widget.size();
-      widget.scalePixmap(size.width(), size.height());
+      widget.scalePixmap(widget.size());
     });
     return widget;
   }

src/components/Image/index.ts

@@ -1,12 +1,19 @@
 import React from "react";
 import { Renderer, Button, Window, View } from "./index";
+import { AnimatedImage } from "./components/AnimatedImage";
 
 const App = () => {
   return (
     <Window>
       <View style={containerStyle}>
-        <Button style={buttonStyle} text={"Hello"} />
-        <Button style={buttonStyle} text={"World"} />
+        <View>
+          <Button style={buttonStyle} text={"Hello"} />
+          <Button style={buttonStyle} text={"World"} />
+        </View>
+        <AnimatedImage
+          style="width:200px; height: 150px;"
+          src="/Users/atulr/Project/nodegui/nodegui/src/lib/QtGui/__tests__/assets/fine.gif"
+        />
       </View>
     </Window>
   );

src/demo.tsx

@@ -3,6 +3,7 @@ export { View } from "./components/View";
 export { Window } from "./components/Window";
 export { Text } from "./components/Text";
 export { Image } from "./components/Image";
+export { AnimatedImage } from "./components/AnimatedImage";
 export { Button } from "./components/Button";
 export { CheckBox } from "./components/CheckBox";
 export { LineEdit } from "./components/LineEdit";