import React, { useState } from 'react'
|
import { is, fromJS } from 'immutable'
|
import update from 'immutability-helper'
|
import Card from './card'
|
import './index.scss'
|
|
const Container = ({list, handleList, handleForm, closeForm, handleGroup }) => {
|
const [cards, setCards] = useState(list)
|
const moveCard = (id, atIndex) => {
|
const { card, index } = findCard(id)
|
|
if (!card) return
|
|
const _cards = update(cards, { $splice: [[index, 1], [atIndex, 0, card]] })
|
|
handleList(_cards)
|
}
|
|
if (!is(fromJS(cards), fromJS(list))) {
|
setCards(list)
|
}
|
|
const findCard = id => {
|
const card = cards.filter(c => `${c.uuid}` === id)[0]
|
return {
|
card,
|
index: cards.indexOf(card),
|
}
|
}
|
|
const editCard = id => {
|
const { card } = findCard(id)
|
|
handleForm(card)
|
}
|
|
const closeCard = id => {
|
const { card } = findCard(id)
|
closeForm(card)
|
}
|
|
const changeGroup = id => {
|
const { card } = findCard(id)
|
handleGroup(card)
|
}
|
|
return (
|
<div className="ant-row modal-search-groups-row">
|
{cards.map(card => {
|
return <Card
|
id={card.uuid}
|
key={card.uuid}
|
card={card}
|
moveCard={moveCard}
|
editCard={editCard}
|
closeCard={closeCard}
|
changeGroup={changeGroup}
|
findCard={findCard}
|
/>
|
})}
|
</div>
|
)
|
}
|
export default Container
|