text: /* eslint react/prefer-stateless-function: 0 */
  /* eslint no-return-assign: 0 */
  /* eslint no-unused-vars: 0 */
  import React from 'react';
  import PropTypes from 'prop-types';
  import BootstrapTable from 'react-bootstrap-table-next';
  import cellEditFactory from 'react-bootstrap-table2-editor';
  import Code from 'components/common/code-block';
  import { productsQualityGenerator } from 'utils/common';
  
  const products = productsQualityGenerator();
  
  class QualityRanger extends React.Component {
    static propTypes = {
      value: PropTypes.number,
      onUpdate: PropTypes.func.isRequired
    }
    static defaultProps = {
      value: 0
    }
    getValue() {
      return parseInt(this.range.value, 10);
    }
    render() {
      const { value, onUpdate, ...rest } = this.props;
      return [
        <input
          { ...rest }
          key="range"
          ref={ node => this.range = node }
          type="range"
          min="0"
          max="100"
        />,
        <button
          key="submit"
          className="btn btn-default"
          onClick={ () => onUpdate(this.getValue()) }
        >
          done
        </button>
      ];
    }
  }
  
  const columns = [{
    dataField: 'id',
    text: 'Product ID'
  }, {
    dataField: 'name',
    text: 'Product Name'
  }, {
    dataField: 'quality',
    text: 'Product Quality',
    editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) => (
      <QualityRanger { ...editorProps } value={ value } />
    )
  }];
  
  const sourceCode = `\
  import BootstrapTable from 'react-bootstrap-table-next';
  import cellEditFactory from 'react-bootstrap-table2-editor';
  
  class QualityRanger extends React.Component {
    static propTypes = {
      value: PropTypes.number,
      onUpdate: PropTypes.func.isRequired
    }
    static defaultProps = {
      value: 0
    }
    getValue() {
      return parseInt(this.range.value, 10);
    }
    render() {
      const { value, onUpdate, ...rest } = this.props;
      return [
        <input
          { ...rest }
          key="range"
          ref={ node => this.range = node }
          type="range"
          min="0"
          max="100"
        />,
        <button
          key="submit"
          className="btn btn-default"
          onClick={ () => onUpdate(this.getValue()) }
        >
          done
        </button>
      ];
    }
  }
  
  const columns = [{
    dataField: 'id',
    text: 'Product ID'
  }, {
    dataField: 'name',
    text: 'Product Name'
  }, {
    dataField: 'quality',
    text: 'Product Quality',
    editorRenderer: (editorProps, value, row, rowIndex, columnIndex) => (
      <QualityRanger { ...editorProps } value={ value } />
    )
  }];
  
  <BootstrapTable
    keyField="id"
    data={ products }
    columns={ columns }
    cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
  />
  `;
  
  export default () => (
    <div>
      <h3>Custom Editor</h3>
      <BootstrapTable
        keyField="id"
        data={ products }
        columns={ columns }
        cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
      />
      <Code>{ sourceCode }</Code>
    </div>
  );
  