ui/src/components/sort-select.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { SortType } from '../interfaces';
   3 import { i18n } from '../i18next';
   4 import { T } from 'inferno-i18next';
   5
   6 interface SortSelectProps {
   7   sort: SortType;
   8   onChange?(val: SortType): any;
   9   hideHot?: boolean;
  10 }
  11
  12 interface SortSelectState {
  13   sort: SortType;
  14 }
  15
  16 export class SortSelect extends Component<SortSelectProps, SortSelectState> {
  17   private emptyState: SortSelectState = {
  18     sort: this.props.sort,
  19   };
  20
  21   constructor(props: any, context: any) {
  22     super(props, context);
  23     this.state = this.emptyState;
  24   }
  25
  26   render() {
  27     return (
  28       <select
  29         value={this.state.sort}
  30         onChange={linkEvent(this, this.handleSortChange)}
  31         class="custom-select custom-select-sm w-auto"
  32       >
  33         <option disabled>
  34           { i18n.t('sort_type') }
  35         </option>
  36         {!this.props.hideHot && (
  37           <option value={SortType.Hot}>
  38             { i18n.t('hot') }
  39           </option>
  40         )}
  41         <option value={SortType.New}>
  42           { i18n.t('new') }
  43         </option>
  44         <option disabled>─────</option>
  45         <option value={SortType.TopDay}>
  46           { i18n.t('top_day') }
  47         </option>
  48         <option value={SortType.TopWeek}>
  49           { i18n.t('week') }
  50         </option>
  51         <option value={SortType.TopMonth}>
  52           { i18n.t('month') }
  53         </option>
  54         <option value={SortType.TopYear}>
  55           { i18n.t('year') }
  56         </option>
  57         <option value={SortType.TopAll}>
  58           { i18n.t('all') }
  59         </option>
  60       </select>
  61     );
  62   }
  63
  64   handleSortChange(i: SortSelect, event: any) {
  65     i.state.sort = Number(event.target.value);
  66     i.setState(i.state);
  67     i.props.onChange(i.state.sort);
  68   }
  69 }