<commit_before>import translatable from "../../translatable";
import Component from "../../pure-render-component";
import InputRange from "react-input-range";
import IRstyles from "react-input-range/dist/react-input-range.css";

const BILLION = 1000000000;
const MILLION = 1000000;
const THOUSAND = 1000;

let labelFormatter =  number => {
    if(typeof number == "undefined") return number;
    if(number >= BILLION) return (number/BILLION).toFixed(2) + "B";
    if(number >= MILLION) return (number/MILLION).toFixed(2) + "M";
    if(number >= THOUSAND) return (number/THOUSAND).toFixed(2) + "K";
    return number.toFixed(2);
}

class Range extends translatable(Component){
  render(){
    if(!this.state) return null;
    const {min, max} = this.state;
    const {onUpdate} = this.props;
    const minValue = this.props.minValue || min;
    const maxValue = this.props.maxValue || max;
    return (
        <section className="field">
          <header>
            {this.getTitle()}
          </header>
          <section className="options range">
            <InputRange
                minValue={min}
                maxValue={max}
                value={{min: minValue, max: maxValue}}
                onChange={(_, newVal) => onUpdate(newVal)}
                formatLabel={labelFormatter}
            />
          </section>
          <div className="range-inputs">
            {this.t('general:range:min')}
            &nbsp;
            <input
                type="number"
                className="form-control input-sm"
                value={minValue}
                onChange={e => onUpdate({min: +e.target.value, max: maxValue})}
            />
            &nbsp;
            {this.t('general:range:max')}
            &nbsp;
            <input
                type="number"
                className="form-control input-sm"
                value={maxValue}
                onChange={e => onUpdate({min: minValue, max: +e.target.value})}
            />
          </div>
        </section>
    )
  }
}

export default Range;
<commit_msg>OCVN-359 Range filter input type now gracefully degrades in IE<commit_after>import translatable from "../../translatable";
import Component from "../../pure-render-component";
import InputRange from "react-input-range";
import {isIE} from "../../tools";
import IRstyles from "react-input-range/dist/react-input-range.css";

const BILLION = 1000000000;
const MILLION = 1000000;
const THOUSAND = 1000;

let labelFormatter =  number => {
    if(typeof number == "undefined") return number;
    if(number >= BILLION) return (number/BILLION).toFixed(2) + "B";
    if(number >= MILLION) return (number/MILLION).toFixed(2) + "M";
    if(number >= THOUSAND) return (number/THOUSAND).toFixed(2) + "K";
    return number.toFixed(2);
}

class Range extends translatable(Component){
  maybeGetInputRange(min, max, minValue, maxValue, onUpdate){
    if(!isIE){
      return (
          <InputRange
              minValue={min}
              maxValue={max}
              value={{min: minValue, max: maxValue}}
              onChange={(_, newVal) => onUpdate(newVal)}
              formatLabel={labelFormatter}
          />
      )
    }
    return null;
  }

  render(){
    if(!this.state) return null;
    const {min, max} = this.state;
    const {onUpdate} = this.props;
    const minValue = this.props.minValue || min;
    const maxValue = this.props.maxValue || max;
    return (
        <section className="field">
          <header>
            {this.getTitle()}
          </header>
          <section className="options range">
            {this.maybeGetInputRange(min, max, minValue, maxValue, onUpdate)}
          </section>
          <div className="range-inputs">
            {this.t('general:range:min')}
            &nbsp;
            <input
                type="number"
                className="form-control input-sm"
                value={minValue}
                onChange={e => onUpdate({min: +e.target.value, max: maxValue})}
            />
            &nbsp;
            {this.t('general:range:max')}
            &nbsp;
            <input
                type="number"
                className="form-control input-sm"
                value={maxValue}
                onChange={e => onUpdate({min: minValue, max: +e.target.value})}
            />
          </div>
        </section>
    )
  }
}

export default Range;

{'fraction_non_alphanumeric': 0.13992239214791144, 'fraction_numerical': 0.012097694590276193, 'mean_word_length': 1.999315537303217, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 39, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 2, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '905004', 'n_tokens_mistral': 1314, 'n_tokens_neox': 1256, 'n_words': 279}