From 28aebcd1b12ccb7681172c15a0de7b247722eda9 Mon Sep 17 00:00:00 2001 From: Victor Date: Thu, 10 Aug 2017 22:38:19 -0700 Subject: [PATCH] Temp Fix for Deprecation and Removes Scary Warnings --- package.json | 64 +++++++++++++----------- rjt.js | 138 +++++++++++++++++++++++++-------------------------- 2 files changed, 103 insertions(+), 99 deletions(-) diff --git a/package.json b/package.json index 78a0b77..cfe9b2a 100644 --- a/package.json +++ b/package.json @@ -1,30 +1,34 @@ -{ - "name": "react-json-table", - "version": "0.1.1", - "description": "A simple but reactive table react component to display JSON data.", - "main": "rjt.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "repository": { - "type": "git", - "url": "https://github.com/arqex/react-json-table.git" - }, - "keywords": [ - "react", - "table", - "json" - ], - "author": "Javier Marquez", - "license": "MIT", - "bugs": { - "url": "https://github.com/arqex/react-json-table/issues" - }, - "homepage": "https://github.com/arqex/react-json-table", - "devDependencies": { - "gulp": "^3.9.0", - "gulp-insert": "^0.4.0", - "gulp-uglify": "^1.2.0", - "gulp-webpack": "^1.4.0" - } -} +{ + "name": "react-json-table", + "version": "0.1.1", + "description": "A simple but reactive table react component to display JSON data.", + "main": "rjt.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "https://github.com/arqex/react-json-table.git" + }, + "keywords": [ + "react", + "table", + "json" + ], + "author": "Javier Marquez", + "license": "MIT", + "bugs": { + "url": "https://github.com/arqex/react-json-table/issues" + }, + "homepage": "https://github.com/arqex/react-json-table", + "devDependencies": { + "gulp": "^3.9.0", + "gulp-insert": "^0.4.0", + "gulp-uglify": "^1.2.0", + "gulp-webpack": "^1.4.0" + }, + "dependencies": { + "create-react-class": "^15.6.0", + "react-dom-factories": "^1.0.1" + } +} diff --git a/rjt.js b/rjt.js index a85ea68..0cbceab 100644 --- a/rjt.js +++ b/rjt.js @@ -1,6 +1,6 @@ var React = require('react'); - -var $ = React.DOM; +import DOM from 'react-dom-factories'; +var createReactClass = require('create-react-class'); // Some shared attrs for JsonTable and JsonRow var defaultSettings = { @@ -11,14 +11,70 @@ var defaultSettings = { getSetting = function( name ){ var settings = this.props.settings; - if( !settings || typeof settings[ name ] == 'undefined' ) + if( !settings || typeof settings[ name ] === 'undefined' ) return defaultSettings[ name ]; return settings[ name ]; } ; -var JsonTable = React.createClass({ +var Row = createReactClass({ + getSetting: getSetting, + + render: function() { + var me = this, + props = this.props, + cellClass = this.getSetting('cellClass'), + rowClass = this.getSetting('rowClass'), + prefix = this.getSetting('classPrefix'), + cells = props.columns.map( function( col ){ + var content = col.cell, + key = col.key, + className = prefix + 'Cell ' + prefix + 'Cell_' + key + ; + + if( cellClass ) + className = cellClass( className, key, props.item ); + + if( typeof content === 'function' ) + content = content( props.item, key ); + + return DOM.td( { + className: className, + key: key, + "data-key": key, + onClick: me.onClickCell + }, content ); + }) + ; + + var className = prefix + 'Row ' + prefix + + (props.i % 2 ? 'Odd' : 'Even') + ; + + if( props.reactKey ) + className += ' ' + prefix + 'Row_' + props.reactKey; + + if( rowClass ) + className = rowClass( className, props.item ); + + return DOM.tr({ + className: className, + onClick: me.onClickRow, + key: this.props.reactKey + }, cells ); + }, + + onClickCell: function( e ){ + this.props.onClickCell( e, e.target.dataset.key, this.props.item ); + }, + + onClickRow: function( e ){ + this.props.onClickRow( e, this.props.item ); + } +}); + +var JsonTable = createReactClass({ getSetting: getSetting, render: function(){ @@ -31,7 +87,7 @@ var JsonTable = React.createClass({ var tableClass = this.props.className || this.getSetting( 'classPrefix' ) + 'Table'; - return $.table({ className: tableClass }, contents ); + return DOM.table({ className: tableClass }, contents ); }, renderHeader: function( cols ){ @@ -43,15 +99,15 @@ var JsonTable = React.createClass({ if( headerClass ) className = headerClass( className, col.key ); - return $.th( + return DOM.th( { className: className, key: col.key, onClick: me.onClickHeader, "data-key": col.key }, col.label ); }) ; - return $.thead({ key: 'th' }, - $.tr({ className: prefix + 'Header' }, cells ) + return DOM.thead({ key: 'th' }, + DOM.tr({ className: prefix + 'Header' }, cells ) ); }, @@ -63,7 +119,7 @@ var JsonTable = React.createClass({ ; if( !items || !items.length ) - return $.tbody({key:'body'}, [$.tr({key:'row'}, $.td({key:'column'}, this.getSetting('noRowsMessage') ))]); + return DOM.tbody({key:'body'}, [DOM.tr({key:'row'}, DOM.td({key:'column'}, this.getSetting('noRowsMessage') ))]); var rows = items.map( function( item ){ var key = me.getKey( item, i ); @@ -79,7 +135,7 @@ var JsonTable = React.createClass({ }); }); - return $.tbody({key:'body'}, rows); + return DOM.tbody({key:'body'}, rows); }, getItemField: function( item, field ){ @@ -103,7 +159,7 @@ var JsonTable = React.createClass({ return cols.map( function( col ){ var key; - if( typeof col == 'string' ){ + if( typeof col === 'string' ){ return { key: col, label: col, @@ -111,7 +167,7 @@ var JsonTable = React.createClass({ }; } - if( typeof col == 'object' ){ + if( typeof col === 'object' ){ key = col.key || col.label; // This is about get default column definition @@ -170,60 +226,4 @@ var JsonTable = React.createClass({ } }); -var Row = React.createClass({ - getSetting: getSetting, - - render: function() { - var me = this, - props = this.props, - cellClass = this.getSetting('cellClass'), - rowClass = this.getSetting('rowClass'), - prefix = this.getSetting('classPrefix'), - cells = props.columns.map( function( col ){ - var content = col.cell, - key = col.key, - className = prefix + 'Cell ' + prefix + 'Cell_' + key - ; - - if( cellClass ) - className = cellClass( className, key, props.item ); - - if( typeof content == 'function' ) - content = content( props.item, key ); - - return $.td( { - className: className, - key: key, - "data-key": key, - onClick: me.onClickCell - }, content ); - }) - ; - - var className = prefix + 'Row ' + prefix + - (props.i % 2 ? 'Odd' : 'Even') - ; - - if( props.reactKey ) - className += ' ' + prefix + 'Row_' + props.reactKey; - - if( rowClass ) - className = rowClass( className, props.item ); - - return $.tr({ - className: className, - onClick: me.onClickRow, - key: this.props.reactKey - }, cells ); - }, - - onClickCell: function( e ){ - this.props.onClickCell( e, e.target.dataset.key, this.props.item ); - }, - - onClickRow: function( e ){ - this.props.onClickRow( e, this.props.item ); - } -}); - -module.exports = JsonTable; +module.exports = JsonTable; \ No newline at end of file