1 import { Component, linkEvent } from "inferno";
2 import { SortType } from "lemmy-js-client";
3 import { sortingHelpUrl, randomStr } from "../utils";
4 import { Icon } from "./icon";
5 import { i18n } from "../i18next";
7 interface SortSelectProps {
9 onChange?(val: SortType): any;
11 hideMostComments?: boolean;
14 interface SortSelectState {
18 export class SortSelect extends Component<SortSelectProps, SortSelectState> {
19 private id = `sort-select-${randomStr()}`;
20 private emptyState: SortSelectState = {
21 sort: this.props.sort,
24 constructor(props: any, context: any) {
25 super(props, context);
26 this.state = this.emptyState;
29 static getDerivedStateFromProps(props: any): SortSelectState {
41 value={this.state.sort}
42 onChange={linkEvent(this, this.handleSortChange)}
43 class="custom-select w-auto mr-2 mb-2"
44 aria-label={i18n.t("sort_type")}
46 <option disabled aria-hidden="true">
49 {!this.props.hideHot && [
50 <option value={SortType.Hot}>{i18n.t("hot")}</option>,
51 <option value={SortType.Active}>{i18n.t("active")}</option>,
53 <option value={SortType.New}>{i18n.t("new")}</option>
54 {!this.props.hideMostComments && [
55 <option value={SortType.MostComments}>
56 {i18n.t("most_comments")}
58 <option value={SortType.NewComments}>
59 {i18n.t("new_comments")}
62 <option disabled aria-hidden="true">
65 <option value={SortType.TopDay}>{i18n.t("top_day")}</option>
66 <option value={SortType.TopWeek}>{i18n.t("top_week")}</option>
67 <option value={SortType.TopMonth}>{i18n.t("top_month")}</option>
68 <option value={SortType.TopYear}>{i18n.t("top_year")}</option>
69 <option value={SortType.TopAll}>{i18n.t("top_all")}</option>
72 className="text-muted"
75 title={i18n.t("sorting_help")}
77 <Icon icon="help-circle" classes="icon-inline" />
83 handleSortChange(i: SortSelect, event: any) {
84 i.props.onChange(event.target.value);