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 { i18n } from "../../i18next";
13 import { setupTippy } from "../../tippy";
14 import { Icon, Spinner } 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 {
31 showDisclaimer: boolean;
35 export class PrivateMessageForm extends Component<
36 PrivateMessageFormProps,
37 PrivateMessageFormState
39 state: PrivateMessageFormState = {
42 showDisclaimer: false,
43 content: this.props.privateMessageView
44 ? this.props.privateMessageView.private_message.content
49 constructor(props: any, context: any) {
50 super(props, context);
52 this.handleContentChange = this.handleContentChange.bind(this);
59 componentWillReceiveProps(
60 nextProps: Readonly<{ children?: InfernoNode } & PrivateMessageFormProps>
62 if (this.props != nextProps) {
63 this.setState({ loading: false, content: undefined, previewMode: false });
68 // when={!this.state.loading && this.state.content}
69 // message={i18n.t("block_leaving")}
75 className="private-message-form"
76 onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}
80 !this.state.loading && !!this.state.content && !this.state.submitted
83 {!this.props.privateMessageView && (
84 <div className="mb-3 row">
85 <label className="col-sm-2 col-form-label">
86 {capitalizeFirstLetter(i18n.t("to"))}
89 <div className="col-sm-10 form-control-plaintext">
90 <PersonListing person={this.props.recipient} />
94 <div className="mb-3 row">
95 <label className="col-sm-2 col-form-label">
98 className="btn btn-link text-warning d-inline-block"
99 onClick={linkEvent(this, this.handleShowDisclaimer)}
100 data-tippy-content={i18n.t("private_message_disclaimer")}
101 aria-label={i18n.t("private_message_disclaimer")}
103 <Icon icon="alert-triangle" classes="icon-inline" />
106 <div className="col-sm-10">
108 initialContent={this.state.content}
109 onContentChange={this.handleContentChange}
112 hideNavigationWarnings
117 {this.state.showDisclaimer && (
118 <div className="mb-3 row">
119 <div className="offset-sm-2 col-sm-10">
120 <div className="alert alert-danger" role="alert">
121 <T i18nKey="private_message_disclaimer">
124 className="alert-link"
126 href="https://element.io/get-started"
135 <div className="mb-3 row">
136 <div className="offset-sm-2 col-sm-10">
139 className="btn btn-secondary me-2"
140 disabled={this.state.loading}
142 {this.state.loading ? (
144 ) : this.props.privateMessageView ? (
145 capitalizeFirstLetter(i18n.t("save"))
147 capitalizeFirstLetter(i18n.t("send_message"))
150 {this.props.privateMessageView && (
153 className="btn btn-secondary"
154 onClick={linkEvent(this, this.handleCancel)}
159 <ul className="d-inline-block float-right list-inline mb-1 text-muted font-weight-bold">
160 <li className="list-inline-item"></li>
168 handlePrivateMessageSubmit(i: PrivateMessageForm, event: any) {
169 event.preventDefault();
170 i.setState({ loading: true, submitted: true });
171 const pm = i.props.privateMessageView;
172 const auth = myAuthRequired();
173 const content = i.state.content ?? "";
176 private_message_id: pm.private_message.id,
183 recipient_id: i.props.recipient.id,
189 handleContentChange(val: string) {
190 this.setState({ content: val });
193 handleCancel(i: PrivateMessageForm) {
194 i.props.onCancel?.();
197 handlePreviewToggle(i: PrivateMessageForm, event: any) {
198 event.preventDefault();
199 i.setState({ previewMode: !i.state.previewMode });
202 handleShowDisclaimer(i: PrivateMessageForm) {
203 i.setState({ showDisclaimer: !i.state.showDisclaimer });