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, selectId, handleList, handleGroup, closeGroup, selectGroup}) => {
|
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)
|
handleGroup(card)
|
}
|
|
const closeCard = id => {
|
const { card } = findCard(id)
|
closeGroup(card)
|
}
|
|
const selectCard = id => {
|
const { card } = findCard(id)
|
selectGroup(card)
|
}
|
|
return (
|
<div className="normal-form-titles" >
|
{cards.map(card => (
|
<Card
|
id={card.uuid}
|
key={card.uuid}
|
active={card.uuid === selectId}
|
card={card}
|
moveCard={moveCard}
|
editCard={editCard}
|
closeCard={closeCard}
|
findCard={findCard}
|
selectCard={selectCard}
|
/>
|
))}
|
</div>
|
)
|
}
|
export default Container
|