1 import { Component, InfernoMouseEvent, linkEvent } from "inferno";
2 import { EditSite, Tagline } from "lemmy-js-client";
3 import { i18n } from "../../i18next";
4 import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
5 import { HtmlTags } from "../common/html-tags";
6 import { Icon, Spinner } from "../common/icon";
7 import { MarkdownTextArea } from "../common/markdown-textarea";
9 interface TaglineFormProps {
10 taglines: Array<Tagline>;
11 onSaveSite(form: EditSite): void;
14 interface TaglineFormState {
15 taglines: Array<string>;
20 export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
21 state: TaglineFormState = {
23 editingRow: undefined,
24 taglines: this.props.taglines.map(x => x.content),
26 constructor(props: any, context: any) {
27 super(props, context);
29 get documentTitle(): string {
30 return i18n.t("taglines");
33 componentWillReceiveProps() {
34 this.setState({ loading: false });
39 <div className="col-12">
41 title={this.documentTitle}
42 path={this.context.router.route.match.url}
44 <h5 className="col-12">{i18n.t("taglines")}</h5>
45 <div className="table-responsive col-12">
46 <table id="taglines_table" className="table table-sm table-hover">
47 <thead className="pointer">
49 <th style="width:121px"></th>
52 {this.state.taglines.map((cv, index) => (
55 {this.state.editingRow == index && (
59 this.handleTaglineChange(this, index, s)
61 hideNavigationWarnings
66 {this.state.editingRow != index && <div>{cv}</div>}
68 <td className="text-right">
70 className="btn btn-link btn-animate text-muted"
72 { i: this, index: index },
73 this.handleEditTaglineClick
75 data-tippy-content={i18n.t("edit")}
76 aria-label={i18n.t("edit")}
78 <Icon icon="edit" classes={`icon-inline`} />
82 className="btn btn-link btn-animate text-muted"
84 { i: this, index: index },
85 this.handleDeleteTaglineClick
87 data-tippy-content={i18n.t("delete")}
88 aria-label={i18n.t("delete")}
90 <Icon icon="trash" classes={`icon-inline text-danger`} />
97 <div className="form-group row">
98 <div className="col-12">
100 className="btn btn-sm btn-secondary mr-2"
101 onClick={linkEvent(this, this.handleAddTaglineClick)}
103 {i18n.t("add_tagline")}
108 <div className="form-group row">
109 <div className="col-12">
111 onClick={linkEvent(this, this.handleSaveClick)}
112 className="btn btn-secondary mr-2"
113 disabled={this.state.loading}
115 {this.state.loading ? (
118 capitalizeFirstLetter(i18n.t("save"))
128 handleTaglineChange(i: TaglineForm, index: number, val: string) {
129 if (i.state.taglines) {
130 i.setState(prev => ({
132 taglines: prev.taglines.map((tl, i) => (i === index ? val : tl)),
137 handleDeleteTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
138 event.preventDefault();
139 d.i.setState(prev => ({
141 taglines: prev.taglines.filter((_, i) => i !== d.index),
142 editingRow: undefined,
146 handleEditTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
147 event.preventDefault();
148 if (this.state.editingRow == d.index) {
149 d.i.setState({ editingRow: undefined });
151 d.i.setState({ editingRow: d.index });
155 async handleSaveClick(i: TaglineForm) {
156 i.setState({ loading: true });
158 taglines: i.state.taglines,
159 auth: myAuthRequired(),
163 handleAddTaglineClick(
165 event: InfernoMouseEvent<HTMLButtonElement>
167 event.preventDefault();
168 const newTaglines = [...i.state.taglines];
169 newTaglines.push("");
172 taglines: newTaglines,
173 editingRow: newTaglines.length - 1,