diff --git a/images/alberto.png b/images/alberto.png new file mode 100644 index 0000000..e35f976 Binary files /dev/null and b/images/alberto.png differ diff --git a/images/favicon.ico b/images/favicon.ico new file mode 100644 index 0000000..b338d73 Binary files /dev/null and b/images/favicon.ico differ diff --git a/images/fire.png b/images/fire.png new file mode 100644 index 0000000..2a81112 Binary files /dev/null and b/images/fire.png differ diff --git a/images/flags/ar.png b/images/flags/ar.png new file mode 100644 index 0000000..159e8fd Binary files /dev/null and b/images/flags/ar.png differ diff --git a/images/flags/br.png b/images/flags/br.png new file mode 100644 index 0000000..a549555 Binary files /dev/null and b/images/flags/br.png differ diff --git a/images/flags/co.png b/images/flags/co.png new file mode 100644 index 0000000..477177b Binary files /dev/null and b/images/flags/co.png differ diff --git a/images/flags/de.png b/images/flags/de.png new file mode 100644 index 0000000..2dbd9b0 Binary files /dev/null and b/images/flags/de.png differ diff --git a/images/flags/es.png b/images/flags/es.png new file mode 100644 index 0000000..4c31326 Binary files /dev/null and b/images/flags/es.png differ diff --git a/images/flags/fr.png b/images/flags/fr.png new file mode 100644 index 0000000..ac1412a Binary files /dev/null and b/images/flags/fr.png differ diff --git a/images/flags/gb.png b/images/flags/gb.png new file mode 100644 index 0000000..be5145b Binary files /dev/null and b/images/flags/gb.png differ diff --git a/images/flags/gr.png b/images/flags/gr.png new file mode 100644 index 0000000..f869622 Binary files /dev/null and b/images/flags/gr.png differ diff --git a/images/flags/ie.png b/images/flags/ie.png new file mode 100644 index 0000000..52e2ad4 Binary files /dev/null and b/images/flags/ie.png differ diff --git a/images/flags/is.png b/images/flags/is.png new file mode 100644 index 0000000..74c9e03 Binary files /dev/null and b/images/flags/is.png differ diff --git a/images/flags/it.png b/images/flags/it.png new file mode 100644 index 0000000..eb710fe Binary files /dev/null and b/images/flags/it.png differ diff --git a/images/flags/mt.png b/images/flags/mt.png new file mode 100644 index 0000000..aef8060 Binary files /dev/null and b/images/flags/mt.png differ diff --git a/images/flags/no.png b/images/flags/no.png new file mode 100644 index 0000000..e14f90f Binary files /dev/null and b/images/flags/no.png differ diff --git a/images/flags/pe.png b/images/flags/pe.png new file mode 100644 index 0000000..73e9465 Binary files /dev/null and b/images/flags/pe.png differ diff --git a/images/flags/pt.png b/images/flags/pt.png new file mode 100644 index 0000000..a532665 Binary files /dev/null and b/images/flags/pt.png differ diff --git a/images/flags/se.png b/images/flags/se.png new file mode 100644 index 0000000..9e12578 Binary files /dev/null and b/images/flags/se.png differ diff --git a/images/flags/uy.png b/images/flags/uy.png new file mode 100644 index 0000000..98057bd Binary files /dev/null and b/images/flags/uy.png differ diff --git a/images/flags/ve.png b/images/flags/ve.png new file mode 100644 index 0000000..a1aef2a Binary files /dev/null and b/images/flags/ve.png differ diff --git a/images/frost.png b/images/frost.png new file mode 100644 index 0000000..d4cdac7 Binary files /dev/null and b/images/frost.png differ diff --git a/images/horse.png b/images/horse.png new file mode 100644 index 0000000..660d861 Binary files /dev/null and b/images/horse.png differ diff --git a/images/niall.png b/images/niall.png new file mode 100644 index 0000000..7074010 Binary files /dev/null and b/images/niall.png differ diff --git a/images/phone.png b/images/phone.png new file mode 100644 index 0000000..fd2c11f Binary files /dev/null and b/images/phone.png differ diff --git a/images/sean.png b/images/sean.png new file mode 100644 index 0000000..ebae714 Binary files /dev/null and b/images/sean.png differ diff --git a/images/smiley-sad.png b/images/smiley-sad.png new file mode 100644 index 0000000..122f8ae Binary files /dev/null and b/images/smiley-sad.png differ diff --git a/images/smiley.png b/images/smiley.png new file mode 100644 index 0000000..b4e3290 Binary files /dev/null and b/images/smiley.png differ diff --git a/images/statue.png b/images/statue.png new file mode 100644 index 0000000..a95f57f Binary files /dev/null and b/images/statue.png differ diff --git a/images/sun.png b/images/sun.png new file mode 100644 index 0000000..ff082c8 Binary files /dev/null and b/images/sun.png differ diff --git a/src-trader-dashboard/components/TopMoversGrid.jsx b/src-trader-dashboard/components/TopMoversGrid.jsx index e77a1f2..eb7a5e5 100644 --- a/src-trader-dashboard/components/TopMoversGrid.jsx +++ b/src-trader-dashboard/components/TopMoversGrid.jsx @@ -32,50 +32,58 @@ class TopMoversGrid extends Component { headerName: '% NC', headerClass: 'align-right', cellRenderer: 'animateShowChange', - cellClass: 'align-right' + cellClass: 'align-right', + cellFormatter(params) { + return params.value.toFixed(2) + } }, ] }; // grid events this.onGridReady = this.onGridReady.bind(this); + this.getRowNodeId = this.getRowNodeId.bind(this); + } + + getRowNodeId(data) { + return data.symbol; } onGridReady(params) { this.gridApi = params.api; this.columnApi = params.columnApi; - if (this.props.rowData) { - this.gridApi.setRowData(this.props.rowData); - } + // if (this.props.rowData) { + // this.gridApi.setRowData(this.props.rowData); + // } this.gridApi.sizeColumnsToFit(); } - componentWillReceiveProps(nextProps) { - let newRowData = nextProps.rowData; - let model = this.gridApi.getModel(); - - // remove nodes not in new data set - let nodesToRemove = []; - for (let rowIndex = 0; rowIndex < model.getRowCount(); rowIndex++) { - let rowNode = model.getRow(rowIndex); - if (rowNode.data.symbol !== newRowData[rowIndex].symbol) { - nodesToRemove.push(rowNode); - } - } - this.gridApi.removeItems(nodesToRemove); - - // add new items in set - for (let rowIndex = 0; rowIndex < newRowData.length; rowIndex++) { - let model = this.gridApi.getModel(); - let rowNode = model.getRow(rowIndex); - - if (!rowNode || - rowNode.data.symbol !== newRowData[rowIndex].symbol) { - this.gridApi.insertItemsAtIndex(rowIndex, [newRowData[rowIndex]]) - } - } - } + // componentWillReceiveProps(nextProps) { + // let newRowData = nextProps.rowData; + // let model = this.gridApi.getModel(); + // + // // remove nodes not in new data set + // let nodesToRemove = []; + // for (let rowIndex = 0; rowIndex < model.getRowCount(); rowIndex++) { + // let rowNode = model.getRow(rowIndex); + // if (rowNode.data.symbol !== newRowData[rowIndex].symbol) { + // nodesToRemove.push(rowNode); + // } + // } + // this.gridApi.removeItems(nodesToRemove); + // + // // add new items in set + // for (let rowIndex = 0; rowIndex < newRowData.length; rowIndex++) { + // let model = this.gridApi.getModel(); + // let rowNode = model.getRow(rowIndex); + // + // if (!rowNode || + // rowNode.data.symbol !== newRowData[rowIndex].symbol) { + // this.gridApi.insertItemsAtIndex(rowIndex, [newRowData[rowIndex]]) + // } + // } + // } render() { return ( @@ -84,9 +92,12 @@ class TopMoversGrid extends Component { diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 0000000..c258b5d --- /dev/null +++ b/src/App.jsx @@ -0,0 +1,50 @@ +import React, {Component} from "react"; +import {Route, Switch, NavLink, Redirect} from "react-router-dom"; + +import NavItem from "./NavItem"; + +import DynamicComponentsExample from "./dynamicComponentExample/DynamicComponentsExample"; +import RichComponentsExample from "./richComponentExample/RichComponentsExample"; +import EditorComponentsExample from "./editorComponentExample/EditorComponentsExample"; + +const Header = () => ( +
+ +
+) + +class App extends Component { + render() { + return ( +
+
+ + + {/**/} + + + + {/**/} + {/**/} + {/**/} + {/**/} + {/**/} + {/**/} + +
+ ) + } +} + +export default App diff --git a/src/NavItem.jsx b/src/NavItem.jsx new file mode 100644 index 0000000..975c7aa --- /dev/null +++ b/src/NavItem.jsx @@ -0,0 +1,19 @@ +import React, {PropTypes} from 'react' +import {Route, Link} from 'react-router-dom' + +// for bootstrap li active functionality +export default function NavItem({children, to, exact}) { + return ( + ( +
  • + {children} +
    • + )}/> + ) +} + +NavItem.propTypes = { + to: PropTypes.string.isRequired, + exact: PropTypes.bool, + children: PropTypes.node.isRequired, +}; diff --git a/src/dynamicComponentExample/ChildMessageRenderer.jsx b/src/dynamicComponentExample/ChildMessageRenderer.jsx new file mode 100644 index 0000000..f359419 --- /dev/null +++ b/src/dynamicComponentExample/ChildMessageRenderer.jsx @@ -0,0 +1,19 @@ +import React, {Component} from "react"; + +export default class ChildMessageRenderer extends Component { + constructor(props) { + super(props); + + this.invokeParentMethod = this.invokeParentMethod.bind(this); + } + + invokeParentMethod() { + this.props.context.componentParent.methodFromParent(`Row: ${this.props.node.rowIndex}, Col: ${this.props.colDef.headerName}`) + } + + render() { + return ( + + ); + } +}; diff --git a/src/dynamicComponentExample/CubeRenderer.jsx b/src/dynamicComponentExample/CubeRenderer.jsx new file mode 100644 index 0000000..73cd4e6 --- /dev/null +++ b/src/dynamicComponentExample/CubeRenderer.jsx @@ -0,0 +1,21 @@ +import React, {Component} from "react"; + +export default class CubeRenderer extends Component { + constructor(props) { + super(props); + + this.state = { + value: this.valueSquared() + }; + } + + valueSquared() { + return this.props.value * this.props.value * this.props.value; + } + + render() { + return ( + {this.state.value} + ); + } +}; diff --git a/src/dynamicComponentExample/CurrencyRenderer.jsx b/src/dynamicComponentExample/CurrencyRenderer.jsx new file mode 100644 index 0000000..46cd9eb --- /dev/null +++ b/src/dynamicComponentExample/CurrencyRenderer.jsx @@ -0,0 +1,17 @@ +import React, {Component} from "react"; + +export default class CurrencyRenderer extends Component { + constructor(props) { + super(props); + } + + formatValueToCurrency(currency, value) { + return `${currency}${value}` + } + + render() { + return ( + {this.formatValueToCurrency('EUR', this.props.value)} + ); + } +}; diff --git a/src/dynamicComponentExample/DynamicComponentsExample.jsx b/src/dynamicComponentExample/DynamicComponentsExample.jsx new file mode 100644 index 0000000..ca53805 --- /dev/null +++ b/src/dynamicComponentExample/DynamicComponentsExample.jsx @@ -0,0 +1,123 @@ +import React, {Component} from "react"; + +import {AgGridReact} from "ag-grid-react"; +import SquareRenderer from "./SquareRenderer"; +import CubeRenderer from "./CubeRenderer"; +import ParamsRenderer from "./ParamsRenderer"; +import CurrencyRenderer from "./CurrencyRenderer"; +import ChildMessageRenderer from "./ChildMessageRenderer"; + +export default class DynamicComponentsExample extends Component { + constructor(props) { + super(props); + + this.state = { + gridOptions: { + context: { + componentParent: this + } + }, + + rowData: this.createRowData(), + + columnDefs: this.createColumnDefs() + }; + + this.onGridReady = this.onGridReady.bind(this); + this.refreshRowData = this.refreshRowData.bind(this); + } + + onGridReady(params) { + this.gridApi = params.api; + this.columnApi = params.columnApi; + + this.gridApi.sizeColumnsToFit(); + } + + onCellValueChanged($event) { + this.gridApi.refreshCells([$event.node],["cube"]); + } + + methodFromParent(cell) { + alert(`Parent Component Method from ${cell}!`); + } + + createColumnDefs() { + return [ + {headerName: "Row", field: "row", width: 100}, + { + headerName: "Square", + field: "value", + cellRendererFramework: SquareRenderer, + editable:true, + colId: "square", + width: 100 + }, + { + headerName: "Cube", + field: "value", + cellRendererFramework: CubeRenderer, + colId: "cube", + width: 100 + }, + { + headerName: "Row Params", + field: "row", + cellRendererFramework: ParamsRenderer, + colId: "params", + width: 215 + }, + { + headerName: "Currency", + field: "currency", + cellRendererFramework: CurrencyRenderer, + colId: "params", + width: 135 + }, + { + headerName: "Child/Parent", + field: "value", + cellRendererFramework: ChildMessageRenderer, + colId: "params", + width: 120 + } + ]; + } + + refreshRowData() { + let rowData = this.createRowData(); + this.gridApi.setRowData(rowData); + } + + createRowData() { + let rowData = []; + + for (let i = 0; i < 15; i++) { + rowData.push({ + row: "Row " + i, + value: i, + currency: 1 + Number(Math.random()).toFixed(2) + }); + } + + return rowData; + } + render() { + return ( +
    +

    Dynamic React Component Example

    + + + +
    + ); + } +}; diff --git a/src/dynamicComponentExample/ParamsRenderer.jsx b/src/dynamicComponentExample/ParamsRenderer.jsx new file mode 100644 index 0000000..752cbd9 --- /dev/null +++ b/src/dynamicComponentExample/ParamsRenderer.jsx @@ -0,0 +1,13 @@ +import React, {Component} from "react"; + +export default class ParamsRenderer extends Component { + constructor(props) { + super(props); + } + + render() { + return ( + Field: {this.props.colDef.field}, Value: {this.props.value} + ); + } +}; diff --git a/src/dynamicComponentExample/SquareRenderer.jsx b/src/dynamicComponentExample/SquareRenderer.jsx new file mode 100644 index 0000000..372eaa3 --- /dev/null +++ b/src/dynamicComponentExample/SquareRenderer.jsx @@ -0,0 +1,21 @@ +import React, {Component} from "react"; + +export default class SquareRenderer extends Component { + constructor(props) { + super(props); + + this.state = { + value: this.valueSquared() + }; + } + + valueSquared() { + return this.props.value * this.props.value; + } + + render() { + return ( + {this.state.value} + ); + } +}; diff --git a/src/editorComponentExample/EditorComponentsExample.jsx b/src/editorComponentExample/EditorComponentsExample.jsx new file mode 100644 index 0000000..4a1d382 --- /dev/null +++ b/src/editorComponentExample/EditorComponentsExample.jsx @@ -0,0 +1,82 @@ +import React, {Component} from "react"; + +import {AgGridReact} from "ag-grid-react"; +import MoodRenderer from "./MoodRenderer"; +import MoodEditor from "./MoodEditor"; +import NumericEditor from "./NumericEditor"; + +export default class EditorComponentsExample extends Component { + constructor(props) { + super(props); + + this.state = { + rowData: this.createRowData(), + columnDefs: this.createColumnDefs() + }; + + this.onGridReady = this.onGridReady.bind(this); + } + + onGridReady(params) { + this.gridApi = params.api; + this.columnApi = params.columnApi; + + this.gridApi.sizeColumnsToFit(); + } + + createColumnDefs() { + return [ + {headerName: "Name", field: "name", width: 300}, + { + headerName: "Mood", + field: "mood", + cellRendererFramework: MoodRenderer, + cellEditorFramework: MoodEditor, + editable: true, + width: 250 + }, + { + headerName: "Numeric", + field: "number", + cellEditorFramework: NumericEditor, + editable: true, + width: 250 + } + ]; + } + + createRowData() { + return [ + {name: "Bob", mood: "Happy", number: 10}, + {name: "Harry", mood: "Sad", number: 3}, + {name: "Sally", mood: "Happy", number: 20}, + {name: "Mary", mood: "Sad", number: 5}, + {name: "John", mood: "Happy", number: 15}, + {name: "Jack", mood: "Happy", number: 25}, + {name: "Sue", mood: "Sad", number: 43}, + {name: "Sean", mood: "Sad", number: 1335}, + {name: "Niall", mood: "Happy", number: 2}, + {name: "Alberto", mood: "Happy", number: 123}, + {name: "Fred", mood: "Sad", number: 532}, + {name: "Jenny", mood: "Happy", number: 34}, + {name: "Larry", mood: "Happy", number: 13}, + ]; + } + + render() { + return ( +
    +

    Cell Editor Component Example

    + + +
    + ); + } +}; diff --git a/src/editorComponentExample/MoodEditor.jsx b/src/editorComponentExample/MoodEditor.jsx new file mode 100644 index 0000000..85fbb9d --- /dev/null +++ b/src/editorComponentExample/MoodEditor.jsx @@ -0,0 +1,108 @@ +import React, {Component} from "react"; +import ReactDOM from "react-dom"; + +export default class MoodEditor extends Component { + constructor(props) { + super(props); + + this.onHappyClick = this.onHappyClick.bind(this); + this.onSadClick = this.onSadClick.bind(this); + this.onKeyDown = this.onKeyDown.bind(this); + + this.state = { + happy: false + } + } + + componentWillMount() { + this.setHappy(this.props.value === "Happy"); + } + + componentDidMount() { + this.focus(); + } + + componentDidUpdate() { + this.focus(); + } + + focus() { + setTimeout(() => { + let container = ReactDOM.findDOMNode(this.refs.container); + if (container) { + container.focus(); + } + }) + } + + getValue() { + return this.state.happy ? "Happy" : "Sad"; + } + + isPopup() { + return true; + } + + setHappy(happy) { + this.setState({ + happy + }); + } + + onHappyClick() { + this.setState({ + happy: true + }, + () => this.props.api.stopEditing() + ); + } + + onSadClick() { + this.setState({ + happy: false + }, + () => this.props.api.stopEditing() + ); + } + + toggleMood() { + this.setHappy(!this.state.happy); + } + + render() { + let mood = { + borderRadius: 15, + border: "1px solid grey", + background: "#e6e6e6", + padding: 15, + textAlign: "center", + display: "inline-block", + // outline: "none" + }; + + let unselected = { + paddingLleft: 10, + paddingRight: 10, + border: "1px solid transparent", + padding: 4 + }; + + let selected = { + paddingLeft: 10, + paddingRight: 10, + border: "1px solid lightgreen", + padding: 4 + }; + + let happyStyle = this.state.value === 'Happy' ? selected : unselected; + let sadStyle = this.state.value !== 'Happy' ? selected : unselected; + + return ( +
    + + +
    + ); + } +} \ No newline at end of file diff --git a/src/editorComponentExample/MoodRenderer.jsx b/src/editorComponentExample/MoodRenderer.jsx new file mode 100644 index 0000000..9e03c88 --- /dev/null +++ b/src/editorComponentExample/MoodRenderer.jsx @@ -0,0 +1,27 @@ +import React, {Component} from "react"; + +export default class MoodRenderer extends Component { + constructor(props) { + super(props); + } + + componentWillMount() { + this.setMood(this.props.value) + } + + refresh(params) { + this.setMood(params.value); + } + + setMood(mood) { + this.setState({ + imgForMood: mood === 'Happy' ? 'images/smiley.png' : 'images/smiley-sad.png' + }) + }; + + render() { + return ( + + ); + } +} diff --git a/src/editorComponentExample/NumericEditor.jsx b/src/editorComponentExample/NumericEditor.jsx new file mode 100644 index 0000000..0899b75 --- /dev/null +++ b/src/editorComponentExample/NumericEditor.jsx @@ -0,0 +1,83 @@ +import React, {Component} from "react"; +import ReactDOM from "react-dom"; + +export default class MoodEditor extends Component { + constructor(props) { + super(props); + + this.state = { + value: this.props.value + }; + + this.cancelBeforeStart = this.props.charPress && ('1234567890'.indexOf(this.props.charPress) < 0); + + this.onKeyDown = this.onKeyDown.bind(this); + this.handleChange = this.handleChange.bind(this); + } + + componentDidMount() { + this.focus(); + } + + componentDidUpdate() { + this.focus(); + } + + focus() { + setTimeout(() => { + let container = ReactDOM.findDOMNode(this.refs.input); + if (container) { + container.focus(); + } + }) + } + + getValue() { + return this.state.value; + } + + isCancelBeforeStart() { + return this.cancelBeforeStart; + } + + // will reject the number if it greater than 1,000,000 + // not very practical, but demonstrates the method. + isCancelAfterEnd() { + return this.state.value > 1000000; + }; + + onKeyDown(event) { + if (!this.isKeyPressedNumeric(event)) { + if (event.preventDefault) event.preventDefault(); + } + } + + handleChange(event) { + this.setState({value: event.target.value}); + } + + getCharCodeFromEvent(event) { + event = event || window.event; + return (typeof event.which === "undefined") ? event.keyCode : event.which; + } + + isCharNumeric(charStr) { + return !!/\d/.test(charStr); + } + + isKeyPressedNumeric(event) { + const charCode = this.getCharCodeFromEvent(event); + const charStr = event.key ? event.key : String.fromCharCode(charCode); + return this.isCharNumeric(charStr); + } + + render() { + return ( + + ); + } +} \ No newline at end of file diff --git a/src/images/alberto.png b/src/images/alberto.png new file mode 100644 index 0000000..e35f976 Binary files /dev/null and b/src/images/alberto.png differ diff --git a/src/images/favicon.ico b/src/images/favicon.ico new file mode 100644 index 0000000..b338d73 Binary files /dev/null and b/src/images/favicon.ico differ diff --git a/src/images/fire.png b/src/images/fire.png new file mode 100644 index 0000000..2a81112 Binary files /dev/null and b/src/images/fire.png differ diff --git a/src/images/flags/ar.png b/src/images/flags/ar.png new file mode 100644 index 0000000..159e8fd Binary files /dev/null and b/src/images/flags/ar.png differ diff --git a/src/images/flags/br.png b/src/images/flags/br.png new file mode 100644 index 0000000..a549555 Binary files /dev/null and b/src/images/flags/br.png differ diff --git a/src/images/flags/co.png b/src/images/flags/co.png new file mode 100644 index 0000000..477177b Binary files /dev/null and b/src/images/flags/co.png differ diff --git a/src/images/flags/de.png b/src/images/flags/de.png new file mode 100644 index 0000000..2dbd9b0 Binary files /dev/null and b/src/images/flags/de.png differ diff --git a/src/images/flags/es.png b/src/images/flags/es.png new file mode 100644 index 0000000..4c31326 Binary files /dev/null and b/src/images/flags/es.png differ diff --git a/src/images/flags/fr.png b/src/images/flags/fr.png new file mode 100644 index 0000000..ac1412a Binary files /dev/null and b/src/images/flags/fr.png differ diff --git a/src/images/flags/gb.png b/src/images/flags/gb.png new file mode 100644 index 0000000..be5145b Binary files /dev/null and b/src/images/flags/gb.png differ diff --git a/src/images/flags/gr.png b/src/images/flags/gr.png new file mode 100644 index 0000000..f869622 Binary files /dev/null and b/src/images/flags/gr.png differ diff --git a/src/images/flags/ie.png b/src/images/flags/ie.png new file mode 100644 index 0000000..52e2ad4 Binary files /dev/null and b/src/images/flags/ie.png differ diff --git a/src/images/flags/is.png b/src/images/flags/is.png new file mode 100644 index 0000000..74c9e03 Binary files /dev/null and b/src/images/flags/is.png differ diff --git a/src/images/flags/it.png b/src/images/flags/it.png new file mode 100644 index 0000000..eb710fe Binary files /dev/null and b/src/images/flags/it.png differ diff --git a/src/images/flags/mt.png b/src/images/flags/mt.png new file mode 100644 index 0000000..aef8060 Binary files /dev/null and b/src/images/flags/mt.png differ diff --git a/src/images/flags/no.png b/src/images/flags/no.png new file mode 100644 index 0000000..e14f90f Binary files /dev/null and b/src/images/flags/no.png differ diff --git a/src/images/flags/pe.png b/src/images/flags/pe.png new file mode 100644 index 0000000..73e9465 Binary files /dev/null and b/src/images/flags/pe.png differ diff --git a/src/images/flags/pt.png b/src/images/flags/pt.png new file mode 100644 index 0000000..a532665 Binary files /dev/null and b/src/images/flags/pt.png differ diff --git a/src/images/flags/se.png b/src/images/flags/se.png new file mode 100644 index 0000000..9e12578 Binary files /dev/null and b/src/images/flags/se.png differ diff --git a/src/images/flags/uy.png b/src/images/flags/uy.png new file mode 100644 index 0000000..98057bd Binary files /dev/null and b/src/images/flags/uy.png differ diff --git a/src/images/flags/ve.png b/src/images/flags/ve.png new file mode 100644 index 0000000..a1aef2a Binary files /dev/null and b/src/images/flags/ve.png differ diff --git a/src/images/frost.png b/src/images/frost.png new file mode 100644 index 0000000..d4cdac7 Binary files /dev/null and b/src/images/frost.png differ diff --git a/src/images/horse.png b/src/images/horse.png new file mode 100644 index 0000000..660d861 Binary files /dev/null and b/src/images/horse.png differ diff --git a/src/images/niall.png b/src/images/niall.png new file mode 100644 index 0000000..7074010 Binary files /dev/null and b/src/images/niall.png differ diff --git a/src/images/phone.png b/src/images/phone.png new file mode 100644 index 0000000..fd2c11f Binary files /dev/null and b/src/images/phone.png differ diff --git a/src/images/sean.png b/src/images/sean.png new file mode 100644 index 0000000..ebae714 Binary files /dev/null and b/src/images/sean.png differ diff --git a/src/images/skills/android.png b/src/images/skills/android.png new file mode 100644 index 0000000..bece8fd Binary files /dev/null and b/src/images/skills/android.png differ diff --git a/src/images/skills/css.png b/src/images/skills/css.png new file mode 100644 index 0000000..66c82c6 Binary files /dev/null and b/src/images/skills/css.png differ diff --git a/src/images/skills/html5.png b/src/images/skills/html5.png new file mode 100644 index 0000000..93c28c6 Binary files /dev/null and b/src/images/skills/html5.png differ diff --git a/src/images/skills/mac.png b/src/images/skills/mac.png new file mode 100644 index 0000000..d9b736b Binary files /dev/null and b/src/images/skills/mac.png differ diff --git a/src/images/skills/windows.png b/src/images/skills/windows.png new file mode 100644 index 0000000..e047fd9 Binary files /dev/null and b/src/images/skills/windows.png differ diff --git a/src/images/smiley-sad.png b/src/images/smiley-sad.png new file mode 100644 index 0000000..122f8ae Binary files /dev/null and b/src/images/smiley-sad.png differ diff --git a/src/images/smiley.png b/src/images/smiley.png new file mode 100644 index 0000000..b4e3290 Binary files /dev/null and b/src/images/smiley.png differ diff --git a/src/images/statue.png b/src/images/statue.png new file mode 100644 index 0000000..a95f57f Binary files /dev/null and b/src/images/statue.png differ diff --git a/src/images/sun.png b/src/images/sun.png new file mode 100644 index 0000000..ff082c8 Binary files /dev/null and b/src/images/sun.png differ diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..1f95a8c --- /dev/null +++ b/src/index.html @@ -0,0 +1,18 @@ + + + + + + + + + + + +
    + + \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..e235e50 --- /dev/null +++ b/src/index.js @@ -0,0 +1,21 @@ +'use strict'; + +import React from "react"; +import {render} from "react-dom"; +import {BrowserRouter} from "react-router-dom"; + +import "ag-grid-root/dist/styles/ag-grid.css"; +import "ag-grid-root/dist/styles/theme-fresh.css"; +import "../node_modules/bootstrap/dist/css/bootstrap.css"; + +import App from "./App"; + +document.addEventListener('DOMContentLoaded', () => { + render( + + + , + document.querySelector('#app') + ); +}); + diff --git a/src/richComponentExample/ClickableRenderer.jsx b/src/richComponentExample/ClickableRenderer.jsx new file mode 100644 index 0000000..baf6a46 --- /dev/null +++ b/src/richComponentExample/ClickableRenderer.jsx @@ -0,0 +1,26 @@ +import React, {Component} from "react"; + +export default class ClickableRenderer extends Component { + constructor(props) { + super(props); + + this.state = { + cell: { + row: this.props.value, + col: this.props.colDef.headerName + } + }; + + this.clicked = this.clicked.bind(this); + } + + clicked() { + console.log("Child Cell Clicked: " + JSON.stringify(this.state.cell)); + } + + render() { + return ( + + ); + } +} \ No newline at end of file diff --git a/src/richComponentExample/RatioRenderer.jsx b/src/richComponentExample/RatioRenderer.jsx new file mode 100644 index 0000000..3be8a7c --- /dev/null +++ b/src/richComponentExample/RatioRenderer.jsx @@ -0,0 +1,41 @@ +import React, {Component} from "react"; + +export default class RatioRenderer extends Component { + constructor(props) { + super(props); + } + + render() { + let agRatioStyle = { + display: "block", + overflow: "hidden", + border: "1px solid #ccc", + borderRadius: "6px", + background: "#fff", + height: 20 + }; + + let svg = { + width: "100%", + height: "100%", + pointerEvents: "none" + }; + + let topBar = { + fill: "#ff9933" + }; + + let bottomBar = { + fill: "#6699ff" + }; + + return ( + + + + + + + ); + } +} \ No newline at end of file diff --git a/src/richComponentExample/RichComponentsExample.jsx b/src/richComponentExample/RichComponentsExample.jsx new file mode 100644 index 0000000..6037dc1 --- /dev/null +++ b/src/richComponentExample/RichComponentsExample.jsx @@ -0,0 +1,78 @@ +import React, {Component} from "react"; + +import {AgGridReact} from "ag-grid-react"; +import RatioRenderer from "./RatioRenderer"; +import ClickableRenderer from "./ClickableRenderer"; + +export default class RichComponentsExample extends Component { + constructor(props) { + super(props); + + this.state = { + rowData: this.createRowData(), + columnDefs: this.createColumnDefs() + }; + + this.onGridReady = this.onGridReady.bind(this); + } + + onGridReady(params) { + this.gridApi = params.api; + this.columnApi = params.columnApi; + + this.gridApi.sizeColumnsToFit(); + } + + createColumnDefs() { + return [ + {headerName: "Name", field: "name", width: 200}, + { + headerName: "Ratio Component", + field: "ratios", + cellRendererFramework: RatioRenderer, + width: 350 + }, + { + headerName: "Clickable Component", + field: "name", + cellRendererFramework: ClickableRenderer, + width: 250 + } + ]; } + + createRowData() { + return [ + {name: 'Homer Simpson', ratios: {top: 0.25, bottom: 0.75}}, + {name: 'Marge Simpson', ratios: {top: 0.67, bottom: 0.39}}, + {name: 'Bart Simpson', ratios: {top: 0.82, bottom: 0.47}}, + {name: 'Lisa Simpson', ratios: {top: 0.39, bottom: 1}}, + {name: 'Barney', ratios: {top: 0.22, bottom: 0.78}}, + {name: 'Sideshow Bob', ratios: {top: 0.13, bottom: 0.87}}, + {name: 'Ned Flanders', ratios: {top: 0.49, bottom: 0.51}}, + {name: 'Milhouse', ratios: {top: 0.69, bottom: 0.31}}, + {name: 'Apu', ratios: {top: 0.89, bottom: 0.11}}, + {name: 'Moe', ratios: {top: 0.64, bottom: 0.36}}, + {name: 'Smithers', ratios: {top: 0.09, bottom: 0.91}}, + {name: 'Edna Krabappel', ratios: {top: 0.39, bottom: 0.61}}, + {name: 'Krusty', ratios: {top: 0.74, bottom: 0.26}} + ]; + } + + render() { + return ( +
    +

    Dynamic React Components - Richer Example

    + + +
    + ); + } +}; diff --git a/webpack.config.examples.js b/webpack.config.examples.js new file mode 100644 index 0000000..e03e279 --- /dev/null +++ b/webpack.config.examples.js @@ -0,0 +1,42 @@ +const path = require('path'); + +const SRC_DIR = path.resolve(__dirname, 'src'); + +module.exports = { + entry: SRC_DIR + "/index.js", + output: { + path: __dirname, + filename: "dist/bundle.js" + }, + module: { + loaders: [ + { + test: /\.css$/, + loader: "style!css" + }, + { + test: /\.js$|\.jsx$/, + include: SRC_DIR, + loader: 'babel-loader', + query: { + presets: ['react', 'es2015', 'stage-0'] + } + }, + { + test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, + loader: 'file?name=[path]/[name].[ext]' + } + ] + }, + resolve: { + alias: { + "ag-grid-root" : __dirname + "/node_modules/ag-grid" + }, + extensions: ['', '.js', '.jsx'] + }, + devServer: { + historyApiFallback: true, + contentBase: './', + hot: true + } +}; \ No newline at end of file