Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Moved to modern React syntax for More component

Browse source
This commit is contained in:
Simon Backx 2022-07-07 10:17:55 +02:00
parent 405c981131
commit 125afc5e23
2 changed files with 22 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
apps/comments-ui/src/components/Comment.js
View file

@ -34,14 +34,6 @@ class Comment extends React.Component {
})); }));
} }
/**
* Whether we have at least one action inside the context menu
* (to hide the 'more' icon if we don't have any actions)
*/
get hasMoreContextMenu() {
return (!!this.context.member && this.props.comment.status === 'published') || !!this.context.admin;
}
render() { render() {
const comment = this.props.comment; const comment = this.props.comment;
const hasReplies = comment.replies && comment.replies.length > 0; const hasReplies = comment.replies && comment.replies.length > 0;
@ -72,7 +64,7 @@ class Comment extends React.Component {
<div className="flex gap-6"> <div className="flex gap-6">
<Like comment={comment} /> <Like comment={comment} />
<Reply comment={comment} /> <Reply comment={comment} />
<More comment={comment} show={this.hasMoreContextMenu} toggleEdit={this.toggleEditMode} /> <More comment={comment} toggleEdit={this.toggleEditMode} />
</div> </div>
</div> </div>
{hasReplies && {hasReplies &&

49
apps/comments-ui/src/components/More.js
View file

@ -1,37 +1,30 @@
import {ReactComponent as MoreIcon} from '../images/icons/more.svg'; import {ReactComponent as MoreIcon} from '../images/icons/more.svg';
import React from 'react'; import React, {useContext, useState} from 'react';
import AppContext from '../AppContext';
import CommentContextMenu from './modals/CommentContextMenu'; import CommentContextMenu from './modals/CommentContextMenu';
import AppContext from '../AppContext';
class More extends React.Component { const More = (props) => {
static contextType = AppContext; const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
const {member, admin} = useContext(AppContext);
constructor(props) { const toggleContextMenu = () => {
super(props); setIsContextMenuOpen(current => !current);
this.state = { };
isContextMenuOpen: false
};
this.toggleContextMenu = this.toggleContextMenu.bind(this); const comment = props.comment;
}
toggleContextMenu() { /*
this.setState(state => ({ * Whether we have at least one action inside the context menu
isContextMenuOpen: !state.isContextMenuOpen * (to hide the 'more' icon if we don't have any actions)
})); */
} const show = (!!member && comment.status === 'published') || !!admin;
render() { return (
const comment = this.props.comment; <div className="relative">
const show = this.props.show; {show ? <button onClick={toggleContextMenu}><MoreIcon className='gh-comments-icon gh-comments-icon-more dark:fill-white' /></button> : null}
{isContextMenuOpen ? <CommentContextMenu comment={comment} close={toggleContextMenu} toggleEdit={props.toggleEdit} /> : null}
return ( </div>
<div className="relative"> );
{show ? <button onClick={this.toggleContextMenu}><MoreIcon className='gh-comments-icon gh-comments-icon-more dark:fill-white' /></button> : null} };
{this.state.isContextMenuOpen ? <CommentContextMenu comment={comment} close={this.toggleContextMenu} toggleEdit={this.props.toggleEdit} /> : null}
</div>
);
}
}
export default More; export default More;