Merge pull request #54 from enesozturk/typescript

Typescript

README.md

@@ -27,10 +27,10 @@ $ yarn add rn-swipeable-panel
 ## 🚀 How to use
 
 ```javascript
-import React from "react";
-import { StyleSheet, Text, View } from "react-native";
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
 
-import SwipeablePanel from "rn-swipeable-panel";
+import { SwipeablePanel } from 'rn-swipeable-panel';
 
 export default App = () => {
   const [panelProps, setPanelProps] = useState({

index.d.ts

@@ -5,6 +5,9 @@
 
 import * as React from 'react';
 
+declare var LARGE_PANEL_CONTENT_HEIGHT: number;
+declare var SMALL_PANEL_CONTENT_HEIGHT: number;
+
 declare interface SwipeablePanelProps extends React.Props<SwipeablePanel> {
   /**
    * Required prop for panels actual state. Set true if you want to open panel
@@ -69,7 +72,7 @@ declare interface SwipeablePanelProps extends React.Props<SwipeablePanel> {
   /**
    * Use this prop to override bar style
    */
-  barStyle: object;
+  barStyle?: object;
 
   /**
    * Set true if you want to make toucable outside of panel
@@ -86,4 +89,4 @@ declare interface SwipeablePanelProps extends React.Props<SwipeablePanel> {
 
 declare class SwipeablePanel extends React.Component<SwipeablePanelProps, any> {}
 
-export default SwipeablePanel;
+export { SwipeablePanel, LARGE_PANEL_CONTENT_HEIGHT, SMALL_PANEL_CONTENT_HEIGHT };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-swipeable-panel",
-  "version": "1.1.12",
+  "version": "1.1.15",
   "description": "Swipeable bottom panel for react native",
   "author": "Enes Ozturk",
   "license": "MIT",
@@ -9,6 +9,7 @@
     "url": "https://github.com/enesozturk/rn-swipeable-panel"
   },
   "main": "dist/index.js",
+  "types": "./index.d.ts",
   "module": "dist/index.modern.js",
   "source": "src/index.tsx",
   "engines": {

src/Bar.tsx

@@ -1,30 +1,30 @@
-import * as React from 'react'
-import { StyleSheet, View } from 'react-native'
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
 
 type BarProps = {
-  barStyle?: object
-}
+  barStyle?: object;
+};
 
 export const Bar = ({ barStyle }: BarProps) => {
   return (
     <View style={BarStyles.barContainer}>
       <View style={[BarStyles.bar, barStyle]} />
     </View>
-  )
-}
+  );
+};
 
 const BarStyles = StyleSheet.create({
   barContainer: {
     display: 'flex',
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   bar: {
     width: '10%',
     height: 5,
     borderRadius: 5,
     marginTop: 10,
     marginBottom: 10,
-    backgroundColor: '#e2e2e2'
-  }
-})
+    backgroundColor: '#e2e2e2',
+  },
+});

src/Close.tsx

@@ -1,36 +1,20 @@
-import * as React from 'react'
-import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import * as React from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 
 type CloseProps = {
-  onPress: () => void
-  rootStyle?: object
-  iconStyle?: object
-}
+  onPress: () => void;
+  rootStyle?: object;
+  iconStyle?: object;
+};
 
 export const Close = ({ onPress, rootStyle, iconStyle }: CloseProps) => {
   return (
-    <TouchableOpacity
-      activeOpacity={0.5}
-      onPress={() => onPress()}
-      style={[CloseStyles.closeButton, rootStyle]}
-    >
-      <View
-        style={[
-          CloseStyles.iconLine,
-          iconStyle,
-          { transform: [{ rotateZ: '45deg' }] }
-        ]}
-      />
-      <View
-        style={[
-          CloseStyles.iconLine,
-          iconStyle,
-          { transform: [{ rotateZ: '135deg' }] }
-        ]}
-      />
+    <TouchableOpacity activeOpacity={0.5} onPress={() => onPress()} style={[CloseStyles.closeButton, rootStyle]}>
+      <View style={[CloseStyles.iconLine, iconStyle, { transform: [{ rotateZ: '45deg' }] }]} />
+      <View style={[CloseStyles.iconLine, iconStyle, { transform: [{ rotateZ: '135deg' }] }]} />
     </TouchableOpacity>
-  )
-}
+  );
+};
 
 const CloseStyles = StyleSheet.create({
   closeButton: {
@@ -44,13 +28,13 @@ const CloseStyles = StyleSheet.create({
     zIndex: 3,
     display: 'flex',
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   iconLine: {
     position: 'absolute',
     width: 18,
     height: 2,
     borderRadius: 2,
-    backgroundColor: 'white'
-  }
-})
+    backgroundColor: 'white',
+  },
+});