Add react-native-modals (#47701)

types/react-native-modals/index.d.ts

@@ -0,0 +1,136 @@
+// Type definitions for react-native-modals 0.19
+// Project: https://github.com/jacklam718/react-native-modals/blob/master/README.md
+// Definitions by: Paito Anderson <https://github.com/PaitoAnderson>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+import * as React from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+export type SlideFromTypes = 'top' | 'bottom' | 'left' | 'right';
+export type AlignTypes = 'flex-start' | 'flex-end' | 'center';
+export type OverlayPointerEventTypes = 'auto' | 'none';
+export type SwipeDirection = 'up' | 'down' | 'left' | 'right';
+export interface DragEvent {
+    axis: {
+        x: number;
+        y: number;
+    };
+    layout: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    swipeDirection: string | null;
+}
+
+export interface ModalContentProps {
+    style?: StyleProp<ViewStyle>;
+}
+
+export interface BackdropProps {
+    visible: boolean;
+    opacity: number;
+    onPress?: () => void;
+    backgroundColor?: string;
+    animationDuration?: number;
+    pointerEvents?: string;
+    useNativeDriver?: boolean;
+}
+
+export interface ModalFooterProps {
+    bordered?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+
+export interface ModalButtonProps {
+    text: string;
+    onPress: () => void;
+    align?: AlignTypes;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    disabled?: boolean;
+    activeOpacity?: number;
+    bordered?: boolean;
+}
+
+export interface ModalTitleProps {
+    title: string;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    align?: AlignTypes;
+    hasTitleBar?: boolean;
+}
+
+export interface ModalProps {
+    visible: boolean;
+    width?: number;
+    height?: number;
+    rounded?: boolean;
+    hasOverlay?: boolean;
+    overlayPointerEvents?: OverlayPointerEventTypes;
+    overlayBackgroundColor?: string;
+    overlayOpacity?: number;
+    modalTitle?: React.ReactNode;
+    modalAnimation?: FadeAnimation | ScaleAnimation | SlideAnimation;
+    modalStyle?: StyleProp<ViewStyle>;
+    style?: StyleProp<ViewStyle>;
+    animationDuration?: number;
+    onTouchOutside?: () => void;
+    onHardwareBackPress?: () => boolean;
+    onShow?: () => void;
+    onDismiss?: () => void;
+    footer?: React.ReactNode;
+    onMove?: (event: DragEvent) => void;
+    onSwiping?: (event: DragEvent) => void;
+    onSwipeRelease?: (event: DragEvent) => void;
+    onSwipingOut?: (event: DragEvent) => void;
+    onSwipeOut?: (event: DragEvent) => void;
+    swipeDirection?: SwipeDirection | SwipeDirection[];
+    swipeThreshold?: number;
+    useNativeDriver?: boolean;
+}
+
+export interface DraggableViewProps {
+    style?: StyleProp<ViewStyle>;
+    onMove?: (event: DragEvent) => void;
+    onSwiping?: (event: DragEvent) => void;
+    onRelease?: (event: DragEvent) => void;
+    onSwipingOut?: (event: DragEvent) => void;
+    onSwipeOut?: (event: DragEvent) => void;
+    swipeThreshold?: number;
+    swipeDirection?: SwipeDirection | SwipeDirection[];
+}
+
+export class FadeAnimation {
+    constructor(toValue?: number);
+    constructor(params: { toValue?: number, animationDuration?: number });
+    toValue(toValue: number): void;
+    createAnimations(): object;
+}
+
+export class ScaleAnimation {
+    constructor(toValue?: number);
+    toValue(toValue: number): void;
+    createAnimations(): object;
+}
+
+export class SlideAnimation {
+    constructor(toValue?: number);
+    constructor(params: { toValue?: number, slideFrom?: SlideFromTypes });
+    toValue(toValue: number): void;
+    createAnimations(): object;
+}
+
+export class ModalContent extends React.Component<ModalContentProps> { }
+export class ModalFooter extends React.Component<ModalFooterProps> { }
+export class ModalButton extends React.Component<ModalButtonProps> { }
+export class ModalTitle extends React.Component<ModalTitleProps> { }
+export class Backdrop extends React.Component<BackdropProps> { }
+export class DraggableView extends React.Component<DraggableViewProps> { }
+export default class Modal extends React.Component<ModalProps> {
+    show(): void;
+    dismiss(): void;
+    modalSize: { width: number, height: number };
+    pointerEvents: 'auto' | 'none';
+}

types/react-native-modals/react-native-modals-tests.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { StyleSheet, View, Button } from 'react-native';
+import Modal, {
+    ModalTitle,
+    ModalContent,
+    ModalButton,
+    SlideAnimation,
+    ScaleAnimation,
+    FadeAnimation,
+    ModalFooter
+} from 'react-native-modals';
+
+const slideAnimation = new SlideAnimation({ slideFrom: 'bottom' });
+const scaleAnimation = new ScaleAnimation();
+const fadeAnimation = new FadeAnimation({ animationDuration: 150 });
+
+class Test extends React.Component<any> {
+    fadingPopupModal: Modal | null;
+    scalingPopupModal: Modal | null;
+    slidingPopupModal: Modal | null;
+
+    showPopupModal(popupModal: Modal | null) {
+        if (popupModal !== null) {
+            popupModal.show();
+        }
+    }
+
+    dismissPopupModal(popupModal: Modal | null) {
+        if (popupModal !== null) {
+            popupModal.dismiss();
+        }
+    }
+
+    render() {
+        return (
+            <View>
+                <Button
+                    onPress={() => this.showPopupModal(this.fadingPopupModal)}
+                    title="Show Fading Modal" />
+                <Button
+                    onPress={() => this.showPopupModal(this.scalingPopupModal)}
+                    title="Show Scaling Modal" />
+                <Button
+                    onPress={() => this.showPopupModal(this.slidingPopupModal)}
+                    title="Show Sliding Modal" />
+
+                <Modal visible ref={(popupModal) => this.fadingPopupModal = popupModal}
+                    modalTitle={<ModalTitle title="Popup Modal - Fade Animation" />}
+                    modalAnimation={fadeAnimation}
+                />
+                <Modal visible ref={(popupModal) => this.scalingPopupModal = popupModal}
+                    modalTitle={<ModalTitle title="Popup Modal - Scale Animation" />}
+                    modalAnimation={scaleAnimation}
+                    footer={
+                        <ModalFooter>
+                            <ModalButton
+                                text="CLOSE"
+                                onPress={() => this.dismissPopupModal(this.scalingPopupModal)}
+                                textStyle={{ color: "red" }}
+                                bordered
+                                key="button-1"
+                            />
+                            <ModalButton
+                                text="OK"
+                                onPress={() => {}}
+                                key="button-2"
+                            />
+                        </ModalFooter>
+                    }
+                />
+                <Modal ref={(popupModal) => this.slidingPopupModal = popupModal}
+                    modalTitle={<ModalTitle title="Popup Modal - Slide Animation" />}
+                    width={300}
+                    height={300}
+                    modalAnimation={slideAnimation}
+                    modalStyle={styles.testStyle}
+                    animationDuration={150}
+                    overlayPointerEvents='auto'
+                    overlayBackgroundColor='white'
+                    overlayOpacity={0.5}
+                    hasOverlay={true}
+                    visible={true}
+                    onShow={() => { console.log('onShow'); }}
+                    onDismiss={() => { console.log('onDismiss'); }}
+                    onTouchOutside={() => { console.log('onTouchOutside'); }}
+                    onHardwareBackPress={() => true }
+                >
+                <ModalContent>
+
+                </ModalContent>
+                </Modal>
+            </View>);
+    }
+}
+
+const styles = StyleSheet.create({
+    testStyle: {
+        paddingTop: 10,
+    }
+});

types/react-native-modals/tsconfig.json

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

types/react-native-modals/tslint.json

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