| | |
| | | import React, { useState } from 'react' |
| | | import React from 'react' |
| | | import { useDrop } from 'react-dnd' |
| | | import { is, fromJS } from 'immutable' |
| | | import update from 'immutability-helper' |
| | | import { Col, Icon } from 'antd' |
| | | import Utils from '@/utils/utils.js' |
| | | import Card from './card' |
| | | import ItemTypes from './itemtypes' |
| | | import './index.scss' |
| | | |
| | | const Container = ({list, type }) => { |
| | | |
| | | const [cards, setCards] = useState(list) |
| | | const moveCard = (id, atIndex) => { |
| | | const { card, index } = findCard(id) |
| | | const _cards = update(cards, { $splice: [[index, 1], [atIndex, 0, card]] }) |
| | | handleList(type, _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 Container = ({dropcard}) => { |
| | | |
| | | const [, drop] = useDrop({ |
| | | accept: ItemTypes[type], |
| | | accept: 'print', |
| | | drop(item) { |
| | | |
| | | dropcard(item) |
| | | } |
| | | }) |
| | | |
| | | return ( |
| | | <div ref={drop} className="ant-row"> |
| | | |
| | | <div ref={drop} className="print-area"> |
| | | <canvas id="darea"></canvas> |
| | | </div> |
| | | ) |
| | | } |