1 import { myAuthRequired, setIsoData } from "@utils/app";
2 import { capitalizeFirstLetter } from "@utils/helpers";
3 import { Component, linkEvent } from "inferno";
9 } from "lemmy-js-client";
10 import { customEmojisLookup } from "../../markdown";
11 import { HttpService, I18NextService } from "../../services";
12 import { pictrsDeleteToast, toast } from "../../toast";
13 import { EmojiMart } from "../common/emoji-mart";
14 import { HtmlTags } from "../common/html-tags";
15 import { Icon, Spinner } from "../common/icon";
16 import { Paginator } from "../common/paginator";
18 interface EmojiFormProps {
19 onEdit(form: EditCustomEmoji): void;
20 onCreate(form: CreateCustomEmoji): void;
21 onDelete(form: DeleteCustomEmoji): void;
24 interface EmojiFormState {
25 siteRes: GetSiteResponse;
26 customEmojis: CustomEmojiViewForm[];
30 interface CustomEmojiViewForm {
42 export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
43 private isoData = setIsoData(this.context);
44 private itemsPerPage = 15;
45 private emptyState: EmojiFormState = {
46 siteRes: this.isoData.site_res,
47 customEmojis: this.isoData.site_res.custom_emojis.map((x, index) => ({
48 id: x.custom_emoji.id,
49 category: x.custom_emoji.category,
50 shortcode: x.custom_emoji.shortcode,
51 image_url: x.custom_emoji.image_url,
52 alt_text: x.custom_emoji.alt_text,
53 keywords: x.keywords.map(x => x.keyword).join(" "),
55 page: 1 + Math.floor(index / this.itemsPerPage),
60 state: EmojiFormState;
61 private scrollRef: any = {};
62 constructor(props: any, context: any) {
63 super(props, context);
64 this.state = this.emptyState;
66 this.handlePageChange = this.handlePageChange.bind(this);
67 this.handleEmojiClick = this.handleEmojiClick.bind(this);
69 get documentTitle(): string {
70 return I18NextService.i18n.t("custom_emojis");
75 <div className="home-emojis-form col-12">
77 title={this.documentTitle}
78 path={this.context.router.route.match.url}
80 <h5 className="col-12">{I18NextService.i18n.t("custom_emojis")}</h5>
81 {customEmojisLookup.size > 0 && (
84 onEmojiClick={this.handleEmojiClick}
85 pickerOptions={this.configurePicker()}
89 <div className="table-responsive">
90 <table id="emojis_table" className="table table-sm table-hover">
91 <thead className="pointer">
93 <th>{I18NextService.i18n.t("column_emoji")}</th>
94 <th className="text-right">
95 {I18NextService.i18n.t("column_shortcode")}
97 <th className="text-right">
98 {I18NextService.i18n.t("column_category")}
100 <th className="text-right d-lg-table-cell d-none">
101 {I18NextService.i18n.t("column_imageurl")}
103 <th className="text-right">
104 {I18NextService.i18n.t("column_alttext")}
106 <th className="text-right d-lg-table-cell">
107 {I18NextService.i18n.t("column_keywords")}
109 <th style="width:121px"></th>
113 {this.state.customEmojis
115 Number((this.state.page - 1) * this.itemsPerPage),
117 (this.state.page - 1) * this.itemsPerPage +
121 .map((cv, index) => (
122 <tr key={index} ref={e => (this.scrollRef[cv.shortcode] = e)}>
123 <td style="text-align:center;">
124 {cv.image_url.length > 0 && (
126 className="icon-emoji-admin"
131 {cv.image_url.length === 0 && (
134 className="btn btn-sm btn-secondary pointer"
135 htmlFor={`file-uploader-${index}`}
136 data-tippy-content={I18NextService.i18n.t(
140 {capitalizeFirstLetter(
141 I18NextService.i18n.t("upload")
144 name={`file-uploader-${index}`}
145 id={`file-uploader-${index}`}
150 { form: this, index: index },
151 this.handleImageUpload
158 <td className="text-right">
161 placeholder="ShortCode"
162 className="form-control"
166 { form: this, index: index },
167 this.handleEmojiShortCodeChange
171 <td className="text-right">
174 placeholder="Category"
175 className="form-control"
178 { form: this, index: index },
179 this.handleEmojiCategoryChange
183 <td className="text-right d-lg-table-cell d-none">
187 className="form-control"
190 { form: this, index: index, overrideValue: null },
191 this.handleEmojiImageUrlChange
195 <td className="text-right">
198 placeholder="Alt Text"
199 className="form-control"
202 { form: this, index: index },
203 this.handleEmojiAltTextChange
207 <td className="text-right d-lg-table-cell">
210 placeholder="Keywords"
211 className="form-control"
214 { form: this, index: index },
215 this.handleEmojiKeywordChange
221 <span title={this.getEditTooltip(cv)}>
226 : "text-muted ") + "btn btn-link btn-animate"
230 this.handleEditEmojiClick
232 data-tippy-content={I18NextService.i18n.t("save")}
233 aria-label={I18NextService.i18n.t("save")}
234 disabled={!this.canEdit(cv)}
239 capitalizeFirstLetter(
240 I18NextService.i18n.t("save")
246 className="btn btn-link btn-animate text-muted"
248 { i: this, index: index, cv: cv },
249 this.handleDeleteEmojiClick
251 data-tippy-content={I18NextService.i18n.t("delete")}
252 aria-label={I18NextService.i18n.t("delete")}
253 disabled={cv.loading}
254 title={I18NextService.i18n.t("delete")}
258 classes={`icon-inline text-danger`}
269 className="btn btn-sm btn-secondary me-2"
270 onClick={linkEvent(this, this.handleAddEmojiClick)}
272 {I18NextService.i18n.t("add_custom_emoji")}
275 <Paginator page={this.state.page} onChange={this.handlePageChange} />
281 canEdit(cv: CustomEmojiViewForm) {
282 const noEmptyFields =
283 cv.alt_text.length > 0 &&
284 cv.category.length > 0 &&
285 cv.image_url.length > 0 &&
286 cv.shortcode.length > 0;
287 const noDuplicateShortCodes =
288 this.state.customEmojis.filter(
289 x => x.shortcode == cv.shortcode && x.id != cv.id
291 return noEmptyFields && noDuplicateShortCodes && !cv.loading && cv.changed;
294 getEditTooltip(cv: CustomEmojiViewForm) {
295 if (this.canEdit(cv)) return I18NextService.i18n.t("save");
296 else return I18NextService.i18n.t("custom_emoji_save_validation");
299 handlePageChange(page: number) {
300 this.setState({ page: page });
303 handleEmojiClick(e: any) {
304 const view = customEmojisLookup.get(e.id);
306 const page = this.state.customEmojis.find(
307 x => x.id == view.custom_emoji.id
310 this.setState({ page: page });
311 this.scrollRef[view.custom_emoji.shortcode].scrollIntoView();
316 handleEmojiCategoryChange(
317 props: { form: EmojiForm; index: number },
320 const custom_emojis = [...props.form.state.customEmojis];
322 (props.form.state.page - 1) * props.form.itemsPerPage + props.index;
324 ...props.form.state.customEmojis[pagedIndex],
325 category: event.target.value,
328 custom_emojis[Number(pagedIndex)] = item;
329 props.form.setState({ customEmojis: custom_emojis });
332 handleEmojiShortCodeChange(
333 props: { form: EmojiForm; index: number },
336 const custom_emojis = [...props.form.state.customEmojis];
338 (props.form.state.page - 1) * props.form.itemsPerPage + props.index;
340 ...props.form.state.customEmojis[pagedIndex],
341 shortcode: event.target.value,
344 custom_emojis[Number(pagedIndex)] = item;
345 props.form.setState({ customEmojis: custom_emojis });
348 handleEmojiImageUrlChange(
353 }: { form: EmojiForm; index: number; overrideValue: string | null },
356 form.setState(prevState => {
357 const custom_emojis = [...form.state.customEmojis];
358 const pagedIndex = (form.state.page - 1) * form.itemsPerPage + index;
360 ...form.state.customEmojis[pagedIndex],
361 image_url: overrideValue ?? event.target.value,
364 custom_emojis[Number(pagedIndex)] = item;
367 customEmojis: prevState.customEmojis.map((ce, i) =>
371 image_url: overrideValue ?? event.target.value,
381 handleEmojiAltTextChange(
382 props: { form: EmojiForm; index: number },
385 const custom_emojis = [...props.form.state.customEmojis];
387 (props.form.state.page - 1) * props.form.itemsPerPage + props.index;
389 ...props.form.state.customEmojis[pagedIndex],
390 alt_text: event.target.value,
393 custom_emojis[Number(pagedIndex)] = item;
394 props.form.setState({ customEmojis: custom_emojis });
397 handleEmojiKeywordChange(
398 props: { form: EmojiForm; index: number },
401 const custom_emojis = [...props.form.state.customEmojis];
403 (props.form.state.page - 1) * props.form.itemsPerPage + props.index;
405 ...props.form.state.customEmojis[pagedIndex],
406 keywords: event.target.value,
409 custom_emojis[Number(pagedIndex)] = item;
410 props.form.setState({ customEmojis: custom_emojis });
413 handleDeleteEmojiClick(d: {
416 cv: CustomEmojiViewForm;
418 const pagedIndex = (d.i.state.page - 1) * d.i.itemsPerPage + d.index;
422 auth: myAuthRequired(),
425 const custom_emojis = [...d.i.state.customEmojis];
426 custom_emojis.splice(Number(pagedIndex), 1);
427 d.i.setState({ customEmojis: custom_emojis });
431 handleEditEmojiClick(d: { i: EmojiForm; cv: CustomEmojiViewForm }) {
432 const keywords = d.cv.keywords
434 .filter(x => x.length > 0) as string[];
435 const uniqueKeywords = Array.from(new Set(keywords));
439 category: d.cv.category,
440 image_url: d.cv.image_url,
441 alt_text: d.cv.alt_text,
442 keywords: uniqueKeywords,
443 auth: myAuthRequired(),
447 category: d.cv.category,
448 shortcode: d.cv.shortcode,
449 image_url: d.cv.image_url,
450 alt_text: d.cv.alt_text,
451 keywords: uniqueKeywords,
452 auth: myAuthRequired(),
457 handleAddEmojiClick(form: EmojiForm, event: any) {
458 event.preventDefault();
459 form.setState(prevState => {
461 1 + Math.floor(prevState.customEmojis.length / form.itemsPerPage);
462 const item: CustomEmojiViewForm = {
476 customEmojis: [...prevState.customEmojis, item],
483 { form, index }: { form: EmojiForm; index: number },
488 event.preventDefault();
489 file = event.target.files[0];
494 form.setState(prevState => ({
496 customEmojis: prevState.customEmojis.map((cv, i) =>
497 i === index ? { ...cv, loading: true } : cv
501 HttpService.client.uploadImage({ image: file }).then(res => {
502 console.log("pictrs upload:");
504 if (res.state === "success") {
505 if (res.data.msg === "ok") {
506 pictrsDeleteToast(file.name, res.data.delete_url as string);
507 form.handleEmojiImageUrlChange(
508 { form: form, index: index, overrideValue: res.data.url as string },
512 toast(JSON.stringify(res), "danger");
514 } else if (res.state === "failed") {
515 console.error(res.msg);
516 toast(res.msg, "danger");
521 configurePicker(): any {
523 data: { categories: [], emojis: [], aliases: [] },