Skip to content

Commit 38c8ab5

Browse files
arqexarqex
committed
First build version, added build script.
1 parent 61efe55 commit 38c8ab5

File tree

5 files changed

+344
-13
lines changed

5 files changed

+344
-13
lines changed

‎build/react-json-table.js

+268
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
1+
/*
2+
react-json-table v0.0.1
3+
https://github.com/arqex/react-json-table
4+
MIT: https://github.com/arqex/react-json-table/raw/master/LICENSE
5+
*/
6+
(function webpackUniversalModuleDefinition(root, factory) {
7+
if(typeof exports === 'object' && typeof module === 'object')
8+
module.exports = factory(require(undefined));
9+
else if(typeof define === 'function' && define.amd)
10+
define([], factory);
11+
else if(typeof exports === 'object')
12+
exports["JsonTable"] = factory(require(undefined));
13+
else
14+
root["JsonTable"] = factory(root["React"]);
15+
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
16+
return /******/ (function(modules) { // webpackBootstrap
17+
/******/ // The module cache
18+
/******/ var installedModules = {};
19+
20+
/******/ // The require function
21+
/******/ function __webpack_require__(moduleId) {
22+
23+
/******/ // Check if module is in cache
24+
/******/ if(installedModules[moduleId])
25+
/******/ return installedModules[moduleId].exports;
26+
27+
/******/ // Create a new module (and put it into the cache)
28+
/******/ var module = installedModules[moduleId] = {
29+
/******/ exports: {},
30+
/******/ id: moduleId,
31+
/******/ loaded: false
32+
/******/ };
33+
34+
/******/ // Execute the module function
35+
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
36+
37+
/******/ // Flag the module as loaded
38+
/******/ module.loaded = true;
39+
40+
/******/ // Return the exports of the module
41+
/******/ return module.exports;
42+
/******/ }
43+
44+
45+
/******/ // expose the modules object (__webpack_modules__)
46+
/******/ __webpack_require__.m = modules;
47+
48+
/******/ // expose the module cache
49+
/******/ __webpack_require__.c = installedModules;
50+
51+
/******/ // __webpack_public_path__
52+
/******/ __webpack_require__.p = "";
53+
54+
/******/ // Load entry module and return exports
55+
/******/ return __webpack_require__(0);
56+
/******/ })
57+
/************************************************************************/
58+
/******/ ([
59+
/* 0 */
60+
/***/ function(module, exports, __webpack_require__) {
61+
62+
var React = __webpack_require__(1);
63+
64+
var $ = React.DOM;
65+
var JsonTable = React.createClass({
66+
defaultSettings: {
67+
header: true,
68+
noRowsMessage: 'No items'
69+
},
70+
71+
getSetting: function( name ){
72+
var settings = this.props.settings;
73+
74+
if( !settings || typeof settings[ name ] == 'undefined' )
75+
return this.defaultSettings[ name ];
76+
77+
return settings[ name ];
78+
},
79+
80+
render: function(){
81+
var cols = this.normalizeColumns(),
82+
contents = [this.renderRows( cols )]
83+
;
84+
85+
if( this.getSetting('header') )
86+
contents.unshift( this.renderHeader( cols ) );
87+
88+
return $.table({ className: "jsonTable" }, contents );
89+
},
90+
91+
renderHeader: function( cols ){
92+
var me = this,
93+
cells = cols.map( function(col){
94+
return $.th(
95+
{ className: 'jsonColumn', key: col.key, onClick: me.onClickHeader, "data-key": col.key },
96+
col.label
97+
);
98+
})
99+
;
100+
101+
return $.thead({ key: 'th'},
102+
$.tr({ className: 'jsonHeader', key: 'h', "data-key": 'header' }, cells )
103+
);
104+
},
105+
106+
renderRows: function( cols ){
107+
var me = this,
108+
items = this.props.items,
109+
i = 1
110+
;
111+
112+
if( !items || !items.length )
113+
return $.tbody({}, [$.tr({}, $.td({}, this.getSetting('noRowsMessage') ))]);
114+
115+
var rows = items.map( function( item ){
116+
return React.createElement(Row, {
117+
key: me.getKey( item ),
118+
item: item,
119+
columns: cols,
120+
i: i++,
121+
onClickRow: me.onClickItem,
122+
onClickCell: me.onClickCell
123+
});
124+
});
125+
126+
return $.tbody({}, rows);
127+
},
128+
129+
getItemField: function( item, field ){
130+
return item[ field ];
131+
},
132+
133+
normalizeColumns: function(){
134+
var getItemField = this.getItemField,
135+
cols = this.props.columns,
136+
items = this.props.items
137+
;
138+
139+
if( !cols ){
140+
if( !items || !items.length )
141+
return [];
142+
143+
return Object.keys( items[0] ).map( function( key ){
144+
return { key: key, label: key, cell: getItemField };
145+
});
146+
}
147+
148+
return cols.map( function( col ){
149+
var key;
150+
if( typeof col == 'string' ){
151+
return {
152+
key: col,
153+
label: col,
154+
cell: getItemField
155+
};
156+
}
157+
158+
if( typeof col == 'object' ){
159+
key = col.key || col.label;
160+
161+
// This is about get default column definition
162+
// we use label as key if not defined
163+
// we use key as label if not defined
164+
// we use getItemField as cell function if not defined
165+
return {
166+
key: key,
167+
label: col.label || key,
168+
cell: col.cell || getItemField
169+
};
170+
}
171+
172+
return {
173+
key: 'unknown',
174+
name:'unknown',
175+
cell: 'Unknown'
176+
};
177+
});
178+
},
179+
180+
getKey: function( item ){
181+
var field = this.props.settings && this.props.settings.keyField;
182+
if( field && item[ field ] )
183+
return item[ field ];
184+
185+
if( item.id )
186+
return item.id;
187+
188+
if( item._id )
189+
return item._id;
190+
},
191+
192+
shouldComponentUpdate: function(){
193+
return true;
194+
},
195+
196+
onClickItem: function( e, item ){
197+
if( this.props.onClickItem ){
198+
this.props.onClickItem( e, item );
199+
}
200+
},
201+
202+
onClickHeader: function( e ){
203+
if( this.props.onClickHeader ){
204+
this.props.onClickHeader( e, e.target.dataset.key );
205+
}
206+
},
207+
208+
onClickCell: function( e, key, item ){
209+
if( this.props.onClickCell ){
210+
this.props.onClickCell( e, key, item );
211+
}
212+
}
213+
});
214+
215+
var Row = React.createClass({
216+
render: function() {
217+
var me = this,
218+
cells = this.props.columns.map( function( col ){
219+
var content = col.cell,
220+
key = col.key
221+
;
222+
223+
if( typeof content == 'function' )
224+
content = content( me.props.item, key );
225+
226+
return $.td( {
227+
className: 'jsonCell',
228+
key: key,
229+
"data-key": key,
230+
onClick: me.onClickCell
231+
}, content );
232+
})
233+
;
234+
235+
var className = 'jsonRow json';
236+
if( this.props.i % 2 )
237+
className += 'Odd';
238+
else
239+
className += 'Even';
240+
241+
return $.tr({
242+
className: className,
243+
onClick: me.onClickRow
244+
}, cells );
245+
},
246+
247+
onClickCell: function( e ){
248+
this.props.onClickCell( e, e.target.dataset.key, this.props.item );
249+
},
250+
251+
onClickRow: function( e ){
252+
this.props.onClickRow( e, this.props.item );
253+
}
254+
});
255+
256+
module.exports = JsonTable;
257+
258+
259+
/***/ },
260+
/* 1 */
261+
/***/ function(module, exports, __webpack_require__) {
262+
263+
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
264+
265+
/***/ }
266+
/******/ ])
267+
});
268+
;

