---
tags: N108 Component
---
# Member_IMG_Name.jsx
- Member 切換流程圖 *(原本 component 名稱把 Member 去掉)*
- 可以配合 PPT 14頁

digraph Pageswitch {
                nodesep=0.5
                node [color=orange, fontsize=22, shape=box, style=bold]
                edge [color=RosyBrown, style=dashed]
                Profile->{TopBar IMG_Name Content}
                Content->{info LearnHistory WatchHistory NotelistHistory}
                info->{infobtn}
                NotelistHistory->{NoteHistory}
                {rank=same;UploadImg IMG_Name}
                IMG_Name [color=orange, fontsize=22, shape=box,style=filled, fillcolor=Bisque]
}

## import 資料
| 名稱 | 類型 | 描述 | 來源 |
| :------ | :----------- | :----------- | :-- |
| google | <font color='Red'>image</font> | Google logo，登入過後頭貼右下角的小圖示 | image/google.png |
| wke | <font color='Red'>image</font> | Wke logo，登入過後頭貼右下角的小圖示 | image/wkesso2.png |
| facebook | <font color='Red'>image</font> | Facebook logo，登入過後頭貼右下角的小圖示 | image/facebook.png |

## constructor 介紹
### state 參數介紹
| 名稱 | 類型 | 描述 | defalut |
| :------ | :----------- | :----------- | :-- |
| `show` | <font color='blue'>bool</font> | 等同於 topbarshowIMG，<font color='red'>***沒使用*** </font>| `this.props.topbarshowIMG` |
## 獨立 function
| 名稱 | 描述 | async 是否 |
|:--|:--|:--|
|bindScroll()|視覺滾輪功能|否|
### bindScroll() 介紹
- 將 showtopbarIMG、closetopbarIMG 兩種 function 傳入
- 如果目前頭貼 div Y 軸 `pos.offsetHeight` 超過視窗顯 Y 軸`window.scrollY`，在 topbar 顯示小頭貼以及個人名稱，反之則不在 topbar 顯示
:::info
- 簡單來說，就是下層 component function 控制上層 component 顯示
:::

bindScroll = () => {
    const { showtopbarIMG, closetopbarIMG, topbarshowIMG } = this.props
    let pos = this.scrollpos.current // 頭貼 div Y軸
    if (window.scrollY >= pos.offsetHeight) {
        if (this.state.show == topbarshowIMG)
            showtopbarIMG()
    }
    else {
        if (this.state.show != topbarshowIMG)
            closetopbarIMG()
    }
    // console.log(window.scrollY)
    // console.log(pos.offsetHeight, pos.offsetTop)
}

## componentDidMount
- 增加監聽事件

window.addEventListener('scroll', this.bindScroll, true)

## componentWillUnmount
- 刪除監聽事件

window.removeEventListener('scroll', this.bindScroll, true);

## render
### props (上層傳入) 參數介紹
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| `info` | <font color='Gold'>json value</font> | API 傳入的個人 ID、名稱、SSO來源、Type|
| `userimg` | <font color='orange'>string</font> | API 傳入的頭貼路徑 |
| `clickwrapper` | <font color='Green'>function</font> |打開上傳頭貼的視窗 (wrapper) |
### 額外參數
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| `name` | <font color='orange'>string</font> | 個人名稱 **(不知道為什麼在底下寫 `info.CName` 會有 bug)** |

### return
- 大頭貼分成 2 種
1. 有頭貼顯示頭貼 `{userimg}` + SSO登入來源的小 logo (90 ~ 92行)
2. 沒頭貼顯示 SVG

{
    userimg.length ?
        <img className="myface" src={userimg} alt="" />
        :
        <div className="noface">
            {name}
        </div>
}

- 如果是 WKE 登入來源，提供使用者自行上傳大頭貼的功能

{info.sso == 'WKESSO' &&
    <form className="iconsplace dis-center mouse" title="新增頭貼">
        <label className="mouse">
            <i className="fa fa-camera mouse" onClick={clickwrapper}></i>
        </label>
    </form>}

- 顯示名稱以及登入來源，~~設定身份 button~~
- 設定身份 button，目前沒有功能

<div className="fullinfoname overflow">
    {info.CName}
    <div className="ssowhere">
        {info.sso == 'WKESSO' && <i><img src={wke} alt="" width="32px" />{info.sso}</i>}
        {info.sso == 'GoogleSSO' && <i><img src={google} alt="" width="32px" />{info.sso}</i>}
        {info.sso == 'FacebookSSO' && <i><img src={facebook} alt="" width="32px" />{info.sso}</i>}
    </div>
</div>
{/* <div className="belong">
    身分：尚未設定
    <img src={parent} alt="" width="48px" />
    <img src={teacher} alt="" width="48px" />
    <img src={student} alt="" width="48px" />
</div> */}
<button name="button" type="button" className="btn2 btn-block2">Edit profile</button>

[回上層 MemberProfile.jsx](https://hackmd.io/_F5o4DuORuuuyeXsJI7XSw?view)