Header - revamp-with-react/ungit-react GitHub Wiki

Header Component Structure

1. When typing in input with autocomplete, it will debounce and send a request to /fs/listDirectories to get folder list.
2. When submitting the form, it will browse to repository?path= with input path.

2-way Binding Attributes

Attribute Name	Default Value
showBackButton	false
path	x

Computed Attributes

Attribute Name	Computed Value
showAddToRepoListButton	path exist && path not exist in repoList from app

┌----------------------------------#header---------------------------------------┓
| ┌----------------------------------DIV---------------------------------------┓ |
| | ┌---------------------------------A--------------------------------------┓ | |
| | |      Use bootstrap-tooltip to show "Navigate to Ungit home page"       | | |
| | | ┌------------------------------SPAN----------------------------------┓ | | |
| | | |                css: { 'glyph-shown': showBackButton }              | | | |
| | | ┖--------------------------------------------------------------------┚ | | |
| | | ┌------------------------------IMG-----------------------------------┓ | | |
| | | |                         images/logo.png                            | | | |
| | | ┖--------------------------------------------------------------------┚ | | |
| | ┖------------------------------------------------------------------------┚ | |
| | ┌--------------------------------DIV-------------------------------------┓ | |
| | | ┌------------------------------FORM----------------------------------┓ | | |
| | | |                        submit to submitPath                        | | | |
| | | | ┌----------------------------INPUT-------------------------------┓ | | | |
| | | | |                   autocomplete via jQueryUI                    | | | | |
| | | | ┖----------------------------------------------------------------┚ | | | |
| | | | ┌---------------------------BUTTON-------------------------------┓ | | | |
| | | | |                    :showAddToRepoListButton                    | | | | |
| | | | |                 click:addCurrentPathToRepoList                 | | | | |
| | | | ┖----------------------------------------------------------------┚ | | | |
| | | ┖--------------------------------------------------------------------┚ | | |
| | ┖------------------------------------------------------------------------┚ | |
| | ┌-----------------------------DIV.toolbar--------------------------------┓ | |
| | | ┌--------------------------#refreshButton----------------------------┓ | | |
| | | |                                                                    | | | |
| | | ┖--------------------------------------------------------------------┚ | | |
| | ┖------------------------------------------------------------------------┚ | |
| | ┌-----------------------------DIV.arrowUp--------------------------------┓ | |
| | |                                                                        | | |
| | ┖------------------------------------------------------------------------┚ | |
| | ┌-----------------------------DIV.version--------------------------------┓ | |
| | |                          :currentVersion                               | | |
| | ┖------------------------------------------------------------------------┚ | |
| ┖----------------------------------------------------------------------------┚ |
| ┌-----------------------------DIV.navbarPadder-------------------------------┓ |
| |                                                                            | |
| ┖----------------------------------------------------------------------------┚ |
┖--------------------------------------------------------------------------------┚