‎build/react-json-table.min.js

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gulpfile.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
var gulp = require('gulp'),
2+
uglify = require('gulp-uglify'),
3+
insert = require('gulp-insert'),
4+
webpack = require('gulp-webpack')
5+
;
6+
7+
var packageName = 'react-json-table';
8+
var pack = require( './package.json' );
9+
10+
var getWPConfig = function( filename ){
11+
return {
12+
externals: {
13+
react: {
14+
root: 'React'
15+
}
16+
},
17+
output: {
18+
libraryTarget: 'umd',
19+
library: 'JsonTable',
20+
filename: filename + '.js'
21+
}
22+
};
23+
};
24+
25+
var cr = ('/*\n%%name%% v%%version%%\n%%homepage%%\n%%license%%: https://github.com/arqex/' + packageName + '/raw/master/LICENSE\n*/\n')
26+
.replace( '%%name%%', pack.name)
27+
.replace( '%%version%%', pack.version)
28+
.replace( '%%license%%', pack.license)
29+
.replace( '%%homepage%%', pack.homepage)
30+
;
31+
32+
function build( config, minify ){
33+
var stream = gulp.src('./rjt.js')
34+
.pipe( webpack( config ) )
35+
;
36+
37+
if( minify ){
38+
stream.pipe( uglify() );
39+
}
40+
41+
return stream.pipe( insert.prepend( cr ) )
42+
.pipe( gulp.dest('build/') )
43+
;
44+
}
45+
46+
gulp.task("build", function( callback ) {
47+
build( getWPConfig( packageName ) );
48+
return build( getWPConfig( packageName + '.min' ), true );
49+
});
50+
51+
gulp.task( 'default', ['build'] );

‎package.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,11 @@
2020
"bugs": {
2121
"url": "https://github.com/arqex/react-json-table/issues"
2222
},
23-
"homepage": "https://github.com/arqex/react-json-table"
23+
"homepage": "https://github.com/arqex/react-json-table",
24+
"devDependencies": {
25+
"gulp": "^3.9.0",
26+
"gulp-insert": "^0.4.0",
27+
"gulp-uglify": "^1.2.0",
28+
"gulp-webpack": "^1.4.0"
29+
}
2430
}

0 commit comments

Comments
 (0)