implement cell editor

Author: AllenFang

packages/react-bootstrap-table2/src/body.js

@@ -13,7 +13,8 @@ const Body = (props) => {
  keyField,
  isEmpty,
  noDataIndication,
- visibleColumnSize
+ visibleColumnSize,
+ cellEdit
  } = props;
 
  let content;
@@ -22,14 +23,20 @@ const Body = (props) => {
  const indication = _.isFunction(noDataIndication) ? noDataIndication() : noDataIndication;
  content = <RowSection content={ indication } colSpan={ visibleColumnSize } />;
  } else {
- content = data.map((row, index) => (
- <Row
- key={ _.get(row, keyField) }
- row={ row }
- rowIndex={ index }
- columns={ columns }
- />
- ));
+ content = data.map((row, index) => {
+ const key = _.get(row, keyField);
+ const editable = !(cellEdit && cellEdit.nonEditableRows.indexOf(key) > -1);
+ return (
+ <Row
+ key={ key }
+ row={ row }
+ rowIndex={ index }
+ columns={ columns }
+ cellEdit={ cellEdit }
+ editable={ editable }
+ />
+ );
+ });
  }
 
  return (

packages/react-bootstrap-table2/src/bootstrap-table.js

@@ -7,6 +7,8 @@ import Header from './header';
 import Body from './body';
 import Store from './store/base';
 import PropsBaseResolver from './props-resolver';
+import Const from './const';
+import _ from './utils';
 
 class BootstrapTable extends PropsBaseResolver(Component) {
  constructor(props) {
@@ -16,8 +18,15 @@ class BootstrapTable extends PropsBaseResolver(Component) {
  this.store = !store ? new Store(props) : store;
 
  this.handleSort = this.handleSort.bind(this);
+ this.startEditing = this.startEditing.bind(this);
+ this.escapeEditing = this.escapeEditing.bind(this);
+ this.completeEditing = this.completeEditing.bind(this);
  this.state = {
- data: this.store.get()
+ data: this.store.get(),
+ currEditCell: {
+ ridx: null,
+ cidx: null
+ }
  };
  }
 
@@ -39,6 +48,12 @@ class BootstrapTable extends PropsBaseResolver(Component) {
  'table-condensed': condensed
  });
 
+ const cellEditInfo = this.resolveCellEditProps({
+ onStart: this.startEditing,
+ onEscape: this.escapeEditing,
+ onComplete: this.completeEditing
+ });
+
  return (
  <div className="react-bootstrap-table-container">
  <table className={ tableClass }>
@@ -55,6 +70,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
  isEmpty={ this.isEmpty() }
  visibleColumnSize={ this.visibleColumnSize() }
  noDataIndication={ noDataIndication }
+ cellEdit={ cellEditInfo }
  />
  </table>
  </div>
@@ -70,6 +86,39 @@ class BootstrapTable extends PropsBaseResolver(Component) {
  };
  });
  }
