diff --git a/README.md b/README.md index 4ff7457..79f7b5d 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Ignite UI Components for React [![Build Status](https://travis-ci.org/IgniteUI/igniteui-react.svg?branch=master)](https://travis-ci.org/IgniteUI/igniteui-react?branch=master) -[![Coverage Status](https://coveralls.io/repos/github/IgniteUI/igniteui-react/badge.svg?branch=master)](https://coveralls.io/github/IgniteUI/igniteui-react?branch=master) +[![Coverage Status](https://coveralls.io/repos/github/IgniteUI/igniteui-react/badge.svg?branch=master)](https://coveralls.io/github/IgniteUI/igniteui-react?branch=master) [![npm version](https://badge.fury.io/js/igniteui-react.svg)](https://badge.fury.io/js/igniteui-react) Use the declarations available in `igniteui-react.js` (or `igniteui-react.min.js`) to use [Ignite UI](http://igniteui.com) controls as [React](https://facebook.github.io/react/) components. [Work with the running samples here](https://igniteui.github.io/igniteui-react/). @@ -72,7 +72,7 @@ Optionally include `browser.js` found in the `Babel-core` package for [JSX](http This provides all supported Ignite UI components as React classes available in the global namespace. ## Initializing controls -In general React components can be initialized in two ways: +In general React components can be initialized in two ways: 1. In `JavaScript` using React's API. 2. With pseudo-markup by utilizing `JSX` syntax. @@ -114,7 +114,7 @@ Defining complex type control options (`arrays` & `objects`) in `JSX` is done by #### Example: - - - - - - Basic ReactJS Sample/POC - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

igChart

- -
-
- TRY IT OUT: -
-
    -
  • Select a month and edit its revenue and expenses
    • -
  • Change month's revenue or expenses, using the editors or using the linear gauge
    • -
  • All the related components' data is changed and new overall year profit is calculated
    • -
-
-
-

This sample demonstrates how ReactJS can be used to create igChart, igCombo, igLinearGauge together with several different types of igEditors and how a communication between them can be implemented.

-

View Source

-
-
-
-
-
- -
-
- - - \ No newline at end of file diff --git a/samples/dashboard/dashboard.html b/samples/dashboard/dashboard.html deleted file mode 100644 index 9f8b099..0000000 --- a/samples/dashboard/dashboard.html +++ /dev/null @@ -1,349 +0,0 @@ - - - - - - IgniteUI ReactJS Dashboard - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Dashboard using igGrid and igDataChart

- -
-
- TRY IT OUT: -
-
    -
  • Select a row that you would like to edit
    • -
  • Change the Revenue or the Expenses of the selected person by using the editors.
    • -
  • Observe how the grid and the chart values are changing.
    • -
-
-
-

This sample demonstrates how to reflect every change in the igGrid data source on the igDataChart by using - ReactJS.

-

View Source

-
-
- -
-
- - -
-
-
- - - - \ No newline at end of file diff --git a/samples/ig-dashboard/package.json b/samples/ig-dashboard/package.json new file mode 100644 index 0000000..a7422fe --- /dev/null +++ b/samples/ig-dashboard/package.json @@ -0,0 +1,22 @@ +{ + "name": "ig-dashboard", + "version": "1.0.0", + "private": true, + "dependencies": { + "@infragistics/ignite-ui-full": "^17.2.456", + "babel-runtime": "6.22.0", + "bootstrap": "^3.3.7", + "igniteui-react": "^1.1.0", + "jquery": ">=1.9.1", + "jquery-ui": ">=1.10.5", + "react": "15.4.2", + "react-dom": "15.4.2", + "react-scripts": "1.0.17" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} diff --git a/samples/ig-dashboard/public/favicon.ico b/samples/ig-dashboard/public/favicon.ico new file mode 100644 index 0000000..e167dc9 Binary files /dev/null and b/samples/ig-dashboard/public/favicon.ico differ diff --git a/samples/ig-dashboard/public/index.html b/samples/ig-dashboard/public/index.html new file mode 100644 index 0000000..fbbda1e --- /dev/null +++ b/samples/ig-dashboard/public/index.html @@ -0,0 +1,40 @@ + + + + + + + + + + + IgniteUI ReactJS Dashboard + + + +
+ + + diff --git a/samples/ig-dashboard/public/manifest.json b/samples/ig-dashboard/public/manifest.json new file mode 100644 index 0000000..ef19ec2 --- /dev/null +++ b/samples/ig-dashboard/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + } + ], + "start_url": "./index.html", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/samples/ig-dashboard/src/App.js b/samples/ig-dashboard/src/App.js new file mode 100644 index 0000000..03688fd --- /dev/null +++ b/samples/ig-dashboard/src/App.js @@ -0,0 +1,68 @@ +import React, { Component } from 'react'; +import MainComponent from './components/MainComponent.js'; + +import "bootstrap/dist/css/bootstrap.min.css"; + +var App = React.createClass({ + render: function () { + return ( +
+
+
+
+ + Ignite UI ReactJS Component +
+ +
+
+ +
+

Dashboard using igGrid and igDataChart

+ +
+
+ TRY IT OUT: +
+
    +
  • Select a row that you would like to edit
    • +
  • Change the Revenue or the Expenses of the selected person by using the editors.
    • +
  • Observe how the grid and the chart values are changing.
    • +
+
+
+

This sample demonstrates how to reflect every change in the igGrid data source on the igDataChart by using ReactJS.

+

View Source

+
+
+ + +
+ + + +
+ ); + } +}); + +export default App; diff --git a/samples/ig-dashboard/src/components/IgEditBox.js b/samples/ig-dashboard/src/components/IgEditBox.js new file mode 100644 index 0000000..bdfb3e8 --- /dev/null +++ b/samples/ig-dashboard/src/components/IgEditBox.js @@ -0,0 +1,62 @@ +import React, { Component } from 'react'; +import IgNumericEditor from 'igniteui-react/ui/igNumericEditor.js'; +import IgButton from 'igniteui-react/ui/igButton.js'; + +// Ignite UI Required Combined JavaScript Files +import "@infragistics/ignite-ui-full/en/js/infragistics.core.js"; +import "@infragistics/ignite-ui-full/en/js/infragistics.lob.js"; + +var IgEditBox = React.createClass({ + render: function () { + var rowId = this.props.rowId, + v = rowId > -1; + return ( +
+

Change values in row with ID {this.props.rowId}:

+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+
+ +
+
+
+
+
+ ); + }, + handleButtonUpdateClick: function (e) { + var func = this.props.btnUpdateClicked; + + if (func) { + func(e, + this.props.rowId, + this.refs.editorRevenue.igControl.value(), + this.refs.editorExpenses.igControl.value()); + } + } +}); + +export default IgEditBox; \ No newline at end of file diff --git a/samples/ig-dashboard/src/components/MainComponent.js b/samples/ig-dashboard/src/components/MainComponent.js new file mode 100644 index 0000000..695842b --- /dev/null +++ b/samples/ig-dashboard/src/components/MainComponent.js @@ -0,0 +1,196 @@ +import React, { Component } from 'react'; +import IgGrid from 'igniteui-react/ui/igGrid.js'; +import IgDataChart from 'igniteui-react/ui/igDataChart.js'; +import IgEditBox from './IgEditBox.js'; + +// Ignite UI Required Combined JavaScript Files +import "@infragistics/ignite-ui-full/en/js/infragistics.core.js"; +import "@infragistics/ignite-ui-full/en/js/infragistics.lob.js"; +import "@infragistics/ignite-ui-full/en/js/infragistics.dv.js"; + +// CSS files +import "@infragistics/ignite-ui-full/en/css/structure/infragistics.css"; +import "@infragistics/ignite-ui-full/en/css/themes/infragistics/infragistics.theme.css"; +import '../sample.css'; + +var MainComponent = React.createClass({ + getInitialState: function () { + return { + // the view is the grid and the chart data source in this case + view: this.getSourceData(), + selectedRowId: -1, + revenueValue: null, + expensesValue: null, + selectedRowIndex: -1 + } + }, + render: function(){ + return ( +
+
+
+ +
+
+
+ +
+
+ +
+
+ ); + }, + /* helper functions */ + getGridInstance: function (gridRefName) { + gridRefName = gridRefName || "grid1"; + return (this.refs[gridRefName] || {}).igControl; + }, + getChartInstance: function (chartRefName) { + chartRefName = chartRefName || "chart1"; + return (this.refs[chartRefName] || {}).igControl; + }, + getGridUpdating: function (gridRefName) { + var grid = this.getGridInstance(gridRefName); + if (!grid || !grid.element) { + return null; + } + return grid.element.data("igGridUpdating"); + }, + getExpensesByRowId: function (rowId) { + var grid = this.getGridInstance(), + expenses, record; + if (rowId > -1 && grid) { + record = grid.dataSource.findRecordByKey(rowId) || {}; + expenses = record["Expenses"]; + } + return expenses; + }, + getRevenueByRowId: function (rowId) { + var grid = this.getGridInstance(), + revenue, record; + if (rowId > -1 && grid) { + record = grid.dataSource.findRecordByKey(rowId) || {}; + revenue = record["Revenue"]; + } + return revenue; + }, + editBoxHandleUpdate: function (e, rowId, val1, val2) { + var grid = this.getGridInstance(), + upd, ds = this.state.view, index = this.state.selectedRowIndex; + ds.PersonalFinance[ index ].Revenue = parseInt(val1); + ds.PersonalFinance[ index ].Expenses = parseInt(val2); + + if (grid && rowId > -1) { + upd = this.getGridUpdating(); + if (upd) { + upd.updateRow( + rowId, + { + "Expenses": val2, + "Revenue" : val1 + }); + } + } + this.editoBoxChartHandleUpdate(); + }, + editoBoxChartHandleUpdate: function(){ + var chartRef = this.getChartInstance(), + index = this.state.selectedRowIndex, + ds = this.state.view.PersonalFinance, + item = ds[ index ]; + + this.refs.chart1.igControl.notifySetItem(ds, index, item,item); + + }, + gridRowSelectionChanged: function (evt, ui) { + var rowId = ui.row.id; + this.setState({ selectedRowId: rowId, + expensesValue: this.getExpensesByRowId(rowId) , + revenueValue: this.getRevenueByRowId(rowId) , + selectedRowIndex: ui.row.index + }); + }, + getSourceData: function() { + var sourceData = { + "PersonalFinance": [ + { "Id": "1", "Name":"Antony", "Revenue":650, "Expenses": 300, "Date":"10/20/2016" }, + { "Id": "2", "Name":"Brick", "Revenue":1155, "Expenses": 800, "Date":"10/21/2016" }, + { "Id": "3", "Name":"Mike", "Revenue":550, "Expenses": 400, "Date":"10/25/2016" }, + { "Id": "4", "Name":"Anna", "Revenue":1050, "Expenses": 300, "Date":"10/10/2016" }, + { "Id": "5", "Name":"Oleg", "Revenue":750, "Expenses": 400, "Date":"10/20/2016" }, + { "Id": "6", "Name":"Sonya", "Revenue":950, "Expenses": 600, "Date":"10/10/2016" } + ] + } + return sourceData; + } +}); + +export default MainComponent; \ No newline at end of file diff --git a/samples/ig-dashboard/src/index.js b/samples/ig-dashboard/src/index.js new file mode 100644 index 0000000..917d651 --- /dev/null +++ b/samples/ig-dashboard/src/index.js @@ -0,0 +1,7 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; +import registerServiceWorker from './registerServiceWorker'; + +ReactDOM.render(, document.getElementById('root')); +registerServiceWorker(); diff --git a/samples/ig-dashboard/src/registerServiceWorker.js b/samples/ig-dashboard/src/registerServiceWorker.js new file mode 100644 index 0000000..a3e6c0c --- /dev/null +++ b/samples/ig-dashboard/src/registerServiceWorker.js @@ -0,0 +1,117 @@ +// In production, we register a service worker to serve assets from local cache. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on the "N+1" visit to a page, since previously +// cached resources are updated in the background. + +// To learn more about the benefits of this model, read https://goo.gl/KwvDNy. +// This link also includes instructions on opting out of this behavior. + +const isLocalhost = Boolean( + window.location.hostname === 'localhost' || + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.1/8 is considered localhost for IPv4. + window.location.hostname.match( + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ + ) +); + +export default function register() { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL(process.env.PUBLIC_URL, window.location); + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 + return; + } + + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + + if (isLocalhost) { + // This is running on localhost. Lets check if a service worker still exists or not. + checkValidServiceWorker(swUrl); + + // Add some additional logging to localhost, pointing developers to the + // service worker/PWA documentation. + navigator.serviceWorker.ready.then(() => { + console.log( + 'This web app is being served cache-first by a service ' + + 'worker. To learn more, visit https://goo.gl/SC7cgQ' + ); + }); + } else { + // Is not local host. Just register service worker + registerValidSW(swUrl); + } + }); + } +} + +function registerValidSW(swUrl) { + navigator.serviceWorker + .register(swUrl) + .then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the old content will have been purged and + // the fresh content will have been added to the cache. + // It's the perfect time to display a "New content is + // available; please refresh." message in your web app. + console.log('New content is available; please refresh.'); + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); + } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); +} + +function checkValidServiceWorker(swUrl) { + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl) + .then(response => { + // Ensure service worker exists, and that we really are getting a JS file. + if ( + response.status === 404 || + response.headers.get('content-type').indexOf('javascript') === -1 + ) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then(registration => { + registration.unregister().then(() => { + window.location.reload(); + }); + }); + } else { + // Service worker found. Proceed as normal. + registerValidSW(swUrl); + } + }) + .catch(() => { + console.log( + 'No internet connection found. App is running in offline mode.' + ); + }); +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready.then(registration => { + registration.unregister(); + }); + } +} diff --git a/samples/ig-dashboard/src/sample.css b/samples/ig-dashboard/src/sample.css new file mode 100644 index 0000000..03ee0c2 --- /dev/null +++ b/samples/ig-dashboard/src/sample.css @@ -0,0 +1,49 @@ +.push-down { + margin-top:4em; +} + +.push-down-md { + margin-top:2em; +} + +.push-down-xs { + margin-top:1em; +} + +footer { + border-top:1px solid #ccc; + background-color:#ddd; + padding:50px; + margin-top:25px; + color:#999; +} + +.description { + border-bottom: 1px solid #eee; + margin-bottom: 15px; + margin-top: 15px; +} + +.try-it-out hr { + margin: 0px; + margin-top: 4px; +} + + +.try-it-out ul li{ + margin-top: 8px; + margin-bottom: 8px; +} + +.ui-state-hover, +.ui-widget-content .ui-state-hover { + color: #070707; +} + +.ui-widget-content { + border: none; +} + +.header { + color: #337ab7; +} \ No newline at end of file diff --git a/samples/ig-editors/package.json b/samples/ig-editors/package.json new file mode 100644 index 0000000..82c6470 --- /dev/null +++ b/samples/ig-editors/package.json @@ -0,0 +1,22 @@ +{ + "name": "ig-editors", + "version": "1.0.0", + "private": true, + "dependencies": { + "@infragistics/ignite-ui-full": "^17.2.456", + "babel-runtime": "6.22.0", + "bootstrap": "^3.3.7", + "igniteui-react": "^1.1.0", + "jquery": ">=1.9.1", + "jquery-ui": ">=1.10.5", + "react": "15.4.2", + "react-dom": "15.4.2", + "react-scripts": "1.0.17" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} \ No newline at end of file diff --git a/samples/ig-editors/public/favicon.ico b/samples/ig-editors/public/favicon.ico new file mode 100644 index 0000000..e167dc9 Binary files /dev/null and b/samples/ig-editors/public/favicon.ico differ diff --git a/samples/ig-editors/public/index.html b/samples/ig-editors/public/index.html new file mode 100644 index 0000000..ed057f3 --- /dev/null +++ b/samples/ig-editors/public/index.html @@ -0,0 +1,40 @@ + + + + + + + + + + + IgniteUI ReactJS Editors + + + +
+ + + diff --git a/samples/ig-editors/public/manifest.json b/samples/ig-editors/public/manifest.json new file mode 100644 index 0000000..ef19ec2 --- /dev/null +++ b/samples/ig-editors/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + } + ], + "start_url": "./index.html", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/samples/ig-editors/src/App.js b/samples/ig-editors/src/App.js new file mode 100644 index 0000000..89d582e --- /dev/null +++ b/samples/ig-editors/src/App.js @@ -0,0 +1,66 @@ +import React, { Component } from 'react'; +import MainComponent from './components/MainComponent'; + +import "bootstrap/dist/css/bootstrap.min.css"; + +var App = React.createClass({ + render: function () { + return ( +
+
+
+
+ + Ignite UI ReactJS Component +
+ +
+
+ +
+

igEditors

+ +
+
+ TRY IT OUT: +
+
    +
  • Select a user detail you would like to edit
    • +
  • While editing, you will notice most editors have specific validation rules to cope with
    • +
  • The user details on the left will update only when a valid input comes from the igEditors
    • +
+
+
+

This sample demonstrates how ReactJS can be used to create igEditors.

+

View Source

+
+
+ + +
+ + + +
+ ); + } +}); + +export default App; \ No newline at end of file diff --git a/samples/ig-editors/src/components/MainComponent.js b/samples/ig-editors/src/components/MainComponent.js new file mode 100644 index 0000000..8a970d9 --- /dev/null +++ b/samples/ig-editors/src/components/MainComponent.js @@ -0,0 +1,228 @@ +import React, { Component } from 'react'; +import IgTextEditor from 'igniteui-react/ui/igTextEditor.js'; +import IgMaskEditor from 'igniteui-react/ui/igMaskEditor.js'; +import IgNumericEditor from 'igniteui-react/ui/igNumericEditor.js'; +import IgDateEditor from 'igniteui-react/ui/igDateEditor.js'; +import IgDatePicker from 'igniteui-react/ui/igDatePicker.js'; + +// Ignite UI Required Combined JavaScript Files +import "@infragistics/ignite-ui-full/en/js/infragistics.core.js"; +import "@infragistics/ignite-ui-full/en/js/infragistics.lob.js"; + +// CSS files +import "@infragistics/ignite-ui-full/en/css/structure/infragistics.css"; +import "@infragistics/ignite-ui-full/en/css/themes/infragistics/infragistics.theme.css"; +import '../sample.css'; + +var MainComponent = React.createClass({ + + getInitialState: function() { + return { + Email: "johndoe@gmail.com", + userName: "USER", + seats: 108, + phone: 898123123, + licensedue: "2018-10-10", + birthday: "2001-12-9", + yourLocation: "LA" + } + }, + + propTypes: { + Email: React.PropTypes.string, + userName: React.PropTypes.string, + seats: React.PropTypes.number, + phone:React.PropTypes.number, + licensedue: React.PropTypes.string, + birthday: React.PropTypes.string, + yourLocation: React.PropTypes.string + }, + + + handleSubmit: function(e) { + e.preventDefault(); + }, + + + /* //Util funcs */ + /* //handle EditForm specific events */ + emailChanged: function (evt) { + var editor = this.refs.editorEmail; + this.setState({ Email: editor.igControl.value() }); + }, + + userChanged: function (evt) { + var editor = this.refs.editorUserName; + this.setState({ userName: editor.igControl.value() }); + }, + + phoneChanged : function (evt) { + var editor = this.refs.editorPhone; + this.setState({ phone: editor.igControl.value() }); + }, + + yearsChanged: function (evt) { + var editor = this.refs.editorseats; + this.setState({ seats: editor.igControl.value() }); + }, + + licenseChanged: function (evt) { + var editor = this.refs.editorLicense; + this.setState({ licensedue: new Date(editor.igControl.value()).toLocaleDateString()}); + }, + + birthdayChanged: function (evt) { + var editor = this.refs.editorBirthday; + this.setState({ birthday: new Date(editor.igControl.value()).toDateString()}); + }, + + locationChanged: function (evt) { + var editor = this.refs.editorLocation; + this.setState({ yourLocation: editor.igControl.value() }); + }, + + render:function(){ + const {Email, userName, seats, licensedue, birthday, yourLocation} = this.props; + return( +
+
+
+

