-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
move Documentation pages to react-router
- Loading branch information
jpdriver
committed
Apr 23, 2015
1 parent
dbc3f8e
commit a8100bc
Showing
6 changed files
with
148 additions
and
117 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| var React = require('react'); | ||
| var ReactRouter = require('react-router'); | ||
|
|
||
| var gettingStarted = require('./scripts/documentation01-gettingstarted'); | ||
| var apiReference = require('./scripts/documentation02-apireference'); | ||
|
|
||
| var { Route, RouteHandler, Link } = ReactRouter; | ||
|
|
||
| var App = React.createClass({ | ||
| render: function () { | ||
| return ( | ||
| <div> | ||
| <h1 className="page-header">Documentation</h1> | ||
| <RouteHandler/> | ||
| </div> | ||
| ); | ||
| } | ||
| }); | ||
|
|
||
| var routes = ( | ||
| <Route handler={App}> | ||
| <Route name="gettingstarted" handler={gettingStarted}/> | ||
| <Route name="apireference" handler={apiReference}/> | ||
| </Route> | ||
| ); | ||
|
|
||
| ReactRouter.run(routes, function (Handler) { | ||
| React.render(<Handler/>, document.getElementById('documentation')); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| module.exports = React.createClass({ | ||
| render: function () { | ||
| return ( | ||
| <div> | ||
| <h2>Getting Started </h2> | ||
| <h3 id="js-installation">Installation</h3> | ||
| <h4>Using Common JS</h4> | ||
| <p>React Grid is available in the npm repository. You can install it from the command line using the following commands</p> | ||
| <p><kbd>npm install react --save</kbd></p> | ||
| <p><kbd>npm install react-data-grid --save</kbd></p> | ||
| <p>Once downloaded, require both React and React Grid and you should be good to go</p> | ||
| <div className="code-block js"> | ||
| <pre> | ||
| var React = require('react'); | ||
| <br /> | ||
| var ReactDataGrid = require('react-data-grid'); | ||
| </pre> | ||
| </div> | ||
| <p>If you want to use extra features such as built in editors, formatters, toolbars and other plugins, you need to require the addons module instead</p> | ||
| <div className="code-block js"> | ||
| <pre>var ReactDataGrid = require('react-data-grid/addons');</pre> | ||
| </div> | ||
| <br/> | ||
| <h4>Using Distribution Scripts</h4> | ||
| <p>If you prefer not to use a module system, you can reference the distribution scripts directly in your html pages. First you need to download the scripts. This can be done in 3 ways, either download directly from github source, using npm as above or using bower | ||
| <br/> | ||
| <kbd>bower install react-data-grid --save</kbd> | ||
| </p> | ||
| <div className="code-block js"> | ||
| <pre><script src="//fb.me/react-0.12.0.js"></script><br/><script type="text/javascript" src="react-data-grid/dist/react-data-grid.js"></script></pre> | ||
| </div> | ||
| <p>Or use react-data-grid-with-addons.js to use advanced features</p> | ||
| <div className="code-block js"> | ||
| <pre><script type="text/javascript" src="react-data-grid/dist/react-data-grid-with-addons.js"></script></pre> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| var RowUpdateEventString = "type RowUpdateEvent = {\n\trowIdx: number;\n\tupdated: object;\n\tcellKey: string;\n\tkeyCode: string\n};"; | ||
| var CellDragEventString = "type CellDragEvent = {\n\trowIdx: number;\n\tfromRow: number,\n\ttoRow: number,\n\tvalue: any\n};"; | ||
| var CellCopyPasteEventString = "type CellCopyPasteEvent = {\n\trowIdx: number;\n\tvalue : any;\n\tfromRow: number;\n\ttoRow: number;\n\tcellKey: string\n};"; | ||
|
|
||
| module.exports = React.createClass({ | ||
| render: function () { | ||
| return ( | ||
| <div> | ||
| <h1 id="js-api-refernce">API Reference</h1> | ||
| <h2>Grid Events</h2> | ||
| <h3>onRowUpdated</h3> | ||
| <div className="code-block function"> | ||
| <pre> | ||
| <span className="nx">onRowUpdated</span><span className="p">(</span><span className="nx">e</span> <span className="nx">:RowUpdateEvent</span><span className="p">)</span> | ||
| </pre> | ||
| </div> | ||
| <div className="code-block flow"> | ||
| <pre> | ||
| /* @flow */ | ||
| <br/> | ||
| <code>{RowUpdateEventString}</code> | ||
| </pre> | ||
| </div> | ||
| <h3>onCellsDragged</h3> | ||
| <div className="code-block function"> | ||
| <pre> | ||
| <span className="nx">onCellsDragged</span><span className="p">(</span><span className="nx">e</span> <span className="nx">:CellDragEvent</span><span className="p">)</span> | ||
| </pre> | ||
| </div> | ||
| <div className="code-block flow"> | ||
| <pre> | ||
| /* @flow */ | ||
| <br/> | ||
| <code>{CellDragEventString}</code> | ||
| </pre> | ||
| </div> | ||
| <h3>onCellCopyPaste</h3> | ||
| <div className="code-block function"> | ||
| <pre> | ||
| <span className="nx">onCellCopyPaste</span><span className="p">(</span><span className="nx">e</span> <span className="nx">:CellCopyPasteEvent</span><span className="p">)</span> | ||
| </pre> | ||
| </div> | ||
| <div className="code-block flow"> | ||
| <pre> | ||
| /* @flow */ | ||
| <br/> | ||
| <code>{CellCopyPasteEventString}</code> | ||
| </pre> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters