Skip to content

Commit 7e1a530

Browse files
conor-j-maloneconor-j-malone
committed
replacing all refs to react-grid with react-data-grid. Change dist output file names
1 parent a13e1b7 commit 7e1a530

16 files changed

+46
-52
lines changed

‎addons.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = require("./dist/ReactGridWithAddons");
1+
module.exports = require("./dist/react-data-grid-with-addons");

‎bower.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
2-
"name": "adazzle-react-grid",
2+
"name": "react-data-grid",
33
"main": "index.js",
44
"version": "0.12.7",
5-
"homepage": "https://github.com/adazzle/react-grid",
5+
"homepage": "https://github.com/adazzle/react-data-grid",
66
"authors": [
77
"malonecj <[email protected]>"
88
],

‎config/webpack.config.js

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,21 @@ var path = require("path");
55

66
module.exports = {
77
entry: {
8-
'ReactGrid' : './src/index',
9-
'ReactGridWithAddons' : './src/addons/index'
8+
'react-data-grid' : './src/index',
9+
'react-data-grid-with-addons' : './src/addons/index'
1010
},
1111
output: {
1212
path: path.join(__dirname, "../dist"),
1313
filename: "[name].js",
14-
library: ["ReactGrid"],
14+
library: ["ReactDataGrid"],
1515
libraryTarget: "umd"
1616
},
1717
externals: {
18-
"react/addons": {
19-
root : 'React',
20-
commonjs : 'react/addons',
21-
commonjs2 : 'react/addons',
22-
amd : 'react/addons'
23-
},
2418
"react": {
2519
root : 'React',
26-
commonjs : 'react/addons',
27-
commonjs2 : 'react/addons',
28-
amd : 'react/addons'
20+
commonjs : 'react',
21+
commonjs2 : 'react',
22+
amd : 'react'
2923
},
3024
"moment" : "moment"
3125
},

‎examples/documentation.html

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<!-- Custom styles for our template -->here
2323
<link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen" >
2424
<link rel="stylesheet" href="assets/css/main.css">
25-
<link rel="stylesheet" href="build/reactGrid.css">
25+
<link rel="stylesheet" href="build/react-data-grid.css">
2626

2727

2828
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
@@ -69,25 +69,25 @@ <h3 id="js-installation">Installation</h3>
6969
<h4>Using Common JS</h4>
7070
<p>React Grid is available in the npm repository. You can install it from the command line using the following commands</p>
7171
<p><kbd>npm install react --save</kbd></p>
72-
<p><kbd>npm install adazzle-react-grid --save</kbd></p>
72+
<p><kbd>npm install react-data-grid --save</kbd></p>
7373
<p>Once downloaded, require both React and React Grid and you should be good to go</p>
7474
<div class="code-block js">
75-
<pre>var React = require('react'); </br>var ReactGrid = require('adazzle-react-grid');</pre>
75+
<pre>var React = require('react'); </br>var ReactDataGrid = require('react-data-grid');</pre>
7676
</div>
7777
<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>
7878
<div class="code-block js">
79-
<pre>var ReactGridAddons = require('adazzle-react-grid/addons');</pre>
79+
<pre>var ReactDataGrid = require('react-data-grid/addons');</pre>
8080
</div>
8181
<br/>
8282
<h4>Using Distribution Scripts</h4>
83-
<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 adazzle/react-grid --save</kbd></p>
83+
<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>
8484
<div class="code-block js">
85-
<pre>&lt;script src="//fb.me/react-0.12.0.js"&gt;&lt;/script&gt;<br/>&lt;script type="text/javascript" src="react-grid/dist/reactGrid.js"&gt;&lt;/script&gt;</pre>
85+
<pre>&lt;script src="//fb.me/react-0.12.0.js"&gt;&lt;/script&gt;<br/>&lt;script type="text/javascript" src="react-data-grid/dist/react-data-grid.js"&gt;&lt;/script&gt;</pre>
8686
</div>
8787

88-
Or use ReactGridWithAddons.js to use advanced features
88+
Or use react-data-grid-with-addons.js to use advanced features
8989
<div class="code-block js">
90-
<pre>&lt;script type="text/javascript" src="react-grid/dist/ReactGridWithAddons.js"&gt;&lt;/script&gt;"</pre>
90+
<pre>&lt;script type="text/javascript" src="react-data-grid/dist/react-data-grid-with-addons.js"&gt;&lt;/script&gt;"</pre>
9191
</div>
9292
<h3 id="js-basic-example">A Simple Example</h3>
9393
<p>The columns is a column specification, it provides information to grid on how to extract data for each of the column and how column should be represented and its features:</p>
@@ -125,9 +125,9 @@ <h3 id="js-basic-example">A Simple Example</h3>
125125
return result;
126126
};</pre>
127127
</div>
128-
<p>Now simply invoke React.render(..) on the ReactGrid component</p>
128+
<p>Now simply invoke React.render(..) on the ReactDataGrid component</p>
129129
<div class="code-block js">
130-
<pre>React.render(&lt;ReactGrid columns={columns} rows={rows} /&gt;, document.getElementById('example'))</pre>
130+
<pre>React.render(&lt;ReactDataGrid columns={columns} rows={rows} /&gt;, document.getElementById('example'))</pre>
131131
</div>
132132
</div>
133133

