2020-10-20

king

2020-10-20 7b01bec1609710729a868093ad69484ebea82d80

 src/templates/modalconfig/dragelement/card.jsx

@@ -2,12 +2,14 @@
import { useDrag, useDrop } from 'react-dnd'
import { Icon, Select, DatePicker, Input, InputNumber, Button, Popover, Switch, Radio, Checkbox } from 'antd'
import moment from 'moment'

import CheckCard from '../checkCard'
import './index.scss'

const { MonthPicker } = DatePicker
const { TextArea } = Input

const Card = ({ id, card, cols, moveCard, findCard, editCard, closeCard, copyCard, hasDrop }) => {
const Card = ({ id, card, cols, moveCard, findCard, editCard, closeCard, copyCard }) => {
  const originalIndex = findCard(id).index
  const [{ isDragging }, drag] = useDrag({
    item: { type: 'form', id, originalIndex },
@@ -18,9 +20,11 @@
  const [, drop] = useDrop({
    accept: 'form',
    canDrop: () => true,
    drop: ({ id: draggedId, originalIndex }) => {
    drop: (item) => {
      const { id: draggedId, originalIndex } = item

      if (originalIndex === undefined) {
        hasDrop(card)
        item.dropTargetId = id
      } else if (draggedId) {
        if (draggedId !== id) {
          const { index: overIndex } = findCard(id)
@@ -58,7 +62,13 @@
  }
  let labelCol = 'ant-col-sm-8'
  let wrapCol = 'ant-col-sm-16'
  if (card.type === 'textarea') {
  let isEntireLine = false

  if (card.entireLine === 'true' || ['textarea', 'hint', 'checkcard'].includes(card.type)) {
    isEntireLine = true
  }

  if (isEntireLine) {
    if (cols === '2') {
      labelCol = 'ant-col-sm-4'
      wrapCol = 'ant-col-sm-20'
@@ -108,6 +118,10 @@
      <Checkbox value="C">C</Checkbox>
      <Checkbox value="D">D</Checkbox>
    </Checkbox.Group>)
  } else if (card.type === 'hint') {
    formItem = <div style={{marginTop: '10px', color: 'rgba(0, 0, 0, 0.85)'}}>{card.message}</div>
  } else if (card.type === 'checkcard') {
    formItem = <CheckCard width={card.width} ratio={card.ratio} display={card.display} fields={card.fields} options={card.options} />
  }

  return (
@@ -122,7 +136,9 @@
        <div ref={node => drag(drop(node))}>
          {<div className="ant-row ant-form-item">
            <div className={'ant-col ant-form-item-label ant-col-xs-24 ' + labelCol}>
              <label title={card.label}>{card.label}</label>
              {card.label ? <label className={card.required === 'true' ? 'required' : ''}>{card.tooltip ? 
                <Icon type="question-circle" /> : null}
                {card.label}</label> : null}
            </div>
            <div className={'ant-col ant-form-item-control-wrapper ant-col-xs-24 ' + wrapCol}>
              {formItem}