Skip to content

Commit

Permalink
[reactV14] fix the home screen of the docs
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Sep 29, 2015
1 parent e83479d commit 3654106
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 124 deletions.
161 changes: 81 additions & 80 deletions docs/src/app/app-routes.jsx
Original file line number Diff line number Diff line change
@@ -1,48 +1,49 @@
let React = require('react');
let Router = require('react-router');
let Route = Router.Route;
let Redirect = Router.Redirect;
let DefaultRoute = Router.DefaultRoute;
const React = require('react');
const {
Route,
Redirect,
IndexRoute,
} = require('react-router');

// Here we define all our material-ui ReactComponents.
let Master = require('./components/master');
let Home = require('./components/pages/home');
const Master = require('./components/master');
const Home = require('./components/pages/home');

let GetStarted = require('./components/pages/get-started');
let Prerequisites = require('./components/pages/get-started/prerequisites');
let Installation = require('./components/pages/get-started/installation');
let Examples = require('./components/pages/get-started/examples');
const GetStarted = require('./components/pages/get-started');
const Prerequisites = require('./components/pages/get-started/prerequisites');
const Installation = require('./components/pages/get-started/installation');
const Examples = require('./components/pages/get-started/examples');

let Customization = require('./components/pages/customization');
let Colors = require('./components/pages/customization/colors');
let Themes = require('./components/pages/customization/themes');
let InlineStyles = require('./components/pages/customization/inline-styles');
const Customization = require('./components/pages/customization');
const Colors = require('./components/pages/customization/colors');
const Themes = require('./components/pages/customization/themes');
const InlineStyles = require('./components/pages/customization/inline-styles');

let Components = require('./components/pages/components');
let AppBar = require('./components/pages/components/app-bar');
let Avatars = require('./components/pages/components/avatars');
let Buttons = require('./components/pages/components/buttons');
let Cards = require('./components/pages/components/cards');
let DatePicker = require('./components/pages/components/date-picker');
let Dialog = require('./components/pages/components/dialog');
let DropDownMenu = require('./components/pages/components/drop-down-menu');
let Icons = require('./components/pages/components/icons');
let IconButtons = require('./components/pages/components/icon-buttons');
let IconMenus = require('./components/pages/components/icon-menus');
let LeftNav = require('./components/pages/components/left-nav');
let Lists = require('./components/pages/components/lists');
let Menus = require('./components/pages/components/menus');
let Paper = require('./components/pages/components/paper');
let Progress = require('./components/pages/components/progress');
let RefreshIndicator = require('./components/pages/components/refresh-indicator');
let Sliders = require('./components/pages/components/sliders');
let Snackbar = require('./components/pages/components/snackbar');
let Switches = require('./components/pages/components/switches');
let Table = require('./components/pages/components/table');
let Tabs = require('./components/pages/components/tabs');
let TextFields = require('./components/pages/components/text-fields');
let TimePicker = require('./components/pages/components/time-picker');
let Toolbars = require('./components/pages/components/toolbars');
const Components = require('./components/pages/components');
const AppBar = require('./components/pages/components/app-bar');
const Avatars = require('./components/pages/components/avatars');
const Buttons = require('./components/pages/components/buttons');
const Cards = require('./components/pages/components/cards');
const DatePicker = require('./components/pages/components/date-picker');
const Dialog = require('./components/pages/components/dialog');
const DropDownMenu = require('./components/pages/components/drop-down-menu');
const Icons = require('./components/pages/components/icons');
const IconButtons = require('./components/pages/components/icon-buttons');
const IconMenus = require('./components/pages/components/icon-menus');
const LeftNav = require('./components/pages/components/left-nav');
const Lists = require('./components/pages/components/lists');
const Menus = require('./components/pages/components/menus');
const Paper = require('./components/pages/components/paper');
const Progress = require('./components/pages/components/progress');
const RefreshIndicator = require('./components/pages/components/refresh-indicator');
const Sliders = require('./components/pages/components/sliders');
const Snackbar = require('./components/pages/components/snackbar');
const Switches = require('./components/pages/components/switches');
const Table = require('./components/pages/components/table');
const Tabs = require('./components/pages/components/tabs');
const TextFields = require('./components/pages/components/text-fields');
const TimePicker = require('./components/pages/components/time-picker');
const Toolbars = require('./components/pages/components/toolbars');


