Merge pull request #33 from leandrohsilveira/select-branches-livedemo

Live demo improvement and fixes

packages/react-formctrl-examples/src/app.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import {HashRouter, NavLink} from 'react-router-dom'
+import {HashRouter, NavLink, Route, Switch} from 'react-router-dom'
 import GoogleAnalytics from 'react-ga';
 
 import {FormProvider} from 'react-formctrl'
@@ -29,6 +29,15 @@ class NoAdminValidator extends CustomValidator {
 
 }
 
+function AppContent(props) {
+    const url = props.match.url === '/' ? '' : props.match.url
+    // console.debug('AppContent.render match.url', url)
+    return (
+        <AppLayout url={url}>
+            <Routes {...props} />
+        </AppLayout>
+    )
+}
 
 export function App(props) {
 
@@ -39,9 +48,10 @@ export function App(props) {
     return (
         <FormProvider validators={customValidators}>
             <HashRouter>
-                <AppLayout>
-                    <Routes />
-                </AppLayout>
+                <Switch>
+                    <Route path="/branches/:branch" component={AppContent} />
+                    <Route path="/" component={AppContent} />
+                </Switch>
             </HashRouter>
         </FormProvider>
     )

packages/react-formctrl-examples/src/cases/user-form.jsx

@@ -242,7 +242,7 @@ function UserList(props) {
 
 
     return (
-        <table className="table">
+        <table className="table table-responsive">
             <thead>
                 <tr>
                     <th>#</th>

packages/react-formctrl-examples/src/components/ajax.jsx

@@ -0,0 +1,57 @@
+import React from 'react'
+
+import axios from 'axios'
+
+export class AjaxGet extends React.Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            data: null,
+            cancelTokenSource: axios.CancelToken.source()
+        }
+        this.request = this.request.bind(this)
+        this.handleRefresh = this.handleRefresh.bind(this)
+    }
+
+    componentWillMount() {
+        const {url} = this.props
+        this.request(url)
+    }
+
+    componentWillReceiveProps(nextProps) {
+        const {url} = this.props
+        if(nextProps.url !== url) this.handleRefresh(nextProps.url)
+    }
+
+    componentWillUnmount() {
+        this.state.cancelTokenSource.cancel('Component\'s request source unmounted.')
+    }
+
+    request(url) {
+        const {onError} = this.props
+        const requestConfig = {
+            cancelToken: this.state.cancelTokenSource.token
+        }
+        axios.get(url, requestConfig)
+            .then(({data}) => this.setState(state => ({data})))
+            .catch(error => onError ? onError(error) : console.error(error))
+    }
+
+    handleRefresh(url) {
+        this.setState(state => {
+            this.request(url)
+            return {data: null}
+        })
+    }
+
+    render() {
+        const {data} = this.state
+        const {url, children} = this.props
+        if(data) {
+            return React.cloneElement(children, { ...children.props, data, refresh: () => this.handleRefresh(url) })
+        }
+        return children
+    }
+
+}

packages/react-formctrl-examples/src/components/badges.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+
+import {AjaxGet} from './ajax'
+
+const SNYK_IO_URL = 'https://snyk.io/test/github/leandrohsilveira/react-formctrl/badge.svg'
+
+function parseKb(size) {
+    return (size / 1024).toFixed(1)
+}
+
+function getMinifiedColor(size) {
+    if(size < 20000) {
+        return 'brightgreen'
+    } else if(size < 30000) {
+        return 'green'
+    } else if(size < 35000) {
+        return 'yellow'
+    } else if(size < 40000) {
+        return 'orange'
+    } else {
+        return 'red'
+    }
+}
+
+function getGzippedColor(size) {
+    if(size < 7000) {
+        return 'brightgreen'
+    } else if(size < 9000) {
+        return 'green'
+    } else if(size < 11000) {
+        return 'yellow'
+    } else if(size < 15000) {
+        return 'orange'
+    } else {
+        return 'red'
+    }
+}
+
+function ShieldsIoBadge({title, content, color, alt}) {
+    const SHIELDS_IO_URL = 'https://img.shields.io/badge'
+    return <img src={`${SHIELDS_IO_URL}/${title}-${content}-${color}.svg`} alt={alt} />
+}
+
+function PackageSizesBadges({data}) {
+    if(data) {
+        const {minified, gzipped} = data
+        return (
+            <span>
+                <ShieldsIoBadge title="minified" content={`${parseKb(minified)} Kb`} color={getMinifiedColor(minified)} alt="Minified bundle size" />
+                <ShieldsIoBadge title="gzipped" content={`${parseKb(gzipped)} Kb`} color={getGzippedColor(gzipped)} alt="Gzipped bundle size" />
+            </span>
+        )
+    }
+    return null
+}
+
+import "./badges.scss"
+
+export function AppBadges({branch = 'master'}) {
+    return (
+        <div className="badges">
+            <a href={`https://travis-ci.org/leandrohsilveira/react-formctrl?branch=${branch}`}>
+                <img src={`https://travis-ci.org/leandrohsilveira/react-formctrl.svg?branch=${branch}`} alt="Travis CI Status"/>
+            </a>
+            <a href={`https://coveralls.io/github/leandrohsilveira/react-formctrl?branch=${branch}`}>
+                <img src={`https://coveralls.io/repos/github/leandrohsilveira/react-formctrl/badge.svg?branch=${branch}`} alt='Coverage Status' />
+            </a>
+            <AjaxGet url="/packages.sizes.json">
+                <PackageSizesBadges />
+            </AjaxGet>
+            <img src={`${SNYK_IO_URL}?targetFile=packages%2Freact-formctrl%2Fpackage.json`} alt="Known Vulnerabilities" />
+
+        </div>
+    )
+}

packages/react-formctrl-examples/src/components/badges.scss

@@ -0,0 +1,18 @@
+.badges {
+
+    a,
+    img,
+    span {
+        margin: 0 3px;
+
+        &:first-child {
+            margin-left: 0;
+        }
+        &:last-child {
+            margin-right: 0;
+        }
+
+    }
+
+
+}

packages/react-formctrl-examples/src/components/case.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import axios from 'axios'
 import {HighlightJsx, HighlightJson} from './highlight'
 import {SubmitValuesPopup} from './submit-values'
+import {AjaxGet} from '../components/ajax'
 
 export function Json({ json, title, maxHeight, children }) {
     let content = json
@@ -40,40 +40,28 @@ export function Json({ json, title, maxHeight, children }) {
     )
 }
 
+function HighlightRemoteCode({data}) {
+    if(data) {
+        return (
+            <HighlightJsx>
+                {data}
+            </HighlightJsx>
+        )
+    }
+    return <div>Loading code example from GitHub...</div>
+}
+
 export class Case extends React.Component {
 
     constructor(props) {
         super(props)
         this.state = {
-            code: '',
-            cancelTokenSource: axios.CancelToken.source()
+            code: ''
         }
     }
 
-    componentWillMount() {
-        const { url } = this.props
-        const requestConfig = {
-            cancelToken: this.state.cancelTokenSource.token
-        }
-        axios.get(url, requestConfig)
-            .then(response => {
-                this.setState(state => ({ code: response.data }))
-            })
-            .catch(thrown => {
-                if (axios.isCancel(thrown)) {
-                    console.debug('Request canceled: ', thrown.message)
-                } else {
-                    console.error(thrown)
-                }
-            })
-    }
-
-    componentWillUnmount() {
-        this.state.cancelTokenSource.cancel('Component\'s request source unmounted.')
-    }
-
     render() {
-        const { children, fileName } = this.props
+        const { children, fileName, url } = this.props
         const { code } = this.state
         return (
             <div className="case clearfix">
@@ -87,11 +75,9 @@ export class Case extends React.Component {
                             <h4>Code: <small>{fileName}</small></h4>
                         </div>
                         <div className="card-body">
-                            {code !== '' && (
-                                <HighlightJsx>
-                                    {code}
-                                </HighlightJsx>
-                            )}
+                            <AjaxGet url={url}>
+                                <HighlightRemoteCode />
+                            </AjaxGet>
                         </div>
                     </div>
                 </div>

packages/react-formctrl-examples/src/components/markdown.scss

@@ -1,7 +1,7 @@
 .markdown {
 
     > p:first-child {
-        margin-top: 0;
+        display: none;
     }
 
     table {