function createWrapper(type) {
function collectTarget(connect, monitor) {
return {
type,
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver()
};
}
const dropTarget = {
drop(_, monitor, { props, context }) {
const event = monitor.getItem();
const { value } = props
const { onEventDrop, startAccessor, endAccessor } = context
const start = get(event, startAccessor);
const end = get(event, endAccessor);
onEventDrop({
event,
...getEventTimes(start, end, value, type)
})
}
};
return DropTarget(['event'], dropTarget, collectTarget)(DraggableBackgroundWrapper);
}
const getDroppableDashboardCardBox = (backend = ReactDnDHTML5Backend) => (
/* eslint-disable new-cap */
compose(
DragDropContext(backend),
DropTarget(ItemTypes.CARD, cardTarget, connect => ({
connectDropTarget: connect.dropTarget()
}))
)(DashboardCardBox)
/* eslint-enable new-cap */
);
return function (SortableItemComponent) {
const SortableItem = (props) => <SortableItemComponent {...props} />;
SortableItem.contextTypes = {
dragDropManager: PropTypes.object.isRequired
};
SortableItem.propTypes = {
// Injected by React DnD:
connectDragSource: PropTypes.func.isRequired,
connectDropTarget: PropTypes.func.isRequired,
isDragging: PropTypes.bool.isRequired
};
let decoratedComponent = SortableItem;
decoratedComponent = DragSource(itemType, cardSource, collectDropSource)(decoratedComponent);
decoratedComponent = DropTarget(itemType, cardTarget, collectDropTarget)(decoratedComponent);
return decoratedComponent;
};
<div onClick={this.toggleDetails.bind(this)} className={this.state.showDetails ? "card_title folder-open" : "card_title folder-closed"}>
{this.props.title}
</div>
<ReactCSSTransitionGroup transitionName="toggle"
transitionEnterTimeout={250}
transitionLeaveTimeout={250}>
{cardDetails}
</ReactCSSTransitionGroup>
</div>
));
}
}
Card.propTypes = {
id: PropTypes.number,
title: titlePropType,
description: PropTypes.string,
color: PropTypes.string,
tasks: PropTypes.arrayOf(PropTypes.object),
status: PropTypes.string,
taskCallbacks: PropTypes.object,
connectDragSource: PropTypes.func.isRequired,
connectDropTarget: PropTypes.func.isRequired
};
const dragHighOrderCard = DragSource(constants.CARD, cardDragSpec, collectDrag)(Card);
const dragDropHighOrderCard = DropTarget(constants.CARD, cardDropSpec, collectDrop)(dragHighOrderCard);
export default dragDropHighOrderCard;
</div>
)
}
render () {
const { horizontal, children, childWeight, connectDropTarget, isOver, toggleMeshDirection } = this.props
let meshStyle = {
minHeight: 100
}
if (isOver) {
meshStyle.backgroundColor = 'tomato'
}
if (horizontal) {
meshStyle.display = 'flex'
}
if (connectDropTarget) {
return connectDropTarget(
this.warpWithOverlay(
this.baseRender(meshStyle, children, horizontal, childWeight, true),
horizontal, toggleMeshDirection
)
)
} else {
return this.baseRender(meshStyle, children, horizontal, childWeight)
}
}
}
export default PostMesh
export const AdminPostMesh = DropTarget('image', imageTarget, collect)(PostMesh)
<button
onClick={toggleVisibility}
className="material-icons"
>
{category.hidden ? 'visibility' : 'visibility_off'}
</button>
<button
onClick={remove}
className="material-icons"
>
delete_forever
</button>
</span>
</div>,
));
};
export default connect(
({ runtime: { categoryService } }) => ({
categoryService,
}),
dispatch => ({
updateCategory: (category, data) => dispatch(categoryUpdate(category, data)),
deleteCategory: category => dispatch(categoryDelete(category)),
}),
)(
DragSource(CATEGORY, categorySource, collectDrag)(
DropTarget([CATEGORY, PHOTO], categoryDrop, collectDrop)(Category),
),
);
display={event.display}
lineId={event.lineId}
width={this.props.lineWidth - 2 - (Line.sidePadding * 2)}
vars={event.vars}
draggable={event.draggable}
moveTo={event.moveTo}
util={this.util}
eventDidClick={this.props.eventDidClick}
draggingDisplay={event.draggingDisplay}
/>
)
})}
{this.props.children}
</div>
<EventPreview />
</div>
);
}
}
Frame.propTypes = {
events: React.PropTypes.arrayOf(React.PropTypes.shape({
id: React.PropTypes.string.isRequired,
lineId: React.PropTypes.string.isRequired,
timeSpan: React.PropTypes.instanceOf(TimeSpan).isRequired,
color: React.PropTypes.string.isRequired
})).isRequired,
}
export default DragDropContext(DndBackend({ enableMouseEvents: true }))(DropTarget("Event", target, collect)(Frame))
<div className={cx('dynamic-item', 'firstModle', 'ui-sortable-item',
'false')} key={key} data-row={item.line == 1 ? true : ''}>
<div className="clearfix">
<label htmlFor="" className='label'>
<Balloon type="primary" trigger={<span className='ellips'><span className='required'>*</span>
{item.label}:</span>} closable={false} triggerType="hover">
{item.label}
</Balloon>
</label>
{ this.props.children }
<span className='edite icon'></span>
</div>
<span className="delete" onClick={this.props.onClick.bind(this, index)}>×</span>
</div>
),
)
)
}
}
Fields = DropTarget('CARD', cardTarget, connect => ({
connectDropTarget: connect.dropTarget(),
}))(Fields)
Fields = DragSource('CARD', cardSource, (connect, monitor) => ({
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging(),
}))(Fields)
export default Fields;
const stateToProps = state => ({
survey: state.getSurvey(),
runtime: state.getRuntime(),
view: state.getViewSetting(),
});
const actionsToProps = dispatch => ({
selectNode: nodeId => dispatch(Actions.selectNode(nodeId)),
removeNode: nodeId => dispatch(Actions.removeNode(nodeId)),
swapNode: (srcNodeId, destNodeId) => dispatch(Actions.swapNode(srcNodeId, destNodeId)),
});
// dndのためのHOC
const DropTargetNodeInFlow = DropTarget(
DND_NODE,
conditionTarget,
dndConnect => ({ connectDropTarget: dndConnect.dropTarget() }),
)(NodeInFlowOrig);
const DragSourceNodeInFlow = DragSource(
DND_NODE,
conditionSource,
(dndConnect, monitor) => ({
connectDragSource: dndConnect.dragSource(),
connectDragPreview: dndConnect.dragPreview(),
dragging: monitor.isDragging(),
}),
)(DropTargetNodeInFlow);
const NodeInFlow = connect(stateToProps, actionsToProps)(DragSourceNodeInFlow);
export default NodeInFlow;
right,
name,
makePick } = this.props;
return (<Matchup id={id}
wager={wager}
left={left}
right={right}
name={name}
makePick={makePick}
preview={false}
connectHandle={connectDragSource}/>
);
}
}
// TODO: Update to decorators once stabilized
// Use class assign until Decorators stabilize
// eslint-disable-next-line no-class-assign
DragableMatchup = DropTarget(Types.MATCHUP, matchupTarget, connect => ({
connectDropTarget: connect.dropTarget()
}))(DragableMatchup);
// Use class assign until Decorators stabilize
// eslint-disable-next-line no-class-assign
DragableMatchup = DragSource(Types.MATCHUP, matchupSource, collect)(DragableMatchup);
export default Matchup;
//export default Matchup;
export { PickData, MatchupData, DragableMatchup };
</Fragment> }
</section>
)
}
}
const dropTarget = {
drop: ({ onAddFiles }, monitor) => {
if (monitor.didDrop()) {
return
}
const { filesPromise } = monitor.getItem()
onAddFiles(filesPromise)
}
}
const dropCollect = (connect, monitor) => ({
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(),
canDrop: monitor.canDrop()
})
export const FilesListWithDropTarget = DropTarget(NativeTypes.FILE, dropTarget, dropCollect)(translate('files')(FilesList))
export default connect(
'selectNavbarWidth',
'selectFilesIsFetching',
'selectShowLoadingAnimation',
FilesListWithDropTarget
)
render() {
let {isDragging, connectDropTarget, connectDragSource} = this.props
return (
<div>
<ContextMenuTrigger id={"contextmenu"+this.props.id} holdToDisplay={-1}>
{connectDropTarget(connectDragSource(
<div style={{opacity: isDragging ? 0 : 1}}>
<Item {...this.props} />
</div>
))}
</ContextMenuTrigger>
<ItemActionsMenu {...this.props} />
</div>
)
}
}
export default DropTarget('item',cardTarget,targetCollect)(DragSource('item',cardSource,sourceCollect)(MoveableItem));
const ItemActionsMenu = ({ item, moveItem, deleteItem, collectionLists, collectionListsOrder }) => (
<ContextMenu id={"contextmenu"+item._id} style={{position: 'relative', zIndex: '5'}}>
<SubMenu title="Move Item" hoverDelay={50}>
{collectionListsOrder.map((id,i) => {
return (<MenuItem key={i} onClick={() => moveItem(item._id,id)} disabled={(item.lists || []).includes(id) ? true : false}>
{collectionLists[id].name}
</MenuItem>)
})}
</SubMenu>
<MenuItem onClick={() => deleteItem(item._id)}>Delete Item</MenuItem>
</ContextMenu>
)
opacity: 0.5,
backgroundColor: color,
}} />
);
}
constructor(props) {
super(props);
}
render() {
const { row, column, connectDropTarget, isOver, canDrop } = this.props;
return connectDropTarget(
<div style={{
position: 'relative',
flex:1,
display:"flex"
}}>
<div style={{display:"flex", flex:1, backgroundColor:this.props.tile, justifyContent:"center", alignItems:"center"}}>
{this.props.children}
</div>
{isOver && !canDrop && this.renderOverlay('red')}
{!isOver && canDrop && this.renderOverlay('yellow')}
{isOver && canDrop && this.renderOverlay('green')}
</div>
);
}
}
export default DropTarget(ItemTypes.PIECE, cellTarget, collect)(Cell);
if (isActive) {
isactiveshow = (<a className='sortable-placeholder'></a>);
}
return connectDropTarget(
<div className='fb-response-fields'>
{this.props.children}
{isactiveshow}
</div>
);
}
});
export default DropTarget(ItemTypes.LAYOUT, boxTarget, (connect, monitor) => ({
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(),
canDrop: monitor.canDrop()
}))(RowLayout);
// let RowLayout = React.createClass({
// render: function() {
// return (
// <div />
// );
// }
// });
// export default RowLayout;
return <Card key={card.id}
id={card.id}
title={card.title}
description={card.description}
color={card.color}
tasks={card.tasks}
taskCallbacks={this.props.taskCallbacks}
cardCallbacks={this.props.cardCallbacks}
/>;
});
return connectDropTarget(
<div className="list">
<h1>{this.props.title}</h1>
{cards}
</div>
);
}
}
List.propTypes = {
title: PropTypes.string.isRequired,
cards: PropTypes.arrayOf(PropTypes.object),
taskCallbacks: PropTypes.object,
cardCallbacks: PropTypes.object,
connectDropTarget: PropTypes.func.isRequired
};
export default DropTarget(constants.CARD, listTargetSpec, collect)(List);
field: PropTypes.object.isRequired,
index: PropTypes.number.isRequired
}
render () {
const {
isDragging,
connectDropTarget,
connectDragSource,
removeField,
field,
index
} = this.props
return connectDragSource(connectDropTarget(
<li ref={(r) => { this.targ = r }} key={field._id} className="field-layout__target__field" style={{ opacity: isDragging ? 0 : 1 }}>
<span className="field-layout__target__field__title">{field.title}</span>
<input type="text" name={`fields[${index}]`} value={field._id} readOnly hidden />
<button
className="field-layout__target__field__btn"
type="button"
onClick={() => removeField(field._id)}
><Icon icon="cross" width={10} height={10} /></button>
</li>
))
}
}
// eslint-disable-next-line max-len
export default DragSource(c.FIELD, source, collectSource)(DropTarget(c.FIELD, target, collectTarget)(FieldTargetCard))
// );
// }
// }
let ViewFieldViewList = React.createClass({
render:function(){
const { canDrop, isOver, connectDropTarget } = this.props;
const isActive = canDrop && isOver;
let isactiveshow = '';
if (isActive) {
isactiveshow = (<a className='sortable-placeholder'></a>);
}
let viewFieldViews = [];
this.props.list.map(function(data){
viewFieldViews.push(<ViewFieldView {...data}/>);
});
return connectDropTarget(
<div className='fb-response-fields'>
{viewFieldViews}
{isactiveshow}
</div>
);
}
});
export default DropTarget(ItemTypes.BOX, boxTarget, (connect, monitor) => ({
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(),
canDrop: monitor.canDrop()
}))(ViewFieldViewList);
const over = props.index;
// self
if (dragged === over) {
return;
}
props.dispatch(moveItem(dragged, over, props));
monitor.getItem().index = over;
},
};
/**
* Specifies the props to inject into your component.
*/
function dragProps (connect, monitor) {
return {
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging(),
connectDragPreview: connect.dragPreview(),
};
}
function dropProps (connect) {
return {
connectDropTarget: connect.dropTarget(),
};
};
exports.Sortable = DragSource('item', dragItem, dragProps)(DropTarget('item', dropItem, dropProps)(ItemsRow));
const opacity = isDragging ? 0 : 1;
return connectDragSource(connectDropTarget(
<div style={{ ...style, opacity }}>
<span>{text}</span>
<button>Delete</button>
</div>
));
}
}
Card.propTypes = {
connectDragSource: PropTypes.func.isRequired,
connectDropTarget: PropTypes.func.isRequired,
index: PropTypes.number.isRequired,
isDragging: PropTypes.bool.isRequired,
id: PropTypes.any.isRequired,
text: PropTypes.string.isRequired,
moveCard: PropTypes.func.isRequired
};
let componentToExport = DropTarget('card', cardTarget, connect => ({
connectDropTarget: connect.dropTarget()
}))(Card);
componentToExport = DragSource('card', cardSource, (connect, monitor) => ({
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
}))(componentToExport);
export default componentToExport;
moveExercise={this.moveExercise}
findExercise={this.findExercise}
removeExercise={this.removeExercise}
/>
))}
<SearchExercise
id="add-exercise"
handleChange={this.handleNewExercise}
exercises={exercisesList}
/>
<button id="save-routine-button" type="button" onClick={() => saveRoutine({exercises})}>Save Routine</button>
</div>
)
}
}
Routine.propTypes = {
type: PropTypes.string,
saveRoutine: PropTypes.func.isRequired,
exercisesList: PropTypes.array.isRequired,
connectDropTarget: PropTypes.func.isRequired,
}
// Until we have ES7 decorators, this way we can easily extend Routine with both functions
export default flow(
DropTarget( Types.EXERCISE, cardTarget, connect => ({
connectDropTarget: connect.dropTarget(),
})),
DragDropContext(HTML5Backend)
)(Routine)
<div style={styling}>
{text}
</div>
));
}
}
Card.propTypes = {
connectDragSource: PropTypes.func.isRequired,
connectDropTarget: PropTypes.func.isRequired,
index: PropTypes.number.isRequired,
isDragging: PropTypes.bool.isRequired,
id: PropTypes.any.isRequired,
text: PropTypes.string.isRequired,
moveCard: PropTypes.func.isRequired
};
const collectForDropTarget = connect => {
return {
connectDropTarget: connect.dropTarget()
}};
const collectForDragSource = (connect, monitor) => {
return {
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
}};
export default DragSource('card', cardSource, collectForDragSource)(
DropTarget('card', cardTarget ,collectForDropTarget)(Card));
connectDragSource(
connectDropTarget(
<li
className={cn(styles.sortableListItem, !isDraggingSibling && styles.sortableListItemHover)}
style={{ opacity }}
>
<SelectManyDraggedItem index={index} item={item} onClick={onClick} onRemove={onRemove} />
</li>
),
)
);
}
}
const withDropTarget = DropTarget(ItemTypes.SORTABLEITEM, sortableItemTarget, connect => ({
connectDropTarget: connect.dropTarget(),
}));
const withDragSource = DragSource(ItemTypes.SORTABLEITEM, sortableItemSource, (connect, monitor) => ({
connectDragPreview: connect.dragPreview(),
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging(),
}));
SortableItem.defaultProps = {
isDraggingSibling: false,
};
SortableItem.propTypes = {
connectDragPreview: PropTypes.func.isRequired,
connectDragSource: PropTypes.func.isRequired,
canDrop: monitor.canDrop()
}
}
class Card extends Component {
constructor(props) {
super(props);
}
handleChangeText() {
const { onChangeText, id } = this.props;
onChangeText(id);
}
render() {
const { text, isDragging, connectDragSource, connectDropTarget } = this.props;
const opacity = isDragging ? 0 : 1;
return connectDragSource(connectDropTarget(
<div style={{ opacity }} className='card-item'>
{ text }
<button onClick={ this.handleChangeText.bind(this) }>change text</button>
</div>
));
}
}
// Header.propTypes = propTypes;
export default pipe(DragSource('CARD', cardSource, collect), DropTarget('CARD', cardTarget, collectDrop))(Card);
isOver
} = props;
const black = (x + y) % 2 === 1;
const overlayStyleName = isOver ?
(canDrop ? 'green' : 'red') :
(canDrop ? 'yellow' : 'neutral');
return connectDropTarget(
<div styleName='board-square'>
<Square black={black}>{children}</Square>
{isOver || canDrop && <div styleName={overlayStyleName} />}
</div>
);
};
BoardSquare.propTypes = {
children: node,
x: number.isRequired,
y: number.isRequired,
isOver: bool
};
/* eslint-disable new-cap */
export default compose(
DropTarget(ItemTypes.KNIGHT, squareTarget, collect),
css(styles)
)(BoardSquare);
/* eslint-enable new-cap */
// Due to limitation of nested class selectors with composition;
// see https://emotion.sh/docs/nested for more info.
const tabItemStyle = cx(styles.noWrap, styles.tabItem, selectedStyle, dropStyle)
return connectDropTarget(connectDragSource(
<div
className = {tabItemStyle + ' tabItemHoverContainer'}
onClick={this.handleClick}>
<div className={styles.rowItemsFixedWidth}>
{tabCheckItem}
{tabFavIcon}
</div>
<a
href={tab.url}
className={tabTitleStyle}
title={tooltipContent}
onClick={this.handleClick}>{tabTitle}</a>
<div className={styles.rowItemsFixedWidth}>
{suspendedIcon}
{audibleIcon}
{closeButton}
</div>
</div>))
}
}
const DropWrap = DropTarget(DragItemTypes.TAB_ITEM, tabItemTarget, collectDropTarget)
const DragWrap = DragSource(DragItemTypes.TAB_ITEM, tabItemSource, collect)
export default DropWrap(DragWrap(TabItem))
isDragging(props, monitor) {
return props.lane.id === monitor.getItem().id;
},
};
const laneTarget = {
drop(targetProps, monitor) {
const sourceProps = monitor.getItem();
if (targetProps.lane.id !== sourceProps.id) {
targetProps.moveLaneRequest(targetProps.lane.id, sourceProps.id);
}
},
};
export default compose(
connect(mapStateToProps, mapDispatchToProps),
DragSource(ItemTypes.LANE, laneSource, (dragConnect, monitor) => ({
connectDragSource: dragConnect.dragSource(),
isDragging: monitor.isDragging(),
})),
DropTarget(ItemTypes.NOTE, noteTarget, (dropConnect, monitor) => ({
connectDropTargetNotes: dropConnect.dropTarget(),
isOver: monitor.isOver(),
})),
DropTarget(ItemTypes.LANE, laneTarget, (dropConnect) => ({
connectDropTargetLanes: dropConnect.dropTarget(),
})),
)(Lane);
}
// TODO: Call something to actually move things to the right positions on the server
}
};
const cardTarget = {
canDrop() {
return false;
},
hover(props, monitor) {
const { assetString: draggedAssetString } = monitor.getItem();
const { assetString: overAssetString } = props;
if (draggedAssetString !== overAssetString) {
const { currentIndex: overIndex } = props;
props.moveCard(draggedAssetString, overIndex);
}
}
};
/* eslint-disable new-cap */
export default compose(
DropTarget(ItemTypes.CARD, cardTarget, connect => ({
connectDropTarget: connect.dropTarget()
})),
DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
}))
)(DashboardCard);
/* eslint-enable new-cap */
<li><ItemControl icon="ion-ios-copy" helpText="Clone this block" handleClick={this.handleCopy}/></li>
</ul>
</div>
{ questions.length > 0 ? questionAnimationTag : help }
{ this.props.children }
<div className="config-area">
<ul>
<li>
<ToggleParam
icon="ion-shuffle"
helpText="Toggles whether questions will be randomized"
toggleValue={block.randomizable}
toggleName='randomize'
itemType={ItemTypes.BLOCK}
itemId={this.props.id} />
</li>
</ul>
</div>
</div>
));
}
});
module.exports = flow(
DropTarget(ItemTypes.QUESTION, questionTarget, questionCollect),
DropTarget(ItemTypes.BLOCK, blockTarget, blockCollect)
)(Block);
render() {
const { connectDropTarget, health } = this.props;
return connectDropTarget(
<div>
<Hero health={health} />
</div>
);
}
}
const heroTarget = {
drop(props, monitor) {
const minion = monitor.getItem().card;
props.hitFace({
source: 'PLAYER',
sourceMinionId: minion.id,
target: props.ownedBy,
damage: minion.attack,
});
},
};
function collect(connect) {
return { connectDropTarget: connect.dropTarget() };
}
export default dropTarget('MINION', heroTarget, collect)(TargetableHero);
));
}
}
SortableLeaderboardItem.propTypes = {
connectDragSource: PropTypes.func.isRequired,
connectDropTarget: PropTypes.func.isRequired,
index: PropTypes.number.isRequired,
isDragging: PropTypes.bool.isRequired,
id: PropTypes.any.isRequired,
onMove: PropTypes.func.isRequired,
canAddTeam: PropTypes.bool
};
const LeaderboardItemDropTarget = DropTarget('CARD', cardTarget, connect =>({
connectDropTarget: connect.dropTarget()
}))(SortableLeaderboardItem);
const LeaderboardItemDragSource = DragSource('CARD', cardSource, (connect, monitor) => ({
connectDragSource: connect.dragSource(),
connectDragPreview: connect.dragPreview(),
isDragging: monitor.isDragging()
}))(LeaderboardItemDropTarget);
export default connect(
(state, ownProps) => {
const teamList = state.lists.results.find(l => l.is_group);
if(!teamList || !ownProps.presentation) return;
const teamHasThis = teamList.selections.some(s => +s.id === +ownProps.id);
const teamIsFull = teamList.selections.length >= teamList.slots;