@bigfishtv/cockpit/es5/components/template/AutoPaginatedIndex.js

'use strict';

exports.__esModule = true;
exports.default = undefined;

var _class2, _temp2, _class3, _class4, _temp3, _initialiseProps;

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; };

exports.getFieldsFromSchema = getFieldsFromSchema;
exports.getFieldsFromAssociations = getFieldsFromAssociations;
exports.removeAssociationsFromSchema = removeAssociationsFromSchema;
exports.getFieldsFromSchemaAndAssociations = getFieldsFromSchemaAndAssociations;
exports.filterFields = filterFields;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

var _axios = require('axios');

var _reactForms = require('@bigfishtv/react-forms');

var _reactRouterDom = require('react-router-dom');

var _newId = require('../../utils/newId');

var _newId2 = _interopRequireDefault(_newId);

var _xhrUtils = require('../../api/xhrUtils');

var _fileUtils = require('../../utils/fileUtils');

var _lifecycleUtils = require('../../utils/lifecycleUtils');

var _promptUtils = require('../../utils/promptUtils');

var _MainContent = require('../container/MainContent');

var _MainContent2 = _interopRequireDefault(_MainContent);

var _FilterForm = require('../form/FilterForm');

var _FilterForm2 = _interopRequireDefault(_FilterForm);

var _DataTable = require('../table/DataTable');

var _DataTable2 = _interopRequireDefault(_DataTable);

var _AutoIndexFilter = require('../table/AutoIndexFilter');

var _AutoIndexFilter2 = _interopRequireDefault(_AutoIndexFilter);

var _IndexBulkhead = require('../table/IndexBulkhead');

var _IndexBulkhead2 = _interopRequireDefault(_IndexBulkhead);

var _SearchInput = require('../input/SearchInput');

var _SearchInput2 = _interopRequireDefault(_SearchInput);

var _Spinner = require('../Spinner');

var _Spinner2 = _interopRequireDefault(_Spinner);

var _urlUtils = require('../../utils/urlUtils');

var _Icon = require('../Icon');

var _Icon2 = _interopRequireDefault(_Icon);

var _DelayVisible = require('../DelayVisible');

var _DelayVisible2 = _interopRequireDefault(_DelayVisible);

var _Button = require('../button/Button');

var _Button2 = _interopRequireDefault(_Button);

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 assetCell = function assetCell(value, rowProps) {
	if (!value || !value.kind) return _react2.default.createElement('div', null);
	switch (value.kind) {
		case 'image':
		case 'pdf':
			{
				var url = (0, _fileUtils.getImageUrl)(value, 'cockpit-tiny');
				return _react2.default.createElement(ImageCellRender, { key: url, url: url, rowProps: rowProps });
			}
		default:
			{
				var iconSize = 18;
				var paddingTop = (rowProps.style.height - 16) / 2 - iconSize / 2;
				var paddingLeft = (rowProps.style.width - 16) / 2 - iconSize / 2;
				return _react2.default.createElement(
					'div',
					{ style: { paddingLeft: paddingLeft, paddingTop: paddingTop } },
					_react2.default.createElement(_Icon2.default, { name: 'document', size: iconSize })
				);
			}
	}
};

var imageErrCache = {};

