@bigfishtv/cockpit/src/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'

const 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',
	},
]

const ResultsFooter = withFormValue(({ formValue, pagination, loading }) =>
	!pagination ? (
		<noscript />
	) : (
		<div className="flex padding-small" style={{ alignItems: 'center' }}>
			<Pagination {...pagination} />

			<div className="flex-none" style={{ marginLeft: 'auto', marginRight: 'auto' }}>
				{loading ? (
					<DelayVisible delay={350}>
						<Spinner />
					</DelayVisible>
				) : (
					<p className="no-margin font-size-small">
						Page <strong>{pagination.current_page}</strong> of <strong>{pagination.page_count}</strong> (Total:{' '}
						<strong>{pagination.count}</strong> items)
					</p>
				)}
			</div>

			<div className="flex-none" style={{ width: 80 }}>
				<SelectInput
					className="no-margin select-small"
					value={formValue.value.limit}
					empty={false}
					options={pageSizeOptions}
					onChange={val => formValue.select('limit').update(val)}
				/>
			</div>
		</div>
	)
)

export default ResultsFooter