src/shared/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     console.log(this.state);
  27   }
  28
  29   static getDerivedStateFromProps(props: any): DataTypeSelectProps {
  30     return {
  31       type_: props.type_,
  32     };
  33   }
  34
  35   render() {
  36     return (
  37       <div class="btn-group btn-group-toggle flex-wrap mb-2">
  38         <label
  39           className={`pointer btn btn-outline-secondary
  40             ${this.state.type_ == DataType.Post && 'active'}
  41           `}
  42         >
  43           <input
  44             type="radio"
  45             value={DataType.Post}
  46             checked={this.state.type_ == DataType.Post}
  47             onChange={linkEvent(this, this.handleTypeChange)}
  48           />
  49           {i18n.t('posts')}
  50         </label>
  51         <label
  52           className={`pointer btn btn-outline-secondary ${
  53             this.state.type_ == DataType.Comment && 'active'
  54           }`}
  55         >
  56           <input
  57             type="radio"
  58             value={DataType.Comment}
  59             checked={this.state.type_ == DataType.Comment}
  60             onChange={linkEvent(this, this.handleTypeChange)}
  61           />
  62           {i18n.t('comments')}
  63         </label>
  64       </div>
  65     );
  66   }
  67
  68   handleTypeChange(i: DataTypeSelect, event: any) {
  69     i.props.onChange(Number(event.target.value));
  70   }
  71 }