diff --git a/.ackrc b/.ackrc new file mode 100644 index 0000000000..1852bf1287 --- /dev/null +++ b/.ackrc @@ -0,0 +1,6 @@ +--ignore-dir=lib +--ignore-dir=amd +--ignore-dir=docs/assets +--ignore-dir=test-built +--ignore-file=match:test_bundle.js +--ignore-file=match:components.html diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000000..9df53e05d9 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,18 @@ +# EditorConfig is awesome: http://EditorConfig.org + +# top-most EditorConfig file +root = true + +# Unix-style newlines with a newline ending every file +[*] +end_of_line = lf +insert_final_newline = true + +[*.js] +charset = utf-8 +indent_style = space +indent_size = 2 + +[{package.json,.travis.yml}] +indent_style = space +indent_size = 2 diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000000..98191b02e3 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,32 @@ +{ + "env": { + "browser": true, + "node": true + }, + "ecmaFeatures": { + "jsx": true + }, + "parser": "babel-eslint", + "plugins": [ + "react" + ], + "rules": { + "comma-spacing": 1, + "key-spacing": 0, + "no-underscore-dangle": 0, + "no-unused-vars": [1, { "vars": "all", "args": "none" }], + "no-undef": 1, + "no-var": 2, + "quotes": [1, "single", "avoid-escape"], + "react/display-name": 0, + "react/jsx-uses-react": 1, + "react/no-did-mount-set-state": 1, + "react/no-did-update-set-state": 1, + "react/no-multi-comp": 1, + "react/prop-types": 1, + "react/react-in-jsx-scope": 1, + "react/self-closing-comp": 1, + "react/wrap-multilines": 1, + "strict": 0 + } +} diff --git a/.gitignore b/.gitignore index 2844552a01..def3fca632 100644 --- a/.gitignore +++ b/.gitignore @@ -1,16 +1,14 @@ *~ -node_modules .DS_Store npm-debug.log -test_bundle.js -test-built/* -.idea -transpiled/* -docs/*.html -docs/assets/bundle.js -cjs/* -amd/* +node_modules +amd/ +!tools/amd/ +lib/ +!tools/lib/ +dist/ +!tools/dist/ +docs-built/ ie8/bundle.js -lib/* tmp-bower-repo/ tmp-docs-repo/ diff --git a/.jshintrc b/.jshintrc deleted file mode 100644 index c2c20e2903..0000000000 --- a/.jshintrc +++ /dev/null @@ -1,15 +0,0 @@ -{ - "curly": true, - "eqeqeq": true, - "immed": true, - "latedef": true, - "newcap": false, - "noarg": true, - "sub": true, - "undef": true, - "unused": true, - "boss": true, - "eqnull": true, - "node": true, - "esnext": true -} diff --git a/.npmignore b/.npmignore index 67c137bab6..2044f1129f 100644 --- a/.npmignore +++ b/.npmignore @@ -1,11 +1,11 @@ node_modules/ docs/ +docs-built/ test-built/ test/ tools/ .gitignore .travis.yml -Gruntfile.js -karma.ci.js -karma.dev.js -test_bundle.js +karma.conf.js +tmp-docs-repo/ +tmp-bower-repo/ diff --git a/.travis.yml b/.travis.yml index 87f8cd91a5..9ccb608f70 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,3 +1,6 @@ +sudo: false language: node_js node_js: - - "0.10" \ No newline at end of file + - "0.10" + - "0.12" + - "iojs" diff --git a/CHANGELOG.md b/CHANGELOG.md index f09dfb5103..f384052b63 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,53 @@ +v0.19.1 - Thu, 26 Mar 2015 19:37:01 GMT +--------------------------------------- + +- [2b7d235](../../commit/2b7d235) [fixed] Re-added CollapsableNav to public API + + +v0.19.0 - Wed, 25 Mar 2015 21:25:57 GMT +--------------------------------------- + +- [98ee978](../../commit/98ee978) [changed] Source to ES6 using Babel and Webpack + + +v0.18.0 - Tue, 24 Mar 2015 02:56:15 GMT +--------------------------------------- + +- [728c2b0](../../commit/728c2b0) [fixed] docs CodeMirror scroll height too big +- [d282621](../../commit/d282621) [fixed] Split buttons with React 0.13 +- [549da6e](../../commit/549da6e) [added] react-router dependency for docs +- [804c24a](../../commit/804c24a) [added] Support for React 0.13.x +- [4c26075](../../commit/4c26075) [fixed] Build status badge +- [70f8596](../../commit/70f8596) [added] Travis CI Optimization + + +v0.17.0 - Tue, 17 Mar 2015 15:03:27 GMT +--------------------------------------- + +- [4fae871](../../commit/4fae871) [added] CollapsableNav implements bootstrap markup for navbar-collapse +- [befed83](../../commit/befed83) [fixed] All panel-* classes dynamic based on bsStyle prop +- [de6f7dd](../../commit/de6f7dd) [fixed] CollapsableMixin fixed size +- [7cc4747](../../commit/7cc4747) [fixed] Added role="button" to NavItem for aria compliance. +- [3b6ba7a](../../commit/3b6ba7a) [fixed] Col Offset/Pull/Push of zero. Fixes #406 +- [66c439f](../../commit/66c439f) [fixed] OverlayTrigger improvement related to #353 . Helps reduce browser reflows for lots of multiple OverlayTriggers being rendered at once. Before: http://i.imgur.com/e4UZ5l6.png , http://i.imgur.com/Tw39F9t.png After: http://i.imgur.com/bU0f7VY.png + + +v0.16.1 - Tue, 03 Mar 2015 23:04:19 GMT +--------------------------------------- + +- [71ff264](../../commit/71ff264) [added] bsSize prop to Input, supporting input groups + + +v0.16.0 - Fri, 27 Feb 2015 14:01:37 GMT +--------------------------------------- + +- [25b4143](../../commit/25b4143) [fixed] Define toggleNavKey in the propTypes +- [1a4ae1d](../../commit/1a4ae1d) [fixed] Fix rendering Navbar header when toggleNavKey is 0 +- [13f395d](../../commit/13f395d) [added] bsStyle prop support for Modal to set the header color +- [c822837](../../commit/c822837) [removed] non-standard onClick props for ListGroup and ListGroupItem +- [1556e63](../../commit/1556e63) [added] Example for collapsable Navbar in docs. + + v0.15.1 - Tue, 17 Feb 2015 14:30:54 GMT --------------------------------------- @@ -9,4 +59,4 @@ v0.15.0 - Mon, 16 Feb 2015 02:41:59 GMT - [1ef51cb](../../commit/1ef51cb) [added] Changelog generation from commit messages - [13baeaa](../../commit/13baeaa) [added] Release task to push and tag docs and bower repos -- [0193046](../../commit/0193046) [changed] Move built components to lib directory \ No newline at end of file +- [0193046](../../commit/0193046) [changed] Move built components to lib directory diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c08022dbdf..de1309cb80 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -3,10 +3,27 @@ We welcome community support with both pull requests and reporting bugs. Please don't hesitate to jump in. +## Current Issues + +Feel free to tackle any currently open +[issue](https://github.com/react-bootstrap/react-bootstrap/issues). The issues +tagged with "help wanted" are especially open. + ## Tests All commits that fix bugs or add features need a test. +## Code Style + +Please adhere to the current code styling. We have included an `.editorconfig` +at the repo's root to facilitate uniformity regardless of your editor. See the +[editor config site](http://editorconfig.org/) for integration details. + +We use [ESLint](http://eslint.org/) for all JavaScript Linting. There should be +no linting errors and no new warnings for new work. You are welcome to configure +your editor to use ESLint or the `npm test` command will run unit tests and the +linter. + ## Commit Subjects for Public API Changes If your patch **changes the API or fixes a bug** please use one of the following diff --git a/Gruntfile.js b/Gruntfile.js deleted file mode 100644 index 8f06b9affc..0000000000 --- a/Gruntfile.js +++ /dev/null @@ -1,195 +0,0 @@ -module.exports = function (grunt) { - - grunt.initConfig({ - pkg: grunt.file.readJSON('package.json'), - - amdwrap: { - src: { - expand: true, - cwd: 'src/', - src: ['**/*.js'], - dest: 'amd/lib' - }, - transpiled: { - expand: true, - cwd: 'transpiled/', - src: ['**/*.js'], - dest: 'amd/lib' - } - }, - - copy: { - amd: { - files: [ - { - src: ['**/*'], - dest: 'amd/', - cwd: 'tools/amd', - expand: true - }, - { - src: ['.gitignore-template'], - dest: 'amd/', - cwd: 'tools/amd', - expand: true - } - ] - }, - cjs: { - files: [ - { - expand: true, - cwd: 'transpiled/', - src: ['**/*.js'], - dest: 'lib/' - }, - { - expand: true, - cwd: 'src/', - src: ['**/*.js'], - dest: 'lib/' - }, - { - src: ['**/*'], - dest: 'lib/', - cwd: 'tools/cjs', - expand: true - } - ] - }, - options: { - process: function (content, srcpath) { - return grunt.template.process(content); - } - } - }, - - react: { - options: { - harmony: true - }, - src: { - files: [ - { - expand: true, - cwd: 'src', - src: ['**/*.jsx'], - dest: 'transpiled', - ext: '.js' - } - ] - }, - test: { - files: [ - { - expand: true, - cwd: 'test', - src: ['**/*.jsx'], - dest: 'test-built', - ext: '.js' - } - ] - } - }, - - clean: { - transpiled: ['transpiled'], - cjs: ['lib'], - amd: ['amd'], - test: ['test-built'] - }, - - watch: { - all: { - files: [ - 'src/**/*.jsx', - 'src/**/*.js', - 'test/**/*.jsx', - 'test/**/*.js' - ], - tasks: ['build'], - options: { - spawn: false - } - } - }, - - browserify: { - test: { - files: { - 'test_bundle.js': ['test-built/**/*.js'] - }, - options: { - transform: ['envify'], - verbose: true - } - } - }, - - requirejs: { - dev: { - // Options: https://github.com/jrburke/r.js/blob/master/build/example.build.js - options: { - baseUrl: "amd", - paths: { - "react-bootstrap": "./index", - almond: "../tools/vendor/almond" - }, - packages: [ - { name: 'react', location: '../node_modules/react', main: './react' } - ], - include: ["almond", "react-bootstrap"], - exclude: ["react"], - out: "amd/react-bootstrap.js", - cjsTranslate: true, - wrap: { - startFile: "tools/wrap.start", - endFile: "tools/wrap.end" - }, - rawText: { - 'react': 'define({});' - }, - optimize: "none" - } - } - }, - - uglify: { - options: { - banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' - }, - build: { - src: 'amd/<%= pkg.name %>.js', - dest: 'amd/<%= pkg.name %>.min.js' - } - }, - }); - - grunt.loadNpmTasks('grunt-contrib-uglify'); - grunt.loadNpmTasks("grunt-amd-wrap"); - grunt.loadNpmTasks('grunt-react'); - grunt.loadNpmTasks('grunt-contrib-clean'); - grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.loadNpmTasks('grunt-contrib-copy'); - grunt.loadNpmTasks('grunt-browserify'); - grunt.loadNpmTasks('grunt-contrib-requirejs'); - - grunt.registerTask('build', [ - 'clean:amd', - 'clean:cjs', - 'clean:test', - 'react:src', - 'react:test', - 'amdwrap', - 'copy', - 'browserify:test', - 'requirejs:dev', - 'uglify:build', - 'clean:transpiled' - ]); - - require('./tools/release/tasks')(grunt); - - grunt.registerTask('default', ['build']); - -}; diff --git a/README.md b/README.md index 9d8c4ee914..00d869b5ee 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,11 @@ Under active development - APIs will change. ## Docs -A [docs site](http://react-bootstrap.github.io) with live editable examples is a work in progress +See the [documentation](http://react-bootstrap.github.io) with live editable examples. + +### Bootstrap Version + +Currently supports v3.2.0, but v3.3+ support is coming soon. ## Authors @@ -21,11 +25,15 @@ and many [contributors](https://github.com/react-bootstrap/react-bootstrap/graph - [react-router-bootstrap](https://github.com/mtscout6/react-router-bootstrap) - Integration with [react-router](https://github.com/rackt/react-router). -## Contributions +## Local Setup -Yes please! +- Install the dependencies with `npm install` +- Run tests `npm test` +- Run tests in watch mode `npm run test-watch` +- Run the docs site in development mode with `npm run docs`. This will watch + for file changes as you work. Simply refresh the page to see the updates. +- Build with `npm run build` + +## Contributions -- Run `npm install`, `npm run test-watch` to run tests while you develop (however this hides any build errors, you can see these with `grunt build`) -- Add tests for any new or changed functionality -- See [issues](https://github.com/stevoland/react-bootstrap/issues) for some ideas -- Follow existing style +Yes please! See the [contributing guidelines](https://github.com/react-bootstrap/react-bootstrap/blob/master/CONTRIBUTING.md) for details. diff --git a/docs/.gitignore-template b/docs/.gitignore-template deleted file mode 100644 index 43edecbb22..0000000000 --- a/docs/.gitignore-template +++ /dev/null @@ -1,11 +0,0 @@ -*~ -node_modules/ -.DS_Store -npm-debug.log -.idea -examples/ -src/ -build.js -client.js -server.js -package.json diff --git a/docs/README.docs.md b/docs/README.docs.md new file mode 100644 index 0000000000..afb8a84de0 --- /dev/null +++ b/docs/README.docs.md @@ -0,0 +1,10 @@ +# React Bootstrap Documentation Website + +This website is single page app built on +[React](http://facebook.github.io/react/), with styles and structure taken from +the [Bootstrap](http://getbootstrap.com/) docs website. The app is statically +generated to HTML via node and then hosted it by pushing HTML to [GitHub +Pages](http://pages.github.com/). + +Source can be found in the +[react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) repo. diff --git a/docs/README.md b/docs/README.md index deb0b726aa..3d071c5440 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,48 +1,20 @@ # React Bootstrap Documentation Website -This website is single page app built on [React](http://facebook.github.io/react/), with styles and structure taken from the [Bootstrap](http://getbootstrap.com/) docs website. -The app is statically generated to HTML via node and then hosted it by pushing HTML to [GitHub Pages](http://pages.github.com/). +This website is single page app built on +[React](http://facebook.github.io/react/), with styles and structure taken from +the [Bootstrap](http://getbootstrap.com/) docs website. The app is statically +generated to HTML via node and then hosted it by pushing HTML to [GitHub +Pages](http://pages.github.com/). -## Installation +## Development -If you are working on the site, you will want to install and run a local copy of it. +From the repository root run `npm run docs` and navigate your browser to +`http://localhost:4000`. This will start an express base node server with +webpack-dev middleware that will watch your file changes and recompile all the +static assets needed to generate the site. -### Dependencies +## Production -All dependencies are installed with npm, just: - -```sh -$ cd react-bootstrap/docs -$ npm install -``` - -### Instructions - -#### Development - -The site uses React bootstrap components, so first make sure you've installed and built the project (via `grunt`). Then: - -```sh -$ cd react-bootstrap/docs -$ npm start -$ open http://localhost:4000/ -``` - -This will start an express based node server which will generate static html content and the js bundle on request. After making any modifications the server should restart and regenerate any necessary files on the next request. - -#### Production - -This site is statically published on github pages, to do this the static assets need to be generated. - -```sh -$ cd react-bootstrap/docs -$ npm run build -``` - -To test the static files you can use the included express based static file server. - -```sh -$ cd react-bootstrap/docs -$ npm run start-prod -$ open http://localhost:4000/ -``` \ No newline at end of file +This site is statically published on github pages, to do this the static assets +need to be generated. You can simulate a similar experience with `npm run +docs-prod` and navigating your browser to `http://localhost:4000` diff --git a/docs/assets/style.css b/docs/assets/style.css index b80f93c12c..8cde4b9cef 100644 --- a/docs/assets/style.css +++ b/docs/assets/style.css @@ -68,7 +68,7 @@ body { } -.CodeMirror { +.CodeMirror, .CodeMirror-scroll { height: auto; } diff --git a/docs/build.js b/docs/build.js old mode 100755 new mode 100644 index 4252a7c420..9a94cbbc2e --- a/docs/build.js +++ b/docs/build.js @@ -1,13 +1,39 @@ -'use strict'; +import React from 'react'; +import path from 'path'; +import Router from 'react-router'; +import routes from './src/Routes'; +import Root from './src/Root'; +import fsp from 'fs-promise'; +import { exec, spawn } from 'child-process-promise'; -var fs = require('fs'); -var path = require('path'); -var nodejsx = require('node-jsx').install(); -var Root = require('./src/Root'); +const repoRoot = path.resolve(__dirname, '../'); +const docsBuilt = path.join(repoRoot, 'docs-built'); -Root.getPages() - .forEach(function (fileName) { - var RootHTML = Root.renderToString({initialPath: fileName}); +const license = path.join(repoRoot, 'LICENSE'); +const readmeSrc = path.join(__dirname, 'README.docs.md'); +const readmeDest = path.join(docsBuilt, 'README.md'); - fs.writeFileSync(path.join(__dirname, fileName), RootHTML); - }); \ No newline at end of file +export default function BuildDocs() { + console.log('Building: '.cyan + 'docs'.green); + + return exec(`rm -rf ${docsBuilt}`) + .then(() => fsp.mkdir(docsBuilt)) + .then(() => { + let writes = Root + .getPages() + .map(fileName => new Promise((resolve, reject) => { + Router.run(routes, '/' + fileName, Handler => { + let RootHTML = React.renderToString(React.createElement(Handler)); + let write = fsp.writeFile(path.join(docsBuilt, fileName), RootHTML); + resolve(write); + }); + })); + + return Promise.all(writes.concat([ + exec(`webpack --config webpack.docs.js -p --bail`), + exec(`cp ${license} ${docsBuilt}`), + exec(`cp ${readmeSrc} ${readmeDest}`) + ])); + }) + .then(() => console.log('Built: '.cyan + 'docs'.green)); +} diff --git a/docs/client.js b/docs/client.js index 80ebcd9b4e..8d742135ca 100644 --- a/docs/client.js +++ b/docs/client.js @@ -1,9 +1,19 @@ -'use strict'; +import from 'bootstrap/less/bootstrap.less'; +import from 'bootstrap/docs/assets/css/_src/docs.css'; +import from './assets/style.css'; -var React = require('react'); -var Root = require('./src/Root'); +import from './assets/carousel.png'; +import from './assets/logo.png'; +import React from 'react'; +import Router from 'react-router'; +import routes from './src/Routes'; + +// TODO: Move this to Webpack // For React devtools window.React = React; -React.render(React.createFactory(Root)(window.INITIAL_PROPS), document); +Router.run(routes, Router.RefreshLocation, Handler => { + React.render( + React.createElement(Handler, window.INITIAL_PROPS), document); +}); diff --git a/docs/examples/.eslintrc b/docs/examples/.eslintrc new file mode 100644 index 0000000000..558f5a24c4 --- /dev/null +++ b/docs/examples/.eslintrc @@ -0,0 +1,52 @@ +{ + "rules": { + "no-alert": 0, + "react/react-in-jsx-scope": 0 + }, + "globals": { + "mountNode", + "React", + "classSet", + "Accordion", + "Alert", + "Badge", + "Button", + "ButtonGroup", + "ButtonToolbar", + "CollapsableNav", + "CollapsableMixin", + "Carousel", + "CarouselItem", + "Col", + "DropdownButton", + "Glyphicon", + "Grid", + "Input", + "Jumbotron", + "Label", + "ListGroup", + "ListGroupItem", + "Nav", + "Navbar", + "NavItem", + "MenuItem", + "Modal", + "ModalTrigger", + "OverlayTrigger", + "OverlayMixin", + "PageHeader", + "PageItem", + "Pager", + "Panel", + "PanelGroup", + "Popover", + "ProgressBar", + "Row", + "SplitButton", + "TabbedArea", + "Table", + "TabPane", + "Tooltip", + "Well" + } +} diff --git a/docs/examples/AlertAutoDismissable.js b/docs/examples/AlertAutoDismissable.js index bbe0c94105..e2c2aa6537 100644 --- a/docs/examples/AlertAutoDismissable.js +++ b/docs/examples/AlertAutoDismissable.js @@ -1,32 +1,32 @@ -var AlertAutoDismissable = React.createClass({ - getInitialState: function() { +const AlertAutoDismissable = React.createClass({ + getInitialState() { return { alertVisible: false }; }, - render: function() { + render() { if (this.state.alertVisible) { return ( - +

