git0 0.2.10 → 0.2.11

package/svelte-nodegui/src/dom/react-nodegui/src/components/Image/RNImage.ts

@@ -0,0 +1,135 @@
+import {
+  QLabel,
+  QPixmap,
+  AspectRatioMode,
+  NodeWidget,
+  QSize,
+  TransformationMode,
+} from "@nodegui/nodegui";
+import { TextProps, setTextProps } from "../Text/RNText";
+import { RNWidget } from "../config";
+import { throwUnsupported, isValidUrl } from "../../utils/helpers";
+import phin from "phin";
+
+/**
+ * The Image component provides the ability to render images. It is based on
+ *  [NodeGui's QPixmap](https://docs.nodegui.org/docs/api/generated/classes/qpixmap).
+ * ## Example
+ * ```javascript
+ * import React from "react";
+ * import { Renderer, Image, Window } from "@nodegui/react-nodegui";
+ * import { AspectRatioMode } from "@nodegui/nodegui";
+ * const App = () => {
+ *   return (
+ *     <Window>
+ *       <Image
+ *         aspectRatioMode={AspectRatioMode.KeepAspectRatio}
+ *         size={{ height: 200, width: 150 }}
+ *         src="https://place-hold.it/200x150"
+ *       ></Image>
+ *     </Window>
+ *   );
+ * };
+ * Renderer.render(<App />);
+ * ```
+ */
+export interface ImageProps extends TextProps {
+  src?: string;
+  aspectRatioMode?: AspectRatioMode;
+  transformationMode?: TransformationMode;
+  buffer?: Buffer;
+}
+
+const setImageProps = (
+  widget: RNImage,
+  newProps: ImageProps,
+  oldProps: ImageProps
+) => {
+  const setter: ImageProps = {
+    set src(imageUrlOrPath: string) {
+      if (!imageUrlOrPath) {
+        return;
+      }
+      getLoadedPixmap(imageUrlOrPath)
+        .then((pixmap) => widget.setPixmap(pixmap))
+        .catch(console.warn);
+    },
+    set buffer(imageBuffer: Buffer) {
+      const pixMap = new QPixmap();
+      pixMap.loadFromData(imageBuffer);
+      widget.setPixmap(pixMap);
+    },
+    set aspectRatioMode(mode: AspectRatioMode) {
+      widget.setAspectRatioMode(mode);
+    },
+    set transformationMode(mode: TransformationMode) {
+      widget.setTransformationMode(mode);
+    },
+  };
+  Object.assign(setter, newProps);
+  setTextProps(widget, newProps, oldProps);
+};
+
+/**
+ * @ignore
+ */
+export class RNImage extends QLabel implements RNWidget {
+  setProps(newProps: ImageProps, oldProps: ImageProps): void {
+    setImageProps(this, newProps, oldProps);
+  }
+  appendInitialChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  static tagName = "image";
+  originalPixmap?: QPixmap;
+  aspectRatioMode?: AspectRatioMode;
+  transformationMode?: TransformationMode;
+  setPixmap = (pixmap: QPixmap) => {
+    // react:✓
+    super.setPixmap(pixmap);
+    this.originalPixmap = pixmap;
+  };
+  setAspectRatioMode(mode: AspectRatioMode) {
+    // react:✓ TODO://getter
+    this.aspectRatioMode = mode;
+    this.scalePixmap(this.size());
+  }
+  setTransformationMode(mode: TransformationMode) {
+    // react:✓ TODO://getter
+    this.transformationMode = mode;
+    this.scalePixmap(this.size());
+  }
+  scalePixmap(size: QSize) {
+    if (this.originalPixmap) {
+      return super.setPixmap(
+        this.originalPixmap.scaled(
+          size.width(),
+          size.height(),
+          this.aspectRatioMode,
+          this.transformationMode
+        )
+      );
+    }
+  }
+}
+
+async function getLoadedPixmap(imageUrlOrPath: string): Promise<QPixmap> {
+  const pixMap = new QPixmap();
+  if (isValidUrl(imageUrlOrPath)) {
+    const res = await phin(imageUrlOrPath);
+    const imageBuffer = Buffer.from(res.body);
+    pixMap.loadFromData(imageBuffer);
+  } else {
+    pixMap.load(imageUrlOrPath);
+  }
+  return pixMap;
+}

package/svelte-nodegui/src/dom/react-nodegui/src/components/Image/index.ts

