Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Implemented the logic to allow the user to remove items by clicking t…
…he 'Remove items...' button.
- Loading branch information
Showing
with
31 additions
and
1 deletion.
-
+31
−1
webpack_in/entry.jsx
|
@@ -129,6 +129,11 @@ class ListWidget extends React.Component { |
|
|
)) |
|
|
}); |
|
|
|
|
|
this._mutateStateToRemoveItemsChecked = state => ({ |
|
|
...state, |
|
|
items: state.items.filter(objItem => !objItem.is_checked) |
|
|
}); |
|
|
|
|
|
const objStateEmpty = { |
|
|
items: [], |
|
|
total_added: 0 |
|
@@ -146,6 +151,17 @@ class ListWidget extends React.Component { |
|
|
render() { |
|
|
const arrItemsSelected = this.state.items.filter(objItem => objItem.is_checked); |
|
|
|
|
|
const formatListOfNames = (arrNames) => arrNames.reduce( |
|
|
(strOutput, strName, index) => ( |
|
|
`${strOutput}${index > 0 // Will render either ' and' or ',' before 2nd item. |
|
|
// Will render ', and' before the 3rd+ last item. |
|
|
? (`${arrNames.length > 2 ? ',' : "" |
|
|
}${index === arrNames.length - 1 ? ' and' : ""}` |
|
|
) |
|
|
: ""} "${strName}"` |
|
|
), |
|
|
""); |
|
|
|
|
|
return ( |
|
|
<div style={ objStyleCommon }> |
|
|
<div style={ objStyleContent }> |
|
@@ -195,7 +211,21 @@ class ListWidget extends React.Component { |
|
|
}}/> |
|
|
<ButtonWidget caption={ arrItemsSelected.length > 1 ? "Remove items..." |
|
|
: "Remove item..." } |
|
|
isDisabled={ arrItemsSelected.length === 0 }/> |
|
|
isDisabled={ arrItemsSelected.length === 0 } |
|
|
onClick={() => { |
|
|
const arrCaptions = arrItemsSelected |
|
|
.map(objItem => objItem.caption); |
|
|
const isConfirmed = confirm( |
|
|
`Are you sure you want to remove item${ |
|
|
arrCaptions.length > 1 ? "s" : ""} ${ |
|
|
formatListOfNames(arrCaptions) |
|
|
}?`); |
|
|
if (isConfirmed === false) { |
|
|
return; |
|
|
} |
|
|
|
|
|
this.setState(this._mutateStateToRemoveItemsChecked(this.state)); |
|
|
}}/> |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|