Skip to content

Commit

Permalink
fix(ItemSelector): fix reordering of items in list (#6)
Browse files Browse the repository at this point in the history
Includes:

* fix when calculating the index to drop the dragged items
* separate reardering function to a separate module
* add tests for the reordering function
* update test snapshots
  • Loading branch information
jenniferarnesen authored Apr 11, 2019
1 parent 1dc9cfb commit 42e0e07
Show file tree
Hide file tree
Showing 6 changed files with 903 additions and 527 deletions.
56 changes: 9 additions & 47 deletions src/components/ItemSelector/SelectedItems.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ import PropTypes from 'prop-types'
import i18n from '@dhis2/d2-i18n'
import Button from '@material-ui/core/Button/Button'
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'
import { sortBy } from 'lodash'

import Item from './widgets/SelectedItem'
import { ArrowButton as UnAssignButton } from './widgets/ArrowButton'
import { toggler } from './modules/toggler'
import { reorderList } from './modules/reorderList'
import styles from './styles/SelectedItems.style'

const Subtitle = () => (
Expand Down Expand Up @@ -84,51 +84,6 @@ export class SelectedItems extends Component {
this.setState({ draggingId: start.draggableId })
}

reorderList = (destination, source, draggableId) => {
const list = Array.from(this.props.items.map(item => item.id))

if (this.isMultiDrag(draggableId)) {
const indexedItemsToMove = sortBy(
this.state.highlighted.map(item => {
return {
item,
idx: this.props.items
.map(item => item.id)
.indexOf(item),
}
}),
'idx'
)

let destinationIndex = destination.index

if (
destinationIndex < this.props.items.length - 1 &&
destinationIndex > 1
) {
indexedItemsToMove.forEach(indexed => {
if (indexed.idx < destinationIndex) {
--destinationIndex
}
})
}

indexedItemsToMove.forEach(indexed => {
const idx = list.indexOf(indexed.item)
list.splice(idx, 1)
})

indexedItemsToMove.forEach((indexed, i) => {
list.splice(destinationIndex + i, 0, indexed.item)
})
} else {
list.splice(source.index, 1)
list.splice(destination.index, 0, draggableId)
}

return list
}

onDragEnd = ({ destination, source, draggableId }) => {
this.setState({ draggingId: null })

Expand All @@ -143,7 +98,14 @@ export class SelectedItems extends Component {
return
}

const newList = this.reorderList(destination, source, draggableId)
const newList = reorderList({
destinationIndex: destination.index,
sourceIndex: source.index,
draggableId,
isMultiDrag: this.isMultiDrag(draggableId),
items: this.props.items,
highlightedItemIds: this.state.highlighted,
})

this.props.onReorder(newList)
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@ describe('UnselectedItems component', () => {

it('triggers onSelect all when "select all" button clicked', () => {
unselectedItems()
.find('Button')
.find('.select-all-button')
.childAt(0)
.simulate('click')

expect(props.onSelect).toHaveBeenCalled()
Expand Down
Loading

0 comments on commit 42e0e07

Please sign in to comment.