woocommerce/plugins/woocommerce-admin/client/components/table/index.js

416 lines
12 KiB
JavaScript

/** @format */
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import classnames from 'classnames';
import { Component } from '@wordpress/element';
import { find, findIndex, first, isEqual, noop, partial, uniq } from 'lodash';
import { IconButton, ToggleControl } from '@wordpress/components';
import PropTypes from 'prop-types';
/**
* Internal dependencies
*/
import './style.scss';
import Card from 'components/card';
import CompareButton from 'components/filters/compare/button';
import DowloadIcon from './download-icon';
import EllipsisMenu from 'components/ellipsis-menu';
import { downloadCSVFile, generateCSVDataFromTable, generateCSVFileName } from 'lib/csv';
import { getIdsFromQuery } from 'lib/nav-utils';
import MenuItem from 'components/ellipsis-menu/menu-item';
import MenuTitle from 'components/ellipsis-menu/menu-title';
import Pagination from 'components/pagination';
import Search from 'components/search';
import Table from './table';
import TablePlaceholder from './placeholder';
import TableSummary from './summary';
/**
* This is an accessible, sortable, and scrollable table for displaying tabular data (like revenue and other analytics data).
* It accepts `headers` for column headers, and `rows` for the table content.
* `rowHeader` can be used to define the index of the row header (or false if no header).
*
* `TableCard` serves as Card wrapper & contains a card header, `<Table />`, `<TableSummary />`, and `<Pagination />`.
* This includes filtering and comparison functionality for report pages.
*/
class TableCard extends Component {
constructor( props ) {
super( props );
const { compareBy, query } = props;
this.state = {
showCols: props.headers.map( ( { hiddenByDefault } ) => ! hiddenByDefault ),
selectedRows: getIdsFromQuery( query[ compareBy ] ),
};
this.toggleCols = this.toggleCols.bind( this );
this.onClickDownload = this.onClickDownload.bind( this );
this.onCompare = this.onCompare.bind( this );
this.onSearch = this.onSearch.bind( this );
this.selectRow = this.selectRow.bind( this );
this.selectAllRows = this.selectAllRows.bind( this );
}
componentDidUpdate( { query: prevQuery } ) {
const { compareBy, query } = this.props;
const prevIds = getIdsFromQuery( prevQuery[ compareBy ] );
const currentIds = getIdsFromQuery( query[ compareBy ] );
if ( ! isEqual( prevIds.sort(), currentIds.sort() ) ) {
/* eslint-disable react/no-did-update-set-state */
this.setState( { selectedRows: currentIds } );
/* eslint-enable react/no-did-update-set-state */
}
}
toggleCols( selected ) {
const { headers, query, onQueryChange } = this.props;
return () => {
// Handle hiding a sorted column
if ( query.orderby ) {
const sortBy = findIndex( headers, { key: query.orderby } );
if ( sortBy === selected ) {
const defaultSort = find( headers, { defaultSort: true } ) || first( headers ) || {};
onQueryChange( 'sort' )( defaultSort.key, 'desc' );
}
}
this.setState( prevState => ( {
showCols: prevState.showCols.map(
( toggled, i ) => ( selected === i ? ! toggled : toggled )
),
} ) );
};
}
onClickDownload() {
const { headers, query, onClickDownload, rows, title } = this.props;
const { showCols } = this.state;
const visibleHeaders = headers.filter( ( header, i ) => showCols[ i ] );
const visibleRows = rows.map( row => row.filter( ( cell, i ) => showCols[ i ] ) );
// @TODO The current implementation only downloads the contents displayed in the table.
// Another solution is required when the data set is larger (see #311).
downloadCSVFile(
generateCSVFileName( title, query ),
generateCSVDataFromTable( visibleHeaders, visibleRows )
);
if ( onClickDownload ) {
onClickDownload();
}
}
onCompare() {
const { compareBy, onQueryChange } = this.props;
const { selectedRows } = this.state;
if ( compareBy ) {
onQueryChange( 'compare' )( compareBy, selectedRows.join( ',' ) );
}
}
onSearch( value ) {
const { compareBy, onQueryChange } = this.props;
const { selectedRows } = this.state;
if ( compareBy ) {
const ids = value.map( v => v.id );
onQueryChange( 'compare' )( compareBy, [ ...selectedRows, ...ids ].join( ',' ) );
}
}
filterCols( rows = [] ) {
const { showCols } = this.state;
// Header is a 1d array
if ( ! Array.isArray( first( rows ) ) ) {
return rows.filter( ( col, i ) => showCols[ i ] );
}
// Rows is a 2d array
return rows.map( row => row.filter( ( col, i ) => showCols[ i ] ) );
}
selectAllRows( event ) {
const { ids } = this.props;
if ( event.target.checked ) {
this.setState( {
selectedRows: ids,
} );
} else {
this.setState( {
selectedRows: [],
} );
}
}
selectRow( i, event ) {
const { ids } = this.props;
if ( event.target.checked ) {
this.setState( ( { selectedRows } ) => ( {
selectedRows: uniq( [ ids[ i ], ...selectedRows ] ),
} ) );
} else {
this.setState( ( { selectedRows } ) => {
const index = selectedRows.indexOf( ids[ i ] );
return {
selectedRows: [ ...selectedRows.slice( 0, index ), ...selectedRows.slice( index + 1 ) ],
};
} );
}
}
getCheckbox( i ) {
const { ids = [] } = this.props;
const { selectedRows } = this.state;
const isChecked = -1 !== selectedRows.indexOf( ids[ i ] );
return {
display: (
<input type="checkbox" onChange={ partial( this.selectRow, i ) } checked={ isChecked } />
),
value: false,
};
}
getAllCheckbox() {
const { ids = [] } = this.props;
const { selectedRows } = this.state;
const isAllChecked = ids.length > 0 && ids.length === selectedRows.length;
return {
cellClassName: 'is-checkbox-column',
label: (
<input
type="checkbox"
onChange={ this.selectAllRows }
aria-label={ __( 'Select All' ) }
checked={ isAllChecked }
/>
),
required: true,
};
}
render() {
const {
compareBy,
downloadable,
labels = {},
isLoading,
onClickDownload,
onQueryChange,
query,
rowHeader,
rowsPerPage,
summary,
title,
totalRows,
} = this.props;
const { selectedRows, showCols } = this.state;
const allHeaders = this.props.headers;
let headers = this.filterCols( this.props.headers );
let rows = this.filterCols( this.props.rows );
if ( compareBy ) {
rows = rows.map( ( row, i ) => {
return [ this.getCheckbox( i ), ...row ];
} );
headers = [ this.getAllCheckbox(), ...headers ];
}
const className = classnames( {
'woocommerce-table': true,
'has-compare': !! compareBy,
} );
return (
<Card
className={ className }
title={ title }
action={ [
compareBy && (
<CompareButton
key="compare"
className="woocommerce-table__compare"
count={ selectedRows.length }
helpText={
labels.helpText || __( 'Select at least two items to compare', 'wc-admin' )
}
onClick={ this.onCompare }
>
{ labels.compareButton || __( 'Compare', 'wc-admin' ) }
</CompareButton>
),
compareBy && (
<Search
key="search"
placeholder={ labels.placeholder || __( 'Search by item name', 'wc-admin' ) }
type={ compareBy + 's' }
onChange={ this.onSearch }
/>
),
( downloadable || onClickDownload ) && (
<IconButton
key="download"
className="woocommerce-table__download-button"
disabled={ isLoading }
onClick={ this.onClickDownload }
isLink
>
<DowloadIcon />
<span className="woocommerce-table__download-button__label">
{ labels.downloadButton || __( 'Download', 'wc-admin' ) }
</span>
</IconButton>
),
] }
menu={
<EllipsisMenu label={ __( 'Choose which values to display', 'wc-admin' ) }>
<MenuTitle>{ __( 'Columns:', 'wc-admin' ) }</MenuTitle>
{ allHeaders.map( ( { label, required }, i ) => {
if ( required ) {
return null;
}
return (
<MenuItem key={ i } onInvoke={ this.toggleCols( i ) }>
<ToggleControl
label={ label }
checked={ !! showCols[ i ] }
onChange={ this.toggleCols( i ) }
/>
</MenuItem>
);
} ) }
</EllipsisMenu>
}
>
{ isLoading ? (
<TablePlaceholder
numberOfRows={ rowsPerPage }
headers={ headers }
rowHeader={ rowHeader }
caption={ title }
query={ query }
onSort={ onQueryChange( 'sort' ) }
/>
) : (
<Table
rows={ rows }
headers={ headers }
rowHeader={ rowHeader }
caption={ title }
query={ query }
onSort={ onQueryChange( 'sort' ) }
/>
) }
<Pagination
page={ parseInt( query.page ) || 1 }
perPage={ rowsPerPage }
total={ totalRows }
onPageChange={ onQueryChange( 'page' ) }
onPerPageChange={ onQueryChange( 'per_page' ) }
/>
{ summary && <TableSummary data={ summary } /> }
</Card>
);
}
}
TableCard.propTypes = {
/**
* The string to use as a query parameter when comparing row items.
*/
compareBy: PropTypes.string,
/**
* An array of column headers (see `Table` props).
*/
headers: PropTypes.arrayOf(
PropTypes.shape( {
hiddenByDefault: PropTypes.bool,
defaultSort: PropTypes.bool,
isSortable: PropTypes.bool,
key: PropTypes.string,
label: PropTypes.string,
required: PropTypes.bool,
} )
),
/**
* Custom labels for table header actions.
*/
labels: PropTypes.shape( {
compareButton: PropTypes.string,
downloadButton: PropTypes.string,
helpText: PropTypes.string,
placeholder: PropTypes.string,
} ),
/**
* A list of IDs, matching to the row list so that ids[ 0 ] contains the object ID for the object displayed in row[ 0 ].
*/
ids: PropTypes.arrayOf( PropTypes.number ),
/**
* Defines if the table contents are loading.
* It will display `TablePlaceholder` component instead of `Table` if that's the case.
*/
isLoading: PropTypes.bool,
/**
* A function which returns a callback function to update the query string for a given `param`.
*/
onQueryChange: PropTypes.func,
/**
* Whether the table must be downloadable. If true, the download button will appear.
*/
downloadable: PropTypes.bool,
/**
* A callback function called when the "download" button is pressed. Optional, if used, the download button will appear.
*/
onClickDownload: PropTypes.func,
/**
* An object of the query parameters passed to the page, ex `{ page: 2, per_page: 5 }`.
*/
query: PropTypes.object,
/**
* An array of arrays of display/value object pairs (see `Table` props).
*/
rowHeader: PropTypes.oneOfType( [ PropTypes.number, PropTypes.bool ] ),
/**
* Which column should be the row header, defaults to the first item (`0`) (see `Table` props).
*/
rows: PropTypes.arrayOf(
PropTypes.arrayOf(
PropTypes.shape( {
display: PropTypes.node,
value: PropTypes.oneOfType( [ PropTypes.string, PropTypes.number, PropTypes.bool ] ),
} )
)
).isRequired,
/**
* The total number of rows to display per page.
*/
rowsPerPage: PropTypes.number.isRequired,
/**
* An array of objects with `label` & `value` properties, which display in a line under the table.
* Optional, can be left off to show no summary.
*/
summary: PropTypes.arrayOf(
PropTypes.shape( {
label: PropTypes.node,
value: PropTypes.oneOfType( [ PropTypes.string, PropTypes.number ] ),
} )
),
/**
* The title used in the card header, also used as the caption for the content in this table.
*/
title: PropTypes.string.isRequired,
/**
* The total number of rows (across all pages).
*/
totalRows: PropTypes.number.isRequired,
};
TableCard.defaultProps = {
downloadable: false,
isLoading: false,
onQueryChange: noop,
query: {},
rowHeader: 0,
rows: [],
};
export default TableCard;