react-sexy-table/lib/index.js

Customized fixed data table

'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };

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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _fixedDataTable = require('fixed-data-table');

var _MyCell = require('./MyCell');

var _MyCell2 = _interopRequireDefault(_MyCell);

var _MyCellFooter = require('./MyCellFooter');

var _MyCellFooter2 = _interopRequireDefault(_MyCellFooter);

var _reactDimensions = require('react-dimensions');

var _reactDimensions2 = _interopRequireDefault(_reactDimensions);

var _SearchForm = require('./SearchForm');

var _SearchForm2 = _interopRequireDefault(_SearchForm);

var _SearchHistory = require('./SearchHistory');

var _SearchHistory2 = _interopRequireDefault(_SearchHistory);

require('../style.css');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

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 XTable = function (_Component) {
	_inherits(XTable, _Component);

	function XTable() {
		var _Object$getPrototypeO;

		var _temp, _this, _ret;

		_classCallCheck(this, XTable);

		for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
			args[_key] = arguments[_key];
		}

		return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(XTable)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {}, _this.recordCount = function () {
			return _react2.default.createElement(
				'b',
				null,
				(_this.props.mode == 'FILTER' ? _this.props.filteredData.length : _this.props.data.length) + ' of ' + _this.props.data.length + ' Record(s)'
			);
		}, _this.newData = function () {
			if (_this.props.mode == 'FILTER') {
				return _this.props.filteredData;
			}

			return _this.props.data;
		}, _this.onChangeCheck = function (nextState) {
			_this.setState(nextState);
		}, _this.searchHistoryRender = function () {

			if (Array.isArray(_this.props.search.history)) {
				return _react2.default.createElement(_SearchHistory2.default, { data: _this.props.search.history });
			}

			if (_typeof(_this.props.search.history) == 'object') {
				return _this.props.search.history;
			}

			return null;
		}, _this.footer = function (data, item) {

			if (item.footer && ['total'].indexOf(item.footer.type) > -1) {
				return _react2.default.createElement(_MyCellFooter2.default, { data: data, type: item.footer.type, field: item.footer.value });
			}

			if (item.footer && ['pager'].indexOf(item.footer.type) > -1) {
				return _react2.default.createElement(
					_fixedDataTable.Cell,
					null,
					_this.recordCount()
				);
			}

			return _react2.default.createElement(
				_fixedDataTable.Cell,
				null,
				item.footer && item.footer.value ? item.footer.value : null
			);
		}, _temp), _possibleConstructorReturn(_this, _ret);
	}

	_createClass(XTable, [{
		key: 'componentWillMount',
		value: function componentWillMount() {

			var nextState = {};

			if (this.props.columns.length > 0) {
				this.props.columns.forEach(function (item) {
					if (item.show) {
						nextState[item.id] = true;
					} else {
						nextState[item.id] = false;
					}
				});
			}

			this.setState(nextState);
		}
	}, {
		key: 'render',
		value: function render() {
			var _this2 = this;

			var newData = this.newData();

			return _react2.default.createElement(
				'div',
				{
					containerWidth: this.props.containerWidth,
					containerHeight: this.props.containerHeight, className: 'panel' },
				this.props.search ? _react2.default.createElement(
					'div',
					{ className: 'search-form-wrapper' },
					_react2.default.createElement(_SearchForm2.default, {
						columnCheckData: this.state,
						onChangeCheck: this.onChangeCheck,
						columns: this.props.columns,
						settings: this.props.settings,
						size: this.props.size,
						mode: this.props.mode,
						panel: this.props.panel,
						data: this.props.search.data,
						onClear: this.props.search.onClear,
						onChange: this.props.search.onChange,
						onSubmit: this.props.search.onSubmit,
						onChangePanel: this.props.search.onChangePanel })
				) : null,
				this.props.isWaiting ? _react2.default.createElement(
					'div',
					{ className: 'text-center bg-info' },
					_react2.default.createElement('i', { className: 'fa fa-circle-o-notch fa-spin' }),
					' Loading...'
				) : null,
				!this.props.isWaiting && this.props.panel == null && this.props.mode == 'FILTER' && newData.length == 0 ? _react2.default.createElement(
					'div',
					{ className: 'text-center bg-danger' },
					_react2.default.createElement(
						'b',
						null,
						'NO RECORD FOUND'
					)
				) : null,
				!this.props.isWaiting && this.props.panel == null && this.props.mode == null && newData.length == 0 ? _react2.default.createElement(
					'div',
					{ className: 'text-center bg-danger' },
					_react2.default.createElement(
						'b',
						null,
						'NO RECORD FOUND'
					)
				) : null,
				this.props.panel == 'SETTINGS' ? _react2.default.createElement(
					'div',
					{ className: 'search-history clearfix' },
					_react2.default.createElement(
						'div',
						{ className: this.props.size == 'sm' ? 'col-md-12' : 'col-md-8' },
						_react2.default.createElement(
							'b',
							null,
							'Search History'
						),
						_react2.default.createElement('br', null),
						_react2.default.createElement('br', null),
						this.searchHistoryRender()
					)
				) : null,
				this.props.panel != 'SETTINGS' ? _react2.default.createElement(
					_fixedDataTable.Table,
					{
						onRowClick: this.props.onRowClick,
						rowHeight: this.props.rowHeight,
						rowsCount: newData.length,
						width: this.props.containerWidth,
						height: this.props.containerHeight,
						headerHeight: this.props.headerHeight,
						footerHeight: this.props.footerHeight },
					this.props.columns.map(function (item, index) {

						if (item.id.indexOf(_this2.state) && _this2.state[item.id] == true) {
							return _react2.default.createElement(_fixedDataTable.Column, {

								key: 'xcol' + index,
								flexGrow: item.flexGrow || null,
								header: _react2.default.createElement(
									_fixedDataTable.Cell,
									null,
									item.header
								) || null,
								align: item.align || 'left',
								width: item.width || 100,
								cell: _react2.default.createElement(_MyCell2.default, {
									mode: _this2.props.mode,
									selectedIndex: _this2.props.selectedIndex,
									data: newData,
									field: item.cell,
									format: item.dateFormat || null,
									fromFormat: item.fromDateFormat || null,
									type: item.type || false,
									customFormat: item.customFormat || false }),
								footer: _this2.footer(newData, item) });
						}
					})
				) : null
			);
		}
	}]);

	return XTable;
}(_react.Component);