var ImageCellRender = function (_Component) {
	_inherits(ImageCellRender, _Component);

	function ImageCellRender() {
		var _temp, _this, _ret;

		_classCallCheck(this, ImageCellRender);

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

		return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
			error: false,
			loading: true,
			url: ''
		}, _temp), _possibleConstructorReturn(_this, _ret);
	}

	ImageCellRender.prototype.componentDidMount = function componentDidMount() {
		this.loadImage();
	};

	ImageCellRender.prototype.componentWillUnmount = function componentWillUnmount() {
		this.unmounting = true;
		if (this.state.loading) {
			this.img.src = '';
		}
	};

	ImageCellRender.prototype.loadImage = function loadImage() {
		var _this2 = this;

		var url = this.props.url;
		if (!(url in imageErrCache)) {
			this.img = new Image();
			this.img.onerror = function () {
				if (_this2.unmounting) return;
				imageErrCache[url] = true;
				_this2.setState({ loading: false, error: true });
			};
			this.img.onload = function () {
				if (_this2.unmounting) return;
				imageErrCache[url] = false;
				_this2.setState({ loading: false });
			};
			this.img.src = url;
			this.setState({ loading: true, error: false });
		} else {
			this.setState({ loading: false, error: imageErrCache[url] });
		}
	};

	ImageCellRender.prototype.render = function render() {
		if (this.state.loading) {
			return null;
		}

		if (this.state.error) {
			var iconSize = 18;
			var paddingTop = (this.props.rowProps.style.height - 16) / 2 - iconSize / 2;
			var paddingLeft = (this.props.rowProps.style.width - 16) / 2 - iconSize / 2;
			return _react2.default.createElement(
				'div',
				{ style: { paddingLeft: paddingLeft, paddingTop: paddingTop } },
				_react2.default.createElement(_Icon2.default, { name: 'image-broken', size: iconSize })
			);
		}

		return _react2.default.createElement('div', {
			className: 'cover',
			style: { backgroundImage: 'url(\'' + this.props.url + '\')', backgroundSize: 'cover', backgroundPosition: 'center' }
		});
	};

	return ImageCellRender;
}(_react.Component);

function defaultFieldModifier(field) {
	if (field.association) {
		if (field.association.className == 'Tank.Assets') {
			return _extends({
				valueMapper: assetCell,
				width: 60
			}, field);
		}
	}
	if (field.column) {
		if (field.column.type == 'datetime') {
			return _extends({ valueMapper: function valueMapper(value) {
					return (0, _moment2.default)(value).format('D MMM Y, h:mma');
				} }, field);
		} else if (field.column.type == 'boolean') {
			return _extends({ valueMapper: function valueMapper(value) {
					return value ? '✓' : '';
				} }, field);
		} else if (field.column.type == 'integer') {
			return _extends({ width: field.column.length * 9, fixed: field.value === 'id' }, field);
		}
	}
	return field;
}

function getFieldsFromSchema() {
	var schema = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
	var fieldModifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function (val) {
		return val;
	};

	var fields = [];
	for (var _iterator = schema, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
		var _ref;

		if (_isArray) {
			if (_i >= _iterator.length) break;
			_ref = _iterator[_i++];
		} else {
			_i = _iterator.next();
			if (_i.done) break;
			_ref = _i.value;
		}

		var column = _ref;

		var field = {
			value: column.property,
			text: column.title,
			column: column
		};
		if (column.order) field.order = column.order;
		field = defaultFieldModifier(field);
		field = fieldModifier(field);
		fields.push(field);
	}
	return fields;
}

function associationNameToTitle(name) {
	return name.replace(/(\d+)/g, ' $1 ') // add spaces around numbers (eg. Vision6List -> Vision 6 List)
	.replace(/([a-z])([A-Z])/g, '$1 $2') // add spaces between non-capital and capital letters (eg. ProductBrand -> Product Brand)
	.trim(); // just because we might have added extra spaces
}

function getFieldsFromAssociations() {
	var associations = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
	var schema = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
	var fieldModifier = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function (val) {
		return val;
	};

	var fields = [];

	var _loop = function _loop() {
		if (_isArray2) {
			if (_i2 >= _iterator2.length) return 'break';
			_ref2 = _iterator2[_i2++];
		} else {
			_i2 = _iterator2.next();
			if (_i2.done) return 'break';
			_ref2 = _i2.value;
		}

		var association = _ref2;

		var field = {
			value: association.property,
			text: associationNameToTitle(association.name),
			unsortable: true,
			association: association
		};
		switch (association.type) {
			case 'belongsTo':
				var order = schema.reduce(function (num, column, i) {
					return column.property === association.foreignKey ? i : num;
				}, false);
				if (order !== false) field.order = order;
				break;
			case 'hasMany':
			case 'belongsToMany':
				field.valueMapper = function (val) {
					return val.length;
				};
				break;
		}
		field = defaultFieldModifier(field);
		field = fieldModifier(field);
		fields.push(field);
	};

	for (var _iterator2 = associations, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
		var _ref2;

		var _ret2 = _loop();

		if (_ret2 === 'break') break;
	}
	return fields;
}

