Implements QSlider (#141)

* Implements #140

* Add more properties from an abstract class

* Adds qslider to index

Co-authored-by: Atul R <atulanand94@gmail.com>

Author: matrunchyk

src/components/Slider/RNSlider.ts

@@ -0,0 +1,97 @@
+import { QSlider, NodeWidget, QSliderSignals, TickPosition, Orientation } from '@nodegui/nodegui';
+import { setViewProps, ViewProps } from '../View/RNView';
+import { RNWidget } from '../config';
+import { throwUnsupported } from '../../utils/helpers';
+
+export interface SliderProps extends ViewProps<QSliderSignals> {
+  tickInterval?: number;
+  tickPosition?: TickPosition;
+  orientation?: Orientation;
+  minimum?: number;
+  maximum?: number;
+  invertedAppearance?: boolean;
+  invertedControls?: boolean;
+  pageStep?: number;
+  singleStep?: number;
+  isSliderDown?: boolean;
+  sliderPosition?: number;
+  hasTracking?: boolean;
+  value?: number;
+}
+
+const setSliderProps = (
+  widget: RNSlider,
+  newProps: SliderProps,
+  oldProps: SliderProps,
+) => {
+  const setter: SliderProps = {
+    set tickInterval(tickInterval: number) {
+      widget.setTickInterval(tickInterval);
+    },
+    set tickPosition(tickPosition: TickPosition) {
+      widget.setTickPosition(tickPosition);
+    },
+    set invertedAppearance(inverted: boolean) {
+      widget.setInvertedAppearance(inverted);
+    },
+    set invertedControls(inverted: boolean) {
+      widget.setInvertedControls(inverted);
+    },
+    set maximum(maximum: number) {
+      widget.setMaximum(maximum);
+    },
+    set minimum(minimum: number) {
+      widget.setMinimum(minimum);
+    },
+    set orientation(orientation: Orientation) {
+      widget.setOrientation(orientation);
+    },
+    set pageStep(step: number) {
+      widget.setPageStep(step);
+    },
+    set singleStep(step: number) {
+      widget.setSingleStep(step);
+    },
+    set isSliderDown(down: boolean) {
+      widget.setSliderDown(down);
+    },
+    set sliderPosition(position: number) {
+      widget.setSliderPosition(position);
+    },
+    set hasTracking(enable: boolean) {
+      widget.setTracking(enable);
+    },
+    set value(value: number) {
+      widget.setValue(value);
+    },
+  };
+  Object.assign(setter, newProps);
+  setViewProps(widget, newProps, oldProps);
+};
+
+/**
+ * @ignore
+ */
+export class RNSlider extends QSlider implements RNWidget {
+  setProps(newProps: SliderProps, oldProps: SliderProps): void {
+    setSliderProps(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 = 'slider';
+}

src/components/Slider/index.ts

@@ -0,0 +1,46 @@
+import { Fiber } from 'react-reconciler';
+import { RNSlider, SliderProps } from './RNSlider';
+import { ComponentConfig, registerComponent } from '../config';
+import { AppContainer } from '../../reconciler';
+
+class SliderConfig extends ComponentConfig {
+  tagName = RNSlider.tagName;
+
+  shouldSetTextContent(nextProps: SliderProps): boolean {
+    return true;
+  }
+
+  createInstance(
+    newProps: SliderProps,
+    rootInstance: AppContainer,
+    context: any,
+    workInProgress: Fiber,
+  ): RNSlider {
+    const widget = new RNSlider();
+    widget.setProps(newProps, {});
+    return widget;
+  }
+
+  commitMount(
+    instance: RNSlider,
+    newProps: SliderProps,
+    internalInstanceHandle: any,
+  ): void {
+    if (newProps.visible !== false) {
+      instance.show();
+    }
+    return;
+  }
+
+  commitUpdate(
+    instance: RNSlider,
+    updatePayload: any,
+    oldProps: SliderProps,
+    newProps: SliderProps,
+    finishedWork: Fiber,
+  ): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+
+export const Slider = registerComponent<SliderProps>(new SliderConfig());

src/index.ts

@@ -1,3 +1,4 @@
+export { Slider } from "./components/Slider";
 export { Renderer } from "./renderer";
 export { View } from "./components/View";
 export { Window } from "./components/Window";