Creates abstract button for code sharing (#77)

Author: a7ul

package-lock.json

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

package.json

@@ -0,0 +1,59 @@
+import { QIcon, QSize } from "@nodegui/nodegui";
+import { ViewProps, setViewProps } from "../View/RNView";
+import { QAbstractButton } from "@nodegui/nodegui";
+
+/**
+ * The Button component provides ability to add and manipulate native button widgets. It is based on
+ * [NodeGui's QPushButton](https://docs.nodegui.org/docs/api/QPushButton).
+ * ## Example
+ * ```javascript
+ * import React from "react";
+ * import { Renderer, Button, Window } from "@nodegui/react-nodegui";
+ * const App = () => {
+ *   return (
+ *     <Window>
+ *       <Button style={buttonStyle} text={"Hello World"} />
+ *     </Window>
+ *   );
+ * };
+ * const buttonStyle = `
+ *   color: white;
+ * `;
+ * Renderer.render(<App />);
+ *
+ * ```
+ */
+export interface AbstractButtonProps extends ViewProps {
+  /**
+   * Sets the given text to the button. [QPushButton: setText](https://docs.nodegui.org/docs/api/QPushButton#buttonsettexttext)
+   */
+  text?: string;
+  /**
+   * Sets an icon in the button. [QPushButton: setIcon](https://docs.nodegui.org/docs/api/QPushButton#buttonseticonicon)
+   */
+  icon?: QIcon;
+  /**
+   * Sets an icon size in the button. [QPushButton: setIconSize](https://docs.nodegui.org/docs/api/QPushButton#buttonseticonsize)
+   */
+  iconSize?: QSize;
+}
+
+export const setAbstractButtonProps = (
+  widget: QAbstractButton,
+  newProps: AbstractButtonProps,
+  oldProps: AbstractButtonProps
+) => {
+  const setter: AbstractButtonProps = {
+    set text(buttonText: string) {
+      widget.setText(buttonText);
+    },
+    set icon(icon: QIcon) {
+      widget.setIcon(icon);
+    },
+    set iconSize(iconSize: QSize) {
+      widget.setIconSize(iconSize);
+    }
+  };
+  Object.assign(setter, newProps);
+  setViewProps(widget, newProps, oldProps);
+};

src/components/AbstractComponents/RNAbstractButton.ts

@@ -1,5 +1,8 @@
-import { QIcon, QPushButton, NodeWidget } from "@nodegui/nodegui";
-import { ViewProps, setViewProps } from "../View/RNView";
+import { QPushButton, NodeWidget } from "@nodegui/nodegui";
+import {
+  AbstractButtonProps,
+  setAbstractButtonProps
+} from "../AbstractComponents/RNAbstractButton";
 import { RNWidget } from "../config";
 import { throwUnsupported } from "../../utils/helpers";
 
@@ -24,19 +27,11 @@ import { throwUnsupported } from "../../utils/helpers";
  *
  * ```
  */
-export interface ButtonProps extends ViewProps {
-  /**
-   * Sets the given text to the button. [QPushButton: setText](https://docs.nodegui.org/docs/api/QPushButton#buttonsettexttext)
-   */
-  text?: string;
+export interface ButtonProps extends AbstractButtonProps {
   /**
    * Sets whether the button border is raised. [QPushButton: setFlat](https://docs.nodegui.org/docs/api/QPushButton#buttonsetflatisflat)
    */
   flat?: boolean;
-  /**
-   * Sets an icon in the button. [QPushButton: setIcon](https://docs.nodegui.org/docs/api/QPushButton#buttonseticonicon)
-   */
-  icon?: QIcon;
 }
 
 const setButtonProps = (
@@ -45,18 +40,12 @@ const setButtonProps = (
   oldProps: ButtonProps
 ) => {
   const setter: ButtonProps = {
-    set text(buttonText: string) {
-      widget.setText(buttonText);
-    },
     set flat(isFlat: boolean) {
       widget.setFlat(isFlat);
-    },
-    set icon(icon: QIcon) {
-      widget.setIcon(icon);
     }
   };
   Object.assign(setter, newProps);
-  setViewProps(widget, newProps, oldProps);
+  setAbstractButtonProps(widget, newProps, oldProps);
 };
 
 /**

src/components/Button/RNButton.ts

@@ -1,7 +1,10 @@
-import { ViewProps, setViewProps } from "../View/RNView";
 import { QCheckBox, NodeWidget } from "@nodegui/nodegui";
 import { RNWidget } from "../config";
 import { throwUnsupported } from "../../utils/helpers";
+import {
+  AbstractButtonProps,
+  setAbstractButtonProps
+} from "../AbstractComponents/RNAbstractButton";
 
 /**
  * The CheckBox component provides ability to add and manipulate native button widgets. It is based on
@@ -24,11 +27,7 @@ import { throwUnsupported } from "../../utils/helpers";
  *
  * ```
  */
-export interface CheckBoxProps extends ViewProps {
-  /**
-   * Sets the given text to the checkbox.. [QCheckBox: setText](https://docs.nodegui.org/docs/api/QCheckBox/#checkboxsettexttext)
-   */
-  text?: string;
+export interface CheckBoxProps extends AbstractButtonProps {
   /**
    * This property holds whether the button is checked. [QCheckBox: setChecked](https://docs.nodegui.org/docs/api/QCheckBox/#checkboxsetcheckedcheck)
    */
@@ -41,15 +40,12 @@ const setCheckBoxProps = (
   oldProps: CheckBoxProps
 ) => {
   const setter: CheckBoxProps = {
-    set text(checkboxText: string) {
-      widget.setText(checkboxText);
-    },
     set checked(isChecked: boolean) {
       widget.setChecked(isChecked);
     }
   };
   Object.assign(setter, newProps);
-  setViewProps(widget, newProps, oldProps);
+  setAbstractButtonProps(widget, newProps, oldProps);
 };
 
 /**

src/components/CheckBox/RNCheckBox.ts

@@ -1,10 +1,13 @@
 import { QRadioButton, NodeWidget } from "@nodegui/nodegui";
-import { ViewProps, setViewProps } from "../View/RNView";
 import { RNWidget } from "../config";
 import { throwUnsupported } from "../../utils/helpers";
+import {
+  setAbstractButtonProps,
+  AbstractButtonProps
+} from "../AbstractComponents/RNAbstractButton";
 
-export interface RadioButtonProps extends ViewProps {
-  text?: string;
+export interface RadioButtonProps extends AbstractButtonProps {
+  // More to be added
 }
 
 const setRadioButtonProps = (
@@ -13,12 +16,10 @@ const setRadioButtonProps = (
   oldProps: RadioButtonProps
 ) => {
   const setter: RadioButtonProps = {
-    set text(checkboxText: string) {
-      widget.setText(checkboxText);
-    }
+    // more setters to be added
   };
   Object.assign(setter, newProps);
-  setViewProps(widget, newProps, oldProps);
+  setAbstractButtonProps(widget, newProps, oldProps);
 };
 
 /**

src/components/RadioButton/RNRadioButton.ts

@@ -5,8 +5,7 @@ import {
   CursorShape,
   NodeWidget,
   QIcon,
-  FlexLayout,
-  WidgetAttribute
+  FlexLayout
 } from "@nodegui/nodegui";
 import { RNWidget, RNProps } from "../config";
 
@@ -112,13 +111,19 @@ export interface ViewProps extends RNProps {
    * <View attributes={{Qt::WA_Disabled: true}} />
    */
   attributes?: WidgetAttributesMap;
+
+  /**
+   * Prop to set the Widget flags. example:
+   * <View windowFlags={{Qt::SplashScreen: true}} />
+   */
+  windowFlags?: WindowFlagsMap;
 }
 
 /**
  * @ignore
  */
 export const setViewProps = (
-  widget: RNView,
+  widget: QWidget,
   newProps: ViewProps,
   oldProps: ViewProps
 ) => {
@@ -134,7 +139,6 @@ export const setViewProps = (
         console.warn("Both styleSheet and inlineStyle can't be used together");
       }
       widget.setInlineStyle(inlineStyle);
-      console.log(inlineStyle);
     },
     set geometry(geometry: Geometry) {
       widget.setGeometry(
@@ -214,6 +218,11 @@ export const setViewProps = (
       Object.entries(attributesMap).forEach(([attribute, value]) => {
         widget.setAttribute(Number(attribute), value);
       });
+    },
+    set windowFlags(windowFlagsMap: WindowFlagsMap) {
+      Object.entries(windowFlagsMap).forEach(([flag, value]) => {
+        widget.setWindowFlag(Number(flag), value);
+      });
     }
   };
   Object.assign(setter, newProps);
@@ -285,3 +294,7 @@ interface ListenerMap {
 type WidgetAttributesMap = {
   [key: number]: boolean;
 };
+
+type WindowFlagsMap = {
+  [key: number]: boolean;
+};