function removeAssociationsFromSchema() {
	var schema = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
	var associations = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];

	var schemaPropertiesToExclude = associations.reduce(function (fields, association) {
		if (association.type == 'belongsTo') return [].concat(fields, [association.foreignKey]);
		return fields;
	}, []);
	return schema.filter(function (column) {
		return schemaPropertiesToExclude.indexOf(column.property) < 0;
	});
}

function getFieldsFromSchemaAndAssociations() {
	var schema = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
	var associations = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
	var fieldModifier = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function (val) {
		return val;
	};

	var orderedSchema = schema.map(function (column, i) {
		return _extends({}, column, { order: i });
	});
	var cleanedSchema = removeAssociationsFromSchema(orderedSchema, associations);
	var fields = [].concat(getFieldsFromSchema(cleanedSchema, fieldModifier), getFieldsFromAssociations(associations, orderedSchema, fieldModifier));
	return fields;
}

function filterFields() {
	var fields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
	var excludeFields = arguments[1];

	return fields.filter(function (field) {
		if (typeof excludeFields == 'function') {
			return excludeFields(field);
		} else {
			for (var _iterator3 = excludeFields, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
				var _ref3;

				if (_isArray3) {
					if (_i3 >= _iterator3.length) break;
					_ref3 = _iterator3[_i3++];
				} else {
					_i3 = _iterator3.next();
					if (_i3.done) break;
					_ref3 = _i3.value;
				}

				var pattern = _ref3;

				if (!!field.value.match(pattern)) return false;
			}
			return true;
		}
	});
}

function warnAboutUnmatchedPatterns(excludeFields, fields) {
	excludeFields.forEach(function (pattern) {
		if (!fields.some(function (field) {
			return field.value.match(pattern);
		})) {
			console.warn('[AutoPaginatedIndex] Unmatched pattern ' + pattern + ' in "excludeFields".');
		}
	});
}

var DefaultTableContainer = function DefaultTableContainer(_ref4) {
	var Bulkhead = _ref4.Bulkhead,
	    Filter = _ref4.Filter,
	    children = _ref4.children,
	    filterFields = _ref4.filterFields,
	    componentProps = _ref4.componentProps,
	    tableProps = _ref4.tableProps;
	return _react2.default.createElement(
		_MainContent2.default,
		null,
		_react2.default.createElement(Bulkhead, _extends({}, componentProps, tableProps)),
		_react2.default.createElement(
			'div',
			{ className: 'flex-auto flex flex-column padding-medium' },
			_react2.default.createElement(
				'div',
				{ className: 'flex-none' },
				_react2.default.createElement(Filter, _extends({ filterFields: filterFields }, componentProps, tableProps))
			),
			children
		)
	);
};

