diff --git a/client/app.html b/client/app.html index 1ff625c..8fdce1e 100644 --- a/client/app.html +++ b/client/app.html @@ -1,8 +1,8 @@ - - Example App - - - - \ No newline at end of file + + Example App + + + + diff --git a/client/app/app.js b/client/app/app.js deleted file mode 100644 index f26b136..0000000 --- a/client/app/app.js +++ /dev/null @@ -1,19 +0,0 @@ -/** @jsx React.DOM */ -var React = require("react"); - -var App = React.createClass({ - componentDidMount:function(){ - //componentDidMount only gets called from client side - not on server rendering - console.log("Mounted"); - }, - componentWillMount:function(){ - //componentWillMount is called from client side and server rendering - console.log("Going to Mount"); - }, - render:function(){ - console.log("Render"); - return
Hi Co-Authors!
- } -}); - -module.exports = App; \ No newline at end of file diff --git a/client/app/components/app.js b/client/app/components/app.js new file mode 100644 index 0000000..b986aff --- /dev/null +++ b/client/app/components/app.js @@ -0,0 +1,28 @@ +/** @jsx React.DOM */ + +var React = require("react"); + +var MainHeader = require('./main_header'); + +var App = React.createClass({ + componentDidMount: function () { + //componentDidMount only gets called from client side - not on server rendering + console.log("Mounted"); + }, + componentWillMount: function () { + //componentWillMount is called from client side and server rendering + console.log("Going to Mount"); + }, + render: function () { + return ( +
+ +
+ {this.props.children} +
+
+ ); + } +}); + +module.exports = App; diff --git a/client/app/components/main_header.js b/client/app/components/main_header.js new file mode 100644 index 0000000..ec49a03 --- /dev/null +++ b/client/app/components/main_header.js @@ -0,0 +1,22 @@ +/** @jsx React.DOM */ + +var React = require("react"); + +var MainNav = require('./main_nav'); + +var MainHeader = React.createClass({ + propTypes: { + currentUri: React.PropTypes.string.isRequired + }, + + render:function(){ + return ( +
+

SurveyBuilder

+ +
+ ); + } +}); + +module.exports = MainHeader; diff --git a/client/app/components/main_nav.js b/client/app/components/main_nav.js new file mode 100644 index 0000000..ebc8011 --- /dev/null +++ b/client/app/components/main_nav.js @@ -0,0 +1,36 @@ +/** @jsx React.DOM */ + +var React = require("react/addons"); +var classSet = React.addons.classSet; + +var NAV_ITEMS = { + 'All Surveys': '/', + 'Add Survey': '/add_survey' +}; + +var MainNav = React.createClass({ + propTypes: { + currentUri: React.PropTypes.string.isRequired + }, + + render: function () { + var currentUri = this.props.currentUri; + + var items = Object.keys(NAV_ITEMS).map(function (key, i) { + var uri = NAV_ITEMS[key]; + var className = classSet({ + 'current': uri === currentUri + }); + + return {key}; + }); + + return ( + + ); + } +}); + +module.exports = MainNav; diff --git a/client/client.js b/client/client.js index e5cc1a6..32a9545 100644 --- a/client/client.js +++ b/client/client.js @@ -1,6 +1,6 @@ /** @jsx React.DOM */ -//client entry point - all components should be in separate files, +//client entry point - all components should be in separate files, //this will allow webpack to use hotmodule update later //and allow for server side to include just the app @@ -9,9 +9,9 @@ require('es5-shim/es5-shim'); require('es5-shim/es5-sham'); var React = require('react'); -var App = require('./app/app'); +var App = require('./app/components/app'); React.renderComponent(, document.body); //allow react dev tools work -window.React = React; \ No newline at end of file +window.React = React; diff --git a/client/components/restricted_text_box.jsx b/client/components/restricted_text_box.jsx new file mode 100644 index 0000000..a1b2748 --- /dev/null +++ b/client/components/restricted_text_box.jsx @@ -0,0 +1,75 @@ +/** @jsx React.DOM */ +var React = require('react'); + +var Remaining = React.createClass({ + render: function(){ + var restrictions = this.props.restrictions; + var className = this.props.valid ? 'text-success' : 'text-danger'; + + var wording = {restrictions.length}/{restrictions.maxLength} {pluralize('character', restrictions.length)}; + + if (restrictions.extraRequired > 0) { + wording = need {restrictions.extraRequired} more {pluralize('character', restrictions.extraRequired)} + } + + return ( +
+ {wording} +
+ ); + } +}) + +var RestrictedTextBox = React.createClass({ + render: function(){ + var validClassName = this.validate(this.props.value) ? 'has-success' : 'has-error'; + + return ( +
+