Merge pull request #4 from ModusCreateOrg/mixins-2

Updated mixins example per Grgur

Author: mschwartz

05-mixins/c-maskable-example/src/App.js

@@ -1,11 +1,16 @@
 import React, { Component } from 'react';
-import Comments from './Comments'
+import Mask from './Mask';
+import NetworkView from './NetworkView';
 import './App.css';
 
 class App extends Component {
-  render() {
+  render () {
     return (
-      <Comments/>
+      <Mask render={({onBeforeLoad, onLoad}) => (
+        <NetworkView
+          onBeforeLoad={onBeforeLoad} onLoad={onLoad}
+        />
+      )}/>
     );
   }
 }

05-mixins/c-maskable-example/src/Comments.js

@@ -0,0 +1,59 @@
+import React, { Component } from 'react'
+
+const style = {
+  wrap : {
+    display  : 'inline-block',
+    position : 'relative'
+  },
+  modal : {
+    position       : 'absolute',
+    top            : 0,
+    left           : 0,
+    right          : 0,
+    bottom         : 0,
+    background     : 'rgba(0, 0, 0, .3)',
+    display        : 'flex',
+    alignItems     : 'center',
+    justifyContent : 'center'
+  },
+  msg : {
+    padding    : '8px 16px',
+    border     : '1px solid #555',
+    background : 'rgba(0, 0, 0, .1)',
+    color      : '#333'
+  }
+};
+
+class Mask extends Component {
+  state = {
+    mask: this.props.mask,
+    maskMsg: this.props.maskMsg
+  }
+  onBeforeLoad = () => {
+    this.setState({
+      mask: true,
+      maskMsg: 'loading...'
+    });
+  }
+  onLoad = () => {
+    this.setState({
+      mask: null,
+      maskMsg: null
+    });
+  }
+  render() {
+    const { onBeforeLoad, onLoad } = this;
+    const { mask, maskMsg } = this.state;
+   
+    return (
+      <div style={style.wrap}>
+        {this.props.render({onBeforeLoad, onLoad})}
+        {mask && <div style={style.modal}>
+          {maskMsg && <div style={style.msg}>{maskMsg}</div>}
+        </div>}
+      </div>
+    );
+  }
+}
+
+export default Mask;

05-mixins/c-maskable-example/src/Mask.js

@@ -0,0 +1,45 @@
+import React, {Component} from 'react'
+
+class NetworkView extends Component {
+  state = {
+    ip: this.props.ip,
+    mask: this.props.mask,
+    router: this.props.router
+  }
+
+  static defaultProps = {
+    onBeforeLoad: () => {},
+    onLoad: () => {}
+  }
+  componentDidMount () {
+    if (!this.props.ip) {
+      this.load();
+    }
+  }
+  load () {
+    this.props.onBeforeLoad();
+    setTimeout(() => {
+      this.setState({
+        ip: '192.168.1.2',
+        mask: '255.255.255.0',
+        router: '192.168.1.1'
+      });
+      this.props.onLoad()
+    }, 3000);
+  }
+  onLoad () {}
+  render () {
+    const { ip, mask, router } = this.state;
+
+    return (
+      <div style={{width: "300px", padding: "12px" }}>
+        <h1>TCP/IP</h1>
+        IP: {ip}<br/>
+        Network Mask: {mask}<br/>
+        Router: {router}
+      </div>
+    );
+  } 
+}
+
+export default NetworkView;

05-mixins/c-maskable-example/src/NetworkView.js

@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
-import SegmentedBtn from './SegmentedBtn';
+import SegmentedButton from './SegmentedButton';
 import './App.css';
 
 const App = () => {
   return (
-    <SegmentedBtn>
+    <SegmentedButton>
       <button value="one">One</button>
       <button value="two">Two</button>
       <button value="three">Three</button>
-    </SegmentedBtn>
+    </SegmentedButton>
   );
 }