1 import { Component, linkEvent } from "inferno";
2 import { SortType } from "lemmy-js-client";
3 import { i18n } from "../../i18next";
4 import { randomStr, relTags, sortingHelpUrl } from "../../utils";
5 import { Icon } from "./icon";
7 interface SortSelectProps {
9 onChange(val: SortType): void;
11 hideMostComments?: boolean;
14 interface SortSelectState {
18 export class SortSelect extends Component<SortSelectProps, SortSelectState> {
19 private id = `sort-select-${randomStr()}`;
20 state: SortSelectState = {
21 sort: this.props.sort,
24 constructor(props: any, context: any) {
25 super(props, context);
28 static getDerivedStateFromProps(props: SortSelectProps): SortSelectState {
40 value={this.state.sort}
41 onChange={linkEvent(this, this.handleSortChange)}
42 className="form-select d-inline-block w-auto me-2"
43 aria-label={i18n.t("sort_type")}
45 <option disabled aria-hidden="true">
48 {!this.props.hideHot && [
49 <option key={"Hot"} value={"Hot"}>
52 <option key={"Active"} value={"Active"}>
56 <option value={"New"}>{i18n.t("new")}</option>
57 <option value={"Old"}>{i18n.t("old")}</option>
58 {!this.props.hideMostComments && [
59 <option key={"MostComments"} value={"MostComments"}>
60 {i18n.t("most_comments")}
62 <option key={"NewComments"} value={"NewComments"}>
63 {i18n.t("new_comments")}
66 <option disabled aria-hidden="true">
69 <option value={"TopDay"}>{i18n.t("top_day")}</option>
70 <option value={"TopWeek"}>{i18n.t("top_week")}</option>
71 <option value={"TopMonth"}>{i18n.t("top_month")}</option>
72 <option value={"TopYear"}>{i18n.t("top_year")}</option>
73 <option value={"TopAll"}>{i18n.t("top_all")}</option>
76 className="text-muted"
79 title={i18n.t("sorting_help")}
81 <Icon icon="help-circle" classes="icon-inline" />
87 handleSortChange(i: SortSelect, event: any) {
88 i.props.onChange(event.target.value);