AG-2914 DOCS - Add docs around react hooks with editors.

This commit is contained in:
Sean Landsman
2019-09-23 14:29:21 +01:00
parent 5a26863aff
commit b9b2b03a6b
3 changed files with 25 additions and 3 deletions

View File

@@ -22,7 +22,7 @@ export default function GridComponent() {
columnDefs={columnDefs} columnDefs={columnDefs}
rowData={rowData} rowData={rowData}
reactNext={true} reactNext
// events // events
onGridReady={onGridReady}> onGridReady={onGridReady}>

View File

@@ -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 <input type="text" ref={inputRef} defaultValue={props.value}/>;
})

View File

@@ -1,15 +1,19 @@
import React from "react"; import React from "react";
import PriceRenderer from "./PriceRenderer"; import PriceRenderer from "./PriceRenderer";
import PriceEditor from "./PriceEditor";
export const initialState = { export const initialState = {
rowData: [], rowData: [],
columnDefs: [ columnDefs: [
{ {
field: 'symbol' field: 'symbol',
editable: true
}, },
{ {
field: 'price', field: 'price',
cellClass: 'align-right', cellClass: 'align-right',
editable: true,
cellEditorFramework: PriceEditor,
cellRendererFramework: PriceRenderer cellRendererFramework: PriceRenderer
} }
] ]