add dialog component

Author: rghorbani

README.md

@@ -29,6 +29,13 @@ or
 
 `$ npm install react-native-common --save`
 
+## Native Dependencies
+Some of the components are using these native dependencies, they are not a requirement but will allow you to create
+better lookings apps :)
+
+* react-native-animatable
+* react-native-blur
+
 ## Usage
 
 ```javascript
@@ -44,6 +51,7 @@ import { Button } from 'react-native-common';
 
 ## Components Included
 
+- [x] Theming & Default Styles of the Components
 - [x] Badge
 - [x] Button
 - [x] Carousel
@@ -67,7 +75,6 @@ import { Button } from 'react-native-common';
 - [x] SettingsList.Item
 - [x] StyleSheet
 - [x] ViewPager
-- [ ] Checkboxes
 
 ## Documentation
 
@@ -79,7 +86,6 @@ import { Button } from 'react-native-common';
 Look for the label `Good First Task` on the issues. Click [here](https://github.com/rghorbani/react-native-common/issues?q=is%3Aopen+is%3Aissue+label%3A%22Good+First+Task%22) to see them.
 
 #### NOT STARTED
-- [ ] Add Theming & Default Styles to all of the Components
 - [ ] Add Image Component which supports parallax
 - [ ] Compatibility with react-native-windows
 - [ ] Something you's like to see? Submit an [issue](https://github.com/rghorbani/react-native-common/issues/new) or a [pull request](https://github.com/rghorbani/react-native-common/pulls)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-common",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "UI Toolset & Components and API Library for React Native.",
   "main": "src/index.js",
   "scripts": {
@@ -73,9 +73,8 @@
     "react-native": "0.51.0"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*",
-    "react-native-vector-icons": "^4.5.0"
+    "react": "^16.0.0",
+    "react-native": "^0.51.0"
   },
   "prettier": {
     "requirePragma": true,

src/commons/BaseComponent.js

@@ -131,10 +131,14 @@ class BaseComponent extends React.Component {
   }
 
   extractBorderRadiusValue() {
+    const borderRadiusPropsKeys = _.chain(this.props)
+      .keys(this.props)
+      .filter(key => BorderRadiuses.getKeysPattern().test(key))
+      .value();
     let borderRadius;
-    _.forEach(BorderRadiuses, (value, key) => {
+    _.forEach(borderRadiusPropsKeys, (key) => {
       if (this.props[key] === true) {
-        borderRadius = value;
+        borderRadius = BorderRadiuses[key];
       }
     });
 

src/components/dialog/index.js

@@ -0,0 +1,110 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const _ = require('lodash');
+const Animatable = require('react-native-animatable');
+const { StyleSheet } = require('react-native');
+
+const View = require('../view');
+const Modal = require('../../screensComponents/modal');
+const { BaseComponent } = require('../../commons');
+const { Colors } = require('../../style');
+
+/*eslint-disable*/
+/**
+ * @description: Dialog component for displaying custom content inside a popup dialog
+ * @notes: Use alignment modifiers to control the dialog positon (top, bottom, centerV, centerH, etc... by default the dialog is align to center)
+ * @modifiers: alignment
+ */
+/*eslint-enable*/
+class Dialog extends BaseComponent {
+  static displayName = 'Dialog'
+
+  static propTypes = {
+    /**
+     * Control visibility of the dialog
+     */
+    visible: PropTypes.bool,
+    /**
+     * dismiss callback for when clicking on the background
+     */
+    onDismiss: PropTypes.func,
+    /**
+     * The color of the overlay background
+     */
+    overlayBackgroundColor: PropTypes.string,
+    /**
+     * The dialog width (default: 90%)
+     */
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /**
+     * The dialog height (default: 70%)
+     */
+    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /**
+     * the animation configuration to pass to the dialog (based on react-native-animatable,
+     * ex. {animation, duration, easing,..})
+     */
+    animationConfig: PropTypes.object,
+    /**
+     * The dialog container style
+     */
+    containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
+  };
+
+  static defaultProps = {
+    overlayBackgroundColor: Colors.rgba(Colors.dark10, 0.6),
+    width: '90%',
+    height: '70%',
+  };
+
+  generateStyles() {
+    this.styles = createStyles(this.props);
+  }
+
+  getAnimationConfig() {
+    const {animationConfig} = this.props;
+    return {
+      animation: 'slideInUp',
+      duration: 400,
+      useNativeDriver: true,
+      ...animationConfig,
+    };
+  }
+
+  render() {
+    const {visible, overlayBackgroundColor, onDismiss} = this.getThemeProps();
+    const {alignments} = this.state;
+    const centerByDefault = _.isEmpty(alignments);
+
+    return (
+      <Modal
+        transparent
+        visible={visible}
+        animationType={'fade'}
+        onBackgroundPress={onDismiss}
+        onRequestClose={onDismiss}
+        overlayBackgroundColor={overlayBackgroundColor}
+      >
+        <View center={centerByDefault} style={[this.styles.overlay, alignments]} pointerEvents="box-none">
+          <Animatable.View style={this.styles.dialogContainer} {...this.getAnimationConfig()}>
+            {this.props.children}
+          </Animatable.View>
+        </View>
+      </Modal>
+    );
+  }
+}
+
+function createStyles({width, height}) {
+  return StyleSheet.create({
+    overlay: {
+      flex: 1,
+    },
+    dialogContainer: {
+      width,
+      height,
+    },
+  });
+}
+
+module.exports = Dialog;

src/components/index.js

@@ -23,6 +23,7 @@ module.exports = {
   get Badge() { return require('./badge'); },
   get Button() { return require('./button'); },
   get ConnectionStatusBar() { return require('./connection'); },
+  get Dialog() { return require('./dialog'); },
   get Header() { return require('./header'); },
   get KeyboardSpacer() { return require('./KeyboardSpacer'); },
   get LoadingView() { return require('./loading'); },

src/components/picker/index.js

@@ -171,6 +171,7 @@ class Picker extends TextInput {
   }
 
   renderExpandableInput() {
+    const {style} = this.props;
     const typography = this.getTypography();
     const minHeight = typography.lineHeight;
     const color = this.extractColorValue() || Colors.dark10;
@@ -183,6 +184,7 @@ class Picker extends TextInput {
           typography,
           {minHeight},
           {color},
+          style
         ]}
         numberOfLines={3}
         onPress={this.handlePickerOnPress}

src/screen-components/modal/index.js

@@ -8,11 +8,13 @@
 
 const React = require('react');
 const PropTypes = require('prop-types');
+const _ = require('lodash');
 const RNModal = require('react-native').Modal;
-const { View } = require('react-native');
+const { StyleSheet, TouchableWithoutFeedback } = require('react-native');
 const { BlurView } = require('react-native-blur');
 
 const TopBar = require('./TopBar');
+const View = require('../../components/view');
 const { BaseComponent } = require('../../commons');
 const { Constants } = require('../../helpers');
 
@@ -24,21 +26,49 @@ class Modal extends BaseComponent {
      * Blurs the modal background when transparent (iOS only)
      */
     enableModalBlur: PropTypes.bool,
+    /**
+     * allow dismissing a modal when clicking on its background
+     */
+    onBackgroundPress: PropTypes.func,
+    /**
+     * the background color of the overlay
+     */
+    overlayBackgroundColor: PropTypes.string,
   };
 
+  renderTouchableOverlay() {
+    const {overlayBackgroundColor, onBackgroundPress} = this.props;
+    if (_.isFunction(onBackgroundPress) || !!overlayBackgroundColor) {
+      return (
+        <View style={[styles.touchableOverlay, {backgroundColor: overlayBackgroundColor}]}>
+          <TouchableWithoutFeedback onPress={onBackgroundPress}>
+            <View flex />
+          </TouchableWithoutFeedback>
+        </View>
+      );
+    }
+  }
+
   render() {
     const {enableModalBlur, ...props} = this.props;
     const Container = enableModalBlur && Constants.isIOS ? BlurView : View;
     return (
       <RNModal {...props}>
         <Container style={{flex: 1}} blurType="light">
+          {this.renderTouchableOverlay()}
           {this.props.children}
         </Container>
       </RNModal>
     );
   }
 }
 
+const styles = StyleSheet.create({
+  touchableOverlay: {
+    ...StyleSheet.absoluteFillObject,
+  },
+});
+
 Modal.TopBar = TopBar;
 
 module.exports = Modal;

src/style/BorderRadiuses.js

@@ -6,30 +6,30 @@
 
 'use strict';
 
-const { Platform } = require('react-native');
+const _ = require('lodash');
 
-if (Platform.OS === 'ios') {
-  module.exports = {
-    br0: 0,
-    br10: 3,
-    br20: 6,
-    br30: 9,
-    br40: 12,
-    br50: 15,
-    br60: 20,
-    br100: 999,
-  };
-} else if (Platform.OS === 'android') {
-  module.exports = {
-    br0: 0,
-    br10: 2,
-    br20: 6,
-    br30: 8,
-    br40: 12,
-    br50: 16,
-    br60: 20,
-    br100: 999,
-  };
-} else {
-  throw 'BorderRadiuses: Unknown platform';
+const { Constants } = require('../helpers');
+
+class BorderRadiuses {
+  br0 = 0;
+  br10 = Constants.isIOS ? 3 : 2;
+  br20 = 6;
+  br30 = Constants.isIOS ? 9 : 8;
+  br40 = 12;
+  br50 = Constants.isIOS ? 15 : 16;
+  br60 = 20;
+  br100 = 999;
+
+  getKeysPattern() {
+    return new RegExp(
+      _.chain(this)
+        .keys()
+        .map(key => [`${key}`])
+        .flatten()
+        .join('|')
+        .value(),
+    );
+  }
 }
+
+module.exports = new BorderRadiuses();