gaja-group
/
element-web
forked from matrix/element-web
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Less coupling between HeaderButton and RightPanel 

Use isHighlighted as a prop instead of computing based on phases and currentPhase
This commit is contained in:
Luke Barnard 2017-09-25 16:06:46 +01:00
parent 28e9fdc873
commit fd7e81193e
1 changed files with 6 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/structures/RightPanel.js
View File

@ -44,7 +44,6 @@ class HeaderButton extends React.Component {
render() { render() {
const TintableSvg = sdk.getComponent("elements.TintableSvg"); const TintableSvg = sdk.getComponent("elements.TintableSvg");
const AccessibleButton = sdk.getComponent("elements.AccessibleButton"); const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
const isHighlighted = this.props.phases.includes(this.props.currentPhase);
return <AccessibleButton return <AccessibleButton
className="mx_RightPanel_headerButton" className="mx_RightPanel_headerButton"
@ -55,16 +54,14 @@ class HeaderButton extends React.Component {
{ this.props.badge ? this.props.badge : <span>&nbsp;</span>} { this.props.badge ? this.props.badge : <span>&nbsp;</span>}
</div> </div>
<TintableSvg src={this.props.iconSrc} width="25" height="25"/> <TintableSvg src={this.props.iconSrc} width="25" height="25"/>
{ isHighlighted ? <div className="mx_RightPanel_headerButton_highlight"></div> : <div/> } { this.props.isHighlighted ? <div className="mx_RightPanel_headerButton_highlight"></div> : <div/> }
</AccessibleButton>; </AccessibleButton>;
} }
} }
HeaderButton.propTypes = { HeaderButton.propTypes = {
// If currentPhase is one of the specified phases, the button will be highlighted // Whether this button is highlighted
phases: PropTypes.arrayOf(PropTypes.string).isRequired, isHighlighted: PropTypes.bool.isRequired,
// The currentPhase of the RightPanel
currentPhase: PropTypes.string.isRequired,
// The phase to swap to when the button is clicked // The phase to swap to when the button is clicked
clickPhase: PropTypes.string.isRequired, clickPhase: PropTypes.string.isRequired,
// The source file of the icon to display // The source file of the icon to display
@ -243,22 +240,18 @@ module.exports = React.createClass({
if (this.props.roomId) { if (this.props.roomId) {
headerButtons = [ headerButtons = [
<HeaderButton key="_membersButton" title={_t('Members')} iconSrc="img/icons-people.svg" <HeaderButton key="_membersButton" title={_t('Members')} iconSrc="img/icons-people.svg"
phases={[this.Phase.RoomMemberList, this.Phase.RoomMemberInfo]} isHighlighted={[this.Phase.RoomMemberList, this.Phase.RoomMemberInfo].includes(this.state.phase)}
clickPhase={this.Phase.RoomMemberList} clickPhase={this.Phase.RoomMemberList}
currentPhase={this.state.phase}
badge={membersBadge} badge={membersBadge}
analytics={['Right Panel', 'Member List Button', 'click']} analytics={['Right Panel', 'Member List Button', 'click']}
/>, />,
<HeaderButton key="_filesButton" title={_t('Files')} iconSrc="img/icons-files.svg" <HeaderButton key="_filesButton" title={_t('Files')} iconSrc="img/icons-files.svg"
phases={[this.Phase.FilePanel]} isHighlighted={this.state.phase === this.Phase.FilePanel}
clickPhase={this.Phase.FilePanel}
currentPhase={this.state.phase}
analytics={['Right Panel', 'File List Button', 'click']} analytics={['Right Panel', 'File List Button', 'click']}
/>, />,
<HeaderButton key="_notifsButton" title={_t('Notifications')} iconSrc="img/icons-notifications.svg" <HeaderButton key="_notifsButton" title={_t('Notifications')} iconSrc="img/icons-notifications.svg"
phases={[this.Phase.NotificationPanel]} isHighlighted={this.state.phase === this.Phase.NotificationPanel}
clickPhase={this.Phase.NotificationPanel} clickPhase={this.Phase.NotificationPanel}
currentPhase={this.state.phase}
analytics={['Right Panel', 'Notification List Button', 'click']} analytics={['Right Panel', 'Notification List Button', 'click']}
/>, />,
]; ];