@haroldtran/react-native-modals 0.0.1

package/src/components/ModalContent.tsx

@@ -0,0 +1,31 @@
+// @flow
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import ModalContext from './ModalContext';
+import type { ModalContentProps } from '../type';
+
+const styles = StyleSheet.create({
+  content: {
+    paddingVertical: 24,
+    paddingHorizontal: 18,
+  },
+  noPaddingTop: {
+    paddingTop: 0,
+  },
+});
+
+const ModalContent = ({
+  style,
+  children,
+}: ModalContentProps) => (
+  <ModalContext.Consumer>
+    {({ hasTitle }) => (
+      <View style={[styles.content, hasTitle && styles.noPaddingTop, style]}>
+        {children}
+      </View>
+    )}
+  </ModalContext.Consumer>
+);
+
+export default ModalContent;

package/src/components/ModalContext.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const ModalContext = React.createContext({
+  hasTitle: false,
+  hasFooter: false,
+});
+
+export default ModalContext;

package/src/components/ModalFooter.tsx

@@ -0,0 +1,48 @@
+// @flow
+
+import React, { Children, cloneElement } from 'react';
+import { View, StyleSheet, PixelRatio } from 'react-native';
+import type { ModalFooterProps } from '../type';
+
+const styles = StyleSheet.create({
+  border: {
+    borderColor: '#CCD0D5',
+    borderTopWidth: 1 / PixelRatio.get(),
+  },
+  actionsVertical: {
+    height: 200,
+    flexDirection: 'column',
+  },
+  actionsHorizontal: {
+    flexDirection: 'row',
+  },
+});
+
+const ModalActionList = ({
+  style,
+  children,
+  bordered = true,
+}: ModalFooterProps) => {
+  const containerStyle = children.length > 2
+    ? styles.actionsVertical
+    : styles.actionsHorizontal;
+
+  const border = bordered
+    ? styles.border
+    : null;
+
+  // apply horizontal border if actions legnth is 2 & bordered is true
+  const content = children.length === 2
+    ? Children.map(children, ((child, index) => cloneElement(child, {
+      bordered: (1 % index === 0 && bordered),
+    })))
+    : children;
+
+  return (
+    <View style={[containerStyle, border, style]}>
+      {content}
+    </View>
+  );
+};
+
+export default ModalActionList;

package/src/components/ModalTitle.tsx

