react-ui-set

    1.0.20 • Public • Published

    react-ui-set

    React UI material

    NPM JavaScript Style Guide

    Install

    npm install --save react-ui-set

    Material list

    • DragDropProvider - Demo
    • (Other in progress)

    Contents

    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

    Attribute name Inherited method Required Type Example Description
    data-dragid - required string "main-id" Unique string
    draggable - required boolean true Standard attribute
    onDragStart this.onDragStart required func React attribute
    onDrag this.onDrag * func React attribute
    onDragEnd this.onDragEnd * func React attribute
    onDrop this.onDrop * func React attribute
    onDragOver this.onDragOver * func React attribute
    onDragEnter this.onDragEnter * func React attribute
    onDragLeave this.onDragLeave * func React attribute

    Callback

    Callback table

    Callback name Description
    cbDragDrop Recommended for all events
    cbDragStart Need attribute onDragStart in HTML element
    cbDrag Need attribute onDrag in HTML element
    cbDragEnd Need attribute onDragEnd in HTML element
    cbDrop Need attribute onDrop in HTML element
    cbDragOver Need attribute onDragOver in HTML element
    cbDragEnter Need attribute onDragEnter in HTML element
    cbDragLeave Need attribute onDragLeave in HTML element

    cbDragDrop (method, eventElementId, e, currentDragElementId)

    Recommended for all events

    Attribute name type value Description
    method string "DragStart", "Drag", "DragEnd", "DragEnter", "DragLeave", "DragOver", "Drop"
    eventElementId string *
    e event *
    currentDragElementId string *

    cbDragStart (method, currentDragElementId, e)

    Attribute name type value Description
    method string "DragStart"
    currentDragElementId string *
    e event *

    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)

    Attribute name type value Description
    method string * "Drag" "DragEnd", "DragEnter", "DragLeave", "DragOver", "Drop"
    eventElementId string *
    e event *
    currentDragElementId string *

    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

    Install

    npm i react-ui-set

    DownloadsWeekly Downloads

    4

    Version

    1.0.20

    License

    MIT

    Unpacked Size

    44.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • zhukyuri