alwaysOpen props to keep the modal visible

* Initial work * Fix watch scripts for examples * Transition on overlay * Fix watch script for RN * Add examples * Update docs * Fix post version script
linddominic · Jun 20, 2019 · dc1545b · dc1545b
1 parent ed5d27a
commit dc1545b
Show file tree

Hide file tree

Showing 17 changed files with 304 additions and 129 deletions.
diff --git a/docs/PROPSMETHODS.md b/docs/PROPSMETHODS.md
@@ -22,6 +22,16 @@ The value you pass is the height of the modal before being full opened.
 | -------- | -------- |
 | number   | No       |
 
+### `alwaysOpen`
+
+A number that will make the modal visible all the time. You can still [open](/PROPSMETHODS.md?id=open) and [close](/PROPSMETHODS.md?id=close) it, using the build-in methods.
+
+The value you pass is the height of the visible part of the modal on top of the screen.
+
+| Type     | Required |
+| -------- | -------- |
+| number   | No       |
+
 ### `handlePosition`
 
 Define where the handle on top of the modal should be positioned.

diff --git a/examples/expo/App.js b/examples/expo/App.js
@@ -2,7 +2,6 @@ import React from 'react';
 
 import { Layout } from './src/components/layout/Layout';
 import { Header } from './src/components/header/Header';
-import { Footer } from './src/components/footer/Footer';
 import { Button } from './src/components/button/Button';
 import { AbsoluteHeader } from './src/components/modals/AbsoluteHeader';
 import { SimpleContent } from './src/components/modals/SimpleContent';
@@ -11,6 +10,7 @@ import { SnappingList } from './src/components/modals/SnappingList';
 import { CustomStyle } from './src/components/modals/CustomStyle';
 import { FlatList } from './src/components/modals/FlatList';
 import { SectionList } from './src/components/modals/SectionList';
