@ -1,6 +1,7 @@
import PropTypes from 'prop-types' ;
import PropTypes from 'prop-types' ;
import React , { Component } from 'react' ;
import React , { Component } from 'react' ;
import LoadingIndicator from 'Components/Loading/LoadingIndicator' ;
import LoadingIndicator from 'Components/Loading/LoadingIndicator' ;
import ConfirmModal from 'Components/Modal/ConfirmModal' ;
import PageContent from 'Components/Page/PageContent' ;
import PageContent from 'Components/Page/PageContent' ;
import PageContentBody from 'Components/Page/PageContentBody' ;
import PageContentBody from 'Components/Page/PageContentBody' ;
import PageToolbar from 'Components/Page/Toolbar/PageToolbar' ;
import PageToolbar from 'Components/Page/Toolbar/PageToolbar' ;
@ -10,11 +11,83 @@ import Table from 'Components/Table/Table';
import TableBody from 'Components/Table/TableBody' ;
import TableBody from 'Components/Table/TableBody' ;
import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper' ;
import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper' ;
import TablePager from 'Components/Table/TablePager' ;
import TablePager from 'Components/Table/TablePager' ;
import { align , icons } from 'Helpers/Props' ;
import { align , icons , kinds } from 'Helpers/Props' ;
import getRemovedItems from 'Utilities/Object/getRemovedItems' ;
import hasDifferentItems from 'Utilities/Object/hasDifferentItems' ;
import getSelectedIds from 'Utilities/Table/getSelectedIds' ;
import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState' ;
import selectAll from 'Utilities/Table/selectAll' ;
import toggleSelected from 'Utilities/Table/toggleSelected' ;
import BlacklistRowConnector from './BlacklistRowConnector' ;
import BlacklistRowConnector from './BlacklistRowConnector' ;
class Blacklist extends Component {
class Blacklist extends Component {
//
// Lifecycle
constructor ( props , context ) {
super ( props , context ) ;
this . state = {
allSelected : false ,
allUnselected : false ,
lastToggled : null ,
selectedState : { } ,
isConfirmRemoveModalOpen : false ,
items : props . items
} ;
}
componentDidUpdate ( prevProps ) {
const {
items
} = this . props ;
if ( hasDifferentItems ( prevProps . items , items ) ) {
this . setState ( ( state ) => {
return {
... removeOldSelectedState ( state , getRemovedItems ( prevProps . items , items ) ) ,
items
} ;
} ) ;
return ;
}
}
//
// Control
getSelectedIds = ( ) => {
return getSelectedIds ( this . state . selectedState ) ;
}
//
// Listeners
onSelectAllChange = ( { value } ) => {
this . setState ( selectAll ( this . state . selectedState , value ) ) ;
}
onSelectedChange = ( { id , value , shiftKey = false } ) => {
this . setState ( ( state ) => {
return toggleSelected ( state , this . props . items , id , value , shiftKey ) ;
} ) ;
}
onRemoveSelectedPress = ( ) => {
this . setState ( { isConfirmRemoveModalOpen : true } ) ;
}
onRemoveSelectedConfirmed = ( ) => {
this . props . onRemoveSelected ( this . getSelectedIds ( ) ) ;
this . setState ( { isConfirmRemoveModalOpen : false } ) ;
}
onConfirmRemoveModalClose = ( ) => {
this . setState ( { isConfirmRemoveModalOpen : false } ) ;
}
//
//
// Render
// Render
@ -28,6 +101,7 @@ class Blacklist extends Component {
items ,
items ,
columns ,
columns ,
totalRecords ,
totalRecords ,
isRemoving ,
isClearingBlacklistExecuting ,
isClearingBlacklistExecuting ,
onClearBlacklistPress ,
onClearBlacklistPress ,
... otherProps
... otherProps
@ -36,10 +110,27 @@ class Blacklist extends Component {
const isAllPopulated = isPopulated && isAuthorPopulated ;
const isAllPopulated = isPopulated && isAuthorPopulated ;
const isAnyFetching = isFetching || isAuthorFetching ;
const isAnyFetching = isFetching || isAuthorFetching ;
const {
allSelected ,
allUnselected ,
selectedState ,
isConfirmRemoveModalOpen
} = this . state ;
const selectedIds = this . getSelectedIds ( ) ;
return (
return (
< PageContent title = "Blacklist" >
< PageContent title = "Blacklist" >
< PageToolbar >
< PageToolbar >
< PageToolbarSection >
< PageToolbarSection >
< PageToolbarButton
label = "Remove Selected"
iconName = { icons . REMOVE }
isDisabled = { ! selectedIds . length }
isSpinning = { isRemoving }
onPress = { this . onRemoveSelectedPress }
/ >
< PageToolbarButton
< PageToolbarButton
label = "Clear"
label = "Clear"
iconName = { icons . CLEAR }
iconName = { icons . CLEAR }
@ -83,8 +174,12 @@ class Blacklist extends Component {
isAllPopulated && ! error && ! ! items . length &&
isAllPopulated && ! error && ! ! items . length &&
< div >
< div >
< Table
< Table
selectAll = { true }
allSelected = { allSelected }
allUnselected = { allUnselected }
columns = { columns }
columns = { columns }
{ ... otherProps }
{ ... otherProps }
onSelectAllChange = { this . onSelectAllChange }
>
>
< TableBody >
< TableBody >
{
{
@ -92,8 +187,10 @@ class Blacklist extends Component {
return (
return (
< BlacklistRowConnector
< BlacklistRowConnector
key = { item . id }
key = { item . id }
isSelected = { selectedState [ item . id ] || false }
columns = { columns }
columns = { columns }
{ ... item }
{ ... item }
onSelectedChange = { this . onSelectedChange }
/ >
/ >
) ;
) ;
} )
} )
@ -109,6 +206,16 @@ class Blacklist extends Component {
< / d i v >
< / d i v >
}
}
< / P a g e C o n t e n t B o d y >
< / P a g e C o n t e n t B o d y >
< ConfirmModal
isOpen = { isConfirmRemoveModalOpen }
kind = { kinds . DANGER }
title = "Remove Selected"
message = { 'Are you sure you want to remove the selected items from the blacklist?' }
confirmLabel = "Remove Selected"
onConfirm = { this . onRemoveSelectedConfirmed }
onCancel = { this . onConfirmRemoveModalClose }
/ >
< / P a g e C o n t e n t >
< / P a g e C o n t e n t >
) ;
) ;
}
}
@ -123,7 +230,9 @@ Blacklist.propTypes = {
items : PropTypes . arrayOf ( PropTypes . object ) . isRequired ,
items : PropTypes . arrayOf ( PropTypes . object ) . isRequired ,
columns : PropTypes . arrayOf ( PropTypes . object ) . isRequired ,
columns : PropTypes . arrayOf ( PropTypes . object ) . isRequired ,
totalRecords : PropTypes . number ,
totalRecords : PropTypes . number ,
isRemoving : PropTypes . bool . isRequired ,
isClearingBlacklistExecuting : PropTypes . bool . isRequired ,
isClearingBlacklistExecuting : PropTypes . bool . isRequired ,
onRemoveSelected : PropTypes . func . isRequired ,
onClearBlacklistPress : PropTypes . func . isRequired
onClearBlacklistPress : PropTypes . func . isRequired
} ;
} ;