From 6aa9f068b3bd3414ea47544585d465e19a90a408 Mon Sep 17 00:00:00 2001
From: YaoiFangirl420 <48789208+YaoiFangirl420@users.noreply.github.com>
Date: Sat, 6 Apr 2019 20:44:22 -0700
Subject: [PATCH] Tighten controls code in MessageComposer
Make the user avatar a separate function component, make the logic for
laying out components a little more concise
Signed-off-by: YaoiFangirl420 <48789208+YaoiFangirl420@users.noreply.github.com>
---
src/components/views/rooms/MessageComposer.js | 33 +++++++++----------
1 file changed, 15 insertions(+), 18 deletions(-)
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 5c9ef3f15f..089fbc13f4 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -42,6 +42,17 @@ const formatButtonList = [
_td("numbered-list"),
];
+function Avatar(props) {
+ const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
+ return <div className="mx_MessageComposer_avatar">
+ <MemberStatusMessageAvatar member={props.me} width={24} height={24} />
+ </div>;
+}
+
+Avatar.propTypes = {
+ me: PropTypes.object.isRequired,
+}
+
function CallButton(props) {
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
const onVoiceCallClick = (ev) => {
@@ -280,26 +291,12 @@ export default class MessageComposer extends React.Component {
render() {
const uploadInputStyle = {display: 'none'};
- const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
const MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput");
- const controls = [];
-
- if (this.state.me) {
- controls.push(
- <div key="controls_avatar" className="mx_MessageComposer_avatar">
- <MemberStatusMessageAvatar member={this.state.me} width={24} height={24} />
- </div>,
- );
- }
-
- if (this.props.e2eStatus) {
- controls.push(<E2EIcon
- status={this.props.e2eStatus}
- key="e2eIcon"
- className="mx_MessageComposer_e2eIcon" />
- );
- }
+ const controls = [
+ this.state.me ? <Avatar key="controls_avatar" me={this.state.me} /> : null,
+ this.props.e2eStatus ? <E2EIcon key="e2eIcon" status={this.props.e2eStatus} className="mx_MessageComposer_e2eIcon" /> : null,
+ ];
let callButton;
let videoCallButton;