src/shared/components/common/sort-select.tsx

   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";
   6
   7 interface SortSelectProps {
   8   sort: SortType;
   9   onChange(val: SortType): void;
  10   hideHot?: boolean;
  11   hideMostComments?: boolean;
  12 }
  13
  14 interface SortSelectState {
  15   sort: SortType;
  16 }
  17
  18 export class SortSelect extends Component<SortSelectProps, SortSelectState> {
  19   private id = `sort-select-${randomStr()}`;
  20   state: SortSelectState = {
  21     sort: this.props.sort,
  22   };
  23
  24   constructor(props: any, context: any) {
  25     super(props, context);
  26   }
  27
  28   static getDerivedStateFromProps(props: SortSelectProps): SortSelectState {
  29     return {
  30       sort: props.sort,
  31     };
  32   }
  33
  34   render() {
  35     return (
  36       <>
  37         <select
  38           id={this.id}
  39           name={this.id}
  40           value={this.state.sort}
  41           onChange={linkEvent(this, this.handleSortChange)}
  42           className="sort-select form-select d-inline-block w-auto me-2"
  43           aria-label={i18n.t("sort_type")}
  44         >
  45           <option disabled aria-hidden="true">
  46             {i18n.t("sort_type")}
  47           </option>
  48           {!this.props.hideHot && [
  49             <option key={"Hot"} value={"Hot"}>
  50               {i18n.t("hot")}
  51             </option>,
  52             <option key={"Active"} value={"Active"}>
  53               {i18n.t("active")}
  54             </option>,
  55           ]}
  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")}
  61             </option>,
  62             <option key={"NewComments"} value={"NewComments"}>
  63               {i18n.t("new_comments")}
  64             </option>,
  65           ]}
  66           <option disabled aria-hidden="true">
  67             ─────
  68           </option>
  69           <option value={"TopHour"}>{i18n.t("top_hour")}</option>
  70           <option value={"TopSixHour"}>{i18n.t("top_six_hours")}</option>
  71           <option value={"TopTwelveHour"}>{i18n.t("top_twelve_hours")}</option>
  72           <option value={"TopDay"}>{i18n.t("top_day")}</option>
  73           <option value={"TopWeek"}>{i18n.t("top_week")}</option>
  74           <option value={"TopMonth"}>{i18n.t("top_month")}</option>
  75           <option value={"TopYear"}>{i18n.t("top_year")}</option>
  76           <option value={"TopAll"}>{i18n.t("top_all")}</option>
  77         </select>
  78         <a
  79           className="sort-select-icon text-muted"
  80           href={sortingHelpUrl}
  81           rel={relTags}
  82           title={i18n.t("sorting_help")}
  83         >
  84           <Icon icon="help-circle" classes="icon-inline" />
  85         </a>
  86       </>
  87     );
  88   }
  89
  90   handleSortChange(i: SortSelect, event: any) {
  91     i.props.onChange(event.target.value);
  92   }
  93 }