├── samples ├── ig-grid │ ├── public │ │ ├── favicon.ico │ │ ├── manifest.json │ │ └── index.html │ ├── src │ │ ├── index.js │ │ ├── sample.css │ │ ├── components │ │ │ ├── IgDialogBox.js │ │ │ └── IgEditBox.js │ │ ├── App.js │ │ └── registerServiceWorker.js │ └── package.json ├── ig-editors │ ├── public │ │ ├── favicon.ico │ │ ├── manifest.json │ │ └── index.html │ ├── src │ │ ├── index.js │ │ ├── sample.css │ │ └── App.js │ └── package.json ├── ig-dashboard │ ├── public │ │ ├── favicon.ico │ │ ├── manifest.json │ │ └── index.html │ ├── src │ │ ├── index.js │ │ ├── sample.css │ │ ├── components │ │ │ └── IgEditBox.js │ │ └── App.js │ └── package.json └── ig-financial-state │ ├── public │ ├── favicon.ico │ ├── manifest.json │ └── index.html │ ├── src │ ├── index.js │ ├── components │ │ ├── TotalBox.js │ │ ├── EditorsBox.js │ │ ├── GaugesBox.js │ │ └── MainComponent.js │ ├── sample.css │ └── App.js │ └── package.json ├── src ├── props │ ├── igColorPicker.js │ ├── igToolbarButton.js │ ├── igBrowseButton.js │ ├── igColorPickerSplitButton.js │ ├── igChartLegend.js │ ├── igBaseChart.js │ ├── igProgressBar.js │ ├── igSplitButton.js │ ├── igPieChart.js │ ├── igEditorFilter.js │ ├── igHtmlEditor.js │ ├── igHierarchicalGrid.js │ ├── igBaseEditor.js │ ├── igSlider.js │ ├── igToolbar.js │ ├── igCheckboxEditor.js │ ├── igButton.js │ ├── igRating.js │ ├── igSplitter.js │ ├── igZoombar.js │ ├── igScroll.js │ ├── igSpreadsheet.js │ ├── igPopover.js │ ├── igMaskEditor.js │ ├── igValidator.js │ ├── igDateEditor.js │ ├── igLayoutManager.js │ ├── igFunnelChart.js │ ├── igTextEditor.js │ ├── igDatePicker.js │ ├── igNotifier.js │ ├── igScheduler.js │ ├── igDialog.js │ ├── igDoughnutChart.js │ ├── igZoomSlider.js │ ├── igNumericEditor.js │ ├── igTimePicker.js │ ├── igTileManager.js │ ├── igQRCodeBarcode.js │ ├── igCurrencyEditor.js │ ├── igPercentEditor.js │ ├── igBulletGraph.js │ ├── igSparkline.js │ ├── igLinearGauge.js │ ├── igDataChart.js │ ├── igRadialMenu.js │ ├── igTree.js │ ├── igTreeGrid.js │ ├── igUpload.js │ ├── igRadialGauge.js │ ├── igCombo.js │ └── igVideoPlayer.js ├── components │ ├── igMap.js │ ├── igGrid.js │ ├── igTree.js │ ├── igCombo.js │ ├── igButton.js │ ├── igDialog.js │ ├── igRating.js │ ├── igScroll.js │ ├── igSlider.js │ ├── igUpload.js │ ├── igPopover.js │ ├── igToolbar.js │ ├── igZoombar.js │ ├── igNotifier.js │ ├── igPieChart.js │ ├── igSplitter.js │ ├── igTreeGrid.js │ ├── igBaseChart.js │ ├── igDataChart.js │ ├── igPivotGrid.js │ ├── igPivotView.js │ ├── igScheduler.js │ ├── igSparkline.js │ ├── igValidator.js │ ├── igBaseEditor.js │ ├── igDateEditor.js │ ├── igDatePicker.js │ ├── igHtmlEditor.js │ ├── igMaskEditor.js │ ├── igRadialMenu.js │ ├── igShapeChart.js │ ├── igTextEditor.js │ ├── igTimePicker.js │ ├── igZoomSlider.js │ ├── igBulletGraph.js │ ├── igChartLegend.js │ ├── igColorPicker.js │ ├── igFunnelChart.js │ ├── igLinearGauge.js │ ├── igProgressBar.js │ ├── igRadialGauge.js │ ├── igSplitButton.js │ ├── igSpreadsheet.js │ ├── igTileManager.js │ ├── igVideoPlayer.js │ ├── igBrowseButton.js │ ├── igEditorFilter.js │ ├── igCategoryChart.js │ ├── igDoughnutChart.js │ ├── igLayoutManager.js │ ├── igNumericEditor.js │ ├── igPercentEditor.js │ ├── igQRCodeBarcode.js │ ├── igToolbarButton.js │ ├── igCheckboxEditor.js │ ├── igCurrencyEditor.js │ ├── igFinancialChart.js │ ├── igHierarchicalGrid.js │ ├── igPivotDataSelector.js │ └── igColorPickerSplitButton.js └── util │ └── ignite-react.js ├── tests ├── unit │ ├── igMap │ │ └── test.js │ ├── igBulletGraph │ │ └── test.js │ ├── igHtmlEditor │ │ └── test.js │ ├── igLinearGauge │ │ └── test.js │ ├── igRadialGauge │ │ └── test.js │ ├── igGrid │ │ └── test.js │ ├── igDataChart │ │ └── test.js │ ├── igZoombar │ │ └── test.js │ └── common │ │ └── test.js ├── karma-test-shim.js ├── util.js └── karma.conf.js ├── dist └── npm │ └── package.json ├── .gitignore ├── .github └── workflows │ ├── node.js.yml │ └── npm-publish.yml ├── LICENSE ├── .travis.yml └── package.json /samples/ig-grid/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgniteUI/igniteui-react-wrappers/HEAD/samples/ig-grid/public/favicon.ico -------------------------------------------------------------------------------- /samples/ig-editors/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgniteUI/igniteui-react-wrappers/HEAD/samples/ig-editors/public/favicon.ico -------------------------------------------------------------------------------- /samples/ig-dashboard/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgniteUI/igniteui-react-wrappers/HEAD/samples/ig-dashboard/public/favicon.ico -------------------------------------------------------------------------------- /samples/ig-financial-state/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgniteUI/igniteui-react-wrappers/HEAD/samples/ig-financial-state/public/favicon.ico -------------------------------------------------------------------------------- /src/props/igColorPicker.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igColorPicker = { 2 | id: PropTypes.string.isRequired, 3 | colors: PropTypes.string, 4 | standardColors: PropTypes.array 5 | } 6 | -------------------------------------------------------------------------------- /src/props/igToolbarButton.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igToolbarButton = { 2 | id: PropTypes.string.isRequired, 3 | allowToggling: PropTypes.bool, 4 | isSelected: PropTypes.bool 5 | } 6 | -------------------------------------------------------------------------------- /src/props/igBrowseButton.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igBrowseButton = { 2 | id: PropTypes.string.isRequired, 3 | autoselect: PropTypes.bool, 4 | multipleFiles: PropTypes.bool, 5 | container: PropTypes.object 6 | } 7 | -------------------------------------------------------------------------------- /samples/ig-grid/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import registerServiceWorker from './registerServiceWorker'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | registerServiceWorker(); 8 | -------------------------------------------------------------------------------- /samples/ig-dashboard/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import registerServiceWorker from './registerServiceWorker'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | registerServiceWorker(); 8 | -------------------------------------------------------------------------------- /samples/ig-editors/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import registerServiceWorker from './registerServiceWorker'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | registerServiceWorker(); 8 | -------------------------------------------------------------------------------- /samples/ig-financial-state/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import registerServiceWorker from './registerServiceWorker'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | registerServiceWorker(); 8 | -------------------------------------------------------------------------------- /src/props/igColorPickerSplitButton.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igColorPickerSplitButton = { 2 | id: PropTypes.string.isRequired, 3 | items: PropTypes.array, 4 | defaultColor: PropTypes.string, 5 | hasDefaultIcon: PropTypes.bool, 6 | defaultItemName: PropTypes.string, 7 | swapDefaultEnabled: PropTypes.bool 8 | } 9 | -------------------------------------------------------------------------------- /tests/unit/igMap/test.js: -------------------------------------------------------------------------------- 1 | function main() { 2 | describe("Basic test igMap", function() { 3 | var opts = { 4 | id: "igComponent", 5 | height: "200px", 6 | width: "200px" 7 | }; 8 | $.ig.react.test.async("igMap", opts); 9 | }); 10 | } 11 | exports.main = main; -------------------------------------------------------------------------------- /tests/unit/igBulletGraph/test.js: -------------------------------------------------------------------------------- 1 | function main() { 2 | describe("Test igBulletGraph", function() { 3 | $.ig.react.test.async("igBulletGraph", 4 | { 5 | id: "igComponent", 6 | providerContainer: {}, 7 | width: 300, 8 | height: 300 9 | }); 10 | }); 11 | } 12 | exports.main = main; -------------------------------------------------------------------------------- /src/props/igChartLegend.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igChartLegend = { 2 | id: PropTypes.string.isRequired, 3 | type: PropTypes.oneOf([ 4 | "item", 5 | "legend" 6 | ]), 7 | width: PropTypes.oneOfType([ 8 | PropTypes.string, 9 | PropTypes.number 10 | ]), 11 | height: PropTypes.oneOfType([ 12 | PropTypes.string, 13 | PropTypes.number 14 | ]) 15 | } 16 | -------------------------------------------------------------------------------- /dist/npm/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "igniteui-react-wrappers", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/IgniteUI/igniteui-react-wrappers.git" 8 | }, 9 | "dependencies": { 10 | "react": "^17.0.2", 11 | "create-react-class": "^15.6.3", 12 | "prop-types": "^15.6.2" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /samples/ig-editors/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /samples/ig-dashboard/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /samples/ig-financial-state/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /samples/ig-grid/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "igGrid React", 3 | "name": "Infragistics igGrid React Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/props/igBaseChart.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igBaseChart = { 2 | id: PropTypes.string.isRequired, 3 | width: PropTypes.number, 4 | height: PropTypes.number, 5 | tooltipTemplate: PropTypes.string, 6 | maxRecCount: PropTypes.number, 7 | dataSource: PropTypes.object, 8 | dataSourceType: PropTypes.string, 9 | dataSourceUrl: PropTypes.string, 10 | responseTotalRecCountKey: PropTypes.string, 11 | responseDataKey: PropTypes.string 12 | } 13 | -------------------------------------------------------------------------------- /src/props/igProgressBar.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igProgressBar = { 2 | id: PropTypes.string.isRequired, 3 | animate: PropTypes.bool, 4 | animateTimeout: PropTypes.number, 5 | max: PropTypes.number, 6 | min: PropTypes.number, 7 | orientation: PropTypes.string, 8 | value: PropTypes.number, 9 | width: PropTypes.string, 10 | height: PropTypes.string, 11 | range: PropTypes.bool, 12 | queue: PropTypes.bool, 13 | endValue: PropTypes.number 14 | } 15 | -------------------------------------------------------------------------------- /src/props/igSplitButton.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igSplitButtonItem = { 2 | name: PropTypes.string, 3 | label: PropTypes.string, 4 | iconClass: PropTypes.string 5 | } 6 | 7 | $.ig.react.propTypes.igSplitButton = { 8 | id: PropTypes.string.isRequired, 9 | items: PropTypes.arrayOf( 10 | PropTypes.shape($.ig.react.propTypes.shapes.igSplitButtonItem) 11 | ), 12 | defaultItemName: PropTypes.string, 13 | swapDefaultEnabled: PropTypes.bool 14 | } 15 | -------------------------------------------------------------------------------- /tests/unit/igHtmlEditor/test.js: -------------------------------------------------------------------------------- 1 | function main() { 2 | describe("Basic test igHtmlEditor", function() { 3 | var val = "

Ignite UI controls:

"; 4 | $.ig.react.test.async("igHtmlEditor", { 5 | value: val, 6 | height: "400px", 7 | width: "700px" 8 | }, function (e, c) { 9 | expect(c.igControl.getContent("html") === val).toBe(true); 10 | }); 11 | }); 12 | } 13 | exports.main = main; -------------------------------------------------------------------------------- /tests/unit/igLinearGauge/test.js: -------------------------------------------------------------------------------- 1 | function main() { 2 | describe("Basic test igLinearGauge", function() { 3 | var opts = { 4 | id: "igComponent", 5 | height: "80px", 6 | width: "100%", 7 | value: 27, 8 | maximumValue: 30, 9 | ranges: [{ startValue: 0, endValue: 22, name: "target" }] 10 | }; 11 | $.ig.react.test.async("igLinearGauge", opts); 12 | }); 13 | } 14 | exports.main = main; -------------------------------------------------------------------------------- /tests/unit/igRadialGauge/test.js: -------------------------------------------------------------------------------- 1 | function main() { 2 | describe("Basic test igRadialGauge", function() { 3 | var opts = { 4 | id: "igComponent", 5 | height: "80px", 6 | width: "100%", 7 | value: 27, 8 | maximumValue: 30, 9 | ranges: [{ startValue: 0, endValue: 22, name: "target" }] 10 | }; 11 | $.ig.react.test.async("igRadialGauge", opts); 12 | }); 13 | } 14 | exports.main = main; -------------------------------------------------------------------------------- /src/components/igMap.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgMap", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgMap = createReactClass($.ig.react.core.buildComponent("igMap")); 15 | if (window) { 16 | window.IgMap = IgMap; 17 | } 18 | return IgMap; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igGrid.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgGrid", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgGrid = createReactClass($.ig.react.core.buildComponent("igGrid")); 15 | if (window) { 16 | window.IgGrid = IgGrid; 17 | } 18 | return IgGrid; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igTree.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgTree", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgTree = createReactClass($.ig.react.core.buildComponent("igTree")); 15 | if (window) { 16 | window.IgTree = IgTree; 17 | } 18 | return IgTree; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igCombo.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgCombo", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgCombo = createReactClass($.ig.react.core.buildComponent("igCombo")); 15 | if (window) { 16 | window.IgCombo = IgCombo; 17 | } 18 | return IgCombo; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igButton.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgButton", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgButton = createReactClass($.ig.react.core.buildComponent("igButton")); 15 | if (window) { 16 | window.IgButton = IgButton; 17 | } 18 | return IgButton; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igDialog.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgDialog", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgDialog = createReactClass($.ig.react.core.buildComponent("igDialog")); 15 | if (window) { 16 | window.IgDialog = IgDialog; 17 | } 18 | return IgDialog; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igRating.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgRating", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgRating = createReactClass($.ig.react.core.buildComponent("igRating")); 15 | if (window) { 16 | window.IgRating = IgRating; 17 | } 18 | return IgRating; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igScroll.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgScroll", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgScroll = createReactClass($.ig.react.core.buildComponent("igScroll")); 15 | if (window) { 16 | window.IgScroll = IgScroll; 17 | } 18 | return IgScroll; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igSlider.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgSlider", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgSlider = createReactClass($.ig.react.core.buildComponent("igSlider")); 15 | if (window) { 16 | window.IgSlider = IgSlider; 17 | } 18 | return IgSlider; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igUpload.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgUpload", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgUpload = createReactClass($.ig.react.core.buildComponent("igUpload")); 15 | if (window) { 16 | window.IgUpload = IgUpload; 17 | } 18 | return IgUpload; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igPopover.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgPopover", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgPopover = createReactClass($.ig.react.core.buildComponent("igPopover")); 15 | if (window) { 16 | window.IgPopover = IgPopover; 17 | } 18 | return IgPopover; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igToolbar.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgToolbar", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgToolbar = createReactClass($.ig.react.core.buildComponent("igToolbar")); 15 | if (window) { 16 | window.IgToolbar = IgToolbar; 17 | } 18 | return IgToolbar; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igZoombar.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgZoombar", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgZoombar = createReactClass($.ig.react.core.buildComponent("igZoombar")); 15 | if (window) { 16 | window.IgZoombar = IgZoombar; 17 | } 18 | return IgZoombar; 19 | })); 20 | -------------------------------------------------------------------------------- /src/props/igPieChart.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igPieChart = { 2 | id: PropTypes.string.isRequired, 3 | width: PropTypes.oneOfType([ 4 | PropTypes.string, 5 | PropTypes.number 6 | ]), 7 | height: PropTypes.oneOfType([ 8 | PropTypes.string, 9 | PropTypes.number 10 | ]), 11 | dataSource: PropTypes.object, 12 | dataSourceUrl: PropTypes.string, 13 | dataSourceType: PropTypes.string, 14 | responseDataKey: PropTypes.oneOfType([ 15 | PropTypes.string 16 | ]), 17 | responseDataType: PropTypes.oneOfType([ 18 | PropTypes.string 19 | ]) 20 | } 21 | -------------------------------------------------------------------------------- /src/components/igNotifier.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgNotifier", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgNotifier = createReactClass($.ig.react.core.buildComponent("igNotifier")); 15 | if (window) { 16 | window.IgNotifier = IgNotifier; 17 | } 18 | return IgNotifier; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igPieChart.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgPieChart", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgPieChart = createReactClass($.ig.react.core.buildComponent("igPieChart")); 15 | if (window) { 16 | window.IgPieChart = IgPieChart; 17 | } 18 | return IgPieChart; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igSplitter.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgSplitter", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgSplitter = createReactClass($.ig.react.core.buildComponent("igSplitter")); 15 | if (window) { 16 | window.IgSplitter = IgSplitter; 17 | } 18 | return IgSplitter; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igTreeGrid.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgTreeGrid", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgTreeGrid = createReactClass($.ig.react.core.buildComponent("igTreeGrid")); 15 | if (window) { 16 | window.IgTreeGrid = IgTreeGrid; 17 | } 18 | return IgTreeGrid; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igBaseChart.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgBaseChart", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgBaseChart = createReactClass($.ig.react.core.buildComponent("igBaseChart")); 15 | if (window) { 16 | window.IgBaseChart = IgBaseChart; 17 | } 18 | return IgBaseChart; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igDataChart.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgDataChart", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgDataChart = createReactClass($.ig.react.core.buildComponent("igDataChart")); 15 | if (window) { 16 | window.IgDataChart = IgDataChart; 17 | } 18 | return IgDataChart; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igPivotGrid.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgPivotGrid", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgPivotGrid = createReactClass($.ig.react.core.buildComponent("igPivotGrid")); 15 | if (window) { 16 | window.IgPivotGrid = IgPivotGrid; 17 | } 18 | return IgPivotGrid; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igPivotView.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgPivotView", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgPivotView = createReactClass($.ig.react.core.buildComponent("igPivotView")); 15 | if (window) { 16 | window.IgPivotView = IgPivotView; 17 | } 18 | return IgPivotView; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igScheduler.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgScheduler", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgScheduler = createReactClass($.ig.react.core.buildComponent("igScheduler")); 15 | if (window) { 16 | window.IgScheduler = IgScheduler; 17 | } 18 | return IgScheduler; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igSparkline.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgSparkline", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgSparkline = createReactClass($.ig.react.core.buildComponent("igSparkline")); 15 | if (window) { 16 | window.IgSparkline = IgSparkline; 17 | } 18 | return IgSparkline; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igValidator.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgValidator", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgValidator = createReactClass($.ig.react.core.buildComponent("igValidator")); 15 | if (window) { 16 | window.IgValidator = IgValidator; 17 | } 18 | return IgValidator; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igBaseEditor.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgBaseEditor", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgBaseEditor = createReactClass($.ig.react.core.buildComponent("igBaseEditor")); 15 | if (window) { 16 | window.IgBaseEditor = IgBaseEditor; 17 | } 18 | return IgBaseEditor; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igDateEditor.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgDateEditor", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgDateEditor = createReactClass($.ig.react.core.buildComponent("igDateEditor")); 15 | if (window) { 16 | window.IgDateEditor = IgDateEditor; 17 | } 18 | return IgDateEditor; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igDatePicker.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgDatePicker", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgDatePicker = createReactClass($.ig.react.core.buildComponent("igDatePicker")); 15 | if (window) { 16 | window.IgDatePicker = IgDatePicker; 17 | } 18 | return IgDatePicker; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igHtmlEditor.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgHtmlEditor", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgHtmlEditor = createReactClass($.ig.react.core.buildComponent("igHtmlEditor")); 15 | if (window) { 16 | window.IgHtmlEditor = IgHtmlEditor; 17 | } 18 | return IgHtmlEditor; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igMaskEditor.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgMaskEditor", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgMaskEditor = createReactClass($.ig.react.core.buildComponent("igMaskEditor")); 15 | if (window) { 16 | window.IgMaskEditor = IgMaskEditor; 17 | } 18 | return IgMaskEditor; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igRadialMenu.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgRadialMenu", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgRadialMenu = createReactClass($.ig.react.core.buildComponent("igRadialMenu")); 15 | if (window) { 16 | window.IgRadialMenu = IgRadialMenu; 17 | } 18 | return IgRadialMenu; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igShapeChart.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgShapeChart", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgShapeChart = createReactClass($.ig.react.core.buildComponent("igShapeChart")); 15 | if (window) { 16 | window.IgShapeChart = IgShapeChart; 17 | } 18 | return IgShapeChart; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igTextEditor.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgTextEditor", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgTextEditor = createReactClass($.ig.react.core.buildComponent("igTextEditor")); 15 | if (window) { 16 | window.IgTextEditor = IgTextEditor; 17 | } 18 | return IgTextEditor; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igTimePicker.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgTimePicker", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgTimePicker = createReactClass($.ig.react.core.buildComponent("igTimePicker")); 15 | if (window) { 16 | window.IgTimePicker = IgTimePicker; 17 | } 18 | return IgTimePicker; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igZoomSlider.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgZoomSlider", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgZoomSlider = createReactClass($.ig.react.core.buildComponent("igZoomSlider")); 15 | if (window) { 16 | window.IgZoomSlider = IgZoomSlider; 17 | } 18 | return IgZoomSlider; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igBulletGraph.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgBulletGraph", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgBulletGraph = createReactClass($.ig.react.core.buildComponent("igBulletGraph")); 15 | if (window) { 16 | window.IgBulletGraph = IgBulletGraph; 17 | } 18 | return IgBulletGraph; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igChartLegend.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgChartLegend", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgChartLegend = createReactClass($.ig.react.core.buildComponent("igChartLegend")); 15 | if (window) { 16 | window.IgChartLegend = IgChartLegend; 17 | } 18 | return IgChartLegend; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igColorPicker.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgColorPicker", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgColorPicker = createReactClass($.ig.react.core.buildComponent("igColorPicker")); 15 | if (window) { 16 | window.IgColorPicker = IgColorPicker; 17 | } 18 | return IgColorPicker; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igFunnelChart.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgFunnelChart", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgFunnelChart = createReactClass($.ig.react.core.buildComponent("igFunnelChart")); 15 | if (window) { 16 | window.IgFunnelChart = IgFunnelChart; 17 | } 18 | return IgFunnelChart; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igLinearGauge.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgLinearGauge", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgLinearGauge = createReactClass($.ig.react.core.buildComponent("igLinearGauge")); 15 | if (window) { 16 | window.IgLinearGauge = IgLinearGauge; 17 | } 18 | return IgLinearGauge; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igProgressBar.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgProgressBar", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgProgressBar = createReactClass($.ig.react.core.buildComponent("igProgressBar")); 15 | if (window) { 16 | window.IgProgressBar = IgProgressBar; 17 | } 18 | return IgProgressBar; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igRadialGauge.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgRadialGauge", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgRadialGauge = createReactClass($.ig.react.core.buildComponent("igRadialGauge")); 15 | if (window) { 16 | window.IgRadialGauge = IgRadialGauge; 17 | } 18 | return IgRadialGauge; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igSplitButton.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgSplitButton", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgSplitButton = createReactClass($.ig.react.core.buildComponent("igSplitButton")); 15 | if (window) { 16 | window.IgSplitButton = IgSplitButton; 17 | } 18 | return IgSplitButton; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igSpreadsheet.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgSpreadsheet", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgSpreadsheet = createReactClass($.ig.react.core.buildComponent("igSpreadsheet")); 15 | if (window) { 16 | window.IgSpreadsheet = IgSpreadsheet; 17 | } 18 | return IgSpreadsheet; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igTileManager.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgTileManager", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgTileManager = createReactClass($.ig.react.core.buildComponent("igTileManager")); 15 | if (window) { 16 | window.IgTileManager = IgTileManager; 17 | } 18 | return IgTileManager; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igVideoPlayer.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgVideoPlayer", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgVideoPlayer = createReactClass($.ig.react.core.buildComponent("igVideoPlayer")); 15 | if (window) { 16 | window.IgVideoPlayer = IgVideoPlayer; 17 | } 18 | return IgVideoPlayer; 19 | })); 20 | -------------------------------------------------------------------------------- /src/props/igEditorFilter.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgEditorFilter", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgEditorFilter = createReactClass($.ig.react.core.buildComponent("igEditorFilter")); 15 | if (window) { 16 | window.IgEditorFilter = IgEditorFilter; 17 | } 18 | return IgEditorFilter; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igBrowseButton.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgBrowseButton", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgBrowseButton = createReactClass($.ig.react.core.buildComponent("igBrowseButton")); 15 | if (window) { 16 | window.IgBrowseButton = IgBrowseButton; 17 | } 18 | return IgBrowseButton; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igEditorFilter.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgEditorFilter", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgEditorFilter = createReactClass($.ig.react.core.buildComponent("igEditorFilter")); 15 | if (window) { 16 | window.IgEditorFilter = IgEditorFilter; 17 | } 18 | return IgEditorFilter; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igCategoryChart.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgCategoryChart", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgCategoryChart = createReactClass($.ig.react.core.buildComponent("igCategoryChart")); 15 | if (window) { 16 | window.IgCategoryChart = IgCategoryChart; 17 | } 18 | return IgCategoryChart; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igDoughnutChart.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgDoughnutChart", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgDoughnutChart = createReactClass($.ig.react.core.buildComponent("igDoughnutChart")); 15 | if (window) { 16 | window.IgDoughnutChart = IgDoughnutChart; 17 | } 18 | return IgDoughnutChart; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igLayoutManager.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgLayoutManager", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgLayoutManager = createReactClass($.ig.react.core.buildComponent("igLayoutManager")); 15 | if (window) { 16 | window.IgLayoutManager = IgLayoutManager; 17 | } 18 | return IgLayoutManager; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igNumericEditor.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgNumericEditor", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgNumericEditor = createReactClass($.ig.react.core.buildComponent("igNumericEditor")); 15 | if (window) { 16 | window.IgNumericEditor = IgNumericEditor; 17 | } 18 | return IgNumericEditor; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igPercentEditor.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgPercentEditor", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgPercentEditor = createReactClass($.ig.react.core.buildComponent("igPercentEditor")); 15 | if (window) { 16 | window.IgPercentEditor = IgPercentEditor; 17 | } 18 | return IgPercentEditor; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igQRCodeBarcode.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgQRCodeBarcode", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgQRCodeBarcode = createReactClass($.ig.react.core.buildComponent("igQRCodeBarcode")); 15 | if (window) { 16 | window.IgQRCodeBarcode = IgQRCodeBarcode; 17 | } 18 | return IgQRCodeBarcode; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igToolbarButton.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgToolbarButton", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgToolbarButton = createReactClass($.ig.react.core.buildComponent("igToolbarButton")); 15 | if (window) { 16 | window.IgToolbarButton = IgToolbarButton; 17 | } 18 | return IgToolbarButton; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igCheckboxEditor.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgCheckboxEditor", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgCheckboxEditor = createReactClass($.ig.react.core.buildComponent("igCheckboxEditor")); 15 | if (window) { 16 | window.IgCheckboxEditor = IgCheckboxEditor; 17 | } 18 | return IgCheckboxEditor; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igCurrencyEditor.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgCurrencyEditor", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgCurrencyEditor = createReactClass($.ig.react.core.buildComponent("igCurrencyEditor")); 15 | if (window) { 16 | window.IgCurrencyEditor = IgCurrencyEditor; 17 | } 18 | return IgCurrencyEditor; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igFinancialChart.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgFinancialChart", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgFinancialChart = createReactClass($.ig.react.core.buildComponent("igFinancialChart")); 15 | if (window) { 16 | window.IgFinancialChart = IgFinancialChart; 17 | } 18 | return IgFinancialChart; 19 | })); 20 | -------------------------------------------------------------------------------- /src/props/igHtmlEditor.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igHtmlEditor = { 2 | id: PropTypes.string.isRequired, 3 | showFormattingToolbar: PropTypes.bool, 4 | showTextToolbar: PropTypes.bool, 5 | showInsertObjectToolbar: PropTypes.bool, 6 | showCopyPasteToolbar: PropTypes.bool, 7 | width: PropTypes.oneOfType([ 8 | PropTypes.string, 9 | PropTypes.number 10 | ]), 11 | height: PropTypes.oneOfType([ 12 | PropTypes.string, 13 | PropTypes.number 14 | ]), 15 | toolbarSettings: PropTypes.array, 16 | customToolbars: PropTypes.array, 17 | inputName: PropTypes.string, 18 | value: PropTypes.string 19 | } 20 | -------------------------------------------------------------------------------- /src/props/igHierarchicalGrid.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgHierarchicalGrid", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgHierarchicalGrid = createReactClass($.ig.react.core.buildComponent("igHierarchicalGrid")); 15 | if (window) { 16 | window.IgHierarchicalGrid = IgHierarchicalGrid; 17 | } 18 | return IgHierarchicalGrid; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igHierarchicalGrid.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgHierarchicalGrid", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgHierarchicalGrid = createReactClass($.ig.react.core.buildComponent("igHierarchicalGrid")); 15 | if (window) { 16 | window.IgHierarchicalGrid = IgHierarchicalGrid; 17 | } 18 | return IgHierarchicalGrid; 19 | })); 20 | -------------------------------------------------------------------------------- /src/components/igPivotDataSelector.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgPivotDataSelector", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgPivotDataSelector = createReactClass($.ig.react.core.buildComponent("igPivotDataSelector")); 15 | if (window) { 16 | window.IgPivotDataSelector = IgPivotDataSelector; 17 | } 18 | return IgPivotDataSelector; 19 | })); 20 | -------------------------------------------------------------------------------- /src/props/igBaseEditor.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igBaseEditor = { 2 | id: PropTypes.string.isRequired, 3 | width: PropTypes.oneOfType([ 4 | PropTypes.string, 5 | PropTypes.number 6 | ]), 7 | height: PropTypes.oneOfType([ 8 | PropTypes.string, 9 | PropTypes.number 10 | ]), 11 | value: PropTypes.object, 12 | tabIndex: PropTypes.number, 13 | allowNullValue: PropTypes.bool, 14 | nullValue: PropTypes.oneOfType([ 15 | PropTypes.string, 16 | PropTypes.number 17 | ]), 18 | inputName: PropTypes.string, 19 | readOnly: PropTypes.bool, 20 | disabled: PropTypes.bool, 21 | validatorOptions: PropTypes.object 22 | } 23 | -------------------------------------------------------------------------------- /src/props/igSlider.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igSliderBookmarks = { 2 | value: PropTypes.number, 3 | title: PropTypes.string, 4 | disabled: PropTypes.bool, 5 | css: PropTypes.string 6 | } 7 | 8 | $.ig.react.propTypes.igSlider = { 9 | id: PropTypes.string.isRequired, 10 | animate: PropTypes.bool, 11 | max: PropTypes.number, 12 | min: PropTypes.number, 13 | orientation: PropTypes.any, 14 | step: PropTypes.number, 15 | value: PropTypes.number, 16 | bookmarks: PropTypes.shape( 17 | $.ig.react.propTypes.shapes.igSliderBookmarks 18 | ), 19 | showBookmarkTitle: PropTypes.bool, 20 | syncHandleWithBookmark: PropTypes.bool 21 | } 22 | -------------------------------------------------------------------------------- /src/props/igToolbar.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igToolbarLocale = { 2 | collapseButtonTitle: PropTypes.object, 3 | expandButtonTitle: PropTypes.object 4 | } 5 | 6 | $.ig.react.propTypes.igToolbar = { 7 | id: PropTypes.string.isRequired, 8 | height: PropTypes.object, 9 | width: PropTypes.object, 10 | allowCollapsing: PropTypes.bool, 11 | collapseButtonIcon: PropTypes.string, 12 | expandButtonIcon: PropTypes.string, 13 | name: PropTypes.string, 14 | displayName: PropTypes.string, 15 | items: PropTypes.array, 16 | isExpanded: PropTypes.bool, 17 | locale: PropTypes.shape( 18 | $.ig.react.propTypes.shapes.igToolbarLocale 19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /src/components/igColorPickerSplitButton.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define("IgColorPickerSplitButton", [ 4 | "react", 5 | "jquery", 6 | "create-react-class", 7 | "../dist/igniteui-react.js" 8 | ], factory ); 9 | } else { 10 | factory(React, jQuery, createReactClass); 11 | } 12 | } 13 | (function (React, $, createReactClass) { 14 | var IgColorPickerSplitButton = createReactClass($.ig.react.core.buildComponent("igColorPickerSplitButton")); 15 | if (window) { 16 | window.IgColorPickerSplitButton = IgColorPickerSplitButton; 17 | } 18 | return IgColorPickerSplitButton; 19 | })); 20 | -------------------------------------------------------------------------------- /src/props/igCheckboxEditor.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igCheckboxEditor = { 2 | id: PropTypes.string.isRequired, 3 | checked: PropTypes.bool, 4 | size: PropTypes.oneOf([ 5 | "verysmall", 6 | "small", 7 | "normal", 8 | "large" 9 | ]), 10 | iconClass: PropTypes.string, 11 | tabIndex: PropTypes.number, 12 | readOnly: PropTypes.bool, 13 | width: PropTypes.oneOfType([ 14 | PropTypes.string, 15 | PropTypes.number 16 | ]), 17 | height: PropTypes.oneOfType([ 18 | PropTypes.string, 19 | PropTypes.number 20 | ]), 21 | value: PropTypes.object, 22 | inputName: PropTypes.string, 23 | disabled: PropTypes.bool, 24 | validatorOptions: PropTypes.object 25 | } 26 | -------------------------------------------------------------------------------- /samples/ig-grid/src/sample.css: -------------------------------------------------------------------------------- 1 | .push-down { 2 | margin-top:4em; 3 | } 4 | 5 | .push-down-md { 6 | margin-top:2em; 7 | } 8 | 9 | .push-down-xs { 10 | margin-top:1em; 11 | } 12 | 13 | footer { 14 | border-top:1px solid #ccc; 15 | background-color:#ddd; 16 | padding:50px; 17 | margin-top:25px; 18 | color:#999; 19 | } 20 | 21 | .description { 22 | border-bottom: 1px solid #eee; 23 | margin-bottom: 15px; 24 | margin-top: 15px; 25 | } 26 | 27 | .try-it-out hr { 28 | margin: 0px; 29 | margin-top: 4px; 30 | } 31 | 32 | 33 | .try-it-out ul li{ 34 | margin-top: 8px; 35 | margin-bottom: 8px; 36 | } 37 | 38 | .ui-state-hover, .ui-widget-content .ui-state-hover { 39 | color: #070707 !important; 40 | } -------------------------------------------------------------------------------- /src/props/igButton.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igButtonLink = { 2 | href: PropTypes.object, 3 | target: PropTypes.object, 4 | title: PropTypes.object 5 | } 6 | 7 | $.ig.react.propTypes.shapes.igButtonIcons = { 8 | primary: PropTypes.object, 9 | secondary: PropTypes.object 10 | } 11 | 12 | $.ig.react.propTypes.igButton = { 13 | id: PropTypes.string.isRequired, 14 | width: PropTypes.object, 15 | height: PropTypes.object, 16 | link: PropTypes.shape( 17 | $.ig.react.propTypes.shapes.igButtonLink 18 | ), 19 | labelText: PropTypes.string, 20 | centerLabel: PropTypes.bool, 21 | css: PropTypes.object, 22 | onlyIcons: PropTypes.bool, 23 | icons: PropTypes.shape( 24 | $.ig.react.propTypes.shapes.igButtonIcons 25 | ), 26 | title: PropTypes.bool 27 | } 28 | -------------------------------------------------------------------------------- /src/props/igRating.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igRating = { 2 | id: PropTypes.string.isRequired, 3 | vertical: PropTypes.bool, 4 | value: PropTypes.oneOfType([ 5 | PropTypes.number, 6 | PropTypes.string 7 | ]), 8 | valueHover: PropTypes.oneOfType([ 9 | PropTypes.number, 10 | PropTypes.string 11 | ]), 12 | voteCount: PropTypes.number, 13 | voteWidth: PropTypes.number, 14 | voteHeight: PropTypes.number, 15 | swapDirection: PropTypes.bool, 16 | valueAsPercent: PropTypes.bool, 17 | focusable: PropTypes.bool, 18 | precision: PropTypes.oneOf([ 19 | "exact", 20 | "half", 21 | "whole" 22 | ]), 23 | precisionZeroVote: PropTypes.number, 24 | roundedDecimalPlaces: PropTypes.number, 25 | theme: PropTypes.string, 26 | validatorOptions: PropTypes.object, 27 | cssVotes: PropTypes.object 28 | } 29 | -------------------------------------------------------------------------------- /samples/ig-dashboard/src/sample.css: -------------------------------------------------------------------------------- 1 | .push-down { 2 | margin-top:4em; 3 | } 4 | 5 | .push-down-md { 6 | margin-top:2em; 7 | } 8 | 9 | .push-down-xs { 10 | margin-top:1em; 11 | } 12 | 13 | footer { 14 | border-top:1px solid #ccc; 15 | background-color:#ddd; 16 | padding:50px; 17 | margin-top:25px; 18 | color:#999; 19 | } 20 | 21 | .description { 22 | border-bottom: 1px solid #eee; 23 | margin-bottom: 15px; 24 | margin-top: 15px; 25 | } 26 | 27 | .try-it-out hr { 28 | margin: 0px; 29 | margin-top: 4px; 30 | } 31 | 32 | 33 | .try-it-out ul li{ 34 | margin-top: 8px; 35 | margin-bottom: 8px; 36 | } 37 | 38 | .ui-state-hover, 39 | .ui-widget-content .ui-state-hover { 40 | color: #070707; 41 | } 42 | 43 | .ui-widget-content { 44 | border: none; 45 | } 46 | 47 | .header { 48 | color: #337ab7; 49 | } -------------------------------------------------------------------------------- /samples/ig-grid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ig-grid", 3 | "version": "1.0.0", 4 | "private": true, 5 | "dependencies": { 6 | "@infragistics/ignite-ui-full": "^18.1.152", 7 | "babel-runtime": "6.22.0", 8 | "bootstrap": "^3.3.7", 9 | "create-react-class": "^15.7.0", 10 | "igniteui-react-wrappers": "^1.4.0", 11 | "jquery": ">=1.9.1", 12 | "jquery-ui": ">=1.13.0", 13 | "react": "^17.0.2", 14 | "react-dom": "^17.0.2", 15 | "react-scripts": "^5.0.0" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test --env=jsdom", 21 | "eject": "react-scripts eject" 22 | }, 23 | "browserslist": [ 24 | ">0.2%", 25 | "not dead", 26 | "not ie <= 11", 27 | "not op_mini all" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | 39 | # Build 40 | dist/npm/* 41 | !dist/npm/README.md 42 | !dist/npm/package.json 43 | -------------------------------------------------------------------------------- /samples/ig-financial-state/src/components/TotalBox.js: -------------------------------------------------------------------------------- 1 | import IgCurrencyEditor from 'igniteui-react-wrappers/ui/igCurrencyEditor.js'; 2 | import React from 'react'; 3 | 4 | class TotalBox extends React.Component { 5 | getTotal = () => { 6 | var data = this.props.data.data, 7 | total = 0, i; 8 | 9 | for (i = 0; i < data.length; i++) { 10 | total += data[i].profit; 11 | } 12 | return total * 1000000; 13 | }; 14 | 15 | render() { 16 | return ( 17 |
18 |
19 | 28 |
29 | ) 30 | } 31 | } 32 | 33 | export default TotalBox; -------------------------------------------------------------------------------- /samples/ig-editors/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ig-editors", 3 | "version": "1.0.0", 4 | "private": true, 5 | "dependencies": { 6 | "@infragistics/ignite-ui-full": "^18.1.152", 7 | "babel-runtime": "6.22.0", 8 | "bootstrap": "^3.3.7", 9 | "igniteui-react-wrappers": "^1.4.0", 10 | "jquery": ">=1.9.1", 11 | "jquery-ui": ">=1.10.5", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "react-scripts": "^5.0.0" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test --env=jsdom", 20 | "eject": "react-scripts eject" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /samples/ig-dashboard/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ig-dashboard", 3 | "version": "1.0.0", 4 | "private": true, 5 | "dependencies": { 6 | "@infragistics/ignite-ui-full": "^18.1.152", 7 | "babel-runtime": "6.22.0", 8 | "bootstrap": "^3.3.7", 9 | "igniteui-react-wrappers": "^1.4.0", 10 | "jquery": ">=3.5.0", 11 | "jquery-ui": ">=1.13.0", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "react-scripts": "^5.0.0" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test --env=jsdom", 20 | "eject": "react-scripts eject" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/props/igSplitter.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igSplitterPanel = { 2 | size: PropTypes.oneOfType([ 3 | PropTypes.string, 4 | PropTypes.number 5 | ]), 6 | min: PropTypes.oneOfType([ 7 | PropTypes.string, 8 | PropTypes.number 9 | ]), 10 | max: PropTypes.oneOfType([ 11 | PropTypes.string, 12 | PropTypes.number 13 | ]), 14 | resizable: PropTypes.bool, 15 | collapsed: PropTypes.bool, 16 | collapsible: PropTypes.bool 17 | } 18 | 19 | $.ig.react.propTypes.igSplitter = { 20 | id: PropTypes.string.isRequired, 21 | width: PropTypes.oneOfType([ 22 | PropTypes.string, 23 | PropTypes.number 24 | ]), 25 | height: PropTypes.oneOfType([ 26 | PropTypes.string, 27 | PropTypes.number 28 | ]), 29 | orientation: PropTypes.oneOf([ 30 | "vertical", 31 | "horizontal" 32 | ]), 33 | panels: PropTypes.arrayOf( 34 | PropTypes.shape($.ig.react.propTypes.shapes.igSplitterPanel) 35 | ), 36 | dragDelta: PropTypes.number, 37 | resizeOtherSplitters: PropTypes.bool 38 | } 39 | -------------------------------------------------------------------------------- /samples/ig-financial-state/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ig-financial-state", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@infragistics/ignite-ui-full": "latest", 7 | "babel-runtime": "6.22.0", 8 | "bootstrap": "^3.3.7", 9 | "create-react-class": "^15.7.0", 10 | "igniteui-react-wrappers": "^1.4.0", 11 | "jquery": ">=1.9.1", 12 | "jquery-ui": ">=1.10.5", 13 | "react": "^17.0.2", 14 | "react-dom": "^17.0.2", 15 | "react-scripts": "^5.0.0" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test --env=jsdom", 21 | "eject": "react-scripts eject" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/props/igZoombar.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igZoombarDefaultZoomWindow = { 2 | left: PropTypes.number, 3 | width: PropTypes.string 4 | } 5 | 6 | $.ig.react.propTypes.igZoombar = { 7 | id: PropTypes.string.isRequired, 8 | provider: PropTypes.object, 9 | target: PropTypes.oneOfType([ 10 | PropTypes.string, 11 | PropTypes.object 12 | ]), 13 | clone: PropTypes.oneOf([ 14 | "auto", 15 | "none" 16 | ]), 17 | width: PropTypes.oneOfType([ 18 | PropTypes.string, 19 | PropTypes.number 20 | ]), 21 | height: PropTypes.oneOfType([ 22 | PropTypes.number, 23 | PropTypes.string 24 | ]), 25 | zoomAction: PropTypes.oneOf([ 26 | "immediate", 27 | "deferred" 28 | ]), 29 | zoomWindowMoveDistance: PropTypes.number, 30 | defaultZoomWindow: PropTypes.shape( 31 | $.ig.react.propTypes.shapes.igZoombarDefaultZoomWindow 32 | ), 33 | zoomWindowMinWidth: PropTypes.number, 34 | hoverStyleAnimationDuration: PropTypes.number, 35 | windowPanDuration: PropTypes.number, 36 | tabIndex: PropTypes.number 37 | } 38 | -------------------------------------------------------------------------------- /samples/ig-editors/src/sample.css: -------------------------------------------------------------------------------- 1 | .push-down { 2 | margin-top:4em; 3 | } 4 | 5 | .push-down-md { 6 | margin-top:2em; 7 | } 8 | 9 | .push-down-xs { 10 | margin-top:1em; 11 | } 12 | 13 | footer { 14 | border-top:1px solid #ccc; 15 | background-color:#ddd; 16 | padding:50px; 17 | margin-top:25px; 18 | color:#999; 19 | } 20 | 21 | .description { 22 | border-bottom: 1px solid #eee; 23 | margin-bottom: 15px; 24 | margin-top: 15px; 25 | } 26 | 27 | .try-it-out hr { 28 | margin: 0px; 29 | margin-top: 4px; 30 | } 31 | 32 | 33 | .try-it-out ul li{ 34 | margin-top: 8px; 35 | margin-bottom: 8px; 36 | } 37 | 38 | .ui-state-hover, .ui-widget-content .ui-state-hover { 39 | color: #070707; 40 | } 41 | 42 | .well { 43 | height: 100px; 44 | margin: 10px; 45 | } 46 | 47 | h1, 48 | .ui-state-focus { 49 | color: #1e96dc; 50 | } 51 | 52 | .lbl { 53 | display: block; 54 | color: #1e96dc; 55 | } 56 | 57 | h3 { 58 | color: #1e96dc; 59 | text-align: left; 60 | } 61 | 62 | .info { 63 | display: inline-block; 64 | vertical-align: middle; 65 | padding-top: 20px; 66 | } -------------------------------------------------------------------------------- /tests/unit/igGrid/test.js: -------------------------------------------------------------------------------- 1 | function main() { 2 | describe("Test igGrid", function () { 3 | it("Init igGrid and change options ", function () { 4 | var component; 5 | $.ig.react.test.createOrUpdateComponent(IgGrid, { 6 | id: "igComponent", 7 | width: 300, 8 | height: 300, 9 | autoGenerateColumns: true, 10 | dataSource: [{Id: 0, ProductName: "Test"}], 11 | initialized: function (c, e, igControl) { 12 | component = c; 13 | } 14 | }); 15 | expect($("#igComponent").data("igGrid")).not.toBeUndefined(); 16 | $.ig.react.test.createOrUpdateComponent(IgGrid, { 17 | width: 500 18 | }); 19 | expect($("#igComponent_table_container").width()).toBe(500); 20 | expect($.ig.react.core.getWidgetInstance(component, "igGrid") instanceof $.ui.igGrid) 21 | .toBe(true); 22 | }); 23 | }); 24 | } 25 | exports.main = main; 26 | -------------------------------------------------------------------------------- /.github/workflows/node.js.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 3 | 4 | name: Node.js CI 5 | 6 | on: 7 | push: 8 | branches: [ master ] 9 | pull_request: 10 | branches: [ master ] 11 | 12 | jobs: 13 | build: 14 | 15 | runs-on: ubuntu-latest 16 | 17 | strategy: 18 | matrix: 19 | node-version: [12.x, 14.x] 20 | 21 | steps: 22 | - uses: actions/checkout@v2 23 | - name: Use Node.js ${{ matrix.node-version }} 24 | uses: actions/setup-node@v1 25 | with: 26 | node-version: ${{ matrix.node-version }} 27 | - run: npm ci 28 | - run: npm run test 29 | 30 | - name: Publish to coveralls.io 31 | if: github.repository == 'IgniteUI/igniteui-react-wrappers' && matrix.node-version == '14.x' 32 | uses: coverallsapp/github-action@v1.1.2 33 | with: 34 | path-to-lcov: ./coverage/lcov.info 35 | github-token: ${{ github.token }} 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Ignite UI 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/props/igScroll.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igScroll = { 2 | id: PropTypes.string.isRequired, 3 | alwaysVisible: PropTypes.bool, 4 | scrollbarType: PropTypes.oneOf([ 5 | "custom", 6 | "native", 7 | "none" 8 | ]), 9 | minThumbSize: PropTypes.oneOfType([ 10 | PropTypes.number, 11 | PropTypes.string 12 | ]), 13 | modifyDOM: PropTypes.bool, 14 | scrollHeight: PropTypes.number, 15 | scrollWidth: PropTypes.number, 16 | scrollTop: PropTypes.number, 17 | scrollLeft: PropTypes.number, 18 | wheelStep: PropTypes.number, 19 | smallIncrementStep: PropTypes.number, 20 | bigIncrementStep: PropTypes.number, 21 | smoothing: PropTypes.bool, 22 | smoothingStep: PropTypes.number, 23 | smoothingDuration: PropTypes.number, 24 | inertiaStep: PropTypes.number, 25 | inertiaDuration: PropTypes.number, 26 | swipeToleranceX: PropTypes.number, 27 | inertiaDeltaX: PropTypes.number, 28 | inertiaDeltaY: PropTypes.number, 29 | syncedElemsH: PropTypes.array, 30 | syncedElemsV: PropTypes.array, 31 | scrollbarH: PropTypes.string, 32 | scrollbarV: PropTypes.string, 33 | scrollOnlyHBar: PropTypes.bool, 34 | scrollOnlyVBar: PropTypes.bool, 35 | scrollbarHParent: PropTypes.string, 36 | scrollbarVParent: PropTypes.string 37 | } 38 | -------------------------------------------------------------------------------- /tests/unit/igDataChart/test.js: -------------------------------------------------------------------------------- 1 | function main() { 2 | describe("Basic test igDataChart", function() { 3 | var data = [{ 4 | "CountryName": "China", 5 | "Pop1995": 1216, 6 | "Pop2005": 1297, 7 | "Pop2015": 1361, 8 | "Pop2025": 1394 9 | }], 10 | opts = { 11 | id: "igComponent", 12 | dataSource: data, 13 | axes: [{ 14 | name: "NameAxis", 15 | type: "categoryX", 16 | title: "Country", 17 | label: "CountryName" 18 | }, 19 | { 20 | name: "PopulationAxis", 21 | type: "numericY", 22 | minimumvalue: 0, 23 | title: "Milions of People" 24 | }], 25 | series: [{ 26 | name: "2015Population", 27 | type: "column", 28 | isHighlightingEnabled: true, 29 | isTransitionInEnabled: true, 30 | xAxis: "NameAxis", 31 | yAxis: "PopulationAxis", 32 | valueMemberPath: "Pop2015" 33 | }] 34 | }; 35 | $.ig.react.test.async("igDataChart", opts); 36 | }); 37 | } 38 | exports.main = main; -------------------------------------------------------------------------------- /.github/workflows/npm-publish.yml: -------------------------------------------------------------------------------- 1 | name: Npm.js deploy 2 | 3 | on: 4 | release: 5 | types: [created] 6 | 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v2 12 | - uses: actions/setup-node@v1 13 | with: 14 | node-version: 12 15 | registry-url: 'https://registry.npmjs.org' 16 | - run: echo "VERSION=${GITHUB_REF/refs\/tags\//}" >> $GITHUB_ENV 17 | - run: echo ${VERSION} 18 | 19 | - run: echo "NG_CLI_ANALYTICS=false" >> $GITHUB_ENV 20 | - run: echo "NODE_OPTIONS='--max_old_space_size=4096'" >> $GITHUB_ENV 21 | - run: npm ci 22 | 23 | - run: npm run prepare-dist 24 | 25 | # define npm tag 26 | - run: if [[ ${VERSION} == *"alpha"* || ${VERSION} == *"beta"* || ${VERSION} == *"rc"* ]]; then echo "NPM_TAG=next"; else echo "NPM_TAG=latest"; fi >> $GITHUB_ENV 27 | - run: echo ${NPM_TAG} 28 | 29 | # copy readme 30 | - run: cp ../../README.md README.md 31 | working-directory: dist/npm 32 | 33 | # create version and publish it to npmjs 34 | - run: npm version ${VERSION} --no-git-tag-version --save --verbose 35 | working-directory: dist/npm 36 | 37 | - run: npm publish --tag ${NPM_TAG} 38 | working-directory: dist/npm 39 | env: 40 | NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} 41 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: required 2 | dist: xenial 3 | addons: 4 | chrome: stable 5 | services: 6 | - xvfb 7 | language: node_js 8 | node_js: 9 | - 'lts/*' 10 | before_install: 11 | - export DISPLAY=:99.0 12 | 13 | script: 14 | - npm run test 15 | - cat ./coverage/lcov.info | coveralls 16 | 17 | #before_deploy: 18 | # package and navigate to dist 19 | # - npm run prepare-dist 20 | # - cd dist/npm 21 | # update package version 22 | # - npm version "$TRAVIS_TAG" --no-git-tag-version --save 23 | 24 | #deploy: 25 | # provider: npm 26 | # skip_cleanup: true 27 | # email: igniteui@infragistics.com 28 | # api_key: 29 | # secure: O2Zsp89PM2zYp5OI6zc4k6Lg7ICyblxTOjy7LkK9s0hC85dqYHl+fVJ0saBvUMpW0HqFWsYnhvid8pBLgFm2afArjCT+j0Z1oj6vp67R3guYWGZnhX/bU51CFdRRqsAH69R00NLbc5kDSAJkGM4b3BoKGU1CUjb0cmmVUclShbLsf1wCofrZOlH5cYsvdxUD/LUwY0l8gckmyMQTJGbOoIwZl1hz99Ccch4aIqVZnDYg/kC3t76JuAiMufGmr6Rbuh+pgA1ytjVSF4GbPo8rIc4/MCtuimVSePowHoxXhXY/5jd3p0v3xg6Dbfg3D4LMqMa0ViZm2kXUVlMVsyf2O/sj40Kdv6w7RbXQkB5UOfifbcLcnDvNsjoJvWerZ6Yhp8p5Cgt2bPpdSfp2DrxT6PyqK4sOHk/nLNLHUQLrObH9dAsHxa5FhoyXZ5ELfTi3PgIBCPDeRBKWeQ+DKK0zv2AarfBZaHR83HBiltW+INiISQMIh6BW9JbqpMg9VewwghipEBX102kyz0jp/GWIKsxVTopEgWJ8HXxm6DzFQJZCL95Kdey2S9/GD2j5Ffn1JNMiFND609IQ4r3L+PRNQN7JezxgG4GGASwzIdmgpYxS7NXsr8riSYFW7BtqnDv+iAdxW2eMUXSy9C7oXwhadAhpK4IPapUt+yiYv3s29Qw= 30 | # on: 31 | # tags: true 32 | # repo: IgniteUI/igniteui-react-wrappers 33 | # branch: master 34 | -------------------------------------------------------------------------------- /src/props/igSpreadsheet.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igSpreadsheetBrushes = { 2 | } 3 | 4 | $.ig.react.propTypes.igSpreadsheet = { 5 | id: PropTypes.string.isRequired, 6 | width: PropTypes.oneOfType([ 7 | PropTypes.string, 8 | PropTypes.number 9 | ]), 10 | height: PropTypes.oneOfType([ 11 | PropTypes.string, 12 | PropTypes.number 13 | ]), 14 | activeCell: PropTypes.string, 15 | brushes: PropTypes.shape( 16 | $.ig.react.propTypes.shapes.igSpreadsheetBrushes 17 | ), 18 | isScrollLocked: PropTypes.bool, 19 | activeWorksheet: PropTypes.object, 20 | allowAddWorksheet: PropTypes.bool, 21 | allowDeleteWorksheet: PropTypes.bool, 22 | areGridlinesVisible: PropTypes.bool, 23 | areHeadersVisible: PropTypes.bool, 24 | enterKeyNavigationDirection: PropTypes.oneOf([ 25 | "down", 26 | "right", 27 | "up", 28 | "left" 29 | ]), 30 | fixedDecimalPlaceCount: PropTypes.number, 31 | isEnterKeyNavigationEnabled: PropTypes.bool, 32 | isFixedDecimalEnabled: PropTypes.bool, 33 | isFormulaBarVisible: PropTypes.bool, 34 | isInEndMode: PropTypes.bool, 35 | isUndoEnabled: PropTypes.bool, 36 | nameBoxWidth: PropTypes.number, 37 | selectionMode: PropTypes.oneOf([ 38 | "normal", 39 | "extendSelection", 40 | "addToSelection" 41 | ]), 42 | selectedWorksheets: PropTypes.object, 43 | validationInputMessagePosition: PropTypes.object, 44 | workbook: PropTypes.object, 45 | zoomLevel: PropTypes.number 46 | } 47 | -------------------------------------------------------------------------------- /src/props/igPopover.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igPopoverHeaderTemplate = { 2 | closeButton: PropTypes.bool, 3 | title: PropTypes.string 4 | } 5 | 6 | $.ig.react.propTypes.igPopover = { 7 | id: PropTypes.string.isRequired, 8 | closeOnBlur: PropTypes.bool, 9 | direction: PropTypes.oneOf([ 10 | "auto", 11 | "left", 12 | "right", 13 | "top", 14 | "bottom" 15 | ]), 16 | directionPriority: PropTypes.array, 17 | position: PropTypes.oneOf([ 18 | "auto", 19 | "balanced", 20 | "start", 21 | "end" 22 | ]), 23 | width: PropTypes.oneOfType([ 24 | PropTypes.number, 25 | PropTypes.string 26 | ]), 27 | height: PropTypes.oneOfType([ 28 | PropTypes.number, 29 | PropTypes.string 30 | ]), 31 | minWidth: PropTypes.oneOfType([ 32 | PropTypes.number, 33 | PropTypes.string 34 | ]), 35 | maxWidth: PropTypes.oneOfType([ 36 | PropTypes.number, 37 | PropTypes.string 38 | ]), 39 | maxHeight: PropTypes.oneOfType([ 40 | PropTypes.number, 41 | PropTypes.string 42 | ]), 43 | animationDuration: PropTypes.number, 44 | contentTemplate: PropTypes.oneOfType([ 45 | PropTypes.string, 46 | PropTypes.func 47 | ]), 48 | selectors: PropTypes.string, 49 | headerTemplate: PropTypes.shape( 50 | $.ig.react.propTypes.shapes.igPopoverHeaderTemplate 51 | ), 52 | showOn: PropTypes.oneOf([ 53 | "mouseenter", 54 | "click", 55 | "focus" 56 | ]), 57 | containment: PropTypes.object, 58 | appendTo: PropTypes.oneOfType([ 59 | PropTypes.string, 60 | PropTypes.object 61 | ]) 62 | } 63 | -------------------------------------------------------------------------------- /tests/unit/igZoombar/test.js: -------------------------------------------------------------------------------- 1 | function main() { 2 | describe("Basic test igZoombar", function() { 3 | var data = [{ 4 | "CountryName": "China", 5 | "Pop1995": 1216, 6 | "Pop2005": 1297, 7 | "Pop2015": 1361, 8 | "Pop2025": 1394 9 | }], 10 | chartOpts = { 11 | id: "datachart1", 12 | dataSource: data, 13 | axes: [{ 14 | name: "NameAxis", 15 | type: "categoryX", 16 | title: "Country", 17 | label: "CountryName" 18 | }, 19 | { 20 | name: "PopulationAxis", 21 | type: "numericY", 22 | minimumvalue: 0, 23 | title: "Milions of People" 24 | }], 25 | series: [{ 26 | name: "2015Population", 27 | type: "column", 28 | isHighlightingEnabled: true, 29 | isTransitionInEnabled: true, 30 | xAxis: "NameAxis", 31 | yAxis: "PopulationAxis", 32 | valueMemberPath: "Pop2015" 33 | }] 34 | }; 35 | $.ig.react.test.createOrUpdateComponent(IgDataChart, chartOpts, "datachart1_wrapper"); 36 | $.ig.react.test.async("igZoombar", { 37 | id: "igComponent", 38 | target: "#datachart1" 39 | }); 40 | }); 41 | } 42 | exports.main = main; -------------------------------------------------------------------------------- /src/props/igMaskEditor.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igMaskEditor = { 2 | id: PropTypes.string.isRequired, 3 | buttonType: PropTypes.oneOf([ 4 | "clear" 5 | ]), 6 | inputMask: PropTypes.string, 7 | dataMode: PropTypes.oneOf([ 8 | "rawText", 9 | "rawTextWithRequiredPrompts", 10 | "rawTextWithAllPrompts", 11 | "rawTextWithLiterals", 12 | "rawTextWithRequiredPromptsAndLiterals", 13 | "allText" 14 | ]), 15 | unfilledCharsPrompt: PropTypes.string, 16 | padChar: PropTypes.string, 17 | emptyChar: PropTypes.string, 18 | includeKeys: PropTypes.string, 19 | excludeKeys: PropTypes.string, 20 | value: PropTypes.object, 21 | textAlign: PropTypes.oneOf([ 22 | "left", 23 | "right", 24 | "center" 25 | ]), 26 | placeHolder: PropTypes.string, 27 | selectionOnFocus: PropTypes.oneOf([ 28 | "selectAll", 29 | "atStart", 30 | "atEnd", 31 | "browserDefault" 32 | ]), 33 | revertIfNotValid: PropTypes.bool, 34 | preventSubmitOnEnter: PropTypes.bool, 35 | toUpper: PropTypes.bool, 36 | toLower: PropTypes.bool, 37 | suppressNotifications: PropTypes.bool, 38 | width: PropTypes.oneOfType([ 39 | PropTypes.string, 40 | PropTypes.number 41 | ]), 42 | height: PropTypes.oneOfType([ 43 | PropTypes.string, 44 | PropTypes.number 45 | ]), 46 | tabIndex: PropTypes.number, 47 | allowNullValue: PropTypes.bool, 48 | nullValue: PropTypes.oneOfType([ 49 | PropTypes.string, 50 | PropTypes.number 51 | ]), 52 | inputName: PropTypes.string, 53 | readOnly: PropTypes.bool, 54 | disabled: PropTypes.bool, 55 | validatorOptions: PropTypes.object 56 | } 57 | -------------------------------------------------------------------------------- /src/props/igValidator.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igValidatorField = { 2 | selector: PropTypes.oneOfType([ 3 | PropTypes.string, 4 | PropTypes.object 5 | ]) 6 | } 7 | 8 | $.ig.react.propTypes.igValidator = { 9 | id: PropTypes.string.isRequired, 10 | onchange: PropTypes.bool, 11 | onblur: PropTypes.bool, 12 | onsubmit: PropTypes.bool, 13 | required: PropTypes.oneOfType([ 14 | PropTypes.bool, 15 | PropTypes.object 16 | ]), 17 | number: PropTypes.oneOfType([ 18 | PropTypes.bool, 19 | PropTypes.object 20 | ]), 21 | date: PropTypes.oneOfType([ 22 | PropTypes.bool, 23 | PropTypes.object 24 | ]), 25 | email: PropTypes.oneOfType([ 26 | PropTypes.bool, 27 | PropTypes.object 28 | ]), 29 | lengthRange: PropTypes.oneOfType([ 30 | PropTypes.array, 31 | PropTypes.object 32 | ]), 33 | valueRange: PropTypes.oneOfType([ 34 | PropTypes.array, 35 | PropTypes.object 36 | ]), 37 | creditCard: PropTypes.oneOfType([ 38 | PropTypes.bool, 39 | PropTypes.object 40 | ]), 41 | pattern: PropTypes.oneOfType([ 42 | PropTypes.string, 43 | PropTypes.object 44 | ]), 45 | executeAllRules: PropTypes.bool, 46 | messageTarget: PropTypes.element, 47 | errorMessage: PropTypes.string, 48 | successMessage: PropTypes.string, 49 | threshold: PropTypes.number, 50 | equalTo: PropTypes.oneOfType([ 51 | PropTypes.string, 52 | PropTypes.object 53 | ]), 54 | custom: PropTypes.oneOfType([ 55 | PropTypes.func, 56 | PropTypes.string, 57 | PropTypes.object 58 | ]), 59 | fields: PropTypes.arrayOf( 60 | PropTypes.shape($.ig.react.propTypes.shapes.igValidatorField) 61 | ), 62 | notificationOptions: PropTypes.object, 63 | requiredIndication: PropTypes.bool, 64 | optionalIndication: PropTypes.bool 65 | } 66 | -------------------------------------------------------------------------------- /src/props/igDateEditor.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igDateEditor = { 2 | id: PropTypes.string.isRequired, 3 | value: PropTypes.instanceOf(Date), 4 | minValue: PropTypes.instanceOf(Date), 5 | maxValue: PropTypes.instanceOf(Date), 6 | dateDisplayFormat: PropTypes.string, 7 | dateInputFormat: PropTypes.string, 8 | dataMode: PropTypes.oneOf([ 9 | "date", 10 | "displayModeText", 11 | "editModeText" 12 | ]), 13 | displayTimeOffset: PropTypes.object, 14 | buttonType: PropTypes.oneOf([ 15 | "clear", 16 | "spin" 17 | ]), 18 | spinDelta: PropTypes.oneOfType([ 19 | PropTypes.number, 20 | PropTypes.object 21 | ]), 22 | limitSpinToCurrentField: PropTypes.bool, 23 | enableUTCDates: PropTypes.bool, 24 | centuryThreshold: PropTypes.number, 25 | yearShift: PropTypes.number, 26 | nullValue: PropTypes.oneOfType([ 27 | PropTypes.string, 28 | PropTypes.number, 29 | PropTypes.instanceOf(Date) 30 | ]), 31 | includeKeys: PropTypes.string, 32 | excludeKeys: PropTypes.string, 33 | textAlign: PropTypes.oneOf([ 34 | "left", 35 | "right", 36 | "center" 37 | ]), 38 | placeHolder: PropTypes.string, 39 | selectionOnFocus: PropTypes.oneOf([ 40 | "selectAll", 41 | "atStart", 42 | "atEnd", 43 | "browserDefault" 44 | ]), 45 | revertIfNotValid: PropTypes.bool, 46 | preventSubmitOnEnter: PropTypes.bool, 47 | suppressNotifications: PropTypes.bool, 48 | width: PropTypes.oneOfType([ 49 | PropTypes.string, 50 | PropTypes.number 51 | ]), 52 | height: PropTypes.oneOfType([ 53 | PropTypes.string, 54 | PropTypes.number 55 | ]), 56 | tabIndex: PropTypes.number, 57 | allowNullValue: PropTypes.bool, 58 | inputName: PropTypes.string, 59 | readOnly: PropTypes.bool, 60 | disabled: PropTypes.bool, 61 | validatorOptions: PropTypes.object 62 | } 63 | -------------------------------------------------------------------------------- /samples/ig-grid/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | IgniteUI ReactJS Grid 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/props/igLayoutManager.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igLayoutManagerBorderLayout = { 2 | leftWidth: PropTypes.string, 3 | rightWidth: PropTypes.string, 4 | showFooter: PropTypes.bool, 5 | showHeader: PropTypes.bool, 6 | showLeft: PropTypes.bool, 7 | showRight: PropTypes.bool 8 | } 9 | 10 | $.ig.react.propTypes.shapes.igLayoutManagerGridLayout = { 11 | animationDuration: PropTypes.number, 12 | cols: PropTypes.number, 13 | columnHeight: PropTypes.oneOfType([ 14 | PropTypes.string, 15 | PropTypes.number, 16 | PropTypes.array 17 | ]), 18 | columnWidth: PropTypes.oneOfType([ 19 | PropTypes.string, 20 | PropTypes.number, 21 | PropTypes.array 22 | ]), 23 | marginLeft: PropTypes.number, 24 | marginTop: PropTypes.number, 25 | overrideConfigOnSetOption: PropTypes.bool, 26 | rearrangeItems: PropTypes.bool, 27 | rows: PropTypes.number 28 | } 29 | 30 | $.ig.react.propTypes.shapes.igLayoutManagerItem = { 31 | colIndex: PropTypes.number, 32 | colSpan: PropTypes.number, 33 | height: PropTypes.string, 34 | rowIndex: PropTypes.number, 35 | rowSpan: PropTypes.number, 36 | width: PropTypes.number 37 | } 38 | 39 | $.ig.react.propTypes.igLayoutManager = { 40 | id: PropTypes.string.isRequired, 41 | borderLayout: PropTypes.shape( 42 | $.ig.react.propTypes.shapes.igLayoutManagerBorderLayout 43 | ), 44 | gridLayout: PropTypes.shape( 45 | $.ig.react.propTypes.shapes.igLayoutManagerGridLayout 46 | ), 47 | height: PropTypes.oneOfType([ 48 | PropTypes.string, 49 | PropTypes.number 50 | ]), 51 | itemCount: PropTypes.number, 52 | items: PropTypes.arrayOf( 53 | PropTypes.shape($.ig.react.propTypes.shapes.igLayoutManagerItem) 54 | ), 55 | layoutMode: PropTypes.any, 56 | width: PropTypes.oneOfType([ 57 | PropTypes.string, 58 | PropTypes.number 59 | ]) 60 | } 61 | -------------------------------------------------------------------------------- /samples/ig-editors/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | IgniteUI ReactJS Editors 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /samples/ig-dashboard/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | IgniteUI ReactJS Dashboard 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/props/igFunnelChart.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igFunnelChart = { 2 | id: PropTypes.string.isRequired, 3 | bezierPoints: PropTypes.string, 4 | legend: PropTypes.object, 5 | valueMemberPath: PropTypes.string, 6 | brushes: PropTypes.object, 7 | outlines: PropTypes.object, 8 | bottomEdgeWidth: PropTypes.number, 9 | innerLabelMemberPath: PropTypes.string, 10 | outerLabelMemberPath: PropTypes.string, 11 | innerLabelVisibility: PropTypes.oneOf([ 12 | "visible", 13 | "collapsed" 14 | ]), 15 | outerLabelVisibility: PropTypes.oneOf([ 16 | "visible", 17 | "collapsed" 18 | ]), 19 | outerLabelAlignment: PropTypes.oneOf([ 20 | "left", 21 | "right" 22 | ]), 23 | funnelSliceDisplay: PropTypes.oneOf([ 24 | "uniform", 25 | "weighted" 26 | ]), 27 | formatInnerLabel: PropTypes.object, 28 | formatOuterLabel: PropTypes.object, 29 | transitionDuration: PropTypes.number, 30 | isInverted: PropTypes.bool, 31 | useBezierCurve: PropTypes.bool, 32 | allowSliceSelection: PropTypes.bool, 33 | useUnselectedStyle: PropTypes.bool, 34 | selectedSliceStyle: PropTypes.object, 35 | unselectedSliceStyle: PropTypes.object, 36 | legendItemBadgeTemplate: PropTypes.object, 37 | useOuterLabelsForLegend: PropTypes.bool, 38 | textStyle: PropTypes.string, 39 | outerLabelTextStyle: PropTypes.string, 40 | outlineThickness: PropTypes.number, 41 | pixelScalingRatio: PropTypes.number, 42 | outerLabelTextColor: PropTypes.string, 43 | textColor: PropTypes.string, 44 | width: PropTypes.number, 45 | height: PropTypes.number, 46 | tooltipTemplate: PropTypes.string, 47 | maxRecCount: PropTypes.number, 48 | dataSource: PropTypes.object, 49 | dataSourceType: PropTypes.string, 50 | dataSourceUrl: PropTypes.string, 51 | responseTotalRecCountKey: PropTypes.string, 52 | responseDataKey: PropTypes.string 53 | } 54 | -------------------------------------------------------------------------------- /samples/ig-financial-state/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | IgniteUI ReactJS Financial State 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "igniteui-react-wrappers", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/IgniteUI/igniteui-react-wrappers.git" 8 | }, 9 | "dependencies": { 10 | "babel-core": "^6.26.3", 11 | "create-react-class": "^15.7.0", 12 | "prop-types": "^15.6.2", 13 | "react": "^17.0.2", 14 | "react-dom": "^17.0.2" 15 | }, 16 | "scripts": { 17 | "build": "npm run prepare-dist", 18 | "prepare-dist": "uglifyjs src/props/* -b -o dist/npm/igniteui-react.js && node -e \"require('concat-files')(['build/build-wrapper-start','dist/npm/igniteui-react.js','build/build-wrapper-end'], 'dist/npm/igniteui-react.js');\" && uglifyjs src/util/* dist/npm/igniteui-react.js -b -o dist/npm/igniteui-react.js && node -e \"require('fs-extra').ensureDirSync('dist/npm/ui');require('fs-extra').copySync('src/components', 'dist/npm/ui');require('fs-extra').ensureDirSync('dist/npm/dist');\" && uglifyjs dist/npm/igniteui-react.js src/components/* -b -o dist/npm/dist/igniteui-react.js && uglifyjs dist/npm/dist/igniteui-react.js -o dist/npm/dist/igniteui-react.min.js", 19 | "pretest": "npm run build", 20 | "test": "karma start tests/karma.conf.js --single-run --watch=false --code-coverage" 21 | }, 22 | "devDependencies": { 23 | "concat-files": "^0.1.1", 24 | "coveralls": "^3.1.0", 25 | "fs-extra": "^9.1.0", 26 | "jasmine-core": "^3.7.1", 27 | "jspm": "~2.0.0-beta.7", 28 | "karma": "^6.3.2", 29 | "karma-chrome-launcher": "~2.2.0", 30 | "karma-coverage": "^2.0.3", 31 | "karma-jasmine": "^4.0.1", 32 | "karma-jasmine-html-reporter": "^1.5.4", 33 | "karma-junit-reporter": "^2.0.1", 34 | "karma-remap-istanbul": "", 35 | "systemjs": "0.21.6", 36 | "uglify-js": "^3.13.4" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/props/igTextEditor.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igTextEditor = { 2 | id: PropTypes.string.isRequired, 3 | buttonType: PropTypes.oneOf([ 4 | "dropdown", 5 | "clear", 6 | "spin" 7 | ]), 8 | listItems: PropTypes.array, 9 | listWidth: PropTypes.number, 10 | listItemHoverDuration: PropTypes.number, 11 | dropDownAttachedToBody: PropTypes.bool, 12 | dropDownAnimationDuration: PropTypes.number, 13 | visibleItemsCount: PropTypes.number, 14 | includeKeys: PropTypes.string, 15 | excludeKeys: PropTypes.string, 16 | textAlign: PropTypes.oneOf([ 17 | "left", 18 | "right", 19 | "center" 20 | ]), 21 | placeHolder: PropTypes.string, 22 | selectionOnFocus: PropTypes.oneOf([ 23 | "selectAll", 24 | "atStart", 25 | "atEnd", 26 | "browserDefault" 27 | ]), 28 | textMode: PropTypes.oneOf([ 29 | "text", 30 | "password", 31 | "multiline" 32 | ]), 33 | spinWrapAround: PropTypes.bool, 34 | isLimitedToListValues: PropTypes.bool, 35 | revertIfNotValid: PropTypes.bool, 36 | preventSubmitOnEnter: PropTypes.bool, 37 | dropDownOrientation: PropTypes.oneOf([ 38 | "auto", 39 | "bottom", 40 | "top" 41 | ]), 42 | maxLength: PropTypes.number, 43 | dropDownOnReadOnly: PropTypes.bool, 44 | toUpper: PropTypes.bool, 45 | toLower: PropTypes.bool, 46 | suppressNotifications: PropTypes.bool, 47 | suppressKeyboard: PropTypes.bool, 48 | width: PropTypes.oneOfType([ 49 | PropTypes.string, 50 | PropTypes.number 51 | ]), 52 | height: PropTypes.oneOfType([ 53 | PropTypes.string, 54 | PropTypes.number 55 | ]), 56 | value: PropTypes.object, 57 | tabIndex: PropTypes.number, 58 | allowNullValue: PropTypes.bool, 59 | nullValue: PropTypes.oneOfType([ 60 | PropTypes.string, 61 | PropTypes.number 62 | ]), 63 | inputName: PropTypes.string, 64 | readOnly: PropTypes.bool, 65 | disabled: PropTypes.bool, 66 | validatorOptions: PropTypes.object 67 | } 68 | -------------------------------------------------------------------------------- /src/props/igDatePicker.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igDatePicker = { 2 | id: PropTypes.string.isRequired, 3 | buttonType: PropTypes.oneOf([ 4 | "dropdown", 5 | "clear", 6 | "spin" 7 | ]), 8 | datepickerOptions: PropTypes.object, 9 | dropDownOnReadOnly: PropTypes.bool, 10 | suppressKeyboard: PropTypes.bool, 11 | value: PropTypes.instanceOf(Date), 12 | minValue: PropTypes.instanceOf(Date), 13 | maxValue: PropTypes.instanceOf(Date), 14 | dateDisplayFormat: PropTypes.string, 15 | dateInputFormat: PropTypes.string, 16 | dataMode: PropTypes.oneOf([ 17 | "date", 18 | "displayModeText", 19 | "editModeText" 20 | ]), 21 | displayTimeOffset: PropTypes.object, 22 | spinDelta: PropTypes.oneOfType([ 23 | PropTypes.number, 24 | PropTypes.object 25 | ]), 26 | limitSpinToCurrentField: PropTypes.bool, 27 | enableUTCDates: PropTypes.bool, 28 | centuryThreshold: PropTypes.number, 29 | yearShift: PropTypes.number, 30 | nullValue: PropTypes.oneOfType([ 31 | PropTypes.string, 32 | PropTypes.number, 33 | PropTypes.instanceOf(Date) 34 | ]), 35 | includeKeys: PropTypes.string, 36 | excludeKeys: PropTypes.string, 37 | textAlign: PropTypes.oneOf([ 38 | "left", 39 | "right", 40 | "center" 41 | ]), 42 | placeHolder: PropTypes.string, 43 | selectionOnFocus: PropTypes.oneOf([ 44 | "selectAll", 45 | "atStart", 46 | "atEnd", 47 | "browserDefault" 48 | ]), 49 | revertIfNotValid: PropTypes.bool, 50 | preventSubmitOnEnter: PropTypes.bool, 51 | suppressNotifications: PropTypes.bool, 52 | width: PropTypes.oneOfType([ 53 | PropTypes.string, 54 | PropTypes.number 55 | ]), 56 | height: PropTypes.oneOfType([ 57 | PropTypes.string, 58 | PropTypes.number 59 | ]), 60 | tabIndex: PropTypes.number, 61 | allowNullValue: PropTypes.bool, 62 | inputName: PropTypes.string, 63 | readOnly: PropTypes.bool, 64 | disabled: PropTypes.bool, 65 | validatorOptions: PropTypes.object 66 | } 67 | -------------------------------------------------------------------------------- /src/props/igNotifier.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igNotifierHeaderTemplate = { 2 | closeButton: PropTypes.bool, 3 | title: PropTypes.string 4 | } 5 | 6 | $.ig.react.propTypes.igNotifier = { 7 | id: PropTypes.string.isRequired, 8 | state: PropTypes.oneOf([ 9 | "success", 10 | "info", 11 | "warning", 12 | "error" 13 | ]), 14 | notifyLevel: PropTypes.oneOf([ 15 | "success", 16 | "info", 17 | "warning", 18 | "error" 19 | ]), 20 | appendTo: PropTypes.oneOfType([ 21 | PropTypes.string, 22 | PropTypes.object 23 | ]), 24 | mode: PropTypes.oneOf([ 25 | "auto", 26 | "popover", 27 | "inline" 28 | ]), 29 | allowCSSOnTarget: PropTypes.bool, 30 | showIcon: PropTypes.bool, 31 | contentTemplate: PropTypes.oneOfType([ 32 | PropTypes.string, 33 | PropTypes.func 34 | ]), 35 | headerTemplate: PropTypes.shape( 36 | $.ig.react.propTypes.shapes.igNotifierHeaderTemplate 37 | ), 38 | showOn: PropTypes.oneOf([ 39 | "mouseenter", 40 | "click", 41 | "focus", 42 | "manual" 43 | ]), 44 | closeOnBlur: PropTypes.bool, 45 | animationDuration: PropTypes.number, 46 | animationSlideDistance: PropTypes.number, 47 | direction: PropTypes.oneOf([ 48 | "auto", 49 | "left", 50 | "right", 51 | "top", 52 | "bottom" 53 | ]), 54 | directionPriority: PropTypes.array, 55 | position: PropTypes.oneOf([ 56 | "auto", 57 | "balanced", 58 | "start", 59 | "end" 60 | ]), 61 | width: PropTypes.oneOfType([ 62 | PropTypes.number, 63 | PropTypes.string 64 | ]), 65 | height: PropTypes.oneOfType([ 66 | PropTypes.number, 67 | PropTypes.string 68 | ]), 69 | minWidth: PropTypes.oneOfType([ 70 | PropTypes.number, 71 | PropTypes.string 72 | ]), 73 | maxWidth: PropTypes.oneOfType([ 74 | PropTypes.number, 75 | PropTypes.string 76 | ]), 77 | maxHeight: PropTypes.oneOfType([ 78 | PropTypes.number, 79 | PropTypes.string 80 | ]), 81 | containment: PropTypes.object 82 | } 83 | -------------------------------------------------------------------------------- /tests/unit/common/test.js: -------------------------------------------------------------------------------- 1 | function main() { 2 | var defaultConfig = { 3 | igBaseChart: { 4 | skip: true 5 | }, 6 | igBulletGraph: { 7 | skip: true 8 | }, 9 | igColorPickerSplitButton: { 10 | skip: true 11 | }, 12 | igBaseEditor: { 13 | skip: true 14 | }, 15 | igDataChart: { 16 | skip: true 17 | }, 18 | igCategoryChart: { 19 | skip: true 20 | }, 21 | igFinancialChart: { 22 | skip: true 23 | }, 24 | igShapeChart: { 25 | skip: true 26 | }, 27 | igLinearGauge: { 28 | skip: true 29 | }, 30 | igHtmlEditor: { 31 | skip: true 32 | }, 33 | igRadialGauge: { 34 | skip: true 35 | }, 36 | igMap: { 37 | skip: true 38 | }, 39 | IgZoombar: { 40 | skip: true 41 | }, 42 | IgScheduler: { 43 | skip: true 44 | }, 45 | IgSpreadsheet: { 46 | skip: true 47 | } 48 | }; 49 | 50 | describe("Basic react wrappers test", function () { 51 | it("Test rendering component ", function () { 52 | var suite = $.ig.react.propTypes, component, name, config, opts, 53 | initCalled; 54 | for (component in suite) { 55 | if (suite.hasOwnProperty(component) && component.startsWith("ig")) { 56 | name = component.charAt(0).toUpperCase() + component.slice(1); 57 | config = defaultConfig[name] || defaultConfig[component]; 58 | opts = config && config.options ? config.options : {}; 59 | if (config && config.skip) { 60 | continue; 61 | } 62 | initCalled = false; 63 | $.ig.react.test.createOrUpdateComponent(window[name], $.extend({ 64 | id: "igComponent", 65 | initialized: function () { initCalled = true; } 66 | }, opts)); 67 | expect($("#igComponent").data(component)).not.toBeUndefined(); 68 | expect(initCalled).toBeTruthy(); 69 | $.ig.react.test.removeElement(); 70 | } 71 | } 72 | }); 73 | }); 74 | 75 | } 76 | exports.main = main; -------------------------------------------------------------------------------- /samples/ig-grid/src/components/IgDialogBox.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import createReactClass from 'create-react-class'; 3 | import IgButton from 'igniteui-react-wrappers/ui/igButton.js'; 4 | import IgDialog from 'igniteui-react-wrappers/ui/igDialog.js'; 5 | import $ from 'jquery' 6 | import '../sample.css'; 7 | 8 | var IgDialogBox = createReactClass({ 9 | render: function () { 10 | return ( 11 | 20 |

