diff --git a/src-examples/simpleReduxHooksExample/GridComponent.jsx b/src-examples/simpleReduxHooksExample/GridComponent.jsx index 4f924da..65715e0 100644 --- a/src-examples/simpleReduxHooksExample/GridComponent.jsx +++ b/src-examples/simpleReduxHooksExample/GridComponent.jsx @@ -1,4 +1,4 @@ -import React, { useContext } from "react"; +import React, {useContext} from "react"; import {Context} from "./store"; import {AgGridReact} from "ag-grid-react"; @@ -22,7 +22,7 @@ export default function GridComponent() { columnDefs={columnDefs} rowData={rowData} - reactNext={true} + reactNext // events onGridReady={onGridReady}> diff --git a/src-examples/simpleReduxHooksExample/PriceEditor.jsx b/src-examples/simpleReduxHooksExample/PriceEditor.jsx new file mode 100644 index 0000000..9a360ab --- /dev/null +++ b/src-examples/simpleReduxHooksExample/PriceEditor.jsx @@ -0,0 +1,18 @@ +import React, {useEffect, forwardRef, useImperativeHandle, useRef} from "react"; + +export default forwardRef((props, ref) => { + const inputRef = useRef(); + useImperativeHandle(ref, () => { + return { + getValue: () => { + return inputRef.current.value; + } + }; + }); + + useEffect(() => { + // https://github.com/facebook/react/issues/7835#issuecomment-395504863 + setTimeout(() => inputRef.current.focus(), 10) + }, []); + return ; +}) diff --git a/src-examples/simpleReduxHooksExample/store.js b/src-examples/simpleReduxHooksExample/store.js index da862a6..ff6288b 100644 --- a/src-examples/simpleReduxHooksExample/store.js +++ b/src-examples/simpleReduxHooksExample/store.js @@ -1,15 +1,19 @@ import React from "react"; import PriceRenderer from "./PriceRenderer"; +import PriceEditor from "./PriceEditor"; export const initialState = { rowData: [], columnDefs: [ { - field: 'symbol' + field: 'symbol', + editable: true }, { field: 'price', cellClass: 'align-right', + editable: true, + cellEditorFramework: PriceEditor, cellRendererFramework: PriceRenderer } ]