1 import { myAuthRequired } from "@utils/app";
2 import { capitalizeFirstLetter } from "@utils/helpers";
3 import { Component, InfernoMouseEvent, linkEvent } from "inferno";
4 import { EditSite, Tagline } from "lemmy-js-client";
5 import { I18NextService } from "../../services";
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;
15 interface TaglineFormState {
16 taglines: Array<string>;
20 export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
21 state: TaglineFormState = {
22 editingRow: undefined,
23 taglines: this.props.taglines.map(x => x.content),
25 constructor(props: any, context: any) {
26 super(props, context);
31 <div className="tagline-form col-12">
32 <h1 className="h4 mb-4">{I18NextService.i18n.t("taglines")}</h1>
33 <div className="table-responsive col-12">
34 <table id="taglines_table" className="table table-sm table-hover">
35 <thead className="pointer">
37 <th style="width:121px"></th>
40 {this.state.taglines.map((cv, index) => (
43 {this.state.editingRow === index && (
47 this.handleTaglineChange(this, index, s)
49 hideNavigationWarnings
54 {this.state.editingRow !== index && <div>{cv}</div>}
56 <td className="text-right">
58 className="btn btn-link btn-animate text-muted"
60 { i: this, index: index },
61 this.handleEditTaglineClick,
63 data-tippy-content={I18NextService.i18n.t("edit")}
64 aria-label={I18NextService.i18n.t("edit")}
66 <Icon icon="edit" classes="icon-inline" />
70 className="btn btn-link btn-animate text-muted"
72 { i: this, index: index },
73 this.handleDeleteTaglineClick,
75 data-tippy-content={I18NextService.i18n.t("delete")}
76 aria-label={I18NextService.i18n.t("delete")}
78 <Icon icon="trash" classes="icon-inline text-danger" />
85 <div className="mb-3 row">
86 <div className="col-12">
88 className="btn btn-sm btn-secondary me-2"
89 onClick={linkEvent(this, this.handleAddTaglineClick)}
91 {I18NextService.i18n.t("add_tagline")}
96 <div className="mb-3 row">
97 <div className="col-12">
99 onClick={linkEvent(this, this.handleSaveClick)}
100 className="btn btn-secondary me-2"
101 disabled={this.props.loading}
103 {this.props.loading ? (
106 capitalizeFirstLetter(I18NextService.i18n.t("save"))
116 handleTaglineChange(i: TaglineForm, index: number, val: string) {
117 if (i.state.taglines) {
118 i.setState(prev => ({
120 taglines: prev.taglines.map((tl, i) => (i === index ? val : tl)),
125 handleDeleteTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
126 event.preventDefault();
127 d.i.setState(prev => ({
129 taglines: prev.taglines.filter((_, i) => i !== d.index),
130 editingRow: undefined,
134 handleEditTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
135 event.preventDefault();
136 if (d.i.state.editingRow === d.index) {
137 d.i.setState({ editingRow: undefined });
139 d.i.setState({ editingRow: d.index });
143 async handleSaveClick(i: TaglineForm) {
145 taglines: i.state.taglines,
146 auth: myAuthRequired(),
150 handleAddTaglineClick(
152 event: InfernoMouseEvent<HTMLButtonElement>,
154 event.preventDefault();
155 const newTaglines = [...i.state.taglines];
156 newTaglines.push("");
159 taglines: newTaglines,
160 editingRow: newTaglines.length - 1,