1 import { myAuthRequired } from "@utils/app";
2 import { capitalizeFirstLetter } from "@utils/helpers";
3 import { Component, InfernoNode, linkEvent } from "inferno";
4 import { T } from "inferno-i18next-dess";
10 } from "lemmy-js-client";
11 import { relTags } from "../../config";
12 import { I18NextService } from "../../services";
13 import { setupTippy } from "../../tippy";
14 import { Icon } from "../common/icon";
15 import { MarkdownTextArea } from "../common/markdown-textarea";
16 import NavigationPrompt from "../common/navigation-prompt";
17 import { PersonListing } from "../person/person-listing";
19 interface PrivateMessageFormProps {
21 privateMessageView?: PrivateMessageView; // If a pm is given, that means this is an edit
23 onCreate?(form: CreatePrivateMessage): void;
24 onEdit?(form: EditPrivateMessage): void;
27 interface PrivateMessageFormState {
34 export class PrivateMessageForm extends Component<
35 PrivateMessageFormProps,
36 PrivateMessageFormState
38 state: PrivateMessageFormState = {
41 content: this.props.privateMessageView
42 ? this.props.privateMessageView.private_message.content
47 constructor(props: any, context: any) {
48 super(props, context);
50 this.handleContentChange = this.handleContentChange.bind(this);
57 componentWillReceiveProps(
58 nextProps: Readonly<{ children?: InfernoNode } & PrivateMessageFormProps>
60 if (this.props != nextProps) {
61 this.setState({ loading: false, content: undefined, previewMode: false });
66 // when={!this.state.loading && this.state.content}
67 // message={I18NextService.i18n.t("block_leaving")}
72 <form className="private-message-form">
75 !this.state.loading && !!this.state.content && !this.state.submitted
78 {!this.props.privateMessageView && (
79 <div className="mb-3 row align-items-baseline">
80 <label className="col-sm-2 col-form-label">
81 {capitalizeFirstLetter(I18NextService.i18n.t("to"))}
84 <div className="col-sm-10">
85 <PersonListing person={this.props.recipient} />
89 <div className="alert alert-warning small">
90 <Icon icon="alert-triangle" classes="icon-inline me-1" />
91 <T parent="span" i18nKey="private_message_disclaimer">
94 className="alert-link"
96 href="https://element.io/get-started"
102 <div className="mb-3 row">
103 <label className="col-sm-2 col-form-label">
104 {I18NextService.i18n.t("message")}
106 <div className="col-sm-10">
109 this.handlePrivateMessageSubmit(this, event);
111 initialContent={this.state.content}
112 onContentChange={this.handleContentChange}
115 hideNavigationWarnings
117 this.props.privateMessageView
118 ? capitalizeFirstLetter(I18NextService.i18n.t("save"))
119 : capitalizeFirstLetter(I18NextService.i18n.t("send_message"))
125 <div className="mb-3 d-flex justify-content-end">
126 {this.props.privateMessageView && (
129 className="btn btn-secondary w-auto"
130 onClick={linkEvent(this, this.handleCancel)}
132 {I18NextService.i18n.t("cancel")}
140 handlePrivateMessageSubmit(i: PrivateMessageForm, event: any) {
141 event.preventDefault();
142 i.setState({ loading: true, submitted: true });
143 const pm = i.props.privateMessageView;
144 const auth = myAuthRequired();
145 const content = i.state.content ?? "";
148 private_message_id: pm.private_message.id,
155 recipient_id: i.props.recipient.id,
161 handleContentChange(val: string) {
162 this.setState({ content: val });
165 handleCancel(i: PrivateMessageForm) {
166 i.props.onCancel?.();
169 handlePreviewToggle(i: PrivateMessageForm, event: any) {
170 event.preventDefault();
171 i.setState({ previewMode: !i.state.previewMode });