@@ -0,0 +1,47 @@
+// @flow
+
+import React from "react";
+import { PixelRatio, Platform, StyleSheet, Text, View } from "react-native";
+import { Positions } from "../constants/Constants";
+import type { ModalTitleProps } from "../type";
+
+const isAndroid = Platform.OS === "android";
+
+const styles = StyleSheet.create({
+  title: {
+    padding: 14,
+    paddingHorizontal: 18,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+  titleBar: {
+    borderBottomWidth: 1 / PixelRatio.get(),
+    backgroundColor: "#F9F9FB",
+    borderColor: "#DAD9DC",
+  },
+  text: {
+    fontWeight: isAndroid ? "400" : "500",
+    fontFamily: isAndroid ? "sans-serif-medium" : "System",
+    fontSize: isAndroid ? 19 : 15,
+    color: "#151822",
+  },
+});
+
+const ModalTitle = ({
+  title,
+  style,
+  textStyle,
+  hasTitleBar = true,
+  align = "center",
+}: ModalTitleProps) => {
+  const titleBar = hasTitleBar ? styles.titleBar : null;
+  const titleAlign = { alignItems: Positions[align as keyof typeof Positions] };
+
+  return (
+    <View style={[styles.title, titleAlign, titleBar, style]}>
+      <Text style={[styles.text, textStyle]}>{title}</Text>
+    </View>
+  );
+};
+
+export default ModalTitle;

package/src/components/SlideAnimation.tsx

@@ -0,0 +1,91 @@
+// @flow
+
+import { Animated, Dimensions } from "react-native";
+import Animation, { AnimationConfig } from "../animations/Animation";
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");
+
+type SlideFrom = "top" | "bottom" | "left" | "right";
+type SlideAnimationConfig = AnimationConfig & {
+  slideFrom?: SlideFrom;
+};
+
+export default class SlideAnimation extends Animation {
+  slideFrom: SlideFrom;
+
+  static SLIDE_FROM_TOP: SlideFrom = "top";
+  static SLIDE_FROM_BOTTOM: SlideFrom = "bottom";
+  static SLIDE_FROM_LEFT: SlideFrom = "left";
+  static SLIDE_FROM_RIGHT: SlideFrom = "right";
+
+  constructor({
+    initialValue = 0,
+    useNativeDriver = true,
+    slideFrom = SlideAnimation.SLIDE_FROM_BOTTOM,
+  }: SlideAnimationConfig = {}) {
+    super({ initialValue, useNativeDriver });
+    this.slideFrom = slideFrom;
+  }
+
+  in(onFinished: Animated.EndCallback = () => {}, options: any = {}): void {
+    Animated.spring(this.animate, {
+      toValue: 1,
+      velocity: 0,
+      tension: 65,
+      friction: 11,
+      useNativeDriver: this.useNativeDriver,
+      ...options,
+    }).start(onFinished);
+  }
+
+  out(onFinished: Animated.EndCallback = () => {}, options: any = {}): void {
+    Animated.spring(this.animate, {
+      toValue: 0,
+      velocity: 0,
+      tension: 65,
+      friction: 11,
+      useNativeDriver: this.useNativeDriver,
+      ...options,
+    }).start(onFinished);
+  }
+
+  getAnimations(): any {
+    const transform: any[] = [];
+    if (this.slideFrom === SlideAnimation.SLIDE_FROM_TOP) {
+      transform.push({
+        translateY: this.animate.interpolate({
+          inputRange: [0, 1],
+          outputRange: [-SCREEN_HEIGHT, 0],
+        }),
+      });
+    } else if (this.slideFrom === SlideAnimation.SLIDE_FROM_BOTTOM) {
+      transform.push({
+        translateY: this.animate.interpolate({
+          inputRange: [0, 1],
+          outputRange: [SCREEN_HEIGHT, 0],
+        }),
+      });
+    } else if (this.slideFrom === SlideAnimation.SLIDE_FROM_LEFT) {
+      transform.push({
+        translateX: this.animate.interpolate({
+          inputRange: [0, 1],
+          outputRange: [-SCREEN_WIDTH, 0],
+        }),
+      });
+    } else if (this.slideFrom === SlideAnimation.SLIDE_FROM_RIGHT) {
+      transform.push({
+        translateX: this.animate.interpolate({
+          inputRange: [0, 1],
+          outputRange: [SCREEN_WIDTH, 0],
+        }),
+      });
+    } else {
+      throw new Error(`
+        slideFrom: ${this.slideFrom} not supported. 'slideFrom' must be 'top' | 'bottom' | 'left' | 'right'
+      `);
+    }
+    return {
+      transform,
+    };
+  }
+}

package/src/constants/Constants.ts

@@ -0,0 +1,5 @@
+export const Positions = {
+  left: 'flex-start',
+  right: 'flex-end',
+  center: 'center',
+};

package/src/index.tsx

@@ -0,0 +1,32 @@
+import Animation from "./animations/Animation";
+import FadeAnimation from "./animations/FadeAnimation";
+import ScaleAnimation from "./animations/ScaleAnimation";
+import SlideAnimation from "./animations/SlideAnimation";
+import BottomModal from "./BottomModal";
+import Backdrop from "./components/Backdrop";
+import DraggableView from "./components/DraggableView";
+import ModalButton from "./components/ModalButton";
+import ModalContent from "./components/ModalContent";
+import ModalFooter from "./components/ModalFooter";
+import ModalTitle from "./components/ModalTitle";
+import Modal from "./Modal";
+import ModalPortal from "./ModalPortal";
+export * from "./type";
+
+export {
+  Animation,
+  Backdrop,
+  BottomModal,
+  DraggableView,
+  FadeAnimation,
+  Modal,
+  ModalButton,
+  ModalContent,
+  ModalFooter,
+  ModalPortal,
+  ModalTitle,
+  ScaleAnimation,
+  SlideAnimation,
+};
+
+export default Modal;

package/src/type.ts

@@ -0,0 +1,90 @@
+// TypeScript types for the library
+
+import { ReactNode } from "react";
+import Animation from "./animations/Animation";
+
+export type SwipeDirection = "up" | "down" | "left" | "right";
+
+export type DragEvent = {
+  axis: {
+    x: number;
+    y: number;
+  };
+  layout: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } | null;
+  swipeDirection: string | null;
+};
+
+export type ModalProps = {
+  visible?: boolean;
+  children?: any;
+  width?: number;
+  height?: number;
+  rounded?: boolean;
+  hasOverlay?: boolean;
+  overlayPointerEvents?: "auto" | "none";
+  overlayBackgroundColor?: string;
+  overlayOpacity?: number;
+  modalTitle?: any;
+  modalAnimation?: Animation;
+  modalStyle?: any;
+  style?: any;
+  animationDuration?: number;
+  onTouchOutside?: () => void;
+  onHardwareBackPress?: () => boolean;
+  onShow?: () => void;
+  onDismiss?: () => void;
+  footer?: ReactNode;
+  onMove?: (event: DragEvent) => void;
+  onSwiping?: (event: DragEvent) => void;
+  onSwipeRelease?: (event: DragEvent) => void;
+  onSwipingOut?: (event: DragEvent) => void;
+  onSwipeOut?: (event: DragEvent) => void;
+  swipeDirection?: SwipeDirection | Array<SwipeDirection>;
+  swipeThreshold?: number;
+  useNativeDriver?: boolean;
+};
+
+export type ModalFooterProps = {
+  children?: any;
+  style?: any;
+  bordered?: boolean;
+};
+
+export type ModalButtonProps = {
+  text: string;
+  onPress?: () => void;
+  align?: "left" | "right" | "center" | string;
+  style?: any;
+  textStyle?: any;
+  disabled?: boolean;
+  activeOpacity?: number;
+  bordered?: boolean;
+};
+
+export type ModalTitleProps = {
+  title: any;
+  style?: any;
+  textStyle?: any;
+  align?: "left" | "right" | "center" | string;
+  hasTitleBar?: boolean;
+};
+
+export type ModalContentProps = {
+  children: any;
+  style?: any;
+};
+
+export type BackdropProps = {
+  visible: boolean;
+  opacity: number;
+  onPress?: () => void;
+  backgroundColor?: string;
+  animationDuration?: number;
+  pointerEvents?: "auto" | "none" | "box-none" | "box-only";
+  useNativeDriver?: boolean;
+};