oxen-io/session-desktop
1
0
Fork 0
mirror of https://github.com/oxen-io/session-desktop.git synced 2023-12-14 02:12:57 +01:00
Code Issues Projects Releases Wiki Activity
session-desktop/ts/components/MainHeader.md
Scott Nonnenberg b3ac1373fa Move left pane entirely to React
2019-03-12 17:44:14 -07:00

1.6 KiB
Raw Blame History

Note that this component is controlled, so the text in the search box will only update if the parent of this component feeds the updated searchTerm back.

With image

<util.LeftPaneContext theme={util.theme}>
  <MainHeader
    searchTerm=""
    avatarPath={util.gifObjectUrl}
    search={text => console.log('search', text)}
    updateSearchTerm={text => console.log('updateSearchTerm', text)}
    clearSearch={() => console.log('clearSearch')}
    i18n={util.i18n}
  />
</util.LeftPaneContext>

Just name

<util.LeftPaneContext theme={util.theme}>
  <MainHeader
    searchTerm=""
    name="John Smith"
    color="purple"
    search={text => console.log('search', text)}
    updateSearchTerm={text => console.log('updateSearchTerm', text)}
    clearSearch={() => console.log('clearSearch')}
    i18n={util.i18n}
  />
</util.LeftPaneContext>

Just phone number

<util.LeftPaneContext theme={util.theme}>
  <MainHeader
    searchTerm=""
    phoneNumber="+15553004000"
    color="green"
    search={text => console.log('search', text)}
    updateSearchTerm={text => console.log('updateSearchTerm', text)}
    clearSearch={() => console.log('clearSearch')}
    i18n={util.i18n}
  />
</util.LeftPaneContext>

Starting with a search term

<util.LeftPaneContext theme={util.theme}>
  <MainHeader
    name="John Smith"
    color="purple"
    searchTerm="Hewwo?"
    search={text => console.log('search', text)}
    updateSearchTerm={text => console.log('updateSearchTerm', text)}
    clearSearch={() => console.log('clearSearch')}
    i18n={util.i18n}
  />
</util.LeftPaneContext>