From aa2f33f8534d1b95cec39dcaae8aa77de9ce89fe Mon Sep 17 00:00:00 2001 From: Ifiok Jr Date: Fri, 14 Jun 2019 01:07:29 +0100 Subject: [PATCH] feat: add types for react-native-signature-capture (#36083) --- .../react-native-signature-capture/index.d.ts | 97 +++++++++++++++++++ .../react-native-signature-capture-tests.tsx | 95 ++++++++++++++++++ .../tsconfig.json | 17 ++++ .../tslint.json | 1 + 4 files changed, 210 insertions(+) create mode 100644 types/react-native-signature-capture/index.d.ts create mode 100644 types/react-native-signature-capture/react-native-signature-capture-tests.tsx create mode 100644 types/react-native-signature-capture/tsconfig.json create mode 100644 types/react-native-signature-capture/tslint.json diff --git a/types/react-native-signature-capture/index.d.ts b/types/react-native-signature-capture/index.d.ts new file mode 100644 index 0000000000..1139c7d185 --- /dev/null +++ b/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. +// 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 { + /** + * 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; diff --git a/types/react-native-signature-capture/react-native-signature-capture-tests.tsx b/types/react-native-signature-capture/react-native-signature-capture-tests.tsx new file mode 100644 index 0000000000..521271c742 --- /dev/null +++ b/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(); + + render() { + return ( + + + Signature Capture Extended{' '} + + + + + { + this.saveSign(); + }} + > + Save + + + { + this.resetSign(); + }} + > + Reset + + + + ); + } + + 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, + }, +}); diff --git a/types/react-native-signature-capture/tsconfig.json b/types/react-native-signature-capture/tsconfig.json new file mode 100644 index 0000000000..c0108130e5 --- /dev/null +++ b/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"] +} diff --git a/types/react-native-signature-capture/tslint.json b/types/react-native-signature-capture/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-native-signature-capture/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }