src/shared/components/sort-select.tsx

   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";
   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           {!this.props.hideMostComments && [
  55             <option value={SortType.MostComments}>
  56               {i18n.t("most_comments")}
  57             </option>,
  58             <option value={SortType.NewComments}>
  59               {i18n.t("new_comments")}
  60             </option>,
  61           ]}
  62           <option disabled aria-hidden="true">
  63             ─────
  64           </option>
  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>
  70         </select>
  71         <a
  72           className="text-muted"
  73           href={sortingHelpUrl}
  74           rel="noopener"
  75           title={i18n.t("sorting_help")}
  76         >
  77           <Icon icon="help-circle" classes="icon-inline" />
  78         </a>
  79       </>
  80     );
  81   }
  82
  83   handleSortChange(i: SortSelect, event: any) {
  84     i.props.onChange(event.target.value);
  85   }
  86 }