Achieves feature parity with NodeGUI v0.1.9 interms of methods and widgets exported

Author: a7ul

package-lock.json

@@ -22,7 +22,7 @@
     "react": "16.9.0"
   },
   "devDependencies": {
-    "@nodegui/nodegui": "^0.1.8",
+    "@nodegui/nodegui": "^0.1.9",
     "@types/node": "^12.0.10",
     "@types/react-reconciler": "^0.18.0",
     "prettier": "^1.18.2",

package.json

@@ -20,7 +20,6 @@ export class RNCheckBox extends QCheckBox implements RNWidget {
 }
 
 export interface CheckBoxProps extends ViewProps {
-  children?: string;
   text?: string;
   checked?: boolean;
 }

src/components/CheckBox/RNCheckBox.ts

@@ -19,7 +19,6 @@ export class RNLineEdit extends QLineEdit implements RNWidget {
 }
 
 export interface LineEditProps extends ViewProps {
-  children?: string;
   text?: string;
   placeholderText?: string;
   readOnly?: boolean;

src/components/LineEdit/RNLineEdit.ts

@@ -20,9 +20,9 @@ export class RNPlainTextEdit extends QPlainTextEdit implements RNWidget {
 }
 
 export interface PlainTextEditProps extends ViewProps {
-  children?: string;
   text?: string;
   readOnly?: boolean;
+  placeholderText?: string;
 }
 
 export const setProps = (
@@ -36,6 +36,9 @@ export const setProps = (
     },
     set readOnly(isReadOnly: boolean) {
       widget.setReadOnly(isReadOnly);
+    },
+    set placeholderText(text: string) {
+      widget.setPlaceholderText(text);
     }
   };
   Object.assign(setter, newProps);

src/components/PlainTextEdit/RNPlainTextEdit.ts

@@ -4,8 +4,11 @@ import { RNWidget } from "../config";
 
 export class RNScrollArea extends QScrollArea implements RNWidget {
   removeChild(child: NodeWidget): void {
-    throw new Error("Method not implemented.");
-    //TODO: IMPLEMENT THIS
+    const removedChild = this.takeWidget();
+    if (removedChild) {
+      removedChild.close();
+    }
+    child.close();
   }
   appendInitialChild(child: NodeWidget): void {
     this.setWidget(child);

src/components/ScrollArea/RNScrollArea.ts

@@ -60,6 +60,7 @@ export class RNView extends QWidget implements RNWidget {
       return;
     }
     (this.layout as FlexLayout).removeWidget(child);
+    child.close();
   }
 }
 

src/components/View/RNView.ts

@@ -26,6 +26,7 @@ export class RNWindow extends QMainWindow implements RNWidget {
       return;
     }
     (this.layout as FlexLayout).removeWidget(child);
+    child.close();
   }
 }
 

src/components/Window/RNWindow.ts

@@ -9,56 +9,66 @@ import { ScrollArea } from "./components/ScrollArea";
 
 const App = () => {
   const winRef = useRef<QMainWindow>(null);
-  const [fileUrl, setFileUrl] = useState();
-  const [imageSrc, setImageSrc] = useState();
+  const [value, setValue] = useState(false);
   useEffect(() => {
     if (winRef.current) {
       winRef.current.resize(800, 450);
     }
   }, []);
-  const lineEditHandler = useMemo(
-    () => ({
-      [QLineEditEvents.textChanged]: (text: string) => {
-        setFileUrl(text);
-      }
-    }),
-    []
-  );
 
-  const loadButtonHandler = useMemo(
+  const toggleHandler = useMemo(
     () => ({
       [QPushButtonEvents.clicked]: () => {
-        setImageSrc(fileUrl);
+        setValue(!value);
       }
     }),
-    [fileUrl]
+    [value]
   );
 
   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} />
+            <Button text="Toggle scollwidget" on={toggleHandler} />
           </View>
           <ScrollArea style={`width:400px;height:400px;`}>
-            <View
-              style={`
+            {value ? (
+              <View
+                style={`
+                min-width: 0; 
               min-width: 0; 
-              min-height:0;
-              height:500px;
-              width: 500px;
-              background-color:green;
+                min-width: 0; 
+                min-height:0;
+                height:500px;
+                width: 500px;
+                background-color:green;
+              `}
+              >
+                <Text>Hello</Text>
+                <View
+                  style={`
+                  height: '50%';
+                  width: '50%';
+                  background-color: pink;
+                `}
+                ></View>
+              </View>
+            ) : (
+              <View
+                style={`
+                min-width: 0; 
+                min-width: 0; 
+                min-width: 0; 
+                min-height:0;
+                height:500px;
+                width: 500px;
+                background-color:blue;
               `}
-            >
-              <Text>Hello</Text>
-            </View>
+              >
+                <Text>World</Text>
+              </View>
+            )}
           </ScrollArea>
         </View>
       </Window>

src/demo.tsx

@@ -11,5 +11,5 @@ export { ProgressBar } from "./components/ProgressBar";
 export { RadioButton } from "./components/RadioButton";
 export { Dial } from "./components/Dial";
 export { SpinBox } from "./components/SpinBox";
-// export { ScrollArea } from "./components/ScrollArea"; // TODO: Not working correctly yet
+export { ScrollArea } from "./components/ScrollArea";
 export { useEventHandler } from "./hooks";