Modal Component

docs/components/Modal.md

@@ -0,0 +1,100 @@
+# Modal
+
+The Modal component is a simple way to present content above an enclosing view.
+
+## Props
+
+**animationType**: oneOf('none', 'slide', 'fade') = 'none'
+
+The `animationType` prop controls how the modal animates.
+
+* `slide` slides in from the bottom
+* `fade` fades into view
+* `none` appears without an animation
+
+**onShow**: function
+
+The `onShow` prop allows passing a function that will be called once the modal has been shown.
+
+**transparent**: bool = true
+
+The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background.
+
+**visible**: bool = true
+
+The `visible` prop determines whether your modal is visible.
+
+## Examples
+
+```javascript
+import React, { Component } from 'react';
+import { storiesOf } from '@kadira/storybook';
+import { Modal, Button , Text, View } from 'react-native';
+
+class ModalExample extends Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      modalVisible: false,
+      animationType: 'none',
+      transparent: false,
+    }
+  }
+
+  render() {
+    return (
+      <View style={{display:'flex',flex:1}}>
+        <Modal
+          animationType={this.state.animationType}
+          transparent={this.state.transparent}
+          visible={this.state.modalVisible}
+          onShow={this.state.onShow}
+        >
+          <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
+            <View style={{backgroundColor:'gray',alignItems:'center',justifyContent:'center',width:200,height:100}}>
+              <Text>Modal!</Text>
+              <Button onPress={()=>{
+                  this.setState({
+                    modalVisible:false
+                  })
+                }} title="Close"/>
+            </View>
+          </View>
+        </Modal>
+        <Button onPress={() => {
+                  this.setState({
+                    modalVisible:true,
+                    animationType:'slide'
+                  })
+        }} title="animation slide"/>
+        <Button onPress={() => {
+                  this.setState({
+                    modalVisible:true,
+                    animationType:'fade'
+                  })
+        }} title="animation fade"/>
+        <Button onPress={() => {
+                  this.setState({
+                    modalVisible:true,
+                    animationType:'none'
+                  })
+        }} title="animation none"/>
+        <Button onPress={() => {
+                  this.setState({
+                    transparent:!this.state.transparent
+                  })
+        }} title="change transparent"/>
+        <Button onPress={() => {
+                  this.setState({
+                    modalVisible:true,
+                    animationType:'none',
+                    onShow:function(){
+                      alert('aaa');
+                    }
+                  })
+        }} title="with onShow"/>
+      </View>
+    );
+  }
+}
+```

examples/components/Modal/ModalExample.js

@@ -0,0 +1,86 @@
+import React, { Component } from 'react';
+import { storiesOf } from '@kadira/storybook';
+import { Modal, Button , Text, View } from 'react-native';
+const examples = [
+  {
+    title: 'Simple Modal',
+    description: 'The title and onPress handler are required. It is ' +
+    'recommended to set accessibilityLabel to help make your app usable by ' +
+    'everyone.',
+    render: function() {
+      return (
+        <ModalExample/>
+      );
+    },
+  },
+];
+class ModalExample extends Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      modalVisible: false,
+      animationType: 'none',
+      transparent: false,
+    }
+  }
+
+  render() {
+    return (
+      <View style={{display:'flex',flex:1}}>
+        <Modal
+          animationType={this.state.animationType}
+          transparent={this.state.transparent}
+          visible={this.state.modalVisible}
+          onShow={this.state.onShow}
+        >
+          <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
+            <View style={{backgroundColor:'gray',alignItems:'center',justifyContent:'center',width:200,height:100}}>
+              <Text>Modal!</Text>
+              <Button onPress={()=>{
+                  this.setState({
+                    modalVisible:false
+                  })
+                }} title="Close"/>
+            </View>
+          </View>
+        </Modal>
+        <Button onPress={() => {
+                  this.setState({
+                    modalVisible:true,
+                    animationType:'slide'
+                  })
+        }} title="animation slide"/>
+        <Button onPress={() => {
+                  this.setState({
+                    modalVisible:true,
+                    animationType:'fade'
+                  })
+        }} title="animation fade"/>
+        <Button onPress={() => {
+                  this.setState({
+                    modalVisible:true,
+                    animationType:'none'
+                  })
+        }} title="animation none"/>
+        <Button onPress={() => {
+                  this.setState({
+                    transparent:!this.state.transparent
+                  })
+        }} title="change transparent"/>
+        <Button onPress={() => {
+                  this.setState({
+                    modalVisible:true,
+                    animationType:'none',
+                    onShow:function(){
+                      alert('aaa');
+                    }
+                  })
+        }} title="with onShow"/>
+      </View>
+    );
+  }
+}
+examples.forEach((example) => {
+  storiesOf('component: Modal', module)
+    .add(example.title, () => example.render());
+});

