/** @format */ /** * External dependencies */ import { __, sprintf } from '@wordpress/i18n'; import { Component, createRef } from '@wordpress/element'; import classnames from 'classnames'; import { IconButton } from '@wordpress/components'; import Gridicon from 'gridicons'; import PropTypes from 'prop-types'; import { isEqual, uniqueId } from 'lodash'; const ASC = 'ascending'; const DESC = 'descending'; const getDisplay = cell => cell.display || null; const getValue = cell => cell.value || 0; class Table extends Component { constructor( props ) { super( props ); this.state = { tabIndex: null, rows: props.rows || [], sortedBy: null, sortDir: 'none', }; this.container = createRef(); this.sortBy = this.sortBy.bind( this ); this.captionID = uniqueId( 'caption-' ); } componentDidUpdate( prevProps ) { if ( ! isEqual( this.props.rows, prevProps.rows ) ) { /* eslint-disable react/no-did-update-set-state */ this.setState( { rows: this.props.rows, } ); /* eslint-enable react/no-did-update-set-state */ } } componentDidMount() { const { scrollWidth, clientWidth } = this.container.current; const scrollable = scrollWidth > clientWidth; /* eslint-disable react/no-did-mount-set-state */ this.setState( { tabIndex: scrollable ? '0' : null, } ); /* eslint-enable react/no-did-mount-set-state */ } isColSortable( col ) { const { rows: [ first ] } = this.props; if ( ! first || ! first[ col ] ) { return false; } return false !== first[ col ].value; } sortBy( col ) { this.setState( prevState => { // Set the sort direction as inverse of current state const sortDir = prevState.sortDir === ASC ? DESC : ASC; return { rows: prevState.rows .slice( 0 ) .sort( ( a, b ) => sortDir === ASC ? getValue( a[ col ] ) > getValue( b[ col ] ) : getValue( a[ col ] ) < getValue( b[ col ] ) ), sortedBy: col, sortDir, }; } ); } render() { const { caption, classNames, headers, rowHeader } = this.props; const { rows, sortedBy, sortDir, tabIndex } = this.state; const classes = classnames( 'woocommerce-table__table', classNames ); return (
{ isSortable ? (
|
);
} ) }
|
---|---|
{ getDisplay( cell ) } | ) : ({ getDisplay( cell ) } | ) ) }