滚动加载更多我的好友、我的留言

4 years ago · 054518bbaa
parent 6a2e299374
commit 054518bbaa
6 changed files with 133 additions and 32 deletions
--- 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",
--- 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<User>;
@ -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 (
            <Container>
                <Row className="d-flex justify-content-center bg-light">
                    <div>
-                        <ListGroup className="overflow-auto bg-light friend-list" onScroll={(e:any)=> {
-                                if (e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight) {
-                                    console.log('到达底部')
-                                }
-                             }
+                        <ListGroup className="overflow-auto bg-light friend-list" onScroll={(e:any)=>scrollBottom(e,that,function () {
+                                loadMyFriend(that.state.queryFriend,that,(that.state.page?.currentPage||1)+1)
+                            })
                        }>
                            <ListGroup.Item variant="primary">我的好友</ListGroup.Item>
                            <ListGroup.Item>
-                                <FormControl placeholder="查找好友" onChange={(e)=>{
+                                <FormControl value={this.state.queryFriend} placeholder="查找好友" onChange={(e)=>{
                                    this.setState({
                                        queryFriend:e.target.value
                                    })
@ -175,6 +176,8 @@ export class MyFriend extends React.Component<
                                        </Tooltip>
                                    </ListGroup.Item>
                                ):null}
+
+                            {this.state.scrollTip!==null?<SimpleSnackbar message={this.state.scrollTip} onClose={()=>this.setState({scrollTip:null})} duration={1000}/>:null}
                        </ListGroup>

                        <ListGroup className="overflow-auto bg-light friend-list">
--- 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:<h3 className="text-danger text-center">留言列表加载失败</h3>
@ -193,8 +202,11 @@ export class MyLeaveWord extends React.Component<
    }

    render() {
+        let that=this
        return (
-            <div className="overflow-auto my-leave-world-height">
+            <div className="overflow-auto my-leave-world-height" onScroll={e=>scrollBottom(e,that,function () {
+                that.loadLeaveWord((that.state.page?.currentPage||1)+1)
+            })}>
                {this.state.data?this.state.data.length===0?<h3 className="text-info text-center">没有留言记录</h3>:this.state.data.map((data,index) =>this.getData(data,index)):<h3 className="text-info text-center">留言加载中</h3>}
                <MyDialog titleId="view-user" menuName="用户信息"
                          content={<MyInfo isOwn={false}  isAdd={false} userId={this.state.userId?this.state.userId:""}/>}
@ -212,6 +224,10 @@ export class MyLeaveWord extends React.Component<
                <MyDialog content={this.state.result} open={this.state.result!==null} titleId="my_leave_word_dialog" menuName="提示" onClose={()=>this.setState({
                    result:null
                })}/>
+
+                {this.state.scrollTip!==null?<SimpleSnackbar message={this.state.scrollTip} onClose={()=>this.setState({scrollTip:null})} duration={1000}/>:null}
+
+
            </div>
        )
    }
--- 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<any,any>,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<any,any>,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:
--- a/src/ui/toast.tsx
+++ 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 <MuiAlert elevation={6} variant="filled" {...props} />;
+}
+
+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 (
+            <Snackbar
+                open={open}
+                autoHideDuration={props.duration}
+                onClose={handleClose}
+                action={
+                    <React.Fragment>
+                        <Image className="closeIcon20" src="close.svg" onClick={handleClose}/>
+                    </React.Fragment>
+                }
+            >
+                <Alert  severity="success" onClick={handleClose}>
+                    {props.message}
+                </Alert>
+            </Snackbar>
+    );
+}
--- 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"