Cleanup of react-nodegui and remove non-working methods from view

Author: a7ul

package-lock.json

@@ -22,11 +22,11 @@
     "react": "16.9.0"
   },
   "devDependencies": {
-    "@nodegui/nodegui": "^0.1.5",
+    "@nodegui/nodegui": "^0.1.7",
     "@types/node": "^12.0.10",
     "@types/react-reconciler": "^0.18.0",
     "prettier": "^1.18.2",
     "react": "^16.9.0",
     "typescript": "^3.5.2"
   }
-}
+}

package.json

@@ -1,9 +1,4 @@
-import {
-  QWidget,
-  NodeWidget,
-  WidgetAttribute,
-  WindowType
-} from "@nodegui/nodegui";
+import { QWidget, NodeWidget } from "@nodegui/nodegui";
 import { registerComponent } from "../config";
 
 type Geometry = {
@@ -16,18 +11,16 @@ export interface ListenerMap {
   [key: string]: (payload?: any) => void;
 }
 export interface ViewProps {
+  visible?: boolean;
+  styleSheet?: string;
+  style?: string; // Inline style from NodeGui
   geometry?: Geometry;
   id?: string;
-  style?: string; // Inline style from NodeGui
-  styleSheet?: string;
-  visible?: boolean;
-  ref?: any;
-  on?: ListenerMap;
   mouseTracking?: boolean;
   enabled?: boolean;
-  attributes?: WidgetAttribute[];
-  windowFlags?: WindowType[];
   windowOpacity?: Number;
+  on?: ListenerMap;
+  ref?: any;
 }
 
 export const setProps = (
@@ -36,35 +29,38 @@ export const setProps = (
   oldProps: ViewProps
 ) => {
   const setter: ViewProps = {
-    set geometry(geometry: Geometry) {
-      widget.setGeometry(
-        geometry.x,
-        geometry.y,
-        geometry.width,
-        geometry.height
-      );
-    },
     set visible(shouldShow: boolean) {
       shouldShow ? widget.show() : widget.hide();
     },
+    set styleSheet(styleSheet: string) {
+      widget.setStyleSheet(styleSheet);
+    },
     set style(inlineStyle: string) {
       if (newProps.styleSheet) {
         console.warn("Both styleSheet and inlineStyle can't be used together");
       }
       widget.setInlineStyle(inlineStyle);
     },
-    set styleSheet(styleSheet: string) {
-      widget.setStyleSheet(styleSheet);
+    set geometry(geometry: Geometry) {
+      widget.setGeometry(
+        geometry.x,
+        geometry.y,
+        geometry.width,
+        geometry.height
+      );
     },
     set id(id: string) {
       widget.setObjectName(id);
     },
     set mouseTracking(isMouseTracked: boolean) {
-      widget.setMouseTracking(isMouseTracked); //TODO: add a getter for this in nodegui
+      widget.setMouseTracking(isMouseTracked);
     },
     set enabled(enable: boolean) {
       widget.setEnabled(enable);
     },
+    set windowOpacity(opacity: Number) {
+      widget.setWindowOpacity(opacity);
+    },
     set on(listenerMap: ListenerMap) {
       const listenerMapLatest = Object.assign({}, listenerMap);
       const oldListenerMap = Object.assign({}, oldProps.on);
@@ -83,29 +79,6 @@ export const setProps = (
           widget.addEventListener(eventType, newEvtListener);
         }
       );
-    },
-    set attributes(attributes: WidgetAttribute[]) {
-      const oldAttributes = oldProps.attributes || [];
-      const newAttributes = attributes || [];
-      oldAttributes.forEach(eachOldAttribute => {
-        widget.setAttribute(eachOldAttribute, false);
-      });
-      newAttributes.forEach(eachNewAttribute => {
-        widget.setAttribute(eachNewAttribute, true);
-      });
-    },
-    set windowFlags(windowTypes: WindowType[]) {
-      const oldFlags = oldProps.windowFlags || [];
-      const newFlags = windowTypes || [];
-      oldFlags.forEach(eachOldFlag => {
-        widget.setWindowFlag(eachOldFlag, false);
-      });
-      newFlags.forEach(eachNewWindowFlag => {
-        widget.setWindowFlag(eachNewWindowFlag, true);
-      });
-    },
-    set windowOpacity(opacity: Number) {
-      widget.setWindowOpacity(opacity);
     }
   };
   Object.assign(setter, newProps);

src/components/View/index.ts

@@ -1,65 +1,18 @@
-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";
+import { Renderer, Window } from "./index";
+import React, { useEffect, useRef } from "react";
+import { QMainWindow } 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
-              style={`
-              background-color: green;
-            `}
-              text="Load Image"
-              on={loadButtonHandler}
-            />
-          </View>
-          <Image
-            id="img"
-            aspectRatioMode={AspectRatioMode.KeepAspectRatio}
-            src={imageSrc}
-          ></Image>
-        </View>
-      </Window>
+      <Window ref={winRef} styleSheet={styleSheet}></Window>
     </>
   );
 };
@@ -69,24 +22,6 @@ const styleSheet = `
     flex: 1;
     min-height: '100%';
   }
-  #controls {
-    flex-direction: 'row';
-    justify-content: 'space-around';
-    align-items: 'center';
-    padding-horizontal: 20;
-    padding-vertical: 10;
-  }
-  #img {
-    flex: 1;
-    qproperty-alignment: 'AlignCenter';
-  }
-  #textField {
-    flex: 1;
-  }
 `;
 
-Renderer.render(<App />, {
-  onRender: () => {
-    console.log("Yo");
-  }
-});
+Renderer.render(<App />);

src/demo.tsx

@@ -1,7 +1,6 @@
 import Reconciler from "react-reconciler";
 import { NodeWidget, FlexLayout } from "@nodegui/nodegui";
 import { getComponent } from "../components/config";
-import * as scheduler from "scheduler";
 
 export type AppContainer = Set<NodeWidget>;
 export const appContainer: AppContainer = new Set<NodeWidget>();