@uyun/dndlayout

widget 拖拽布局插件

安装

$ yarn add @uyun/dndlayout

使用

import 'core-js'
import 'raf/polyfill'
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Dndlayout, DndlayoutItems, DndlayoutCanvas } from './dndlayout'
import '@uyun/components/dist/index.css'
import './index.less'

class App extends Component {
  state = {
    items: new Array(10).fill(1).map((v, index) => {
      return {
        title: '我是' + index,
        isDragDisabled: false
      }
    }),
    data: [[], [], []],
    layout: [12, 6, 6]
  }

  onChange = state => {
    this.setState(state)
  }

  render () {
    return (
      <Dndlayout data={this.state.data} items={this.state.items} layout={this.state.layout} onChange={this.onChange}>
        <DndlayoutItems
          className="app-items"
          placeholder={data => {
            return (
              <div className="app-items-item" style={{ opacity: 0.4 }}>
                <h4>{data.title}</h4>
              </div>
            )
          }}
        >
          {(provided, snapshot, data) => {
            return (
              <div
                className="app-items-item"
                ref={provided.innerRef}
                {...provided.draggableProps}
                {...provided.dragHandleProps}
              >
                <h4>{data.title}</h4>
              </div>
            )
          }}
        </DndlayoutItems>
        <DndlayoutCanvas className="app-canvas" gutter={10}>
          {(provided, snapshot, widget) => {
            return (
              <div className="drag" ref={provided.innerRef} {...provided.draggableProps}>
                <div className="drag-handle" {...provided.dragHandleProps}>
                  drag
                </div>
                <h4>{widget.title}</h4>
              </div>
            )
          }}
        </DndlayoutCanvas>
      </Dndlayout>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

API

Dndlayout

用来包裹整个拖拽组件，提供context

参数	类型	说明
data	arrary	每一列的数据信息，数组的每一项表示一列的数据
items	array	widget列表对象
layout	array	布局信息，一共24栏可划分，数组每个元素代表每列占的宽度
disabled	boolean	是否关闭拖拽功能
onChange	function	拖动结束后的回调，返回更新后的widgets和data数据， `{ widgets, data }`

DndlayoutItems

用来放置widget列表，children用来渲染列表项目

参数	类型	说明	默认值
placeholder	function	拖拽后在原位置生成占位元素的方法，以保证列表不抖动
children	function	widget列表渲染函数，在这里定义列表渲染样式，回调函数参数为`provided, snapshot, widget`(拖动的基础信息，拖动当前的值，widget的数据)

DndlayoutCanvas

widget拖拽出来后的渲染区域，children用来渲染组件

参数	类型	说明	默认值
gutter	number	网格之间的间隙值
children	function	拖拽出来后在画布中渲染部件的函数，回调函数参数为`provided, snapshot, widget`(拖动的基础信息，拖动当前的值，widget的数据)

Current Tags

0.0.4 ... latest (6 years ago)

4 Versions

0.0.1 ... 6 years ago
0.0.2 ... 6 years ago
0.0.3 ... 6 years ago
0.0.4 ... 6 years ago