1 import { randomStr } from "@utils/helpers";
2 import { Component, linkEvent } from "inferno";
3 import { SortType } from "lemmy-js-client";
4 import { relTags, sortingHelpUrl } from "../../config";
5 import { I18NextService } from "../../services";
6 import { Icon } from "./icon";
8 interface SortSelectProps {
10 onChange(val: SortType): void;
12 hideMostComments?: boolean;
15 interface SortSelectState {
19 export class SortSelect extends Component<SortSelectProps, SortSelectState> {
20 private id = `sort-select-${randomStr()}`;
21 state: SortSelectState = {
22 sort: this.props.sort,
25 constructor(props: any, context: any) {
26 super(props, context);
29 static getDerivedStateFromProps(props: SortSelectProps): SortSelectState {
41 value={this.state.sort}
42 onChange={linkEvent(this, this.handleSortChange)}
43 className="sort-select form-select d-inline-block w-auto me-2"
44 aria-label={I18NextService.i18n.t("sort_type")}
46 <option disabled aria-hidden="true">
47 {I18NextService.i18n.t("sort_type")}
49 {!this.props.hideHot && [
50 <option key={"Hot"} value={"Hot"}>
51 {I18NextService.i18n.t("hot")}
53 <option key={"Active"} value={"Active"}>
54 {I18NextService.i18n.t("active")}
57 <option value={"New"}>{I18NextService.i18n.t("new")}</option>
58 <option value={"Old"}>{I18NextService.i18n.t("old")}</option>
59 {!this.props.hideMostComments && [
60 <option key={"MostComments"} value={"MostComments"}>
61 {I18NextService.i18n.t("most_comments")}
63 <option key={"NewComments"} value={"NewComments"}>
64 {I18NextService.i18n.t("new_comments")}
67 <option disabled aria-hidden="true">
70 <option value={"TopHour"}>{I18NextService.i18n.t("top_hour")}</option>
71 <option value={"TopSixHour"}>
72 {I18NextService.i18n.t("top_six_hours")}
74 <option value={"TopTwelveHour"}>
75 {I18NextService.i18n.t("top_twelve_hours")}
77 <option value={"TopDay"}>{I18NextService.i18n.t("top_day")}</option>
78 <option value={"TopWeek"}>{I18NextService.i18n.t("top_week")}</option>
79 <option value={"TopMonth"}>
80 {I18NextService.i18n.t("top_month")}
82 <option value={"TopYear"}>{I18NextService.i18n.t("top_year")}</option>
83 <option value={"TopAll"}>{I18NextService.i18n.t("top_all")}</option>
86 className="sort-select-icon text-muted"
89 title={I18NextService.i18n.t("sorting_help")}
91 <Icon icon="help-circle" classes="icon-inline" />
97 handleSortChange(i: SortSelect, event: any) {
98 i.props.onChange(event.target.value);