react鼠标框选组件

介绍

一个鼠标框选的react组件，支持单个单元点击、移入移除等回调等，任意数量单元内容编辑,自定义设置类名等功能

npm传送门

github传送门

 

Gifs

 

 

 

 

Usage

 1 import Selection from 'react-box-selection'
 2  
 3 const content = [...Array(7)].map((item, row) => {
 4   return [...Array(14)].map((item, col) => {
 5     const data = Math.floor(Math.random() * 100 + 1)
 6     const tmp = <h3 key={`${row}-${col}`}>{data}</h3>
 7     return tmp
 8   })
 9 })
10  
11 class App extends React.Component {
12   state = {}
13  
14   componentWillUnmount () {
15     this.setState = () => { }
16   }
17  
18   mounted = all => { //all items(dom)
19     console.log(all)
20   }
21   selected = (positions, items, all) => { //data-position(array of string),selected items(array of dom)
22     console.log(positions)
23   }
24   singleSelected = (position, item, all) => { //data-position(string),selected items(dom)
25     console.log(position)
26   }
27   hovered = (position, item) => {
28     console.log(position)
29   }
30   leaved = (position, item) => {
31     console.log(position)
32   }
33  
34   render () {
35  
36     return (
37       <div>
38         <Selection
39           cols={24} 
40           rows={48} 
41           width={30} 
42           height={50} 
43           gap={10} 
44           wrapperScroll={undefined}
45           onMounted={this.mounted}
46           onHovered={this.hovered}
47           onLeaved={this.leaved}
48           onSelected={this.selected}
49           onSingleSelected={this.singleSelected}
50           itemClass='selection_item'
51           extraClass={['extra_1', 'extra_2']}
52           activeClass='selection_item_active'
53         >
54           {content}
55         </Selection>
56       </div>
57     )
58   }
59 }

 

params

参数名	默认值	是否必要	作用
cols	24	×	列
rows	7	×	行
height	50px	×	单个单元高
width	30px	×	单个单元宽
gap	0	×	单元间距
wrapperScroll	body的scrollTop & scrollLeft	×	指定的外层元素的scrollTop & scrollLeft
Children	-	×	自定义任意单元子节点 支持jsx组件
onMounted	-	×	挂载完成时的回调
onHovered	-	×	单个单元鼠标移入的回调
onLeaved	-	×	单个单元鼠标移出的回调
onSelected	-	×	框选多个单元的回调
onSingleSelected	-	×	单个点击或框选单个单元的回调
itemClass	selection_item	×	类
extraClass	[]	×	额外的类
activeClass	selection_item_active	×	激活状态下的类

转载于:https://www.cnblogs.com/zyktbs/p/11039193.html