Changeset View
Changeset View
Standalone View
Standalone View
web/navigation-panels/nav-state-info-bar.react.js
// @flow | // @flow | ||||
import classnames from 'classnames'; | import classnames from 'classnames'; | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import type { ThreadInfo } from 'lib/types/thread-types.js'; | import type { ThreadInfo } from 'lib/types/thread-types.js'; | ||||
import ThreadAncestors from './chat-thread-ancestors.react.js'; | import ThreadAncestors from './chat-thread-ancestors.react.js'; | ||||
import css from './nav-state-info-bar.css'; | import css from './nav-state-info-bar.css'; | ||||
import ThreadAvatar from '../components/thread-avatar.react.js'; | |||||
type NavStateInfoBarProps = { | type NavStateInfoBarProps = { | ||||
+threadInfo: ThreadInfo, | +threadInfo: ThreadInfo, | ||||
}; | }; | ||||
function NavStateInfoBar(props: NavStateInfoBarProps): React.Node { | function NavStateInfoBar(props: NavStateInfoBarProps): React.Node { | ||||
const { threadInfo } = props; | const { threadInfo } = props; | ||||
const threadBackgroundColorStyle = React.useMemo( | |||||
() => ({ | |||||
background: `#${threadInfo.color}`, | |||||
}), | |||||
[threadInfo.color], | |||||
); | |||||
return ( | return ( | ||||
<> | <> | ||||
<div | <div className={css.avatarContainer}> | ||||
className={css.threadColorSquare} | <ThreadAvatar size="small" threadInfo={threadInfo} /> | ||||
style={threadBackgroundColorStyle} | </div> | ||||
/> | |||||
<ThreadAncestors threadInfo={threadInfo} /> | <ThreadAncestors threadInfo={threadInfo} /> | ||||
</> | </> | ||||
); | ); | ||||
} | } | ||||
type PossiblyEmptyNavStateInfoBarProps = { | type PossiblyEmptyNavStateInfoBarProps = { | ||||
+threadInfoInput: ?ThreadInfo, | +threadInfoInput: ?ThreadInfo, | ||||
}; | }; | ||||
Show All 36 Lines |