@bigfishtv/cockpit/es5/components/table/ResultsFooter.js

'use strict';

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _Pagination = require('../Pagination');

var _Pagination2 = _interopRequireDefault(_Pagination);

var _SelectInput = require('../input/SelectInput');

var _SelectInput2 = _interopRequireDefault(_SelectInput);

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

var _DelayVisible2 = _interopRequireDefault(_DelayVisible);

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

var _Spinner2 = _interopRequireDefault(_Spinner);

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

var pageSizeOptions = [{
	value: '25',
	text: '25'
}, {
	value: '50',
	text: '50'
}, {
	value: '100',
	text: '100'
}, {
	value: '250',
	text: '250'
}, {
	value: '500',
	text: '500'
}, {
	value: '1000',
	text: '1000'
}];

var ResultsFooter = (0, _reactForms.withFormValue)(function (_ref) {
	var formValue = _ref.formValue,
	    pagination = _ref.pagination,
	    loading = _ref.loading;
	return !pagination ? _react2.default.createElement('noscript', null) : _react2.default.createElement(
		'div',
		{ className: 'flex padding-small', style: { alignItems: 'center' } },
		_react2.default.createElement(_Pagination2.default, pagination),
		_react2.default.createElement(
			'div',
			{ className: 'flex-none', style: { marginLeft: 'auto', marginRight: 'auto' } },
			loading ? _react2.default.createElement(
				_DelayVisible2.default,
				{ delay: 350 },
				_react2.default.createElement(_Spinner2.default, null)
			) : _react2.default.createElement(
				'p',
				{ className: 'no-margin font-size-small' },
				'Page ',
				_react2.default.createElement(
					'strong',
					null,
					pagination.current_page
				),
				' of ',
				_react2.default.createElement(
					'strong',
					null,
					pagination.page_count
				),
				' (Total:',
				' ',
				_react2.default.createElement(
					'strong',
					null,
					pagination.count
				),
				' items)'
			)
		),
		_react2.default.createElement(
			'div',
			{ className: 'flex-none', style: { width: 80 } },
			_react2.default.createElement(_SelectInput2.default, {
				className: 'no-margin select-small',
				value: formValue.value.limit,
				empty: false,
				options: pageSizeOptions,
				onChange: function onChange(val) {
					return formValue.select('limit').update(val);
				}
			})
		)
	);
});

exports.default = ResultsFooter;