介绍
一个鼠标框选的react组件,支持单个单元点击、移入移除等回调等,任意数量单元内容编辑,自定义设置类名等功能
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 | × | 激活状态下的类 |