fix: Move toggle button to its own function

This commit is contained in:
Jay Sitter 2023-06-26 20:20:14 -04:00
parent 87a01e7246
commit 8b637a1773

View file

@ -49,7 +49,7 @@ import {
PurgeType, PurgeType,
VoteContentType, VoteContentType,
} from "../../interfaces"; } from "../../interfaces";
import { mdNoImages, mdToHtml, mdToHtmlInline } from "../../markdown"; import { mdToHtml, mdToHtmlInline } from "../../markdown";
import { I18NextService, UserService } from "../../services"; import { I18NextService, UserService } from "../../services";
import { setupTippy } from "../../tippy"; import { setupTippy } from "../../tippy";
import { Icon, PurgeWarning, Spinner } from "../common/icon"; import { Icon, PurgeWarning, Spinner } from "../common/icon";
@ -489,19 +489,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
* If there is a URL, an embed title, and we were not told to show the * If there is a URL, an embed title, and we were not told to show the
* body by the parent component, show the MetadataCard/body toggle. * body by the parent component, show the MetadataCard/body toggle.
*/} */}
{!this.props.showBody && post.url && post.embed_title && ( {!this.props.showBody &&
<button post.url &&
className="btn btn-sm btn-link link-dark link-opacity-75 link-opacity-100-hover py-0 align-baseline" post.embed_title &&
data-tippy-content={post.body && mdNoImages.render(post.body)} this.showPreviewButton()}
data-tippy-allowHtml={true}
onClick={linkEvent(this, this.handleShowBody)}
>
<Icon
icon={!this.state.showBody ? "plus-square" : "minus-square"}
classes="icon-inline"
/>
</button>
)}
{post.removed && ( {post.removed && (
<small className="ms-2 badge text-bg-secondary"> <small className="ms-2 badge text-bg-secondary">
@ -1380,6 +1371,21 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
); );
} }
showPreviewButton() {
return (
<button
type="button"
className="btn btn-sm btn-link link-dark link-opacity-75 link-opacity-100-hover py-0 align-baseline"
onClick={linkEvent(this, this.handleShowBody)}
>
<Icon
icon={!this.state.showBody ? "plus-square" : "minus-square"}
classes="icon-inline"
/>
</button>
);
}
listing() { listing() {
return ( return (
<> <>