var AutoPaginatedIndex = (_temp2 = _class2 = function (_Component2) {
	_inherits(AutoPaginatedIndex, _Component2);

	function AutoPaginatedIndex(props) {
		_classCallCheck(this, AutoPaginatedIndex);

		var _this3 = _possibleConstructorReturn(this, _Component2.call(this, props));

		_this3.loadSchemaAndAssociations = function () {
			var _this3$props = _this3.props,
			    schema = _this3$props.schema,
			    schemaUrl = _this3$props.schemaUrl,
			    schemaMapper = _this3$props.schemaMapper,
			    associations = _this3$props.associations,
			    associationsUrl = _this3$props.associationsUrl,
			    associationsMapper = _this3$props.associationsMapper,
			    schemaAssociationsMapper = _this3$props.schemaAssociationsMapper;
			var _this3$state = _this3.state,
			    schemaAssociationsUrl = _this3$state.schemaAssociationsUrl,
			    errorMessage = _this3$state.errorMessage;


			if (errorMessage) {
				_this3.setState({ errorMessage: '' });
			}

			if (!_this3.state.fields.length) {
				console.log('no fields, gotta get some schema/associations');
				if (!schema.length && !associations.length && schemaAssociationsUrl) {
					console.log('getting schema & associations');
					(0, _axios.get)(schemaAssociationsUrl).then(function (_ref5) {
						var data = _ref5.data;

						setTimeout(function () {
							console.log('got schema & associations', data);

							var _schemaAssociationsMa = schemaAssociationsMapper(data),
							    schema = _schemaAssociationsMa.schema,
							    associations = _schemaAssociationsMa.associations;

							_this3.setState({
								schema: schemaMapper(schema),
								associations: associationsMapper(associations),
								loadingSchema: false,
								loadingAssocations: false
							}, function () {
								return _this3.generateFields();
							});
						});
					}).catch(function () {
						return _this3.setState({ errorMessage: 'Error loading schema & associations' });
					});
				} else {
					if (!schema.length && schemaUrl) {
						_this3.setState({ loadingSchema: true });
						(0, _axios.get)(schemaUrl).then(function (_ref6) {
							var data = _ref6.data;

							setTimeout(function () {
								_this3.setState({ schema: schemaMapper(data), loadingSchema: false }, function () {
									return _this3.generateFields();
								});
							});
						}).catch(function () {
							return _this3.setState({ errorMessage: 'Error loading schema' });
						});
					}
					if (!associations.length && associationsUrl) {
						_this3.setState({ loadingSchema: true });
						(0, _axios.get)(associationsUrl).then(function (_ref7) {
							var data = _ref7.data;

							setTimeout(function () {
								_this3.setState({ associations: associationsMapper(data), loadingAssocations: false }, function () {
									return _this3.generateFields();
								});
							});
						}).catch(function () {
							return _this3.setState({ errorMessage: 'Error loading associations' });
						});
					}
				}
			}
		};

		_this3.state = {
			schema: props.schema,
			associations: props.associations,
			loadingSchema: false,
			loadingAssocations: false,
			fields: (props.fields || []).map(defaultFieldModifier).map(_this3.props.fieldModifier),
			errorMessage: '',
			submitUrl: props.submitUrl || '/admin/' + props.model + '.json',
			schemaAssociationsUrl: props.schemaAssociationsUrl || '/admin/' + props.model + '/schema_associations.json'
		};
		return _this3;
	}

	AutoPaginatedIndex.prototype.componentDidMount = function componentDidMount() {
		this.loadSchemaAndAssociations();
	};

	AutoPaginatedIndex.prototype.generateFields = function generateFields() {
		var _props = this.props,
		    excludeFields = _props.excludeFields,
		    onFieldsCreated = _props.onFieldsCreated;
		var _state = this.state,
		    associations = _state.associations,
		    schema = _state.schema,
		    loadingAssocations = _state.loadingAssocations,
		    loadingSchema = _state.loadingSchema;

		console.log('attempting to generate fields');
		if (this.state.fields.length > 0 || loadingAssocations || loadingSchema) return;

		var fields = getFieldsFromSchemaAndAssociations(schema, associations, this.props.fieldModifier);
		if (process.env.NODE_ENV !== 'production') {
			if (Array.isArray(excludeFields)) {
				warnAboutUnmatchedPatterns(excludeFields, fields);
			}
		}
		fields = filterFields(fields, excludeFields);

		console.log('generated fields', fields);

		if (onFieldsCreated) onFieldsCreated({ fields: fields, schema: schema, associations: associations });
		this.setState({ fields: fields });
	};

	AutoPaginatedIndex.prototype.render = function render() {
		var _this4 = this;

		var _props2 = this.props,
		    tableProps = _props2.tableProps,
		    dataTableProps = _props2.dataTableProps,
		    model = _props2.model,
		    TableContainer = _props2.TableContainer,
		    Bulkhead = _props2.Bulkhead,
		    Filter = _props2.Filter,
		    filterFields = _props2.filterFields;
		var _state2 = this.state,
		    submitUrl = _state2.submitUrl,
		    fields = _state2.fields,
		    loadingAssocations = _state2.loadingAssocations,
		    loadingSchema = _state2.loadingSchema,
		    errorMessage = _state2.errorMessage;


		if (loadingAssocations || loadingSchema || fields.length === 0) return _react2.default.createElement(
			_MainContent2.default,
			null,
			_react2.default.createElement(
				_DelayVisible2.default,
				null,
				_react2.default.createElement(
					'div',
					{ className: 'content align-items-center justify-content-center' },
					_react2.default.createElement(
						'div',
						{ className: 'text-center' },
						errorMessage ? _react2.default.createElement(
							'p',
							null,
							errorMessage
						) : _react2.default.createElement(_Spinner2.default, null),
						errorMessage && _react2.default.createElement(
							_Button2.default,
							{ style: 'primary', onClick: this.loadSchemaAndAssociations },
							'Try again'
						)
					)
				)
			)
		);

		return _react2.default.createElement(_FilterForm2.default, {
			submitUrl: submitUrl,
			dataUrl: this.props.dataUrl,
			resultsMapper: this.props.resultsMapper,
			defaultValue: _extends({ sort: 'id', direction: 'asc', limit: '25' }, this.props.defaultParams),
			extraParams: this.props.extraParams,
			render: function render(props) {
				return _react2.default.createElement(PaginatedIndexMain, _extends({}, props, {
					fields: fields,
					model: model,
					extraParams: _this4.props.extraParams,
					tableProps: tableProps,
					dataTableProps: dataTableProps,
					TableContainer: TableContainer,
					Bulkhead: Bulkhead,
					Filter: Filter,
					filterFields: filterFields,
					onRowSelected: _this4.props.onRowSelected,
					onSelectGlobalChange: _this4.props.onSelectGlobalChange,
					onSelectionChange: _this4.props.onSelectionChange,
					onParamsChange: _this4.props.onParamsChange
				}));
			}
		});
	};

	return AutoPaginatedIndex;
}(_react.Component), _class2.propTypes = {
	model: _propTypes2.default.string.isRequired,
	dataUrl: _propTypes2.default.string,
	submitUrl: _propTypes2.default.string,
	excludeFields: _propTypes2.default.oneOfType([_propTypes2.default.array, _propTypes2.default.func]),
	fields: _propTypes2.default.array,
	fieldModifier: _propTypes2.default.func,
	onFieldsCreated: _propTypes2.default.func,
	onRowSelected: _propTypes2.default.func,
	onSelectGlobalChange: _propTypes2.default.func,
	onSelectionChange: _propTypes2.default.func,
	onParamsChange: _propTypes2.default.func,
	schema: _propTypes2.default.array,
	associations: _propTypes2.default.array,
	schemaUrl: _propTypes2.default.string,
	schemaMapper: _propTypes2.default.func,
	associationsUrl: _propTypes2.default.string,
	associationsMapper: _propTypes2.default.func,
	schemaAssociationsUrl: _propTypes2.default.string,
	schemaAssociationsMapper: _propTypes2.default.func,
	resultsMapper: _propTypes2.default.func,
	defaultParams: _propTypes2.default.object,
	extraParams: _propTypes2.default.object,
	tableProps: _propTypes2.default.shape({
		title: _propTypes2.default.string,
		checkboxSelection: _propTypes2.default.bool,
		editable: _propTypes2.default.bool,
		duplicable: _propTypes2.default.bool,
		duplicateUrl: _propTypes2.default.string,
		duplicateTransformer: _propTypes2.default.func,
		exportable: _propTypes2.default.bool,
		exportUrl: _propTypes2.default.string,
		importable: _propTypes2.default.bool,
		importUrl: _propTypes2.default.string,
		deleteUrl: _propTypes2.default.string
	}),
	filterFields: _propTypes2.default.arrayOf(_propTypes2.default.shape({
		select: _propTypes2.default.string.isRequired,
		label: _propTypes2.default.string,
		Input: _propTypes2.default.elementType,
		inputProps: _propTypes2.default.object
	}))
}, _class2.defaultProps = {
	excludeFields: [],
	schema: [],
	associations: [],
	fields: null,
	fieldModifier: function fieldModifier(val) {
		return val;
	},
	schemaMapper: function schemaMapper(val) {
		return val;
	},
	associationsMapper: function associationsMapper(val) {
		return val;
	},
	schemaAssociationsMapper: function schemaAssociationsMapper(val) {
		return val;
	},
	resultsMapper: function resultsMapper(data) {
		return data.data || data;
	},
	defaultParams: {},
	extraParams: {},
	tableProps: {
		editable: true,
		deletable: true,
		exportable: false,
		importable: false,
		duplicable: false
	},
	dataTableProps: {
		checkboxSelection: true,
		selectAllGlobal: false,
		selectedIds: [],
		selectedData: []
	},
	TableContainer: DefaultTableContainer,
	Bulkhead: _IndexBulkhead2.default,
	Filter: _AutoIndexFilter2.default,
	filterFields: [{ select: 'q', label: 'Keyword', placeholder: 'Search...', Input: _SearchInput2.default }]
}, _temp2);
exports.default = AutoPaginatedIndex;

