Added Image view example

Author: a7ul

examples/image-view/README.md

@@ -0,0 +1,14 @@
+# Image viewer app
+
+This example showcases how to build a basic image viewer clone.
+
+**Screenshot:**
+
+<img alt="demo_mac" src="https://github.com/master-atul/react-desktop/raw/master/examples/image-view/image_view_mac.png" height="400" />
+<img alt="demo_linux" src="https://github.com/master-atul/react-desktop/raw/master/examples/image-view/image_view_linux.png" height="400" />
+
+To run the demo:
+
+1. `yarn build`
+
+2. `yarn qode dist/examples/image-view/index.js`

examples/image-view/index.tsx

@@ -0,0 +1,94 @@
+import {
+  Renderer,
+  View,
+  Button,
+  Window,
+  Image,
+  LineEdit
+} from "../../src/index";
+import React, { useEffect, useRef, useMemo, useState } from "react";
+import {
+  AspectRatioMode,
+  QMainWindow,
+  QLineEditEvents,
+  QPushButtonEvents
+} from "@nodegui/nodegui";
+
+const App = () => {
+  const winRef = useRef<QMainWindow>(null);
+  const [fileUrl, setFileUrl] = useState();
+  const [imageSrc, setImageSrc] = useState();
+  useEffect(() => {
+    if (winRef.current) {
+      winRef.current.resize(800, 450);
+    }
+  }, []);
+  const lineEditHandler = useMemo(
+    () => ({
+      [QLineEditEvents.textChanged]: (text: string) => {
+        setFileUrl(text);
+      }
+    }),
+    []
+  );
+
+  const loadButtonHandler = useMemo(
+    () => ({
+      [QPushButtonEvents.clicked]: () => {
+        setImageSrc(fileUrl);
+      }
+    }),
+    [fileUrl]
+  );
+
+  return (
+    <>
+      <Window ref={winRef} styleSheet={styleSheet}>
+        <View id="container">
+          <View id="controls">
+            <LineEdit
+              on={lineEditHandler}
+              id="textField"
+              text={fileUrl}
+              placeholderText="Absolute path to an image"
+            />
+            <Button text="Load Image" on={loadButtonHandler} />
+          </View>
+          <Image
+            id="img"
+            aspectRatioMode={AspectRatioMode.KeepAspectRatio}
+            src={imageSrc}
+          ></Image>
+        </View>
+      </Window>
+    </>
+  );
+};
+
+const styleSheet = `
+  #container {
+    qproperty-flex: 1;
+    qproperty-minHeight: '100%';
+  }
+  #controls {
+    qproperty-flexDirection: 'row';
+    qproperty-justifyContent: 'space-around';
+    qproperty-alignItems: 'center';
+    qproperty-paddingHorizontal: 20;
+    qproperty-paddingVertical: 10;
+  }
+  #img {
+    qproperty-flex: 1;
+    qproperty-alignment: 'AlignCenter';
+  }
+  #textField {
+    qproperty-flex: 1;
+  }
+`;
+
+Renderer.render(<App />, {
+  onRender: () => {
+    console.log("Yo");
+  },
+  enableDevtools: true
+});

src/components/Image/index.ts

@@ -16,6 +16,8 @@ const setProps = (
     set src(imageUrl: string) {
       const pixMap = new QPixmap(imageUrl);
       widget.setPixmap(pixMap);
+      const size = widget.size();
+      widget.scalePixmap(size.width, size.height);
     },
     set aspectRatioMode(mode: AspectRatioMode) {
       widget.setAspectRatioMode(mode);

src/components/LineEdit/index.ts

@@ -5,6 +5,7 @@ import { ViewProps, setProps as setViewProps } from "../View";
 interface LineEditProps extends ViewProps {
   children?: string;
   text?: string;
+  placeholderText?: string;
 }
 
 const setProps = (
@@ -13,9 +14,12 @@ const setProps = (
   oldProps: LineEditProps
 ) => {
   const setter: LineEditProps = {
-    // set text(checkboxText: string) {
-    //   widget.setText(checkboxText);
-    // }
+    set text(text: string) {
+      widget.setText(text);
+    },
+    set placeholderText(text: string) {
+      widget.setPlaceholderText(text);
+    }
   };
   Object.assign(setter, newProps);
   setViewProps(widget, newProps, oldProps);

src/demo.tsx

@@ -1,16 +1,56 @@
-import { Renderer, View, Window, Image } from "./index";
-import React from "react";
-import { AspectRatioMode } from "@nodegui/nodegui";
+import { Renderer, View, Button, Window, Image, LineEdit } from "./index";
+import React, { useEffect, useRef, useMemo, useState } from "react";
+import {
+  AspectRatioMode,
+  QMainWindow,
+  QLineEditEvents,
+  QPushButtonEvents
+} from "@nodegui/nodegui";
 
 const App = () => {
+  const winRef = useRef<QMainWindow>(null);
+  const [fileUrl, setFileUrl] = useState();
+  const [imageSrc, setImageSrc] = useState();
+  useEffect(() => {
+    if (winRef.current) {
+      winRef.current.resize(800, 450);
+    }
+  }, []);
+  const lineEditHandler = useMemo(
+    () => ({
+      [QLineEditEvents.textChanged]: (text: string) => {
+        setFileUrl(text);
+      }
+    }),
+    []
+  );
+
+  const loadButtonHandler = useMemo(
+    () => ({
+      [QPushButtonEvents.clicked]: () => {
+        setImageSrc(fileUrl);
+      }
+    }),
+    [fileUrl]
+  );
+
   return (
     <>
-      <Window styleSheet={styleSheet}>
+      <Window ref={winRef} styleSheet={styleSheet}>
         <View id="container">
+          <View id="controls">
+            <LineEdit
+              on={lineEditHandler}
+              id="textField"
+              text={fileUrl}
+              placeholderText="Absolute path to an image"
+            />
+            <Button text="Load Image" on={loadButtonHandler} />
+          </View>
           <Image
             id="img"
             aspectRatioMode={AspectRatioMode.KeepAspectRatio}
-            src="/Users/atulr/Downloads/demo.png"
+            src={imageSrc}
           ></Image>
         </View>
       </Window>
@@ -21,11 +61,21 @@ const App = () => {
 const styleSheet = `
   #container {
     qproperty-flex: 1;
-    qproperty-flexDirection: column;
     qproperty-minHeight: '100%';
   }
+  #controls {
+    qproperty-flexDirection: 'row';
+    qproperty-justifyContent: 'space-around';
+    qproperty-alignItems: 'center';
+    qproperty-paddingHorizontal: 20;
+    qproperty-paddingVertical: 10;
+  }
   #img {
     qproperty-flex: 1;
+    qproperty-alignment: 'AlignCenter';
+  }
+  #textField {
+    qproperty-flex: 1;
   }
 `;