2019-11-15

king

2019-11-15 d3edd6d592db12fbec67e2700d168e07546aed29

 src/components/sidemenu/comtableconfig/dragelement/index.jsx

@@ -7,7 +7,7 @@
import ItemTypes from './itemtypes'
import './index.scss'

const Container = ({list, type, handleList, handleMenu }) => {
const Container = ({list, type, placeholder, handleList, handleMenu }) => {
  let target = null
  const [cards, setCards] = useState(list)
  const moveCard = (id, atIndex) => {
@@ -97,9 +97,18 @@
      target = null
    }
  })
  // const [, drop] = useDrop({ accept: ItemTypes[type] })
  let columns = []
  if (type === 'columns' && cards.length > 12) {
    let number = Math.ceil(cards.length / Math.ceil(cards.length / 12))
    for (let i = 0, len = cards.length; i < len; i += number) {
      columns.push(cards.slice(i, i + number))
    }
  } else if (type === 'columns') {
    columns.push(cards)
  }
  
  return (
    <div ref={drop} className="ant-row" style={type === 'columns' ? {display: 'flex'} : {}}>
    <div ref={drop} className="ant-row">
      {type === 'action' && cards.map(card => (
        <Card
          key={card.uuid}
@@ -127,21 +136,33 @@
        </Col>
      ))}
      {type === 'columns' && cards.length > 0 &&
      <div className="page-card" style={{flex: 60}}>
        <span className="ant-checkbox-inner"></span>
      </div>}
      {type === 'columns' && cards.map(card => (
        <Card
          key={card.uuid}
          id={`${card.id}`}
          type={type}
          card={card}
          moveCard={moveCard}
          editCard={editCard}
          findCard={findCard}
          hasDrop={hasDrop}
        />
      ))}
        columns.map((column, i) => (
          <div key={i} className="column-box">
            {i === 0 &&
              <div className="page-card" style={{flex: 60}}>
                <span className="ant-checkbox-inner"></span>
              </div>
            }
            {column.map(card => (
              <Card
                key={card.uuid}
                id={`${card.id}`}
                type={type}
                card={card}
                moveCard={moveCard}
                editCard={editCard}
                findCard={findCard}
                hasDrop={hasDrop}
              />
            ))}
          </div>
        ))
      }
      {cards.length === 0 &&
        <div className="common-drawarea-placeholder">
          {placeholder}
        </div>
      }
    </div>
  )
}