react-dnd#DropTarget JavaScript Examples

The following examples show how to use react-dnd#DropTarget. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: tableDrag.js    From camel-store-admin with Apache License 2.0 6 votes vote down vote up 
DragableBodyRow = DropTarget(
  'row',
  rowTarget,
  (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
  }),
)(
  DragSource(
    'row',
    rowSource,
    (connect) => ({
      connectDragSource: connect.dragSource(),
    }),
  )(BodyRow),
)
Example #2
Source File: MetaColumnsTable.js    From hzero-front with Apache License 2.0 6 votes vote down vote up 
DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
  sourceClientOffset: monitor.getSourceClientOffset(),
}))(
  DragSource('row', rowSource, (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    dragRow: monitor.getItem(),
    clientOffset: monitor.getClientOffset(),
    initialClientOffset: monitor.getInitialClientOffset(),
  }))(BodyRow)
)
Example #3
Source File: Item.js    From wix-style-react with MIT License 5 votes vote down vote up 
DropItemTarget = DropTarget(
  itemTypes.nestedItem,
  cardTarget,
  connect => ({
    connectDropTarget: connect.dropTarget(),
  }),
)(DragItemSource)
Example #4
Source File: createDropComponent.js    From hzero-front with Apache License 2.0 5 votes vote down vote up 
/**
 * 创建一个 DropComponent 包装组件
 * @param {{dropAcceptTypes: string | string[], drop: Function}} - 配置
 * @param {string|string[]} [dropAcceptTypes=[DragType.dragField, DragType.drawDragComponent]] - 接收 drop 的类型
 * @param {Function} drop - 触发drop后的回调方法
 */
export default function createDropComponent({
  dropAcceptTypes = [DragType.dragField, DragType.drawDragComponent],
  drop = defaultDrop,
} = {}) {
  const dropComponentSpec = {
    drop,
  };

  const dropComponentCollect = (connect, monitor) => {
    const connectDropTarget = connect.dropTarget();
    const isOver = monitor.isOver();
    return {
      connectDropTarget,
      isOver,
    };
  };

  // drop component only accepts dragField, dragComponent and drawDragComponent

  @DropTarget(dropAcceptTypes, dropComponentSpec, dropComponentCollect)
  class DropComponent extends React.Component {
    render() {
      const {
        component = {},
        connectDropTarget,
        currentEditComponent,
        currentEditField,
        children,
      } = this.props;
      const config = clone(component);
      const configProps = {};
      forEach(config.props, prop => {
        configProps[prop[attributeNameProp]] = prop[attributeValueProp];
      });
      delete config.props;
      Object.assign(config, configProps);

      const dropComponentClassNames = [styles['drop-component']];

      if (!currentEditField && currentEditComponent === component) {
        dropComponentClassNames.push(styles['drop-component-active']);
      }
      /**
       * notice
       * 字段布局 和 字段 之间包一层 DrawDrag 和 Drop
       */
      return (
        connectDropTarget &&
        connectDropTarget(
          <div className={dropComponentClassNames.join(' ')}>
            {isEmpty(component.fields) ? '拖入组件' : children}
          </div>
        )
      );
    }
  }
  return DropComponent;
}
Example #5
Source File: ExampleDropTarget.js    From vindr-lab-viewer with MIT License 5 votes vote down vote up 
ExampleDropTarget = DropTarget(Types.THUMBNAIL, divTarget, collect)(
  CustomDropTarget
)
Example #6
Source File: custom-tab-bar-node.jsx    From virtuoso-design-system with MIT License 5 votes vote down vote up 
WrapTabNode = DropTarget('DND_NODE', cardTarget, connect => ({
  connectDropTarget: connect.dropTarget(),
}))(
  DragSource('DND_NODE', cardSource, (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging(),
  }))(TabNode),
)
Example #7
Source File: createDropField.js    From hzero-front with Apache License 2.0 4 votes vote down vote up 
/**
 * 创建 DropField
 *
 * @param {{
 *  dropAcceptTypes: string|string[],
 *  canDrop: (props: object, monitor: object) => boolean,
 *  drop: Function,
 * }} [{
 *   dropAcceptTypes = [DragType.dragField, DragType.drawDragField],
 *   canDrop = defaultCanDrop,
 *   drop = defaultDrop,
 * }={}]
 * @param {string|string[]} [dropAcceptTypes=[DragType.dragField, DragType.drawDragField]] - 接收的 drop 类型
 * @param {(props: object, monitor: object) => boolean} [canDrop=defaultCanDrop] - 是否可以 drop
 * @param {Function} [drop=defaultDrop] - drop 触发的方法
 */
export default function createDropField({
  dropAcceptTypes = [DragType.dragField, DragType.drawDragField],
  canDrop = defaultCanDrop,
  drop = defaultDrop,
} = {}) {
  const dropFieldSpec = {
    drop,
    canDrop,
  };

  const dropFieldCollect = (connect, monitor) => {
    const connectDropTarget = connect.dropTarget();
    const isOverAndCanDrop = monitor.isOver() && monitor.canDrop();
    return {
      connectDropTarget,
      isOverAndCanDrop,
    };
  };

  @DropTarget(dropAcceptTypes, dropFieldSpec, dropFieldCollect)
  class DropField extends React.Component {
    constructor(props) {
      super(props);

      this.handleFieldClick = this.handleFieldClick.bind(this);
    }

    handleFieldClick(e) {
      // 阻止冒泡
      e.stopPropagation();
      const { onActiveField, component, pComponent } = this.props;
      if (onActiveField) {
        onActiveField(pComponent, component);
      }
    }

    render() {
      const {
        connectDropTarget,
        children,
        isOverAndCanDrop,
        currentEditField,
        component,
      } = this.props;

      const isActiveField = currentEditField === component;

      const isEmptyField = component.componentType === emptyFieldType;
      const dropFieldClassName = [styles['drop-field']];

      if (isOverAndCanDrop) {
        dropFieldClassName.push(styles['drop-field-over']);
      }

      if (isEmptyField) {
        dropFieldClassName.push(styles['drop-field-placeholder']);
      }

      if (isActiveField) {
        dropFieldClassName.push(styles['drop-field-active']);
      }

      return (
        connectDropTarget &&
        connectDropTarget(
          <div className={dropFieldClassName.join(' ')} onClick={this.handleFieldClick}>
            {React.cloneElement(children, { isOverAndCanDrop })}
          </div>
        )
      );
    }
  }
  return DropField;
}