Skip to content

Commit

Permalink
ES6 using react 0.14
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tjorriemorrie
Tjorriemorrie committed Nov 8, 2015
1 parent c75a665 commit 6ab532e
Show file tree
Hide file tree
Showing 26 changed files with 96,277 additions and 539 deletions.
42 changes: 18 additions & 24 deletions README.md
View file
Expand Up @@ -7,21 +7,15 @@ Features: pagination, ordering, formatting, editing
## Installation
---

Install via bower:
Install via npm:

bower install -S react-smallgrid
npm install -S react-smallgrid



#### Dependencies

This library requires [lodash](https://www.lodash.com):

bower install -S lodash

This library requires [jquery](https://www.jquery.com):

bower install -S jquery

This library is styled with [bootstrap](https://getbootstrap.com):

Expand All @@ -34,11 +28,9 @@ Full example (incl lodash and bootstrap):

<link href="bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet">
<link href="react-smallgrid/dist/smallgrid.min.css" rel="stylesheet">

<script src="jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="lodash/lodash.js" type="text/javascript"></script>
<script src="react-smallgrid/dist/smallgrid.min.js" type="text/javascript"></script>


## Basic Usage
Expand All @@ -47,14 +39,16 @@ Full example (incl lodash and bootstrap):
### Foreword

The table can only be ordered by one column; I'll probably add it to support multiple
columns in the futre.
columns in the future.

The table is hardcoded with pagination. Currently the row limit/page size is hardcoded at 20. I'll
probably change it in the future, and you can also easily change it and run the gulp.

Also I've used bootstrap CSS, and I'll probably make it customisable in the future.

I'll probably also remove the jquery dependency, in the future, as it is used on ~3 lines.
Just require the library:

> import SmallGrid from 'react-smallgrid'
### Minimal

Expand All @@ -77,8 +71,8 @@ The `cols` attribute has the following required property for the objects:
]}
/>

[refer example](examples/1_usage_basic_minimal.html)
![alt tag](examples/1_usage_basic_minimal.png)
[refer example](examples/1_basic_minimal.html)
![alt tag](examples/1_basic_minimal.png)



Expand All @@ -95,8 +89,8 @@ Add the property `name` to the cols objects for the heading of the columns:
]}
/>

[refer example](examples/2_usage_basic_headings.html)
![alt tag](examples/2_usage_basic_headings.png)
[refer example](examples/2_basic_headings.html)
![alt tag](examples/2_basic_headings.png)


### Nested objects
Expand All @@ -114,8 +108,8 @@ Add the nested object to the `key` of the columns:
]}
/>

[refer example](examples/3_usage_basic_nested_objects.html)
![alt tag](examples/3_usage_basic_nested_objects.png)
[refer example](examples/3_basic_nested_objects.html)
![alt tag](examples/3_basic_nested_objects.png)


## Advanced Usage
Expand Down Expand Up @@ -143,8 +137,8 @@ You can pass `format` function on the `cols` object for the formatting you wish
/>


[refer example](examples/4_usage_advanced_formatting.html)
![alt tag](examples/4_usage_advanced_formatting.png)
[refer example](examples/4_advanced_formatting.html)
![alt tag](examples/4_advanced_formatting.png)


### Editing
Expand Down Expand Up @@ -178,9 +172,9 @@ will also be stopped. The function provided to edit will then receive three para
/>


[refer example](examples/5_usage_advanced_editing.html)
![alt tag](examples/5_usage_advanced_editing.png)
[refer example](examples/5_advanced_editing.html)
![alt tag](examples/5_advanced_editing.png)

![alt tag](examples/5_usage_advanced_editing_values_1.png)
![alt tag](examples/5_advanced_editing_values_1.png)

