ui/src/components/data-type-select.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { DataType } from '../interfaces';
   3
   4 import { i18n } from '../i18next';
   5
   6 interface DataTypeSelectProps {
   7   type_: DataType;
   8   onChange?(val: DataType): any;
   9 }
  10
  11 interface DataTypeSelectState {
  12   type_: DataType;
  13 }
  14
  15 export class DataTypeSelect extends Component<
  16   DataTypeSelectProps,
  17   DataTypeSelectState
  18 > {
  19   private emptyState: DataTypeSelectState = {
  20     type_: this.props.type_,
  21   };
  22
  23   constructor(props: any, context: any) {
  24     super(props, context);
  25     this.state = this.emptyState;
  26   }
  27
  28   render() {
  29     return (
  30       <div class="btn-group btn-group-toggle">
  31         <label
  32           className={`pointer btn btn-sm btn-secondary
  33             ${this.state.type_ == DataType.Post && 'active'}
  34           `}
  35         >
  36           <input
  37             type="radio"
  38             value={DataType.Post}
  39             checked={this.state.type_ == DataType.Post}
  40             onChange={linkEvent(this, this.handleTypeChange)}
  41           />
  42           {i18n.t('posts')}
  43         </label>
  44         <label
  45           className={`pointer btn btn-sm btn-secondary ${this.state.type_ ==
  46             DataType.Comment && 'active'}`}
  47         >
  48           <input
  49             type="radio"
  50             value={DataType.Comment}
  51             checked={this.state.type_ == DataType.Comment}
  52             onChange={linkEvent(this, this.handleTypeChange)}
  53           />
  54           {i18n.t('comments')}
  55         </label>
  56       </div>
  57     );
  58   }
  59
  60   handleTypeChange(i: DataTypeSelect, event: any) {
  61     i.state.type_ = Number(event.target.value);
  62     i.setState(i.state);
  63     i.props.onChange(i.state.type_);
  64   }
  65 }