XTable.propTypes = {
	search: _react.PropTypes.shape({
		className: _react.PropTypes.string,
		data: _react.PropTypes.object.isRequired,
		onClear: _react.PropTypes.func.isRequired,
		onChange: _react.PropTypes.func.isRequired,
		onSubmit: _react.PropTypes.func.isRequired,
		onChangePanel: _react.PropTypes.func.isRequired,
		history: _react.PropTypes.oneOfType([_react.PropTypes.array, _react.PropTypes.element])
	}),
	onRowClick: _react.PropTypes.func,
	settings: _react.PropTypes.bool,
	mode: _react.PropTypes.oneOf([null, 'FILTER']),
	panel: _react.PropTypes.oneOf([null, 'SETTINGS']),
	data: _react.PropTypes.array,
	filteredData: _react.PropTypes.array,
	rowHeight: _react.PropTypes.number,
	headerHeight: _react.PropTypes.number,
	footerHeight: _react.PropTypes.number,
	columns: _react.PropTypes.arrayOf(_react.PropTypes.shape({
		searchAble: _react.PropTypes.bool,
		id: _react.PropTypes.string.isRequired,
		show: _react.PropTypes.bool,
		flexGrow: _react.PropTypes.number,
		header: _react.PropTypes.string.isRequired,
		cell: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number, _react.PropTypes.func]),
		type: _react.PropTypes.oneOf(['html', 'number', 'currency', 'string', 'date', 'image', 'custom']).isRequired,
		customFormat: _react.PropTypes.func,
		footer: _react.PropTypes.shape({
			type: _react.PropTypes.oneOf(['total', 'pager']),
			value: function value(props, propName, componentName) {
				if (props.type && ['total'].indexOf(props.type) > -1 && !props.value) {
					return new Error('value properties is required on footer.columns object');
				}
			}
		})
	}))
};
XTable.defaultProps = {
	data: [],
	filteredData: [],
	rowHeight: 40,
	headerHeight: 50,
	footerHeight: 0,
	columns: [],
	mode: null
};
exports.default = (0, _reactDimensions2.default)()(XTable);