-
Notifications
You must be signed in to change notification settings - Fork 105
Description
``import React, { useState } from 'react'
import { DraggableGrid } from 'react-native-draggable-grid'
import { getImageUrl } from '@utils'
import { ScrollView } from '@tarojs/components'
import _ from 'lodash'
import './index.rn.scss'
import {
View,
Text,
Image
} from 'react-native'
export default function Drag(props: any) {
const { handleClickAdd, handleClickDel, tabList } = props
const [folderList, setFolderList] = useState(tabList)
const getTabName = (tab) => {
return tab.folderName && tab.folderName.length > 5 ? tab.folderName.substr(0, 5) + '...' : tab.folderName
}
const onItemPress = (item) => {
console.log('item', item)
if (item.folderId === 'add') {
// 新增文件夹
handleClickAdd && handleClickAdd()
}
}
const onClickDel = (item) => {
handleClickDel && handleClickDel(item)
}
const renderItem = (item: any, order: number) => {
const name = getTabName(item)
const style = {}
if (order % 4 === 0) {
style.borderLeftWidth = 1
}
if (order === 0 || order === 1 || order === 2 || order === 3) {
style.borderTopWidth = 1
}
if (item.folderId === 'add') {
style.borderWidth = 0
}
return (
<View
key={item.key}
className='drag-item'
style={style}
>
{item.key !== 'add' && <View className="drag-item-box" >
<Text className='drag-item-text'>{name}</Text>
</View>
}
{/* */}
{item.key !== 'add' && <View className='drag-item-box-del' onClick={(item) => onClickDel(item)}>
<Image className='drag-item-box-del-img' src={require('@assets/images/icon_upload_gray.png')} />
</View>}
{item.key === 'add' && <View className='drag-item-add'>
<Image className='drag-item-add-img' source={require('@assets/images/icon_upload_gray.png')} />
</View>
}
</View>
)
}
const onDragRelease = (data) => {
const { onDragRelease } = props
setFolderList(data)
onDragRelease && onDragRelease(data)
}
const dataList = _.cloneDeep(folderList).filter(item => item.folderId !== '*').map(item => {
return {
...item,
key: item.folderId
}
})
dataList.push({
folderId: 'add',
disabledDrag: false
})
return (
)
}