react-jquery-datatables
Version:
React, DataTables.net (aka jQuery DataTables), fork of https://github.com/carlosrocha/react-data-components
392 lines (350 loc) • 15.7 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _reactDomServer = require('react-dom/server');
var _reactDomServer2 = _interopRequireDefault(_reactDomServer);
// eslint-disable-line no-unused-vars
// const buttonStyles = require('datatables.net-buttons-dt/css/buttons.dataTables.css'); // eslint-disable-line no-unused-vars
// const defaultStyles = require('datatables.net-dt/css/jquery.dataTables.css'); // eslint-disable-line no-unused-vars
// const responsiveStyles = require('datatables.net-responsive-dt/css/responsive.dataTables.css'); // eslint-disable-line no-unused-vars
var _reactRedux = require('react-redux');
var _reactRouterRedux = require('react-router-redux');
var _lodash = require('lodash');
var _lodash2 = _interopRequireDefault(_lodash);
var $ = require('jquery');
var dt = require('datatables.net'); // eslint-disable-line no-unused-vars
var buttons = require('datatables.net-buttons'); // eslint-disable-line no-unused-vars
var responsive = require('datatables.net-responsive'); // eslint-disable-line no-unused-vars
var responsiveBs = require('datatables.net-responsive');
require('datatables.net-buttons/js/buttons.colVis.js'); // Column visibility
require('datatables.net-buttons/js/buttons.flash.js'); // Flash file export
require('datatables.net-buttons/js/buttons.html5.js'); // HTML 5 file export
require('datatables.net-buttons/js/buttons.print.js'); // Print view button
var simpleGet = function simpleGet(key) {
return function (data) {
return data[key];
};
};
var keyGetter = function keyGetter(keys) {
return function (data) {
return keys.map(function (key) {
return data[key];
});
};
};
var isEmpty = function isEmpty(value) {
return value == null || value === '';
}; // eslint-disable-line eqeqeq
var getCellValue = function getCellValue(_ref, row) {
var prop = _ref.prop;
var defaultContent = _ref.defaultContent;
var render = _ref.render;
return(
// Return `defaultContent` if the value is empty.
!isEmpty(prop) && isEmpty(row[prop]) ? defaultContent : // eslint-disable-line no-nested-ternary
// Use the render function for the value.
render ? render(row[prop], row) :
// Add Commas for Number formatting
// addCommas ?
// Otherwise just return the value.
row[prop]
);
};
var getCellClass = function getCellClass(_ref2, row) {
var prop = _ref2.prop;
var className = _ref2.className;
return !isEmpty(prop) && isEmpty(row[prop]) ? 'empty-cell' : // eslint-disable-line no-nested-ternary
typeof className == 'function' ? className(row[prop], row) : // eslint-disable-line eqeqeq
className;
};
// This function accepts an integer, and produces a piece of HTML that shows it nicely with
// some empty space at "thousand" markers.
// Note, these space are not spaces, if you copy paste, they will not be visible.
var valPrettyPrint = function valPrettyPrint(orgVal) {
// Save after-comma text, if present
var period = orgVal.indexOf('.');
var frac = period >= 0 ? orgVal.substr(period) : '';
// Work on input as an integer
var val = '' + Math.trunc(orgVal);
var res = '';
while (val.length > 0) {
res = val.substr(Math.max(0, val.length - 3), 3) + res;
val = val.substr(0, val.length - 3);
if (val.length > 0) {
res = "<span class='thousandsSeparator'></span>" + res;
}
}
// Add the saved after-period information
res += frac;
return res;
};
// 2056776401.50 = 2,056,776,401.50
var addThousandsCommas = function addThousandsCommas(n) {
// eslint-disable-line no-unused-vars
n = n.toString();
while (true) {
// eslint-disable-line no-constant-condition
var n2 = n.replace(/(\d)(\d{3})($|,|\.)/g, '$1,$2$3');
if (n === n2) break;
n = n2;
}
return n;
};
var DataTable = (function (_Component) {
_inherits(DataTable, _Component);
_createClass(DataTable, null, [{
key: 'propTypes',
value: {
keys: _propTypes2['default'].oneOfType([_propTypes2['default'].arrayOf(_propTypes2['default'].string), _propTypes2['default'].string]).isRequired,
columns: _propTypes2['default'].arrayOf(_propTypes2['default'].shape({
title: _propTypes2['default'].string.isRequired,
prop: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].number]),
render: _propTypes2['default'].func,
sortable: _propTypes2['default'].bool,
defaultContent: _propTypes2['default'].string,
width: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].number]),
className: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].func])
})).isRequired,
dataArray: _propTypes2['default'].arrayOf(_propTypes2['default'].oneOfType([_propTypes2['default'].array, _propTypes2['default'].object])).isRequired,
buttons: _propTypes2['default'].array,
buildRowOptions: _propTypes2['default'].func,
pushState: _propTypes2['default'].func,
// the id of the div into which the table will render
targetId: _propTypes2['default'].string,
// clickHandler: if this is present, datatable will look for any cells with the
// class .dtClickAction. If the cell is clicked, then it will pass back
// data to the clickHandler as an option. The way to pass data is as an
// data-<foo> attribute on the html element. It's generally a good idea to
// pass a data-action-name attribute so the clickHandler can check which action
// it needs to fire (because there could be multiple types of handlers).
clickHandler: _propTypes2['default'].func,
sortBy: _propTypes2['default'].shape({
prop: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].number]),
order: _propTypes2['default'].oneOf(['asc', 'desc'])
})
},
enumerable: true
}, {
key: 'defaultProps',
value: {
buildRowOptions: function buildRowOptions() {
return {};
},
sortBy: {}
},
enumerable: true
}]);
function DataTable(props) {
_classCallCheck(this, _DataTable);
_get(Object.getPrototypeOf(_DataTable.prototype), 'constructor', this).call(this, props);
// console.log('Table constructor', this);
this._headers = [];
// bind event handlers in the constructor so they are only bound once for every instance
this.postRender = this.postRender.bind(this);
this.getDTMarkup = this.getDTMarkup.bind(this);
}
_createClass(DataTable, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.postRender();
}
}, {
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps) {
// check if dataArray changes, if so implement componentDidMount code in componentDidUpdate
var isEqualDataArray = _lodash2['default'].isEqual(this.props.dataArray, nextProps.dataArray);
return !isEqualDataArray;
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
// console.log('Table componentDidUpdate', this);
this.postRender();
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
// console.log('Table componentWillUnmount', this);
}
}, {
key: 'getDTMarkup',
value: function getDTMarkup() {
var _this = this;
var _props = // eslint-disable-line no-shadow
this.props;
var columns = _props.columns;
var keys = _props.keys;
var buildRowOptions = _props.buildRowOptions;
var dataArray = _props.dataArray;
var buttons = _props.buttons;
var pushState = _props.pushState;
var sortBy = _props.sortBy;
var targetId = _props.targetId;
var clickHandler = _props.clickHandler;
var rest = _objectWithoutProperties(_props, ['columns', 'keys', 'buildRowOptions', 'dataArray', 'buttons', 'pushState', 'sortBy', 'targetId', 'clickHandler']);
var headers = columns.map(function (col, idx) {
return _react2['default'].createElement(
'th',
{
ref: function (c) {
return _this._headers[idx] = c;
},
key: idx,
style: { width: col.width },
className: col.className,
role: 'columnheader',
scope: 'col' },
_react2['default'].createElement(
'span',
null,
col.title
)
);
});
var footers = columns.map(function (col, idx) {
return _react2['default'].createElement('th', { key: idx });
});
var getKeys = Array.isArray(keys) ? keyGetter(keys) : simpleGet(keys);
// console.log('dataArray', dataArray);
var rows = dataArray.map(function (row) {
return _react2['default'].createElement(
'tr',
_extends({ key: getKeys(row) }, buildRowOptions(row)),
columns.map(function (col, i) {
return _react2['default'].createElement(
'td',
{ key: i, className: getCellClass(col, row) },
getCellValue(col, row)
);
})
);
});
return _react2['default'].createElement(
'table',
_extends({ id: 'dt' }, rest),
_react2['default'].createElement(
'thead',
null,
_react2['default'].createElement(
'tr',
null,
headers
)
),
_react2['default'].createElement(
'tfoot',
null,
_react2['default'].createElement(
'tr',
null,
footers
)
),
_react2['default'].createElement(
'tbody',
null,
rows.length ? rows : _react2['default'].createElement(
'tr',
null,
_react2['default'].createElement(
'td',
{ colSpan: columns.length, className: 'text-center' },
'No data'
)
)
)
);
}
}, {
key: 'postRender',
value: function postRender() {
var targetId = this.props.targetId || 'dtContainer';
$('#' + targetId).empty(); // eslint-disable-line no-shadow
// console.log('post-processing', this);
var _props2 = this.props;
var columns = _props2.columns;
var sortBy = _props2.sortBy;
var buttons = _props2.buttons;
var pushState = _props2.pushState;
var clickHandler = _props2.clickHandler;
// eslint-disable-line no-shadow
var table = this.getDTMarkup();
var container = this.refs.tableDiv;
var renderedTable = _reactDomServer2['default'].renderToStaticMarkup(table, container);
if (buttons.indexOf('colvis')) {
buttons[buttons.indexOf('colvis')] = {
extend: 'colvis',
text: 'Columns'
};
}
$('#' + targetId).append(renderedTable);
var jqueryTable = $('#' + targetId + ' table');
jqueryTable.DataTable({ // eslint-disable-line new-cap
dom: '<"html5buttons"B>lTfgitp',
buttons: buttons,
'order': [[columns.findIndex(function (col) {
return col.prop === sortBy.prop;
}), sortBy.order]],
'pagingType': 'numbers',
'bAutoWidth': false,
'bDestroy': true,
responsive: true,
'initComplete': function formatTable() {
this.api().cells('.pushState').every(function __pushState() {
var cell = this;
var anchor = $(cell.node()).find('a');
var pusher = function pusher() {
return pushState(anchor.attr('href'));
};
anchor.click(function __pushTheState(event) {
event.preventDefault();
pusher();
});
});
if (clickHandler && typeof clickHandler === 'function') {
this.api().cells('.dtClickAction').every(function __triggerAction() {
var cell = this;
var anchor = $(cell.node()).find('a');
var cellData = anchor.data();
anchor.click(function __actionOnClick(event) {
event.preventDefault();
clickHandler(cellData);
});
});
}
}
});
}
}, {
key: 'render',
value: function render() {
var targetId = this.props.targetId || 'dtContainer';
// console.log('Table render', this);
return _react2['default'].createElement(
'div',
null,
_react2['default'].createElement('div', { ref: 'tableDiv', id: targetId, className: 'dtContainer' })
);
}
}]);
var _DataTable = DataTable;
DataTable = (0, _reactRedux.connect)(function () {
return {};
}, { pushState: _reactRouterRedux.push })(DataTable) || DataTable;
return DataTable;
})(_react.Component);
exports['default'] = DataTable;
module.exports = DataTable;
module.exports = exports['default'];