React wrapper for NativeScript Camera Plus

react-nativescript-camera-plus.tsx

import * as console from "react-nativescript/dist/shared/Logger";
import * as React from "react";
import { PropsWithoutForwardedRef } from "react-nativescript/dist/shared/NativeScriptComponentTypings";
import { CameraPlus as NativeScriptCameraPlus, EventData } from "@nstudio/nativescript-camera-plus";
import { _ContentView, ContentViewComponentProps } from "react-nativescript/dist/components/ContentView";
import { updateListener } from "react-nativescript/dist/client/EventHandling";
import { Container, HostContext, Instance } from "react-nativescript/dist/shared/HostConfigTypes";
import { register } from "react-nativescript/dist/client/ElementRegistry";

const elementKey: string = "cameraPlus";
register(
    elementKey,
    (
        props: Props,
        rootContainerInstance: Container,
        hostContext: HostContext,
    ) => {
        return new NativeScriptCameraPlus() as Instance;
    }
);

interface Props {
    onErrorEvent?: (args: EventData) => void;
    onPhotoCapturedEvent?: (args: EventData) => void;
    onToggleCameraEvent?: (args: EventData) => void;
    onImagesSelectedEvent?: (args: EventData) => void;
    onVideoRecordingStartedEvent?: (args: EventData) => void;
    onVideoRecordingFinishedEvent?: (args: EventData) => void;
    onVideoRecordingReadyEvent?: (args: EventData) => void;
    onConfirmScreenShownEvent?: (args: EventData) => void;
    onConfirmScreenDismissedEvent?: (args: EventData) => void;
}

type CameraPlusProps = Pick<NativeScriptCameraPlus,
    "debug"|
    "confirmPhotos"|
    "galleryPickerMode"|
    "showFlashIcon"|
    "showToggleIcon"|
    "showCaptureIcon"|
    "showGalleryIcon"|
    "confirmVideo"|
    "saveToGallery"|
    "flashOnIcon"|
    "flashOffIcon"|
    "toggleCameraIcon"|
    "takePicIcon"|
    "galleryIcon"|
    "autoFocus"
>;

export type CameraPlusComponentProps<
    E extends NativeScriptCameraPlus = NativeScriptCameraPlus
> = Props /* & typeof _CameraPlus.defaultProps */ & Partial<CameraPlusProps> & ContentViewComponentProps<E>;

/**
 * A React wrapper around the CameraPlus component.
 */
class _CameraPlus<
    P extends CameraPlusComponentProps<E>,
    S extends {},
    E extends NativeScriptCameraPlus = NativeScriptCameraPlus
