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>pull/21833/head
parent
d08fbb4872
commit
6aa9f068b3
|
@ -42,6 +42,17 @@ const formatButtonList = [
|
||||||
_td("numbered-list"),
|
_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) {
|
function CallButton(props) {
|
||||||
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||||
const onVoiceCallClick = (ev) => {
|
const onVoiceCallClick = (ev) => {
|
||||||
|
@ -280,26 +291,12 @@ export default class MessageComposer extends React.Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const uploadInputStyle = {display: 'none'};
|
const uploadInputStyle = {display: 'none'};
|
||||||
const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
|
|
||||||
const MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput");
|
const MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput");
|
||||||
|
|
||||||
const controls = [];
|
const controls = [
|
||||||
|
this.state.me ? <Avatar key="controls_avatar" me={this.state.me} /> : null,
|
||||||
if (this.state.me) {
|
this.props.e2eStatus ? <E2EIcon key="e2eIcon" status={this.props.e2eStatus} className="mx_MessageComposer_e2eIcon" /> : null,
|
||||||
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" />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
let callButton;
|
let callButton;
|
||||||
let videoCallButton;
|
let videoCallButton;
|
||||||
|
|
Loading…
Reference in New Issue