+import { AlwaysOpen } from './src/components/modals/AlwaysOpen';
 
 export default () => {
   const modal = [];
@@ -27,10 +27,7 @@ export default () => {
 
   return (
     <Layout>
-      <Header
-        subheading="Run with React Navigation"
-        copy="Import your modal on the screen you need"
-      />
+      <Header subheading="Run with React Navigation" />
 
       {renderButtons([
         'Modal with a simple content',
@@ -42,15 +39,14 @@ export default () => {
         'Modal with a Section List',
       ])}
 
-      <Footer />
-
       <SimpleContent ref={el => { modal[0] = el; }} />
       <FixedContent ref={el => { modal[1] = el; }} />
       <SnappingList ref={el => { modal[2] = el; }} />
       <AbsoluteHeader ref={el => { modal[3] = el; }} />
       <CustomStyle ref={el => { modal[4] = el; }} />
       <FlatList ref={el => { modal[5] = el; }} />
       <SectionList ref={el => { modal[6] = el; }} />
+      <AlwaysOpen />
     </Layout>
   );
 };
diff --git a/examples/expo/src/components/footer/Footer.js b/examples/expo/src/components/footer/Footer.js
diff --git a/examples/expo/src/components/header/Header.js b/examples/expo/src/components/header/Header.js
@@ -1,11 +1,14 @@
 import React from 'react';
-import { View, StyleSheet, Text } from 'react-native';
+import { View, StyleSheet, Text, Linking } from 'react-native';
 
-export const Header = ({ subheading, copy }) => (
+export const Header = ({ subheading }) => (
   <View style={s.header}>
     <Text style={s.header__heading}>Modalize</Text>
     <Text style={s.header__subheading}>{subheading}</Text>
-    <Text style={s.header__copy}>{copy}</Text>
+
+    <Text style={s.header__copy}>
+      Created by <Text style={s.header__author} onPress={() => Linking.openURL('https://github.com/jeremybarbet')}>Jérémy Barbet</Text> — v1.0.0
+    </Text>
   </View>
 );
 
@@ -36,8 +39,12 @@ const s = StyleSheet.create({
     marginTop: 20,
     marginHorizontal: 40,
 
-    fontSize: 16,
+    fontSize: 14,
     color: '#b5b5b5',
     textAlign: 'center',
   },
+
+  header__author: {
+    color: '#404040',
+  },
 });
diff --git a/examples/expo/src/components/modals/AlwaysOpen.js b/examples/expo/src/components/modals/AlwaysOpen.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Modalize from 'react-native-modalize';
+import faker from 'faker';
+
+export class AlwaysOpen extends React.PureComponent {
+
+  modal = React.createRef();
+
+  renderContent = () => (
+    <View style={s.content}>
+      <Text style={s.content__subheading}>{'Introduction'.toUpperCase()}</Text>
+      <Text style={s.content__heading}>Always open modal!</Text>
+      <Text style={s.content__description}>{faker.lorem.paragraph()}</Text>
+    </View>
+  )
+
+  render() {
+    return (
+      <Modalize
+        ref={this.modal}
+        style={s.content__modal}
+        alwaysOpen={85}
+        handlePosition="inside"
+      >
+        {this.renderContent()}
+      </Modalize>
+    );
+  }
+}
+
+const s = StyleSheet.create({
+  content: {
+    padding: 20,
+  },
+
+  content__modal: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.45,
+    shadowRadius: 16,
+  },
+
+  content__subheading: {
+    marginBottom: 2,
+
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#ccc',
+  },
+
+  content__heading: {
+    fontSize: 24,
+    fontWeight: '600',
+    color: '#333',
+  },
+
+  content__description: {
+    paddingTop: 10,
+    paddingBottom: 10,
+
+    fontSize: 15,
+    fontWeight: '200',
+    lineHeight: 22,
+    color: '#666',
+  },
+});
diff --git a/examples/react-native-navigation/src/components/footer/Footer.js b/examples/react-native-navigation/src/components/footer/Footer.js
diff --git a/examples/react-native-navigation/src/components/header/Header.js b/examples/react-native-navigation/src/components/header/Header.js
@@ -1,11 +1,14 @@
 import React from 'react';
-import { View, StyleSheet, Text } from 'react-native';
+import { View, StyleSheet, Text, Linking } from 'react-native';
 
-export const Header = ({ subheading, copy }) => (
+export const Header = ({ subheading }) => (
   <View style={s.header}>
     <Text style={s.header__heading}>Modalize</Text>
     <Text style={s.header__subheading}>{subheading}</Text>
-    <Text style={s.header__copy}>{copy}</Text>
+
+    <Text style={s.header__copy}>
+      Created by <Text style={s.header__author} onPress={() => Linking.openURL('https://github.com/jeremybarbet')}>Jérémy Barbet</Text> — v1.0.0
+    </Text>
   </View>
 );
 
@@ -36,8 +39,12 @@ const s = StyleSheet.create({
     marginTop: 20,
     marginHorizontal: 40,
 
-    fontSize: 16,
+    fontSize: 14,
     color: '#b5b5b5',
     textAlign: 'center',
   },
+
+  header__author: {
+    color: '#404040',
+  },
 });
diff --git a/examples/react-native-navigation/src/screens/AlwaysOpen.js b/examples/react-native-navigation/src/screens/AlwaysOpen.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Modalize from 'react-native-modalize';
+import faker from 'faker';
+
+export class AlwaysOpen extends React.PureComponent {
+
+  modal = React.createRef();
+
+  renderContent = () => (
+    <View style={s.content}>
+      <Text style={s.content__subheading}>{'Introduction'.toUpperCase()}</Text>
+      <Text style={s.content__heading}>Always open modal!</Text>
+      <Text style={s.content__description}>{faker.lorem.paragraph()}</Text>
+    </View>
+  )
+
+  render() {
+    return (
+      <Modalize
+        ref={this.modal}
+        style={s.content__modal}
+        alwaysOpen={85}
+        handlePosition="inside"
+      >
+        {this.renderContent()}
+      </Modalize>
+    );
+  }
+}
+
+const s = StyleSheet.create({
+  content: {
+    padding: 20,
+  },
+
+  content__modal: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.45,
+    shadowRadius: 16,
+  },
+
+  content__subheading: {
+    marginBottom: 2,
+
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#ccc',
+  },
+
+  content__heading: {
+    fontSize: 24,
+    fontWeight: '600',
+    color: '#333',
+  },
+
+  content__description: {
+    paddingTop: 10,
+    paddingBottom: 10,
+
+    fontSize: 15,
+    fontWeight: '200',
+    lineHeight: 22,
+    color: '#666',
+  },
+});
diff --git a/examples/react-native-navigation/src/screens/App.js b/examples/react-native-navigation/src/screens/App.js
@@ -4,9 +4,10 @@ import { Navigation } from 'react-native-navigation';
 import { ABSOLUTE_HEADER, CUSTOM_STYLE, FIXED_CONTENT, FLAT_LIST, SECTION_LIST, SIMPLE_CONTENT, SNAPPING_LIST } from '../screens';
 import { Layout } from '../components/layout/Layout';
 import { Header } from '../components/header/Header';