> extends _ContentView<P, S, E> {
    // static defaultProps = {
    //     forwardedRef: React.createRef<NativeScriptCameraPlus>()
    // };

    // private readonly myRef: React.RefObject<NativeScriptCameraPlus> = React.createRef<NativeScriptCameraPlus>();

    /**
     * @param attach true: attach; false: detach; null: update
     */
    protected updateListeners(node: E, attach: boolean | null, nextProps?: P): void {
        super.updateListeners(node, attach, nextProps);

        if(attach === null){
            updateListener(node, NativeScriptCameraPlus.errorEvent, this.props.onErrorEvent, nextProps.onErrorEvent);
            updateListener(node, NativeScriptCameraPlus.photoCapturedEvent, this.props.onPhotoCapturedEvent, nextProps.onPhotoCapturedEvent);
            updateListener(node, NativeScriptCameraPlus.toggleCameraEvent, this.props.onToggleCameraEvent, nextProps.onToggleCameraEvent);
            updateListener(node, NativeScriptCameraPlus.imagesSelectedEvent, this.props.onImagesSelectedEvent, nextProps.onImagesSelectedEvent);
            updateListener(node, NativeScriptCameraPlus.videoRecordingStartedEvent, this.props.onVideoRecordingStartedEvent, nextProps.onVideoRecordingStartedEvent);
            updateListener(node, NativeScriptCameraPlus.videoRecordingFinishedEvent, this.props.onVideoRecordingFinishedEvent, nextProps.onVideoRecordingFinishedEvent);
            updateListener(node, NativeScriptCameraPlus.videoRecordingReadyEvent, this.props.onVideoRecordingReadyEvent, nextProps.onVideoRecordingReadyEvent);
            updateListener(node, NativeScriptCameraPlus.confirmScreenShownEvent, this.props.onConfirmScreenShownEvent, nextProps.onConfirmScreenShownEvent);
            updateListener(node, NativeScriptCameraPlus.confirmScreenDismissedEvent, this.props.onConfirmScreenDismissedEvent, nextProps.onConfirmScreenDismissedEvent);
        } else {
            const method = (attach ? node.on : node.off).bind(node);
        
            if(this.props.errorEvent) method(NativeScriptCameraPlus.errorEvent, this.props.onErrorEvent);
            if(this.props.photoCapturedEvent) method(NativeScriptCameraPlus.photoCapturedEvent, this.props.onPhotoCapturedEvent);
            if(this.props.toggleCameraEvent) method(NativeScriptCameraPlus.toggleCameraEvent, this.props.onToggleCameraEvent);
            if(this.props.imagesSelectedEvent) method(NativeScriptCameraPlus.imagesSelectedEvent, this.props.onImagesSelectedEvent);
            if(this.props.videoRecordingStartedEvent) method(NativeScriptCameraPlus.videoRecordingStartedEvent, this.props.onVideoRecordingStartedEvent);
            if(this.props.videoRecordingFinishedEvent) method(NativeScriptCameraPlus.videoRecordingFinishedEvent, this.props.onVideoRecordingFinishedEvent);
            if(this.props.videoRecordingReadyEvent) method(NativeScriptCameraPlus.videoRecordingReadyEvent, this.props.onVideoRecordingReadyEvent);
            if(this.props.confirmScreenShownEvent) method(NativeScriptCameraPlus.confirmScreenShownEvent, this.props.onConfirmScreenShownEvent);
            if(this.props.confirmScreenDismissedEvent) method(NativeScriptCameraPlus.confirmScreenDismissedEvent, this.props.onConfirmScreenDismissedEvent);
        }
        
    }

    render(): React.ReactNode {
        const {
            forwardedRef,

            onErrorEvent,
            onPhotoCapturedEvent,
            onToggleCameraEvent,
            onImagesSelectedEvent,
            onVideoRecordingStartedEvent,
            onVideoRecordingFinishedEvent,
            onVideoRecordingReadyEvent,
            onConfirmScreenShownEvent,
            onConfirmScreenDismissedEvent,

            onLoaded,
            onUnloaded,
            onAndroidBackPressed,
            onShowingModally,
            onShownModally,

            onTap,
            onDoubleTap,
            onPinch,
            onPan,
            onSwipe,
            onRotation,
            onLongPress,
            onTouch,

            onPropertyChange,

            children,
            ...rest
        } = this.props;

        return React.createElement(
            elementKey,
            {
                ...rest,
                ref: forwardedRef || this.myRef,
            },
            children
        );
    }
}

type OwnPropsWithoutForwardedRef = PropsWithoutForwardedRef<CameraPlusComponentProps<NativeScriptCameraPlus>>;

export const $CameraPlus: React.ComponentType<
    OwnPropsWithoutForwardedRef & React.ClassAttributes<NativeScriptCameraPlus>
> = React.forwardRef<NativeScriptCameraPlus, OwnPropsWithoutForwardedRef>(
    (props: React.PropsWithChildren<OwnPropsWithoutForwardedRef>, ref: React.RefObject<NativeScriptCameraPlus>) => {
        const { children, ...rest } = props;

        return React.createElement(
            _CameraPlus,
            {
                ...rest,
                forwardedRef: ref,
            },
            children
        );
    }
);