feat(DropdownCellEditor.js): - supporting raw text in dropdown editor…

… ( by passing acceptRawText )
fobbyal · May 30, 2020 · 5462a23 · 5462a23
1 parent ff586b6
commit 5462a23
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/src/CellEditContainer.js b/src/CellEditContainer.js
@@ -251,6 +251,7 @@ class CellEditContainer extends React.Component {
 
   getDropdownProps = ({ refKey = 'ref' }) => {
     const choices = this.props.header && this.props.header.choices
+    const acceptRawText = (this.props.header && this.props.header.acceptRawText) || false
     const virtualized = choices && choices.length > 10
     const onKeyDown = virtualized ? this.dropdownInputKeyDown : this.dropdownKeyDown
     return {
@@ -261,6 +262,8 @@ class CellEditContainer extends React.Component {
       onKeyDown,
       choices,
       virtualized,
+      acceptRawText,
+      valueChanged: this.valueChanged,
       'data-testid': 'cell-editing-element',
     }
   }

diff --git a/src/DropdownCellEditor/DropdownCellEditor.js b/src/DropdownCellEditor/DropdownCellEditor.js
@@ -162,8 +162,12 @@ class DropDownCellEditor extends React.Component {
 
   state = { showSelection: true, justOpened: true }
 
-  inputValueChanged = _value => {
+  inputValueChanged = value => {
     // console.log('value changed to ', value)
+    const { acceptRawText, valueChanged } = this.props
+    if (acceptRawText) {
+      valueChanged(value)
+    }
     this.setState({ justOpened: false })
   }
 
@@ -210,11 +214,11 @@ class DropDownCellEditor extends React.Component {
   )
 
   render() {
-    const { choices, value, onChange, virtualized, zIndex } = this.props
+    const { choices, value, onChange, virtualized, zIndex, acceptRawText } = this.props
     // eslint-disable-next-line standard/object-curly-even-spacing
     const { /* showSelection, */ justOpened } = this.state
     const renderList = virtualized ? renderVirtualizedList : renderBasicList
-    const renderSelector = virtualized ? this.renderInput : this.renderComboBox
+    const renderSelector = virtualized || acceptRawText ? this.renderInput : this.renderComboBox
 
     const selectedItem = R.find(c => value === c.value, choices)
     const hilightedIndex = R.findIndex(c => value === c.value, choices)

diff --git a/src/stories/data.js b/src/stories/data.js
@@ -55,7 +55,8 @@ const unitDataFormatter = ({ value }) => unitMap[value] || value
 /* prettier-ignore */
 export const headers = [
   dateCol({ ident: 'transDate', display: 'Trans-Date', width:120, isKey:true, }),
-  strCol({ ident: 'unitId', display: 'Unit', width:180, isKey:true, dataFormatter:unitDataFormatter,choices:unitChoices }),
+  strCol({ ident: 'unitId', display: 'Unit', width:180, isKey:true, dataFormatter:unitDataFormatter,choices:unitChoices
+   , acceptRawText : true , setInvalidMessage : ({value}) => !unitMap[value] && value !== 'prakash' && 'Please Enter Valid Data.' }),
   intCol({ ident: 'he', display: 'HE', width: 40,isKey:true, numFormat:"0", }),
   strCol({ ident: 'fixedGen', display: 'Fixed Gen' , ellipsis : true }),
   numCol({ ident: 'emerMinOvr', display: 'Emer Min', width:120, alignment:'right', displayFormat: null }),