@@ -0,0 +1,46 @@
+import type { Fiber } from "../../utils/decoupleFromReact";
+import { registerComponent, ComponentConfig } from "../config";
+import { RNImage, ImageProps } from "./RNImage";
+import { AppContainer } from "../../reconciler";
+import { WidgetEventTypes } from "@nodegui/nodegui";
+class ImageConfig extends ComponentConfig {
+  tagName = RNImage.tagName;
+  shouldSetTextContent(nextProps: ImageProps): boolean {
+    return true;
+  }
+  createInstance(
+    newProps: ImageProps,
+    rootInstance: AppContainer,
+    context: any,
+    workInProgress: Fiber
+  ): RNImage {
+    const widget = new RNImage();
+    widget.setProperty("scaledContents", true);
+    widget.setProps(newProps, {});
+    widget.addEventListener(WidgetEventTypes.Resize, () => {
+      widget.scalePixmap(widget.size());
+    });
+    return widget;
+  }
+  commitMount(
+    instance: RNImage,
+    newProps: ImageProps,
+    internalInstanceHandle: any
+  ): void {
+    if (newProps.visible !== false) {
+      instance.show();
+    }
+    return;
+  }
+  commitUpdate(
+    instance: RNImage,
+    updatePayload: any,
+    oldProps: ImageProps,
+    newProps: ImageProps,
+    finishedWork: Fiber
+  ): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+
+export const Image = registerComponent<ImageProps>(new ImageConfig());

package/svelte-nodegui/src/dom/react-nodegui/src/components/LineEdit/RNLineEdit.ts

@@ -0,0 +1,82 @@
+import {
+  QLineEdit,
+  EchoMode,
+  NodeWidget,
+  QLineEditSignals
+} from "@nodegui/nodegui";
+import { ViewProps, setViewProps } from "../View/RNView";
+import { RNWidget } from "../config";
+import { throwUnsupported } from "../../utils/helpers";
+
+ /**
+ * The LineEdit component provides ability to add and manipulate native editable text field widgets. It is based on
+ * [NodeGui's QLineEdit](https://docs.nodegui.org/docs/api/generated/classes/qlineedit).
+ * ## Example
+ * ```javascript
+ * import React from "react";
+ * import { Renderer, LineEdit, Window } from "@nodegui/react-nodegui";  
+ * const App = () => {
+ *   const handleTextChanged = textValue => {
+ *    console.log(textValue);
+ *   };
+ *   return (
+ *     <Window>
+ *      <LineEdit on={{ textChanged: handleTextChanged }} />
+ *    </Window>
+ *   );
+ * };
+ * Renderer.render(<App />);
+ * 
+ * ```
+ */
+export interface LineEditProps extends ViewProps<QLineEditSignals> {
+  text?: string;
+  placeholderText?: string;
+  readOnly?: boolean;
+  echoMode?: EchoMode;
+}
+
+const setLineEditProps = (
+  widget: RNLineEdit,
+  newProps: LineEditProps,
+  oldProps: LineEditProps
+) => {
+  const setter: LineEditProps = {
+    set text(text: string) {
+      text ? widget.setText(text) : widget.clear();
+    },
+    set placeholderText(text: string) {
+      widget.setPlaceholderText(text);
+    },
+    set readOnly(isReadOnly: boolean) {
+      widget.setReadOnly(isReadOnly);
+    },
+    set echoMode(mode: EchoMode) {
+      widget.setEchoMode(mode);
+    }
+  };
+  Object.assign(setter, newProps);
+  setViewProps(widget, newProps, oldProps);
+};
+
+/**
+ * @ignore
+ */
+export class RNLineEdit extends QLineEdit implements RNWidget {
+  setProps(newProps: LineEditProps, oldProps: LineEditProps): void {
+    setLineEditProps(this, newProps, oldProps);
+  }
+  appendInitialChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  static tagName = "linedit";
+}

package/svelte-nodegui/src/dom/react-nodegui/src/components/LineEdit/index.ts

@@ -0,0 +1,41 @@
+import type { Fiber } from "../../utils/decoupleFromReact";
+import { registerComponent, ComponentConfig } from "../config";
+import { LineEditProps, RNLineEdit } from "./RNLineEdit";
+import { AppContainer } from "../../reconciler";
+class LineEditConfig extends ComponentConfig {
+  tagName = RNLineEdit.tagName;
+  shouldSetTextContent(nextProps: LineEditProps): boolean {
+    return true;
+  }
+  createInstance(
+    newProps: LineEditProps,
+    rootInstance: AppContainer,
+    context: any,
+    workInProgress: Fiber
+  ): RNLineEdit {
+    const widget = new RNLineEdit();
+    widget.setProps(newProps, {});
+    return widget;
+  }
+  commitMount(
+    instance: RNLineEdit,
+    newProps: LineEditProps,
+    internalInstanceHandle: any
+  ): void {
+    if (newProps.visible !== false) {
+      instance.show();
+    }
+    return;
+  }
+  commitUpdate(
+    instance: RNLineEdit,
+    updatePayload: any,
+    oldProps: LineEditProps,
+    newProps: LineEditProps,
+    finishedWork: Fiber
+  ): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+
+export const LineEdit = registerComponent<LineEditProps>(new LineEditConfig());

package/svelte-nodegui/src/dom/react-nodegui/src/components/Menu/RNMenu.ts

@@ -0,0 +1,49 @@
+import { QMenu, QMenuSignals, Component, NodeWidget } from "@nodegui/nodegui";
+import { RNWidget } from "../config";
+import { throwUnsupported } from "../../utils/helpers";
+import { RNAction } from "../Action/RNAction";
+import { setViewProps, ViewProps } from "../View/RNView";
+
+export interface MenuProps extends ViewProps<QMenuSignals> {
+  title?: string;
+}
+
+const setMenuProps = (
+  widget: RNMenu,
+  newProps: MenuProps,
+  oldProps: MenuProps
+) => {
+  const setter: MenuProps = {
+    set title(title: string) {
+      widget.setTitle(title);
+    },
+  };
+  Object.assign(setter, newProps);
+  setViewProps(widget, newProps, oldProps);
+};
+
+export class RNMenu extends QMenu implements RNWidget {
+  setProps(newProps: MenuProps, oldProps: MenuProps): void {
+    setMenuProps(this, newProps, oldProps);
+  }
+  appendInitialChild(child: Component): void {
+    this.appendChild(child);
+  }
+  appendChild(child: Component): void {
+    if (!(child instanceof RNAction)) {
+      console.warn("Menu only supports Action as its children");
+      return;
+    }
+
+    this.addAction(child);
+  }
+  insertBefore(child: Component, beforeChild: Component): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: Component): void {
+    if (child instanceof RNAction) {
+      this.removeAction(child);
+    }
+  }
+  static tagName = "menu";
+}

package/svelte-nodegui/src/dom/react-nodegui/src/components/Menu/index.ts

@@ -0,0 +1,44 @@
+import type { Fiber } from "../../utils/decoupleFromReact";
+import { registerComponent, ComponentConfig } from "../config";
+import { RNMenu, MenuProps } from "./RNMenu";
+import { AppContainer } from "../../reconciler";
+class MenuConfig extends ComponentConfig {
+  
+  tagName = RNMenu.tagName;
+  shouldSetTextContent(nextProps: MenuProps): boolean {
+    return false;
+  }
+  createInstance(
+    newProps: MenuProps,
+    rootInstance: AppContainer,
+    context: any,
+    workInProgress: Fiber
+  ): RNMenu {
+    const widget = new RNMenu();
+    widget.setProps(newProps, {});
+    return widget;
+  }
+  commitMount(
+    instance: RNMenu,
+    newProps: MenuProps,
+    internalInstanceHandle: any
+  ): void {
+    if (newProps.visible !== false) {
+      instance.show();
+    }
+    return;
+  }
+  commitUpdate(
+    instance: RNMenu,
+    updatePayload: any,
+    oldProps: MenuProps,
+    newProps: MenuProps,
+    finishedWork: Fiber
+  ): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+
+export const Menu = registerComponent<MenuProps>(
+  new MenuConfig()
+);

package/svelte-nodegui/src/dom/react-nodegui/src/components/MenuBar/RNMenuBar.ts

@@ -0,0 +1,51 @@
+import { NodeWidget, QMenu, QMenuBar, QMenuBarSignals } from "@nodegui/nodegui";
+import { ViewProps, setViewProps } from "../View/RNView";
+import { RNWidget } from "../config";
+import { throwUnsupported } from "../../utils/helpers";
+
+export interface MenuBarProps extends ViewProps<QMenuBarSignals> {
+  nativeMenuBar?: boolean;
+}
+
+const setMenuBarProps = (
+  widget: RNMenuBar,
+  newProps: MenuBarProps,
+  oldProps: MenuBarProps
+) => {
+  const setter: MenuBarProps = {
+    set nativeMenuBar(shouldBeNative: boolean) {
+      widget.setNativeMenuBar(shouldBeNative);
+    },
+  };
+  Object.assign(setter, newProps);
+  setViewProps(widget, newProps, oldProps);
+};
+
+export class RNMenuBar extends QMenuBar implements RNWidget {
+  setProps(newProps: MenuBarProps, oldProps: MenuBarProps): void {
+    setMenuBarProps(this, newProps, oldProps);
+  }
+  appendInitialChild(child: QMenu): void {
+    if (child instanceof QMenu) {
+      this.addMenu(child);
+    } else {
+      console.warn("MenuBar only supports Menu as its children");
+    }
+  }
+  appendChild(child: QMenu): void {
+    this.appendInitialChild(child);
+  }
+  insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
+    console.warn(
+      "Updating menubar is not yet supported. Please help by raising a PR"
+    );
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget<any>): void {
+    console.warn(
+      "Updating menubar is not yet supported. Please help by raising a PR"
+    );
+    throwUnsupported(this);
+  }
+  static tagName = "menubar";
+}

package/svelte-nodegui/src/dom/react-nodegui/src/components/MenuBar/index.ts

@@ -0,0 +1,42 @@
+import type { Fiber } from "../../utils/decoupleFromReact";
+import { registerComponent, ComponentConfig } from "../config";
+import { RNMenuBar, MenuBarProps } from "./RNMenuBar";
+import { AppContainer } from "../../reconciler";
+
+class MenuBarConfig extends ComponentConfig {
+  tagName = RNMenuBar.tagName;
+  shouldSetTextContent(nextProps: MenuBarProps): boolean {
+    return false;
+  }
+  createInstance(
+    newProps: MenuBarProps,
+    rootInstance: AppContainer,
+    context: any,
+    workInProgress: Fiber
+  ): RNMenuBar {
+    const widget = new RNMenuBar();
+    widget.setProps(newProps, {});
+    return widget;
+  }
+  commitMount(
+    instance: RNMenuBar,
+    newProps: MenuBarProps,
+    internalInstanceHandle: any
+  ): void {
+    if (newProps.visible !== false) {
+      instance.show();
+    }
+    return;
+  }
+  commitUpdate(
+    instance: RNMenuBar,
+    updatePayload: any,
+    oldProps: MenuBarProps,
+    newProps: MenuBarProps,
+    finishedWork: Fiber
+  ): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+
+export const MenuBar = registerComponent<MenuBarProps>(new MenuBarConfig());

package/svelte-nodegui/src/dom/react-nodegui/src/components/PlainTextEdit/RNPlainTextEdit.ts

@@ -0,0 +1,82 @@
+import {
+  QPlainTextEdit,
+  NodeWidget,
+  QPlainTextEditSignals
+} from "@nodegui/nodegui";
+import { ViewProps, setViewProps } from "../View/RNView";
+import { RNWidget } from "../config";
+import { throwUnsupported } from "../../utils/helpers";
+
+/**
+ * The PlainTextEdit component provides ability to add and manipulate native editable text field widgets. It is based on
+ * [NodeGui's QPlainTextEdit](https://docs.nodegui.org/docs/api/generated/classes/qplaintextedit/).
+ * ## Example
+ * ```javascript
+ * import React from "react";
+ * import { Renderer, PlainTextEdit, Window } from "@nodegui/react-nodegui";
+ * 
+ * const plainTextRef = React.createRef();
+ * const App = () => {
+ * React.useEffect(() => {
+ *   plainTextRef.current.addEventListener("textChanged", () =>
+ *     console.log(plainTextRef.current.toPlainText())
+ *   );
+ * });
+ * return (
+ *   <Window>
+ *     <PlainTextEdit ref={plainTextRef} />
+ *   </Window>
+ *  );
+ * };
+ * Renderer.render(<App />);
+ *
+ * ```
+ */
+
+export interface PlainTextEditProps extends ViewProps<QPlainTextEditSignals> {
+  text?: string;
+  readOnly?: boolean;
+  placeholderText?: string;
+}
+
+const setPlainTextEditProps = (
+  widget: RNPlainTextEdit,
+  newProps: PlainTextEditProps,
+  oldProps: PlainTextEditProps
+) => {
+  const setter: PlainTextEditProps = {
+    set text(text: string) {
+      text ? widget.setPlainText(text) : widget.clear();
+    },
+    set readOnly(isReadOnly: boolean) {
+      widget.setReadOnly(isReadOnly);
+    },
+    set placeholderText(text: string) {
+      widget.setPlaceholderText(text);
+    }
+  };
+  Object.assign(setter, newProps);
+  setViewProps(widget, newProps, oldProps);
+};
+
+/**
+ * @ignore
+ */
+export class RNPlainTextEdit extends QPlainTextEdit implements RNWidget {
+  setProps(newProps: PlainTextEditProps, oldProps: PlainTextEditProps): void {
+    setPlainTextEditProps(this, newProps, oldProps);
+  }
+  appendInitialChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  static tagName = "plaintextedit";
+}

package/svelte-nodegui/src/dom/react-nodegui/src/components/PlainTextEdit/index.ts

@@ -0,0 +1,44 @@
+import { registerComponent, ComponentConfig } from "../config";
+import type { Fiber } from "../../utils/decoupleFromReact";
+import { RNPlainTextEdit, PlainTextEditProps } from "./RNPlainTextEdit";
+import { AppContainer } from "../../reconciler";
+
+class PlainTextEditConfig extends ComponentConfig {
+  tagName = RNPlainTextEdit.tagName;
+  shouldSetTextContent(nextProps: PlainTextEditProps): boolean {
+    return true;
+  }
+  createInstance(
+    newProps: PlainTextEditProps,
+    rootInstance: AppContainer,
+    context: any,
+    workInProgress: Fiber
+  ): RNPlainTextEdit {
+    const widget = new RNPlainTextEdit();
+    widget.setProps(newProps, {});
+    return widget;
+  }
+  commitMount(
+    instance: RNPlainTextEdit,
+    newProps: PlainTextEditProps,
+    internalInstanceHandle: any
+  ): void {
+    if (newProps.visible !== false) {
+      instance.show();
+    }
+    return;
+  }
+  commitUpdate(
+    instance: RNPlainTextEdit,
+    updatePayload: any,
+    oldProps: PlainTextEditProps,
+    newProps: PlainTextEditProps,
+    finishedWork: Fiber
+  ): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+
+export const PlainTextEdit = registerComponent<PlainTextEditProps>(
+  new PlainTextEditConfig()
+);

package/svelte-nodegui/src/dom/react-nodegui/src/components/ProgressBar/RNProgressBar.ts

@@ -0,0 +1,78 @@
+import {
+  QProgressBar,
+  Orientation,
+  NodeWidget,
+  QProgressBarSignals
+} from "@nodegui/nodegui";
+import { ViewProps, setViewProps } from "../View/RNView";
+import { RNWidget } from "../config";
+import { throwUnsupported } from "../../utils/helpers";
+
+ /**
+ * The ProgressBar component provides ability to add and manipulate native progress bar widgets. It is based on
+ * [NodeGui's QProgressBar](https://docs.nodegui.org/docs/api/generated/classes/qprogressbar/).
+ * ## Example
+ * ```javascript
+ * import React from "react";
+ * import { Renderer, ProgressBar, Window } from "@nodegui/react-nodegui";
+ * const App = () => {
+ *   return (
+ *    <Window>
+ *      <ProgressBar value={45} />
+ *   </Window>
+ *  );
+ * };
+ * Renderer.render(<App />);
+ * ```
+ */
+export interface ProgressBarProps extends ViewProps<QProgressBarSignals> {
+  value?: number;
+  minimum?: number;
+  maximum?: number;
+  orientation?: Orientation;
+}
+
+const setProgressBarProps = (
+  widget: RNProgressBar,
+  newProps: ProgressBarProps,
+  oldProps: ProgressBarProps
+) => {
+  const setter: ProgressBarProps = {
+    set value(val: number) {
+      widget.setValue(val);
+    },
+    set minimum(min: number) {
+      widget.setMinimum(min);
+    },
+    set maximum(max: number) {
+      widget.setMaximum(max);
+    },
+    set orientation(orientation: Orientation) {
+      widget.setOrientation(orientation);
+    }
+  };
+  Object.assign(setter, newProps);
+  setViewProps(widget, newProps, oldProps);
+};
+
+/**
+ * @ignore
+ */
+export class RNProgressBar extends QProgressBar implements RNWidget {
+  setProps(newProps: ProgressBarProps, oldProps: ProgressBarProps): void {
+    setProgressBarProps(this, newProps, oldProps);
+  }
+  appendInitialChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  static tagName = "progressbar";
+}