‎examples/examples.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
2020
<link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen" >
2121
<link rel="stylesheet" href="assets/css/main.css">
22-
<link rel="stylesheet" href="build/reactGrid.css">
22+
<link rel="stylesheet" href="build/react-data-grid.css">
2323
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css">
2424
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
2525
<!--[if lt IE 9]>

‎examples/index.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,12 @@
1717
<!-- Custom styles for our template -->
1818
<link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen" ></link>
1919
<link rel="stylesheet" href="assets/css/main.css"></link>
20-
<link rel="stylesheet" href="build/reactGrid.css"></link>
20+
<link rel="stylesheet" href="build/react-data-grid.css"></link>
2121
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react-with-addons.js"></script>
2222
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
2323

2424
<script src="build/libs.js"></script>
25-
<script src="build/ReactGridWithAddons.js"></script>
25+
<script src="build/react-data-grid-with-addons.js"></script>
2626

2727
<script src="assets/js/dropdown.js"></script>
2828
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
@@ -50,7 +50,7 @@ <h1 class="lead">React Data Grid </h1>
5050
<p class="tagline">Excel-like grid component built with React</p>
5151
<p>
5252
<a class="btn btn-default btn-lg" href="#demo" role="button">DEMO</a>
53-
<a class="btn btn-action btn-lg" href="https://github.com/adazzle/react-grid">DOWNLOAD NOW</a>
53+
<a class="btn btn-action btn-lg" href="https://github.com/adazzle/react-data-grid">DOWNLOAD NOW</a>
5454
</p>
5555
</div>
5656
</div>
@@ -113,14 +113,14 @@ <h4>Using Common JS</h4>
113113
</div>
114114
<br/>
115115
<h4>Using Distribution Scripts</h4>
116-
<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 adazzle/react-grid --save</kbd></p>
116+
<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>
117117
<div class="code-block js">
118-
<pre>&lt;script src="//fb.me/react-0.12.0.js"&gt;&lt;/script&gt;<br/>&lt;script type="text/javascript" src="react-grid/dist/reactGrid.js"&gt;&lt;/script&gt;</pre>
118+
<pre>&lt;script src="//fb.me/react-0.12.0.js"&gt;&lt;/script&gt;<br/>&lt;script type="text/javascript" src="react-data-grid/dist/react-data-grid.js"&gt;&lt;/script&gt;</pre>
119119
</div>
120120

121-
Or use ReactGridWithAddons.js to use advanced features
121+
Or use react-data-grid-with-addons.js to use advanced features
122122
<div class="code-block js">
123-
<pre>&lt;script type="text/javascript" src="react-grid/dist/ReactGridWithAddons.js"&gt;&lt;/script&gt;"</pre>
123+
<pre>&lt;script type="text/javascript" src="react-data-grid/dist/react-data-grid-with-addons.js"&gt;&lt;/script&gt;"</pre>
124124
</div>
125125

126126
<h3 id="js-basic-example">A Simple Example</h3>