/** Routes: https://github.com/rackt/react-router/blob/master/docs/api/components/Route.md
Expand All @@ -54,52 +55,52 @@ let Toolbars = require('./components/pages/components/toolbars');
* handler and its parent handler like so: Paper > Components > Master
*/

let AppRoutes = (
<Route name="root" path="/" handler={Master}>
<Route name="home" handler={Home} />
<Route name="get-started" handler={GetStarted}>
<Route name="prerequisites" handler={Prerequisites} />
<Route name="installation" handler={Installation} />
<Route name="examples" handler={Examples} />
<Redirect from="/get-started" to="prerequisites" />
const AppRoutes = (
<Route path="/" component={Master}>
<Route path="home" component={Home} />
<Route path="get-started" component={GetStarted}>
<Route path="prerequisites" component={Prerequisites} />
<Route path="installation" component={Installation} />
<Route path="examples" component={Examples} />
<Redirect from="/get-started" to="/prerequisites" />
</Route>

<Route name="customization" handler={Customization}>
<Route name="colors" handler={Colors} />
<Route name="themes" handler={Themes} />
<Route name="inline-styles" handler={InlineStyles} />
<Redirect from="/customization" to="themes" />
<Route path="customization" component={Customization}>
<Route path="colors" component={Colors} />
<Route path="themes" component={Themes} />
<Route path="inline-styles" component={InlineStyles} />
<Redirect from="/customization" to="/themes" />
</Route>

<Route name="components" handler={Components}>
<Route name="appbar" handler={AppBar} />
<Route name="avatars" handler={Avatars} />
<Route name="buttons" handler={Buttons} />
<Route name="cards" handler={Cards} />
<Route name="date-picker" handler={DatePicker} />
<Route name="dialog" handler={Dialog} />
<Route name="dropdown-menu" handler={DropDownMenu} />
<Route name="icons" handler={Icons} />
<Route name="icon-buttons" handler={IconButtons} />
<Route name="icon-menus" handler={IconMenus} />
<Route name="left-nav" handler={LeftNav} />
<Route name="lists" handler={Lists} />
<Route name="menus" handler={Menus} />
<Route name="paper" handler={Paper} />
<Route name="progress" handler={Progress} />
<Route name="refresh-indicator" handler={RefreshIndicator} />
<Route name="sliders" handler={Sliders} />
<Route name="switches" handler={Switches} />
<Route name="snackbar" handler={Snackbar} />
<Route name="table" handler={Table} />
<Route name="tabs" handler={Tabs} />
<Route name="text-fields" handler={TextFields} />
<Route name="time-picker" handler={TimePicker} />
<Route name="toolbars" handler={Toolbars} />
<Redirect from="/components" to="appbar" />
<Route name="components" component={Components}>
<Route name="appbar" component={AppBar} />
<Route name="avatars" component={Avatars} />
<Route name="buttons" component={Buttons} />
<Route name="cards" component={Cards} />
<Route name="date-picker" component={DatePicker} />
<Route name="dialog" component={Dialog} />
<Route name="dropdown-menu" component={DropDownMenu} />
<Route name="icons" component={Icons} />
<Route name="icon-buttons" component={IconButtons} />
<Route name="icon-menus" component={IconMenus} />
<Route name="left-nav" component={LeftNav} />
<Route name="lists" component={Lists} />
<Route name="menus" component={Menus} />
<Route name="paper" component={Paper} />
<Route name="progress" component={Progress} />
<Route name="refresh-indicator" component={RefreshIndicator} />
<Route name="sliders" component={Sliders} />
<Route name="switches" component={Switches} />
<Route name="snackbar" component={Snackbar} />
<Route name="table" component={Table} />
<Route name="tabs" component={Tabs} />
<Route name="text-fields" component={TextFields} />
<Route name="time-picker" component={TimePicker} />
<Route name="toolbars" component={Toolbars} />
<Redirect from="/components" to="/appbar" />
</Route>

<DefaultRoute handler={Home}/>
<IndexRoute component={Home}/>
</Route>
);

Expand Down
49 changes: 19 additions & 30 deletions docs/src/app/app.jsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,22 @@
(function () {
const React = require('react');
const ReactDOM = require('react-dom');
const {Router} = require('react-router');
const AppRoutes = require('./app-routes.jsx');
const injectTapEventPlugin = require("react-tap-event-plugin");

let React = require('react'),
Router = require('react-router'),
AppRoutes = require('./app-routes.jsx'),
injectTapEventPlugin = require("react-tap-event-plugin");
//Needed for React Developer Tools
window.React = React;

//Needed for React Developer Tools
window.React = React;
//Needed for onTouchTap
//Can go away when react 1.0 release
//Check this repo:
//https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();

//Needed for onTouchTap
//Can go away when react 1.0 release
//Check this repo:
//https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();

/** Render the main app component. You can read more about the react-router here:
* https://github.com/rackt/react-router/blob/master/docs/guides/overview.md
*/
Router
// Runs the router, similiar to the Router.run method. You can think of it as an
// initializer/constructor method.
.create({
routes: AppRoutes,
scrollBehavior: Router.ScrollToTopBehavior
})
// This is our callback function, whenever the url changes it will be called again.
// Handler: The ReactComponent class that will be rendered
.run(function (Handler) {
React.render(<Handler/>, document.getElementById('app'));
});

})();
/**
* Render the main app component. You can read more about the react-router here:
* https://github.com/rackt/react-router/blob/master/docs/guides/overview.md
*/
ReactDOM.render(<Router>
{AppRoutes}
</Router>, document.getElementById('app'));
2 changes: 1 addition & 1 deletion docs/src/app/components/app-left-nav.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ class AppLeftNav extends React.Component {

for (let i = menuItems.length - 1; i >= 0; i--) {
currentItem = menuItems[i];
if (currentItem.route && this.context.router.isActive(currentItem.route)) return i;
if (currentItem.route && this.props.history.isActive(currentItem.route)) return i;
}
}

Expand Down
25 changes: 12 additions & 13 deletions docs/src/app/components/master.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ const { AppBar,
Tabs,
Paper} = require('material-ui');

const RouteHandler = Router.RouteHandler;
const { Colors, Spacing, Typography } = Styles;
const ThemeManager = Styles.ThemeManager;
const DefaultRawTheme = Styles.LightRawTheme;
Expand Down Expand Up @@ -94,9 +93,9 @@ const Master = React.createClass({
render() {
let styles = this.getStyles();
let title =
this.context.router.isActive('get-started') ? 'Get Started' :
this.context.router.isActive('customization') ? 'Customization' :
this.context.router.isActive('components') ? 'Components' : '';
this.props.history.isActive('get-started') ? 'Get Started' :
this.props.history.isActive('customization') ? 'Customization' :
this.props.history.isActive('components') ? 'Components' : '';

let githubButton = (
<IconButton
Expand All @@ -120,8 +119,8 @@ const Master = React.createClass({
{githubButton}
{this.state.renderTabs ? this._getTabs(): this._getAppBar()}

<RouteHandler />
<AppLeftNav ref="leftNav" />
{this.props.children}
<AppLeftNav ref="leftNav" history={this.props.history} />
<FullWidthSection style={styles.footer}>
<p style={styles.p}>
Hand crafted with love by the engineers at <a style={styles.a} href="http://call-em-all.com">Call-Em-All</a> and our
Expand Down Expand Up @@ -222,21 +221,21 @@ const Master = React.createClass({
},

_getSelectedIndex() {
return this.context.router.isActive('get-started') ? '1' :
this.context.router.isActive('customization') ? '2' :
this.context.router.isActive('components') ? '3' : '0';
return this.props.history.isActive('get-started') ? '1' :
this.props.history.isActive('customization') ? '2' :
this.props.history.isActive('components') ? '3' : '0';
},

_handleTabChange(value, e, tab) {
this.context.router.transitionTo(tab.props.route);
this.props.history.transitionTo(tab.props.route);
this.setState({tabIndex: this._getSelectedIndex()});
},

_getAppBar() {
let title =
this.context.router.isActive('get-started') ? 'Get Started' :
this.context.router.isActive('customization') ? 'Customization' :
this.context.router.isActive('components') ? 'Components' : '';
this.props.history.isActive('get-started') ? 'Get Started' :
this.props.history.isActive('customization') ? 'Customization' :
this.props.history.isActive('components') ? 'Components' : '';

let githubButton = (
<IconButton
Expand Down

0 comments on commit 3654106

Please sign in to comment.