-
Notifications
You must be signed in to change notification settings - Fork 782
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
98 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
93 changes: 93 additions & 0 deletions
93
examples/js/custom/insert-modal/custom-insert-modal-field.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,93 @@ | ||
/* eslint max-len: 0 */ | ||
/* eslint no-unused-vars: 0 */ | ||
/* eslint no-alert: 0 */ | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; | ||
|
||
|
||
const products = []; | ||
const fruits = [ 'banana', 'apple', 'orange', 'tomato', 'strawberries' ]; | ||
function addProducts(quantity) { | ||
const startId = products.length; | ||
for (let i = 0; i < quantity; i++) { | ||
const id = startId + i; | ||
products.push({ | ||
id: id, | ||
name: fruits[i], | ||
sales: i % 2 ? 'Yes' : 'No', | ||
price: 100 + i | ||
}); | ||
} | ||
} | ||
|
||
addProducts(5); | ||
|
||
class SalesRadioField extends React.Component { | ||
|
||
getFieldValue = () => { | ||
return this.refs.yes.checked ? 'Yes' : 'No'; | ||
} | ||
|
||
render() { | ||
return ( | ||
<div> | ||
<label className='radio-inline'> | ||
<input ref='yes' type='radio' name='optradio' value='Yes'/>Yes | ||
</label> | ||
<label className='radio-inline'> | ||
<input ref='no' type='radio' name='optradio' value='No'/>No | ||
</label> | ||
</div> | ||
); | ||
} | ||
} | ||
|
||
export default class CustomInsertModalFieldTable extends React.Component { | ||
|
||
customKeyField = (column, attr, editorClass, ignoreEditable) => { | ||
const seqId = this.refs.table.state.data.length; | ||
return ( | ||
<input type='text' { ...attr } disabled value={ seqId } className={ `${editorClass}` }/> | ||
); | ||
} | ||
|
||
customNameField = (column, attr, editorClass, ignoreEditable) => { | ||
return ( | ||
<select className={ `${editorClass}` } { ...attr }> | ||
{ | ||
fruits.map(name => (<option key={ name } value={ name }>{ name }</option>)) | ||
} | ||
</select> | ||
); | ||
} | ||
|
||
customSaleField = (column, attr, editorClass, ignoreEditable) => { | ||
/* | ||
Sometime, your field is not only a HTML element, like radio, checkbox etc. | ||
In this case, you are suppose to be prodived a specific method name for | ||
react-bootstrap-table to get the value for this field. | ||
Notes: | ||
1. You are suppose to be added ref to your custom React class | ||
2. You are suppose to be implement getFieldValue function and return the value that user input | ||
*/ | ||
return ( | ||
<SalesRadioField ref={ attr.ref } editorClass={ editorClass } ignoreEditable={ ignoreEditable }/> | ||
); | ||
} | ||
|
||
render() { | ||
const options = { | ||
insertModalField: this.createCustomModalField | ||
}; | ||
return ( | ||
<BootstrapTable ref='table' data={ products } options={ options } insertRow> | ||
<TableHeaderColumn dataField='id' isKey={ true } customInsertEditor={ { getElement: this.customKeyField } }>Product ID</TableHeaderColumn> | ||
<TableHeaderColumn dataField='name' customInsertEditor={ { getElement: this.customNameField } }>Product Name</TableHeaderColumn> | ||
<TableHeaderColumn dataField='sales' customInsertEditor={ { getElement: this.customSaleField } }>On Sales?</TableHeaderColumn> | ||
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn> | ||
</BootstrapTable> | ||
); | ||
} | ||
} |