Commit 2f1b3b87 authored by Marjolaine Bodin's avatar Marjolaine Bodin
Browse files

#507 functional component

parent b40069d7
......@@ -7,12 +7,11 @@ import { LinkContainer } from 'react-router-bootstrap';
import styles from './ResponsiveTable.module.css';
import { getCurrentBreakpoint } from '../../helpers';
class ResponsiveTable extends React.Component {
/**
/**
* This method will calculate the headerStyle based on the ResponsiveHeaderStyle and the size of the window
* @param {array} columns BootstrapTable2 columns
*/
configure(columns) {
function configure(columns) {
const size = getCurrentBreakpoint();
return columns.map((column) =>
......@@ -24,9 +23,9 @@ class ResponsiveTable extends React.Component {
}
: column
);
}
}
renderActionButton(btnProps) {
function renderActionButton(btnProps) {
const { label, icon, ...otherProps } = btnProps;
return (
<Button key={label} {...otherProps}>
......@@ -34,11 +33,26 @@ class ResponsiveTable extends React.Component {
{label}
</Button>
);
}
}
render() {
export default function ResponsiveTable(props) {
const { SearchBar } = Search;
const {
keyField,
data,
columns,
search,
expandRow,
actions,
onSearch,
defaultSorted,
selectRow,
pageOptions,
rowEvents,
rowClasses,
} = props;
function onColumnMatch({ searchText, value, column, row }) {
if (column.onMatch) {
return column.onMatch(searchText, value, row, column.formatExtraData);
......@@ -53,24 +67,24 @@ class ResponsiveTable extends React.Component {
return (
<ToolkitProvider
keyField={this.props.keyField || 'id'}
data={this.props.data}
columns={this.configure(this.props.columns)}
search={{ onColumnMatch, ...this.props.search }}
expandRow={this.props.expandRow}
keyField={keyField || 'id'}
data={data}
columns={configure(columns)}
search={{ onColumnMatch, ...search }}
expandRow={expandRow}
>
{({ baseProps, searchProps }) => (
<>
<div className={styles.bar}>
<div className={styles.actions}>
{(this.props.actions || []).map((action) => {
{(actions || []).map((action) => {
const { href, ...btnProps } = action;
if (!href) {
return this.renderActionButton(btnProps);
return renderActionButton(btnProps);
}
return (
<LinkContainer key={btnProps.label} to={action.href}>
{this.renderActionButton(btnProps)}
{renderActionButton(btnProps)}
</LinkContainer>
);
})}
......@@ -79,8 +93,8 @@ class ResponsiveTable extends React.Component {
<SearchBar
searchText={searchProps.searchText}
onSearch={(query) => {
if (this.props.onSearch) {
this.props.onSearch(query);
if (onSearch) {
onSearch(query);
}
searchProps.onSearch(query);
}}
......@@ -92,12 +106,12 @@ class ResponsiveTable extends React.Component {
hover
condensed
showTotal
defaultSorted={this.props.defaultSorted}
selectRow={this.props.selectRow}
expandRow={this.props.expandRow}
pagination={paginationFactory(this.props.pageOptions)}
rowEvents={this.props.rowEvents}
rowClasses={this.props.rowClasses}
defaultSorted={defaultSorted}
selectRow={selectRow}
expandRow={expandRow}
pagination={paginationFactory(pageOptions)}
rowEvents={rowEvents}
rowClasses={rowClasses}
noDataIndication="No data to display"
{...baseProps}
/>
......@@ -105,7 +119,4 @@ class ResponsiveTable extends React.Component {
)}
</ToolkitProvider>
);
}
}
export default ResponsiveTable;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment