diff --git a/package.json b/package.json index 8c845b2..cc3b99d 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { - "@material-ui/core": "^4.9.14", + "@material-ui/core": "^4.10.0", + "@material-ui/lab": "^4.0.0-alpha.54", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", diff --git a/src/my/MyFriend.tsx b/src/my/MyFriend.tsx index a7f9755..a22e7ef 100644 --- a/src/my/MyFriend.tsx +++ b/src/my/MyFriend.tsx @@ -8,8 +8,9 @@ import {MyDialog} from "../ui/MyDialog"; import {userObj} from "../ui/TestData"; import {JSONResponse, Method, request} from "../interface"; import {EmptyBodyTransform, PageDataMessage, SimpleMessage, UserRes, UserTransform} from "../result"; -import {loadMyFriend} from "../public"; +import {loadMyFriend, scrollBottom} from "../public"; import {Api} from "../api"; +import {SimpleSnackbar} from "../ui/toast"; const maxLength=150 /** @@ -17,7 +18,6 @@ const maxLength=150 */ export class MyFriend extends React.Component< { user:string }, - { //好友列表 friendList?:Array; @@ -37,8 +37,10 @@ export class MyFriend extends React.Component< userId:string|null; //操作反馈 result:JSX.Element|null; - // + //分页信息 page?:PageProps; + //滚动提示 + scrollTip:string|null, } >{ @@ -59,7 +61,8 @@ export class MyFriend extends React.Component< //发送内容 sendContent:'', userId:null, - result:null + result:null, + scrollTip:null } } @@ -137,20 +140,18 @@ export class MyFriend extends React.Component< } render() { - + const that=this return (
- { - if (e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight) { - console.log('到达底部') - } - } + scrollBottom(e,that,function () { + loadMyFriend(that.state.queryFriend,that,(that.state.page?.currentPage||1)+1) + }) }> 我的好友 - { + { this.setState({ queryFriend:e.target.value }) @@ -175,6 +176,8 @@ export class MyFriend extends React.Component< ):null} + + {this.state.scrollTip!==null?this.setState({scrollTip:null})} duration={1000}/>:null} diff --git a/src/my/MyLeaveWord.tsx b/src/my/MyLeaveWord.tsx index fd0682b..ddb6831 100644 --- a/src/my/MyLeaveWord.tsx +++ b/src/my/MyLeaveWord.tsx @@ -1,15 +1,16 @@ import React from "react"; import {Button, Col, Container, Image, Row} from "react-bootstrap"; -import {ActivityStatus, LeaveWord, LeaveWordType} from "../entity"; +import {ActivityStatus, LeaveWord, LeaveWordType, PageProps} from "../entity"; import {Tooltip} from "@material-ui/core"; import {MyDialog} from "../ui/MyDialog"; import {MyInfo} from "./MyInfo"; import {Activity} from "../ui/Activity"; import {JSONResponse, Method, request} from "../interface"; import {EmptyBodyTransform, LeaveWordRes, LeaveWordTransform, PageDataMessage, SimpleMessage} from "../result"; -import {changeActivity} from "../public"; +import {changeActivity, scrollBottom} from "../public"; import {Cookies} from "react-cookie"; import {Api, prefix} from "../api"; +import {SimpleSnackbar} from "../ui/toast"; /** * 我的留言 @@ -27,9 +28,11 @@ export class MyLeaveWord extends React.Component< //用户id userId?:string; //活动详情 - activityId:number|null, + activityId:number|null; //加载提示 - result:JSX.Element|null + result:JSX.Element|null; + scrollTip:string|null, + page?:PageProps }>{ @@ -40,7 +43,8 @@ export class MyLeaveWord extends React.Component< result: null, activityId: null, data:[], - openUserInfo:false + openUserInfo:false, + scrollTip:null } } @@ -48,6 +52,7 @@ export class MyLeaveWord extends React.Component< this.loadLeaveWord(1) } + /** * 加载留言 */ @@ -58,9 +63,13 @@ export class MyLeaveWord extends React.Component< request(Api.account.leaveWord,Method.GET,{currentPage:String(page)},new LeaveWordTransform(),function (res:LeaveWordRes) { switch (res.customResult) { case PageDataMessage.ok: - that.setState({ - data:res.dataList - });break + that.setState({ + data: (that.state.data||[]).concat(res.dataList||[]), + page: res.page, + scrollTip: page > 1 ? '成功加载第' + page + '页数据' : null, + }) + + break case PageDataMessage.fail: that.setState({ result:

留言列表加载失败

@@ -193,8 +202,11 @@ export class MyLeaveWord extends React.Component< } render() { + let that=this return ( -
+
scrollBottom(e,that,function () { + that.loadLeaveWord((that.state.page?.currentPage||1)+1) + })}> {this.state.data?this.state.data.length===0?

没有留言记录

:this.state.data.map((data,index) =>this.getData(data,index)):

留言加载中

} } @@ -212,6 +224,10 @@ export class MyLeaveWord extends React.Component< this.setState({ result:null })}/> + + {this.state.scrollTip!==null?this.setState({scrollTip:null})} duration={1000}/>:null} + +
) } diff --git a/src/public.tsx b/src/public.tsx index 88435d5..b658220 100644 --- a/src/public.tsx +++ b/src/public.tsx @@ -52,9 +52,36 @@ export function getStatus(status:ActivityStatus){ } } +/** + * 滚动到底部 + * @param e 滚动事件 + * @param that + * @param callback 回调函数 + */ +export function scrollBottom(e:any,that:React.Component,callback:Function) { + if (e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight) { + + if(that.state.page){ + if(that.state.page.currentPage===that.state.page.totalPage){ + that.setState({ + scrollTip:'已滚动到底部', + }) + }else{ + that.setState({ + scrollTip:'尝试加载更多留言', + }) + callback() + } + }else{ + that.setState({ + scrollTip:'丢失分页数据，请联系管理员', + }) + } + } +} //查找我的好友 -export function loadMyFriend(name:string,that:React.Component,page:number){ +export function loadMyFriend(name:string,that:React.Component,page:number){ request(Api.account.myFriend,Method.GET, { currentPage:String(page), name:name @@ -62,7 +89,9 @@ export function loadMyFriend(name:string,that:React.Component,page:number){ switch (res.customResult) { case PageDataMessage.ok: that.setState({ - friendList:res.dataList + friendList: (that.state.friendList||[]).concat(res.dataList||[]), + page: res.page, + scrollTip: page > 1 ? '成功加载第' + page + '页数据' : null, }) break case PageDataMessage.fail: diff --git a/src/ui/toast.tsx b/src/ui/toast.tsx new file mode 100644 index 0000000..fae46c0 --- /dev/null +++ b/src/ui/toast.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import Snackbar from '@material-ui/core/Snackbar'; +import {Image} from "react-bootstrap"; +import MuiAlert, {AlertProps} from '@material-ui/lab/Alert'; + +function Alert(props: AlertProps) { + return ; +} + +export function SimpleSnackbar(props:Readonly<{message:string;duration:number;onClose:Function }>) { + + + const [open, setOpen] = React.useState(true); + + const handleClose = (event: React.SyntheticEvent | React.MouseEvent, reason?: string) => { + if (reason === 'clickaway') { + return; + } + + setOpen(false); + + props.onClose() + }; + + return ( + + + + } + > + + {props.message} + + + ); +} diff --git a/yarn.lock b/yarn.lock index 4d464de..6aaf026 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1241,13 +1241,13 @@ "@types/yargs" "^15.0.0" chalk "^3.0.0" -"@material-ui/core@^4.9.14": - version "4.9.14" - resolved "https://registry.npm.taobao.org/@material-ui/core/download/@material-ui/core-4.9.14.tgz#4388f82cf94554cd3a935774fc12820f3c607a8a" - integrity sha1-Q4j4LPlFVM06k1d0/BKCDzxgeoo= +"@material-ui/core@^4.10.0": + version "4.10.0" + resolved "https://registry.npm.taobao.org/@material-ui/core/download/@material-ui/core-4.10.0.tgz#e214e8f7981ff7975a918404b94508418642e463" + integrity sha1-4hTo95gf95dakYQEuUUIQYZC5GM= dependencies: "@babel/runtime" "^7.4.4" - "@material-ui/styles" "^4.9.14" + "@material-ui/styles" "^4.10.0" "@material-ui/system" "^4.9.14" "@material-ui/types" "^5.1.0" "@material-ui/utils" "^4.9.12" @@ -1259,10 +1259,21 @@ react-is "^16.8.0" react-transition-group "^4.4.0" -"@material-ui/styles@^4.9.14": - version "4.9.14" - resolved "https://registry.npm.taobao.org/@material-ui/styles/download/@material-ui/styles-4.9.14.tgz#0a9e93a2bf24e8daa0811411a6f3dabdafbe9a07" - integrity sha1-Cp6Tor8k6NqggRQRpvPava++mgc= +"@material-ui/lab@^4.0.0-alpha.54": + version "4.0.0-alpha.54" + resolved "https://registry.npm.taobao.org/@material-ui/lab/download/@material-ui/lab-4.0.0-alpha.54.tgz#f359fac05667549353e5e21e631ae22cb2c22996" + integrity sha1-81n6wFZnVJNT5eIeYxriLLLCKZY= + dependencies: + "@babel/runtime" "^7.4.4" + "@material-ui/utils" "^4.9.6" + clsx "^1.0.4" + prop-types "^15.7.2" + react-is "^16.8.0" + +"@material-ui/styles@^4.10.0": + version "4.10.0" + resolved "https://registry.npm.taobao.org/@material-ui/styles/download/@material-ui/styles-4.10.0.tgz#2406dc23aa358217aa8cc772e6237bd7f0544071" + integrity sha1-JAbcI6o1gheqjMdy5iN71/BUQHE= dependencies: "@babel/runtime" "^7.4.4" "@emotion/hash" "^0.8.0"