Edit user account

+
+

Email : {this.state.Email}

+

User : {this.state.userName}

+

Phone : {this.state.phone}

+

Seats : {this.state.seats}

+

License due : {this.state.licensedue}

+

Birthday : {this.state.birthday}

+

Occupation : {this.state.yourLocation}

+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ ); + } +}); + +export default MainComponent; diff --git a/samples/ig-editors/src/index.js b/samples/ig-editors/src/index.js new file mode 100644 index 0000000..917d651 --- /dev/null +++ b/samples/ig-editors/src/index.js @@ -0,0 +1,7 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; +import registerServiceWorker from './registerServiceWorker'; + +ReactDOM.render(, document.getElementById('root')); +registerServiceWorker(); diff --git a/samples/ig-editors/src/registerServiceWorker.js b/samples/ig-editors/src/registerServiceWorker.js new file mode 100644 index 0000000..a3e6c0c --- /dev/null +++ b/samples/ig-editors/src/registerServiceWorker.js @@ -0,0 +1,117 @@ +// In production, we register a service worker to serve assets from local cache. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on the "N+1" visit to a page, since previously +// cached resources are updated in the background. + +// To learn more about the benefits of this model, read https://goo.gl/KwvDNy. +// This link also includes instructions on opting out of this behavior. + +const isLocalhost = Boolean( + window.location.hostname === 'localhost' || + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.1/8 is considered localhost for IPv4. + window.location.hostname.match( + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ + ) +); + +export default function register() { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL(process.env.PUBLIC_URL, window.location); + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 + return; + } + + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + + if (isLocalhost) { + // This is running on localhost. Lets check if a service worker still exists or not. + checkValidServiceWorker(swUrl); + + // Add some additional logging to localhost, pointing developers to the + // service worker/PWA documentation. + navigator.serviceWorker.ready.then(() => { + console.log( + 'This web app is being served cache-first by a service ' + + 'worker. To learn more, visit https://goo.gl/SC7cgQ' + ); + }); + } else { + // Is not local host. Just register service worker + registerValidSW(swUrl); + } + }); + } +} + +function registerValidSW(swUrl) { + navigator.serviceWorker + .register(swUrl) + .then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the old content will have been purged and + // the fresh content will have been added to the cache. + // It's the perfect time to display a "New content is + // available; please refresh." message in your web app. + console.log('New content is available; please refresh.'); + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); + } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); +} + +function checkValidServiceWorker(swUrl) { + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl) + .then(response => { + // Ensure service worker exists, and that we really are getting a JS file. + if ( + response.status === 404 || + response.headers.get('content-type').indexOf('javascript') === -1 + ) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then(registration => { + registration.unregister().then(() => { + window.location.reload(); + }); + }); + } else { + // Service worker found. Proceed as normal. + registerValidSW(swUrl); + } + }) + .catch(() => { + console.log( + 'No internet connection found. App is running in offline mode.' + ); + }); +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready.then(registration => { + registration.unregister(); + }); + } +} diff --git a/samples/ig-editors/src/sample.css b/samples/ig-editors/src/sample.css new file mode 100644 index 0000000..7aff69c --- /dev/null +++ b/samples/ig-editors/src/sample.css @@ -0,0 +1,66 @@ +.push-down { + margin-top:4em; +} + +.push-down-md { + margin-top:2em; +} + +.push-down-xs { + margin-top:1em; +} + +footer { + border-top:1px solid #ccc; + background-color:#ddd; + padding:50px; + margin-top:25px; + color:#999; +} + +.description { + border-bottom: 1px solid #eee; + margin-bottom: 15px; + margin-top: 15px; +} + +.try-it-out hr { + margin: 0px; + margin-top: 4px; +} + + +.try-it-out ul li{ + margin-top: 8px; + margin-bottom: 8px; +} + +.ui-state-hover, .ui-widget-content .ui-state-hover { + color: #070707; +} + +.well { + height: 100px; + margin: 10px; +} + +h1, +.ui-state-focus { + color: #1e96dc; +} + +.lbl { + display: block; + color: #1e96dc; +} + +h3 { + color: #1e96dc; + text-align: left; +} + +.info { + display: inline-block; + vertical-align: middle; + padding-top: 20px; +} \ No newline at end of file diff --git a/samples/ig-financial-state/package.json b/samples/ig-financial-state/package.json new file mode 100644 index 0000000..872cb5f --- /dev/null +++ b/samples/ig-financial-state/package.json @@ -0,0 +1,22 @@ +{ + "name": "ig-financial-state", + "version": "0.1.0", + "private": true, + "dependencies": { + "@infragistics/ignite-ui-full": "^17.2.456", + "babel-runtime": "6.22.0", + "bootstrap": "^3.3.7", + "igniteui-react": "^1.1.0", + "jquery": ">=1.9.1", + "jquery-ui": ">=1.10.5", + "react": "15.4.2", + "react-dom": "15.4.2", + "react-scripts": "1.0.17" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} \ No newline at end of file diff --git a/samples/ig-financial-state/public/favicon.ico b/samples/ig-financial-state/public/favicon.ico new file mode 100644 index 0000000..e167dc9 Binary files /dev/null and b/samples/ig-financial-state/public/favicon.ico differ diff --git a/samples/ig-financial-state/public/index.html b/samples/ig-financial-state/public/index.html new file mode 100644 index 0000000..765e296 --- /dev/null +++ b/samples/ig-financial-state/public/index.html @@ -0,0 +1,40 @@ + + + + + + + + + + + IgniteUI ReactJS Financial State + + + +
+ + + diff --git a/samples/ig-financial-state/public/manifest.json b/samples/ig-financial-state/public/manifest.json new file mode 100644 index 0000000..ef19ec2 --- /dev/null +++ b/samples/ig-financial-state/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + } + ], + "start_url": "./index.html", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/samples/ig-financial-state/src/App.js b/samples/ig-financial-state/src/App.js new file mode 100644 index 0000000..d7f0c84 --- /dev/null +++ b/samples/ig-financial-state/src/App.js @@ -0,0 +1,67 @@ +import React, { Component } from 'react'; +import MainComponent from './components/MainComponent.js'; + +import "bootstrap/dist/css/bootstrap.min.css"; + +var App = React.createClass({ + render: function () { + return ( +
+
+
+
+ + Ignite UI ReactJS Component +
+ +
+
+ +
+

igChart

+ +
+
+ TRY IT OUT: +
+
    +
  • Select a month and edit its revenue and expenses
    • +
  • Change month's revenue or expenses, using the editors or using the linear gauge
    • +
  • All the related components' data is changed and new overall year profit is calculated
    • +
+
+
+

This sample demonstrates how ReactJS can be used to create igChart, igCombo, igLinearGauge together with several different types of igEditors and how a communication between them can be implemented.

+

View Source

+
+
+ + +
+ + + +
+ ); + } +}); + +export default App; + diff --git a/samples/ig-financial-state/src/components/ChartsBox.js b/samples/ig-financial-state/src/components/ChartsBox.js new file mode 100644 index 0000000..28c43f2 --- /dev/null +++ b/samples/ig-financial-state/src/components/ChartsBox.js @@ -0,0 +1,186 @@ +import IgDataChart from 'igniteui-react/ui/igDataChart.js'; +import React, { Component } from 'react'; + +var ChartsBox = React.createClass({ + chartThickness: 2, + transitionDuration: 800, + chartIntervalX: 1, + revenueColor: "#a4ba29", + expensesColor: "#d3404b", + profitColor: "#216EDD", + outlineColor: "black", + updateCharts: function() { + switch(this.props.update) { + case "revenue": this.updateRevenue(); break; + case "expenses": this.updateExpenses(); break; + case "profit": this.updateProfit(); break; + default: break; + } + }, + updateRevenue: function() { + var data = this.props.data.data, index = this.props.month; + + this.updateNonSplineCharts(); + this.refs.polarSplineChartRevenue.igControl.notifySetItem(data, index, data[index], data[index]); + }, + updateExpenses: function() { + var data = this.props.data.data, index = this.props.month; + + this.updateNonSplineCharts(); + this.refs.polarSplineChartExpenses.igControl.notifySetItem(data, index, data[index], data[index]); + }, + updateProfit: function() { + var data = this.props.data.data, index = this.props.month; + + this.updateNonSplineCharts(); + this.refs.polarSplineChartProfit.igControl.notifySetItem(data, index, data[index], data[index]); + }, + updateNonSplineCharts: function() { + var data = this.props.data.data, index = this.props.month; + + this.refs.lineChart.igControl.notifySetItem(data, index, data[index], data[index]); + this.refs.barChart.igControl.notifySetItem(data, index, data[index], data[index]); + }, + render: function () { + this.updateCharts(); + return ( +
+
+ +
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+
+
+ +
+ +
+
+ ); + } +}); + +export default ChartsBox; \ No newline at end of file diff --git a/samples/ig-financial-state/src/components/EditorsBox.js b/samples/ig-financial-state/src/components/EditorsBox.js new file mode 100644 index 0000000..6bbf646 --- /dev/null +++ b/samples/ig-financial-state/src/components/EditorsBox.js @@ -0,0 +1,70 @@ +import IgCombo from 'igniteui-react/ui/igCombo.js'; +import IgNumericEditor from 'igniteui-react/ui/igNumericEditor.js'; +import React, { Component } from 'react'; + +var EditorsBox = React.createClass({ + render: function () { + return ( +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ ); + }, + monthChanged: function (e, args) { + this.props.changeMonth(args.items[0].data.value); + }, + revenueChanged: function (e, args) { + this.props.changeRevenue(args.newValue); + }, + expensesChanged: function (e, args) { + this.props.changeExpenses(args.newValue); + }, + profitChanged: function (e, args) { + this.props.changeProfit(args.newValue); + } +}); + +export default EditorsBox; \ No newline at end of file diff --git a/samples/ig-financial-state/src/components/GaugesBox.js b/samples/ig-financial-state/src/components/GaugesBox.js new file mode 100644 index 0000000..b607154 --- /dev/null +++ b/samples/ig-financial-state/src/components/GaugesBox.js @@ -0,0 +1,96 @@ +import IgLinearGauge from 'igniteui-react/ui/igLinearGauge.js'; +import React, { Component } from 'react'; + +var GaugesBox = React.createClass({ + gaugeInterval: 10, + revenueColor: "#a4ba29", + expensesColor: "#d3404b", + profitColor: "#216EDD", + needleColor: "white", + needleOutlineColor: "#2582a9", + render: function() { + return ( +
+
+ +
+
+ +
+
+ +
+
+
+ ) + }, + revenueChanged: function (e, args) { + this.props.changeRevenue(args.newValue); + }, + expensesChanged: function (e, args) { + this.props.changeExpenses(args.newValue); + }, + profitChanged: function (e, args) { + this.props.changeProfit(args.newValue); + } +}); + +export default GaugesBox; \ No newline at end of file diff --git a/samples/ig-financial-state/src/components/MainComponent.js b/samples/ig-financial-state/src/components/MainComponent.js new file mode 100644 index 0000000..be915ba --- /dev/null +++ b/samples/ig-financial-state/src/components/MainComponent.js @@ -0,0 +1,112 @@ +import React, { Component } from 'react'; +import EditorsBox from './EditorsBox.js'; +import ChartsBox from './ChartsBox.js'; +import GaugesBox from './GaugesBox.js'; +import TotalBox from './TotalBox.js'; + +// Ignite UI Required Combined JavaScript Files +import "@infragistics/ignite-ui-full/en/js/infragistics.core.js"; +import "@infragistics/ignite-ui-full/en/js/infragistics.lob.js"; +import "@infragistics/ignite-ui-full/en/js/infragistics.dv.js"; + +// CSS files +import "@infragistics/ignite-ui-full/en/css/structure/infragistics.css"; +import "@infragistics/ignite-ui-full/en/css/themes/infragistics/infragistics.theme.css"; +import '../sample.css'; + +var MainComponent = React.createClass({ + + getInitialState: function () { + return { + month: this.getRandomInt(12), + data: this.generateData(), + update: null, + months: this.getMonths() + } + }, + generateData: function() { + var num = 12, data = [], rand1, rand2, rand3, + mnths = this.getShortMonthNames(); + + + for (var i = 0; i < num; i++) { + rand1 = Math.random() * 50.0; + rand2 = Math.random() * 40.0; + rand3 = rand1 - rand2; + data[i] = { + index: i, + month: mnths[i], + revenue: rand1, + expenses: rand2, + profit: rand3 + }; + } + return { data: data }; + }, + changeMonth: function(index) { + this.setState({ month: index, update: "month" }); + }, + changeRevenue: function(value) { + var data = this.state.data; + data.data[this.state.month].revenue = value; + data.data[this.state.month].profit = value - data.data[this.state.month].expenses; + this.setState({ data: data, update: "revenue" }); + }, + changeExpenses: function(value) { + var data = this.state.data; + data.data[this.state.month].expenses = value; + data.data[this.state.month].profit = data.data[this.state.month].revenue - value; + this.setState({ data: data, update: "expenses" }); + }, + changeProfit: function(value) { + var data = this.state.data; + data.data[this.state.month].profit = value; + data.data[this.state.month].revenue = value + data.data[this.state.month].expenses; + this.setState({ data: data, update: "profit" }); + }, + getMonths: function() { + return { + months: [ + { value: 0, text: "January"}, { value: 1, text: "February"}, { value: 2, text: "March"}, + { value: 3, text: "April"}, { value: 4, text: "May"}, { value: 5, text: "June"}, + { value: 6, text: "July"}, { value: 7, text: "August"}, { value: 8, text: "September"}, + { value: 9, text: "October"}, { value: 10, text: "November"}, { value: 11, text: "December"} + ]}; + }, + getRandomInt: function(max) { + return Math.floor(Math.random() * Math.floor(max)); + }, + getShortMonthNames: function() { + return ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; + }, + render: function () { + return ( +
+ +
+ + +
+ +
+ ); + } +}); + +export default MainComponent; \ No newline at end of file diff --git a/samples/ig-financial-state/src/components/TotalBox.js b/samples/ig-financial-state/src/components/TotalBox.js new file mode 100644 index 0000000..f94f028 --- /dev/null +++ b/samples/ig-financial-state/src/components/TotalBox.js @@ -0,0 +1,32 @@ +import IgCurrencyEditor from 'igniteui-react/ui/igCurrencyEditor.js'; +import React, { Component } from 'react'; + +var TotalBox = React.createClass({ + getTotal: function() { + var data = this.props.data.data, + total = 0, i; + + for (i = 0; i < data.length; i++) { + total += data[i].profit; + } + return total * 1000000; + }, + render: function() { + return ( +
+
+ +
+ ) + } +}); + +export default TotalBox; \ No newline at end of file diff --git a/samples/ig-financial-state/src/index.js b/samples/ig-financial-state/src/index.js new file mode 100644 index 0000000..917d651 --- /dev/null +++ b/samples/ig-financial-state/src/index.js @@ -0,0 +1,7 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; +import registerServiceWorker from './registerServiceWorker'; + +ReactDOM.render(, document.getElementById('root')); +registerServiceWorker(); diff --git a/samples/ig-financial-state/src/registerServiceWorker.js b/samples/ig-financial-state/src/registerServiceWorker.js new file mode 100644 index 0000000..a3e6c0c --- /dev/null +++ b/samples/ig-financial-state/src/registerServiceWorker.js @@ -0,0 +1,117 @@ +// In production, we register a service worker to serve assets from local cache. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on the "N+1" visit to a page, since previously +// cached resources are updated in the background. + +// To learn more about the benefits of this model, read https://goo.gl/KwvDNy. +// This link also includes instructions on opting out of this behavior. + +const isLocalhost = Boolean( + window.location.hostname === 'localhost' || + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.1/8 is considered localhost for IPv4. + window.location.hostname.match( + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ + ) +); + +export default function register() { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL(process.env.PUBLIC_URL, window.location); + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 + return; + } + + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + + if (isLocalhost) { + // This is running on localhost. Lets check if a service worker still exists or not. + checkValidServiceWorker(swUrl); + + // Add some additional logging to localhost, pointing developers to the + // service worker/PWA documentation. + navigator.serviceWorker.ready.then(() => { + console.log( + 'This web app is being served cache-first by a service ' + + 'worker. To learn more, visit https://goo.gl/SC7cgQ' + ); + }); + } else { + // Is not local host. Just register service worker + registerValidSW(swUrl); + } + }); + } +} + +function registerValidSW(swUrl) { + navigator.serviceWorker + .register(swUrl) + .then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the old content will have been purged and + // the fresh content will have been added to the cache. + // It's the perfect time to display a "New content is + // available; please refresh." message in your web app. + console.log('New content is available; please refresh.'); + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); + } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); +} + +function checkValidServiceWorker(swUrl) { + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl) + .then(response => { + // Ensure service worker exists, and that we really are getting a JS file. + if ( + response.status === 404 || + response.headers.get('content-type').indexOf('javascript') === -1 + ) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then(registration => { + registration.unregister().then(() => { + window.location.reload(); + }); + }); + } else { + // Service worker found. Proceed as normal. + registerValidSW(swUrl); + } + }) + .catch(() => { + console.log( + 'No internet connection found. App is running in offline mode.' + ); + }); +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready.then(registration => { + registration.unregister(); + }); + } +} diff --git a/samples/ig-financial-state/src/sample.css b/samples/ig-financial-state/src/sample.css new file mode 100644 index 0000000..0384566 --- /dev/null +++ b/samples/ig-financial-state/src/sample.css @@ -0,0 +1,138 @@ +.push-down { + margin-top:4em; +} + +.push-down-md { + margin-top:2em; +} + +.push-down-xs { + margin-top:1em; +} + +footer { + border-top:1px solid #ccc; + background-color:#ddd; + padding:50px; + margin-top:25px; + color:#999; +} + +.description { + border-bottom: 1px solid #eee; + margin-bottom: 15px; + margin-top: 15px; +} + +.try-it-out hr { + margin: 0px; + margin-top: 4px; +} + + +.try-it-out ul li{ + margin-top: 8px; + margin-bottom: 8px; +} + +#app { + min-width: 800px; +} + +.editors { + height: 90px; +} + +.editor-container { + float: left; + margin: 0 35px 20px 5px; +} + +.editor-container .labels { + display: block; + font-size: 13px; + padding-bottom: 5px; +} + +.ui-state-hover, +.ui-widget-content .ui-state-hover { + color: #070707; +} + +#totalEditor { + border: none; + font-size: x-large; +} + +.clear { + clear: both; +} + +.gauges { + padding-left: 0; + height: 100px; +} + +.gauge-container { + float: left; + margin: 0 25px 0 5px; +} + +.total-container { + float: left; + margin: 0 20px 0 5px; +} + +.sample-line-chart-holder { + position: relative; + width: 100%; +} +#legendLineChart { + position: absolute; + top: 120px; left: 45px; + border: none; + background-color: + transparent; + font-weight: bold; +} + +/* Polar chart container and legend */ +.sample-polar-chart-holder { + position: relative; + /*width: 33.3%;*/ + float: left; + margin-top: 10px; +} +.polar-chart-legend { + position: absolute; + top: 250px; + left: 15px; + border: none; + background-color: transparent; + font-weight: bold; +} + +/* Line chart container and legend */ +.sample-bar-chart-holder { + position: relative; + width: 100%; + float: left; + margin-top: 10px; +} + +#legendBarColumnChart { + position: absolute; + top: 135px; + left: 45px; + border: none; + background-color: transparent; + font-weight: bold; +} + +.ui-widget-content { + border: none; +} + +#totalEditorEditingInput { + box-sizing: content-box; +} \ No newline at end of file diff --git a/samples/ig-grid/package.json b/samples/ig-grid/package.json new file mode 100644 index 0000000..9696c10 --- /dev/null +++ b/samples/ig-grid/package.json @@ -0,0 +1,22 @@ +{ + "name": "ig-grid", + "version": "1.0.0", + "private": true, + "dependencies": { + "@infragistics/ignite-ui-full": "^17.2.456", + "babel-runtime": "6.22.0", + "bootstrap": "^3.3.7", + "igniteui-react": "^1.1.0", + "jquery": ">=1.9.1", + "jquery-ui": ">=1.10.5", + "react": "15.4.2", + "react-dom": "15.4.2", + "react-scripts": "1.0.17" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} diff --git a/samples/ig-grid/public/favicon.ico b/samples/ig-grid/public/favicon.ico new file mode 100644 index 0000000..e167dc9 Binary files /dev/null and b/samples/ig-grid/public/favicon.ico differ diff --git a/samples/ig-grid/public/index.html b/samples/ig-grid/public/index.html new file mode 100644 index 0000000..db7a127 --- /dev/null +++ b/samples/ig-grid/public/index.html @@ -0,0 +1,40 @@ + + + + + + + + + + + IgniteUI ReactJS Grid + + + +
+ + + diff --git a/samples/ig-grid/public/manifest.json b/samples/ig-grid/public/manifest.json new file mode 100644 index 0000000..7fe3393 --- /dev/null +++ b/samples/ig-grid/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "igGrid React", + "name": "Infragistics igGrid React Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + } + ], + "start_url": "./index.html", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/samples/ig-grid/src/App.js b/samples/ig-grid/src/App.js new file mode 100644 index 0000000..581a669 --- /dev/null +++ b/samples/ig-grid/src/App.js @@ -0,0 +1,66 @@ +import React, { Component } from 'react'; +import MainComponent from './components/MainComponent'; + +import "bootstrap/dist/css/bootstrap.min.css"; + +var App = React.createClass({ + render: function () { + return ( +
+
+
+
+ + Ignite UI ReactJS Component +
+ +
+
+ +
+

