ui/src/components/sort-select.tsx

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