1 import { Component, InfernoNode, linkEvent } from "inferno";
2 import { T } from "inferno-i18next-dess";
8 } from "lemmy-js-client";
9 import { i18n } from "../../i18next";
11 capitalizeFirstLetter,
16 import { Icon, Spinner } from "../common/icon";
17 import { MarkdownTextArea } from "../common/markdown-textarea";
18 import NavigationPrompt from "../common/navigation-prompt";
19 import { PersonListing } from "../person/person-listing";
21 interface PrivateMessageFormProps {
23 privateMessageView?: PrivateMessageView; // If a pm is given, that means this is an edit
25 onCreate?(form: CreatePrivateMessage): void;
26 onEdit?(form: EditPrivateMessage): void;
29 interface PrivateMessageFormState {
33 showDisclaimer: boolean;
37 export class PrivateMessageForm extends Component<
38 PrivateMessageFormProps,
39 PrivateMessageFormState
41 state: PrivateMessageFormState = {
44 showDisclaimer: false,
45 content: this.props.privateMessageView
46 ? this.props.privateMessageView.private_message.content
51 constructor(props: any, context: any) {
52 super(props, context);
54 this.handleContentChange = this.handleContentChange.bind(this);
61 componentWillReceiveProps(
62 nextProps: Readonly<{ children?: InfernoNode } & PrivateMessageFormProps>
64 if (this.props != nextProps) {
65 this.setState({ loading: false, content: undefined, previewMode: false });
70 // when={!this.state.loading && this.state.content}
71 // message={i18n.t("block_leaving")}
76 <form onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}>
79 !this.state.loading && !!this.state.content && !this.state.submitted
82 {!this.props.privateMessageView && (
83 <div className="form-group row">
84 <label className="col-sm-2 col-form-label">
85 {capitalizeFirstLetter(i18n.t("to"))}
88 <div className="col-sm-10 form-control-plaintext">
89 <PersonListing person={this.props.recipient} />
93 <div className="form-group row">
94 <label className="col-sm-2 col-form-label">
97 className="btn btn-link text-warning d-inline-block"
98 onClick={linkEvent(this, this.handleShowDisclaimer)}
99 data-tippy-content={i18n.t("private_message_disclaimer")}
100 aria-label={i18n.t("private_message_disclaimer")}
102 <Icon icon="alert-triangle" classes="icon-inline" />
105 <div className="col-sm-10">
107 initialContent={this.state.content}
108 onContentChange={this.handleContentChange}
111 hideNavigationWarnings
116 {this.state.showDisclaimer && (
117 <div className="form-group row">
118 <div className="offset-sm-2 col-sm-10">
119 <div className="alert alert-danger" role="alert">
120 <T i18nKey="private_message_disclaimer">
123 className="alert-link"
125 href="https://element.io/get-started"
134 <div className="form-group row">
135 <div className="offset-sm-2 col-sm-10">
138 className="btn btn-secondary mr-2"
139 disabled={this.state.loading}
141 {this.state.loading ? (
143 ) : this.props.privateMessageView ? (
144 capitalizeFirstLetter(i18n.t("save"))
146 capitalizeFirstLetter(i18n.t("send_message"))
149 {this.props.privateMessageView && (
152 className="btn btn-secondary"
153 onClick={linkEvent(this, this.handleCancel)}
158 <ul className="d-inline-block float-right list-inline mb-1 text-muted font-weight-bold">
159 <li className="list-inline-item"></li>
167 handlePrivateMessageSubmit(i: PrivateMessageForm, event: any) {
168 event.preventDefault();
169 i.setState({ loading: true, submitted: true });
170 const pm = i.props.privateMessageView;
171 const auth = myAuthRequired();
172 const content = i.state.content ?? "";
175 private_message_id: pm.private_message.id,
182 recipient_id: i.props.recipient.id,
188 handleContentChange(val: string) {
189 this.setState({ content: val });
192 handleCancel(i: PrivateMessageForm) {
193 i.props.onCancel?.();
196 handlePreviewToggle(i: PrivateMessageForm, event: any) {
197 event.preventDefault();
198 i.setState({ previewMode: !i.state.previewMode });
201 handleShowDisclaimer(i: PrivateMessageForm) {
202 i.setState({ showDisclaimer: !i.state.showDisclaimer });