Я хочу использовать response-select в качестве пользовательского редактора ячеек для ag-grid
Вот ссылка на песочницу с кодом
Вы можете скачать исходный код здесь
npm install
npm start
Я удалил все CSS, чтобы он выглядел так просто, но он все еще выполняет свою работу.
Вот мой package.json
{
"name": "Test",
"version": "1.5.0",
"private": true,
"dependencies": {
"react": "16.8.1",
"react-dom": "16.8.1",
"react-select": "^2.4.1",
"react-scripts": "2.1.5",
"ag-grid-community": "20.1.0",
"ag-grid-react": "20.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"deploy": "npm run build",
"lint:check": "eslint . --ext=js,jsx; exit 0",
"lint:fix": "eslint . --ext=js,jsx --fix; exit 0",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
},
"optionalDependencies": {
"@types/googlemaps": "3.30.16",
"@types/markerclustererplus": "2.1.33",
"ajv": "6.9.1",
"prettier": "1.16.4"
},
"devDependencies": {
"eslint-config-prettier": "4.0.0",
"eslint-plugin-prettier": "3.0.1"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
index.js
import React from "react";
import ReactDOM from "react-dom";
import Grid from './app/AgGrid'
const colDefs = [
{
headerName : "Test",
field : "test",
editor : "manyToOne",
editable : true,
suppressKeyboardEvent : function suppressEnter(params) {
let KEY_ENTER = 13;
let KEY_LEFT = 37;
let KEY_UP = 38;
let KEY_RIGHT = 39;
let KEY_DOWN = 40;
var event = params.event;
var key = event.which;
var editingKeys = [KEY_LEFT, KEY_RIGHT, KEY_UP, KEY_DOWN, KEY_ENTER];
var suppress = params.editing && editingKeys.indexOf(key) >= 0;
console.log("suppress "+suppress);
return suppress;
},
cellEditor : "reactSelectCellEditor",
},
]
ReactDOM.render(
<Grid
readOnly={false}
field={null}
columnDefs={colDefs}
editable={true}
editingMode={null}
rowData={[]}
/>
,
document.getElementById("root")
);
AgGrid.js
import React, { Component } from 'react'
import { AgGridReact } from 'ag-grid-react'
import 'ag-grid-community/dist/styles/ag-grid.css'
import ReactSelectCellEditor from './ReactSelectCellEditor'
class Grid extends Component {
constructor(props) {
super(props);
this.state = {
columnDefs : props.columnDefs,
rowData : [],
isFormOpen : false,
editedData : {
data : [],
rowIndex : null,
columns : []
},
frameworkComponents:{
'reactSelectCellEditor': ReactSelectCellEditor,
},
}
}
updateRowData = (newData,index) => {
var unsavedData = this.state.rowData.map((row,i)=>{
if (i === index) {
return newData
}
else{
return row
}
})
this.setState({rowData:unsavedData})
}
onGridReady = params => {
}
createData = () => {
let fields = this.state.columnDefs.map(column=>{
return column.field
})
let newData = {}
fields.map(field=>{
if (field !== "id") {
newData[field] = ""
}
})
newData["delete"] = false
this.setState({rowData:[...this.state.rowData,newData]})
}
toggleModal = () => {
this.setState({isFormOpen:!this.state.isFormOpen})
}
setEditedData = (data) => {
console.log("editedData",data)
this.setState({editedData:data})
}
render() {
var defaultColDef = {
editable:this.state.editable,
sortable:false
}
var initColDefs = this.state.columnDefs.map(colDef=>{
return {
...colDef,
cellEditorParams:{
...colDef.cellEditorParams,
}
}
})
var renderedColumnDefs = []
if (this.props.editingMode === "inline") {
renderedColumnDefs = [
...initColDefs
]
}
else if (this.props.readOnly) {
renderedColumnDefs = [...initColDefs]
}
else{
defaultColDef = {
editable:false,
sortable:false
}
renderedColumnDefs = [
...initColDefs,
]
}
var renderedRowData = []
this.state.rowData.map(row=>{
if (row.delete !== true) {
renderedRowData.push(row)
}
})
return (
<React.Fragment>
<AgGridReact
defaultColDef = {defaultColDef}
columnDefs = {renderedColumnDefs}
rowData = {renderedRowData}
onGridReady = {this.onGridReady}
onCellValueChanged = {this.handleChange}
frameworkComponents = {this.state.frameworkComponents}
singleClickEdit = {true}
stopEditingWhenGridLosesFocus = {true}
reactNext={true}
/>
<div className="addButton" style={{padding:'5px', border: '1px solid black'}} onClick={()=>this.createData()}>Add</div>
</React.Fragment>
);
}
}
export default Grid
и ReactSelectCellEditor.js
import React, { Component } from 'react'
import CreatableSelect from "react-select/lib/Creatable"
import { components } from 'react-select'
import ReactDOM from 'react-dom'
const colourOptions = [
{ value: 'red', label: 'Red' },
{ value: 'blue', label: 'Blue' },
{ value: 'yellow', label: 'Yellow' }
]
class ReactSelectCellEditor extends Component {
constructor(props) {
super(props);
this.state = {
value : null
}
this.handleChange = this.handleChange.bind(this)
}
componentDidMount() {
}
handleCreateOption = (inputValue:any) => {
}
handleChange(selected){
this.setState({
value : selected.value
})
}
afterGuiAttached(param) {
let self = this;
this.Ref.addEventListener('keydown', function (event) {
// let key = event.which || event.keyCode
// if (key === 37 || key === 38 || key === 39 || key === 40 || key === 13) {
// event.stopPropagation();
// console.log("onKeyDown "+key);
// }
});
this.SelectRef.focus()
}
formatCreate = (inputValue) => {
return (<p> Add: {inputValue}</p>);
};
isPopup(){
return true
}
getValue() {
return this.state.value
}
render() {
return (
<div ref = { ref => { this.Ref = ref }} style={{width: '200px'}}>
<CreatableSelect
onChange = {this.handleChange}
options = {colourOptions}
formatCreateLabel = {this.formatCreate}
createOptionPosition = {"first"}
ref = { ref => { this.SelectRef = ref }}
/>
</div>
);
}
}
export default ReactSelectCellEditor
Как видите, простой голыйBone объединенная реализация между ag-grid и выскочил (не в ячейке) response-select.
Работает нормально, за исключением того, что событие навигационной клавиши по умолчанию ag-grid препятствует реагированию на выбор изработает безупречно.
Теперь я читал о решениях этого здесь, в документации по навигации по сетке при редактировании
Вот эта вещь:
Во-первых, я попробовал решение 1, которое заключается в том, чтобы остановить распространение событий моего пользовательского редактора ячеек.Это работает, но странно , хотя Я прекращаю всплывающее событие в контейнере реагирующего выбора, а не самого реагирующего выбора, как вы можете видеть из закомментированного скрипта в ReactSelectCellEditor.JS, как-то React Select Key Event также перестает выполняться.Я не знаю, почему реагирует на событие select, которое является дочерним элементом div, перестает выполняться, когда я прекращаю распространение события в родительском элементе.Разве событие не должно проходить от ребенка к родителю, а не наоборот?Таким образом, первое решение не имеет смысла.
Что касается второго решения, странным является само ag-grid.Как сказано в документации, ag-grid позволяет нам перехватывать ключевое событие, определяя функцию для suppressKeyboardEvent из определения столбца.Это работает, если режим редактирования не всплывающее окно.Но в моем случае я использую режим всплывающих окон, и в режиме всплывающих окон я нахожу, что suppressKeyboardEvent не запускается во время редактирования, он даже не вызывается вообще.
Теперь я 'м в тупике.В первом решении ответ-выбор ведет себя странно, а во втором - странно ведет себя ag-grid.Как мне решить эту проблему?
Дополнительная находка
После поиска в Интернете похоже, что React Select использует SyntheticKeyboardEvent, который, если я не ошибаюсь, выполняет ПОСЛЕ того, как события уже прошлипервый цикл захвата / барботирования по дереву DOM.Поэтому, если я остановлю распространение, SyntheticKeyboardEvent не будет запущено.Но если я не остановлю ag-grid распространения, который использует собственный приемник событий, запустит функцию навигации по умолчанию и уничтожит компонент реагировать на выбор.Теперь это для меня?Тупик?