igGrid

+ +
+
+ TRY IT OUT: +
+
    +
  • Select a row that you would like to edit
    • +
  • Change a product's name in the group of textboxes below, click update and see how the names change in the grid
    • +
  • Delete a product either through the grid's UI or with the button bellow the current selected product in the window next to the grid
    • +
+
+
+

This sample demonstrates how ReactJS can be used to create igGrid and add two-way data binding.

+

View Source

+
+
+ + +
+ + + +
+ ); + } +}); + +export default App; diff --git a/samples/ig-grid/src/components/IgDialogBox.js b/samples/ig-grid/src/components/IgDialogBox.js new file mode 100644 index 0000000..65f80ed --- /dev/null +++ b/samples/ig-grid/src/components/IgDialogBox.js @@ -0,0 +1,46 @@ +import React, { Component } from 'react'; +import IgButton from 'igniteui-react/ui/igButton.js'; +import IgDialog from 'igniteui-react/ui/igDialog.js'; +import $ from 'jquery' +import '../sample.css'; + +var IgDialogBox = React.createClass({ + render: function () { + return ( + +

Are you sure you want to delete row with ID?

+
+
+ +
+
+ +
+ + ); + }, + componentWillReceiveProps(nextProps) { + if (this.props.rowId !== nextProps.rowId) { + $(this.refs.dialogText).html("Are you sure you want to delete row with ID " + nextProps.rowId + " ?"); + } + }, + handleDialogStateChanging: function (evt, ui) { + this.props.dialogStateChanging(evt, ui); + }, + handleDeleteDialogAccept: function () { + this.props.deleteDialogAccept(); + }, + handleDeleteDialogCancel: function () { + this.props.deleteDialogCancel(); + } +}); + +export default IgDialogBox; diff --git a/samples/ig-grid/src/components/IgEditBox.js b/samples/ig-grid/src/components/IgEditBox.js new file mode 100644 index 0000000..65a4bfd --- /dev/null +++ b/samples/ig-grid/src/components/IgEditBox.js @@ -0,0 +1,88 @@ +import React, { Component } from 'react'; +import IgTextEditor from 'igniteui-react/ui/igTextEditor.js'; +import IgNumericEditor from 'igniteui-react/ui/igNumericEditor.js'; +import IgButton from 'igniteui-react/ui/igButton.js'; +import '../sample.css'; +import $ from 'jquery'; + +var IgEditBox = React.createClass({ + render: function () { + var rowId = this.props.rowId, + v = rowId > -1; + return ( +
+

Change values in row with ID {this.props.rowId}:

+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+
+
+ +
+
+ ); + }, + handleTextEditorKeyPress: function (e, args) { + if (args.key === $.ui.keyCode.ENTER) { + this.handleButtonUpdateClick(e); + } + }, + handleTextEditorKeyDown: function (e) { + if (e.keyCode === $.ui.keyCode.ENTER) { + this.handleButtonUpdateClick(e); + } + }, + handleButtonDeleteClick: function (e) { + var func = this.props.btnDeleteClicked; + if (func) { + func(e, this.props.rowId); + } + }, + handleButtonUpdateClick: function (e) { + var func = this.props.btnUpdateClicked; + if (func) { + func(e, + this.props.rowId, + this.refs.editorName.igControl.value(), + this.refs.editorStock.igControl.value(), + this.refs.editorPrice.igControl.value()); + } + } +}); + +export default IgEditBox; \ No newline at end of file diff --git a/samples/ig-grid/src/components/MainComponent.js b/samples/ig-grid/src/components/MainComponent.js new file mode 100644 index 0000000..f52ac45 --- /dev/null +++ b/samples/ig-grid/src/components/MainComponent.js @@ -0,0 +1,253 @@ +import React, { Component } from 'react'; +import IgGrid from 'igniteui-react/ui/igGrid.js'; +import IgTextEditor from 'igniteui-react/ui/igTextEditor.js'; +import IgEditBox from './IgEditBox.js'; +import IgDialogBox from './IgDialogBox.js'; + +// Ignite UI Required Combined JavaScript Files +import "@infragistics/ignite-ui-full/en/js/infragistics.core.js"; +import "@infragistics/ignite-ui-full/en/js/infragistics.lob.js"; + +// CSS files +import "@infragistics/ignite-ui-full/en/css/structure/infragistics.css"; +import "@infragistics/ignite-ui-full/en/css/themes/infragistics/infragistics.theme.css"; +import '../sample.css'; + +var MainComponent = React.createClass({ + render: function () { + return ( +
+ +
+ +
+ +
+

