Updating Custom Cell Editing - matching interface of custom filters

- Need to pass in a factory method and custom properties
AllenFang · Jul 15, 2016 · b162b52 · b162b52
1 parent 97e8007
commit b162b52
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/examples/js/cell-edit/custom-cell-edit-table.js b/examples/js/cell-edit/custom-cell-edit-table.js
@@ -50,7 +50,6 @@ class PriceEditor extends React.Component {
       <span>
         <input
           ref='inputRef'
-          { ...this.props }
           className={ ( this.props.editorClass || '') + ' form-control editor edit-text' }
           style={ { display: 'inline', width: '50%' } }
           type='text'
@@ -122,6 +121,9 @@ function priceFormatter(cell, row) {
 
 const regionsFormatter = (cell, row) => (<span>{ (cell || []).join(',') }</span>);
 
+const createPriceEditor = (onUpdate, props) => (<PriceEditor onUpdate={ onUpdate } {...props}/>);
+const createRegionsEditor = (onUpdate, props) => (<RegionsEditor onUpdate={ onUpdate } {...props}/>);
+
 export default class CustomCellEditTable extends React.Component {
   render() {
     return (
@@ -131,13 +133,13 @@ export default class CustomCellEditTable extends React.Component {
           <TableHeaderColumn
             dataField='price'
             dataFormat={ priceFormatter }
-            customEditor={ PriceEditor }>
+            customEditor={ { getElement: createPriceEditor, customEditorParameters: { currencies: currencies } } }>
             Product Price
           </TableHeaderColumn>
           <TableHeaderColumn
             dataField='regions'
             dataFormat={ regionsFormatter }
-            customEditor={ RegionsEditor }>
+            customEditor={ { getElement: createRegionsEditor } }>
             Regions
           </TableHeaderColumn>
       </BootstrapTable>

diff --git a/src/TableEditColumn.js b/src/TableEditColumn.js
@@ -97,12 +97,18 @@ class TableEditColumn extends Component {
     editable.placeholder && (attr.placeholder = editable.placeholder);
 
     const editorClass = classSet({ 'animated': shakeEditor, 'shake': shakeEditor });
-    const CustomEditor = customEditor;
-    const cellEditor = CustomEditor ? <CustomEditor
-                                        {...attr}
-                                        defaultValue={ fieldValue || '' }
-                                        onUpdate={ this.handleCustomUpdate }/> :
-                                      editor(editable, attr, format, editorClass, fieldValue || '');
+    let cellEditor;
+    if (customEditor) {
+      const customEditorProps = {
+        ...attr,
+        defaultValue: fieldValue || '',
+        ...customEditor.customEditorParameters
+      };
+      cellEditor = customEditor.getElement(this.handleCustomUpdate, customEditorProps);
+    } else {
+      cellEditor = editor(editable, attr, format, editorClass, fieldValue || '');
+    }
+
     return (
       <td ref='td' style={ { position: 'relative' } }>
         { cellEditor }
@@ -130,6 +136,7 @@ TableEditColumn.propTypes = {
     PropTypes.string,
     PropTypes.bool,
     PropTypes.number,
+    PropTypes.array,
     PropTypes.object
   ])
 };