diff --git a/src-examples/App.jsx b/src-examples/App.jsx index c6cc744..9c15645 100644 --- a/src-examples/App.jsx +++ b/src-examples/App.jsx @@ -5,12 +5,14 @@ import NavItem from "./NavItem"; import RichGridDeclarativeExample from "./richGridDeclarativeExample/RichGridDeclarativeExample"; import SimpleReduxDynamicExample from "./simpleReduxDynamicComponentExample/SimpleReduxExample"; +import SimpleReduxHookExample from "./simpleReduxHooksExample/SimpleReduxHookExample"; const SideBar = () => (
); @@ -25,6 +27,7 @@ class App extends Component { + diff --git a/src-examples/simpleReduxHooksExample/GridComponent.jsx b/src-examples/simpleReduxHooksExample/GridComponent.jsx new file mode 100644 index 0000000..4f924da --- /dev/null +++ b/src-examples/simpleReduxHooksExample/GridComponent.jsx @@ -0,0 +1,32 @@ +import React, { useContext } from "react"; +import {Context} from "./store"; +import {AgGridReact} from "ag-grid-react"; + +/* + * This component serves to display the row data (provided by redux) + */ +export default function GridComponent() { + const {store, dispatch} = useContext(Context); + const {columnDefs, rowData} = store; + + const onGridReady = (params) => { + params.api.sizeColumnsToFit(); + }; + + // row data will be provided via redux on this.props.rowData + return ( +
+ + +
+ ) +} diff --git a/src-examples/simpleReduxHooksExample/PriceRenderer.jsx b/src-examples/simpleReduxHooksExample/PriceRenderer.jsx new file mode 100644 index 0000000..8e60e1c --- /dev/null +++ b/src-examples/simpleReduxHooksExample/PriceRenderer.jsx @@ -0,0 +1,13 @@ +import React, {Component} from "react"; + +export default class PriceRenderer extends Component { + constructor(props) { + super(props); + } + + render() { + return ( + {this.props.value} + ); + } +} diff --git a/src-examples/simpleReduxHooksExample/SimpleReduxHookExample.jsx b/src-examples/simpleReduxHooksExample/SimpleReduxHookExample.jsx new file mode 100644 index 0000000..45d157d --- /dev/null +++ b/src-examples/simpleReduxHooksExample/SimpleReduxHookExample.jsx @@ -0,0 +1,18 @@ +import React, {useReducer} from "react"; +import GridComponent from "./GridComponent"; + +import {Context, initialState, reducer} from "./store"; + +export default function SimpleReduxHookExample() { + const [store, dispatch] = useReducer(reducer, initialState); + + return ( + +
+

Simple Example using Hooks (with useContext and useReducer)

+ + +
+
+ ) +} diff --git a/src-examples/simpleReduxHooksExample/gridDataActions.jsx b/src-examples/simpleReduxHooksExample/gridDataActions.jsx new file mode 100644 index 0000000..c955838 --- /dev/null +++ b/src-examples/simpleReduxHooksExample/gridDataActions.jsx @@ -0,0 +1,14 @@ +export function updateRowData(rowData) { + return { + type: 'ROW_DATA_CHANGED', + rowData + } +} + +export function setCurrency(currencySymbol, exchangeRate) { + return { + type: 'CURRENCY_CHANGED', + currencySymbol, + exchangeRate + } +} \ No newline at end of file diff --git a/src-examples/simpleReduxHooksExample/store.js b/src-examples/simpleReduxHooksExample/store.js new file mode 100644 index 0000000..da862a6 --- /dev/null +++ b/src-examples/simpleReduxHooksExample/store.js @@ -0,0 +1,75 @@ +import React from "react"; +import PriceRenderer from "./PriceRenderer"; + +export const initialState = { + rowData: [], + columnDefs: [ + { + field: 'symbol' + }, + { + field: 'price', + cellClass: 'align-right', + cellRendererFramework: PriceRenderer + } + ] +}; + +export const reducer = (state = {rowData: []}, action) => { + switch (action.type) { + case 'SET_ROW_DATA': + return { + ...state, + rowData: createRowData() + }; + default: + return state; + } +}; + +export const Context = React.createContext(); + + +// for test data +// the following methods are for creating dummy row data +const createRowData = () => { + let rowData = []; + + for (let i = 0; i < 14; i++) { + let newItem = createItem(rowData); + rowData.push(newItem); + } + + return rowData; +}; + +const createItem = (rowData) => { + return { + symbol: createUniqueRandomSymbol(rowData), + price: Math.floor(Math.random() * 100) + }; +}; + +// creates a unique symbol, eg 'ADG' or 'ZJD' +const createUniqueRandomSymbol = (rowData) => { + let symbol; + let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; + + let isUnique = false; + while (!isUnique) { + symbol = ''; + // create symbol + for (let i = 0; i < 3; i++) { + symbol += possible.charAt(Math.floor(Math.random() * possible.length)); + } + // check uniqueness + isUnique = true; + rowData.forEach(function (oldItem) { + if (oldItem.symbol === symbol) { + isUnique = false; + } + }); + } + + return symbol; +};