Adds minSize, maxSize,size and pos

And renames window's viewProps to centralWidgetProps

Author: a7ul

src/components/View/index.ts

@@ -14,22 +14,38 @@ type Geometry = {
   width: number;
   height: number;
 };
+
+type ViewSize = {
+  width: number;
+  height: number;
+};
+type ViewSizeWithFixed = ViewSize & {
+  fixed?: boolean;
+};
+type ViewPos = {
+  x: number;
+  y: number;
+};
 export interface ListenerMap {
   [key: string]: (payload?: any) => void;
 }
 export interface ViewProps {
   visible?: boolean;
   styleSheet?: string;
-  style?: string; // Inline style from NodeGui
+  style?: string;
   geometry?: Geometry;
   id?: string;
   mouseTracking?: boolean;
   enabled?: boolean;
   windowOpacity?: Number;
   windowTitle?: string;
   windowState?: WindowState;
-  windowIcon?: QIcon;
   cursor?: CursorShape | QCursor;
+  windowIcon?: QIcon;
+  minSize?: ViewSize;
+  maxSize?: ViewSize;
+  size?: ViewSizeWithFixed;
+  pos?: ViewPos;
   on?: ListenerMap;
   ref?: any;
 }
@@ -84,6 +100,29 @@ export const setProps = (
     set windowIcon(icon: QIcon) {
       widget.setWindowIcon(icon);
     },
+    set minSize(size: ViewSize) {
+      widget.setMinimumSize(size.width, size.height);
+    },
+    set maxSize(size: ViewSize) {
+      widget.setMaximumSize(size.width, size.height);
+    },
+    set size(size: ViewSizeWithFixed) {
+      if (size.fixed) {
+        widget.setFixedSize(size.width, size.height);
+      } else {
+        const minSize = newProps.minSize || { width: 0, height: 0 };
+        const maxSize = newProps.maxSize || {
+          width: 16777215,
+          height: 16777215
+        };
+        widget.setMinimumSize(minSize.width, minSize.height);
+        widget.setMaximumSize(maxSize.width, maxSize.height);
+        widget.resize(size.width, size.height);
+      }
+    },
+    set pos(position: ViewPos) {
+      widget.move(position.x, position.y);
+    },
     set on(listenerMap: ListenerMap) {
       const listenerMapLatest = Object.assign({}, listenerMap);
       const oldListenerMap = Object.assign({}, oldProps.on);

src/components/Window/index.ts

@@ -1,16 +1,8 @@
 import { registerComponent } from "../config";
 import { QMainWindow, QWidget, FlexLayout } from "@nodegui/nodegui";
 import { ViewProps, setProps as setViewProps } from "../View";
-
-type WindowSize = {
-  width: number;
-  height: number;
-};
 interface WindowProps extends ViewProps {
-  viewProps?: ViewProps;
-  fixedSize?: WindowSize | null;
-  minSize?: WindowSize;
-  maxSize?: WindowSize;
+  centralWidgetProps?: ViewProps;
 }
 
 const setProps = (
@@ -19,32 +11,17 @@ const setProps = (
   oldProps: WindowProps
 ) => {
   const setter: WindowProps = {
-    set fixedSize(size: WindowSize | null) {
-      if (size) {
-        window.setFixedSize(size.width, size.height);
-      } else {
-        const minSize = newProps.minSize || { width: 0, height: 0 };
-        const maxSize = newProps.maxSize || {
-          width: 16777215,
-          height: 16777215
-        };
-        window.setMinimumSize(minSize.width, minSize.height);
-        window.setMaximumSize(maxSize.width, maxSize.height);
-      }
-    },
-    set minSize(size: WindowSize) {
-      window.setMinimumSize(size.width, size.height);
-    },
-    set maxSize(size: WindowSize) {
-      window.setMaximumSize(size.width, size.height);
-    },
-    set viewProps(viewProps: object) {
+    set centralWidgetProps(centralWidgetProps: object) {
       if (window.centralWidget) {
-        const oldViewProps = oldProps.viewProps || {};
-        setViewProps(window.centralWidget, viewProps, oldViewProps);
+        const oldcentralWidgetProps = oldProps.centralWidgetProps || {};
+        setViewProps(
+          window.centralWidget,
+          centralWidgetProps,
+          oldcentralWidgetProps
+        );
       } else {
         console.warn(
-          "Trying to set wiewProps for main window but no central widget set."
+          "Trying to set viewProps for main window but no central widget set."
         );
       }
     }

src/demo.tsx

@@ -1,6 +1,8 @@
 import { Renderer, Window } from "./index";
-import React, { useEffect, useRef } from "react";
-import { QMainWindow } from "@nodegui/nodegui";
+import React, { useEffect, useRef, useState } from "react";
+import { QMainWindow, QPushButtonEvents } from "@nodegui/nodegui";
+import { Button } from "./components/Button";
+import { useEventHandler } from "./hooks";
 
 const App = () => {
   const winRef = useRef<QMainWindow>(null);
@@ -9,11 +11,22 @@ const App = () => {
       winRef.current.resize(800, 450);
     }
   }, []);
+  const [resizeable, setResizeable] = useState(true);
+  const btnHandler = useEventHandler(
+    {
+      [QPushButtonEvents.clicked]: () => {
+        console.log("clicked");
+        setResizeable(!resizeable);
+      }
+    },
+    [resizeable]
+  );
+  const size = { width: 200, height: 200, fixed: !resizeable };
 
   return (
-    <>
-      <Window ref={winRef} styleSheet={styleSheet}></Window>
-    </>
+    <Window size={size} ref={winRef} styleSheet={styleSheet}>
+      <Button text={resizeable ? "❌" : "✅"} on={btnHandler} />
+    </Window>
   );
 };