Are you sure you want to delete row with ID?

21 |
22 |
23 | 24 |
25 |
26 | 27 |
28 | 29 | ); 30 | }, 31 | componentWillReceiveProps(nextProps) { 32 | if (this.props.rowId !== nextProps.rowId) { 33 | $(this.refs.dialogText).html("Are you sure you want to delete row with ID " + nextProps.rowId + " ?"); 34 | } 35 | }, 36 | handleDialogStateChanging: function (evt, ui) { 37 | this.props.dialogStateChanging(evt, ui); 38 | }, 39 | handleDeleteDialogAccept: function () { 40 | this.props.deleteDialogAccept(); 41 | }, 42 | handleDeleteDialogCancel: function () { 43 | this.props.deleteDialogCancel(); 44 | } 45 | }); 46 | 47 | export default IgDialogBox; 48 | -------------------------------------------------------------------------------- /tests/karma-test-shim.js: -------------------------------------------------------------------------------- 1 | if (!Object.hasOwnProperty('name')) { 2 | Object.defineProperty(Function.prototype, 'name', { 3 | get: function() { 4 | var matches = this.toString().match(/^\s*function\s*(\S*)\s*\(/); 5 | var name = matches && matches.length > 1 ? matches[1] : ""; 6 | Object.defineProperty(this, 'name', {value: name}); 7 | return name; 8 | } 9 | }); 10 | } 11 | // Load our SystemJS configuration. 12 | System.config({ 13 | defaultJSExtensions: true, 14 | baseURL: '/base/' 15 | }); 16 | // Turn on full stack traces in errors to help debugging 17 | Error.stackTraceLimit = Infinity; 18 | 19 | jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; 20 | 21 | // Cancel Karma's synchronous start, 22 | // we will call `__karma__.start()` later, once all the specs are loaded. 23 | __karma__.loaded = function() {}; 24 | 25 | Promise.all([ 26 | //System.import('@angular/core/testing') 27 | ]).then(function() { 28 | return Promise.all( 29 | Object.keys(window.__karma__.files) // All files served by Karma. 30 | .filter(onlySpecFiles) 31 | .map(function(path) { 32 | return System.import(path).then(function(module) { 33 | if (module.hasOwnProperty('main')) { 34 | module.main(); 35 | } else { 36 | throw new Error('Module ' + path + ' does not implement main() method.'); 37 | } 38 | }); 39 | })); 40 | }) 41 | .then(function() { 42 | __karma__.start(); 43 | }, function(error) { 44 | console.error(error.stack || error); 45 | __karma__.start(); 46 | }); 47 | 48 | function onlySpecFiles(path) { 49 | // check for individual files, if not given, always matches to all 50 | var patternMatched = __karma__.config.files ? 51 | path.match(new RegExp(__karma__.config.files)) : true; 52 | /* 53 | //Test only files in specified path 54 | if (/\/tests\/unit\/common\/.*\.js/.test(path)) { 55 | return true; 56 | } 57 | return false; 58 | */ 59 | return patternMatched && /\/tests\/unit\/.*\.js/.test(path); 60 | } -------------------------------------------------------------------------------- /src/props/igScheduler.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igSchedulerAgendaViewSettings = { 2 | dateRangeInterval: PropTypes.number 3 | } 4 | 5 | $.ig.react.propTypes.shapes.igSchedulerWeekViewSettings = { 6 | weekViewDisplayMode: PropTypes.number, 7 | workingHoursDisplayMode: PropTypes.number, 8 | timeSlotInterval: PropTypes.number 9 | } 10 | 11 | $.ig.react.propTypes.shapes.igSchedulerDayViewSettings = { 12 | timeSlotInterval: PropTypes.number, 13 | dayViewNumberOfDays: PropTypes.number, 14 | workingHoursDisplayMode: PropTypes.number 15 | } 16 | 17 | $.ig.react.propTypes.shapes.igSchedulerMonthViewSettings = { 18 | appointmentMode: PropTypes.string, 19 | isAgendaVisible: PropTypes.bool, 20 | agendaVisibilityType: PropTypes.string, 21 | viewSplitOrientation: PropTypes.string, 22 | isHorizontalSeparatorVisibile: PropTypes.bool, 23 | isVerticalSeparatorVisibile: PropTypes.bool, 24 | isWeekdayVisible: PropTypes.bool, 25 | isWeekNumberVisible: PropTypes.bool, 26 | isPreviousMonthShown: PropTypes.bool, 27 | isNextMonthShown: PropTypes.bool 28 | } 29 | 30 | $.ig.react.propTypes.igScheduler = { 31 | id: PropTypes.string.isRequired, 32 | views: PropTypes.array, 33 | viewMode: PropTypes.oneOf([ 34 | "monthView", 35 | "agendaView" 36 | ]), 37 | selectedDate: PropTypes.instanceOf(Date), 38 | enableTodayButton: PropTypes.bool, 39 | width: PropTypes.oneOfType([ 40 | PropTypes.string, 41 | PropTypes.number 42 | ]), 43 | height: PropTypes.oneOfType([ 44 | PropTypes.string, 45 | PropTypes.number 46 | ]), 47 | agendaViewSettings: PropTypes.shape( 48 | $.ig.react.propTypes.shapes.igSchedulerAgendaViewSettings 49 | ), 50 | weekViewSettings: PropTypes.shape( 51 | $.ig.react.propTypes.shapes.igSchedulerWeekViewSettings 52 | ), 53 | dayViewSettings: PropTypes.shape( 54 | $.ig.react.propTypes.shapes.igSchedulerDayViewSettings 55 | ), 56 | monthViewSettings: PropTypes.shape( 57 | $.ig.react.propTypes.shapes.igSchedulerMonthViewSettings 58 | ), 59 | appointmentDialogSuppress: PropTypes.bool, 60 | dataSource: PropTypes.object, 61 | resources: PropTypes.object 62 | } 63 | -------------------------------------------------------------------------------- /src/props/igDialog.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igDialogLocale = { 2 | closeButtonTitle: PropTypes.string, 3 | minimizeButtonTitle: PropTypes.string, 4 | maximizeButtonTitle: PropTypes.string, 5 | pinButtonTitle: PropTypes.string, 6 | unpinButtonTitle: PropTypes.string, 7 | restoreButtonTitle: PropTypes.string 8 | } 9 | 10 | $.ig.react.propTypes.igDialog = { 11 | id: PropTypes.string.isRequired, 12 | mainElement: PropTypes.element, 13 | state: PropTypes.oneOf([ 14 | "opened", 15 | "minimized", 16 | "maximized", 17 | "closed" 18 | ]), 19 | pinned: PropTypes.bool, 20 | closeOnEscape: PropTypes.bool, 21 | showCloseButton: PropTypes.bool, 22 | showMaximizeButton: PropTypes.bool, 23 | showMinimizeButton: PropTypes.bool, 24 | showPinButton: PropTypes.bool, 25 | pinOnMinimized: PropTypes.bool, 26 | imageClass: PropTypes.string, 27 | headerText: PropTypes.string, 28 | showHeader: PropTypes.bool, 29 | showFooter: PropTypes.bool, 30 | footerText: PropTypes.string, 31 | dialogClass: PropTypes.string, 32 | container: PropTypes.object, 33 | height: PropTypes.oneOfType([ 34 | PropTypes.number, 35 | PropTypes.string 36 | ]), 37 | width: PropTypes.oneOfType([ 38 | PropTypes.number, 39 | PropTypes.string 40 | ]), 41 | minHeight: PropTypes.number, 42 | minWidth: PropTypes.number, 43 | maxHeight: PropTypes.number, 44 | maxWidth: PropTypes.number, 45 | draggable: PropTypes.bool, 46 | position: PropTypes.object, 47 | resizable: PropTypes.bool, 48 | tabIndex: PropTypes.number, 49 | openAnimation: PropTypes.object, 50 | closeAnimation: PropTypes.object, 51 | zIndex: PropTypes.number, 52 | modal: PropTypes.bool, 53 | trackFocus: PropTypes.bool, 54 | closeButtonTitle: PropTypes.string, 55 | minimizeButtonTitle: PropTypes.string, 56 | maximizeButtonTitle: PropTypes.string, 57 | pinButtonTitle: PropTypes.string, 58 | unpinButtonTitle: PropTypes.string, 59 | restoreButtonTitle: PropTypes.string, 60 | locale: PropTypes.shape( 61 | $.ig.react.propTypes.shapes.igDialogLocale 62 | ), 63 | temporaryUrl: PropTypes.string, 64 | enableHeaderFocus: PropTypes.bool, 65 | enableDblclick: PropTypes.any 66 | } 67 | -------------------------------------------------------------------------------- /tests/util.js: -------------------------------------------------------------------------------- 1 | (function ($) { 2 | $.ig = $.ig || {}; 3 | $.ig.react = $.ig.react || {}; 4 | 5 | $.ig.react.test = $.ig.react.test || {}; 6 | $.ig.react.test.elementId = "testbed"; 7 | $.ig.react.test.getElement = function (id) { 8 | id = id || $.ig.react.test.elementId; 9 | return $("#" + id); 10 | }; 11 | $.ig.react.test.getOrCreateElement = function (id) { 12 | id = id || $.ig.react.test.elementId; 13 | var $e = $.ig.react.test.getElement(id); 14 | if (!$e.length) { 15 | $e = $("
") 16 | .appendTo(document.body); 17 | } 18 | return $e; 19 | }; 20 | $.ig.react.test.removeElement = function (id) { 21 | $.ig.react.test.getElement(id).remove(); 22 | }; 23 | $.ig.react.test.createOrUpdateComponent = function (component, options, elementId) { 24 | options = options || {}; 25 | ReactDOM.render(React.createElement(component, options), 26 | $.ig.react.test.getOrCreateElement(elementId)[0]); 27 | }; 28 | $.ig.react.test.async = function (componentName, options, callback, timeout) { 29 | it("Test component " + componentName, function (done) { 30 | var initCalled = false, 31 | component = null, 32 | id = options.id || "igComponent", 33 | reactCompName = componentName.charAt(0).toUpperCase() + componentName.slice(1); 34 | options.id = id; 35 | options.initialized = options.initialized || 36 | function (c, e, igControl) { initCalled = true; component = c;}; 37 | $.ig.react.test.createOrUpdateComponent(window[reactCompName], options); 38 | expect($("#" + id).data(componentName)).not.toBeUndefined(); 39 | setTimeout(function () { 40 | expect(initCalled).toBe(true); 41 | expect(component instanceof window[reactCompName]) 42 | .toBe(true); 43 | if (callback) { 44 | callback(id, component); 45 | } 46 | done(); 47 | }, timeout || 300); 48 | }); 49 | }; 50 | })(jQuery); -------------------------------------------------------------------------------- /samples/ig-dashboard/src/components/IgEditBox.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import IgNumericEditor from 'igniteui-react-wrappers/ui/igNumericEditor.js'; 3 | import IgButton from 'igniteui-react-wrappers/ui/igButton.js'; 4 | 5 | // Ignite UI Required Combined JavaScript Files 6 | import "@infragistics/ignite-ui-full/en/js/infragistics.core.js"; 7 | import "@infragistics/ignite-ui-full/en/js/infragistics.lob.js"; 8 | 9 | class IgEditBox extends React.Component { 10 | render() { 11 | var rowId = this.props.rowId, 12 | v = rowId > -1; 13 | return ( 14 |
15 |

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

16 |
17 |
18 | 19 |
20 | 26 |
27 |
28 |
29 | 30 |
31 | 37 |
38 |
39 |
40 |
41 |
42 | 43 |
44 |
45 |
46 |
47 |
48 | ); 49 | } 50 | 51 | handleButtonUpdateClick = (e) => { 52 | var func = this.props.btnUpdateClicked; 53 | 54 | if (func) { 55 | func(e, 56 | this.props.rowId, 57 | this.refs.editorRevenue.igControl.value(), 58 | this.refs.editorExpenses.igControl.value()); 59 | } 60 | }; 61 | } 62 | 63 | export default IgEditBox; -------------------------------------------------------------------------------- /src/props/igDoughnutChart.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igDoughnutChartSeries = { 2 | type: PropTypes.oneOf([ 3 | "flat" 4 | ]), 5 | showTooltip: PropTypes.bool, 6 | tooltipTemplate: PropTypes.string, 7 | itemsSource: PropTypes.object, 8 | valueMemberPath: PropTypes.string, 9 | labelMemberPath: PropTypes.string, 10 | legendLabelMemberPath: PropTypes.string, 11 | labelsPosition: PropTypes.oneOf([ 12 | "none", 13 | "center", 14 | "insideEnd", 15 | "outsideEnd", 16 | "bestFit" 17 | ]), 18 | leaderLineVisibility: PropTypes.oneOf([ 19 | "visible", 20 | "collapsed" 21 | ]), 22 | leaderLineStyle: PropTypes.object, 23 | leaderLineType: PropTypes.oneOf([ 24 | "straight", 25 | "arc", 26 | "spline" 27 | ]), 28 | leaderLineMargin: PropTypes.number, 29 | othersCategoryThreshold: PropTypes.number, 30 | othersCategoryType: PropTypes.oneOf([ 31 | "number", 32 | "percent" 33 | ]), 34 | othersCategoryText: PropTypes.string, 35 | legend: PropTypes.object, 36 | formatLabel: PropTypes.object, 37 | formatLegendLabel: PropTypes.object, 38 | labelExtent: PropTypes.number, 39 | startAngle: PropTypes.number, 40 | selectedStyle: PropTypes.object, 41 | brushes: PropTypes.object, 42 | outlines: PropTypes.object, 43 | isSurfaceInteractionDisabled: PropTypes.bool, 44 | radiusFactor: PropTypes.number 45 | } 46 | 47 | $.ig.react.propTypes.igDoughnutChart = { 48 | id: PropTypes.string.isRequired, 49 | width: PropTypes.oneOfType([ 50 | PropTypes.string, 51 | PropTypes.number 52 | ]), 53 | height: PropTypes.oneOfType([ 54 | PropTypes.string, 55 | PropTypes.number 56 | ]), 57 | series: PropTypes.arrayOf( 58 | PropTypes.shape($.ig.react.propTypes.shapes.igDoughnutChartSeries) 59 | ), 60 | allowSliceSelection: PropTypes.bool, 61 | isSurfaceInteractionDisabled: PropTypes.bool, 62 | allowSliceExplosion: PropTypes.bool, 63 | innerExtent: PropTypes.number, 64 | selectedStyle: PropTypes.object, 65 | pixelScalingRatio: PropTypes.number, 66 | tooltipTemplate: PropTypes.string, 67 | maxRecCount: PropTypes.number, 68 | dataSource: PropTypes.object, 69 | dataSourceType: PropTypes.string, 70 | dataSourceUrl: PropTypes.string, 71 | responseTotalRecCountKey: PropTypes.string, 72 | responseDataKey: PropTypes.string 73 | } 74 | -------------------------------------------------------------------------------- /src/props/igZoomSlider.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igZoomSlider = { 2 | id: PropTypes.string.isRequired, 3 | width: PropTypes.oneOfType([ 4 | PropTypes.string, 5 | PropTypes.number 6 | ]), 7 | height: PropTypes.oneOfType([ 8 | PropTypes.string, 9 | PropTypes.number 10 | ]), 11 | panTransitionDuration: PropTypes.number, 12 | maxZoomWidth: PropTypes.number, 13 | pixelScalingRatio: PropTypes.number, 14 | actualPixelScalingRatio: PropTypes.number, 15 | windowRect: PropTypes.object, 16 | minZoomWidth: PropTypes.number, 17 | startInset: PropTypes.number, 18 | endInset: PropTypes.number, 19 | trackStartInset: PropTypes.number, 20 | trackEndInset: PropTypes.number, 21 | barExtent: PropTypes.number, 22 | orientation: PropTypes.string, 23 | lowerThumbBrush: PropTypes.object, 24 | lowerThumbStrokeThickness: PropTypes.number, 25 | higherThumbStrokeThickness: PropTypes.number, 26 | higherThumbBrush: PropTypes.object, 27 | lowerThumbOutline: PropTypes.object, 28 | higherThumbOutline: PropTypes.object, 29 | lowerThumbRidgesBrush: PropTypes.object, 30 | higherThumbRidgesBrush: PropTypes.object, 31 | lowerThumbWidth: PropTypes.number, 32 | higherThumbWidth: PropTypes.number, 33 | lowerThumbHeight: PropTypes.number, 34 | higherThumbHeight: PropTypes.number, 35 | lowerShadeBrush: PropTypes.object, 36 | lowerShadeOutline: PropTypes.object, 37 | lowerShadeStrokeThickness: PropTypes.number, 38 | higherShadeBrush: PropTypes.object, 39 | higherShadeOutline: PropTypes.object, 40 | higherShadeStrokeThickness: PropTypes.number, 41 | barBrush: PropTypes.object, 42 | barOutline: PropTypes.object, 43 | barStrokeThickness: PropTypes.number, 44 | rangeThumbBrush: PropTypes.object, 45 | rangeThumbOutline: PropTypes.object, 46 | rangeThumbStrokeThickness: PropTypes.number, 47 | rangeThumbRidgesBrush: PropTypes.object, 48 | lowerCalloutBrush: PropTypes.object, 49 | lowerCalloutTextColor: PropTypes.object, 50 | lowerCalloutOutline: PropTypes.object, 51 | lowerCalloutStrokeThickness: PropTypes.number, 52 | higherCalloutBrush: PropTypes.object, 53 | higherCalloutTextColor: PropTypes.object, 54 | higherCalloutOutline: PropTypes.object, 55 | higherCalloutStrokeThickness: PropTypes.number, 56 | areThumbCalloutsEnabled: PropTypes.bool, 57 | thumbCalloutTextStyle: PropTypes.object 58 | } 59 | -------------------------------------------------------------------------------- /src/props/igNumericEditor.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igNumericEditor = { 2 | id: PropTypes.string.isRequired, 3 | listItems: PropTypes.array, 4 | negativeSign: PropTypes.string, 5 | negativePattern: PropTypes.string, 6 | decimalSeparator: PropTypes.string, 7 | groupSeparator: PropTypes.string, 8 | groups: PropTypes.array, 9 | maxDecimals: PropTypes.number, 10 | minDecimals: PropTypes.number, 11 | roundDecimals: PropTypes.bool, 12 | textAlign: PropTypes.oneOf([ 13 | "left", 14 | "right", 15 | "center" 16 | ]), 17 | dataMode: PropTypes.oneOf([ 18 | "double", 19 | "float", 20 | "long", 21 | "ulong", 22 | "int", 23 | "uint", 24 | "short", 25 | "ushort", 26 | "sbyte", 27 | "byte" 28 | ]), 29 | minValue: PropTypes.number, 30 | maxValue: PropTypes.number, 31 | allowNullValue: PropTypes.bool, 32 | spinDelta: PropTypes.number, 33 | scientificFormat: PropTypes.oneOf([ 34 | "E", 35 | "e", 36 | "E+", 37 | "e+" 38 | ]), 39 | spinWrapAround: PropTypes.bool, 40 | isLimitedToListValues: PropTypes.bool, 41 | value: PropTypes.object, 42 | buttonType: PropTypes.oneOf([ 43 | "dropdown", 44 | "clear", 45 | "spin" 46 | ]), 47 | listWidth: PropTypes.number, 48 | listItemHoverDuration: PropTypes.number, 49 | dropDownAttachedToBody: PropTypes.bool, 50 | dropDownAnimationDuration: PropTypes.number, 51 | visibleItemsCount: PropTypes.number, 52 | placeHolder: PropTypes.string, 53 | selectionOnFocus: PropTypes.oneOf([ 54 | "selectAll", 55 | "atStart", 56 | "atEnd", 57 | "browserDefault" 58 | ]), 59 | revertIfNotValid: PropTypes.bool, 60 | preventSubmitOnEnter: PropTypes.bool, 61 | dropDownOrientation: PropTypes.oneOf([ 62 | "auto", 63 | "bottom", 64 | "top" 65 | ]), 66 | dropDownOnReadOnly: PropTypes.bool, 67 | suppressNotifications: PropTypes.bool, 68 | suppressKeyboard: PropTypes.bool, 69 | width: PropTypes.oneOfType([ 70 | PropTypes.string, 71 | PropTypes.number 72 | ]), 73 | height: PropTypes.oneOfType([ 74 | PropTypes.string, 75 | PropTypes.number 76 | ]), 77 | tabIndex: PropTypes.number, 78 | nullValue: PropTypes.oneOfType([ 79 | PropTypes.string, 80 | PropTypes.number 81 | ]), 82 | inputName: PropTypes.string, 83 | readOnly: PropTypes.bool, 84 | disabled: PropTypes.bool, 85 | validatorOptions: PropTypes.object 86 | } 87 | -------------------------------------------------------------------------------- /src/props/igTimePicker.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igTimePickerItemsDelta = { 2 | hours: PropTypes.number, 3 | minutes: PropTypes.number 4 | } 5 | 6 | $.ig.react.propTypes.igTimePicker = { 7 | id: PropTypes.string.isRequired, 8 | itemsDelta: PropTypes.shape( 9 | $.ig.react.propTypes.shapes.igTimePickerItemsDelta 10 | ), 11 | spinDelta: PropTypes.any, 12 | timeInputFormat: PropTypes.string, 13 | timeDisplayFormat: PropTypes.string, 14 | isLimitedToListValues: PropTypes.bool, 15 | suppressKeyboard: PropTypes.bool, 16 | dropDownOrientation: PropTypes.oneOf([ 17 | "auto", 18 | "bottom", 19 | "top" 20 | ]), 21 | visibleItemsCount: PropTypes.number, 22 | listWidth: PropTypes.number, 23 | listItemHoverDuration: PropTypes.number, 24 | dropDownAttachedToBody: PropTypes.bool, 25 | dropDownAnimationDuration: PropTypes.number, 26 | buttonType: PropTypes.oneOf([ 27 | "dropdown", 28 | "clear", 29 | "spin" 30 | ]), 31 | spinWrapAround: PropTypes.bool, 32 | value: PropTypes.instanceOf(Date), 33 | minValue: PropTypes.instanceOf(Date), 34 | maxValue: PropTypes.instanceOf(Date), 35 | dataMode: PropTypes.oneOf([ 36 | "date", 37 | "displayModeText", 38 | "editModeText" 39 | ]), 40 | limitSpinToCurrentField: PropTypes.bool, 41 | enableUTCDates: PropTypes.bool, 42 | centuryThreshold: PropTypes.number, 43 | nullValue: PropTypes.oneOfType([ 44 | PropTypes.string, 45 | PropTypes.number, 46 | PropTypes.instanceOf(Date) 47 | ]), 48 | includeKeys: PropTypes.string, 49 | excludeKeys: PropTypes.string, 50 | textAlign: PropTypes.oneOf([ 51 | "left", 52 | "right", 53 | "center" 54 | ]), 55 | placeHolder: PropTypes.string, 56 | selectionOnFocus: PropTypes.oneOf([ 57 | "selectAll", 58 | "atStart", 59 | "atEnd", 60 | "browserDefault" 61 | ]), 62 | revertIfNotValid: PropTypes.bool, 63 | preventSubmitOnEnter: PropTypes.bool, 64 | suppressNotifications: PropTypes.bool, 65 | width: PropTypes.oneOfType([ 66 | PropTypes.string, 67 | PropTypes.number 68 | ]), 69 | height: PropTypes.oneOfType([ 70 | PropTypes.string, 71 | PropTypes.number 72 | ]), 73 | tabIndex: PropTypes.number, 74 | allowNullValue: PropTypes.bool, 75 | inputName: PropTypes.string, 76 | readOnly: PropTypes.bool, 77 | disabled: PropTypes.bool, 78 | validatorOptions: PropTypes.object 79 | } 80 | -------------------------------------------------------------------------------- /src/props/igTileManager.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igTileManagerSplitterOptionsEvents = { 2 | collapsed: PropTypes.object, 3 | expanded: PropTypes.object 4 | } 5 | 6 | $.ig.react.propTypes.shapes.igTileManagerSplitterOptions = { 7 | enabled: PropTypes.bool, 8 | collapsible: PropTypes.bool, 9 | collapsed: PropTypes.bool, 10 | events: PropTypes.shape( 11 | $.ig.react.propTypes.shapes.igTileManagerSplitterOptionsEvents 12 | ) 13 | } 14 | 15 | $.ig.react.propTypes.igTileManager = { 16 | id: PropTypes.string.isRequired, 17 | width: PropTypes.oneOfType([ 18 | PropTypes.string, 19 | PropTypes.number 20 | ]), 21 | height: PropTypes.oneOfType([ 22 | PropTypes.string, 23 | PropTypes.number 24 | ]), 25 | columnWidth: PropTypes.oneOfType([ 26 | PropTypes.string, 27 | PropTypes.number, 28 | PropTypes.array 29 | ]), 30 | columnHeight: PropTypes.oneOfType([ 31 | PropTypes.string, 32 | PropTypes.number, 33 | PropTypes.array 34 | ]), 35 | cols: PropTypes.oneOfType([ 36 | PropTypes.number 37 | ]), 38 | rows: PropTypes.oneOfType([ 39 | PropTypes.number 40 | ]), 41 | marginLeft: PropTypes.number, 42 | marginTop: PropTypes.number, 43 | rearrangeItems: PropTypes.bool, 44 | items: PropTypes.oneOfType([ 45 | PropTypes.object 46 | ]), 47 | dataSource: PropTypes.object, 48 | minimizedState: PropTypes.oneOfType([ 49 | PropTypes.string 50 | ]), 51 | maximizedState: PropTypes.oneOfType([ 52 | PropTypes.string 53 | ]), 54 | maximizedTileIndex: PropTypes.oneOfType([ 55 | PropTypes.number 56 | ]), 57 | rightPanelCols: PropTypes.oneOfType([ 58 | PropTypes.number 59 | ]), 60 | rightPanelTilesWidth: PropTypes.oneOfType([ 61 | PropTypes.number 62 | ]), 63 | rightPanelTilesHeight: PropTypes.oneOfType([ 64 | PropTypes.number 65 | ]), 66 | showRightPanelScroll: PropTypes.bool, 67 | splitterOptions: PropTypes.shape( 68 | $.ig.react.propTypes.shapes.igTileManagerSplitterOptions 69 | ), 70 | preventMaximizingSelector: PropTypes.string, 71 | animationDuration: PropTypes.number, 72 | dataSourceUrl: PropTypes.string, 73 | responseDataKey: PropTypes.oneOfType([ 74 | PropTypes.string 75 | ]), 76 | responseDataType: PropTypes.oneOfType([ 77 | PropTypes.string 78 | ]), 79 | dataSourceType: PropTypes.string, 80 | requestType: PropTypes.string, 81 | responseContentType: PropTypes.string 82 | } 83 | -------------------------------------------------------------------------------- /src/props/igQRCodeBarcode.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igQRCodeBarcode = { 2 | id: PropTypes.string.isRequired, 3 | width: PropTypes.oneOfType([ 4 | PropTypes.string, 5 | PropTypes.number 6 | ]), 7 | height: PropTypes.oneOfType([ 8 | PropTypes.string, 9 | PropTypes.number 10 | ]), 11 | pixelScalingRatio: PropTypes.number, 12 | backingBrush: PropTypes.string, 13 | backingOutline: PropTypes.string, 14 | backingStrokeThickness: PropTypes.number, 15 | barBrush: PropTypes.string, 16 | fontBrush: PropTypes.string, 17 | font: PropTypes.string, 18 | data: PropTypes.string, 19 | errorMessageText: PropTypes.string, 20 | stretch: PropTypes.oneOf([ 21 | "none", 22 | "fill", 23 | "uniform", 24 | "uniformToFill" 25 | ]), 26 | barsFillMode: PropTypes.oneOf([ 27 | "fillSpace", 28 | "ensureEqualSize" 29 | ]), 30 | widthToHeightRatio: PropTypes.number, 31 | xDimension: PropTypes.number, 32 | errorCorrectionLevel: PropTypes.oneOf([ 33 | "low", 34 | "medium", 35 | "quartil", 36 | "high" 37 | ]), 38 | sizeVersion: PropTypes.oneOf([ 39 | "undefined", 40 | "version1", 41 | "version2", 42 | "version3", 43 | "version4", 44 | "version5", 45 | "version6", 46 | "version7", 47 | "version8", 48 | "version9", 49 | "version10", 50 | "version11", 51 | "version12", 52 | "version13", 53 | "version14", 54 | "version15", 55 | "version16", 56 | "version17", 57 | "version18", 58 | "version19", 59 | "version20", 60 | "version21", 61 | "version22", 62 | "version23", 63 | "version24", 64 | "version25", 65 | "version26", 66 | "version27", 67 | "version28", 68 | "version29", 69 | "version30", 70 | "version31", 71 | "version32", 72 | "version33", 73 | "version34", 74 | "version35", 75 | "version36", 76 | "version37", 77 | "version38", 78 | "version39", 79 | "version40" 80 | ]), 81 | encodingMode: PropTypes.oneOf([ 82 | "undefined", 83 | "numeric", 84 | "alphanumeric", 85 | "byte", 86 | "kanji" 87 | ]), 88 | eciNumber: PropTypes.number, 89 | eciHeaderDisplayMode: PropTypes.oneOf([ 90 | "hide", 91 | "show" 92 | ]), 93 | fnc1Mode: PropTypes.oneOf([ 94 | "none", 95 | "gs1", 96 | "industry" 97 | ]), 98 | applicationIndicator: PropTypes.string 99 | } 100 | -------------------------------------------------------------------------------- /samples/ig-financial-state/src/components/EditorsBox.js: -------------------------------------------------------------------------------- 1 | import IgCombo from 'igniteui-react-wrappers/ui/igCombo.js'; 2 | import IgNumericEditor from 'igniteui-react-wrappers/ui/igNumericEditor.js'; 3 | import React from 'react'; 4 | 5 | class EditorsBox extends React.Component { 6 | render() { 7 | return ( 8 |
9 |
10 | 11 | 20 |
21 |
22 | 23 | 31 |
32 |
33 | 34 | 41 |
42 |
43 | 44 | 51 |
52 |
53 |
54 | ); 55 | } 56 | 57 | monthChanged = (e, args) => { 58 | this.props.changeMonth(args.items[0].data.value); 59 | }; 60 | 61 | revenueChanged = (e, args) => { 62 | this.props.changeRevenue(args.newValue); 63 | }; 64 | 65 | expensesChanged = (e, args) => { 66 | this.props.changeExpenses(args.newValue); 67 | }; 68 | 69 | profitChanged = (e, args) => { 70 | this.props.changeProfit(args.newValue); 71 | }; 72 | } 73 | 74 | export default EditorsBox; -------------------------------------------------------------------------------- /src/props/igCurrencyEditor.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igCurrencyEditor = { 2 | id: PropTypes.string.isRequired, 3 | positivePattern: PropTypes.string, 4 | currencySymbol: PropTypes.string, 5 | listItems: PropTypes.array, 6 | negativeSign: PropTypes.string, 7 | negativePattern: PropTypes.string, 8 | decimalSeparator: PropTypes.string, 9 | groupSeparator: PropTypes.string, 10 | groups: PropTypes.array, 11 | maxDecimals: PropTypes.number, 12 | minDecimals: PropTypes.number, 13 | roundDecimals: PropTypes.bool, 14 | textAlign: PropTypes.oneOf([ 15 | "left", 16 | "right", 17 | "center" 18 | ]), 19 | dataMode: PropTypes.oneOf([ 20 | "double", 21 | "float", 22 | "long", 23 | "ulong", 24 | "int", 25 | "uint", 26 | "short", 27 | "ushort", 28 | "sbyte", 29 | "byte" 30 | ]), 31 | minValue: PropTypes.number, 32 | maxValue: PropTypes.number, 33 | allowNullValue: PropTypes.bool, 34 | spinDelta: PropTypes.number, 35 | scientificFormat: PropTypes.oneOf([ 36 | "E", 37 | "e", 38 | "E+", 39 | "e+" 40 | ]), 41 | spinWrapAround: PropTypes.bool, 42 | isLimitedToListValues: PropTypes.bool, 43 | value: PropTypes.object, 44 | buttonType: PropTypes.oneOf([ 45 | "dropdown", 46 | "clear", 47 | "spin" 48 | ]), 49 | listWidth: PropTypes.number, 50 | listItemHoverDuration: PropTypes.number, 51 | dropDownAttachedToBody: PropTypes.bool, 52 | dropDownAnimationDuration: PropTypes.number, 53 | visibleItemsCount: PropTypes.number, 54 | placeHolder: PropTypes.string, 55 | selectionOnFocus: PropTypes.oneOf([ 56 | "selectAll", 57 | "atStart", 58 | "atEnd", 59 | "browserDefault" 60 | ]), 61 | revertIfNotValid: PropTypes.bool, 62 | preventSubmitOnEnter: PropTypes.bool, 63 | dropDownOrientation: PropTypes.oneOf([ 64 | "auto", 65 | "bottom", 66 | "top" 67 | ]), 68 | dropDownOnReadOnly: PropTypes.bool, 69 | suppressNotifications: PropTypes.bool, 70 | suppressKeyboard: PropTypes.bool, 71 | width: PropTypes.oneOfType([ 72 | PropTypes.string, 73 | PropTypes.number 74 | ]), 75 | height: PropTypes.oneOfType([ 76 | PropTypes.string, 77 | PropTypes.number 78 | ]), 79 | tabIndex: PropTypes.number, 80 | nullValue: PropTypes.oneOfType([ 81 | PropTypes.string, 82 | PropTypes.number 83 | ]), 84 | inputName: PropTypes.string, 85 | readOnly: PropTypes.bool, 86 | disabled: PropTypes.bool, 87 | validatorOptions: PropTypes.object 88 | } 89 | -------------------------------------------------------------------------------- /src/props/igPercentEditor.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igPercentEditor = { 2 | id: PropTypes.string.isRequired, 3 | positivePattern: PropTypes.string, 4 | percentSymbol: PropTypes.string, 5 | displayFactor: PropTypes.number, 6 | dataMode: PropTypes.oneOf([ 7 | "double", 8 | "float", 9 | "long", 10 | "ulong", 11 | "int", 12 | "uint", 13 | "short", 14 | "ushort", 15 | "sbyte", 16 | "byte" 17 | ]), 18 | spinDelta: PropTypes.number, 19 | listItems: PropTypes.array, 20 | negativeSign: PropTypes.string, 21 | negativePattern: PropTypes.string, 22 | decimalSeparator: PropTypes.string, 23 | groupSeparator: PropTypes.string, 24 | groups: PropTypes.array, 25 | maxDecimals: PropTypes.number, 26 | minDecimals: PropTypes.number, 27 | roundDecimals: PropTypes.bool, 28 | textAlign: PropTypes.oneOf([ 29 | "left", 30 | "right", 31 | "center" 32 | ]), 33 | minValue: PropTypes.number, 34 | maxValue: PropTypes.number, 35 | allowNullValue: PropTypes.bool, 36 | scientificFormat: PropTypes.oneOf([ 37 | "E", 38 | "e", 39 | "E+", 40 | "e+" 41 | ]), 42 | spinWrapAround: PropTypes.bool, 43 | isLimitedToListValues: PropTypes.bool, 44 | value: PropTypes.object, 45 | buttonType: PropTypes.oneOf([ 46 | "dropdown", 47 | "clear", 48 | "spin" 49 | ]), 50 | listWidth: PropTypes.number, 51 | listItemHoverDuration: PropTypes.number, 52 | dropDownAttachedToBody: PropTypes.bool, 53 | dropDownAnimationDuration: PropTypes.number, 54 | visibleItemsCount: PropTypes.number, 55 | placeHolder: PropTypes.string, 56 | selectionOnFocus: PropTypes.oneOf([ 57 | "selectAll", 58 | "atStart", 59 | "atEnd", 60 | "browserDefault" 61 | ]), 62 | revertIfNotValid: PropTypes.bool, 63 | preventSubmitOnEnter: PropTypes.bool, 64 | dropDownOrientation: PropTypes.oneOf([ 65 | "auto", 66 | "bottom", 67 | "top" 68 | ]), 69 | dropDownOnReadOnly: PropTypes.bool, 70 | suppressNotifications: PropTypes.bool, 71 | suppressKeyboard: PropTypes.bool, 72 | width: PropTypes.oneOfType([ 73 | PropTypes.string, 74 | PropTypes.number 75 | ]), 76 | height: PropTypes.oneOfType([ 77 | PropTypes.string, 78 | PropTypes.number 79 | ]), 80 | tabIndex: PropTypes.number, 81 | nullValue: PropTypes.oneOfType([ 82 | PropTypes.string, 83 | PropTypes.number 84 | ]), 85 | inputName: PropTypes.string, 86 | readOnly: PropTypes.bool, 87 | disabled: PropTypes.bool, 88 | validatorOptions: PropTypes.object 89 | } 90 | -------------------------------------------------------------------------------- /tests/karma.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = function(config) { 2 | config.set({ 3 | basePath: "../", 4 | frameworks: ["jasmine"], 5 | files: [ 6 | 7 | "http://code.jquery.com/jquery-1.12.4.js", 8 | "http://code.jquery.com/ui/1.11.4/jquery-ui.min.js", 9 | "http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js", 10 | "http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js", 11 | "http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js", 12 | "https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js", 13 | 14 | // css files 15 | "http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css", 16 | "http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css", 17 | // System.js for module loading 18 | "node_modules/systemjs/dist/system.src.js", 19 | 20 | // Paths loaded via module imports: 21 | // React 22 | "node_modules/react/umd/react.production.min.js", 23 | "node_modules/react-dom/umd/react-dom.production.min.js", 24 | "node_modules/create-react-class/create-react-class.min.js", 25 | "node_modules/prop-types/prop-types.min.js", 26 | // paths loaded via module imports 27 | // bundled react wrappers 28 | //"dist/npm/igniteui-react.js", 29 | "src/util/**/*.js", 30 | "src/props/**/*.js", 31 | "src/components/**/*.js", 32 | 33 | // spec files need to be loaded in the shim file IN CONTEXT of the main module, don't include: 34 | { pattern: 'tests/unit/**/*.js', included: false, watched: true }, 35 | // test files 36 | "tests/util.js", 37 | "tests/karma-test-shim.js" 38 | 39 | ], 40 | plugins: [ 41 | require('karma-jasmine'), 42 | require('karma-coverage'), 43 | require('karma-chrome-launcher'), 44 | require('karma-jasmine-html-reporter') 45 | ], 46 | crossOriginAttribute: false, 47 | client: { 48 | clearContext: false // leave Jasmine Spec Runner output visible in browser 49 | }, 50 | preprocessors: { 51 | 'src/util/**/*.js': ['coverage'] 52 | }, 53 | coverageReporter: { 54 | dir: require('path').join(__dirname, '../coverage/'), 55 | subdir: '.', 56 | reporters: [ 57 | { type: 'lcovonly' } 58 | ] 59 | }, 60 | reporters: ['progress', 'coverage'], 61 | port: 9876, 62 | colors: true, 63 | logLevel: config.LOG_INFO, 64 | autoWatch: true, 65 | browsers: ['ChromeHeadless'], 66 | singleRun: false, 67 | restartOnFileChange: true 68 | }); 69 | }; -------------------------------------------------------------------------------- /samples/ig-financial-state/src/sample.css: -------------------------------------------------------------------------------- 1 | .push-down { 2 | margin-top:4em; 3 | } 4 | 5 | .push-down-md { 6 | margin-top:2em; 7 | } 8 | 9 | .push-down-xs { 10 | margin-top:1em; 11 | } 12 | 13 | footer { 14 | border-top:1px solid #ccc; 15 | background-color:#ddd; 16 | padding:50px; 17 | margin-top:25px; 18 | color:#999; 19 | } 20 | 21 | .description { 22 | border-bottom: 1px solid #eee; 23 | margin-bottom: 15px; 24 | margin-top: 15px; 25 | } 26 | 27 | .try-it-out hr { 28 | margin: 0px; 29 | margin-top: 4px; 30 | } 31 | 32 | 33 | .try-it-out ul li{ 34 | margin-top: 8px; 35 | margin-bottom: 8px; 36 | } 37 | 38 | #app { 39 | min-width: 800px; 40 | } 41 | 42 | .editors { 43 | height: 90px; 44 | } 45 | 46 | .editor-container { 47 | float: left; 48 | margin: 0 35px 20px 5px; 49 | } 50 | 51 | .editor-container .labels { 52 | display: block; 53 | font-size: 13px; 54 | padding-bottom: 5px; 55 | } 56 | 57 | .ui-state-hover, 58 | .ui-widget-content .ui-state-hover { 59 | color: #070707; 60 | } 61 | 62 | #totalEditor { 63 | border: none; 64 | font-size: x-large; 65 | } 66 | 67 | .clear { 68 | clear: both; 69 | } 70 | 71 | .gauges { 72 | padding-left: 0; 73 | height: 100px; 74 | } 75 | 76 | .gauge-container { 77 | float: left; 78 | margin: 0 25px 0 5px; 79 | } 80 | 81 | .total-container { 82 | float: left; 83 | margin: 0 20px 0 5px; 84 | } 85 | 86 | .sample-line-chart-holder { 87 | position: relative; 88 | width: 100%; 89 | } 90 | #legendLineChart { 91 | position: absolute; 92 | top: 120px; left: 45px; 93 | border: none; 94 | background-color: 95 | transparent; 96 | font-weight: bold; 97 | } 98 | 99 | /* Polar chart container and legend */ 100 | .sample-polar-chart-holder { 101 | position: relative; 102 | /*width: 33.3%;*/ 103 | float: left; 104 | margin-top: 10px; 105 | } 106 | .polar-chart-legend { 107 | position: absolute; 108 | top: 250px; 109 | left: 15px; 110 | border: none; 111 | background-color: transparent; 112 | font-weight: bold; 113 | } 114 | 115 | /* Line chart container and legend */ 116 | .sample-bar-chart-holder { 117 | position: relative; 118 | width: 100%; 119 | float: left; 120 | margin-top: 10px; 121 | } 122 | 123 | #legendBarColumnChart { 124 | position: absolute; 125 | top: 135px; 126 | left: 45px; 127 | border: none; 128 | background-color: transparent; 129 | font-weight: bold; 130 | } 131 | 132 | .ui-widget-content { 133 | border: none; 134 | } 135 | 136 | #totalEditorEditingInput { 137 | box-sizing: content-box; 138 | } -------------------------------------------------------------------------------- /samples/ig-editors/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import MainComponent from './components/MainComponent'; 3 | 4 | import "bootstrap/dist/css/bootstrap.min.css"; 5 | 6 | class App extends React.Component { 7 | render() { 8 | return ( 9 |
10 |
11 |
12 |
13 | 19 | Ignite UI ReactJS Component 20 |
21 |
22 | 26 |
27 |
28 |
29 | 30 |
31 |

igEditors

32 | 33 |
34 |
35 | TRY IT OUT: 36 |
37 |
    38 |
  • Select a user detail you would like to edit
    • 39 |
  • While editing, you will notice most editors have specific validation rules to cope with
    • 40 |
  • The user details on the left will update only when a valid input comes from the igEditors
    • 41 |
42 |
43 |
44 |

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

45 |

View Source

46 |
47 |
48 | 49 | 50 |
51 | 52 | 60 | 61 |
62 | ); 63 | } 64 | } 65 | 66 | export default App; -------------------------------------------------------------------------------- /samples/ig-grid/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import MainComponent from './components/MainComponent'; 3 | 4 | import "bootstrap/dist/css/bootstrap.min.css"; 5 | 6 | class App extends React.Component { 7 | render() { 8 | return ( 9 |
10 |
11 |
12 |
13 | 19 | Ignite UI ReactJS Component 20 |
21 |
22 | 26 |
27 |
28 |
29 | 30 |
31 |

igGrid

32 | 33 |
34 |
35 | TRY IT OUT: 36 |
37 |
    38 |
  • Select a row that you would like to edit
    • 39 |
  • Change a product's name in the group of textboxes below, click update and see how the names change in the grid
    • 40 |
  • 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
    • 41 |
42 |
43 |
44 |

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

45 |

View Source

46 |
47 |
48 | 49 | 50 |
51 | 52 | 60 | 61 |
62 | ); 63 | } 64 | } 65 | 66 | export default App; 67 | -------------------------------------------------------------------------------- /samples/ig-dashboard/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import MainComponent from './components/MainComponent.js'; 3 | 4 | import "bootstrap/dist/css/bootstrap.min.css"; 5 | 6 | class App extends React.Component { 7 | render() { 8 | return ( 9 |
10 |
11 |
12 |
13 | 19 | Ignite UI ReactJS Component 20 |
21 |
22 | 26 |
27 |
28 |
29 | 30 |
31 |

Dashboard using igGrid and igDataChart

33 | 34 |
35 |
36 | TRY IT OUT: 37 |
38 |
    39 |
  • Select a row that you would like to edit
    • 40 |
  • Change the Revenue or the Expenses of the selected person by using the editors.
    • 41 |
  • Observe how the grid and the chart values are changing.
    • 42 |
43 |
44 |
45 |

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

46 |

View Source

48 |
49 |
50 | 51 | 52 |
53 | 54 | 62 | 63 |
64 | ); 65 | } 66 | } 67 | 68 | export default App; 69 | -------------------------------------------------------------------------------- /samples/ig-financial-state/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import MainComponent from './components/MainComponent.js'; 3 | 4 | import "bootstrap/dist/css/bootstrap.min.css"; 5 | 6 | class App extends React.Component { 7 | render() { 8 | return ( 9 |
10 |
11 |
12 |
13 | 19 | Ignite UI ReactJS Component 20 |
21 |
22 | 26 |
27 |
28 |
29 | 30 |
31 |

igChart

32 | 33 |
34 |
35 | TRY IT OUT: 36 |
37 |
    38 |
  • Select a month and edit its revenue and expenses
    • 39 |
  • Change month's revenue or expenses, using the editors or using the linear gauge
    • 40 |
  • All the related components' data is changed and new overall year profit is calculated
    • 41 |
42 |
43 |
44 |

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.

45 |

View Source

46 |
47 |
48 | 49 | 50 |
51 | 52 | 60 | 61 |
62 | ); 63 | } 64 | } 65 | 66 | export default App; 67 | 68 | -------------------------------------------------------------------------------- /samples/ig-financial-state/src/components/GaugesBox.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import createReactClass from 'create-react-class'; 3 | import IgLinearGauge from 'igniteui-react-wrappers/ui/igLinearGauge.js' 4 | import '../sample.css'; 5 | 6 | 7 | 8 | var GaugesBox = createReactClass({ 9 | gaugeInterval: 10, 10 | revenueColor: "#a4ba29", 11 | expensesColor: "#d3404b", 12 | profitColor: "#216EDD", 13 | needleColor: "white", 14 | needleOutlineColor: "#2582a9", 15 | render: function() { 16 | return ( 17 |
18 |
19 | 40 |
41 |
42 | 62 |
63 |
64 | 84 |
85 |
86 |
87 | ) 88 | }, 89 | revenueChanged: function (e, args) { 90 | this.props.changeRevenue(args.newValue); 91 | }, 92 | expensesChanged: function (e, args) { 93 | this.props.changeExpenses(args.newValue); 94 | }, 95 | profitChanged: function (e, args) { 96 | this.props.changeProfit(args.newValue); 97 | } 98 | }); 99 | 100 | export default GaugesBox; -------------------------------------------------------------------------------- /src/props/igBulletGraph.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igBulletGraphRange = { 2 | name: PropTypes.string, 3 | brush: PropTypes.string, 4 | outline: PropTypes.string, 5 | startValue: PropTypes.number, 6 | endValue: PropTypes.number, 7 | innerStartExtent: PropTypes.number, 8 | innerEndExtent: PropTypes.number, 9 | outerStartExtent: PropTypes.number, 10 | outerEndExtent: PropTypes.number, 11 | strokeThickness: PropTypes.number 12 | } 13 | 14 | $.ig.react.propTypes.igBulletGraph = { 15 | id: PropTypes.string.isRequired, 16 | width: PropTypes.oneOfType([ 17 | PropTypes.string, 18 | PropTypes.number 19 | ]), 20 | height: PropTypes.oneOfType([ 21 | PropTypes.string, 22 | PropTypes.number 23 | ]), 24 | ranges: PropTypes.arrayOf( 25 | PropTypes.shape($.ig.react.propTypes.shapes.igBulletGraphRange) 26 | ), 27 | rangeToolTipTemplate: PropTypes.string, 28 | valueToolTipTemplate: PropTypes.string, 29 | targetValueToolTipTemplate: PropTypes.string, 30 | orientation: PropTypes.oneOf([ 31 | "horizontal", 32 | "vertical" 33 | ]), 34 | scaleBackgroundBrush: PropTypes.string, 35 | scaleBackgroundOutline: PropTypes.string, 36 | scaleBackgroundThickness: PropTypes.number, 37 | rangeBrushes: PropTypes.object, 38 | rangeOutlines: PropTypes.object, 39 | minimumValue: PropTypes.number, 40 | maximumValue: PropTypes.number, 41 | targetValue: PropTypes.number, 42 | targetValueName: PropTypes.string, 43 | value: PropTypes.number, 44 | valueName: PropTypes.string, 45 | rangeInnerExtent: PropTypes.number, 46 | rangeOuterExtent: PropTypes.number, 47 | valueInnerExtent: PropTypes.number, 48 | valueOuterExtent: PropTypes.number, 49 | interval: PropTypes.number, 50 | ticksPostInitial: PropTypes.number, 51 | ticksPreTerminal: PropTypes.number, 52 | labelInterval: PropTypes.number, 53 | labelExtent: PropTypes.number, 54 | labelsPostInitial: PropTypes.number, 55 | labelsPreTerminal: PropTypes.number, 56 | minorTickCount: PropTypes.number, 57 | tickStartExtent: PropTypes.number, 58 | tickEndExtent: PropTypes.number, 59 | tickStrokeThickness: PropTypes.number, 60 | tickBrush: PropTypes.string, 61 | fontBrush: PropTypes.string, 62 | valueBrush: PropTypes.string, 63 | valueOutline: PropTypes.string, 64 | valueStrokeThickness: PropTypes.number, 65 | minorTickStartExtent: PropTypes.number, 66 | minorTickEndExtent: PropTypes.number, 67 | minorTickStrokeThickness: PropTypes.number, 68 | minorTickBrush: PropTypes.string, 69 | isScaleInverted: PropTypes.bool, 70 | backingBrush: PropTypes.string, 71 | backingOutline: PropTypes.string, 72 | backingStrokeThickness: PropTypes.number, 73 | backingInnerExtent: PropTypes.number, 74 | backingOuterExtent: PropTypes.number, 75 | scaleStartExtent: PropTypes.number, 76 | scaleEndExtent: PropTypes.number, 77 | targetValueBrush: PropTypes.string, 78 | targetValueBreadth: PropTypes.number, 79 | targetValueInnerExtent: PropTypes.number, 80 | targetValueOuterExtent: PropTypes.number, 81 | targetValueOutline: PropTypes.string, 82 | targetValueStrokeThickness: PropTypes.number, 83 | transitionDuration: PropTypes.number, 84 | showToolTipTimeout: PropTypes.number, 85 | showToolTip: PropTypes.bool, 86 | font: PropTypes.string, 87 | pixelScalingRatio: PropTypes.number 88 | } 89 | -------------------------------------------------------------------------------- /src/props/igSparkline.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.igSparkline = { 2 | id: PropTypes.string.isRequired, 3 | width: PropTypes.oneOfType([ 4 | PropTypes.string, 5 | PropTypes.number 6 | ]), 7 | height: PropTypes.oneOfType([ 8 | PropTypes.string, 9 | PropTypes.number 10 | ]), 11 | brush: PropTypes.string, 12 | negativeBrush: PropTypes.string, 13 | markerBrush: PropTypes.string, 14 | negativeMarkerBrush: PropTypes.string, 15 | firstMarkerBrush: PropTypes.string, 16 | lastMarkerBrush: PropTypes.string, 17 | highMarkerBrush: PropTypes.string, 18 | lowMarkerBrush: PropTypes.string, 19 | trendLineBrush: PropTypes.string, 20 | horizontalAxisBrush: PropTypes.string, 21 | verticalAxisBrush: PropTypes.string, 22 | normalRangeFill: PropTypes.string, 23 | horizontalAxisVisibility: PropTypes.oneOf([ 24 | "visible", 25 | "collapsed" 26 | ]), 27 | verticalAxisVisibility: PropTypes.oneOf([ 28 | "visible", 29 | "collapsed" 30 | ]), 31 | markerVisibility: PropTypes.oneOf([ 32 | "visible", 33 | "collapsed" 34 | ]), 35 | negativeMarkerVisibility: PropTypes.oneOf([ 36 | "visible", 37 | "collapsed" 38 | ]), 39 | firstMarkerVisibility: PropTypes.oneOf([ 40 | "visible", 41 | "collapsed" 42 | ]), 43 | lastMarkerVisibility: PropTypes.oneOf([ 44 | "visible", 45 | "collapsed" 46 | ]), 47 | lowMarkerVisibility: PropTypes.oneOf([ 48 | "visible", 49 | "collapsed" 50 | ]), 51 | highMarkerVisibility: PropTypes.oneOf([ 52 | "visible", 53 | "collapsed" 54 | ]), 55 | normalRangeVisibility: PropTypes.oneOf([ 56 | "visible", 57 | "collapsed" 58 | ]), 59 | displayNormalRangeInFront: PropTypes.bool, 60 | markerSize: PropTypes.number, 61 | firstMarkerSize: PropTypes.number, 62 | lastMarkerSize: PropTypes.number, 63 | highMarkerSize: PropTypes.number, 64 | lowMarkerSize: PropTypes.number, 65 | negativeMarkerSize: PropTypes.number, 66 | lineThickness: PropTypes.number, 67 | valueMemberPath: PropTypes.string, 68 | labelMemberPath: PropTypes.string, 69 | trendLineType: PropTypes.oneOf([ 70 | "none", 71 | "linearFit", 72 | "quadraticFit", 73 | "cubicFit", 74 | "quarticFit", 75 | "quinticFit", 76 | "logarithmicFit", 77 | "exponentialFit", 78 | "powerLawFit", 79 | "simpleAverage", 80 | "exponentialAverage", 81 | "modifiedAverage", 82 | "cumulativeAverage", 83 | "weightedAverage" 84 | ]), 85 | trendLinePeriod: PropTypes.number, 86 | trendLineThickness: PropTypes.number, 87 | normalRangeMinimum: PropTypes.number, 88 | normalRangeMaximum: PropTypes.number, 89 | displayType: PropTypes.oneOf([ 90 | "line", 91 | "area", 92 | "column", 93 | "winLoss" 94 | ]), 95 | unknownValuePlotting: PropTypes.oneOf([ 96 | "linearInterpolate", 97 | "dontPlot" 98 | ]), 99 | verticalAxisLabel: PropTypes.object, 100 | horizontalAxisLabel: PropTypes.object, 101 | formatLabel: PropTypes.object, 102 | pixelScalingRatio: PropTypes.number, 103 | tooltipTemplate: PropTypes.string, 104 | maxRecCount: PropTypes.number, 105 | dataSource: PropTypes.object, 106 | dataSourceType: PropTypes.string, 107 | dataSourceUrl: PropTypes.string, 108 | responseTotalRecCountKey: PropTypes.string, 109 | responseDataKey: PropTypes.string 110 | } 111 | -------------------------------------------------------------------------------- /src/props/igLinearGauge.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igLinearGaugeRange = { 2 | name: PropTypes.string, 3 | brush: PropTypes.string, 4 | outline: PropTypes.string, 5 | startValue: PropTypes.number, 6 | endValue: PropTypes.number, 7 | innerStartExtent: PropTypes.number, 8 | innerEndExtent: PropTypes.number, 9 | outerStartExtent: PropTypes.number, 10 | outerEndExtent: PropTypes.number, 11 | strokeThickness: PropTypes.number 12 | } 13 | 14 | $.ig.react.propTypes.igLinearGauge = { 15 | id: PropTypes.string.isRequired, 16 | width: PropTypes.oneOfType([ 17 | PropTypes.string, 18 | PropTypes.number 19 | ]), 20 | height: PropTypes.oneOfType([ 21 | PropTypes.string, 22 | PropTypes.number 23 | ]), 24 | ranges: PropTypes.arrayOf( 25 | PropTypes.shape($.ig.react.propTypes.shapes.igLinearGaugeRange) 26 | ), 27 | rangeToolTipTemplate: PropTypes.string, 28 | needleToolTipTemplate: PropTypes.string, 29 | orientation: PropTypes.oneOf([ 30 | "horizontal", 31 | "vertical" 32 | ]), 33 | rangeBrushes: PropTypes.object, 34 | rangeOutlines: PropTypes.object, 35 | minimumValue: PropTypes.number, 36 | maximumValue: PropTypes.number, 37 | value: PropTypes.number, 38 | needleShape: PropTypes.oneOf([ 39 | "custom", 40 | "rectangle", 41 | "triangle", 42 | "needle", 43 | "trapezoid" 44 | ]), 45 | needleName: PropTypes.string, 46 | rangeInnerExtent: PropTypes.number, 47 | scaleInnerExtent: PropTypes.number, 48 | rangeOuterExtent: PropTypes.number, 49 | scaleOuterExtent: PropTypes.number, 50 | needleInnerExtent: PropTypes.number, 51 | needleOuterExtent: PropTypes.number, 52 | needleInnerBaseWidth: PropTypes.number, 53 | needleOuterBaseWidth: PropTypes.number, 54 | needleInnerPointWidth: PropTypes.number, 55 | needleOuterPointWidth: PropTypes.number, 56 | needleInnerPointExtent: PropTypes.number, 57 | needleOuterPointExtent: PropTypes.number, 58 | interval: PropTypes.number, 59 | ticksPostInitial: PropTypes.number, 60 | ticksPreTerminal: PropTypes.number, 61 | labelInterval: PropTypes.number, 62 | labelExtent: PropTypes.number, 63 | labelsPostInitial: PropTypes.number, 64 | labelsPreTerminal: PropTypes.number, 65 | minorTickCount: PropTypes.number, 66 | tickStartExtent: PropTypes.number, 67 | tickEndExtent: PropTypes.number, 68 | tickStrokeThickness: PropTypes.number, 69 | tickBrush: PropTypes.string, 70 | fontBrush: PropTypes.string, 71 | needleBreadth: PropTypes.number, 72 | needleBrush: PropTypes.string, 73 | needleOutline: PropTypes.string, 74 | needleStrokeThickness: PropTypes.number, 75 | minorTickStartExtent: PropTypes.number, 76 | minorTickEndExtent: PropTypes.number, 77 | minorTickStrokeThickness: PropTypes.number, 78 | minorTickBrush: PropTypes.string, 79 | isScaleInverted: PropTypes.bool, 80 | backingBrush: PropTypes.string, 81 | backingOutline: PropTypes.string, 82 | backingStrokeThickness: PropTypes.number, 83 | backingInnerExtent: PropTypes.number, 84 | backingOuterExtent: PropTypes.number, 85 | scaleStartExtent: PropTypes.number, 86 | scaleEndExtent: PropTypes.number, 87 | scaleBrush: PropTypes.string, 88 | scaleOutline: PropTypes.string, 89 | scaleStrokeThickness: PropTypes.number, 90 | isNeedleDraggingEnabled: PropTypes.bool, 91 | transitionDuration: PropTypes.number, 92 | showToolTipTimeout: PropTypes.number, 93 | showToolTip: PropTypes.bool, 94 | font: PropTypes.string, 95 | pixelScalingRatio: PropTypes.number 96 | } 97 | -------------------------------------------------------------------------------- /src/util/ignite-react.js: -------------------------------------------------------------------------------- 1 | (function (factory) { 2 | if (typeof define === "function" && define.amd) { 3 | 4 | // AMD. Register as an anonymous module. 5 | define( [ 6 | "react", 7 | "react-dom", 8 | "jquery", 9 | "jquery-ui" 10 | ], factory ); 11 | } else { 12 | 13 | // Browser globals 14 | factory(React, ReactDOM, jQuery); 15 | } 16 | } 17 | (function (React, ReactDOM, $) { 18 | $.ig = $.ig || {}; 19 | $.ig.react = $.ig.react || {}; 20 | $.ig.react.core = $.ig.react.core || {}; 21 | $.ig.react.propTypes = $.ig.react.propTypes || {}; 22 | $.ig.react.propTypes.shapes = $.ig.react.propTypes.shapes || {}; 23 | 24 | $.ig.react.configWidgets = $.ig.react.configWidgets || {}; 25 | 26 | $.ig.react.core.getElement = function (component) { 27 | return ReactDOM.findDOMNode(component); 28 | }; 29 | $.ig.react.core.getWidgetInstance = function (component, name) { 30 | name = name || component.widgetName; 31 | return $($.ig.react.core.getElement(component)).data(name); 32 | }; 33 | $.ig.react.core.mount = function (component, name) { 34 | var e = $.ig.react.core.getElement(component), $e = $(e), 35 | funcInitialized = component.props.initialized; 36 | // initialize widget 37 | $e[name](component.props); 38 | component.igControl = $e.data(name); 39 | component.widgetName = name; 40 | // if property initialized is set then call it 41 | if (funcInitialized) { 42 | $.ig.util.invokeCallback(funcInitialized, 43 | [component, e, component.igControl] 44 | ); 45 | } 46 | }; 47 | $.ig.react.core.update = function (component, nextProps) { 48 | var c = component, 49 | element = $.ig.react.core.getElement(component), 50 | op, np, t, option, 51 | changedOpts, 52 | oldProps = c.props, 53 | funcUpdate = c.props.shouldComponentUpdate; 54 | if (funcUpdate) { 55 | return $.ig.util.invokeCallback(funcUpdate, [ 56 | component, 57 | element, 58 | component.widgetName, 59 | nextProps]); 60 | } 61 | // get changed primitive properties 62 | for (np in nextProps) { 63 | if (nextProps.hasOwnProperty(np)) { 64 | t = $.type(nextProps[np]); 65 | if (t !== "object" && t !== "array" && 66 | nextProps[np] !== oldProps[np]) { 67 | changedOpts = changedOpts || {}; 68 | changedOpts[np] = nextProps[np]; 69 | } 70 | } 71 | } 72 | if (changedOpts) { 73 | $(element)[component.widgetName]("option", changedOpts); 74 | } 75 | 76 | if (nextProps.children && nextProps.children.length > 0) { 77 | return true; 78 | } 79 | return false; 80 | }; 81 | $.ig.react.core.unmount = function (component) { 82 | $($.ig.react.core.getElement(component))[component.widgetName]("destroy"); 83 | }; 84 | 85 | //////////// 86 | 87 | $.ig.react.core.buildComponent = function (name) { 88 | var config = ($.ig.react.core.configWidgets || {})[name] || {}; 89 | return $.extend({ 90 | render: function () { 91 | return React.createElement("div", { id: this.props.id }, this.props.children); 92 | }, 93 | componentDidMount: function () { 94 | $.ig.react.core.mount(this, name); 95 | }, 96 | propTypes: $.ig.react.propTypes[name], 97 | shouldComponentUpdate: function (nextProps) { 98 | return $.ig.react.core.update(this, nextProps); 99 | }, 100 | componentWillUnmount: function () { 101 | $.ig.react.core.unmount(this); 102 | } 103 | }, config) 104 | }; 105 | })); -------------------------------------------------------------------------------- /src/props/igDataChart.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igDataChartLegend = { 2 | element: PropTypes.string, 3 | type: PropTypes.oneOf([ 4 | "item", 5 | "legend" 6 | ]), 7 | width: PropTypes.oneOfType([ 8 | PropTypes.string, 9 | PropTypes.number 10 | ]), 11 | height: PropTypes.oneOfType([ 12 | PropTypes.string, 13 | PropTypes.number 14 | ]) 15 | } 16 | 17 | $.ig.react.propTypes.shapes.igDataChartAxes = { 18 | type: PropTypes.oneOf([ 19 | "numericX", 20 | "numericY", 21 | "categoryX", 22 | "categoryDateTimeX", 23 | "categoryY", 24 | "categoryAngle", 25 | "numericAngle", 26 | "numericRadius" 27 | ]), 28 | name: PropTypes.string, 29 | dataSource: PropTypes.object, 30 | dataSourceUrl: PropTypes.string, 31 | dataSourceType: PropTypes.string, 32 | responseDataKey: PropTypes.oneOfType([ 33 | PropTypes.string 34 | ]), 35 | responseDataType: PropTypes.oneOfType([ 36 | PropTypes.string 37 | ]), 38 | remove: PropTypes.bool, 39 | labelLocation: PropTypes.oneOf([ 40 | "outsideTop", 41 | "outsideBottom", 42 | "outsideLeft", 43 | "outsideRight", 44 | "insideTop", 45 | "insideBottom", 46 | "insideLeft", 47 | "insideRight" 48 | ]), 49 | labelVisibility: PropTypes.oneOf([ 50 | "visible" 51 | ]), 52 | labelExtent: PropTypes.object 53 | } 54 | 55 | $.ig.react.propTypes.shapes.igDataChartSeriesLegend = { 56 | element: PropTypes.string, 57 | type: PropTypes.oneOf([ 58 | "item", 59 | "legend" 60 | ]), 61 | width: PropTypes.oneOfType([ 62 | PropTypes.string, 63 | PropTypes.number 64 | ]), 65 | height: PropTypes.oneOfType([ 66 | PropTypes.string, 67 | PropTypes.number 68 | ]) 69 | } 70 | 71 | $.ig.react.propTypes.shapes.igDataChartSeries = { 72 | type: PropTypes.oneOf([ 73 | "area", 74 | "bar", 75 | "column", 76 | "line", 77 | "rangeArea", 78 | "rangeColumn", 79 | "splineArea", 80 | "spline", 81 | "stepArea", 82 | "stepLine", 83 | "waterfall", 84 | "financial", 85 | "typicalPriceIndicator", 86 | "polarArea", 87 | "polarLine", 88 | "polarScatter", 89 | "radialColumn", 90 | "radialLine", 91 | "radialPie", 92 | "scatter", 93 | "absoluteVolumeOscillatorIndicator", 94 | "averageTrueRangeIndicator", 95 | "accumulationDistributionIndicator", 96 | "averageDirectionalIndexIndicator" 97 | ]), 98 | name: PropTypes.string, 99 | dataSource: PropTypes.object, 100 | dataSourceUrl: PropTypes.string, 101 | dataSourceType: PropTypes.string, 102 | responseDataKey: PropTypes.oneOfType([ 103 | PropTypes.string 104 | ]), 105 | remove: PropTypes.bool, 106 | showTooltip: PropTypes.bool, 107 | legend: PropTypes.shape( 108 | $.ig.react.propTypes.shapes.igDataChartSeriesLegend 109 | ) 110 | } 111 | 112 | $.ig.react.propTypes.igDataChart = { 113 | id: PropTypes.string.isRequired, 114 | syncChannel: PropTypes.string, 115 | synchronizeVertically: PropTypes.bool, 116 | syncrhonizeHorizontally: PropTypes.bool, 117 | width: PropTypes.oneOfType([ 118 | PropTypes.string, 119 | PropTypes.number 120 | ]), 121 | height: PropTypes.oneOfType([ 122 | PropTypes.string, 123 | PropTypes.number 124 | ]), 125 | dataSource: PropTypes.object, 126 | dataSourceUrl: PropTypes.string, 127 | dataSourceType: PropTypes.string, 128 | responseDataKey: PropTypes.oneOfType([ 129 | PropTypes.string 130 | ]), 131 | responseDataType: PropTypes.oneOfType([ 132 | PropTypes.string 133 | ]), 134 | legend: PropTypes.shape( 135 | $.ig.react.propTypes.shapes.igDataChartLegend 136 | ), 137 | axes: PropTypes.arrayOf( 138 | PropTypes.shape($.ig.react.propTypes.shapes.igDataChartAxes) 139 | ), 140 | series: PropTypes.arrayOf( 141 | PropTypes.shape($.ig.react.propTypes.shapes.igDataChartSeries) 142 | ) 143 | } 144 | -------------------------------------------------------------------------------- /src/props/igRadialMenu.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igRadialMenuItem = { 2 | type: PropTypes.oneOf([ 3 | "button", 4 | "coloritem", 5 | "colorwell", 6 | "list", 7 | "numericitem", 8 | "numericgauge" 9 | ]), 10 | name: PropTypes.string, 11 | recentItemName: PropTypes.string, 12 | value: PropTypes.number, 13 | pendingValue: PropTypes.object, 14 | autoRotateChildren: PropTypes.bool, 15 | checkedHighlightBrush: PropTypes.string, 16 | foreground: PropTypes.string, 17 | highlightBrush: PropTypes.string, 18 | innerAreaFill: PropTypes.string, 19 | innerAreaHotTrackFill: PropTypes.string, 20 | innerAreaHotTrackStroke: PropTypes.string, 21 | innerAreaStroke: PropTypes.string, 22 | innerAreaStrokeThickness: PropTypes.number, 23 | isEnabled: PropTypes.bool, 24 | isToolTipEnabled: PropTypes.bool, 25 | outerRingButtonHotTrackFill: PropTypes.string, 26 | outerRingButtonHotTrackForeground: PropTypes.string, 27 | outerRingButtonHotTrackStroke: PropTypes.string, 28 | outerRingButtonFill: PropTypes.string, 29 | outerRingButtonForeground: PropTypes.string, 30 | outerRingButtonStroke: PropTypes.string, 31 | outerRingButtonStrokeThickness: PropTypes.number, 32 | toolTip: PropTypes.object, 33 | wedgeIndex: PropTypes.number, 34 | wedgeSpan: PropTypes.number, 35 | autoUpdateRecentItem: PropTypes.bool, 36 | childItemPlacement: PropTypes.oneOf([ 37 | "asChildren", 38 | "asSiblingsWhenChecked", 39 | "none" 40 | ]), 41 | checkBehavior: PropTypes.oneOf([ 42 | "none", 43 | "checkBox", 44 | "radioButton", 45 | "radioButtonAllowAllUp" 46 | ]), 47 | isChecked: PropTypes.bool, 48 | groupName: PropTypes.string, 49 | header: PropTypes.object, 50 | iconUri: PropTypes.string, 51 | color: PropTypes.object, 52 | pendingValueNeedleBrush: PropTypes.string, 53 | reserveFirstSlice: PropTypes.bool, 54 | smallIncrement: PropTypes.number, 55 | tickBrush: PropTypes.string, 56 | ticks: PropTypes.object, 57 | trackStartColor: PropTypes.object, 58 | trackEndColor: PropTypes.object, 59 | valueNeedleBrush: PropTypes.string, 60 | closed: PropTypes.object, 61 | opened: PropTypes.object, 62 | checked: PropTypes.object, 63 | click: PropTypes.object, 64 | unchecked: PropTypes.object, 65 | colorChanged: PropTypes.object, 66 | colorWellClick: PropTypes.object, 67 | valueChanged: PropTypes.object, 68 | pendingValueChanged: PropTypes.object 69 | } 70 | 71 | $.ig.react.propTypes.igRadialMenu = { 72 | id: PropTypes.string.isRequired, 73 | items: PropTypes.arrayOf( 74 | PropTypes.shape($.ig.react.propTypes.shapes.igRadialMenuItem) 75 | ), 76 | currentOpenMenuItemName: PropTypes.string, 77 | centerButtonContentWidth: PropTypes.number, 78 | centerButtonContentHeight: PropTypes.number, 79 | centerButtonClosedFill: PropTypes.string, 80 | centerButtonClosedStroke: PropTypes.string, 81 | centerButtonFill: PropTypes.string, 82 | centerButtonHotTrackFill: PropTypes.string, 83 | centerButtonHotTrackStroke: PropTypes.string, 84 | centerButtonStroke: PropTypes.string, 85 | centerButtonStrokeThickness: PropTypes.number, 86 | font: PropTypes.string, 87 | isOpen: PropTypes.bool, 88 | menuBackground: PropTypes.string, 89 | menuItemOpenCloseAnimationDuration: PropTypes.number, 90 | menuItemOpenCloseAnimationEasingFunction: PropTypes.object, 91 | menuOpenCloseAnimationDuration: PropTypes.number, 92 | menuOpenCloseAnimationEasingFunction: PropTypes.object, 93 | minWedgeCount: PropTypes.number, 94 | outerRingFill: PropTypes.string, 95 | outerRingThickness: PropTypes.number, 96 | outerRingStroke: PropTypes.string, 97 | outerRingStrokeThickness: PropTypes.number, 98 | rotationInDegrees: PropTypes.number, 99 | rotationAsPercentageOfWedge: PropTypes.number, 100 | wedgePaddingInDegrees: PropTypes.number, 101 | pixelScalingRatio: PropTypes.number 102 | } 103 | -------------------------------------------------------------------------------- /src/props/igTree.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igTreeBindingsBindings = { 2 | } 3 | 4 | $.ig.react.propTypes.shapes.igTreeBindings = { 5 | textKey: PropTypes.string, 6 | textXPath: PropTypes.string, 7 | valueKey: PropTypes.string, 8 | valueXPath: PropTypes.string, 9 | imageUrlKey: PropTypes.string, 10 | imageUrlXPath: PropTypes.string, 11 | navigateUrlKey: PropTypes.string, 12 | navigateUrlXPath: PropTypes.string, 13 | targetKey: PropTypes.string, 14 | expandedKey: PropTypes.string, 15 | checkedKey: PropTypes.string, 16 | primaryKey: PropTypes.string, 17 | nodeContentTemplate: PropTypes.string, 18 | childDataProperty: PropTypes.string, 19 | childDataXPath: PropTypes.string, 20 | searchFieldXPath: PropTypes.string, 21 | bindings: PropTypes.shape( 22 | $.ig.react.propTypes.shapes.igTreeBindingsBindings 23 | ) 24 | } 25 | 26 | $.ig.react.propTypes.shapes.igTreeDragAndDropSettings = { 27 | allowDrop: PropTypes.bool, 28 | dragAndDropMode: PropTypes.oneOf([ 29 | "default", 30 | "copy", 31 | "move" 32 | ]), 33 | dragOpacity: PropTypes.number, 34 | revert: PropTypes.bool, 35 | revertDuration: PropTypes.number, 36 | zIndex: PropTypes.number, 37 | dragStartDelay: PropTypes.number, 38 | expandOnDragOver: PropTypes.bool, 39 | expandDelay: PropTypes.number, 40 | helper: PropTypes.oneOfType([ 41 | PropTypes.func, 42 | PropTypes.string 43 | ]), 44 | customDropValidation: PropTypes.oneOfType([ 45 | PropTypes.func 46 | ]), 47 | containment: PropTypes.oneOfType([ 48 | PropTypes.bool, 49 | PropTypes.string, 50 | PropTypes.object, 51 | PropTypes.array 52 | ]), 53 | invalidMoveToMarkup: PropTypes.string, 54 | moveToMarkup: PropTypes.string, 55 | moveBetweenMarkup: PropTypes.string, 56 | moveAfterMarkup: PropTypes.string, 57 | moveBeforeMarkup: PropTypes.string, 58 | copyToMarkup: PropTypes.string, 59 | copyBetweenMarkup: PropTypes.string, 60 | copyAfterMarkup: PropTypes.string, 61 | copyBeforeMarkup: PropTypes.string 62 | } 63 | 64 | $.ig.react.propTypes.igTree = { 65 | id: PropTypes.string.isRequired, 66 | width: PropTypes.oneOfType([ 67 | PropTypes.string, 68 | PropTypes.number 69 | ]), 70 | height: PropTypes.oneOfType([ 71 | PropTypes.string, 72 | PropTypes.number 73 | ]), 74 | checkboxMode: PropTypes.oneOf([ 75 | "off", 76 | "biState", 77 | "triState" 78 | ]), 79 | singleBranchExpand: PropTypes.bool, 80 | hotTracking: PropTypes.bool, 81 | parentNodeImageUrl: PropTypes.oneOfType([ 82 | PropTypes.string 83 | ]), 84 | parentNodeImageClass: PropTypes.oneOfType([ 85 | PropTypes.string 86 | ]), 87 | parentNodeImageTooltip: PropTypes.oneOfType([ 88 | PropTypes.string 89 | ]), 90 | leafNodeImageUrl: PropTypes.oneOfType([ 91 | PropTypes.string 92 | ]), 93 | leafNodeImageClass: PropTypes.oneOfType([ 94 | PropTypes.string 95 | ]), 96 | leafNodeImageTooltip: PropTypes.oneOfType([ 97 | PropTypes.string 98 | ]), 99 | animationDuration: PropTypes.number, 100 | pathSeparator: PropTypes.string, 101 | dataSource: PropTypes.object, 102 | dataSourceUrl: PropTypes.oneOfType([ 103 | PropTypes.string 104 | ]), 105 | dataSourceType: PropTypes.oneOfType([ 106 | PropTypes.string 107 | ]), 108 | responseDataKey: PropTypes.oneOfType([ 109 | PropTypes.string 110 | ]), 111 | responseDataType: PropTypes.oneOfType([ 112 | PropTypes.string 113 | ]), 114 | requestType: PropTypes.string, 115 | responseContentType: PropTypes.string, 116 | initialExpandDepth: PropTypes.number, 117 | loadOnDemand: PropTypes.bool, 118 | bindings: PropTypes.shape( 119 | $.ig.react.propTypes.shapes.igTreeBindings 120 | ), 121 | defaultNodeTarget: PropTypes.string, 122 | dragAndDrop: PropTypes.bool, 123 | updateUrl: PropTypes.string, 124 | dragAndDropSettings: PropTypes.shape( 125 | $.ig.react.propTypes.shapes.igTreeDragAndDropSettings 126 | ) 127 | } 128 | -------------------------------------------------------------------------------- /src/props/igTreeGrid.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igTreeGridDataSourceSettings = { 2 | propertyExpanded: PropTypes.object, 3 | propertyDataLevel: PropTypes.object, 4 | expandedKey: PropTypes.string, 5 | dataLevelKey: PropTypes.string, 6 | initialFlatDataView: PropTypes.bool 7 | } 8 | 9 | $.ig.react.propTypes.shapes.igTreeGridLocale = { 10 | expandTooltipText: PropTypes.string, 11 | collapseTooltipText: PropTypes.string 12 | } 13 | 14 | $.ig.react.propTypes.igTreeGrid = { 15 | id: PropTypes.string.isRequired, 16 | indentation: PropTypes.string, 17 | initialIndentationLevel: PropTypes.number, 18 | showExpansionIndicator: PropTypes.bool, 19 | expandTooltipText: PropTypes.string, 20 | collapseTooltipText: PropTypes.string, 21 | foreignKey: PropTypes.string, 22 | initialExpandDepth: PropTypes.number, 23 | foreignKeyRootValue: PropTypes.oneOfType([ 24 | PropTypes.number, 25 | PropTypes.string 26 | ]), 27 | renderExpansionIndicatorColumn: PropTypes.bool, 28 | renderFirstDataCellFunction: PropTypes.oneOfType([ 29 | PropTypes.string, 30 | PropTypes.object 31 | ]), 32 | childDataKey: PropTypes.string, 33 | renderExpansionCellFunction: PropTypes.oneOfType([ 34 | PropTypes.string, 35 | PropTypes.object 36 | ]), 37 | enableRemoteLoadOnDemand: PropTypes.bool, 38 | dataSourceSettings: PropTypes.shape( 39 | $.ig.react.propTypes.shapes.igTreeGridDataSourceSettings 40 | ), 41 | locale: PropTypes.shape( 42 | $.ig.react.propTypes.shapes.igTreeGridLocale 43 | ), 44 | virtualizationMode: PropTypes.string, 45 | width: PropTypes.oneOfType([ 46 | PropTypes.string, 47 | PropTypes.number 48 | ]), 49 | height: PropTypes.oneOfType([ 50 | PropTypes.string, 51 | PropTypes.number 52 | ]), 53 | autoAdjustHeight: PropTypes.bool, 54 | defaultColumnWidth: PropTypes.oneOfType([ 55 | PropTypes.string, 56 | PropTypes.number 57 | ]), 58 | autoGenerateColumns: PropTypes.bool, 59 | virtualization: PropTypes.bool, 60 | rowVirtualization: PropTypes.bool, 61 | virtualizationMouseWheelStep: PropTypes.number, 62 | adjustVirtualHeights: PropTypes.bool, 63 | templatingEngine: PropTypes.oneOf([ 64 | "infragistics", 65 | "jsRender" 66 | ]), 67 | columns: PropTypes.arrayOf( 68 | PropTypes.shape($.ig.react.propTypes.shapes.igGridColumn) 69 | ), 70 | dataSource: PropTypes.oneOfType([ 71 | PropTypes.array, 72 | PropTypes.object, 73 | PropTypes.string 74 | ]), 75 | dataSourceUrl: PropTypes.string, 76 | dataSourceType: PropTypes.string, 77 | responseDataKey: PropTypes.string, 78 | responseTotalRecCountKey: PropTypes.string, 79 | requestType: PropTypes.string, 80 | responseContentType: PropTypes.string, 81 | showHeader: PropTypes.bool, 82 | showFooter: PropTypes.bool, 83 | fixedHeaders: PropTypes.bool, 84 | fixedFooters: PropTypes.bool, 85 | caption: PropTypes.string, 86 | features: PropTypes.arrayOf( 87 | PropTypes.shape($.ig.react.propTypes.shapes.igGridFeature) 88 | ), 89 | tabIndex: PropTypes.number, 90 | localSchemaTransform: PropTypes.bool, 91 | primaryKey: PropTypes.string, 92 | serializeTransactionLog: PropTypes.bool, 93 | autoCommit: PropTypes.bool, 94 | aggregateTransactions: PropTypes.bool, 95 | autoFormat: PropTypes.oneOfType([ 96 | PropTypes.string, 97 | PropTypes.bool 98 | ]), 99 | renderCheckboxes: PropTypes.bool, 100 | updateUrl: PropTypes.string, 101 | alternateRowStyles: PropTypes.bool, 102 | autofitLastColumn: PropTypes.bool, 103 | enableHoverStyles: PropTypes.bool, 104 | enableUTCDates: PropTypes.bool, 105 | mergeUnboundColumns: PropTypes.bool, 106 | jsonpRequest: PropTypes.bool, 107 | enableResizeContainerCheck: PropTypes.bool, 108 | featureChooserIconDisplay: PropTypes.oneOf([ 109 | "none", 110 | "desktopOnly", 111 | "always" 112 | ]), 113 | scrollSettings: PropTypes.shape( 114 | $.ig.react.propTypes.shapes.igGridScrollSettings 115 | ) 116 | } 117 | -------------------------------------------------------------------------------- /samples/ig-financial-state/src/components/MainComponent.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import EditorsBox from './EditorsBox.js'; 3 | import ChartsBox from './ChartsBox.js'; 4 | import GaugesBox from './GaugesBox.js'; 5 | import TotalBox from './TotalBox.js'; 6 | 7 | // Ignite UI Required Combined JavaScript Files 8 | import "@infragistics/ignite-ui-full/en/js/infragistics.core.js"; 9 | import "@infragistics/ignite-ui-full/en/js/infragistics.lob.js"; 10 | import "@infragistics/ignite-ui-full/en/js/infragistics.dv.js"; 11 | 12 | // CSS files 13 | import "@infragistics/ignite-ui-full/en/css/structure/infragistics.css"; 14 | import "@infragistics/ignite-ui-full/en/css/themes/infragistics/infragistics.theme.css"; 15 | import '../sample.css'; 16 | 17 | class MainComponent extends React.Component { 18 | generateData = () => { 19 | var num = 12, data = [], rand1, rand2, rand3, 20 | mnths = this.getShortMonthNames(); 21 | 22 | 23 | for (var i = 0; i < num; i++) { 24 | rand1 = Math.random() * 50.0; 25 | rand2 = Math.random() * 40.0; 26 | rand3 = rand1 - rand2; 27 | data[i] = { 28 | index: i, 29 | month: mnths[i], 30 | revenue: rand1, 31 | expenses: rand2, 32 | profit: rand3 33 | }; 34 | } 35 | return { data: data }; 36 | }; 37 | 38 | changeMonth = (index) => { 39 | this.setState({ month: index, update: "month" }); 40 | }; 41 | 42 | changeRevenue = (value) => { 43 | var data = this.state.data; 44 | data.data[this.state.month].revenue = value; 45 | data.data[this.state.month].profit = value - data.data[this.state.month].expenses; 46 | this.setState({ data: data, update: "revenue" }); 47 | }; 48 | 49 | changeExpenses = (value) => { 50 | var data = this.state.data; 51 | data.data[this.state.month].expenses = value; 52 | data.data[this.state.month].profit = data.data[this.state.month].revenue - value; 53 | this.setState({ data: data, update: "expenses" }); 54 | }; 55 | 56 | changeProfit = (value) => { 57 | var data = this.state.data; 58 | data.data[this.state.month].profit = value; 59 | data.data[this.state.month].revenue = value + data.data[this.state.month].expenses; 60 | this.setState({ data: data, update: "profit" }); 61 | }; 62 | 63 | getMonths = () => { 64 | return { 65 | months: [ 66 | { value: 0, text: "January"}, { value: 1, text: "February"}, { value: 2, text: "March"}, 67 | { value: 3, text: "April"}, { value: 4, text: "May"}, { value: 5, text: "June"}, 68 | { value: 6, text: "July"}, { value: 7, text: "August"}, { value: 8, text: "September"}, 69 | { value: 9, text: "October"}, { value: 10, text: "November"}, { value: 11, text: "December"} 70 | ]}; 71 | }; 72 | 73 | getRandomInt = (max) => { 74 | return Math.floor(Math.random() * Math.floor(max)); 75 | }; 76 | 77 | getShortMonthNames = () => { 78 | return ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; 79 | }; 80 | 81 | state = { 82 | month: this.getRandomInt(12), 83 | data: this.generateData(), 84 | update: null, 85 | months: this.getMonths() 86 | }; 87 | 88 | render() { 89 | return ( 90 |
91 | 99 |
100 | 102 | 108 |
109 | 113 |
114 | ); 115 | } 116 | } 117 | 118 | export default MainComponent; -------------------------------------------------------------------------------- /src/props/igUpload.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igUploadLocale = { 2 | labelUploadButton: PropTypes.string, 3 | labelAddButton: PropTypes.string, 4 | labelClearAllButton: PropTypes.string, 5 | labelSummaryTemplate: PropTypes.string, 6 | labelSummaryProgressBarTemplate: PropTypes.string, 7 | labelShowDetails: PropTypes.string, 8 | labelHideDetails: PropTypes.string, 9 | labelSummaryProgressButtonCancel: PropTypes.string, 10 | labelSummaryProgressButtonContinue: PropTypes.string, 11 | labelSummaryProgressButtonDone: PropTypes.string, 12 | labelProgressBarFileNameContinue: PropTypes.string, 13 | errorMessageFileSizeExceeded: PropTypes.string, 14 | errorMessageGetFileStatus: PropTypes.string, 15 | errorMessageCancelUpload: PropTypes.string, 16 | errorMessageNoSuchFile: PropTypes.string, 17 | errorMessageOther: PropTypes.string, 18 | errorMessageValidatingFileExtension: PropTypes.string, 19 | errorMessageAJAXRequestFileSize: PropTypes.string, 20 | errorMessageMaxUploadedFiles: PropTypes.string, 21 | errorMessageMaxSimultaneousFiles: PropTypes.string, 22 | errorMessageTryToRemoveNonExistingFile: PropTypes.string, 23 | errorMessageTryToStartNonExistingFile: PropTypes.string, 24 | errorMessageDropMultipleFilesWhenSingleModel: PropTypes.string, 25 | titleUploadFileButtonInit: PropTypes.string, 26 | titleAddFileButton: PropTypes.string, 27 | titleCancelUploadButton: PropTypes.string, 28 | titleSummaryProgressButtonContinue: PropTypes.string, 29 | titleClearUploaded: PropTypes.string, 30 | titleShowDetailsButton: PropTypes.string, 31 | titleHideDetailsButton: PropTypes.string, 32 | titleSummaryProgressButtonCancel: PropTypes.string, 33 | titleSummaryProgressButtonDone: PropTypes.string, 34 | titleSingleUploadButtonContinue: PropTypes.string, 35 | titleClearAllButton: PropTypes.string 36 | } 37 | 38 | $.ig.react.propTypes.shapes.igUploadFileExtensionIcons = { 39 | ext: PropTypes.array, 40 | css: PropTypes.string, 41 | def: PropTypes.bool 42 | } 43 | 44 | $.ig.react.propTypes.igUpload = { 45 | id: PropTypes.string.isRequired, 46 | width: PropTypes.oneOfType([ 47 | PropTypes.number, 48 | PropTypes.string 49 | ]), 50 | height: PropTypes.oneOfType([ 51 | PropTypes.number, 52 | PropTypes.string 53 | ]), 54 | autostartupload: PropTypes.bool, 55 | labelUploadButton: PropTypes.string, 56 | labelAddButton: PropTypes.string, 57 | labelClearAllButton: PropTypes.string, 58 | labelSummaryTemplate: PropTypes.string, 59 | labelSummaryProgressBarTemplate: PropTypes.string, 60 | labelShowDetails: PropTypes.string, 61 | labelHideDetails: PropTypes.string, 62 | labelSummaryProgressButtonCancel: PropTypes.string, 63 | labelSummaryProgressButtonContinue: PropTypes.string, 64 | labelSummaryProgressButtonDone: PropTypes.string, 65 | labelProgressBarFileNameContinue: PropTypes.string, 66 | errorMessageMaxFileSizeExceeded: PropTypes.string, 67 | errorMessageGetFileStatus: PropTypes.string, 68 | errorMessageCancelUpload: PropTypes.string, 69 | errorMessageNoSuchFile: PropTypes.string, 70 | errorMessageOther: PropTypes.string, 71 | errorMessageValidatingFileExtension: PropTypes.string, 72 | errorMessageAJAXRequestFileSize: PropTypes.string, 73 | errorMessageTryToRemoveNonExistingFile: PropTypes.string, 74 | errorMessageTryToStartNonExistingFile: PropTypes.string, 75 | errorMessageMaxUploadedFiles: PropTypes.string, 76 | errorMessageMaxSimultaneousFiles: PropTypes.string, 77 | errorMessageDropMultipleFilesWhenSingleModel: PropTypes.string, 78 | locale: PropTypes.shape( 79 | $.ig.react.propTypes.shapes.igUploadLocale 80 | ), 81 | uploadUrl: PropTypes.string, 82 | progressUrl: PropTypes.string, 83 | allowedExtensions: PropTypes.array, 84 | showFileExtensionIcon: PropTypes.bool, 85 | css: PropTypes.object, 86 | fileExtensionIcons: PropTypes.shape( 87 | $.ig.react.propTypes.shapes.igUploadFileExtensionIcons 88 | ), 89 | mode: PropTypes.any, 90 | multipleFiles: PropTypes.bool, 91 | maxUploadedFiles: PropTypes.number, 92 | maxSimultaneousFilesUploads: PropTypes.number, 93 | fileSizeMetric: PropTypes.any, 94 | controlId: PropTypes.string, 95 | fileSizeDecimalDisplay: PropTypes.number, 96 | maxFileSize: PropTypes.object, 97 | useSingleRequest: PropTypes.bool 98 | } 99 | -------------------------------------------------------------------------------- /src/props/igRadialGauge.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igRadialGaugeRange = { 2 | name: PropTypes.string, 3 | startValue: PropTypes.number, 4 | endValue: PropTypes.number, 5 | outerStartExtent: PropTypes.number, 6 | outerEndExtent: PropTypes.number, 7 | innerStartExtent: PropTypes.number, 8 | innerEndExtent: PropTypes.number, 9 | brush: PropTypes.string, 10 | outline: PropTypes.string, 11 | strokeThickness: PropTypes.number, 12 | remove: PropTypes.bool 13 | } 14 | 15 | $.ig.react.propTypes.igRadialGauge = { 16 | id: PropTypes.string.isRequired, 17 | width: PropTypes.oneOfType([ 18 | PropTypes.string, 19 | PropTypes.number 20 | ]), 21 | height: PropTypes.oneOfType([ 22 | PropTypes.string, 23 | PropTypes.number 24 | ]), 25 | ranges: PropTypes.arrayOf( 26 | PropTypes.shape($.ig.react.propTypes.shapes.igRadialGaugeRange) 27 | ), 28 | rangeBrushes: PropTypes.object, 29 | rangeOutlines: PropTypes.object, 30 | minimumValue: PropTypes.number, 31 | maximumValue: PropTypes.number, 32 | interval: PropTypes.number, 33 | centerX: PropTypes.number, 34 | centerY: PropTypes.number, 35 | value: PropTypes.number, 36 | scaleStartAngle: PropTypes.number, 37 | scaleEndAngle: PropTypes.number, 38 | scaleSweepDirection: PropTypes.oneOf([ 39 | "counterclockwise", 40 | "clockwise" 41 | ]), 42 | transitionDuration: PropTypes.number, 43 | transitionEasingFunction: PropTypes.object, 44 | needleBrush: PropTypes.string, 45 | needleOutline: PropTypes.string, 46 | needleStartExtent: PropTypes.number, 47 | needleEndExtent: PropTypes.number, 48 | needleShape: PropTypes.oneOf([ 49 | "none", 50 | "rectangle", 51 | "triangle", 52 | "needle", 53 | "trapezoid", 54 | "rectangleWithBulb", 55 | "triangleWithBulb", 56 | "needleWithBulb", 57 | "trapezoidWithBulb" 58 | ]), 59 | needleStartWidthRatio: PropTypes.number, 60 | needleEndWidthRatio: PropTypes.number, 61 | needleBaseFeatureWidthRatio: PropTypes.number, 62 | needleBaseFeatureExtent: PropTypes.number, 63 | needlePointFeatureWidthRatio: PropTypes.number, 64 | needlePointFeatureExtent: PropTypes.number, 65 | needlePivotWidthRatio: PropTypes.number, 66 | needlePivotInnerWidthRatio: PropTypes.number, 67 | needlePivotShape: PropTypes.oneOf([ 68 | "none", 69 | "circle", 70 | "circleWithHole", 71 | "circleOverlay", 72 | "circleOverlayWithHole", 73 | "circleUnderlay", 74 | "circleUnderlayWithHole" 75 | ]), 76 | scaleStartExtent: PropTypes.number, 77 | needlePivotBrush: PropTypes.string, 78 | needlePivotOutline: PropTypes.string, 79 | needleStrokeThickness: PropTypes.number, 80 | needlePivotStrokeThickness: PropTypes.number, 81 | scaleEndExtent: PropTypes.number, 82 | labelExtent: PropTypes.number, 83 | labelInterval: PropTypes.number, 84 | tickStartExtent: PropTypes.number, 85 | tickEndExtent: PropTypes.number, 86 | tickStrokeThickness: PropTypes.number, 87 | tickBrush: PropTypes.string, 88 | fontBrush: PropTypes.string, 89 | minorTickStartExtent: PropTypes.number, 90 | minorTickEndExtent: PropTypes.number, 91 | minorTickStrokeThickness: PropTypes.number, 92 | minorTickBrush: PropTypes.string, 93 | minorTickCount: PropTypes.number, 94 | scaleBrush: PropTypes.string, 95 | backingBrush: PropTypes.string, 96 | backingOutline: PropTypes.string, 97 | backingStrokeThickness: PropTypes.number, 98 | backingOuterExtent: PropTypes.number, 99 | backingOversweep: PropTypes.number, 100 | scaleOversweep: PropTypes.number, 101 | scaleOversweepShape: PropTypes.oneOf([ 102 | "auto", 103 | "circular", 104 | "fitted" 105 | ]), 106 | backingCornerRadius: PropTypes.number, 107 | backingInnerExtent: PropTypes.number, 108 | backingShape: PropTypes.oneOf([ 109 | "circular", 110 | "fitted" 111 | ]), 112 | radiusMultiplier: PropTypes.number, 113 | duplicateLabelOmissionStrategy: PropTypes.oneOf([ 114 | "omitLast", 115 | "omitFirst", 116 | "omitNeither", 117 | "omitBoth" 118 | ]), 119 | isNeedleDraggingEnabled: PropTypes.bool, 120 | isNeedleDraggingConstrained: PropTypes.bool, 121 | font: PropTypes.string, 122 | transitionProgress: PropTypes.number, 123 | pixelScalingRatio: PropTypes.number 124 | } 125 | -------------------------------------------------------------------------------- /src/props/igCombo.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igComboLocale = { 2 | noMatchFoundText: PropTypes.object, 3 | dropDownButtonTitle: PropTypes.object, 4 | clearButtonTitle: PropTypes.object, 5 | placeHolder: PropTypes.object 6 | } 7 | 8 | $.ig.react.propTypes.shapes.igComboLoadOnDemandSettings = { 9 | enabled: PropTypes.bool, 10 | pageSize: PropTypes.number 11 | } 12 | 13 | $.ig.react.propTypes.shapes.igComboMultiSelection = { 14 | enabled: PropTypes.bool, 15 | addWithKeyModifier: PropTypes.bool, 16 | showCheckboxes: PropTypes.bool, 17 | itemSeparator: PropTypes.string 18 | } 19 | 20 | $.ig.react.propTypes.shapes.igComboGrouping = { 21 | key: PropTypes.string, 22 | dir: PropTypes.oneOf([ 23 | "asc", 24 | "desc" 25 | ]) 26 | } 27 | 28 | $.ig.react.propTypes.shapes.igComboInitialSelectedItem = { 29 | index: PropTypes.number, 30 | value: PropTypes.object 31 | } 32 | 33 | $.ig.react.propTypes.igCombo = { 34 | id: PropTypes.string.isRequired, 35 | width: PropTypes.oneOfType([ 36 | PropTypes.string, 37 | PropTypes.number 38 | ]), 39 | height: PropTypes.oneOfType([ 40 | PropTypes.string, 41 | PropTypes.number 42 | ]), 43 | dropDownWidth: PropTypes.oneOfType([ 44 | PropTypes.string, 45 | PropTypes.number 46 | ]), 47 | dataSource: PropTypes.object, 48 | dataSourceType: PropTypes.string, 49 | dataSourceUrl: PropTypes.string, 50 | responseTotalRecCountKey: PropTypes.string, 51 | responseDataKey: PropTypes.string, 52 | responseDataType: PropTypes.oneOf([ 53 | "json", 54 | "xml", 55 | "html", 56 | "script", 57 | "jsonp", 58 | "text" 59 | ]), 60 | responseContentType: PropTypes.string, 61 | requestType: PropTypes.string, 62 | valueKey: PropTypes.string, 63 | textKey: PropTypes.string, 64 | itemTemplate: PropTypes.string, 65 | headerTemplate: PropTypes.string, 66 | footerTemplate: PropTypes.string, 67 | inputName: PropTypes.string, 68 | animationShowDuration: PropTypes.number, 69 | animationHideDuration: PropTypes.number, 70 | dropDownAttachedToBody: PropTypes.bool, 71 | filteringType: PropTypes.oneOf([ 72 | "remote", 73 | "local", 74 | "none" 75 | ]), 76 | filterExprUrlKey: PropTypes.string, 77 | filteringCondition: PropTypes.oneOf([ 78 | "contains", 79 | "doesNotContain", 80 | "startsWith", 81 | "endsWith", 82 | "greaterThan", 83 | "lessThan", 84 | "greaterThanOrEqualTo", 85 | "lessThanOrEqualTo", 86 | "equals", 87 | "doesNotEqual" 88 | ]), 89 | filteringLogic: PropTypes.oneOf([ 90 | "OR", 91 | "AND" 92 | ]), 93 | noMatchFoundText: PropTypes.string, 94 | dropDownButtonTitle: PropTypes.string, 95 | clearButtonTitle: PropTypes.string, 96 | placeHolder: PropTypes.string, 97 | locale: PropTypes.shape( 98 | $.ig.react.propTypes.shapes.igComboLocale 99 | ), 100 | loadOnDemandSettings: PropTypes.shape( 101 | $.ig.react.propTypes.shapes.igComboLoadOnDemandSettings 102 | ), 103 | visibleItemsCount: PropTypes.number, 104 | mode: PropTypes.oneOf([ 105 | "editable", 106 | "dropdown", 107 | "readonlylist", 108 | "readonly" 109 | ]), 110 | virtualization: PropTypes.bool, 111 | multiSelection: PropTypes.shape( 112 | $.ig.react.propTypes.shapes.igComboMultiSelection 113 | ), 114 | grouping: PropTypes.shape( 115 | $.ig.react.propTypes.shapes.igComboGrouping 116 | ), 117 | validatorOptions: PropTypes.object, 118 | highlightMatchesMode: PropTypes.oneOf([ 119 | "multi", 120 | "contains", 121 | "startsWith", 122 | "full" 123 | ]), 124 | caseSensitive: PropTypes.bool, 125 | autoSelectFirstMatch: PropTypes.bool, 126 | autoComplete: PropTypes.bool, 127 | allowCustomValue: PropTypes.bool, 128 | closeDropDownOnBlur: PropTypes.bool, 129 | delayInputChangeProcessing: PropTypes.number, 130 | tabIndex: PropTypes.number, 131 | dropDownOnFocus: PropTypes.bool, 132 | closeDropDownOnSelect: PropTypes.bool, 133 | selectItemBySpaceKey: PropTypes.bool, 134 | initialSelectedItems: PropTypes.arrayOf( 135 | PropTypes.shape($.ig.react.propTypes.shapes.igComboInitialSelectedItem) 136 | ), 137 | preventSubmitOnEnter: PropTypes.bool, 138 | format: PropTypes.string, 139 | suppressKeyboard: PropTypes.bool, 140 | enableClearButton: PropTypes.bool, 141 | dropDownOrientation: PropTypes.oneOf([ 142 | "auto", 143 | "bottom", 144 | "top" 145 | ]) 146 | } 147 | -------------------------------------------------------------------------------- /samples/ig-grid/src/components/IgEditBox.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import createReactClass from 'create-react-class'; 3 | import IgTextEditor from 'igniteui-react-wrappers/ui/igTextEditor.js'; 4 | import IgNumericEditor from 'igniteui-react-wrappers/ui/igNumericEditor.js'; 5 | import IgButton from 'igniteui-react-wrappers/ui/igButton.js'; 6 | import '../sample.css'; 7 | import $ from 'jquery'; 8 | 9 | var IgEditBox = createReactClass({ 10 | render: function () { 11 | var rowId = this.props.rowId, 12 | v = rowId > -1; 13 | return ( 14 |
15 |

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

16 |
17 |
18 | 19 |
20 | 26 |
27 |
28 |
29 | 30 |
31 | 38 |
39 |
40 |
41 | 42 |
43 | 50 |
51 |
52 |
53 |
54 |
55 |
56 | 57 |
58 |
59 | ); 60 | }, 61 | handleTextEditorKeyPress: function (e, args) { 62 | if (args.key === $.ui.keyCode.ENTER) { 63 | this.handleButtonUpdateClick(e); 64 | } 65 | }, 66 | handleTextEditorKeyDown: function (e) { 67 | if (e.keyCode === $.ui.keyCode.ENTER) { 68 | this.handleButtonUpdateClick(e); 69 | } 70 | }, 71 | handleButtonDeleteClick: function (e) { 72 | var func = this.props.btnDeleteClicked; 73 | if (func) { 74 | func(e, this.props.rowId); 75 | } 76 | }, 77 | handleButtonUpdateClick: function (e) { 78 | var func = this.props.btnUpdateClicked; 79 | if (func) { 80 | func(e, 81 | this.props.rowId, 82 | this.refs.editorName.igControl.value(), 83 | this.refs.editorStock.igControl.value(), 84 | this.refs.editorPrice.igControl.value()); 85 | } 86 | } 87 | }); 88 | 89 | export default IgEditBox; -------------------------------------------------------------------------------- /src/props/igVideoPlayer.js: -------------------------------------------------------------------------------- 1 | $.ig.react.propTypes.shapes.igVideoPlayerBookmark = { 2 | time: PropTypes.number, 3 | title: PropTypes.string, 4 | disabled: PropTypes.bool 5 | } 6 | 7 | $.ig.react.propTypes.shapes.igVideoPlayerRelatedVideo = { 8 | imageUrl: PropTypes.string, 9 | title: PropTypes.string, 10 | width: PropTypes.number, 11 | height: PropTypes.number, 12 | link: PropTypes.string, 13 | sources: PropTypes.array, 14 | css: PropTypes.string 15 | } 16 | 17 | $.ig.react.propTypes.shapes.igVideoPlayerBanner = { 18 | imageUrl: PropTypes.string, 19 | times: PropTypes.array, 20 | closeBanner: PropTypes.bool, 21 | animate: PropTypes.bool, 22 | visible: PropTypes.bool, 23 | duration: PropTypes.number, 24 | autohide: PropTypes.bool, 25 | hidedelay: PropTypes.number, 26 | link: PropTypes.string, 27 | width: PropTypes.oneOfType([ 28 | PropTypes.number, 29 | PropTypes.string 30 | ]), 31 | height: PropTypes.oneOfType([ 32 | PropTypes.number, 33 | PropTypes.string 34 | ]), 35 | css: PropTypes.string 36 | } 37 | 38 | $.ig.react.propTypes.shapes.igVideoPlayerCommercialsLinkedCommercial = { 39 | sources: PropTypes.array, 40 | startTime: PropTypes.number, 41 | link: PropTypes.string, 42 | title: PropTypes.string 43 | } 44 | 45 | $.ig.react.propTypes.shapes.igVideoPlayerCommercialsEmbeddedCommercial = { 46 | startTime: PropTypes.number, 47 | endTime: PropTypes.number, 48 | link: PropTypes.string, 49 | title: PropTypes.string 50 | } 51 | 52 | $.ig.react.propTypes.shapes.igVideoPlayerCommercialsAdMessage = { 53 | animate: PropTypes.bool, 54 | autoHide: PropTypes.bool, 55 | hideDelay: PropTypes.number, 56 | animationDuration: PropTypes.number 57 | } 58 | 59 | $.ig.react.propTypes.shapes.igVideoPlayerCommercials = { 60 | linkedCommercials: PropTypes.arrayOf( 61 | PropTypes.shape($.ig.react.propTypes.shapes.igVideoPlayerCommercialsLinkedCommercial) 62 | ), 63 | embeddedCommercials: PropTypes.arrayOf( 64 | PropTypes.shape($.ig.react.propTypes.shapes.igVideoPlayerCommercialsEmbeddedCommercial) 65 | ), 66 | alwaysPlayCommercials: PropTypes.bool, 67 | showBookmarks: PropTypes.bool, 68 | adMessage: PropTypes.shape( 69 | $.ig.react.propTypes.shapes.igVideoPlayerCommercialsAdMessage 70 | ) 71 | } 72 | 73 | $.ig.react.propTypes.shapes.igVideoPlayerLocale = { 74 | liveStream: PropTypes.bool, 75 | live: PropTypes.bool, 76 | paused: PropTypes.bool, 77 | playing: PropTypes.bool, 78 | play: PropTypes.bool, 79 | volume: PropTypes.bool, 80 | progressLabelLongFormat: PropTypes.bool, 81 | progressLabelShortFormat: PropTypes.bool, 82 | enterFullscreen: PropTypes.bool, 83 | exitFullscreen: PropTypes.bool, 84 | skipTo: PropTypes.bool, 85 | buffering: PropTypes.bool, 86 | adMessage: PropTypes.bool, 87 | adMessageLong: PropTypes.bool, 88 | adMessageNoDuration: PropTypes.bool, 89 | adNewWindowTip: PropTypes.bool, 90 | relatedVideos: PropTypes.bool, 91 | replayButton: PropTypes.bool, 92 | replayTooltip: PropTypes.bool 93 | } 94 | 95 | $.ig.react.propTypes.igVideoPlayer = { 96 | id: PropTypes.string.isRequired, 97 | sources: PropTypes.array, 98 | width: PropTypes.oneOfType([ 99 | PropTypes.string, 100 | PropTypes.number 101 | ]), 102 | height: PropTypes.oneOfType([ 103 | PropTypes.string, 104 | PropTypes.number 105 | ]), 106 | posterUrl: PropTypes.string, 107 | preload: PropTypes.bool, 108 | autoplay: PropTypes.bool, 109 | autohide: PropTypes.bool, 110 | volumeAutohideDelay: PropTypes.number, 111 | centerButtonHideDelay: PropTypes.number, 112 | loop: PropTypes.bool, 113 | browserControls: PropTypes.bool, 114 | fullscreen: PropTypes.bool, 115 | volume: PropTypes.number, 116 | muted: PropTypes.bool, 117 | title: PropTypes.string, 118 | showSeekTime: PropTypes.bool, 119 | progressLabelFormat: PropTypes.string, 120 | bookmarks: PropTypes.arrayOf( 121 | PropTypes.shape($.ig.react.propTypes.shapes.igVideoPlayerBookmark) 122 | ), 123 | relatedVideos: PropTypes.arrayOf( 124 | PropTypes.shape($.ig.react.propTypes.shapes.igVideoPlayerRelatedVideo) 125 | ), 126 | banners: PropTypes.arrayOf( 127 | PropTypes.shape($.ig.react.propTypes.shapes.igVideoPlayerBanner) 128 | ), 129 | commercials: PropTypes.shape( 130 | $.ig.react.propTypes.shapes.igVideoPlayerCommercials 131 | ), 132 | locale: PropTypes.shape( 133 | $.ig.react.propTypes.shapes.igVideoPlayerLocale 134 | ) 135 | } 136 | -------------------------------------------------------------------------------- /samples/ig-grid/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ' 45 | ); 46 | }); 47 | } else { 48 | // Is not local host. Just register service worker 49 | registerValidSW(swUrl); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | installingWorker.onstatechange = () => { 62 | if (installingWorker.state === 'installed') { 63 | if (navigator.serviceWorker.controller) { 64 | // At this point, the old content will have been purged and 65 | // the fresh content will have been added to the cache. 66 | // It's the perfect time to display a "New content is 67 | // available; please refresh." message in your web app. 68 | console.log('New content is available; please refresh.'); 69 | } else { 70 | // At this point, everything has been precached. 71 | // It's the perfect time to display a 72 | // "Content is cached for offline use." message. 73 | console.log('Content is cached for offline use.'); 74 | } 75 | } 76 | }; 77 | }; 78 | }) 79 | .catch(error => { 80 | console.error('Error during service worker registration:', error); 81 | }); 82 | } 83 | 84 | function checkValidServiceWorker(swUrl) { 85 | // Check if the service worker can be found. If it can't reload the page. 86 | fetch(swUrl) 87 | .then(response => { 88 | // Ensure service worker exists, and that we really are getting a JS file. 89 | if ( 90 | response.status === 404 || 91 | response.headers.get('content-type').indexOf('javascript') === -1 92 | ) { 93 | // No service worker found. Probably a different app. Reload the page. 94 | navigator.serviceWorker.ready.then(registration => { 95 | registration.unregister().then(() => { 96 | window.location.reload(); 97 | }); 98 | }); 99 | } else { 100 | // Service worker found. Proceed as normal. 101 | registerValidSW(swUrl); 102 | } 103 | }) 104 | .catch(() => { 105 | console.log( 106 | 'No internet connection found. App is running in offline mode.' 107 | ); 108 | }); 109 | } 110 | 111 | export function unregister() { 112 | if ('serviceWorker' in navigator) { 113 | navigator.serviceWorker.ready.then(registration => { 114 | registration.unregister(); 115 | }); 116 | } 117 | } 118 | --------------------------------------------------------------------------------