2019-12-06

king

2019-12-06 2cb65d99c9aebf8293cb2838fcfe3e09fb2739ce

 src/templates/modalconfig/dragelement/card.jsx

@@ -1,20 +1,22 @@
import React from 'react'
import { useDrag, useDrop } from 'react-dnd'
import { Icon, Button, Select, DatePicker, Input } from 'antd'
import { Icon, Select, DatePicker, Input } from 'antd'
import moment from 'moment'
import ItemTypes from './itemtypes'
import './index.scss'

const Card = ({ id, type, card, moveCard, findCard, editCard, copyCard, hasDrop }) => {
const { MonthPicker } = DatePicker

const Card = ({ id, card, moveCard, findCard, editCard, closeCard, hasDrop }) => {
  const originalIndex = findCard(id).index
  const [{ isDragging }, drag] = useDrag({
    item: { type: ItemTypes[type], id, originalIndex },
    item: { type: ItemTypes.form, id, originalIndex },
    collect: monitor => ({
      isDragging: monitor.isDragging(),
    }),
  })
  const [, drop] = useDrop({
    accept: ItemTypes[type],
    accept: ItemTypes.form,
    canDrop: () => true,
    drop: (item) => {
      if (!item.hasOwnProperty('originalIndex')) {
@@ -35,19 +37,22 @@
    editCard(id)
  }

  const copy = () => {
    copyCard(id)
  const close = () => {
    closeCard(id)
  }

  return (
    <div className="page-card" style={type === 'columns' ? { flex: card.Width, opacity: opacity} : { opacity: opacity}}>
    <div className="page-card" style={{ opacity: opacity}}>
      <div ref={node => drag(drop(node))}>
        {type === 'search' && <div className="ant-row ant-form-item">
        {<div className="ant-row ant-form-item">
          <div className="ant-col ant-form-item-label">
            <label title={card.label}>{card.label}</label>
          </div>
          <div className="ant-col ant-form-item-control-wrapper">
            {card.type === 'text' &&
              <Input style={{marginTop: '4px'}} defaultValue={card.initval} />
            }
            {card.type === 'number' &&
              <Input style={{marginTop: '4px'}} defaultValue={card.initval} />
            }
            {(card.type === 'select' || card.type === 'link') &&
@@ -56,33 +61,18 @@
            {card.type === 'date' &&
              <DatePicker defaultValue={card.initval ? moment(card.initval, 'YYYY-MM-DD') : null} />
            }
            {card.type === 'datemonth' ?
              <MonthPicker defaultValue={card.initval ? moment().subtract(card.initval, 'month') : null} /> : null
            }
            {card.type === 'datetime' &&
              <DatePicker showTime defaultValue={card.initval ? moment(card.initval, 'YYYY-MM-DD HH:mm:ss') : null} />
            }
            <div className="input-mask"></div>
          </div>
        </div>}
        {type === 'action' &&
          <Button
            className={'mk-btn mk-' + card.class}
            icon={card.icon}
            key={card.uuid}
          >{card.label}</Button>
        }
        {type === 'columns' &&
          <span className="ant-table-header-column">
            <div className="ant-table-column-sorters" title={card.label} style={{textAlign: card.Align}}>
              <span className="ant-table-column-title">{card.label}</span>
              {card.IsSort === 'true' && <span className="ant-table-column-sorter">
                <Icon type="caret-up" />
                <Icon type="caret-down" />
              </span>}
            </div>
          </span>
        }
      </div>
      <Icon className="edit" type="edit" onClick={edit} />
      {type === 'action' && <Icon className="edit copy" type="copy" onClick={copy} />}
      <Icon className="edit close" type="close" onClick={close} />
    </div>
  )
}