From 71a0e75ecb56ae643fe1e86188d45f93f48388c9 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 28 八月 2020 14:07:41 +0800
Subject: [PATCH] 2020-08-28
---
src/menu/searchcomponent/dragsearch/card.jsx | 79 ++++++++++++++++++++-------------------
1 files changed, 41 insertions(+), 38 deletions(-)
diff --git a/src/menu/searchcomponent/dragsearch/card.jsx b/src/menu/searchcomponent/dragsearch/card.jsx
index b8d4a54..9b8708d 100644
--- a/src/menu/searchcomponent/dragsearch/card.jsx
+++ b/src/menu/searchcomponent/dragsearch/card.jsx
@@ -1,6 +1,6 @@
import React from 'react'
import { useDrag, useDrop } from 'react-dnd'
-import { Icon, Select, DatePicker, Input } from 'antd'
+import { Icon, Select, DatePicker, Input, Popover } from 'antd'
import moment from 'moment'
import DateGroup from '../dategroup'
@@ -8,7 +8,7 @@
const { MonthPicker, WeekPicker, RangePicker } = DatePicker
-const Card = ({ id, card, moveCard, findCard, editCard, delCard }) => {
+const Card = ({ id, cardIds, card, moveCard, findCard, copyCard, editCard, delCard }) => {
const originalIndex = findCard(id).index
const [{ isDragging }, drag] = useDrag({
item: { type: 'search', id, originalIndex },
@@ -19,13 +19,10 @@
const [, drop] = useDrop({
accept: 'search',
canDrop: () => true,
- drop: (item) => {
- if (!item.hasOwnProperty('originalIndex')) {
-
- }
- },
+ drop: () => {},
hover({ id: draggedId }) {
if (!draggedId) return
+ if (!cardIds.includes(draggedId)) return
if (draggedId !== id) {
const { index: overIndex } = findCard(id)
moveCard(draggedId, overIndex)
@@ -60,39 +57,45 @@
}
return (
- <div className="page-card" style={{ opacity: opacity}}>
- <div ref={node => drag(drop(node))}>
- <div className="ant-form-item">
- {card.type === 'text' ?
- <Input placeholder={card.label} style={{marginTop: '4px'}} value={card.initval} /> : null
- }
- {(card.type === 'multiselect' || card.type === 'select' || card.type === 'link') ?
- <Select placeholder={card.label} value={_defaultValue}></Select> : null
- }
- {card.type === 'date' ?
- <DatePicker placeholder={card.label} value={card.initval ? moment().subtract(card.initval, 'days') : null} /> : null
- }
- {card.type === 'dateweek' ?
- <WeekPicker placeholder={card.label} value={card.initval ? moment().subtract(card.initval * 7, 'days') : null} /> : null
- }
- {card.type === 'datemonth' ?
- <MonthPicker placeholder={card.label} value={card.initval ? moment().subtract(card.initval, 'month') : null} /> : null
- }
- {card.type === 'daterange' ?
- <RangePicker
- className="data-range"
- placeholder={['BeginTime', 'EndTime']}
- renderExtraFooter={() => 'extra footer'}
- value={_defaultValue}
- /> : null
- }
- {card.type === 'group' ? <DateGroup card={card} /> : null }
- <div className="input-mask"></div>
+ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
+ <div className="mk-popover-control">
+ <Icon className="edit" title="edit" type="edit" onClick={() => editCard(id)} />
+ <Icon className="copy" title="copy" type="copy" onClick={() => copyCard(id)} />
+ <Icon className="close" title="delete" type="close" onClick={() => delCard(id)} />
+ </div>
+ } trigger="hover">
+ <div className="page-card" style={{ opacity: opacity}}>
+ <div ref={node => drag(drop(node))}>
+ <div className="ant-form-item">
+ {card.type === 'text' ?
+ <Input placeholder={card.label} value={card.initval} /> : null
+ }
+ {(card.type === 'multiselect' || card.type === 'select' || card.type === 'link') ?
+ <Select placeholder={card.label} value={_defaultValue}></Select> : null
+ }
+ {card.type === 'date' ?
+ <DatePicker placeholder={card.label} value={card.initval ? moment().subtract(card.initval, 'days') : null} /> : null
+ }
+ {card.type === 'dateweek' ?
+ <WeekPicker placeholder={card.label} value={card.initval ? moment().subtract(card.initval * 7, 'days') : null} /> : null
+ }
+ {card.type === 'datemonth' ?
+ <MonthPicker placeholder={card.label} value={card.initval ? moment().subtract(card.initval, 'month') : null} /> : null
+ }
+ {card.type === 'daterange' ?
+ <RangePicker
+ className="data-range"
+ placeholder={['BeginTime', 'EndTime']}
+ renderExtraFooter={() => 'extra footer'}
+ value={_defaultValue}
+ /> : null
+ }
+ {card.type === 'group' ? <DateGroup card={card} /> : null }
+ <div className="input-mask"></div>
+ </div>
</div>
</div>
- <Icon className="edit" title="edit" type="edit" onClick={() => editCard(id)} />
- <Icon className="edit close" title="delete" type="close" onClick={() => delCard(id)} />
- </div>
+ </Popover>
)
}
export default Card
--
Gitblit v1.8.0