Merge pull request #59 from fobbyal/support-raw-text-in-dropdown

Support raw text in drop-down-Editor with flag ( acceptRawText )
fobbyal · Jun 1, 2020 · 718bfd9 · 718bfd9
2 parents aa77f72 + 5462a23
commit 718bfd9
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 9 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/editEngine.js b/src/editEngine.js
@@ -25,8 +25,8 @@ export const batchRemove = ({ editInfo = generateInitialEditInfo(), rows }) => {
   const rowsToRemoveFromUpdated = []
   const rowsToAddInRemoved = []
 
-  let modifiedDirtyMap = dirtyMap
-  let modifiedUpdatedMap = updatedMap
+  let modifiedDirtyMap = new Map(dirtyMap)
+  let modifiedUpdatedMap = new Map(updatedMap)
   for (let i = 0; i < rows.length; i++) {
     const currentRow = rows[i]
     if (currentRow) {
@@ -106,8 +106,8 @@ export const batchUpdateRow = ({ editInfo = generateInitialEditInfo(), updates =
   const rowsToRemoveFromUpdated = []
   const rowsToAddInUpdated = []
 
-  let modifiedDirtyMap = dirtyMap
-  let modifiedUpdatedMap = updatedMap
+  let modifiedDirtyMap = new Map(dirtyMap)
+  let modifiedUpdatedMap = new Map(updatedMap)
   for (let i = 0; i < updates.length; i++) {
     if (updates[i]) {
       const { currentRow, editedRow } = updates[i]

diff --git a/src/flexRenderer.js b/src/flexRenderer.js
@@ -161,7 +161,15 @@ export const defaultCellRenderer = ({
   // hoverColor={hoverColor}
   // selectionColor={selectionColor}
   // color={color}
-  return <PureCell title={value + ''} width={width} height={height} display={display} {...rest} />
+  return (
+    <PureCell
+      title={rest.invalidMessage || value + ''}
+      width={width}
+      height={height}
+      display={display}
+      {...rest}
+    />
+  )
 }
 
 const defaultPagerRenderer = props => <DefaultPager {...props} />

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 }),