65 lines
1.7 KiB
JavaScript
65 lines
1.7 KiB
JavaScript
import React, { useState } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import Input from './input';
|
|
import TableSwitch from './table-switch';
|
|
import Select from './select';
|
|
import { selectOptions } from '../utils/select-options';
|
|
|
|
function TablePage({ name }) {
|
|
/* store and initialise data in function component state */
|
|
const [oset, setOset] = useState(1);
|
|
const [limit, setLimit] = useState(parseInt(selectOptions[0], 10));
|
|
const [searchField, setSearchField] = useState('');
|
|
const handleClickPrev = () => {
|
|
setOset((oset) => (oset > 1 ? --oset : oset));
|
|
};
|
|
const handleClickNext = () => {
|
|
setOset((oset) => ++oset);
|
|
};
|
|
const handleChangeLimit = (event) => {
|
|
setLimit((limit) => parseInt(event.target.value, 10));
|
|
};
|
|
const handleSearch = (e) => {
|
|
setSearchField((searchField) => e.target.value);
|
|
};
|
|
if (name && name.indexOf(' ') === -1) {
|
|
return (
|
|
<>
|
|
<button onClick={handleClickPrev}>prev</button>
|
|
|
|
<button onClick={handleClickNext}>next</button>
|
|
<Select
|
|
defaultValue={selectOptions[0]}
|
|
id="tablePageLimit"
|
|
name="tablePageLimit"
|
|
onChange={handleChangeLimit}
|
|
options={selectOptions}
|
|
/>
|
|
<Input
|
|
id="tablePageSearch"
|
|
name="tablePageSearch"
|
|
onChange={handleSearch}
|
|
placeholder="Search table globally"
|
|
type="text"
|
|
title="Enter search value"
|
|
value={searchField}
|
|
/>
|
|
<TableSwitch
|
|
name={name}
|
|
isFetched={false}
|
|
oset={oset}
|
|
limit={limit}
|
|
filter={searchField}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
return <p>Loading...</p>;
|
|
}
|
|
TablePage.propTypes = {
|
|
name: PropTypes.string,
|
|
};
|
|
export default TablePage;
|