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

digraph Pageswitch {
                nodesep=0.5
                node [color=orange, fontsize=22, shape=box, style=bold]
                edge [color=RosyBrown, style=dashed]
                Detail->{Detailbtn}
                Detailbtn->{DetailPreview}
                Detailbtn [color=orange, fontsize=22, shape=box,style=filled, fillcolor=Bisque]
}

## import 資料
| 名稱 | 類型 | 描述 | 來源 |
| :------ | :----------- | :----------- | :----------- |
| api | <font color='Green'>function</font> | API function | app/lib/api.js |
| Markdown | <font color='BlueViolet'>component</font> | MD 語法編譯器 component | tool/ReactMarkdown.jsx |
| DPreview | <font color='BlueViolet'>component</font> | MD 詳解預覽畫面 component | detail/DetailPreview.jsx |
| Cbtn | <font color='BlueViolet'>component</font> | wrapper 關閉 button | tool/Closebtn.jsx |
## constructor 介紹
### state 參數介紹
| 名稱 | 類型 | 描述 | defalut |
| :------ | :----------- | :----------- | :-- |
| `Wrapper` | <font color='blue'>bool</font> | Open or Close Wrapper 參數，true 為 open，false 為 close | `false` |
| `WatchDetail` | <font color='blue'>bool</font> | 觀看現有詳解內容，true 為正在觀看詳解，false 為沒觀看 | `false` |
| `Preview` | <font color='blue'>bool</font> | 預覽，true 為正在預覽，false 為沒預覽畫面|`null`|
| `detail` | <font color='Green'>function</font> | 所有題目的詳解存放 | `[]` |
| `isLoaded` | <font color='blue'>bool</font> | API loading，true 為 loading 完成，false 為正在 loading | `false` |
| `InputFocus` | <font color='blue'>bool</font> | focus input form，true 為 focus，false 為 no focus| `true` |
| `InputValue` | <font color='orange'>string</font> |輸入的MD語法詳解字串| `""` |
### this.inputD
- React.createRef 輸入用
## componentDidMount
- 執行 load_detail()，並將 isLoaded = true
## componentDidUpdate
- 當 prevState == this.state 時，執行 load_detail()，並將 isLoaded = true
- 如果 input form 存在，focus()
## 獨立 function
| 名稱 | 描述 | async 是否 |
|:--|:--|:--|
|load_detail()|Call API，將資料存入 State|是|
|Clickwrapper()| Click Wrapper，Wrapper = !this.state.Wrapper|是|
|Watch()|打開 Wrapper，Wrapper = !this.state.Wrapper、Wrapper = true|否|
|Write()|打開 Wrapper，Wrapper = !this.state.Wrapper、Wrapper = false|否|
|SubmitDetail()|Submit 詳解，將輸入的字串透過 API 傳給資料庫，並且執行 load_detail()，更新資料|是|
|InputDetail()|輸入的字串存入 state|否|
|OpenPreview()|預覽窗格 Open|否|
|ClosePreview()|如果沒有輸入字串，不用 focus input form，並將預覽窗格 Close|否|
|ShouldInput()|focus input form|否|
## API 數量表格
| 名稱 | 類型 | 描述 | 位於 |
|:--|:--|:--|:--|
|Detail/ + <font color='Blue'>pid</font>|<font color='LightSkyBlue'>get</font>|獲取所有該題目的所有詳解|load_detail()|
|Detail/content|<font color='lightgreen'>put</font>|上傳該題目使用者的自建立詳解|SubmitDetail()|
## render
### props (上層傳入) 參數介紹
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| pid | <font color='Salmon'>int</font> | 該題目 ID |
|OverFlow()|<font color='Green'>function</font>|上層 component render function|
### return
- 依據詳解的數量，顯示有沒有詳解可以看

{detail.length != 0 ?
    (<div className="wdetail mouse" onClick={this.Watch}>看詳解</div>)
    :
    (<div className="ndetail">沒有詳解</div>)}

- wrapper body 內容分成三種
- 觀看詳解 (173 ~ 183 行)
- 
- 寫詳解 (187 ~ 192 行)
- 
- 觀看寫到一半的詳解 (194 ~ 199 行)
- 

 <div className="detail-body">
{
    WatchDetail ?
        (<div>
            {detail.map(detail => <div key={detail.DID} className="fullDetail">
                <div className="where">
                    由<u style={{ 'fontStyle': 'italic' }}>&nbsp;{detail.Account}&nbsp;</u>提供的詳解：
                </div>
                <div className="markdown-body github Dmarkdown-body">
                    <Markdown content={detail.Content} />
                </div>
            </div>)}
        </div>)
        :
        (
            <div>
                {InputFocus ?
                    (<form ref={this.inputD}>
                        <textarea type="text" id={`${pid}input`} defaultValue={InputValue} className="detailinput" rows="8" cols="38"
                            placeholder="請輸入詳解:" required="required" onChange={this.InputDetail}
                            onFocus={this.OpenPreview} onBlur={this.ClosePreview}></textarea>
                    </form>)
                    :
                    (<div>
                        <div id="mdPreview" className="markdown-body github Dmarkdown-body">
                            <Markdown content={InputValue}></Markdown>
                        </div>
                        <div className="detailch mouse" onClick={this.ShouldInput}>修改</div>
                    </div>)}
                {!InputFocus && <div type="button" className="detailsubmit mouse" onClick={this.SubmitDetail}>Submit</div>}
                {Preview && <DPreview content={InputValue}></DPreview>}
            </div>)
}
</div>

[回上層 Detail.jsx](https://hackmd.io/FtBVORlmQSC-1fIoqoSa6A?view)