var PaginatedIndexMain = (0, _reactRouterDom.withRouter)(_class3 = (0, _reactForms.withFormValue)(_class3 = (_temp3 = _class4 = function (_Component3) {
	_inherits(PaginatedIndexMain, _Component3);

	function PaginatedIndexMain(props) {
		_classCallCheck(this, PaginatedIndexMain);

		var _this5 = _possibleConstructorReturn(this, _Component3.call(this, props));

		_initialiseProps.call(_this5);

		_this5.fieldsHash = (0, _lifecycleUtils.getDataHash)(props.fields);
		var params = props.formValue.value;
		var sort = localStorage[_this5.fieldsHash + '_sort'];
		var direction = localStorage[_this5.fieldsHash + '_direction'];
		if (sort && sort != params.sort || direction && direction != params.direction) {
			props.formValue.update(_extends({}, params, { sort: sort, direction: direction }));
		}
		_this5.state = {
			selectedIds: [],
			selectedData: [],
			selectAllGlobal: false
		};
		return _this5;
	}

	PaginatedIndexMain.prototype.render = function render() {
		var _state3 = this.state,
		    selectedData = _state3.selectedData,
		    selectedIds = _state3.selectedIds,
		    selectAllGlobal = _state3.selectAllGlobal;
		var _props3 = this.props,
		    tableProps = _props3.tableProps,
		    dataTableProps = _props3.dataTableProps,
		    extraParams = _props3.extraParams,
		    model = _props3.model,
		    data = _props3.data,
		    results = _props3.results,
		    fields = _props3.fields,
		    formValue = _props3.formValue,
		    TableContainer = _props3.TableContainer,
		    Bulkhead = _props3.Bulkhead,
		    Filter = _props3.Filter,
		    filterFields = _props3.filterFields;


		var checkboxSelection = 'checkboxSelection' in dataTableProps ? dataTableProps.checkboxSelection : true;
		var selection = {
			selectedData: selectedData,
			selectedIds: selectedIds,
			selectAllGlobal: selectAllGlobal,
			count: selectAllGlobal ? data.pagination.count : selectedData.length
		};

		var componentProps = {
			model: model,
			selection: selection,
			data: data,
			extraParams: extraParams,
			onCreate: this.handleNew,
			onExport: this.handleExport,
			onImport: this.handleImport,
			onDelete: this.handleDelete,
			onDuplicate: this.handleDuplicate,
			onSubmit: this.props.onSubmit
		};

		var children = _react2.default.createElement(_DataTable2.default, _extends({}, dataTableProps, {
			checkboxSelection: checkboxSelection,
			data: results,
			pagination: data.pagination,
			fields: fields,
			params: formValue.value,
			onParamsChange: this.handleParamsChange,
			onRowSelected: this.handleRowSelected,
			onSelectionChange: this.handleSelectionChange,
			onSelectGlobalChange: this.handleSelectGlobalChange,
			loading: this.props.submitStatus == 'busy'
		}));

		return _react2.default.createElement(TableContainer, { Filter: Filter, Bulkhead: Bulkhead, children: children, componentProps: componentProps, tableProps: tableProps, dataTableProps: dataTableProps, filterFields: filterFields });
	};

	return PaginatedIndexMain;
}(_react.Component), _initialiseProps = function _initialiseProps() {
	var _this6 = this;

	this.handleParamsChange = function () {
		var changes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

		if ('sort' in changes) localStorage[_this6.fieldsHash + '_sort'] = changes.sort;
		if ('direction' in changes) localStorage[_this6.fieldsHash + '_direction'] = changes.direction;
		var params = _extends({}, _this6.props.formValue.value, changes);
		_this6.props.formValue.update(params);
		if (_this6.props.onParamsChange) _this6.props.onParamsChange(params);
	};

	this.handleSelectionChange = function (selectedIds, selectedData) {
		_this6.setState({ selectedIds: selectedIds, selectedData: selectedData });
		if (_this6.props.onSelectionChange) _this6.props.onSelectionChange(selectedIds, selectedData);
	};

	this.handleSelectGlobalChange = function (selectAllGlobal) {
		_this6.setState({ selectAllGlobal: selectAllGlobal });
		if (_this6.props.onSelectGlobalChange) _this6.props.onSelectGlobalChange(selectAllGlobal);
	};

	this.handleNew = function () {
		var model = _this6.props.model;

		_this6.props.history.push('/' + model + '/add');
	};

	this.handleRowSelected = function (row) {
		var tableProps = _this6.props.tableProps;

		if (_this6.props.onRowSelected) {
			_this6.props.onRowSelected(row);
		} else if (!('editable' in tableProps) || tableProps.editable) {
			_this6.props.history.push('/' + _this6.props.model + '/' + row.id);
		}
	};

	this.handleDelete = function () {
		var model = _this6.props.model;
		var deleteUrl = _this6.props.tableProps.deleteUrl;
		var _state4 = _this6.state,
		    selectedIds = _state4.selectedIds,
		    selectedData = _state4.selectedData;

		(0, _promptUtils.showDeletePrompt)({
			model: model,
			queryUrl: deleteUrl,
			selectedIds: selectedIds,
			data: selectedData,
			callback: function callback(deletedData) {
				return _this6.props.onSubmit();
			}
		});
	};

	this.handleDuplicate = function () {
		var model = _this6.props.model;
		var _props$tableProps = _this6.props.tableProps,
		    duplicateUrl = _props$tableProps.duplicateUrl,
		    duplicateTransformer = _props$tableProps.duplicateTransformer;

		var item = _this6.state.selectedData[0];
		var newItem = duplicateTransformer ? duplicateTransformer(item) : item;
		var url = duplicateUrl || '/admin/' + model + '/' + item.id + '.json?clone=1';
		(0, _xhrUtils.post)({
			url: url,
			data: _extends({}, newItem, { id: (0, _newId2.default)() }),
			callback: function callback(result) {
				return _this6.props.onSubmit();
			}
		});
	};

	this.handleImport = function () {
		var model = _this6.props.model;
		var importUrl = _this6.props.tableProps.importUrl;

		var url = importUrl ? importUrl : '/' + model + '/import';
		_this6.props.history.push(url);
	};

	this.handleExport = function () {
		var _props4 = _this6.props,
		    model = _props4.model,
		    formValue = _props4.formValue,
		    extraParams = _props4.extraParams;
		var exportUrl = _this6.props.tableProps.exportUrl;
		var _state5 = _this6.state,
		    selectedIds = _state5.selectedIds,
		    selectAllGlobal = _state5.selectAllGlobal;

		var params = selectAllGlobal || selectedIds.length === 0 ? _extends({}, extraParams, formValue.value) : _extends({}, extraParams, formValue.value, { id: selectedIds });
		var url = exportUrl ? exportUrl : '/admin/' + model + '/export.csv';
		window.open(url + '?' + (0, _urlUtils.stringifyQuery)(params));
	};
}, _temp3)) || _class3) || _class3;