Oh snap! You got an error!

But this will hide after 2 seconds.

 - ); + ); } return ( - ); + ); }, - handleAlertDismiss: function() { + handleAlertDismiss() { this.setState({alertVisible: false}); }, - handleAlertShow: function() { + handleAlertShow() { this.setState({alertVisible: true}); } }); -React.render(, mountNode); \ No newline at end of file +React.render(, mountNode); diff --git a/docs/examples/AlertBasic.js b/docs/examples/AlertBasic.js index 75da80f88c..d760ccdf50 100644 --- a/docs/examples/AlertBasic.js +++ b/docs/examples/AlertBasic.js @@ -1,7 +1,7 @@ -var alertInstance = ( - - Holy guacamole! Best check yo self, you're not looking too good. - - ); +const alertInstance = ( + + Holy guacamole! Best check yo self, you're not looking too good. + +); -React.render(alertInstance, mountNode); \ No newline at end of file +React.render(alertInstance, mountNode); diff --git a/docs/examples/AlertDismissable.js b/docs/examples/AlertDismissable.js index 9ccc0048e1..6c8d7342c3 100644 --- a/docs/examples/AlertDismissable.js +++ b/docs/examples/AlertDismissable.js @@ -1,36 +1,37 @@ -var AlertDismissable = React.createClass({ - getInitialState: function() { +const AlertDismissable = React.createClass({ + getInitialState() { return { alertVisible: true }; }, - render: function() { + render() { if (this.state.alertVisible) { return ( - +

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

- or + + or

- ); + ); } return ( - ); + ); }, - handleAlertDismiss: function() { + handleAlertDismiss() { this.setState({alertVisible: false}); }, - handleAlertShow: function() { + handleAlertShow() { this.setState({alertVisible: true}); } }); -React.render(, mountNode); \ No newline at end of file +React.render(, mountNode); diff --git a/docs/examples/Badge.js b/docs/examples/Badge.js index 751445a75a..5ff6bdf7ea 100644 --- a/docs/examples/Badge.js +++ b/docs/examples/Badge.js @@ -1,5 +1,5 @@ -var badgeInstance = ( +const badgeInstance = (

Badges 42

); -React.render(badgeInstance, mountNode); \ No newline at end of file +React.render(badgeInstance, mountNode); diff --git a/docs/examples/ButtonActive.js b/docs/examples/ButtonActive.js index 224291e870..3faf267ad3 100644 --- a/docs/examples/ButtonActive.js +++ b/docs/examples/ButtonActive.js @@ -1,8 +1,8 @@ -var buttonsInstance = ( - - - - - ); +const buttonsInstance = ( + + + + +); -React.render(buttonsInstance, mountNode); \ No newline at end of file +React.render(buttonsInstance, mountNode); diff --git a/docs/examples/ButtonBlock.js b/docs/examples/ButtonBlock.js index 6ac435eef4..8a222c6c7b 100644 --- a/docs/examples/ButtonBlock.js +++ b/docs/examples/ButtonBlock.js @@ -1,10 +1,10 @@ -var wellStyles = {maxWidth: 400, margin: '0 auto 10px'}; +const wellStyles = {maxWidth: 400, margin: '0 auto 10px'}; -var buttonsInstance = ( -
- - -
- ); +const buttonsInstance = ( +
+ + +
+); -React.render(buttonsInstance, mountNode); \ No newline at end of file +React.render(buttonsInstance, mountNode); diff --git a/docs/examples/ButtonDisabled.js b/docs/examples/ButtonDisabled.js index f7b346d547..b7baf70abc 100644 --- a/docs/examples/ButtonDisabled.js +++ b/docs/examples/ButtonDisabled.js @@ -1,8 +1,8 @@ -var buttonsInstance = ( - - - - - ); +const buttonsInstance = ( + + + + +); -React.render(buttonsInstance, mountNode); \ No newline at end of file +React.render(buttonsInstance, mountNode); diff --git a/docs/examples/ButtonGroupBasic.js b/docs/examples/ButtonGroupBasic.js index 3651d8c5b8..68d0014637 100644 --- a/docs/examples/ButtonGroupBasic.js +++ b/docs/examples/ButtonGroupBasic.js @@ -1,9 +1,9 @@ -var buttonGroupInstance = ( - - - - - - ); +const buttonGroupInstance = ( + + + + + +); -React.render(buttonGroupInstance, mountNode); \ No newline at end of file +React.render(buttonGroupInstance, mountNode); diff --git a/docs/examples/ButtonGroupJustified.js b/docs/examples/ButtonGroupJustified.js index 663cb9fd25..989cf46ddf 100644 --- a/docs/examples/ButtonGroupJustified.js +++ b/docs/examples/ButtonGroupJustified.js @@ -1,12 +1,12 @@ -var buttonGroupInstance = ( - - - - - Dropdown link - Dropdown link - - - ); +const buttonGroupInstance = ( + + + + + Dropdown link + Dropdown link + + +); -React.render(buttonGroupInstance, mountNode); \ No newline at end of file +React.render(buttonGroupInstance, mountNode); diff --git a/docs/examples/ButtonGroupNested.js b/docs/examples/ButtonGroupNested.js index 3f40c20b02..e1a9e1eb9d 100644 --- a/docs/examples/ButtonGroupNested.js +++ b/docs/examples/ButtonGroupNested.js @@ -1,12 +1,12 @@ -var buttonGroupInstance = ( - - - - - Dropdown link - Dropdown link - - - ); +const buttonGroupInstance = ( + + + + + Dropdown link + Dropdown link + + +); -React.render(buttonGroupInstance, mountNode); \ No newline at end of file +React.render(buttonGroupInstance, mountNode); diff --git a/docs/examples/ButtonGroupSizes.js b/docs/examples/ButtonGroupSizes.js index bfe6fe08f6..4377cb3d9c 100644 --- a/docs/examples/ButtonGroupSizes.js +++ b/docs/examples/ButtonGroupSizes.js @@ -1,37 +1,37 @@ -var buttonGroupInstance = ( -
- - - - - - - +const buttonGroupInstance = ( +
+ + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - -
- ); + + + + + + + +
+); -React.render(buttonGroupInstance, mountNode); \ No newline at end of file +React.render(buttonGroupInstance, mountNode); diff --git a/docs/examples/ButtonGroupVertical.js b/docs/examples/ButtonGroupVertical.js index e4055a5533..9453906974 100644 --- a/docs/examples/ButtonGroupVertical.js +++ b/docs/examples/ButtonGroupVertical.js @@ -1,22 +1,22 @@ -var buttonGroupInstance = ( - - - - - Dropdown link - Dropdown link - - - - - Dropdown link - Dropdown link - - - Dropdown link - Dropdown link - - - ); +const buttonGroupInstance = ( + + + + + Dropdown link + Dropdown link + + + + + Dropdown link + Dropdown link + + + Dropdown link + Dropdown link + + +); -React.render(buttonGroupInstance, mountNode); \ No newline at end of file +React.render(buttonGroupInstance, mountNode); diff --git a/docs/examples/ButtonLoading.js b/docs/examples/ButtonLoading.js index 09fca2dc3f..ac7797b0ed 100644 --- a/docs/examples/ButtonLoading.js +++ b/docs/examples/ButtonLoading.js @@ -1,31 +1,31 @@ -var LoadingButton = React.createClass({ - getInitialState: function() { +const LoadingButton = React.createClass({ + getInitialState() { return { isLoading: false }; }, - render: function() { - var isLoading = this.state.isLoading; + render() { + let isLoading = this.state.isLoading; return ( - - ); + + ); }, - handleClick: function() { + handleClick() { this.setState({isLoading: true}); // This probably where you would have an `ajax` call - setTimeout(function() { + setTimeout(() => { // Completed of async action, set loading state back this.setState({isLoading: false}); - }.bind(this), 2000); + }, 2000); } }); diff --git a/docs/examples/ButtonSizes.js b/docs/examples/ButtonSizes.js index 48919286b2..41b18b0d11 100644 --- a/docs/examples/ButtonSizes.js +++ b/docs/examples/ButtonSizes.js @@ -1,22 +1,22 @@ -var buttonsInstance = ( -
- - - - - - - - - - - - - - - - -
- ); +const buttonsInstance = ( +
+ + + + + + + + + + + + + + + + +
+); -React.render(buttonsInstance, mountNode); \ No newline at end of file +React.render(buttonsInstance, mountNode); diff --git a/docs/examples/ButtonTagTypes.js b/docs/examples/ButtonTagTypes.js index b447ee5c6d..8b7b4862a3 100644 --- a/docs/examples/ButtonTagTypes.js +++ b/docs/examples/ButtonTagTypes.js @@ -1,8 +1,8 @@ -var buttonsInstance = ( +const buttonsInstance = ( - + ); -React.render(buttonsInstance, mountNode); \ No newline at end of file +React.render(buttonsInstance, mountNode); diff --git a/docs/examples/ButtonToolbarBasic.js b/docs/examples/ButtonToolbarBasic.js index c5351db625..8e2d828fa9 100644 --- a/docs/examples/ButtonToolbarBasic.js +++ b/docs/examples/ButtonToolbarBasic.js @@ -1,22 +1,22 @@ -var buttonGroupInstance = ( - - - - - - - +const buttonGroupInstance = ( + + + + + + + - - - - - + + + + + - - - - - ); + + + + +); -React.render(buttonGroupInstance, mountNode); \ No newline at end of file +React.render(buttonGroupInstance, mountNode); diff --git a/docs/examples/ButtonTypes.js b/docs/examples/ButtonTypes.js index 35b22d2f49..84839aa31a 100644 --- a/docs/examples/ButtonTypes.js +++ b/docs/examples/ButtonTypes.js @@ -1,26 +1,26 @@ -var buttonsInstance = ( - - {/* Standard button */} - +const buttonsInstance = ( + + {/* Standard button */} + - {/* Provides extra visual weight and identifies the primary action in a set of buttons */} - + {/* Provides extra visual weight and identifies the primary action in a set of buttons */} + - {/* Indicates a successful or positive action */} - + {/* Indicates a successful or positive action */} + - {/* Contextual button for informational alert messages */} - + {/* Contextual button for informational alert messages */} + - {/* Indicates caution should be taken with this action */} - + {/* Indicates caution should be taken with this action */} + - {/* Indicates a dangerous or potentially negative action */} - + {/* Indicates a dangerous or potentially negative action */} + - {/* Deemphasize a button by making it look like a link while maintaining button behavior */} - - - ); + {/* Deemphasize a button by making it look like a link while maintaining button behavior */} + + +); -React.render(buttonsInstance, mountNode); \ No newline at end of file +React.render(buttonsInstance, mountNode); diff --git a/docs/examples/CarouselControlled.js b/docs/examples/CarouselControlled.js index d5a8ac329d..2670a6de3a 100644 --- a/docs/examples/CarouselControlled.js +++ b/docs/examples/CarouselControlled.js @@ -1,41 +1,46 @@ -var index = 0; -var direction = null; +const ControlledCarousel = React.createClass({ + getInitialState() { + return { + index: 0, + direction: null + }; + }, -function renderCarousel () { - var carouselInstance = ( - - - 900x500 -
-

First slide label

-

Nulla vitae elit libero, a pharetra augue mollis interdum.

-
- - - 900x500 -
-

Second slide label

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
- - - 900x500 -
-

Third slide label

-

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

-
- - - ); + handleSelect(selectedIndex, selectedDirection) { + alert('selected=' + selectedIndex + ', direction=' + selectedDirection); + this.setState({ + index: selectedIndex, + direction: selectedDirection + }); + }, - React.render(carouselInstance, mountNode); -} + render() { + return ( + + + 900x500 +
+

First slide label

+

Nulla vitae elit libero, a pharetra augue mollis interdum.

+
+ + + 900x500 +
+

Second slide label

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+ + + 900x500 +
+

Third slide label

+

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

+
+ + + ); + } +}); -function handleSelect (selectedIndex, selectedDirection) { - alert('selected=' + selectedIndex + ', direction=' + selectedDirection); - index = selectedIndex; - direction = selectedDirection; - renderCarousel(); -} - -renderCarousel(); \ No newline at end of file +React.render(, mountNode); diff --git a/docs/examples/CarouselUncontrolled.js b/docs/examples/CarouselUncontrolled.js index d34672eab3..23e5ce60d0 100644 --- a/docs/examples/CarouselUncontrolled.js +++ b/docs/examples/CarouselUncontrolled.js @@ -1,27 +1,27 @@ -var carouselInstance = ( - - - 900x500 -
-

First slide label

-

Nulla vitae elit libero, a pharetra augue mollis interdum.

-
- - - 900x500 -
-

Second slide label

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
- - - 900x500 -
-

Third slide label

-

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

-
- - - ); +const carouselInstance = ( + + + 900x500 +
+

First slide label

+

Nulla vitae elit libero, a pharetra augue mollis interdum.

+
+ + + 900x500 +
+

Second slide label

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+ + + 900x500 +
+

Third slide label

+

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

+
+ + +); -React.render(carouselInstance, mountNode); \ No newline at end of file +React.render(carouselInstance, mountNode); diff --git a/docs/examples/CollapsableNav.js b/docs/examples/CollapsableNav.js new file mode 100644 index 0000000000..87824bb989 --- /dev/null +++ b/docs/examples/CollapsableNav.js @@ -0,0 +1,23 @@ +const navbarInstance = ( + + {/* This is the eventKey referenced */} + + + + +); + +React.render(navbarInstance, mountNode); diff --git a/docs/examples/CollapsableParagraph.js b/docs/examples/CollapsableParagraph.js new file mode 100644 index 0000000000..8ab37508ef --- /dev/null +++ b/docs/examples/CollapsableParagraph.js @@ -0,0 +1,37 @@ +const CollapsableParagraph = React.createClass({ + mixins: [CollapsableMixin], + + getCollapsableDOMNode: function(){ + return this.refs.panel.getDOMNode(); + }, + + getCollapsableDimensionValue: function(){ + return this.refs.panel.getDOMNode().scrollHeight; + }, + + onHandleToggle: function(e){ + e.preventDefault(); + this.setState({expanded:!this.state.expanded}); + }, + + render: function(){ + let styles = this.getCollapsableClassSet(); + let text = this.isExpanded() ? 'Hide' : 'Show'; + return ( +
+ +
+ {this.props.children} +
+
+ ); + } +}); + +const panelInstance = ( + + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + +); + +React.render(panelInstance, mountNode); diff --git a/docs/examples/DropdownButtonBasic.js b/docs/examples/DropdownButtonBasic.js index c35217a85b..66fb3ef4de 100644 --- a/docs/examples/DropdownButtonBasic.js +++ b/docs/examples/DropdownButtonBasic.js @@ -1,19 +1,19 @@ -var BUTTONS = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger', 'Link']; +const BUTTONS = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger', 'Link']; function renderDropdownButton (title, i) { return ( - - Action - Another action - Something else here - - Separated link - - ); + + Action + Another action + Something else here + + Separated link + + ); } -var buttonsInstance = ( - {BUTTONS.map(renderDropdownButton)} - ); +const buttonsInstance = ( + {BUTTONS.map(renderDropdownButton)} +); React.render(buttonsInstance, mountNode); diff --git a/docs/examples/DropdownButtonNoCaret.js b/docs/examples/DropdownButtonNoCaret.js index 23327bf0b5..381127b542 100644 --- a/docs/examples/DropdownButtonNoCaret.js +++ b/docs/examples/DropdownButtonNoCaret.js @@ -1,13 +1,13 @@ -var buttonInstance = ( - - - Action - Another action - Something else here - - Separated link - - - ); +const buttonInstance = ( + + + Action + Another action + Something else here + + Separated link + + +); -React.render(buttonInstance, mountNode); \ No newline at end of file +React.render(buttonInstance, mountNode); diff --git a/docs/examples/DropdownButtonSizes.js b/docs/examples/DropdownButtonSizes.js index 4298e8de5a..9aeb15920d 100644 --- a/docs/examples/DropdownButtonSizes.js +++ b/docs/examples/DropdownButtonSizes.js @@ -1,35 +1,35 @@ -var buttonsInstance = ( -
- - - Action - Another action - Something else here - - Separated link - - +const buttonsInstance = ( +
+ + + Action + Another action + Something else here + + Separated link + + - - - Action - Another action - Something else here - - Separated link - - + + + Action + Another action + Something else here + + Separated link + + - - - Action - Another action - Something else here - - Separated link - - -
- ); + + + Action + Another action + Something else here + + Separated link + + +
+); -React.render(buttonsInstance, mountNode); \ No newline at end of file +React.render(buttonsInstance, mountNode); diff --git a/docs/examples/Glyphicon.js b/docs/examples/Glyphicon.js index 0736a35f69..cc0d3fa2ce 100644 --- a/docs/examples/Glyphicon.js +++ b/docs/examples/Glyphicon.js @@ -1,22 +1,22 @@ -var glyphInstance = ( +const glyphInstance = (
- - - - + + + + - - - - + + + +
); -React.render(glyphInstance, mountNode); \ No newline at end of file +React.render(glyphInstance, mountNode); diff --git a/docs/examples/GridBasic.js b/docs/examples/GridBasic.js index 4931b5c581..6f6f063234 100644 --- a/docs/examples/GridBasic.js +++ b/docs/examples/GridBasic.js @@ -1,25 +1,25 @@ -var navInstance = ( - - - <{'Col xs={12} md={8}'} /> - <{'Col xs={6} md={4}'} /> - +const navInstance = ( + + + <{'Col xs={12} md={8}'} /> + <{'Col xs={6} md={4}'} /> + - - <{'Col xs={6} md={4}'} /> - <{'Col xs={6} md={4}'} /> - <{'Col xs={6} md={4}'} /> - + + <{'Col xs={6} md={4}'} /> + <{'Col xs={6} md={4}'} /> + <{'Col xs={6} md={4}'} /> + - - <{'Col xs={6} xsOffset={6}'} /> - + + <{'Col xs={6} xsOffset={6}'} /> + - - <{'Col md={6} mdPush={6}'} /> - <{'Col md={6} mdPull={6}'} /> - - - ); + + <{'Col md={6} mdPush={6}'} /> + <{'Col md={6} mdPull={6}'} /> + + +); -React.render(navInstance, mountNode); \ No newline at end of file +React.render(navInstance, mountNode); diff --git a/docs/examples/Input.js b/docs/examples/Input.js index 2218bf0a21..b9c4437ff8 100644 --- a/docs/examples/Input.js +++ b/docs/examples/Input.js @@ -1,18 +1,18 @@ -var ExampleInput = React.createClass({ - getInitialState: function() { +const ExampleInput = React.createClass({ + getInitialState() { return { value: '' }; }, - validationState: function() { - var length = this.state.value.length; - if (length > 10) return 'success'; - else if (length > 5) return 'warning'; - else if (length > 0) return 'error'; + validationState() { + let length = this.state.value.length; + if (length > 10) { return 'success'; } + else if (length > 5) { return 'warning'; } + else if (length > 0) { return 'error'; } }, - handleChange: function() { + handleChange() { // This could also be done using ReactLink: // http://facebook.github.io/react/docs/two-way-binding-helpers.html this.setState({ @@ -20,21 +20,21 @@ var ExampleInput = React.createClass({ }); }, - render: function() { + render() { return ( - + ); } }); diff --git a/docs/examples/InputAddons.js b/docs/examples/InputAddons.js index 80de4379d9..4f93eb59ab 100644 --- a/docs/examples/InputAddons.js +++ b/docs/examples/InputAddons.js @@ -1,14 +1,20 @@ -var inputAddonsInstance = ( -
- - - - } /> - Before} /> - - Item - } /> -
- ); +const innerGlyphicon = ; +const innerButton = ; +const innerDropdown = ( + + Item + +); + +const inputAddonsInstance = ( +
+ + + + + + +
+); React.render(inputAddonsInstance, mountNode); diff --git a/docs/examples/InputHorizontal.js b/docs/examples/InputHorizontal.js index 53086147cf..80ef6627b0 100644 --- a/docs/examples/InputHorizontal.js +++ b/docs/examples/InputHorizontal.js @@ -1,9 +1,9 @@ -var inputHorizontalInstance = ( -
- - - -
- ); +const inputHorizontalInstance = ( +
+ + + +
+); React.render(inputHorizontalInstance, mountNode); diff --git a/docs/examples/InputTypes.js b/docs/examples/InputTypes.js index edb6dca7f9..965c6623c1 100644 --- a/docs/examples/InputTypes.js +++ b/docs/examples/InputTypes.js @@ -1,23 +1,23 @@ -var inputTypeInstance = ( -
- - - - - - - - - - - - - - - - - -
- ); +const inputTypeInstance = ( +
+ + + + + + + + + + + + + + + + + +
+); React.render(inputTypeInstance, mountNode); diff --git a/docs/examples/InputValidation.js b/docs/examples/InputValidation.js index 1781645a94..9ec927ba47 100644 --- a/docs/examples/InputValidation.js +++ b/docs/examples/InputValidation.js @@ -1,9 +1,9 @@ -var inputValidationInstance = ( -
- - - -
- ); +const inputValidationInstance = ( +
+ + + +
+); React.render(inputValidationInstance, mountNode); diff --git a/docs/examples/InputWrapper.js b/docs/examples/InputWrapper.js index 57fa0039bc..ba305b2e55 100644 --- a/docs/examples/InputWrapper.js +++ b/docs/examples/InputWrapper.js @@ -1,14 +1,14 @@ -var inputWrapperInstance = ( - - - - - - - - - - - ); +const inputWrapperInstance = ( + + + + + + + + + + +); React.render(inputWrapperInstance, mountNode); diff --git a/docs/examples/Jumbotron.js b/docs/examples/Jumbotron.js index e1dc5e3403..05f74d694f 100644 --- a/docs/examples/Jumbotron.js +++ b/docs/examples/Jumbotron.js @@ -1,9 +1,9 @@ -var jumbotronInstance = ( +const jumbotronInstance = (

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

-

+

- ); +); -React.render(jumbotronInstance, mountNode); \ No newline at end of file +React.render(jumbotronInstance, mountNode); diff --git a/docs/examples/Label.js b/docs/examples/Label.js index f949938fc3..5828481984 100644 --- a/docs/examples/Label.js +++ b/docs/examples/Label.js @@ -1,4 +1,4 @@ -var labelInstance = ( +const labelInstance = (

Label

Label

@@ -9,4 +9,4 @@ var labelInstance = (
); -React.render(labelInstance, mountNode); \ No newline at end of file +React.render(labelInstance, mountNode); diff --git a/docs/examples/LabelVariations.js b/docs/examples/LabelVariations.js index a8e8896a5f..5cf2b5b888 100644 --- a/docs/examples/LabelVariations.js +++ b/docs/examples/LabelVariations.js @@ -1,12 +1,12 @@ -var labelVariationInstance = ( +const labelVariationInstance = (
- - - - - - +   +   +   +   +   +
- ); +); -React.render(labelVariationInstance, mountNode); \ No newline at end of file +React.render(labelVariationInstance, mountNode); diff --git a/docs/examples/ListGroupActive.js b/docs/examples/ListGroupActive.js index 3e8e85abcc..f9442f9af6 100644 --- a/docs/examples/ListGroupActive.js +++ b/docs/examples/ListGroupActive.js @@ -1,9 +1,9 @@ -var listgroupInstance = ( - - Link 1 - Link 2 - Link 3 - - ); +const listgroupInstance = ( + + Link 1 + Link 2 + Link 3 + +); React.render(listgroupInstance, mountNode); diff --git a/docs/examples/ListGroupDefault.js b/docs/examples/ListGroupDefault.js index 0d0477876f..d4fa198608 100644 --- a/docs/examples/ListGroupDefault.js +++ b/docs/examples/ListGroupDefault.js @@ -1,9 +1,9 @@ -var listgroupInstance = ( - - Item 1 - Item 2 - ... - - ); +const listgroupInstance = ( + + Item 1 + Item 2 + ... + +); React.render(listgroupInstance, mountNode); diff --git a/docs/examples/ListGroupHeader.js b/docs/examples/ListGroupHeader.js index 8751ec6140..fc2861a4ea 100644 --- a/docs/examples/ListGroupHeader.js +++ b/docs/examples/ListGroupHeader.js @@ -1,9 +1,9 @@ -var listgroupInstance = ( - - Some body text - Linked item - Danger styling - - ); +const listgroupInstance = ( + + Some body text + Linked item + Danger styling + +); React.render(listgroupInstance, mountNode); diff --git a/docs/examples/ListGroupLinked.js b/docs/examples/ListGroupLinked.js index c67e087364..794795c0bb 100644 --- a/docs/examples/ListGroupLinked.js +++ b/docs/examples/ListGroupLinked.js @@ -1,9 +1,9 @@ -var listgroupInstance = ( - - Link 1 - Link 2 - ... - - ); +const listgroupInstance = ( + + Link 1 + Link 2 + ... + +); React.render(listgroupInstance, mountNode); diff --git a/docs/examples/ListGroupStyle.js b/docs/examples/ListGroupStyle.js index a67e7b2f7f..4dc7351088 100644 --- a/docs/examples/ListGroupStyle.js +++ b/docs/examples/ListGroupStyle.js @@ -1,10 +1,10 @@ -var listgroupInstance = ( - - Success - Info - Warning - Danger - - ); +const listgroupInstance = ( + + Success + Info + Warning + Danger + +); React.render(listgroupInstance, mountNode); diff --git a/docs/examples/ModalContained.js b/docs/examples/ModalContained.js index a0df7aeb4b..316b170d60 100644 --- a/docs/examples/ModalContained.js +++ b/docs/examples/ModalContained.js @@ -9,15 +9,14 @@ * } */ - -var ContainedModal = React.createClass({ - render: function() { +const ContainedModal = React.createClass({ + render() { return ( - -
+ +
Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
-
+
@@ -25,12 +24,12 @@ var ContainedModal = React.createClass({ } }); -var Trigger = React.createClass({ - render: function() { +const Trigger = React.createClass({ + render() { return (
} container={this}> - +
); diff --git a/docs/examples/ModalOverlayMixin.js b/docs/examples/ModalOverlayMixin.js index 0727fe9ca9..09856deddb 100644 --- a/docs/examples/ModalOverlayMixin.js +++ b/docs/examples/ModalOverlayMixin.js @@ -1,43 +1,43 @@ // Our custom component is managing whether the Modal is visible -var CustomModalTrigger = React.createClass({ +const CustomModalTrigger = React.createClass({ mixins: [OverlayMixin], - getInitialState: function () { + getInitialState() { return { isModalOpen: false }; }, - handleToggle: function () { + handleToggle() { this.setState({ isModalOpen: !this.state.isModalOpen }); }, - render: function () { + render() { return ( - + ); }, // This is called by the `OverlayMixin` when this component // is mounted or updated and the return value is appended to the body. - renderOverlay: function () { + renderOverlay() { if (!this.state.isModalOpen) { return ; } return ( - -
- This modal is controlled by our custom trigger component. -
-
- -
- - ); + +
+ This modal is controlled by our custom trigger component. +
+
+ +
+ + ); } }); -React.render(, mountNode); \ No newline at end of file +React.render(, mountNode); diff --git a/docs/examples/ModalStatic.js b/docs/examples/ModalStatic.js index 5674990cb9..d5b12b91b0 100644 --- a/docs/examples/ModalStatic.js +++ b/docs/examples/ModalStatic.js @@ -1,23 +1,24 @@ function handleHide() { - alert('Close me!') + alert('Close me!'); } -var modalInstance = ( -
- -
- One fine body... -
-
- - -
- -
- ); +const modalInstance = ( +
+ +
+ One fine body... +
+
+ + +
+ +
+); React.render(modalInstance, mountNode); diff --git a/docs/examples/ModalTrigger.js b/docs/examples/ModalTrigger.js index 179eaa9e99..c1d0f8a8c0 100644 --- a/docs/examples/ModalTrigger.js +++ b/docs/examples/ModalTrigger.js @@ -1,42 +1,42 @@ -var MyModal = React.createClass({ - render: function() { +const MyModal = React.createClass({ + render() { return ( - -
-

Text in a modal

-

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

+ +
+

Text in a modal

+

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

-

Popover in a modal

-

TODO

+

Popover in a modal

+

TODO

-

Tooltips in a modal

-

TODO

+

Tooltips in a modal

+

TODO

-
+
-

Overflowing text to show scroll behavior

-

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

-

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

-

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

-

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

-

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

-

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

-

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

-

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

-

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

-
-
- -
- - ); +

Overflowing text to show scroll behavior

+

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

+

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

+

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

+

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

+

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

+

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

+

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

+

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

+

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

+
+
+ +
+ + ); } }); -var overlayTriggerInstance = ( - }> - - - ); +const overlayTriggerInstance = ( + }> + + +); -React.render(overlayTriggerInstance, mountNode); \ No newline at end of file +React.render(overlayTriggerInstance, mountNode); diff --git a/docs/examples/NavBasic.js b/docs/examples/NavBasic.js index b3f49f0d8a..7be936f6e4 100644 --- a/docs/examples/NavBasic.js +++ b/docs/examples/NavBasic.js @@ -2,12 +2,12 @@ function handleSelect (selectedKey) { alert('selected ' + selectedKey); } -var navInstance = ( - - ); +const navInstance = ( + +); React.render(navInstance, mountNode); diff --git a/docs/examples/NavDropdown.js b/docs/examples/NavDropdown.js index e9e09259ab..7bdaa9e05a 100644 --- a/docs/examples/NavDropdown.js +++ b/docs/examples/NavDropdown.js @@ -1,20 +1,24 @@ -function handleSelect (selectedKey) { - alert('selected ' + selectedKey); -} +const NavDropdown = React.createClass({ + handleSelect(selectedKey) { + alert('selected ' + selectedKey); + }, -var navInstance = ( - - ); + render() { + return ( + + ); + } +}); -React.render(navInstance, mountNode); +React.render(, mountNode); diff --git a/docs/examples/NavJustified.js b/docs/examples/NavJustified.js index e44f580231..7478e89515 100644 --- a/docs/examples/NavJustified.js +++ b/docs/examples/NavJustified.js @@ -1,21 +1,25 @@ -function handleSelect (selectedKey) { - alert('selected ' + selectedKey); -} +const NavJustified = React.createClass({ + handleSelect(selectedKey) { + alert('selected ' + selectedKey); + }, -var navInstance = ( -
- -
- -
- ); + render() { + return ( +
+ +
+ +
+ ); + } +}); -React.render(navInstance, mountNode); +React.render(, mountNode); diff --git a/docs/examples/NavStacked.js b/docs/examples/NavStacked.js index dabace3084..3f8b615cd4 100644 --- a/docs/examples/NavStacked.js +++ b/docs/examples/NavStacked.js @@ -2,12 +2,12 @@ function handleSelect (selectedKey) { alert('selected ' + selectedKey); } -var navInstance = ( - - ); +const navInstance = ( + +); React.render(navInstance, mountNode); diff --git a/docs/examples/NavbarBasic.js b/docs/examples/NavbarBasic.js index a8899ddbd6..756b6634b7 100644 --- a/docs/examples/NavbarBasic.js +++ b/docs/examples/NavbarBasic.js @@ -1,17 +1,17 @@ -var navbarInstance = ( - - - - ); +const navbarInstance = ( + + + +); -React.render(navbarInstance, mountNode); \ No newline at end of file +React.render(navbarInstance, mountNode); diff --git a/docs/examples/NavbarCollapsable.js b/docs/examples/NavbarCollapsable.js new file mode 100644 index 0000000000..35b9564cf1 --- /dev/null +++ b/docs/examples/NavbarCollapsable.js @@ -0,0 +1,17 @@ +const navbarInstance = ( + + + +); + +React.render(navbarInstance, mountNode); diff --git a/docs/examples/PageHeader.js b/docs/examples/PageHeader.js index 1063020db3..243d829e46 100644 --- a/docs/examples/PageHeader.js +++ b/docs/examples/PageHeader.js @@ -1,5 +1,5 @@ -var pageHeaderInstance = ( +const pageHeaderInstance = ( Example page header Subtext for header ); -React.render(pageHeaderInstance, mountNode); \ No newline at end of file +React.render(pageHeaderInstance, mountNode); diff --git a/docs/examples/PagerAligned.js b/docs/examples/PagerAligned.js index 7f1220b128..baac751b20 100644 --- a/docs/examples/PagerAligned.js +++ b/docs/examples/PagerAligned.js @@ -1,8 +1,8 @@ -var pagerInstance = ( - - ← Previous Page - Next Page → - - ); +const pagerInstance = ( + + ← Previous Page + Next Page → + +); -React.render(pagerInstance, mountNode); \ No newline at end of file +React.render(pagerInstance, mountNode); diff --git a/docs/examples/PagerDefault.js b/docs/examples/PagerDefault.js index cab4455a49..b1e1929461 100644 --- a/docs/examples/PagerDefault.js +++ b/docs/examples/PagerDefault.js @@ -1,8 +1,8 @@ -var pagerInstance = ( - - Previous - Next - - ); +const pagerInstance = ( + + Previous + Next + +); -React.render(pagerInstance, mountNode); \ No newline at end of file +React.render(pagerInstance, mountNode); diff --git a/docs/examples/PagerDisabled.js b/docs/examples/PagerDisabled.js index d9debe9730..8d9ba74085 100644 --- a/docs/examples/PagerDisabled.js +++ b/docs/examples/PagerDisabled.js @@ -1,8 +1,8 @@ -var pagerInstance = ( - - ← Previous - Next → - - ); +const pagerInstance = ( + + ← Previous + Next → + +); -React.render(pagerInstance, mountNode); \ No newline at end of file +React.render(pagerInstance, mountNode); diff --git a/docs/examples/PanelBasic.js b/docs/examples/PanelBasic.js index e8364e3b42..7b94f28c10 100644 --- a/docs/examples/PanelBasic.js +++ b/docs/examples/PanelBasic.js @@ -1,7 +1,7 @@ -var panelInstance = ( - - Basic panel example - - ); +const panelInstance = ( + + Basic panel example + +); -React.render(panelInstance, mountNode); \ No newline at end of file +React.render(panelInstance, mountNode); diff --git a/docs/examples/PanelContextual.js b/docs/examples/PanelContextual.js index d69b2e72af..f404a17836 100644 --- a/docs/examples/PanelContextual.js +++ b/docs/examples/PanelContextual.js @@ -1,33 +1,33 @@ -var title = ( -

Panel title

- ); +const title = ( +

Panel title

+); -var panelsInstance = ( -
- - Panel content - +const panelsInstance = ( +
+ + Panel content + - - Panel content - + + Panel content + - - Panel content - + + Panel content + - - Panel content - + + Panel content + - - Panel content - + + Panel content + - - Panel content - -
- ); + + Panel content + +
+); -React.render(panelsInstance, mountNode); \ No newline at end of file +React.render(panelsInstance, mountNode); diff --git a/docs/examples/PanelGroupAccordion.js b/docs/examples/PanelGroupAccordion.js index 468bab033d..74ecc70e84 100644 --- a/docs/examples/PanelGroupAccordion.js +++ b/docs/examples/PanelGroupAccordion.js @@ -1,15 +1,15 @@ -var accordionInstance = ( +const accordionInstance = ( - + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. - + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. - + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. ); -React.render(accordionInstance, mountNode); \ No newline at end of file +React.render(accordionInstance, mountNode); diff --git a/docs/examples/PanelGroupControlled.js b/docs/examples/PanelGroupControlled.js index 73a94ae7d0..054b52176d 100644 --- a/docs/examples/PanelGroupControlled.js +++ b/docs/examples/PanelGroupControlled.js @@ -1,16 +1,22 @@ -var renderedInstance; +const ControlledPanelGroup = React.createClass({ + getInitialState() { + return { + activeKey: 1 + }; + }, -function handleSelect (selectedKey) { - renderedInstance.setProps({ - activeKey: selectedKey - }); -} + handleSelect(activeKey) { + this.setState({ activeKey }); + }, -var panelGroupInstance = ( - - Panel 1 content - Panel 2 content - -); + render() { + return ( + + Panel 1 content + Panel 2 content + + ); + } +}); -renderedInstance = React.render(panelGroupInstance, mountNode); \ No newline at end of file +React.render(, mountNode); diff --git a/docs/examples/PanelGroupUncontrolled.js b/docs/examples/PanelGroupUncontrolled.js index abb0e0d5f0..6513d22d33 100644 --- a/docs/examples/PanelGroupUncontrolled.js +++ b/docs/examples/PanelGroupUncontrolled.js @@ -1,8 +1,8 @@ -var panelGroupInstance = ( +const panelGroupInstance = ( - Panel 1 content - Panel 2 content + Panel 1 content + Panel 2 content ); -React.render(panelGroupInstance, mountNode); \ No newline at end of file +React.render(panelGroupInstance, mountNode); diff --git a/docs/examples/PanelListGroupFill.js b/docs/examples/PanelListGroupFill.js index cda253fb33..20cd1f2104 100644 --- a/docs/examples/PanelListGroupFill.js +++ b/docs/examples/PanelListGroupFill.js @@ -1,13 +1,13 @@ -var panelInstance = ( - - Some default panel content here. - - Item 1 - Item 2 - … - - Some more panel content here. - - ); +const panelInstance = ( + + Some default panel content here. + + Item 1 + Item 2 + … + + Some more panel content here. + +); React.render(panelInstance, mountNode); diff --git a/docs/examples/PanelWithFooter.js b/docs/examples/PanelWithFooter.js index 2ae3dd6b6e..642fc991f2 100644 --- a/docs/examples/PanelWithFooter.js +++ b/docs/examples/PanelWithFooter.js @@ -1,7 +1,7 @@ -var panelInstance = ( - - Panel content - - ); +const panelInstance = ( + + Panel content + +); -React.render(panelInstance, mountNode); \ No newline at end of file +React.render(panelInstance, mountNode); diff --git a/docs/examples/PanelWithHeading.js b/docs/examples/PanelWithHeading.js index 1422797b23..62cd89fb1c 100644 --- a/docs/examples/PanelWithHeading.js +++ b/docs/examples/PanelWithHeading.js @@ -1,16 +1,16 @@ -var title = ( -

Panel title

- ); +const title = ( +

Panel title

+); -var panelsInstance = ( -
- - Panel content - - - Panel content - -
- ); +const panelsInstance = ( +
+ + Panel content + + + Panel content + +
+); -React.render(panelsInstance, mountNode); \ No newline at end of file +React.render(panelsInstance, mountNode); diff --git a/docs/examples/PopoverBasic.js b/docs/examples/PopoverBasic.js index 0d9178add1..919f68be6f 100644 --- a/docs/examples/PopoverBasic.js +++ b/docs/examples/PopoverBasic.js @@ -1,11 +1,9 @@ -var holderStyle = {height: 120}; +const popoverInstance = ( +
+ + And here's some amazing content. It's very engaging. right? + +
+); -var popoverInstance = ( -
- - And here's some amazing content. It's very engaging. right? - -
- ); - -React.render(popoverInstance, mountNode); \ No newline at end of file +React.render(popoverInstance, mountNode); diff --git a/docs/examples/PopoverPositioned.js b/docs/examples/PopoverPositioned.js index 2eee7eb9dc..a7cad7571b 100644 --- a/docs/examples/PopoverPositioned.js +++ b/docs/examples/PopoverPositioned.js @@ -1,18 +1,18 @@ -var positionerInstance = ( - - Holy guacamole! Check this info.}> - - - Holy guacamole! Check this info.}> - - - Holy guacamole! Check this info.}> - - - Holy guacamole! Check this info.}> - - - - ); +const positionerInstance = ( + + Holy guacamole! Check this info.}> + + + Holy guacamole! Check this info.}> + + + Holy guacamole! Check this info.}> + + + Holy guacamole! Check this info.}> + + + +); -React.render(positionerInstance, mountNode); \ No newline at end of file +React.render(positionerInstance, mountNode); diff --git a/docs/examples/PopoverPositionedContained.js b/docs/examples/PopoverPositionedContained.js index 5e8c3a8143..beabf48d5c 100644 --- a/docs/examples/PopoverPositionedContained.js +++ b/docs/examples/PopoverPositionedContained.js @@ -1,18 +1,18 @@ -var positionerInstance = ( - - Holy guacamole! Check this info.}> - - - Holy guacamole! Check this info.}> - - - Holy guacamole! Check this info.}> - - - Holy guacamole! Check this info.}> - - - - ); +const positionerInstance = ( + + Holy guacamole! Check this info.}> + + + Holy guacamole! Check this info.}> + + + Holy guacamole! Check this info.}> + + + Holy guacamole! Check this info.}> + + + +); -React.render(positionerInstance, mountNode); \ No newline at end of file +React.render(positionerInstance, mountNode); diff --git a/docs/examples/ProgressBarAnimated.js b/docs/examples/ProgressBarAnimated.js index 8796d212e1..0f37928087 100644 --- a/docs/examples/ProgressBarAnimated.js +++ b/docs/examples/ProgressBarAnimated.js @@ -1,5 +1,5 @@ -var progressInstance = ( - - ); +const progressInstance = ( + +); -React.render(progressInstance, mountNode); \ No newline at end of file +React.render(progressInstance, mountNode); diff --git a/docs/examples/ProgressBarBasic.js b/docs/examples/ProgressBarBasic.js index 0679319c6e..e99d1f2580 100644 --- a/docs/examples/ProgressBarBasic.js +++ b/docs/examples/ProgressBarBasic.js @@ -1,5 +1,5 @@ -var progressInstance = ( - - ); +const progressInstance = ( + +); -React.render(progressInstance, mountNode); \ No newline at end of file +React.render(progressInstance, mountNode); diff --git a/docs/examples/ProgressBarContextual.js b/docs/examples/ProgressBarContextual.js index d9624cca1a..dd6e73f382 100644 --- a/docs/examples/ProgressBarContextual.js +++ b/docs/examples/ProgressBarContextual.js @@ -1,10 +1,10 @@ -var progressInstance = ( -
- - - - -
- ); +const progressInstance = ( +
+ + + + +
+); -React.render(progressInstance, mountNode); \ No newline at end of file +React.render(progressInstance, mountNode); diff --git a/docs/examples/ProgressBarScreenreaderLabel.js b/docs/examples/ProgressBarScreenreaderLabel.js index ac58b9b793..598cb08608 100644 --- a/docs/examples/ProgressBarScreenreaderLabel.js +++ b/docs/examples/ProgressBarScreenreaderLabel.js @@ -1,5 +1,5 @@ -var progressInstance = ( - - ); +const progressInstance = ( + +); -React.render(progressInstance, mountNode); \ No newline at end of file +React.render(progressInstance, mountNode); diff --git a/docs/examples/ProgressBarStacked.js b/docs/examples/ProgressBarStacked.js index b7d474f87f..0da3b2abc1 100644 --- a/docs/examples/ProgressBarStacked.js +++ b/docs/examples/ProgressBarStacked.js @@ -1,9 +1,9 @@ -var progressInstance = ( - - - - - - ); +const progressInstance = ( + + + + + +); -React.render(progressInstance, mountNode); \ No newline at end of file +React.render(progressInstance, mountNode); diff --git a/docs/examples/ProgressBarStriped.js b/docs/examples/ProgressBarStriped.js index ee32b96ff7..b3d93c46d8 100644 --- a/docs/examples/ProgressBarStriped.js +++ b/docs/examples/ProgressBarStriped.js @@ -1,10 +1,10 @@ -var progressInstance = ( -
- - - - -
- ); +const progressInstance = ( +
+ + + + +
+); -React.render(progressInstance, mountNode); \ No newline at end of file +React.render(progressInstance, mountNode); diff --git a/docs/examples/ProgressBarWithLabel.js b/docs/examples/ProgressBarWithLabel.js index 487cb33cc4..65be52045f 100644 --- a/docs/examples/ProgressBarWithLabel.js +++ b/docs/examples/ProgressBarWithLabel.js @@ -1,5 +1,5 @@ -var progressInstance = ( - - ); +const progressInstance = ( + +); -React.render(progressInstance, mountNode); \ No newline at end of file +React.render(progressInstance, mountNode); diff --git a/docs/examples/SplitButtonBasic.js b/docs/examples/SplitButtonBasic.js index 84fe13edd6..4507b39a6a 100644 --- a/docs/examples/SplitButtonBasic.js +++ b/docs/examples/SplitButtonBasic.js @@ -1,19 +1,19 @@ -var BUTTONS = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger']; +const BUTTONS = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger']; function renderDropdownButton (title, i) { return ( - - Action - Another action - Something else here - - Separated link - - ); + + Action + Another action + Something else here + + Separated link + + ); } -var buttonsInstance = ( - {BUTTONS.map(renderDropdownButton)} - ); +const buttonsInstance = ( + {BUTTONS.map(renderDropdownButton)} +); React.render(buttonsInstance, mountNode); diff --git a/docs/examples/SplitButtonDropup.js b/docs/examples/SplitButtonDropup.js index 95a6a5f960..abfe5cfe0f 100644 --- a/docs/examples/SplitButtonDropup.js +++ b/docs/examples/SplitButtonDropup.js @@ -1,25 +1,25 @@ -var buttonsInstance = ( -
- - - Action - Another action - Something else here - - Separated link - - +const buttonsInstance = ( +
+ + + Action + Another action + Something else here + + Separated link + + - - - Action - Another action - Something else here - - Separated link - - -
- ); + + + Action + Another action + Something else here + + Separated link + + +
+); -React.render(buttonsInstance, mountNode); \ No newline at end of file +React.render(buttonsInstance, mountNode); diff --git a/docs/examples/SplitButtonRight.js b/docs/examples/SplitButtonRight.js index b3dabc3f0f..b9254720a5 100644 --- a/docs/examples/SplitButtonRight.js +++ b/docs/examples/SplitButtonRight.js @@ -1,11 +1,11 @@ -var buttonsInstance = ( - - Action - Another action - Something else here - - Separated link - - ); +const buttonsInstance = ( + + Action + Another action + Something else here + + Separated link + +); -React.render(buttonsInstance, mountNode); \ No newline at end of file +React.render(buttonsInstance, mountNode); diff --git a/docs/examples/TabbedAreaControlled.js b/docs/examples/TabbedAreaControlled.js index 358ea6db3f..82bf84f400 100644 --- a/docs/examples/TabbedAreaControlled.js +++ b/docs/examples/TabbedAreaControlled.js @@ -1,19 +1,23 @@ -var key = 1; +const ControlledTabArea = React.createClass({ + getInitialState() { + return { + key: 1 + }; + }, -function renderTabbedArea () { - var tabbedAreaInstance = ( - - TabPane 1 content - TabPane 2 content - - ); - React.render(tabbedAreaInstance, mountNode); -} + handleSelect(key) { + alert('selected ' + key); + this.setState({key}); + }, -function handleSelect (selectedKey) { - alert('selected ' + selectedKey); - key = selectedKey; - renderTabbedArea(); -} + render() { + return ( + + TabPane 1 content + TabPane 2 content + + ); + } +}); -renderTabbedArea(); \ No newline at end of file +React.render(, mountNode); diff --git a/docs/examples/TabbedAreaNoAnimation.js b/docs/examples/TabbedAreaNoAnimation.js index a5b965b5a5..e4d4b7a323 100644 --- a/docs/examples/TabbedAreaNoAnimation.js +++ b/docs/examples/TabbedAreaNoAnimation.js @@ -1,8 +1,8 @@ -var tabbedAreaInstance = ( - - TabPane 1 content - TabPane 2 content - - ); +const tabbedAreaInstance = ( + + TabPane 1 content + TabPane 2 content + +); -React.render(tabbedAreaInstance, mountNode); \ No newline at end of file +React.render(tabbedAreaInstance, mountNode); diff --git a/docs/examples/TabbedAreaUncontrolled.js b/docs/examples/TabbedAreaUncontrolled.js index db1019f487..c22c7ad9c5 100644 --- a/docs/examples/TabbedAreaUncontrolled.js +++ b/docs/examples/TabbedAreaUncontrolled.js @@ -1,8 +1,8 @@ -var tabbedAreaInstance = ( - - TabPane 1 content - TabPane 2 content - - ); +const tabbedAreaInstance = ( + + TabPane 1 content + TabPane 2 content + +); -React.render(tabbedAreaInstance, mountNode); \ No newline at end of file +React.render(tabbedAreaInstance, mountNode); diff --git a/docs/examples/TableBasic.js b/docs/examples/TableBasic.js index 0dc4e09059..e99d8fdf27 100644 --- a/docs/examples/TableBasic.js +++ b/docs/examples/TableBasic.js @@ -1,33 +1,33 @@ -var tableInstance = ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
- ); +const tableInstance = ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+); -React.render(tableInstance, mountNode); \ No newline at end of file +React.render(tableInstance, mountNode); diff --git a/docs/examples/TableResponsive.js b/docs/examples/TableResponsive.js index a3136be7d2..1c2f8e33cc 100644 --- a/docs/examples/TableResponsive.js +++ b/docs/examples/TableResponsive.js @@ -1,46 +1,46 @@ -var tableInstance = ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
- ); +const tableInstance = ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
+); -React.render(tableInstance, mountNode); \ No newline at end of file +React.render(tableInstance, mountNode); diff --git a/docs/examples/TooltipBasic.js b/docs/examples/TooltipBasic.js index 8c712fb70b..f2df4f4a66 100644 --- a/docs/examples/TooltipBasic.js +++ b/docs/examples/TooltipBasic.js @@ -1,11 +1,9 @@ -var holderStyle = {height: 50}; +const tooltipInstance = ( +
+ + Holy guacamole! Check this info. + +
+); -var tooltipInstance = ( -
- - Holy guacamole! Check this info. - -
- ); - -React.render(tooltipInstance, mountNode); \ No newline at end of file +React.render(tooltipInstance, mountNode); diff --git a/docs/examples/TooltipInCopy.js b/docs/examples/TooltipInCopy.js index 1db707f98b..36400ed271 100644 --- a/docs/examples/TooltipInCopy.js +++ b/docs/examples/TooltipInCopy.js @@ -1,20 +1,19 @@ -var LinkWithTooltip = React.createClass({ - render: function () { - var tooltip = {this.props.tooltip}; +const LinkWithTooltip = React.createClass({ + render() { + let tooltip = {this.props.tooltip}; + return ( - - {this.props.children} - - ); + + {this.props.children} + + ); } }); -var pStyle = {marginBottom: 0}; - -var copyInstance = ( -

- Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel Another tooltip} href="#">have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral. -

- ); +const copyInstance = ( +

+ Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel Another tooltip} href='#'>have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral. +

+); React.render(copyInstance, mountNode); diff --git a/docs/examples/TooltipPositioned.js b/docs/examples/TooltipPositioned.js index 5d43f85ee6..cedb961fa9 100644 --- a/docs/examples/TooltipPositioned.js +++ b/docs/examples/TooltipPositioned.js @@ -1,18 +1,18 @@ -var positionerInstance = ( - - Holy guacamole! Check this info.}> - - - Holy guacamole! Check this info.}> - - - Holy guacamole! Check this info.}> - - - Holy guacamole! Check this info.}> - - - - ); +const positionerInstance = ( + + Holy guacamole! Check this info.}> + + + Holy guacamole! Check this info.}> + + + Holy guacamole! Check this info.}> + + + Holy guacamole! Check this info.}> + + + +); -React.render(positionerInstance, mountNode); \ No newline at end of file +React.render(positionerInstance, mountNode); diff --git a/docs/examples/Well.js b/docs/examples/Well.js index 153cf23a0a..31caabf770 100644 --- a/docs/examples/Well.js +++ b/docs/examples/Well.js @@ -1,5 +1,5 @@ -var wellInstance = ( +const wellInstance = ( Look I'm in a well! ); -React.render(wellInstance, mountNode); \ No newline at end of file +React.render(wellInstance, mountNode); diff --git a/docs/examples/WellSizes.js b/docs/examples/WellSizes.js index 8cc222b419..80bb223539 100644 --- a/docs/examples/WellSizes.js +++ b/docs/examples/WellSizes.js @@ -1,8 +1,8 @@ -var wellInstance = ( +const wellInstance = (
- Look I'm in a large well! - Look I'm in a small well! + Look I'm in a large well! + Look I'm in a small well!
); -React.render(wellInstance, mountNode); \ No newline at end of file +React.render(wellInstance, mountNode); diff --git a/docs/package.json b/docs/package.json deleted file mode 100644 index d83d3b9196..0000000000 --- a/docs/package.json +++ /dev/null @@ -1,33 +0,0 @@ -{ - "name": "react-bootstrap-docs", - "version": "0.0.0", - "description": "React Bootstrap docs site", - "main": "./server.js", - "browser": "./client.js", - "browserify": { - "transform": [ - "reactify", - "brfs", - "envify" - ] - }, - "devDependencies": { - "express": "~3.4.8", - "node-jsx": "~0.12.0", - "reactify": "~0.15.2", - "brfs": "~1.0.0", - "envify": "~1.2.0", - "browserify": "~3.26.0", - "connect-browserify": "~1.0.0", - "uglify-js": "^2.3.6", - "supervisor": "~0.5.7" - }, - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", - "start": "supervisor -w .,../lib -i node_modules server.js", - "build": "node build.js && browserify client.js | uglifyjs -cm 2>/dev/null > ./assets/bundle.js", - "start-prod": "NODE_ENV=production node server.js" - }, - "author": "", - "license": "MIT" -} diff --git a/docs/server.js b/docs/server.js index 0b55c78101..6093bc0565 100644 --- a/docs/server.js +++ b/docs/server.js @@ -1,33 +1,46 @@ -'use strict'; +import React from 'react'; +import express from 'express'; +import path from 'path'; +import url from 'url'; +import webpack from 'webpack'; +import webpackMiddleware from 'webpack-dev-middleware'; +import webpackConfigBuilder from '../webpack/webpack.config'; +import Router from 'react-router'; +import routes from './src/Routes'; -var express = require('express'); - -var development = process.env.NODE_ENV !== 'production'; -var app = express(); +const development = process.env.NODE_ENV !== 'production'; +let app = express(); if (development) { - var path = require('path'); - var url = require('url'); - var browserify = require('connect-browserify'); - var nodejsx = require('node-jsx').install(); - var Root = require('./src/Root'); + let webpackConfig = webpackConfigBuilder({ + development: development, + docs: true + }); + let publicPath = webpackConfig.output.publicPath; + + webpackConfig.output.path = '/'; + webpackConfig.output.publicPath = undefined; app = app - .get('/assets/bundle.js', browserify('./client', {debug: true, watch: false})) - .use('/assets', express.static(path.join(__dirname, 'assets'))) - .use('/vendor', express.static(path.join(__dirname, 'vendor'))) + .use(webpackMiddleware(webpack(webpackConfig), { + noInfo: false, + publicPath: publicPath, + stats: { + colors: true + } + })) .use(function renderApp(req, res) { - var fileName = url.parse(req.url).pathname; - var RootHTML = Root.renderToString({initialPath: fileName}); - - res.send(RootHTML); + Router.run(routes, req.url, Handler => { + let html = React.renderToString(); + res.send(html); + }); }); } else { app = app - .use(express.static(__dirname)); + .use(express.static(path.join(__dirname, '../docs-built'))); } app .listen(4000, function () { console.log('Server started at http://localhost:4000'); - }); \ No newline at end of file + }); diff --git a/docs/src/CodeMirror.client.js b/docs/src/CodeMirror.client.js new file mode 100644 index 0000000000..aa52214e94 --- /dev/null +++ b/docs/src/CodeMirror.client.js @@ -0,0 +1,12 @@ +import CodeMirror from 'codemirror'; +import from 'codemirror/mode/javascript/javascript'; + +import from 'codemirror/theme/solarized.css'; +import from 'codemirror/lib/codemirror.css'; +//import from '../vendor/codemirror/syntax.css'; +import from './CodeMirror.css'; + +export default { + IS_NODE: false, + CodeMirror +} diff --git a/docs/src/CodeMirror.css b/docs/src/CodeMirror.css new file mode 100644 index 0000000000..04bfdce4d5 --- /dev/null +++ b/docs/src/CodeMirror.css @@ -0,0 +1,15 @@ +.cm-s-solarized.CodeMirror { + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; +} + +.highlight, .code-toggle.open { + background-color: #fdf6e3; +} + +.cm-s-solarized .cm-comment { color: #93a1a1; } + +.CodeMirror, .CodeMirror-scroll { + height: auto; +} diff --git a/docs/src/CodeMirror.js b/docs/src/CodeMirror.js new file mode 100644 index 0000000000..a318163149 --- /dev/null +++ b/docs/src/CodeMirror.js @@ -0,0 +1,4 @@ +export default { + IS_NODE: true, + CodeMirror: {} +} diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js index e184227855..3eadb5e979 100644 --- a/docs/src/ComponentsPage.js +++ b/docs/src/ComponentsPage.js @@ -1,27 +1,27 @@ -'use strict'; +/* eslint no-path-concat: 0 */ -var React = require('react'); -var fs = require('fs'); +import React from 'react'; -var Affix = require('../../lib/Affix'); -var Nav = require('../../lib/Nav'); -var SubNav = require('../../lib/SubNav'); -var NavItem = require('../../lib/NavItem'); +import Affix from '../../src/Affix'; +import Nav from '../../src/Nav'; +import SubNav from '../../src/SubNav'; +import NavItem from '../../src/NavItem'; -var NavMain = require('./NavMain'); -var PageHeader = require('./PageHeader'); -var PageFooter = require('./PageFooter'); -var ReactPlayground = require('./ReactPlayground'); +import NavMain from './NavMain'; +import PageHeader from './PageHeader'; +import PageFooter from './PageFooter'; +import ReactPlayground from './ReactPlayground'; +import Samples from './Samples'; -var ComponentsPage = React.createClass({ - getInitialState: function () { +const ComponentsPage = React.createClass({ + getInitialState() { return { activeNavItemHref: null, navOffsetTop: null }; }, - handleNavItemSelect: function (key, href) { + handleNavItemSelect(key, href) { this.setState({ activeNavItemHref: href }); @@ -29,8 +29,8 @@ var ComponentsPage = React.createClass({ window.location = href; }, - componentDidMount: function () { - var elem = this.refs.sideNav.getDOMNode(), + componentDidMount() { + let elem = this.refs.sideNav.getDOMNode(), domUtils = Affix.domUtils, sideNavOffsetTop = domUtils.getOffset(elem).top, sideNavMarginTop = parseInt(domUtils.getComputedStyles(elem.firstChild).marginTop, 10), @@ -42,540 +42,574 @@ var ComponentsPage = React.createClass({ }); }, - render: function () { + render() { return (
- + + title='Components' + subTitle='' /> -
-
-
+
+
+
{/* Buttons */} -
-

Buttons Button

-

Options

+
+

Buttons Button

+

Options

Use any of the available button style types to quickly create a styled button. Just modify the bsStyle prop.

- -
+ +

Button spacing

Because React doesn't output newlines between elements, buttons on the same line are displayed flush against each other. To preserve the spacing between multiple inline buttons, wrap your button group in {''}.

-

Sizes

-

Fancy larger or smaller buttons? Add bsSize="large", bsSize="small", or bsSize="xsmall" for additional sizes.

- +

Sizes

+

Fancy larger or smaller buttons? Add bsSize='large', bsSize='small', or bsSize='xsmall' for additional sizes.

+

Create block level buttons—those that span the full width of a parent— by adding the block prop.

- + -

Active state

+

Active state

To set a buttons active state simply set the components active prop.

- + -

Disabled state

+

Disabled state

Make buttons look unclickable by fading them back 50%. To do this add the disabled attribute to buttons.

- + -
+

Event handler functionality not impacted

This prop will only change the {'

-

Button tags

+

Button tags

The DOM element tag is choosen automaticly for you based on the props you supply. Passing a href will result in the button using a {''} element otherwise a {'

{/* Button Groups */} -
-

Button groups ButtonGroup, ButtonToolbar

-

Group a series of buttons together on a single line with the button group.

+
+

Button groups ButtonGroup, ButtonToolbar

+

Group a series of buttons together on a single line with the button group.

-

Basic example

+

Basic example

Wrap a series of {'