Skip to content

v0: fix React.createClass and PropTypes for react 16 #753

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ryanlanciaux merged 1 commit into from
Apr 5, 2018
Merged

v0: fix React.createClass and PropTypes for react 16 #753

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3,761 changes: 2,934 additions & 827 deletions build/Griddle.js
View file
Open in desktop

Large diffs are not rendered by default.

14 changes: 7 additions & 7 deletions docs/src/markdown/customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ var someData = [
We want the **name** column to be a link to `/speakers/state/name` (where state and name are pulled in from the data). We can define a customComponent to be rendered as follows:

```
var LinkComponent = React.createClass({
var LinkComponent = createReactClass({
render: function(){
url ="speakers/" + this.props.rowData.state + "/" + this.props.data;
return <a href={url}>{this.props.data}</a>
Expand All @@ -210,7 +210,7 @@ var LinkComponent = React.createClass({
Additionally, we want the city and state column headers to be highlighted a specific color and have a filter by column input. We can define a custom header component as:

```
var HeaderComponent = React.createClass({
var HeaderComponent = createReactClass({
textOnClick: function(e) {
e.stopPropagation();
},
Expand Down Expand Up @@ -373,7 +373,7 @@ Sometimes you may want to display grid data in a format other than a grid but st
We are going to render our grid as a series of cards, keeping the pagination and filtering from Griddle in tact. Assume we are using the same data in the custom column example. We will need to create a custom component as follows:

```
var OtherComponent = React.createClass({
var OtherComponent = createReactClass({
getDefaultProps: function(){
return { "data": {} };
},
Expand Down Expand Up @@ -423,7 +423,7 @@ In some cases, it may be ideal to use Griddle but display a global format other
As stated above we are going to render a visualization of temperature data rather than a chart. To start off we need to create a visualization component that uses a data property to obtain its values (the following example uses the awesome [chartist library](http://gionkunz.github.io/chartist-js/) and [accompanying react component](https://fraserxu.me/react-chartist/)):

```
var TestLineChart = React.createClass({
var TestLineChart = createReactClass({
render: function(){
var simpleLineChartData = {
labels: _.keys(this.props.data[0]),
Expand Down Expand Up @@ -463,7 +463,7 @@ This example shows how to make a custom filter component with a custom filter fu
});
};

var customFilterComponent = React.createClass({
var customFilterComponent = createReactClass({
getDefaultProps: function() {
return {
"query": ""
Expand Down Expand Up @@ -522,7 +522,7 @@ If you want to customize the paging component, just set the property 'useCustomP
#####Example#####

```javascript
var OtherPager = React.createClass({
var OtherPager = createReactClass({
getDefaultProps: function(){
return{
"maxPage": 0,
Expand Down Expand Up @@ -624,7 +624,7 @@ Outside of the NoData message, Griddle can take a `customNoDataComponent` that w
#####Example:#####

```
var NoDataComponent = React.createClass({
var NoDataComponent = createReactClass({
render: function(){
return (<div>
<h1>No data is available</h1>
Expand Down
6 changes: 3 additions & 3 deletions docs/src/markdown/externalData.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ Griddle comes with a handful of required properties that must be set when workin
Below is a skeleton wrapper component for dealing with external results in Griddle. This wrapper does not need to be used but it could serve as a decent starting point.

```
var ExternalComponent = React.createClass({
var ExternalComponent = createReactClass({
getInitialState: function(){
var initial = { "results": [],
"currentPage": 0,
Expand Down Expand Up @@ -131,7 +131,7 @@ getExternalData: function (page){
The component was then modified to use getExternalData method for changing the pages and obtaining the initial data. Notice that filtering, sorting, etc are not enabled on this example (the next example has all of these options turned on).

```javascript
var ExternalSwapiComponent = React.createClass({
var ExternalSwapiComponent = createReactClass({
getInitialState: function(){
var initial = { "results": [],
"currentPage": 0,
Expand Down Expand Up @@ -184,7 +184,7 @@ Please keep in mind that a good deal of this code is to simulate the type of act
```javascript
var externalData = fakeData.slice(0, 53);

var SimulatedExternalComponent = React.createClass({
var SimulatedExternalComponent = createReactClass({
getInitialState: function(){
var initial = { "results": [],
"currentPage": 0,
Expand Down
1 change: 1 addition & 0 deletions docs/src/markdown/quickstart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ npm install griddle-react --save
From there, require React and Griddle in your modules and you should be all set!
```
var React = require('react');
var createReactClass = require('create-react-class');
var Griddle = require('griddle-react');
```
Please take a look at a basic [gulp example](https://github.com/ryanlanciaux/griddle-gulp-test) or a [webpack example](https://github.com/ryanlanciaux/griddle-webpack-test) for more information.
Expand Down
24 changes: 12 additions & 12 deletions examples/assets/scripts/GriddleWithCallback.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ return /******/ (function(modules) { // webpackBootstrap
var _ = __webpack_require__(2);
var Griddle = __webpack_require__(3);

var GriddleWithCallback = React.createClass({displayName: "GriddleWithCallback",
var GriddleWithCallback = createReactClass({displayName: "GriddleWithCallback",
getDefaultProps: function(){
return {
getExternalResults: null,
Expand Down Expand Up @@ -286,7 +286,7 @@ return /******/ (function(modules) { // webpackBootstrap
var CustomPaginationContainer = __webpack_require__(11);
var _ = __webpack_require__(2);

var Griddle = React.createClass({displayName: 'Griddle',
var Griddle = createReactClass({displayName: 'Griddle',
getDefaultProps: function() {
return{
"columns": [],
Expand Down Expand Up @@ -850,7 +850,7 @@ return /******/ (function(modules) { // webpackBootstrap
var GridRowContainer = __webpack_require__(12);
var _ = __webpack_require__(2);

var GridTable = React.createClass({displayName: 'GridTable',
var GridTable = createReactClass({displayName: 'GridTable',
getDefaultProps: function(){
return{
"data": [],
Expand Down Expand Up @@ -1064,7 +1064,7 @@ return /******/ (function(modules) { // webpackBootstrap
*/
var React = __webpack_require__(1);

var GridFilter = React.createClass({displayName: 'GridFilter',
var GridFilter = createReactClass({displayName: 'GridFilter',
getDefaultProps: function(){
return {
"placeholderText": ""
Expand Down Expand Up @@ -1098,7 +1098,7 @@ return /******/ (function(modules) { // webpackBootstrap
var _ = __webpack_require__(2);

//needs props maxPage, currentPage, nextFunction, prevFunction
var GridPagination = React.createClass({displayName: 'GridPagination',
var GridPagination = createReactClass({displayName: 'GridPagination',
getDefaultProps: function(){
return{
"maxPage": 0,
Expand Down Expand Up @@ -1182,7 +1182,7 @@ return /******/ (function(modules) { // webpackBootstrap
var React = __webpack_require__(1);
var _ = __webpack_require__(2);

var GridSettings = React.createClass({displayName: 'GridSettings',
var GridSettings = createReactClass({displayName: 'GridSettings',
getDefaultProps: function(){
return {
"columns": [],
Expand Down Expand Up @@ -1284,7 +1284,7 @@ return /******/ (function(modules) { // webpackBootstrap
var React = __webpack_require__(1);
var _ = __webpack_require__(2);

var GridTitle = React.createClass({displayName: 'GridTitle',
var GridTitle = createReactClass({displayName: 'GridTitle',
getDefaultProps: function(){
return {
"columns":[],
Expand Down Expand Up @@ -1372,7 +1372,7 @@ return /******/ (function(modules) { // webpackBootstrap
*/
var React = __webpack_require__(1);

var GridNoData = React.createClass({displayName: 'GridNoData',
var GridNoData = createReactClass({displayName: 'GridNoData',
getDefaultProps: function(){
return {
"noDataMessage": "No Data"
Expand Down Expand Up @@ -1405,7 +1405,7 @@ return /******/ (function(modules) { // webpackBootstrap
*/
var React = __webpack_require__(1);

var CustomRowComponentContainer = React.createClass({displayName: 'CustomRowComponentContainer',
var CustomRowComponentContainer = createReactClass({displayName: 'CustomRowComponentContainer',
getDefaultProps: function(){
return{
"data": [],
Expand Down Expand Up @@ -1453,7 +1453,7 @@ return /******/ (function(modules) { // webpackBootstrap
*/
var React = __webpack_require__(1);

var CustomPaginationContainer = React.createClass({displayName: 'CustomPaginationContainer',
var CustomPaginationContainer = createReactClass({displayName: 'CustomPaginationContainer',
getDefaultProps: function(){
return{
"maxPage": 0,
Expand Down Expand Up @@ -1494,7 +1494,7 @@ return /******/ (function(modules) { // webpackBootstrap
var React = __webpack_require__(1);
var GridRow = __webpack_require__(13);

var GridRowContainer = React.createClass({displayName: 'GridRowContainer',
var GridRowContainer = createReactClass({displayName: 'GridRowContainer',
getDefaultProps: function(){
return {
"useGriddleStyles": true,
Expand Down Expand Up @@ -1579,7 +1579,7 @@ return /******/ (function(modules) { // webpackBootstrap
var React = __webpack_require__(1);
var _ = __webpack_require__(2);

var GridRow = React.createClass({displayName: 'GridRow',
var GridRow = createReactClass({displayName: 'GridRow',
getDefaultProps: function(){
return {
"isChildRow": false,
Expand Down
3 changes: 2 additions & 1 deletion examples/assets/scripts/testChart.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@
See License / Disclaimer https://raw.githubusercontent.com/DynamicTyped/Griddle/master/LICENSE
*/
var React = require('react');
var createReactClass = require('create-react-class');
var ChartistGraph = require('react-chartist');

var TestChart = React.createClass({
var TestChart = createReactClass({
getInitialProps: function(){

},
Expand Down
12 changes: 6 additions & 6 deletions examples/assets/scripts/testComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

//This whole file is pretty junky... just an example

var BoldFormatter = React.createClass({
var BoldFormatter = createReactClass({
render: function(){
return <strong>{this.props.data}</strong>
}
Expand All @@ -13,7 +13,7 @@ var externalData = fakeData.slice(0, 53);
//This whole thing is throw-away code.
//It's basically to show that you can wrap up griddle
//and give external data to it from another source (api / localstorage / etc)
var ExternalComponent = React.createClass({
var ExternalComponent = createReactClass({

getInitialState: function(){
var initial = { "results": [],
Expand Down Expand Up @@ -116,7 +116,7 @@ var ExternalComponent = React.createClass({
});


var TestComponent = React.createClass({
var TestComponent = createReactClass({
getDefaultProps: function() {
return{
"simple": true,
Expand Down Expand Up @@ -145,14 +145,14 @@ var TestComponent = React.createClass({
}
});

var CustomNoDataComponent = React.createClass({
var CustomNoDataComponent = createReactClass({
render: function() {
return (
<div>This is a custom component showing that there is no data to be displayed.</div>);
}
});

var OtherComponent = React.createClass({
var OtherComponent = createReactClass({
getDefaultProps: function(){
return { "data": {} };
},
Expand All @@ -170,7 +170,7 @@ var OtherComponent = React.createClass({
}
});

var OtherPager = React.createClass({
var OtherPager = createReactClass({
getDefaultProps: function(){
return{
"maxPage": 0,
Expand Down
2 changes: 1 addition & 1 deletion examples/customization/customPaging.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@


<script type="text/jsx">
var OtherPager = React.createClass({
var OtherPager = createReactClass({
getDefaultProps: function(){
return{
"maxPage": 0,
Expand Down
2 changes: 1 addition & 1 deletion examples/customization/customRow.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<script type="text/jsx">
/** @jsx React.DOM */

var OtherComponent = React.createClass({
var OtherComponent = createReactClass({
getDefaultProps: function(){
return { "data": {} };
},
Expand Down
2 changes: 1 addition & 1 deletion examples/customization/nodata-component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div id="griddle-nodata-component"></div>

<script type="text/jsx">
var NoDataComponent = React.createClass({
var NoDataComponent = createReactClass({
render: function(){
return (<div className="noDataComponent">
<h1>No data is available</h1>
Expand Down
2 changes: 1 addition & 1 deletion examples/customization/testChart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
}
];

var TestLineChart = React.createClass({
var TestLineChart = createReactClass({
render: function(){
var type = this.props.type || 'Line'
var simpleLineChartData = {
Expand Down
2 changes: 1 addition & 1 deletion examples/externalData/external-simulated.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<script type="text/jsx">
var externalData = fakeData.slice(0, 53);

var SimulatedExternalComponent = React.createClass({
var SimulatedExternalComponent = createReactClass({
getInitialState: function(){
var initial = { "results": [],
"currentPage": 0,
Expand Down
4 changes: 2 additions & 2 deletions examples/externalData/external-swapi.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<script type="text/javascript" src="scripts/swapi.min.js"></script>

<script type="text/jsx">
var Loading = React.createClass({
var Loading = createReactClass({
getDefaultProps: function(){
return {
loadingText: "Loading"
Expand All @@ -14,7 +14,7 @@
}
});

var ExternalSwapiComponent = React.createClass({
var ExternalSwapiComponent = createReactClass({
getInitialState: function(){
var initial = { "results": [],
"currentPage": 0,
Expand Down
2 changes: 1 addition & 1 deletion examples/infiniteScroll/infiniteScrollExternalResults.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
}, 1000);
};

var Loading = React.createClass({
var Loading = createReactClass({
getDefaultProps: function(){
return {
loadingText: "Loading"
Expand Down
2 changes: 1 addition & 1 deletion examples/properties/properties.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -476,7 +476,7 @@
"default": "null"
}
];
var DefinitionItem = React.createClass({
var DefinitionItem = createReactClass({
getDefaultProps: function() {
return { "data": {
"property": "",
Expand Down
9 changes: 4 additions & 5 deletions modules/customFilterContainer.jsx.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
/*
See License / Disclaimer https://raw.githubusercontent.com/DynamicTyped/Griddle/master/LICENSE
*/
"use strict";
'use strict';

var React = require('react');
var createReactClass = require('create-react-class');

var CustomFilterContainer = React.createClass({
displayName: "CustomFilterContainer",

var CustomFilterContainer = createReactClass({
getDefaultProps: function getDefaultProps() {
return {
"placeholderText": ""
Expand All @@ -18,7 +17,7 @@ var CustomFilterContainer = React.createClass({

if (typeof that.props.customFilterComponent !== 'function') {
console.log("Couldn't find valid template.");
return React.createElement("div", null);
return React.createElement('div', null);
}

return React.createElement(that.props.customFilterComponent, {
Expand Down
Loading