‎examples/scripts/ReactDataGrid.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
* @jsx React.DOM
33
*/
44
(function(){
5-
var Grid = ReactGrid.Grid;
6-
var Editors = ReactGrid.Editors;
7-
var Toolbar = ReactGrid.Toolbar;
5+
var Grid = ReactDataGrid.Grid;
6+
var Editors = ReactDataGrid.Editors;
7+
var Toolbar = ReactDataGrid.Toolbar;
88
var AutoCompleteEditor = Editors.AutoComplete;
99
var DropDownEditor = Editors.DropDownEditor;
1010
var joinClasses = require('classnames');
@@ -46,7 +46,7 @@
4646
var titles = ['Mr.', 'Mrs.', 'Miss', 'Ms.'];
4747

4848
function renderImage(cellData) {
49-
var ImageFormatter = ReactGrid.Formatters.ImageFormatter;
49+
var ImageFormatter = ReactDataGrid.Formatters.ImageFormatter;
5050
return <ImageFormatter src={cellData.value} />;
5151
}
5252

‎examples/scripts/components/QuickStartDescription.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ module.exports = React.createClass({
99
return(
1010
<div>
1111
<h3 id="js-basic-example">{this.props.title}</h3>
12-
<p>In order to display a simple uneditable grid, all that is required is to pass an array of columns and rows as props to ReactGrid. The columns is a column specification, it provides information to grid on how to extract data for each of the column and how column should be represented and its features:</p>
12+
<p>In order to display a simple uneditable grid, all that is required is to pass an array of columns and rows as props to ReactDataGrid. The columns is a column specification, it provides information to grid on how to extract data for each of the column and how column should be represented and its features:</p>
1313
<div className="code-block js">
1414
<pre>
1515
<code className="javascript">{"var columns = [{ key: 'id', name: 'ID' }, { key: 'title', name: 'Title' }, { key: 'count', name: 'Count' } ]"}
@@ -21,7 +21,7 @@ module.exports = React.createClass({
2121

2222
<p>Now simply invoke React.render(..) passing the array of rows and columns as props</p>
2323
<div className="code-block js">
24-
<pre><code className="javascript">{"React.render(<ReactGrid columns={columns} rows={getRows(0,100)} />, document.getElementById('example'))"}</code></pre>
24+
<pre><code className="javascript">{"React.render(<ReactDataGrid columns={columns} rows={getRows(0,100)} />, document.getElementById('example'))"}</code></pre>
2525
</div>
2626
</div>
2727
);

‎examples/scripts/exampleBasic.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* @flow */
22
var React = require('react');
3-
var ReactGrid = require('../build/ReactGrid');
3+
var ReactDataGrid = require('../build/react-data-grid');
44
var FakeObjectDataStore = require('./FakeObjectDataStore');
55
var QuickStartDescription = require('./components/QuickStartDescription');
66

@@ -88,7 +88,7 @@ var Example = React.createClass({
8888
return(
8989
<div>
9090
<QuickStartDescription title="A Simple Example"/>
91-
<ReactGrid rowGetter={FakeObjectDataStore.getObjectAt} rowsCount={1000} columns={columns}/>
91+
<ReactDataGrid rowGetter={FakeObjectDataStore.getObjectAt} rowsCount={1000} columns={columns}/>
9292
</div>
9393
)
9494
}

‎examples/scripts/exampleEditable.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* @flow */
22
var React = require('react');
3-
var ReactGrid = require('../build/ReactGrid');
3+
var ReactDataGrid = require('../build/react-data-grid');
44
var getRows = require('./getRows');
55
var RowsDescription = require('./components/RowsDescription')
66
var HightlightMixin = require('./highlightMixin');
@@ -21,9 +21,9 @@ var Description = React.createClass({
2121
</pre>
2222
</div>
2323

24-
<p>One goal of ReactGrid is to allow the end user to manage the grid data how they want. ReactGrid just provides callbacks that can be listened to, to change data as needed. Here we will create our own editable grid React component, which will wrap ReactGrid. We need to hook onto ReactGrids onRowUpdatedEvent and update the row where the commit was made. Finally, make sure cell selection is enabled for the grid by passing enableCellSelect as prop</p>
24+
<p>One goal of ReactDataGrid is to allow the end user to manage the grid data how they want. ReactDataGrid just provides callbacks that can be listened to, to change data as needed. Here we will create our own editable grid React component, which will wrap ReactDataGrid. We need to hook onto ReactDataGrid's onRowUpdatedEvent and update the row where the commit was made. Finally, make sure cell selection is enabled for the grid by passing enableCellSelect as prop</p>
2525
<div className="code-block js">
26-
<pre><code className="javascript">{"var EditableGrid = React.createClass({\n\n getInitialState : function(){\n return {rows : getRows(0, 1000)};\n },\n\n handleRowUpdated : function(commit){\n //merge the updated row values with the existing row\n var rows = this.state.rows;\n var updatedRow = React.addons.update(rows[commit.rowIdx], {$merge : commit.updated});\n rows[commit.rowIdx] = updatedRow;\n this.setState({rows:rows});\n },\n\n render : function(){\n return(<ReactGrid \n rows={getRows(0,100)} \n columns={columns} \n enableCellSelect={true} \n onRowUpdated={this.handleRowUpdated}/> \n );\n }\n});"}</code></pre>
26+
<pre><code className="javascript">{"var EditableGrid = React.createClass({\n\n getInitialState : function(){\n return {rows : getRows(0, 1000)};\n },\n\n handleRowUpdated : function(commit){\n //merge the updated row values with the existing row\n var rows = this.state.rows;\n var updatedRow = React.addons.update(rows[commit.rowIdx], {$merge : commit.updated});\n rows[commit.rowIdx] = updatedRow;\n this.setState({rows:rows});\n },\n\n render : function(){\n return(<ReactDataGrid \n rows={getRows(0,100)} \n columns={columns} \n enableCellSelect={true} \n onRowUpdated={this.handleRowUpdated}/> \n );\n }\n});"}</code></pre>
2727
</div>
2828
</div>
2929
);
@@ -64,7 +64,7 @@ var EditableGrid = React.createClass({
6464
},
6565

6666
render : function(): ?ReactElement {
67-
return(<ReactGrid rows={this.state.rows} columns={columns} enableCellSelect={true} onRowUpdated={this.handleRowUpdated}></ReactGrid>);
67+
return(<ReactDataGrid rowGetter={FakeObjectDataStore.getObjectAt} columns={columns} enableCellSelect={true} onRowUpdated={this.handleRowUpdated}></ReactDataGrid>);
6868
}
6969
});
7070

0 commit comments

Comments
 (0)