![alt tag](examples/5_usage_advanced_editing_values_2.png)
![alt tag](examples/5_advanced_editing_values_2.png)
181 changes: 97 additions & 84 deletions dist/js/smallgrid.js
View file
Expand Up @@ -31407,9 +31407,9 @@ var SmallGrid = (function (_React$Component) {

console.info('[SmallGrid] constructor');

var _this2 = _possibleConstructorReturn(this, Object.getPrototypeOf(SmallGrid).call(this, props));
var _this3 = _possibleConstructorReturn(this, Object.getPrototypeOf(SmallGrid).call(this, props));

_this2.state = {
_this3.state = {
edit_idx: null,
edit_prop: null,
limit: 20,
Expand All @@ -31418,7 +31418,7 @@ var SmallGrid = (function (_React$Component) {
sort_by: null,
sort_dir: 'desc'
};
return _this2;
return _this3;
}

_createClass(SmallGrid, [{
Expand Down Expand Up @@ -31521,71 +31521,11 @@ var SmallGrid = (function (_React$Component) {
//console.info('[SmallGrid] getEnd', end, '(excl)');
return end;
}

// onKeyDown: function (e) {
// console.info('[SmallGrid] onKeyDown');
// if (e.keyCode == 27) {
// console.info('[SmallGrid] edit cancelled');
// this.editExit();
// }
// },

//editExit() {
// console.info('Exited editing');
// if (this.state.edit_idx != null) {
// this.setState({
// edit_idx: null,
// edit_prop: null
// });
// }
//}

// editCell: function (idx, prop) {
// console.info('[SmallGrid] editCell', idx, prop);
// this.setState({
// edit_idx: idx,
// edit_prop: prop
// });
// },
//
// editValue: function (e) {
//// console.info('[SmallGrid] editValue', e);
// e.preventDefault();
//
// this.editExit();
// console.info('[SmallGrid] editValue: exiting editing');
//
// var form = $(React.findDOMNode(this.refs.formEdit));
// console.info('[SmallGrid] editValue: form', form);
// var val = form.find('[name=val]').val();
// console.info('[SmallGrid] editValue: val', val);
// var ori = form.find('[name=ori]').val();
// console.info('[SmallGrid] editValue: ori', ori);
//
// if (val != ori) {
// var row_i = parseInt(form.find('[name=row_i]').val());
// console.info('[SmallGrid] editValue row_i', row_i);
// var i = this.getStart() + row_i;
// console.info('[SmallGrid] editValue i', i);
// var row = this.props.rows[i];
// console.info('[SmallGrid] editValue row', row);
// var prop = form.find('[name=prop]').val();
// console.info('[SmallGrid] editValue col_key', prop);
//
// _.set(this.props.rows[i], prop, val);
// console.info('[SmallGrid] editValue row val updated');
//
// var col = _.filter(this.getCols(), {'key': prop})[0];
// console.info('[SmallGrid] editValue: col', col);
// console.info('[SmallGrid] editValue: col edit', col.edit);
// col.edit(row, prop, val);
// console.info('[SmallGrid] editValue: sending vals to function');
// }
// },

}, {
key: 'getCell',
value: function getCell(row_i, row, col_i, col) {
var _this = this;

//console.info('[SmallGrid] getCell', row_i, row, col_i, col);
var val = col.format(_lodash2.default.get(row, col.key, col.default));

Expand All @@ -31595,11 +31535,18 @@ var SmallGrid = (function (_React$Component) {
{ key: col_i },
_react2.default.createElement(
'form',
{ ref: 'formEdit', onSubmit: this.editValue },
_react2.default.createElement('input', { type: 'hidden', name: 'row_i', value: row_i }),
_react2.default.createElement('input', { type: 'hidden', name: 'prop', value: col.key }),
_react2.default.createElement('input', { type: 'hidden', name: 'ori', value: val }),
_react2.default.createElement('input', { type: 'text', name: 'val', onKeyDown: this.onKeyDown, defaultValue: val, autoFocus: true })
{ onSubmit: this.editValue.bind(this) },
_react2.default.createElement('input', {
type: 'text',
name: col.key,
defaultValue: val,
ref: function ref(c) {
return _this._input = c;
},
onKeyDown: this.onKeyDown.bind(this),
'data-row': row_i,
autoFocus: true
})
)
);
} else {
Expand Down Expand Up @@ -31635,13 +31582,13 @@ var SmallGrid = (function (_React$Component) {
key: 'setPage',
value: function setPage(page) {
//console.info('[SmallGrid] setPage', page);
//this.editExit();
this.editExit();
this.setState({ page: page });
}
}, {
key: 'sortBy',
value: function sortBy(col) {
//this.editExit();
this.editExit();
var s = {};

if (this.state.sort_by == col) {
Expand Down Expand Up @@ -31683,7 +31630,7 @@ var SmallGrid = (function (_React$Component) {
}, {
key: 'render',
value: function render() {
var _this = this;
var _this2 = this;

console.info('[SmallGrid] render');
if (!this.props.hasOwnProperty('rows') || this.props.rows.length < 1) {
Expand All @@ -31695,9 +31642,9 @@ var SmallGrid = (function (_React$Component) {
} else {
var _ret = (function () {

var pages = _this.getPages();
var cols = _this.getCols();
var rows = _this.getRows();
var pages = _this2.getPages();
var cols = _this2.getCols();
var rows = _this2.getRows();

return {
v: _react2.default.createElement(
Expand All @@ -31720,7 +31667,7 @@ var SmallGrid = (function (_React$Component) {
{ key: col_i, onClick: this.sortBy.bind(this, col.key), className: this.state.sort_by != col.key ? '' : 'sort-' + this.state.sort_dir },
col.name
);
}, _this)
}, _this2)
)
),
_react2.default.createElement(
Expand All @@ -31734,7 +31681,7 @@ var SmallGrid = (function (_React$Component) {
return this.getCell(row_i, row, col_i, col);
}, this)
);
}, _this)
}, _this2)
),
_react2.default.createElement(
'tfoot',
Expand All @@ -31750,10 +31697,10 @@ var SmallGrid = (function (_React$Component) {
{ className: 'pagination' },
_react2.default.createElement(
'li',
{ className: _this.state.page < 2 ? 'disabled' : '' },
{ className: _this2.state.page < 2 ? 'disabled' : '' },
_react2.default.createElement(
'a',
{ onClick: _this.setPage.bind(_this, _this.state.page - 1), href: '#library_table', 'aria-label': 'Previous' },
{ onClick: _this2.setPage.bind(_this2, _this2.state.page - 1), href: '#library_table', 'aria-label': 'Previous' },
_react2.default.createElement(
'span',
{ 'aria-hidden': 'true' },
Expand All @@ -31771,13 +31718,13 @@ var SmallGrid = (function (_React$Component) {
v
)
);
}).bind(_this)),
}).bind(_this2)),
_react2.default.createElement(
'li',
{ className: _this.state.page >= _this.state.total_pages ? 'disabled' : '' },
{ className: _this2.state.page >= _this2.state.total_pages ? 'disabled' : '' },
_react2.default.createElement(
'a',
{ onClick: _this.setPage.bind(_this, _this.state.page + 1), href: '#library_table', 'aria-label': 'Next' },
{ onClick: _this2.setPage.bind(_this2, _this2.state.page + 1), href: '#library_table', 'aria-label': 'Next' },
_react2.default.createElement(
'span',
{ 'aria-hidden': 'true' },
Expand All @@ -31793,7 +31740,7 @@ var SmallGrid = (function (_React$Component) {
_react2.default.createElement(
'span',
{ className: 'pull-right' },
_this.props.rows.length,
_this2.props.rows.length,
' rows'
)
)
Expand All @@ -31807,6 +31754,72 @@ var SmallGrid = (function (_React$Component) {
if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
}
}
}, {
key: 'onKeyDown',
value: function onKeyDown(e) {
console.info('[SmallGrid] onKeyDown', e.keyCode);
if (e.keyCode == 27) {
console.info('[SmallGrid] edit cancelled');
this.editExit();
}
}
}, {
key: 'editExit',
value: function editExit() {
console.info('Exited editing');
if (this.state.edit_idx != null) {
this.setState({
edit_idx: null,
edit_prop: null
});
}
}
}, {
key: 'editCell',
value: function editCell(idx, prop) {
console.info('[SmallGrid] editCell', idx, prop);
this.setState({
edit_idx: idx,
edit_prop: prop
});
}
}, {
key: 'editValue',
value: function editValue(e) {
console.info('[SmallGrid] editValue', e);
e.preventDefault();

this.editExit();
console.info('[SmallGrid] editValue: exiting editing');

var row_i = parseInt(this._input.dataset.row);
var col_name = this._input.name;
var val = this._input.value;
var defval = this._input.defaultValue;

console.info('[SmallGrid] editValue: row_i', row_i);
console.info('[SmallGrid] editValue: col_name', col_name);
console.info('[SmallGrid] editValue: val', val);
console.info('[SmallGrid] editValue: deval', defval);

if (val != defval) {

var i = this.getStart() + row_i;
console.info('[SmallGrid] editValue: i', i);

var row = this.props.rows[i];
console.info('[SmallGrid] editValue: row', row);

_lodash2.default.set(this.props.rows[i], col_name, val);
console.info('[SmallGrid] editValue: row val updated');

var col = _lodash2.default.filter(this.getCols(), { 'key': col_name })[0];
console.info('[SmallGrid] editValue: col', col);

console.info('[SmallGrid] editValue: col edit', col.edit);
col.edit(row, col_name, val);
}
}
}]);

return SmallGrid;
Expand Down

0 comments on commit 6ab532e

Please sign in to comment.