react-ui-set v1.0.20

react-ui-set

React UI material

Install

npm install --save react-ui-set

Material list

• DragDropProvider - Demo
• (Other in progress)

Contents

• DragDropProvider
  • Demo
  • Usage
    • Step 1
    • Step 2
  • Attributes
  • Callback
    • cbDragDrop ( recommended for all events )
    • cbDragStart
    • cbDrag, onDragEnd, onDragOver, onDragEnter, onDragLeave, onDrop
  • Example 1
  • Changelog

• License

• (Other in progress)

DragDropProvider

This is a React class that has ready methods for use Drag & Drop.

Standard methods:

• onDragStart
• onDrag
• onDragEnd
• onDragOver
• onDragEnter
• onDragLeave
• onDrop

Special method

• onAllEventDragDrop

Usage

Step 1

Create class Extends from DragDropProvider

import React from 'react'
import { DragDropProvider } from 'react-ui-set'

class MyComponent extends DragDropProvider {
 . . .
}

Step 2

Add the required attributes to elements.

         <div
            . . .
            data-dragid={'example-id'}            // required
            . . .
            draggable={true}                      // required

            onDragStart={this.onDragStart}        // required
            onDrag={this.onDrag}
            onDragEnd={this.onDragEnd}
            onDrop={this.onDrop}
            onDragOver={this.onDragOver}
            onDragEnter={this.onDragEnter}
            onDragLeave={this.onDragLeave}
          />

Attributes

Attributes table

Callback

Callback table

cbDragDrop (method, eventElementId, e, currentDragElementId)

Recommended for all events

cbDragStart (method, currentDragElementId, e)

cbDrag (method, eventElementId, e, currentDragElementId)

onDragEnd (method, eventElementId, e, currentDragElementId)

onDragOver (method, eventElementId, e, currentDragElementId)

onDragEnter (method, eventElementId, e, currentDragElementId)

onDragLeave (method, eventElementId, e, currentDragElementId)

onDrop (method, eventElementId, e, currentDragElementId)

Example 1

Demo

  |-App.js
  |-DragDropElements.js
  |-index.css

DragDropElements.js

import React from 'react'
import { DragDropProvider } from 'react-ui-set'
import PropTypes from 'prop-types'

class DragDropElements extends DragDropProvider {
  render() {
    const {data} = this.props

    return (
      <div>
        {data.map(i => (
          <div
            key={`key-${i.name}`}
            className='bar-el'
            style={{backgroundColor: i.color}}
            data-dragid={i.name}                  // required
            draggable={true}                      // required

            onDragStart={this.onDragStart}        // required
            onDragOver={this.onDragOver}
            onDragLeave={this.onDragLeave}
          />
        ))}
      </div>
    )
  }
}

DragDropElements.propTypes = {
  data: PropTypes.array
}

export default DragDropElements

App.js

import React, { Component } from 'react'
import DragDropElements from './DragDropElements'

const bars = [
  {name: 'green', color: 'green'},
  {name: 'blue', color: 'blue'},
  {name: 'red', color: 'red'},
  {name: 'grey', color: 'grey'},
  {name: 'Cornsilk', color: 'Cornsilk'},
  {name: 'Cyan', color: 'Cyan'},
  {name: 'DarkViolet', color: 'DarkViolet'},
  {name: 'Gold', color: 'Gold'}
]

class App extends Component {
  constructor(props) {
    super(props)

    this.callbackDragDrop = this.callbackDragDrop.bind(this)
    this.state = {
      colorDrag: 'None',
      colorOver: 'None'
    }
  }

  /**
   * Callback drag-and-drop events
   * @param {string} method - Drag&Drop event name
   * @param {string} elementId - Id Over/Enter/Leave element
   * @param {HTMLElement} e - event
   * @param {string} currentDragElementId - id Drag element
   */
  callbackDragDrop(method, elementId, e, currentDragElementId) {
    switch (method) {

      case 'DragStart':
        e.currentTarget.style.border = '5px solid white'
        break

      case 'DragOver':
        this.setState({
          colorDrag: currentDragElementId,
          colorOver: elementId
        })
        e.currentTarget.style.border = `5px solid ${currentDragElementId}`
        break

      case 'DragLeave':
        e.currentTarget.style.border = '5px solid white'
        break

      case 'DragEnd':
      case 'DragEnter':
      case 'Drag':
      case 'Drop':
        // TODO
        break

      default:
        break
    }
  }

  render() {
    const {colorDrag, colorOver} = this.state

    return (
      <div>
        <h1>DragDropProvider</h1>
        <h2>Color Drag: <span style={{color: colorDrag}}>{colorDrag}</span></h2>
        <h2>Color Over: <span style={{color: colorOver}}>{colorOver}</span></h2>
        <p>Drag the square</p>
        <DragDropElements
          cbDragDrop={this.callbackDragDrop}
          data={bars}
        />
      </div>
    )
  }
}

export default App

index.css

body {
  margin: 50px;
  padding: 0;
  font-family: sans-serif;
}

.bar-el {
  position: relative;
  float: left;
  width: 50px;
  height: 50px;
  margin: 10px;
  border: 5px solid white;
}

Changelog

1.0.10

• Refactoring callback attribute

License

MIT © zhukyuri