feat: add types for react-native-signature-capture (#36083)

types/react-native-signature-capture/index.d.ts

@@ -0,0 +1,97 @@
+// Type definitions for react-native-signature-capture 0.4
+// Project: https://github.com/RepairShopr/react-native-signature-capture#readme
+// Definitions by: Ifiok Jr. <https://github.com/ifiokjr>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+/*~ If this module is a UMD module that exposes a global variable 'myLib' when
+ *~ loaded outside a module loader environment, declare that global here.
+ *~ Otherwise, delete this declaration.
+ */
+import { Component } from 'react';
+import { ViewProps } from 'react-native';
+
+export interface SignatureCaptureProps extends ViewProps {
+    /**
+     * Make this props true, if you want to save the image file in external storage.
+     * Warning: Image file will be visible in gallery or any other image browsing app
+     *
+     * @default false
+     */
+    saveImageFileInExtStorage?: boolean;
+
+    /**
+     * If this props is made to false, it will hide the dashed border (the border is shown on iOS only).
+     *
+     * @default false
+     */
+    showBorder?: boolean;
+
+    /**
+     * If this props is made to true, it will display the native buttons "Save" and "Reset".
+     *
+     * @default false
+     */
+    showNativeButtons?: boolean;
+
+    /**
+     * If this props is made to true, it will display the "x_ _ _ _ _ _ _ _ _ _ _" placeholder indicating where to sign.
+     *
+     * @default false
+     */
+    showTitleLabel?: boolean;
+
+    /**
+     * Change the screen orientation based on boolean value
+     * "portrait" or "landscape"
+     */
+    viewMode?: 'portrait' | 'landscape';
+
+    /**
+     * sets the max size of the image maintains aspect ratio,
+     *
+     * @default 500
+     */
+    maxSize?: number;
+
+    /**
+     * Triggered when saveImage() is called, which return Base64 Encoded String and image file path.
+     *
+     * @param params - the file path and encoded png
+     */
+    onSaveEvent?(params: SaveEventParams): void;
+
+    /**
+     * Triggered when user marks his signature on the canvas.
+     * This will not be called when the user does not perform any action on canvas.
+     *
+     * @param event - the event when a drag is performed
+     */
+    onDragEvent?(event: any): void;
+}
+
+export interface SaveEventParams {
+    /**
+     * The file path name
+     */
+    pathName: string;
+
+    /**
+     * The base64 encoded png
+     */
+    encoded: string;
+}
+
+declare class SignatureCapture extends Component<SignatureCaptureProps> {
+    /**
+     * When called it will save the image and returns the base 64 encoded string on onSaveEvent() callback
+     */
+    saveImage(): void;
+
+    /**
+     * When called it will clear the image on the canvas
+     */
+    resetImage(): void;
+}
+
+export default SignatureCapture;

types/react-native-signature-capture/react-native-signature-capture-tests.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import {
+    AppRegistry,
+    StyleSheet,
+    Text,
+    View,
+    TouchableHighlight,
+} from 'react-native';
+import SignatureCapture, {
+    SaveEventParams,
+} from 'react-native-signature-capture';
+
+class RNSignatureExample extends React.Component {
+    private readonly signatureRef = React.createRef<SignatureCapture>();
+
+    render() {
+        return (
+            <View style={{ flex: 1, flexDirection: 'column' }}>
+                <Text
+                    style={{ alignItems: 'center', justifyContent: 'center' }}
+                >
+                    Signature Capture Extended{' '}
+                </Text>
+                <SignatureCapture
+                    style={[{ flex: 1 }, styles.signature]}
+                    ref={this.signatureRef}
+                    onSaveEvent={this._onSaveEvent}
+                    onDragEvent={this._onDragEvent}
+                    saveImageFileInExtStorage={false}
+                    showNativeButtons={false}
+                    showTitleLabel={false}
+                    viewMode={'portrait'}
+                />
+
+                <View style={{ flex: 1, flexDirection: 'row' }}>
+                    <TouchableHighlight
+                        style={styles.buttonStyle}
+                        onPress={() => {
+                            this.saveSign();
+                        }}
+                    >
+                        <Text>Save</Text>
+                    </TouchableHighlight>
+
+                    <TouchableHighlight
+                        style={styles.buttonStyle}
+                        onPress={() => {
+                            this.resetSign();
+                        }}
+                    >
+                        <Text>Reset</Text>
+                    </TouchableHighlight>
+                </View>
+            </View>
+        );
+    }
+
+    saveSign() {
+        if (this.signatureRef.current) {
+            this.signatureRef.current.saveImage();
+        }
+    }
+
+    resetSign() {
+        if (this.signatureRef.current) {
+            this.signatureRef.current.resetImage();
+        }
+    }
+
+    _onSaveEvent(result: SaveEventParams) {
+        // result.encoded - for the base64 encoded png
+        // result.pathName - for the file path name
+        console.log(result);
+    }
+    _onDragEvent() {
+        // This callback will be called when the user enters signature
+        console.log('dragged');
+    }
+}
+
+const styles = StyleSheet.create({
+    signature: {
+        flex: 1,
+        borderColor: '#000033',
+        borderWidth: 1,
+    },
+    buttonStyle: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 50,
+        backgroundColor: '#eeeeee',
+        margin: 10,
+    },
+});

types/react-native-signature-capture/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "jsx": "preserve",
+        "module": "commonjs",
+        "lib": ["es6"],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": ["../"],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": ["index.d.ts", "react-native-signature-capture-tests.tsx"]
+}

types/react-native-signature-capture/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }