huayu-web
/
assistant-todo-mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:flex,左右对齐

This commit is contained in:
1708-huayu 2024-12-29 21:14:08 +08:00
parent ee2685e78e
commit 854fe821d4
2 changed files with 142 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/ToDoList/index.css
View File

@ -1,3 +1,6 @@
.adm-list-default{
width:100%;
}
.adm-card-header-title{
width:100%;
}

247
src/pages/ToDoList/index.js
View File

@ -1,4 +1,4 @@
import {Dialog, Image, InfiniteScroll, List, PullToRefresh, SwipeAction} from 'antd-mobile'
import {Card, Dialog, Image, InfiniteScroll, List, PullToRefresh, SwipeAction} from 'antd-mobile'
import React, {Fragment, useEffect, useRef, useState} from 'react'
import {
DragDropContext,
@ -25,19 +25,18 @@ const ToDoList = () => {
const [taskList, setTaskList] = useState([])
const [hasMore, setHasMore] = useState(true)
const [pageNumber, setPageNumber] = useState(1)
async function loadMore() {
getTaskList(pageNumber).then(result => {
console.log("getTaskList()", result)
getTaskList(pageNumber+1).then(result => {
setTaskList(val => [...val, ...result.data.data.content])
setHasMore(result.data.data.content.length > 0)
setPageNumber(pageNumber+1)
})
setPageNumber(pageNumber + 1)
}
useEffect(() => {
getTaskList(pageNumber).then(result => {
console.log("getTaskList()", result)
setTaskList(result.data.data.content)
setPageNumber(pageNumber+1)
})
}, [])
const onDragEnd = (result) => {
@ -53,113 +52,145 @@ const ToDoList = () => {
getTaskList(1).then(result => {
console.log("getTaskList()", result)
setTaskList(result.data.data.content)
setPageNumber(pageNumber+1)
setPageNumber(1)
setHasMore(true)
})
}}
>
<List
// header='任务清单'
>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId='droppable'>
{droppableProvided => (
<div ref={droppableProvided.innerRef}>
{taskList.map((item, index) => (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
...provided.draggableProps.style,
opacity: snapshot.isDragging ? 0.8 : 1,
}}
>
<SwipeAction
ref={ref}
closeOnAction={false}
closeOnTouchOutside={false}
rightActions={[
{
key: 'delete',
text: '删除',
color: 'danger',
onClick: async () => {
await Dialog.confirm({
content: '确定要关闭吗？',
})
ref.current?.close()
},
},
{
key: 'close',
text: '关闭',
color: 'warning',
onClick: async () => {
await Dialog.confirm({
content: '确定要关闭吗？',
})
ref.current?.close()
},
},
{
key: 'update',
text: '修改',
color: 'primary',
onClick: async () => {
await Dialog.confirm({
content: '确定要修改吗？',
})
ref.current?.close()
},
},
{
key: 'complete',
text: '完成',
color: 'success',
onClick: async () => {
await Dialog.confirm({
content: '确定要完成吗？',
})
ref.current?.close()
},
},
]}
<List
// header='任务清单'
>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId='droppable'>
{droppableProvided => (
<div ref={droppableProvided.innerRef}>
{taskList.map((item, index) => (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
...provided.draggableProps.style,
opacity: snapshot.isDragging ? 0.8 : 1,
}}
>
<List.Item
key={item.id}
// prefix={
// <Image
// src={item.avatar}
// style={{ borderRadius: 20 }}
// fit='cover'
// width={40}
// height={40}
// />
// }
title={<span style={{color: "red"}}>{item.name}</span>}
children={item.description}
description={item.state}
onClick={
() => {
console.log("dianji")
}
}
/>
</SwipeAction>
</div>
)}
</Draggable>
))}
{droppableProvided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</List>
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
<SwipeAction
ref={ref}
closeOnAction={false}
closeOnTouchOutside={false}
rightActions={[
{
key: 'delete',
text: '删除',
color: 'danger',
onClick: async () => {
await Dialog.confirm({
content: '确定要关闭吗？',
})
ref.current?.close()
},
},
{
key: 'close',
text: '关闭',
color: 'warning',
onClick: async () => {
await Dialog.confirm({
content: '确定要关闭吗？',
})
ref.current?.close()
},
},
{
key: 'update',
text: '修改',
color: 'primary',
onClick: async () => {
await Dialog.confirm({
content: '确定要修改吗？',
})
ref.current?.close()
},
},
{
key: 'complete',
text: '完成',
color: 'success',
onClick: async () => {
await Dialog.confirm({
content: '确定要完成吗？',
})
ref.current?.close()
},
},
]}
>
<List.Item
key={item.id}
// prefix={
// <Image
// src={item.avatar}
// style={{ borderRadius: 20 }}
// fit='cover'
// width={40}
// height={40}
// />
// }
// title={<span style={{color: "red"}}>{item.name}</span>}
// children={item.description}
// description={item.state}
// onClick={
// () => {
// console.log("dianji")
// }
// }
title={
<div style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
flexDirection: "row",
flexWrap: "nowrap",
fontSize: "large",
color: "black"
}}>
<span>{item.name}</span>
{item.expectedEndTime && <span>
结束时间:{item.expectedEndTime}</span>}
</div>}
description={item.description}
>
{/*<Card style={{width: "100%"}} title={*/}
{/* <div style={{*/}
{/* display: "flex",*/}
{/* justifyContent: "space-between",*/}
{/* alignItems: "center",*/}
{/* flexDirection: "row",*/}
{/* flexWrap: "nowrap"*/}
{/* }}>*/}
{/* <span>{item.name}</span>*/}
{/* {item.expectedEndTime && <span>*/}
{/* 结束时间:{item.expectedEndTime}</span>}*/}
{/* </div>}*/}
{/*>*/}
{/* {item.description}*/}
{/*</Card>*/}
</List.Item>
</SwipeAction>
</div>
)}
</Draggable>
))}
{droppableProvided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</List>
<InfiniteScroll loadMore={loadMore} hasMore={hasMore}/>
</PullToRefresh>
</Fragment>
)