React-data-grid: unable to make my hacky custom editor work, maybe allow creating custom editors?

[chadi-kazan]

maybe export EditorBase too, so we can use it to create custom cell editors, like for checkboxes and radio buttons... in fact maybe someone can help, i need to

implement the checkbox editor, i create the class by copying the methods from EditorBase and added some logic myself. here's what i have so far.

import ReactDataGrid from 'react-data-grid/addons';
import React from 'react';
import ReactDOM from 'react-dom';
import {HotKeys} from 'react-hotkeys';

const hotKeyMap = {space: 'space'};
export default class CheckBoxEditor extends ReactDataGrid.Editors.CheckboxEditor {
    constructor(props) {
        super(props);
        this.state = {value: props.value};
    }
    getStyle() {
        return {
            width: '100%'
        };
    }

  getValue() {
      let updated = {};
      updated[this.props.column.key] = this.getInputNode().checked;
      return updated;
  }

  getInputNode() {
      let domNode = ReactDOM.findDOMNode(this);
      if (domNode.tagName === 'INPUT') {
          return domNode;
      }

      return domNode.querySelector('input:not([type=hidden])');
  }

  inheritContainerStyles() {
      return false;
  }

    onClick() {
        this.getInputNode().focus();
    }

    onDoubleClick() {
        this.getInputNode().focus();
    }

    handleChange(e) {
        this.props.column.onCellChange(this.props.rowIdx, this.props.column.key, e.target.checked);
    }

    handleSpace() {
        this.setState({value: !this.state.value}, () => {
            this.props.column.onCellChange(this.props.rowIdx, this.props.column.key, this.state.value);
        });
    }

    componentWillReceiveProps(newProps) {
        this.setState({value: newProps.value});
    }

  render() {
      let checked = this.state.value || false;
      let checkboxName = `checkbox_${this.props.rowIdx}`;
      return (
        <HotKeys keyMap={hotKeyMap} handlers={{
            space: event => this.handleSpace(event)
        }}>
      <div className="react-grid-checkbox-container">
          <input className="react-grid-checkbox" type="checkbox" name={checkboxName} defaultChecked={checked} onChange={e => {

          }} />
          <label htmlFor={checkboxName} className="react-grid-checkbox-label"></label>
      </div></HotKeys>);
  }
}
CheckBoxEditor.propTypes = {
    value: React.PropTypes.bool,
    rowIdx: React.PropTypes.number,
    column: React.PropTypes.shape({
        key: React.PropTypes.string,
        onCellChange: React.PropTypes.func
    }),
    dependentValues: React.PropTypes.object
};

when i exit the cell's edit mode, i get the following error

Invalid prop value of type object supplied to CheckboxEditor, expected boolean. Check the render method of EditorContainer
it passes an object as value to my custom column formatter:

formatter: props => {
                    return <input type="checkbox" readOnly={true} disabled={true} defaultChecked={props.value} />;
                },

it looks like i am merging the newly set value with the row data right. how do i do that? i am calling onCellChange(see #above) but i am not quite sure it's the right way.

[chadi-kazan]

any news regarding custom editors?

[bhoomit]

@chadi-kazan https://github.com/adazzle/react-data-grid/blob/master/src/addons/editors/DateRangeEditor.js got it working without EditorBase.

I haven't looked at your code properly but see if this can help.

[diogofcunha]

Hi @chadi-kazan have you tried to use composition over inheritance?

Facebook recommends composition and not inheritance, that leave us with 2 options:

1. Use composition (since you are just making use of vanilla JS functions);
2. Use high order functions to render sub components. Awesome example and explanation about it in here.

Using inheritance doesn't seem the best approach to me as it is not recommended (and I'm not sure it works in the first place).

[chadi-kazan]

thanks @diogofcunha ,

yeah i did try it and managed to write some custom editors, this was an old question actually. i will close the issue

[emorling]

@chadi-kazan can you post a sample code of your custom editors?