-import { Footer } from '../components/footer/Footer';
 import { Button } from '../components/button/Button';
 
+import { AlwaysOpen } from './AlwaysOpen';
+
 export const App = () => {
   const handleOverlay = (name) => {
     Navigation.showOverlay({
@@ -29,10 +30,7 @@ export const App = () => {
 
   return (
     <Layout>
-      <Header
-        subheading="Run with React Native Navigation"
-        copy="Uses showOverlay method"
-      />
+      <Header subheading="Run with React Native Navigation" />
 
       {renderButtons([
         { name: 'Modal with a simple content', id: SIMPLE_CONTENT },
@@ -44,7 +42,7 @@ export const App = () => {
         { name: 'Modal with a Section List', id: SECTION_LIST },
       ])}
 
-      <Footer />
+      <AlwaysOpen />
     </Layout>
   );
 };
diff --git a/examples/react-navigation/App.js b/examples/react-navigation/App.js
@@ -2,7 +2,6 @@ import React from 'react';
 
 import { Layout } from './src/components/layout/Layout';
 import { Header } from './src/components/header/Header';
-import { Footer } from './src/components/footer/Footer';
 import { Button } from './src/components/button/Button';
 import { AbsoluteHeader } from './src/components/modals/AbsoluteHeader';
 import { SimpleContent } from './src/components/modals/SimpleContent';
@@ -11,6 +10,7 @@ import { SnappingList } from './src/components/modals/SnappingList';
 import { CustomStyle } from './src/components/modals/CustomStyle';
 import { FlatList } from './src/components/modals/FlatList';
 import { SectionList } from './src/components/modals/SectionList';
+import { AlwaysOpen } from './src/components/modals/AlwaysOpen';
 
 export const App = () => {
   const modal = [];
@@ -27,10 +27,7 @@ export const App = () => {
 
   return (
     <Layout>
-      <Header
-        subheading="Run with React Navigation"
-        copy="Import your modal on the screen you need"
-      />
+      <Header subheading="Run with React Navigation" />
 
       {renderButtons([
         'Modal with a simple content',
@@ -42,15 +39,14 @@ export const App = () => {
         'Modal with a Section List',
       ])}
 
-      <Footer />
-
       <SimpleContent ref={el => { modal[0] = el; }} />
       <FixedContent ref={el => { modal[1] = el; }} />
       <SnappingList ref={el => { modal[2] = el; }} />
       <AbsoluteHeader ref={el => { modal[3] = el; }} />
       <CustomStyle ref={el => { modal[4] = el; }} />
       <FlatList ref={el => { modal[5] = el; }} />
       <SectionList ref={el => { modal[6] = el; }} />
+      <AlwaysOpen />
     </Layout>
   );
 };