package.json

@@ -65,7 +65,8 @@
     "inline-style-prefixer": "^3.0.6",
     "normalize-css-color": "^1.0.2",
     "prop-types": "^15.5.10",
-    "react-timer-mixin": "^0.13.3"
+    "react-timer-mixin": "^0.13.3",
+    "react-transition-group": "^2.1.0"
   },
   "devDependencies": {
     "@kadira/storybook": "^2.35.3",

src/components/Modal/ModalPropTypes.js

@@ -0,0 +1,52 @@
+import { bool, func, oneOf ,arrayOf } from 'prop-types';
+/**
+ * Copy from react-native
+ */
+const ModalPropTypes = {
+    /**
+     * The `animationType` prop controls how the modal animates.
+     *
+     * - `slide` slides in from the bottom
+     * - `fade` fades into view
+     * - `none` appears without an animation
+     *
+     * Default is set to `none`.
+     */
+    animationType: oneOf(['none', 'slide', 'fade']),
+    /**
+     * The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background.
+     */
+    transparent: bool,
+    /**
+     * The `hardwareAccelerated` prop controls whether to force hardware acceleration for the underlying window.
+     * @platform android
+     */
+    hardwareAccelerated: bool,
+    /**
+     * The `visible` prop determines whether your modal is visible.
+     */
+    visible: bool,
+    /**
+     * The `onRequestClose` callback is called when the user taps the hardware back button.
+     * @platform android
+     */
+    onRequestClose: func,
+    /**
+     * The `onShow` prop allows passing a function that will be called once the modal has been shown.
+     */
+    onShow: func,
+    /**
+     * The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations.
+     * On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.
+     * @platform ios
+     */
+    supportedOrientations: arrayOf(oneOf(['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'])),
+    /**
+     * The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed.
+     * The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.
+     * @platform ios
+     */
+    onOrientationChange: func,
+}
+
+export default ModalPropTypes;

src/components/Modal/RenderToTopLayer.js

@@ -0,0 +1,92 @@
+import { Component } from 'react';
+import { bool, number, func , element } from 'prop-types';
+import { unstable_renderSubtreeIntoContainer , unmountComponentAtNode } from 'react-dom';
+
+class RenderToTopLayer extends Component {
+  static propTypes = {
+    children: element.isRequired,
+    closeTimeout: number,
+    onShow: func,
+    showTimeout: number,
+    visible: bool,
+  }
+
+  componentDidMount() {
+    this.renderLayer();
+  }
+
+  componentDidUpdate() {
+    this.renderLayer();
+  }
+
+  componentWillUnmount() {
+    this.unrenderLayer();
+    if (this.closeHandler) {
+      clearTimeout(this.closeHandler);
+    }
+  }
+
+  getLayer() {
+    return this.layer;
+  }
+
+  unrenderLayer() {
+    if (!this.layer) {
+      return;
+    }
+
+    unmountComponentAtNode(this.layer);
+    document.body.removeChild(this.layer);
+    this.layer = null;
+  }
+
+  renderLayer() {
+    if (!this.layer) {
+      this.layer = document.createElement('div');
+      document.body.appendChild(this.layer);
+    }
+    const { visible =true , children } = this.props;
+
+    if (visible) {
+      this.layer.style.display = 'flex';
+      this.showRequest();
+    } else {
+      this.closeRequest();
+    }
+    const layerElement = children;
+    this.layerElement = unstable_renderSubtreeIntoContainer(this, layerElement, this.layer);
+  }
+
+  closeCallback() {
+    if (this.layer) {
+      this.layer.style.display = 'none';
+    }
+    this.closeHandler = null;
+  }
+
+  closeRequest() {
+    if (this.closeHandler)
+      return;
+    this.closeHandler = setTimeout(() => this.closeCallback(), this.props.closeTimeout || 0);
+  }
+
+  showCallback() {
+    if (this.props.onShow) {
+      this.props.onShow();
+    }
+    this.showHandler = null;
+  }
+
+  showRequest() {
+    if (this.showHandler) {
+      return;
+    }
+    this.showHandler = setTimeout(() => this.showCallback(), this.props.showTimeout || 0);
+  }
+
+  render() {
+    return null;
+  }
+}
+
+export default RenderToTopLayer;

src/components/Modal/__tests__/index-test.js

@@ -0,0 +1,4 @@
+/* eslint-env jasmine, jest */
+describe('components/Modal', () => {
+  test.skip('NO TEST COVERAGE', () => {});
+});