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): any;
  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   private emptyState: SortSelectState = {
  21     sort: this.props.sort,
  22   };
  23
  24   constructor(props: any, context: any) {
  25     super(props, context);
  26     this.state = this.emptyState;
  27   }
  28
  29   static getDerivedStateFromProps(props: any): SortSelectState {
  30     return {
  31       sort: props.sort,
  32     };
  33   }
  34
  35   render() {
  36     return (
  37       <>
  38         <select
  39           id={this.id}
  40           name={this.id}
  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")}
  45         >
  46           <option disabled aria-hidden="true">
  47             {i18n.t("sort_type")}
  48           </option>
  49           {!this.props.hideHot && [
  50             <option value={SortType.Hot}>{i18n.t("hot")}</option>,
  51             <option value={SortType.Active}>{i18n.t("active")}</option>,
  52           ]}
  53           <option value={SortType.New}>{i18n.t("new")}</option>
  54           <option value={SortType.Old}>{i18n.t("old")}</option>
  55           {!this.props.hideMostComments && [
  56             <option value={SortType.MostComments}>
  57               {i18n.t("most_comments")}
  58             </option>,
  59             <option value={SortType.NewComments}>
  60               {i18n.t("new_comments")}
  61             </option>,
  62           ]}
  63           <option disabled aria-hidden="true">
  64             ─────
  65           </option>
  66           <option value={SortType.TopDay}>{i18n.t("top_day")}</option>
  67           <option value={SortType.TopWeek}>{i18n.t("top_week")}</option>
  68           <option value={SortType.TopMonth}>{i18n.t("top_month")}</option>
  69           <option value={SortType.TopYear}>{i18n.t("top_year")}</option>
  70           <option value={SortType.TopAll}>{i18n.t("top_all")}</option>
  71         </select>
  72         <a
  73           className="text-muted"
  74           href={sortingHelpUrl}
  75           rel={relTags}
  76           title={i18n.t("sorting_help")}
  77         >
  78           <Icon icon="help-circle" classes="icon-inline" />
  79         </a>
  80       </>
  81     );
  82   }
  83
  84   handleSortChange(i: SortSelect, event: any) {
  85     i.props.onChange(event.target.value);
  86   }
  87 }