+
+ completeEditing(row, column, newValue) {
+ const { cellEdit, keyField } = this.props;
+ const { beforeSaveCell, onEditing, afterSaveCell } = cellEdit;
+ const oldValue = _.get(row, column.dataField);
+ const rowId = _.get(row, keyField);
+ if (_.isFunction(beforeSaveCell)) beforeSaveCell(oldValue, newValue, row, column);
+ onEditing(rowId, column.dataField, newValue);
+ if (_.isFunction(afterSaveCell)) afterSaveCell(oldValue, newValue, row, column);
+
+ this.setState(() => {
+ return {
+ data: this.store.get(),
+ currEditCell: { ridx: null, cidx: null }
+ };
+ });
+ }
+
+ startEditing(ridx, cidx) {
+ this.setState(() => {
+ return {
+ currEditCell: { ridx, cidx }
+ };
+ });
+ }
+
+ escapeEditing() {
+ this.setState(() => {
+ return {
+ currEditCell: { ridx: null, cidx: null }
+ };
+ });
+ }
 }
 
 BootstrapTable.propTypes = {
@@ -81,7 +130,15 @@ BootstrapTable.propTypes = {
  striped: PropTypes.bool,
  bordered: PropTypes.bool,
  hover: PropTypes.bool,
- condensed: PropTypes.bool
+ condensed: PropTypes.bool,
+ cellEdit: PropTypes.shape({
+ mode: PropTypes.oneOf([Const.CLICK_TO_CELL_EDIT, Const.DBCLICK_TO_CELL_EDIT]).isRequired,
+ onEditing: PropTypes.func.isRequired,
+ blurToSave: PropTypes.bool,
+ beforeSaveCell: PropTypes.func,
+ afterSaveCell: PropTypes.func,
+ nonEditableRows: PropTypes.func
+ })
 };
 
 BootstrapTable.defaultProps = {

packages/react-bootstrap-table2/src/cell.js

@@ -1,63 +1,103 @@
-import React from 'react';
+/* eslint react/prop-types: 0 */
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
+import Const from './const';
 import _ from './utils';
 
-const Cell = ({ row, rowIndex, column, columnIndex }) => {
- const {
- dataField,
- hidden,
- formatter,
- formatExtraData,
- style,
- classes,
- title,
- events,
- align,
- attrs
- } = column;
- let cellTitle;
- let cellStyle = {};
- let content = _.get(row, dataField);
-
- const cellAttrs = {
- ..._.isFunction(attrs) ? attrs(content, row, rowIndex, columnIndex) : attrs,
- ...events
- };
-
- const cellClasses = _.isFunction(classes)
- ? classes(content, row, rowIndex, columnIndex)
- : classes;
-
- if (style) {
- cellStyle = _.isFunction(style) ? style(content, row, rowIndex, columnIndex) : style;
+class Cell extends Component {
+ constructor(props) {
+ super(props);
+ this.handleEditingCell = this.handleEditingCell.bind(this);
  }
 
- if (title) {
- cellTitle = _.isFunction(title) ? title(content, row, rowIndex, columnIndex) : content;
- cellAttrs.title = cellTitle;
+ handleEditingCell(e) {
+ const { editMode, column, onStart, rowIndex, columnIndex } = this.props;
+ const { events } = column;
+ if (events) {
+ if (editMode === Const.CLICK_TO_CELL_EDIT) {
+ const customClick = events.onClick;
+ if (_.isFunction(customClick)) customClick(e);
+ } else {
+ const customDbClick = events.onDoubleClick;
+ if (_.isFunction(customDbClick)) customDbClick(e);
+ }
+ }
+ onStart(rowIndex, columnIndex);
  }
 
- if (formatter) {
- content = column.formatter(content, row, rowIndex, formatExtraData);
- }
+ render() {
+ const {
+ row,
+ rowIndex,
+ column,
+ columnIndex,
+ editMode,
+ editable
+ } = this.props;
+ const {
+ dataField,
+ hidden,
+ formatter,
+ formatExtraData,
+ style,
+ classes,
+ title,
+ events,
+ align,
+ attrs
+ } = column;
+ let cellTitle;
+ let cellStyle = {};
+ let content = _.get(row, dataField);
 
- if (align) {
- cellStyle.textAlign = _.isFunction(align) ? align(content, row, rowIndex, columnIndex) : align;
- }
+ const cellAttrs = {
+ ..._.isFunction(attrs) ? attrs(content, row, rowIndex, columnIndex) : attrs,
+ ...events
+ };
 
- if (hidden) {
- cellStyle.display = 'none';
- }
+  const cellClasses = _.isFunction(classes)
+  ? classes(content, row, rowIndex, columnIndex)
+  : classes;
 
- if (cellClasses) cellAttrs.className = cellClasses;
+ if (style) {
+ cellStyle = _.isFunction(style) ? style(content, row, rowIndex, columnIndex) : style;
+ }
 
- if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
+ if (title) {
+ cellTitle = _.isFunction(title) ? title(content, row, rowIndex, columnIndex) : content;
+ cellAttrs.title = cellTitle;
+ }
 
- return (
- <td { ...cellAttrs }>{ content }</td>
- );
-};
+ if (formatter) {
+ content = column.formatter(content, row, rowIndex, formatExtraData);
+ }
+
+ if (align) {
+ cellStyle.textAlign =
+ _.isFunction(align) ? align(content, row, rowIndex, columnIndex) : align;
+ }
+
+ if (hidden) {
+ cellStyle.display = 'none';
+ }
+
+ if (cellClasses) cellAttrs.className = cellClasses;
+
+ if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
+
+ if (editable && editMode !== Const.UNABLE_TO_CELL_EDIT) {
+ if (editMode === Const.CLICK_TO_CELL_EDIT) { // click to edit
+ cellAttrs.onClick = this.handleEditingCell;
+ } else { // dbclick to edit
+ cellAttrs.onDoubleClick = this.handleEditingCell;
+ }
+ }
+ return (
+ <td { ...cellAttrs }>{ content }</td>
+ );
+ }
+}
 
 Cell.propTypes = {
  row: PropTypes.object.isRequired,

packages/react-bootstrap-table2/src/const.js

@@ -1,4 +1,7 @@
 export default {
  SORT_ASC: 'asc',
- SORT_DESC: 'desc'
+ SORT_DESC: 'desc',
+ UNABLE_TO_CELL_EDIT: 'none',
+ CLICK_TO_CELL_EDIT: 'click',
+ DBCLICK_TO_CELL_EDIT: 'dbclick'
 };

packages/react-bootstrap-table2/src/editing-cell.js

@@ -0,0 +1,66 @@
+/* eslint react/prop-types: 0 */
+/* eslint no-return-assign: 0 */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import _ from './utils';
+import TextEditor from './text-editor';
+
+class EditingCell extends Component {
+ constructor(props) {
+ super(props);
+ this.handleBlur = this.handleBlur.bind(this);
+ this.handleKeyDown = this.handleKeyDown.bind(this);
+ }
+
+ handleBlur() {
+ const { onEscape, onComplete, blurToSave, row, column } = this.props;
+ if (blurToSave) {
+ const value = this.editor.text.value;
+ if (!_.isDefined(value)) {
+ // TODO: for other custom or embed editor
+ }
+ onComplete(row, column, value);
+ } else {
+ onEscape();
+ }
+ }
+
+ handleKeyDown(e) {
+ const { onEscape, onComplete, row, column } = this.props;
+ if (e.keyCode === 27) { // ESC
+ onEscape();
+ } else if (e.keyCode === 13) { // ENTER
+ const value = e.currentTarget.value;
+ if (!_.isDefined(value)) {
+ // TODO: for other custom or embed editor
+ }
+ onComplete(row, column, value);
+ }
+ }
+
+ render() {
+ const { row, column } = this.props;
+ const { dataField } = column;
+
+ const value = _.get(row, dataField);
+ const editorAttrs = {
+ onKeyDown: this.handleKeyDown,
+ onBlur: this.handleBlur
+ };
+ return (
+ <td>
+ <TextEditor ref={ node => this.editor = node } defaultValue={ value } { ...editorAttrs } />
+ </td>
+ );
+ }
+}
+
+EditingCell.propTypes = {
+ row: PropTypes.object.isRequired,
+ column: PropTypes.object.isRequired,
+ onComplete: PropTypes.func.isRequired,
+ onEscape: PropTypes.func.isRequired
+};
+
+export default EditingCell;