Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Fix select all functionality

Browse Source 
I don't know what was wrong. I found out that with class check-column React
handler wasn't called. Something somewhere stopped the event propagation.
I guess something in WordPress, but I am not sure. So I renamed the class
now it is working.

[MAILPOET-1681]
This commit is contained in:
Pavel Dohnal
2018-12-11 15:37:44 +01:00
parent a87cdc89e8
commit bc0ece08da
4 changed files with 21 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
assets/css/src/listing.styl
View File

@@ -12,9 +12,16 @@
th span th span
white-space: nowrap white-space: nowrap
thead .check-column thead .mailpoet-check-column
tfoot .check-column tfoot .mailpoet-check-column
padding: 10px 0 0 3px padding: 10px 0 0 3px
width: 2.2em;
vertical-align: top;
tbody .mailpoet-check-column
margin: 0 0 0 8px;
vertical-align: text-top;
padding: 11px 0 0 3px;
thead th.column-primary thead th.column-primary
tfoot th.column-primary tfoot th.column-primary

11
assets/js/src/listing/header.jsx
View File

@@ -4,7 +4,14 @@ import PropTypes from 'prop-types';
import ListingColumn from './listing_column.jsx'; import ListingColumn from './listing_column.jsx';
class ListingHeader extends React.Component { class ListingHeader extends React.Component {
handleSelectItems = evt => this.props.onSelectItems(evt.target.checked); constructor(props) {
super(props);
this.handleSelectItems = this.handleSelectItems.bind(this);
}
handleSelectItems(evt) {
this.props.onSelectItems(evt.target.checked);
}
render() { render() {
const columns = this.props.columns.map((column, index) => { const columns = this.props.columns.map((column, index) => {
@@ -28,7 +35,7 @@ class ListingHeader extends React.Component {
if (this.props.is_selectable === true) { if (this.props.is_selectable === true) {
checkbox = ( checkbox = (
<th <th
className="manage-column column-cb check-column" className="manage-column column-cb mailpoet-check-column"
> >
<label className="screen-reader-text" htmlFor="select_all"> <label className="screen-reader-text" htmlFor="select_all">
{MailPoet.I18n.t('selectAll')} {MailPoet.I18n.t('selectAll')}

2
assets/js/src/listing/listing.jsx
View File

@@ -470,7 +470,7 @@ const Listing = createReactClass({ // eslint-disable-line react/prefer-es6-class
selectedIds = jQuery.merge(selectedIds, [id]); selectedIds = jQuery.merge(selectedIds, [id]);
// check whether all items on the page are selected // check whether all items on the page are selected
if ( if (
jQuery('tbody .check-column :checkbox:not(:checked)').length === 0 jQuery('tbody .mailpoet-check-column :checkbox:not(:checked)').length === 0
) { ) {
selection = 'page'; selection = 'page';
} }

2
assets/js/src/listing/listing_item.jsx
View File

@@ -39,7 +39,7 @@ class ListingItem extends React.Component {
if (this.props.is_selectable === true) { if (this.props.is_selectable === true) {
checkbox = ( checkbox = (
<th className="check-column" scope="row"> <th className="mailpoet-check-column" scope="row">
<label className="screen-reader-text" htmlFor={`listing-row-checkbox-${this.props.item.id}`}>{ <label className="screen-reader-text" htmlFor={`listing-row-checkbox-${this.props.item.id}`}>{
`Select ${this.props.item[this.props.columns[0].name]}` `Select ${this.props.item[this.props.columns[0].name]}`
}</label> }</label>