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

#507 functional component

parent b40069d7
......@@ -7,105 +7,116 @@ 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) {
const size = getCurrentBreakpoint();
/**
* This method will calculate the headerStyle based on the ResponsiveHeaderStyle and the size of the window
* @param {array} columns BootstrapTable2 columns
*/
function configure(columns) {
const size = getCurrentBreakpoint();
return columns.map((column) =>
column.responsiveHeaderStyle && column.responsiveHeaderStyle[size]
? {
...column,
headerStyle: column.responsiveHeaderStyle[size],
hidden: column.responsiveHeaderStyle[size].hidden,
}
: column
);
}
return columns.map((column) =>
column.responsiveHeaderStyle && column.responsiveHeaderStyle[size]
? {
...column,
headerStyle: column.responsiveHeaderStyle[size],
hidden: column.responsiveHeaderStyle[size].hidden,
}
: column
);
}
renderActionButton(btnProps) {
const { label, icon, ...otherProps } = btnProps;
return (
<Button key={label} {...otherProps}>
{icon && <Glyphicon className={styles.actionIcon} glyph={icon} />}
{label}
</Button>
);
}
function renderActionButton(btnProps) {
const { label, icon, ...otherProps } = btnProps;
return (
<Button key={label} {...otherProps}>
{icon && <Glyphicon className={styles.actionIcon} glyph={icon} />}
{label}
</Button>
);
}
render() {
const { SearchBar } = Search;
export default function ResponsiveTable(props) {
const { SearchBar } = Search;
function onColumnMatch({ searchText, value, column, row }) {
if (column.onMatch) {
return column.onMatch(searchText, value, row, column.formatExtraData);
}
const {
keyField,
data,
columns,
search,
expandRow,
actions,
onSearch,
defaultSorted,
selectRow,
pageOptions,
rowEvents,
rowClasses,
} = props;
return (
value !== null &&
value !== undefined &&
value.toString().toLowerCase().includes(searchText)
);
function onColumnMatch({ searchText, value, column, row }) {
if (column.onMatch) {
return column.onMatch(searchText, value, row, column.formatExtraData);
}
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}
>
{({ baseProps, searchProps }) => (
<>
<div className={styles.bar}>
<div className={styles.actions}>
{(this.props.actions || []).map((action) => {
const { href, ...btnProps } = action;
if (!href) {
return this.renderActionButton(btnProps);
}
return (
<LinkContainer key={btnProps.label} to={action.href}>
{this.renderActionButton(btnProps)}
</LinkContainer>
);
})}
</div>
<div className={styles.search}>
<SearchBar
searchText={searchProps.searchText}
onSearch={(query) => {
if (this.props.onSearch) {
this.props.onSearch(query);
}
searchProps.onSearch(query);
}}
/>
</div>
</div>
<BootstrapTable2
striped
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}
noDataIndication="No data to display"
{...baseProps}
/>
</>
)}
</ToolkitProvider>
value !== null &&
value !== undefined &&
value.toString().toLowerCase().includes(searchText)
);
}
}
export default ResponsiveTable;
return (
<ToolkitProvider
keyField={keyField || 'id'}
data={data}
columns={configure(columns)}
search={{ onColumnMatch, ...search }}
expandRow={expandRow}
>
{({ baseProps, searchProps }) => (
<>
<div className={styles.bar}>
<div className={styles.actions}>
{(actions || []).map((action) => {
const { href, ...btnProps } = action;
if (!href) {
return renderActionButton(btnProps);
}
return (
<LinkContainer key={btnProps.label} to={action.href}>
{renderActionButton(btnProps)}
</LinkContainer>
);
})}
</div>
<div className={styles.search}>
<SearchBar
searchText={searchProps.searchText}
onSearch={(query) => {
if (onSearch) {
onSearch(query);
}
searchProps.onSearch(query);
}}
/>
</div>
</div>
<BootstrapTable2
striped
hover
condensed
showTotal
defaultSorted={defaultSorted}
selectRow={selectRow}
expandRow={expandRow}
pagination={paginationFactory(pageOptions)}
rowEvents={rowEvents}
rowClasses={rowClasses}
noDataIndication="No data to display"
{...baseProps}
/>
</>
)}
</ToolkitProvider>
);
}
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