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

import React from 'react';
import { withFormValue } from '@bigfishtv/react-forms';
import Pagination from '../Pagination';
import SelectInput from '../input/SelectInput';
import DelayVisible from '../DelayVisible';
import Spinner from '../Spinner';

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 = withFormValue(function (_ref) {
	var formValue = _ref.formValue,
	    pagination = _ref.pagination,
	    loading = _ref.loading;
	return !pagination ? React.createElement('noscript', null) : React.createElement(
		'div',
		{ className: 'flex padding-small', style: { alignItems: 'center' } },
		React.createElement(Pagination, pagination),
		React.createElement(
			'div',
			{ className: 'flex-none', style: { marginLeft: 'auto', marginRight: 'auto' } },
			loading ? React.createElement(
				DelayVisible,
				{ delay: 350 },
				React.createElement(Spinner, null)
			) : React.createElement(
				'p',
				{ className: 'no-margin font-size-small' },
				'Page ',
				React.createElement(
					'strong',
					null,
					pagination.current_page
				),
				' of ',
				React.createElement(
					'strong',
					null,
					pagination.page_count
				),
				' (Total:',
				' ',
				React.createElement(
					'strong',
					null,
					pagination.count
				),
				' items)'
			)
		),
		React.createElement(
			'div',
			{ className: 'flex-none', style: { width: 80 } },
			React.createElement(SelectInput, {
				className: 'no-margin select-small',
				value: formValue.value.limit,
				empty: false,
				options: pageSizeOptions,
				onChange: function onChange(val) {
					return formValue.select('limit').update(val);
				}
			})
		)
	);
});

export default ResultsFooter;