107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
|
import { keys } from 'idb-keyval'
|
||
|
|
import '../css/list.css'
|
||
|
|
import { createSignal } from 'solid-js'
|
||
|
|
|
||
|
|
type dataList = {
|
||
|
|
id: string
|
||
|
|
}
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
instanceData: Omit<dataList, 'messages'> & {
|
||
|
|
current?: boolean,
|
||
|
|
Topping:boolean
|
||
|
|
},
|
||
|
|
key: any,
|
||
|
|
setList:Function,
|
||
|
|
infoList:any
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ({ instanceData, key,setList,infoList }: Props) => {
|
||
|
|
|
||
|
|
//设置数据
|
||
|
|
const instanceItem=instanceData
|
||
|
|
let instance = instanceItem||{id:'',name:''}
|
||
|
|
const isTouchDevice = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
|
||
|
|
|
||
|
|
const handleClick = () => {
|
||
|
|
// console.log(dataList)
|
||
|
|
}
|
||
|
|
|
||
|
|
//获取置顶数据
|
||
|
|
const getToppingItem=(arr:any)=>{
|
||
|
|
let toppingArr: {id:string,Topping:boolean}[]=[]
|
||
|
|
arr.map((res: { Topping: boolean; id: string },i:number)=>{
|
||
|
|
if(res.Topping){
|
||
|
|
toppingArr.push(arr.splice(i,1)[0] as {Topping: boolean; id: string})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
return toppingArr
|
||
|
|
}
|
||
|
|
|
||
|
|
//删除记录
|
||
|
|
const handleDelete = (e: MouseEvent, key:string) => {
|
||
|
|
let arr=JSON.parse(JSON.stringify(infoList))
|
||
|
|
arr.splice(key,1)
|
||
|
|
setList('data',(list: null[])=> [...arr])
|
||
|
|
e.stopPropagation()
|
||
|
|
}
|
||
|
|
|
||
|
|
//置顶排序
|
||
|
|
const setDataTop=(e:MouseEvent,key:string)=>{
|
||
|
|
let arr=JSON.parse(JSON.stringify(infoList))
|
||
|
|
let item = arr[key]
|
||
|
|
|
||
|
|
item.Topping=!item.Topping
|
||
|
|
let toppindItem=getToppingItem(arr)
|
||
|
|
|
||
|
|
setList('data',(list: null[])=> [...toppindItem,...arr])
|
||
|
|
e.stopPropagation()
|
||
|
|
}
|
||
|
|
|
||
|
|
//新建对话框
|
||
|
|
const newlyAdded=()=>{
|
||
|
|
window.open(`${location.protocol}//${location.host}` )
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
class={[
|
||
|
|
'group fi h-10 my-0.5 px-2 gap-2 hv-base rounded-md'
|
||
|
|
].join(' ')}
|
||
|
|
onClick={handleClick}
|
||
|
|
>
|
||
|
|
<div class="fcc w-8 h-8 rounded-full text-xl shrink-0">
|
||
|
|
<div class="text-base i-carbon-chat" />
|
||
|
|
</div>
|
||
|
|
<div class="flex-1 truncate text-sm">{instance.id as any}-{key}-{instance.Topping.toString()}</div>
|
||
|
|
|
||
|
|
<div class={[isTouchDevice||instance.Topping.toString()=='true' ? '' : 'hidden group-hover:block'].join('')}>
|
||
|
|
<div
|
||
|
|
class="inline-flex p-2 items-center gap-1 rounded-md hv-base"
|
||
|
|
onClick={()=>newlyAdded()}
|
||
|
|
>
|
||
|
|
<div class='add-new-icon'></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class={[isTouchDevice||instance.Topping.toString()=='true' ? '' : 'hidden group-hover:block'].join('')}>
|
||
|
|
<div
|
||
|
|
class="inline-flex p-2 items-center gap-1 rounded-md hv-base"
|
||
|
|
onClick={e => setDataTop(e,key())}
|
||
|
|
>
|
||
|
|
<div class='list-top-icon'></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class={isTouchDevice ? '' : 'hidden group-hover:block'}>
|
||
|
|
<div
|
||
|
|
class="inline-flex p-2 items-center gap-1 rounded-md hv-base"
|
||
|
|
onClick={e => handleDelete(e, key())}
|
||
|
|
>
|
||
|
|
<div class="i-carbon-close" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|