Grid options

+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ + +
+ + + +
+ ); + }, + getInitialState: function () { + return { + // the view is the grid data source in this case + view: this.getSourceData(), + gridHeight: "400px", + gridWidth: "100%", + selectedRowId: -1, + deleteRowId: -1, + nameValue: null, + stockValue: null, + priceValue: null, + dialogState: "closed" + } + }, + /* helper functions */ + getGridInstance: function (gridRefName) { + gridRefName = gridRefName || "grid1"; + return (this.refs[gridRefName] || {}).igControl; + }, + getGridUpdating: function (gridRefName) { + var grid = this.getGridInstance(gridRefName); + if (!grid || !grid.element) { + return null; + } + return grid.element.data("igGridUpdating"); + }, + getNameByRowId: function (rowId) { + var grid = this.getGridInstance(), + Name, record; + if (rowId > -1 && grid) { + record = grid.dataSource.findRecordByKey(rowId) || {}; + Name = record["Name"]; + } + return Name; + }, + getStockByRowId: function (rowId) { + var grid = this.getGridInstance(), + Stock, record; + if (rowId > -1 && grid) { + record = grid.dataSource.findRecordByKey(rowId) || {}; + Stock = record["UnitsInStock"]; + } + return Stock; + }, + getPriceByRowId: function (rowId) { + var grid = this.getGridInstance(), + Price, record; + if (rowId > -1 && grid) { + record = grid.dataSource.findRecordByKey(rowId) || {}; + Price = record["UnitPrice"]; + } + return Price; + }, + /* //helper functions */ + /* handle edit box specific events */ + editBoxHandleDelete: function (e, rowId) { + this.setState({ + dialogState: "opened", + deleteRowId: rowId + }); + }, + editBoxHandleUpdate: function (e, rowId, name, stock, price) { + var grid = this.getGridInstance(), + upd; + if (grid && rowId > -1) { + upd = this.getGridUpdating(); + if (upd) { + upd.updateRow(rowId, + { + "Name": name, + "UnitsInStock": stock, + "UnitPrice": price + }); + } + } + }, + handleDialogStateChanging: function (evt, ui) { + if(ui.action === "close" && this.state.dialogState === "opened" ) { + this.setState({ dialogState: "closed" }); + } + }, + handleDeleteDialogAccept: function () { + var grid = this.getGridInstance(), + rowId = this.state.deleteRowId, + upd; + if (grid && rowId > -1) { + upd = this.getGridUpdating();//grid.dataSource.deleteRow(rowId, true); + if (upd) { + upd.deleteRow(rowId); + this.setState({ selectedRowId: -1, deleteRowId: -1 }); + } + } + this.setState({ dialogState: "closed" }); + }, + handleDeleteDialogCancel: function () { + this.setState({ dialogState: "closed" }); + }, + /* //handle edit box specific events */ + /* interactions with igGrid - rowDeleted, updated, etc. */ + gridRowUpdated: function (evt, ui) { + var rowId = ui.rowID; + if (this.state.selectedRowId !== rowId) { + return; + } + if (!ui.rowAdding && + (ui.values["Name"] !== ui.oldValues["Name"] || + ui.values["UnitsInStock"] !== ui.oldValues["UnitsInStock"] || + ui.values["UnitPrice"] !== ui.oldValues["UnitPrice"])) { + this.setState({ + nameValue: this.getNameByRowId(rowId), + stockValue: this.getStockByRowId(rowId), + priceValue: this.getPriceByRowId(rowId) + }); + } + }, + gridRowDeleted: function (evt, ui) { + var rowId = ui.rowID; + if (this.state.selectedRowId === rowId) { + this.setState({ selectedRowId: -1 }); + } + }, + gridRowSelectionChanged: function (evt, ui) { + var rowId = ui.row.id; + this.setState({ selectedRowId: rowId, + nameValue: this.getNameByRowId(rowId), + stockValue: this.getStockByRowId(rowId), + priceValue: this.getPriceByRowId(rowId) + }); + }, + /* //interactions with igGrid - rowDeleted, updated, etc. */ + heightChanged: function (evt) { + // change grid height option + var editor = this.refs.editorGridHeight; + this.setState({ gridHeight: editor.igControl.value() }); + }, + widthChanged: function (evt) { + // change grid width option + var editor = this.refs.editorGridWidth; + this.setState({ gridWidth: editor.igControl.value() }); + }, + getSourceData: function() { + var sourceData = { + "Products": [ + { "ProductID": 1, "Name": "Chairs", "UnitsInStock": 385, "UnitPrice": 358.74353459046387, "DateAdded": "2004-06-20T20:18:20.469", InStock: true }, + { "ProductID": 2, "Name": "Kitchen knifes", "UnitsInStock": 602, "UnitPrice": 140.2894189303226, "DateAdded": "2000-02-21T22:56:16.331", InStock: true }, + { "ProductID": 3, "Name": "Screwdrivers", "UnitsInStock": 608, "UnitPrice": 567.43131092164253, "DateAdded": "2002-04-21T09:06:07.142", InStock: true }, + { "ProductID": 4, "Name": "Desk lamps", "UnitsInStock": 402, "UnitPrice": 785.99307722691128, "DateAdded": "2001-03-27T03:57:27.373", InStock: true }, + { "ProductID": 5, "Name": "Monitors", "UnitsInStock": 338, "UnitPrice": 157.42114473014192, "DateAdded": "2006-02-28T21:22:04.059", InStock: true }, + { "ProductID": 6, "Name": "Beds", "UnitsInStock": 163, "UnitPrice": 178.17069924351324, "DateAdded": "1996-10-24T06:51:53.93", InStock: true }, + { "ProductID": 7, "Name": "Dinner tables", "UnitsInStock": 163, "UnitPrice": 641.50092314998665, "DateAdded": "1999-11-19T06:10:35.984", InStock: true }, + { "ProductID": 8, "Name": "Dinner tables", "UnitsInStock": 163, "UnitPrice": 641.50092314998665, "DateAdded": "1999-11-19T06:10:35.984", InStock: true }, + { "ProductID": 9, "Name": "Dinner tables", "UnitsInStock": 163, "UnitPrice": 641.50092314998665, "DateAdded": "1999-11-19T06:10:35.984", InStock: true }, + { "ProductID": 10, "Name": "Dinner tables", "UnitsInStock": 163, "UnitPrice": 641.50092314998665, "DateAdded": "1999-11-19T06:10:35.984", InStock: true }, + { "ProductID": 11, "Name": "Dinner tables", "UnitsInStock": 163, "UnitPrice": 641.50092314998665, "DateAdded": "1999-11-19T06:10:35.984", InStock: true } + ] + } + return sourceData; + } +}); + +export default MainComponent; \ No newline at end of file diff --git a/samples/ig-grid/src/index.js b/samples/ig-grid/src/index.js new file mode 100644 index 0000000..917d651 --- /dev/null +++ b/samples/ig-grid/src/index.js @@ -0,0 +1,7 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; +import registerServiceWorker from './registerServiceWorker'; + +ReactDOM.render(, document.getElementById('root')); +registerServiceWorker(); diff --git a/samples/ig-grid/src/registerServiceWorker.js b/samples/ig-grid/src/registerServiceWorker.js new file mode 100644 index 0000000..a3e6c0c --- /dev/null +++ b/samples/ig-grid/src/registerServiceWorker.js @@ -0,0 +1,117 @@ +// In production, we register a service worker to serve assets from local cache. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on the "N+1" visit to a page, since previously +// cached resources are updated in the background. + +// To learn more about the benefits of this model, read https://goo.gl/KwvDNy. +// This link also includes instructions on opting out of this behavior. + +const isLocalhost = Boolean( + window.location.hostname === 'localhost' || + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.1/8 is considered localhost for IPv4. + window.location.hostname.match( + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ + ) +); + +export default function register() { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL(process.env.PUBLIC_URL, window.location); + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 + return; + } + + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + + if (isLocalhost) { + // This is running on localhost. Lets check if a service worker still exists or not. + checkValidServiceWorker(swUrl); + + // Add some additional logging to localhost, pointing developers to the + // service worker/PWA documentation. + navigator.serviceWorker.ready.then(() => { + console.log( + 'This web app is being served cache-first by a service ' + + 'worker. To learn more, visit https://goo.gl/SC7cgQ' + ); + }); + } else { + // Is not local host. Just register service worker + registerValidSW(swUrl); + } + }); + } +} + +function registerValidSW(swUrl) { + navigator.serviceWorker + .register(swUrl) + .then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the old content will have been purged and + // the fresh content will have been added to the cache. + // It's the perfect time to display a "New content is + // available; please refresh." message in your web app. + console.log('New content is available; please refresh.'); + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); + } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); +} + +function checkValidServiceWorker(swUrl) { + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl) + .then(response => { + // Ensure service worker exists, and that we really are getting a JS file. + if ( + response.status === 404 || + response.headers.get('content-type').indexOf('javascript') === -1 + ) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then(registration => { + registration.unregister().then(() => { + window.location.reload(); + }); + }); + } else { + // Service worker found. Proceed as normal. + registerValidSW(swUrl); + } + }) + .catch(() => { + console.log( + 'No internet connection found. App is running in offline mode.' + ); + }); +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready.then(registration => { + registration.unregister(); + }); + } +} diff --git a/samples/ig-grid/src/sample.css b/samples/ig-grid/src/sample.css new file mode 100644 index 0000000..55452dc --- /dev/null +++ b/samples/ig-grid/src/sample.css @@ -0,0 +1,40 @@ +.push-down { + margin-top:4em; +} + +.push-down-md { + margin-top:2em; +} + +.push-down-xs { + margin-top:1em; +} + +footer { + border-top:1px solid #ccc; + background-color:#ddd; + padding:50px; + margin-top:25px; + color:#999; +} + +.description { + border-bottom: 1px solid #eee; + margin-bottom: 15px; + margin-top: 15px; +} + +.try-it-out hr { + margin: 0px; + margin-top: 4px; +} + + +.try-it-out ul li{ + margin-top: 8px; + margin-bottom: 8px; +} + +.ui-state-hover, .ui-widget-content .ui-state-hover { + color: #070707 !important; +} \ No newline at end of file diff --git a/samples/igEditors/igEditors.html b/samples/igEditors/igEditors.html deleted file mode 100644 index f207f9e..0000000 --- a/samples/igEditors/igEditors.html +++ /dev/null @@ -1,358 +0,0 @@ - - - - - ReactJS - edit form with igEditors - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

igEditors

- -
-
- TRY IT OUT: -
-
    -
  • Select a user detail you would like to edit
    • -
  • While editing, you will notice most editors have specific validation rules to cope with
    • -
  • The user details on the left will update only when a valid input comes from the igEditors
    • -
-
-
-

This sample demonstrates how ReactJS can be used to create igEditors.

-

View Source

-
-
-
- -
- - - -
-
- -
- - - \ No newline at end of file diff --git a/samples/igGrid/igGrid.html b/samples/igGrid/igGrid.html deleted file mode 100644 index e4c6c6b..0000000 --- a/samples/igGrid/igGrid.html +++ /dev/null @@ -1,465 +0,0 @@ - - - - - IgniteUI ReactJS Grid - - - - - - - - - - - - - - - -
-

igGrid

- -
-
- TRY IT OUT: -
-
    -
  • Select a row that you would like to edit
    • -
  • Change a product's name in the group of textboxes below, click update and see how the names change in the grid
    • -
  • Delete a product either through the grid's UI or with the button bellow the current selected product in the window next to the grid
    • -
-
-
-

This sample demonstrates how ReactJS can be used to create igGrid and add two-way data binding.

-

View Source

-
-
- -
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/samples/sample.css b/samples/sample.css deleted file mode 100644 index 6d6ce0c..0000000 --- a/samples/sample.css +++ /dev/null @@ -1,36 +0,0 @@ -.push-down { - margin-top:4em; -} - -.push-down-md { - margin-top:2em; -} - -.push-down-xs { - margin-top:1em; -} - -footer { - border-top:1px solid #ccc; - background-color:#ddd; - padding:50px; - margin-top:25px; - color:#999; -} - -.description { - border-bottom: 1px solid #eee; - margin-bottom: 15px; - margin-top: 15px; -} - -.try-it-out hr { - margin: 0px; - margin-top: 4px; -} - - -.try-it-out ul li{ - margin-top: 8px; - margin-bottom: 8px; -} \ No newline at end of file diff --git a/src/props/igDataChart.js b/src/props/igDataChart.js index 3642dd6..6dd98fd 100644 --- a/src/props/igDataChart.js +++ b/src/props/igDataChart.js @@ -170,6 +170,7 @@ $.ig.react.propTypes.shapes.igDataChartSeries = { "typicalPriceIndicator", "polarArea", "polarLine", + "polarSpline", "polarScatter", "radialColumn", "radialLine",