From 9d0e0bff012f9cdedf21c87a19314d2e14bee2e1 Mon Sep 17 00:00:00 2001 From: Diogo Date: Mon, 23 Jan 2017 10:12:01 +0000 Subject: [PATCH] Version 2 bump (#541) * Version 2 bump * Added lerna and package folders * Moved files to their package folders * Got project to build and work * Fixed immutable example * Moved RowContainer context menu tests * Initial development on webpack dev server * Revamp on styles to use webpack * Moved examples to examples package * Build with npm scripts and webpack * Made internal package references * Revamp in some examples * Finished revamp on the examples * All tests passing * Added some npm scripts to run test * Added some initial setup * Removed flow task for now * Added eslint step and fixed karma test run * Deleted all the unused gulp tasks and prepared for publish * $(echo v2.0.1) * Updated branch publish * Fixed lerna version missmatch * Need to copy npmrc before publish to npm for each package * Renamed examples package to be react-data-grid-examples * Have a dist folder for each package * $(echo v2.0.0-dc-arch-revamp2285) * Added an npmignore to each package * Added package entry points * Got lerna and webpack dev server to work together * Added a new build script * Updated appveyor * Testing new build method * Defined env variable for testing * $(echo v2.0.0-dc-arch-revamp2296) * stop using node env vars * $(echo v2.0.0-dc-arch-revamp2299) * New approach for publish using node * Clean all dist folders before building * Pre publish should not run before tests * $(echo v2.0.0-dc-arch-revamp2304) * $(echo v2.0.0-dc-arch-revamp2306) * $(echo v2.0.0-dc-arch-revamp2308) * Skip git commits for branch publish * $(echo v2.0.0-dc-arch-revamp2310) * Webpack dev server improvements * Script delegation depending on the host for the examples * Package entries to be replaced before publish and not post test * Fixed lint error * Deleted some unused packages * Added publish examples script * ScriptDelegator for documentation and examples * Added react data grid readme * Fixed react-data-grid readme relative paths * Fixed react-data-grid readme * Added react-data-grid-addons README * Updated README * Migrations update * Updated CONTRIBUTING.md * Fixed markdown and added build info * Fixed markdown * Added project structure section * Bold not italic * publishMaster reworked * Style changed after merge * Fixed examples * React 15 * Added eslint npm script and description on Contributing about npm scripts * Upgraded react-ron-autocomplete version --- CONTRIBUTING.md | 93 +- README.md | 27 +- addons.js | 1 - appveyor.yml | 24 +- ci/buildScripts/build.ps1 | 22 + ci/publish/copy-npmrc.ps1 | 12 + ci/publish/publishBranch.ps1 | 3 +- ci/publish/publishExamples.js | 13 + ci/publish/publishMaster.ps1 | 17 +- ci/publish/replacePackageEntry.js | 25 + config/karma.js | 4 +- config/webpack.common.config.js | 57 + config/webpack.common.js | 54 - config/webpack.config.prod.js | 22 + config/webpack.react-data-grid.js | 34 - config/webpack.ui-plugins.js | 19 - examples/assets/js/JSXTransformer.js | 15199 ----------- examples/assets/js/ReactPlayground.js | 232 - examples/assets/js/adazzlelogobar.png | Bin 15680 -> 0 bytes examples/assets/js/affix.js | 162 - examples/assets/js/bootstrap.min.js | 7 - examples/assets/js/codeMirror.js | 6027 ----- examples/assets/js/google-map.js | 116 - examples/assets/js/headroom.min.js | 7 - examples/assets/js/html5shiv.js | 8 - examples/assets/js/immutable.min.js | 36 - examples/assets/js/jQuery.headroom.min.js | 7 - examples/assets/js/javascript.js | 425 - examples/assets/js/jquery.js | 9205 ------- examples/assets/js/markdown.js | 1725 -- examples/assets/js/react-data-grid.css | 431 - examples/assets/js/react-dom.js | 42 - examples/assets/js/react-router.min.js | 2 - examples/assets/js/react-with-addons.js | 20761 ---------------- examples/assets/js/react.js | 19541 --------------- examples/assets/js/respond.min.js | 6 - examples/assets/js/scrollspy.js | 175 - examples/assets/js/template.js | 13 - examples/scripts/example01-basic.js | 52 - examples/scripts/example02-resizable-cols.js | 92 - examples/scripts/example03-fixed-cols.js | 90 - examples/scripts/example04-editable.js | 118 - .../scripts/example05-custom-formatters.js | 103 - .../scripts/example06-built-in-editors.js | 119 - examples/scripts/example08-sortable-cols.js | 128 - examples/scripts/example09-filterable-grid.js | 142 - .../scripts/example10-one-million-rows.js | 72 - examples/scripts/example11-immutable-data.js | 73 - .../scripts/example12-customRowRenderer.js | 127 - examples/scripts/example13-all-features.js | 271 - .../example14-all-features-immutable.js | 241 - examples/scripts/example15-empty-rows.js | 58 - examples/scripts/example16-cell-drag-down.js | 131 - .../example16-filterable-sortable-grid.js | 154 - examples/scripts/example16-row-select.js | 102 - examples/scripts/example17-grid-events.js | 93 - examples/scripts/example18-context-menu.js | 124 - examples/scripts/example19-column-events.js | 133 - examples/scripts/example20-cell-navigation.js | 99 - .../example21-cell-selection-events.js | 94 - examples/scripts/example21-grouping.js | 217 - examples/scripts/example22-custom-filters.js | 145 - .../example23-immutable-data-grouping.js | 115 - examples/scripts/example23-row-reordering.js | 144 - gulp/tasks/browserSync.js | 15 - gulp/tasks/bundle.js | 32 - gulp/tasks/clean.js | 6 - gulp/tasks/default.js | 5 - gulp/tasks/dist.js | 31 - gulp/tasks/docs.js | 12 - gulp/tasks/eslint.js | 15 - gulp/tasks/examples.js | 70 - gulp/tasks/flow.js | 38 - gulp/tasks/setWatch.js | 5 - gulp/tasks/styles.js | 12 - gulp/tasks/tests.js | 28 - gulp/tasks/watch.js | 7 - gulp/util/bundleBuilder.js | 45 - gulp/util/bundleLogger.js | 21 - gulp/util/handleErrors.js | 15 - index.js | 1 - lerna.json | 4 + migrations/v1-v2.md | 17 + package.json | 58 +- packages/react-data-grid-addons/.npmignore | 5 + packages/react-data-grid-addons/README.md | 45 + packages/react-data-grid-addons/index.js | 1 + packages/react-data-grid-addons/package.json | 25 + .../src}/__tests__/Grid.spec.js | 90 +- .../__tests__/RowsContainerWithAddons.spec.js | 34 +- .../src}/__tests__/data/MockStateObject.js | 0 .../headerCells/filters/AutoCompleteFilter.js | 6 +- .../headerCells/filters/NumericFilter.js | 3 +- .../__tests__/AutoCompleteFilter.spec.js | 2 +- .../filters/__tests__/NumericFilter.spec.js | 2 +- .../src}/cells/headerCells/filters/index.js | 0 .../src}/data/RowFilterer.js | 4 +- .../src}/data/RowGrouper.js | 3 +- .../src}/data/RowGrouperResolver.js | 3 +- .../src}/data/RowSorter.js | 5 +- .../src}/data/Selectors.js | 5 +- .../src}/data/__tests__/RowFilterer.spec.js | 0 .../src}/data/__tests__/RowGrouper.spec.js | 0 .../src}/data/__tests__/RowSorter.spec.js | 0 .../src}/data/__tests__/Selectors.spec.js | 0 .../react-data-grid-addons/src}/data/index.js | 0 .../src}/draggable/DragDropContainer.js | 3 +- .../src}/draggable/DraggableHeaderCell.js | 4 +- .../src}/draggable/DropTargetRowContainer.js | 3 +- .../src}/draggable/RowActionsCell.js | 4 +- .../src}/draggable/RowDragLayer.js | 2 + .../__tests__/DragDropContainer.spec.js | 0 .../__tests__/DropTargetRowContainer.spec.js | 7 +- .../__tests__/RowActionsCell.spec.js | 0 .../draggable/__tests__/RowDragLayer.spec.js | 0 .../draggable/__tests__/TestDragSources.js | 0 .../src}/draggable/index.js | 3 +- .../src}/editors/AutoCompleteEditor.js | 3 +- .../src}/editors/AutoCompleteTokensEditor.js | 1 + .../src}/editors/ContainerEditorWrapper.js | 0 .../src}/editors/DateRangeEditor.js | 0 .../src}/editors/DropDownEditor.js | 2 +- .../AutoCompleteEditor-integration.spec.js | 5 +- .../__tests__/AutoCompleteEditor.spec.js | 6 +- .../__tests__/ContainerEditorWrapper.spec.js | 0 .../editors/__tests__/DropDownEditor.spec.js | 16 +- .../src/editors/index.js | 11 + .../src}/editors/widgets/DateRangeFilter.js | 0 .../src}/formatters/DateRangeFormatter.js | 0 .../src}/formatters/DropDownFormatter.js | 0 .../src}/formatters/ImageFormatter.js | 1 + .../src}/formatters/index.js | 0 .../react-data-grid-addons/src}/index.js | 11 +- .../src}/menu/ContextMenu.js | 0 .../src}/menu/MenuHeader.js | 0 .../src}/menu/__tests__/ContextMenu.spec.js | 0 .../src}/menu/__tests__/MenuHeader.spec.js | 0 .../react-data-grid-addons/src}/menu/index.js | 0 .../src}/performance/SummaryItemModel.js | 0 .../src/performance/SummaryParser.js | 2 +- .../src/performance/index.js | 9 + .../src}/performance/whyDidYouUpdate.js | 0 .../src}/toolbars/AdvancedToolbar.js | 1 + .../src}/toolbars/GroupedColumnButton.js | 0 .../src}/toolbars/GroupedColumnsPanel.js | 3 +- .../src}/toolbars/Toolbar.js | 1 + .../src}/toolbars/index.js | 2 +- packages/react-data-grid-examples/.npmignore | 5 + packages/react-data-grid-examples/README.md | 0 packages/react-data-grid-examples/index.js | 1 + .../react-data-grid-examples/package.json | 31 + .../src}/__tests__/Grid-perf.spec.js | 4 +- .../src}/__tests__/Grid.integration-spec.js | 2 +- .../src}/__tests__/GridRunner.js | 4 +- .../src}/assets/css/bootstrap-theme.css | 0 .../src}/assets/css/bootstrap.min.css | 0 .../src}/assets/css/codemirror.css | 0 .../src/assets/css/exampleWrapper.css | 18 + .../src}/assets/css/examples.css | 0 .../fonts/glyphicons-halflings-regular.eot | Bin .../fonts/glyphicons-halflings-regular.svg | 0 .../fonts/glyphicons-halflings-regular.ttf | Bin .../fonts/glyphicons-halflings-regular.woff | Bin .../fonts/glyphicons-halflings-regular.woff2 | Bin .../src}/assets/css/highlight.css | 0 .../src}/assets/css/main.css | 0 .../src}/assets/css/react-context-menu.css | 0 .../src/assets/css/react-data-grid.css | 32 + .../fonts/glyphicons-halflings-regular.eot | Bin .../fonts/glyphicons-halflings-regular.svg | 0 .../fonts/glyphicons-halflings-regular.ttf | Bin .../fonts/glyphicons-halflings-regular.woff | Bin .../fonts/glyphicons-halflings-regular.woff2 | Bin .../src}/assets/images/AdazzleHeaderLogo.png | Bin .../src}/assets/images/AdazzleLogo.png | Bin .../src}/assets/images/AdazzleLogoWhite.png | Bin .../src}/assets/images/bg2.png | Bin .../src}/assets/images/datagrid1.png | Bin .../src}/assets/images/drag_column_full.png | Bin .../src}/assets/images/drag_column_full2.PNG | Bin .../src}/assets/images/grid.png | Bin .../src}/assets/images/gridme.png | Bin .../src}/assets/images/gridme_@2X.png | Bin .../src}/assets/images/gt_favicon.png | Bin .../src}/assets/images/logo.png | Bin .../src}/assets/images/rdatagrid2.png | Bin .../src}/assets/images/rsz_adazzlelogo.png | Bin .../src}/assets/js/docs.js | 0 .../src}/assets/js/dropdown.js | 0 .../src}/assets/js/faker.js | 0 .../src}/assets/js/font-awesome.min.css | 0 .../src}/assets/js/jquery-1.11.2.min.js | 0 .../src}/components/BasicExample.js | 0 .../src}/components/ColsDescription.js | 0 .../src}/components/ExampleList.js | 0 .../src}/components/Navbar.js | 0 .../src}/components/QuickStartDescription.js | 0 .../src}/components/RenderGrid.js | 0 .../src}/components/RowsDescription.js | 0 .../src/components/exampleWrapper.js | 38 + .../src}/docs/markdowns/AdvancedToolbar.md | 0 .../src}/docs/markdowns/AutoCompleteEditor.md | 0 .../src}/docs/markdowns/AutoCompleteFilter.md | 0 .../markdowns/AutoCompleteTokensEditor.md | 0 .../src}/docs/markdowns/Canvas.md | 0 .../src}/docs/markdowns/Cell.md | 0 .../src}/docs/markdowns/CheckboxEditor.md | 0 .../src}/docs/markdowns/ContextMenu.md | 0 .../src}/docs/markdowns/DateRangeEditor.md | 0 .../src}/docs/markdowns/DateRangeFilter.md | 0 .../src}/docs/markdowns/DateRangeFormatter.md | 0 .../src}/docs/markdowns/DragDropContainer.md | 0 .../src}/docs/markdowns/Draggable.md | 0 .../docs/markdowns/DraggableHeaderCell.md | 0 .../src}/docs/markdowns/DropDownEditor.md | 0 .../src}/docs/markdowns/DropDownFormatter.md | 0 .../src}/docs/markdowns/EditorBase.md | 0 .../src}/docs/markdowns/EditorContainer.md | 0 .../docs/markdowns/FilterableHeaderCell.md | 0 .../src}/docs/markdowns/Grid.md | 0 .../docs/markdowns/GroupedColumnButton.md | 0 .../docs/markdowns/GroupedColumnsPanel.md | 0 .../src}/docs/markdowns/Header.md | 0 .../src}/docs/markdowns/HeaderCell.md | 0 .../src}/docs/markdowns/HeaderRow.md | 0 .../src}/docs/markdowns/ImageFormatter.md | 0 .../src}/docs/markdowns/MenuHeader.md | 0 .../src}/docs/markdowns/NumericFilter.md | 0 .../src}/docs/markdowns/ReactDataGrid.md | 0 .../src}/docs/markdowns/Row.md | 0 .../src}/docs/markdowns/RowActionsCell.md | 0 .../src}/docs/markdowns/RowDragLayer.md | 0 .../src}/docs/markdowns/RowGroup.md | 0 .../docs/markdowns/SimpleCellFormatter.md | 0 .../src}/docs/markdowns/SortableHeaderCell.md | 0 .../src}/docs/markdowns/Toolbar.md | 0 .../src}/docs/markdowns/Viewport.md | 0 .../src}/documentation.html | 28 +- .../src}/documentation.js | 2 +- .../src}/examples.html | 22 +- .../react-data-grid-examples/src}/examples.js | 0 .../src}/examples.less | 0 .../fonts/glyphicons-halflings-regular.eot | Bin .../fonts/glyphicons-halflings-regular.svg | 0 .../fonts/glyphicons-halflings-regular.ttf | Bin .../fonts/glyphicons-halflings-regular.woff | Bin .../react-data-grid-examples/src}/index.html | 16 +- .../react-data-grid-examples/src}/index.js | 0 .../src/scriptDelegator.js | 9 + .../src}/scripts/FakeObjectDataStore.js | 0 .../scripts/documentation01-gettingstarted.js | 0 .../scripts/documentation02-apireference.js | 0 .../scripts/documentation03-components.js | 2 + .../src/scripts/example01-basic.js | 49 + .../src/scripts/example02-resizable-cols.js | 99 + .../src/scripts/example03-fixed-cols.js | 92 + .../src/scripts/example04-editable.js | 100 + .../scripts/example05-custom-formatters.js | 106 + .../src/scripts/example06-built-in-editors.js | 100 + .../src/scripts/example08-sortable-cols.js | 115 + .../src/scripts/example09-filterable-grid.js | 122 + .../src/scripts/example10-one-million-rows.js | 54 + .../src/scripts/example11-immutable-data.js | 68 + .../scripts/example12-customRowRenderer.js | 128 + .../src/scripts/example13-all-features.js | 267 + .../example14-all-features-immutable.js | 272 + .../src/scripts/example15-empty-rows.js | 43 + .../src/scripts/example16-cell-drag-down.js | 104 + .../example16-filterable-sortable-grid.js | 129 + .../src/scripts/example16-row-select.js | 101 + .../src/scripts/example17-grid-events.js | 96 + .../src/scripts/example18-context-menu.js | 127 + .../src/scripts/example19-column-events.js | 125 + .../src/scripts/example20-cell-navigation.js | 100 + .../example21-cell-selection-events.js | 80 + .../src/scripts/example21-grouping.js | 218 + .../src/scripts/example22-custom-filters.js | 127 + .../example23-immutable-data-grouping.js | 112 + .../src/scripts/example23-row-reordering.js | 124 + .../src}/scripts/index.js | 0 .../react-data-grid-examples/src}/shared.js | 0 packages/react-data-grid/.npmignore | 5 + packages/react-data-grid/README.md | 44 + packages/react-data-grid/index.js | 1 + packages/react-data-grid/package.json | 18 + .../react-data-grid/src}/AppConstants.js | 7 +- .../react-data-grid/src}/Canvas.js | 2 + {src => packages/react-data-grid/src}/Cell.js | 7 +- .../react-data-grid/src}/ColumnComparer.js | 0 .../react-data-grid/src}/ColumnMetrics.js | 2 +- .../src}/ColumnMetricsMixin.js | 0 .../react-data-grid/src}/ColumnUtils.js | 0 .../react-data-grid/src}/Constants.js | 0 .../react-data-grid/src}/DOMMetrics.js | 0 .../react-data-grid/src}/Draggable.js | 1 + {src => packages/react-data-grid/src}/Grid.js | 1 + .../react-data-grid/src}/GridScrollMixin.js | 0 .../react-data-grid/src}/Header.js | 1 + .../react-data-grid/src}/HeaderCell.js | 2 + .../react-data-grid/src}/HeaderCellType.js | 0 .../react-data-grid/src}/HeaderRow.js | 5 +- .../react-data-grid/src}/KeyCodes.js | 0 .../src}/KeyboardHandlerMixin.js | 0 .../react-data-grid/src}/OverflowCell.js | 1 + .../react-data-grid/src}/OverflowRow.js | 1 + .../src}/PropTypeShapes/CellMetaDataShape.js | 0 .../src}/PropTypeShapes/ExcelColumn.js | 0 .../src/PropTypeShapes/index.js | 3 + .../react-data-grid/src}/ReactDataGrid.js | 4 +- .../react-data-grid/src}/ResizeHandle.js | 1 + {src => packages/react-data-grid/src}/Row.js | 1 + .../react-data-grid/src}/RowComparer.js | 0 .../react-data-grid/src}/RowGroup.js | 1 + .../react-data-grid/src}/RowUtils.js | 0 .../react-data-grid/src}/RowsContainer.js | 0 .../react-data-grid/src}/ScrollShim.js | 0 .../react-data-grid/src}/Viewport.js | 0 .../src}/ViewportScrollMixin.js | 0 .../src}/__tests__/AppConstants.spec.js | 0 .../src}/__tests__/Canvas.spec.js | 0 .../src}/__tests__/Cell.spec.js | 6 +- .../src}/__tests__/ColumnMetrics.spec.js | 2 +- .../src}/__tests__/ColumnUtils.spec.js | 0 .../src}/__tests__/Draggable.spec.js | 0 .../__tests__/FocusableComponentTestRunner.js | 0 .../src}/__tests__/Grid.spec.js | 4 +- .../src}/__tests__/Header.spec.js | 8 +- .../src}/__tests__/HeaderCell.spec.js | 8 +- .../src}/__tests__/HeaderRow.spec.js | 8 +- .../__tests__/KeyboardHandlerMixin.spec.js | 0 .../src}/__tests__/OverflowCell.spec.js | 0 .../src}/__tests__/OverflowRow.spec.js | 0 .../src}/__tests__/ReactDataGrid.spec.js | 0 .../src}/__tests__/Row.spec.js | 2 +- .../src}/__tests__/RowComparer.spec.js | 0 .../src}/__tests__/RowUtils.spec.js | 0 .../src/__tests__/RowsContainer.spec.js | 17 + .../src}/__tests__/Viewport.spec.js | 2 +- .../cells/headerCells/FilterableHeaderCell.js | 2 +- .../cells/headerCells/SortableHeaderCell.js | 0 .../src}/createObjectWithProperties.js | 0 .../src}/editors/CheckboxEditor.js | 1 + .../src}/editors/EditorBase.js | 2 +- .../src}/editors/EditorContainer.js | 4 +- .../src}/editors/SimpleTextEditor.js | 0 .../editors/__tests__/CheckboxEditor.spec.js | 9 +- .../editors/__tests__/EditorContainer.spec.js | 4 +- .../__tests__/SimpleTextEditor.spec.js | 9 +- packages/react-data-grid/src/editors/index.js | 5 + .../src}/focusableComponentWrapper.js | 0 .../src}/formatters/SimpleCellFormatter.js | 0 .../react-data-grid/src}/getScrollbarSize.js | 0 .../react-data-grid/src}/getWindowSize.js | 0 packages/react-data-grid/src/helpers/index.js | 5 + .../src/helpers/test}/GridPropHelpers.js | 0 packages/react-data-grid/src/index.js | 15 + .../src}/shallowCloneObject.js | 0 packages/react-data-grid/src/utils/index.js | 8 + .../src/utils}/isColumnsImmutable.js | 0 .../src}/utils/isEmptyArray.js | 3 +- .../src}/utils/isEmptyObject.js | 2 +- .../react-data-grid/src}/utils/isFunction.js | 0 .../src}/utils/isImmutableCollection.js | 3 +- .../src}/utils/mixedTypeValueRetriever.js | 3 +- src/addons/editors/index.js | 9 - src/index.js | 7 - test/FullTests.jsx | 2 +- test/integrationTests.jsx | 2 +- test/unitTests.jsx | 2 +- themes/react-data-grid-cell.css | 158 + themes/react-data-grid-checkbox.css | 53 + themes/react-data-grid-core.css | 87 + themes/react-data-grid-drop-target.css | 55 + themes/react-data-grid-header.css | 45 + themes/react-data-grid-image.css | 7 + themes/react-data-grid-row.css | 70 + themes/react-data-grid-toolbar.css | 48 + themes/react-data-grid-viewport.css | 9 + themes/react-data-grid.css | 662 - themes/react-data-grid.less | 653 - themes/react-grid-ScrollShim.css | 3 + themes/ron-react-autocomplete.css | 102 + webpack-dev-server.js | 49 + 383 files changed, 4623 insertions(+), 79473 deletions(-) delete mode 100644 addons.js create mode 100644 ci/buildScripts/build.ps1 create mode 100644 ci/publish/copy-npmrc.ps1 create mode 100644 ci/publish/publishExamples.js create mode 100644 ci/publish/replacePackageEntry.js create mode 100644 config/webpack.common.config.js delete mode 100644 config/webpack.common.js create mode 100644 config/webpack.config.prod.js delete mode 100644 config/webpack.react-data-grid.js delete mode 100644 config/webpack.ui-plugins.js delete mode 100644 examples/assets/js/JSXTransformer.js delete mode 100644 examples/assets/js/ReactPlayground.js delete mode 100644 examples/assets/js/adazzlelogobar.png delete mode 100644 examples/assets/js/affix.js delete mode 100644 examples/assets/js/bootstrap.min.js delete mode 100644 examples/assets/js/codeMirror.js delete mode 100644 examples/assets/js/google-map.js delete mode 100644 examples/assets/js/headroom.min.js delete mode 100644 examples/assets/js/html5shiv.js delete mode 100644 examples/assets/js/immutable.min.js delete mode 100644 examples/assets/js/jQuery.headroom.min.js delete mode 100644 examples/assets/js/javascript.js delete mode 100644 examples/assets/js/jquery.js delete mode 100644 examples/assets/js/markdown.js delete mode 100644 examples/assets/js/react-data-grid.css delete mode 100644 examples/assets/js/react-dom.js delete mode 100644 examples/assets/js/react-router.min.js delete mode 100644 examples/assets/js/react-with-addons.js delete mode 100644 examples/assets/js/react.js delete mode 100644 examples/assets/js/respond.min.js delete mode 100644 examples/assets/js/scrollspy.js delete mode 100644 examples/assets/js/template.js delete mode 100644 examples/scripts/example01-basic.js delete mode 100644 examples/scripts/example02-resizable-cols.js delete mode 100644 examples/scripts/example03-fixed-cols.js delete mode 100644 examples/scripts/example04-editable.js delete mode 100644 examples/scripts/example05-custom-formatters.js delete mode 100644 examples/scripts/example06-built-in-editors.js delete mode 100644 examples/scripts/example08-sortable-cols.js delete mode 100644 examples/scripts/example09-filterable-grid.js delete mode 100644 examples/scripts/example10-one-million-rows.js delete mode 100644 examples/scripts/example11-immutable-data.js delete mode 100644 examples/scripts/example12-customRowRenderer.js delete mode 100644 examples/scripts/example13-all-features.js delete mode 100644 examples/scripts/example14-all-features-immutable.js delete mode 100644 examples/scripts/example15-empty-rows.js delete mode 100644 examples/scripts/example16-cell-drag-down.js delete mode 100644 examples/scripts/example16-filterable-sortable-grid.js delete mode 100644 examples/scripts/example16-row-select.js delete mode 100644 examples/scripts/example17-grid-events.js delete mode 100644 examples/scripts/example18-context-menu.js delete mode 100644 examples/scripts/example19-column-events.js delete mode 100644 examples/scripts/example20-cell-navigation.js delete mode 100644 examples/scripts/example21-cell-selection-events.js delete mode 100644 examples/scripts/example21-grouping.js delete mode 100644 examples/scripts/example22-custom-filters.js delete mode 100644 examples/scripts/example23-immutable-data-grouping.js delete mode 100644 examples/scripts/example23-row-reordering.js delete mode 100644 gulp/tasks/browserSync.js delete mode 100644 gulp/tasks/bundle.js delete mode 100644 gulp/tasks/clean.js delete mode 100644 gulp/tasks/default.js delete mode 100644 gulp/tasks/dist.js delete mode 100644 gulp/tasks/docs.js delete mode 100644 gulp/tasks/eslint.js delete mode 100644 gulp/tasks/examples.js delete mode 100644 gulp/tasks/flow.js delete mode 100644 gulp/tasks/setWatch.js delete mode 100644 gulp/tasks/styles.js delete mode 100644 gulp/tasks/tests.js delete mode 100644 gulp/tasks/watch.js delete mode 100644 gulp/util/bundleBuilder.js delete mode 100644 gulp/util/bundleLogger.js delete mode 100644 gulp/util/handleErrors.js delete mode 100644 index.js create mode 100644 lerna.json create mode 100644 migrations/v1-v2.md create mode 100644 packages/react-data-grid-addons/.npmignore create mode 100644 packages/react-data-grid-addons/README.md create mode 100644 packages/react-data-grid-addons/index.js create mode 100644 packages/react-data-grid-addons/package.json rename {src/addons => packages/react-data-grid-addons/src}/__tests__/Grid.spec.js (95%) rename src/__tests__/RowsContainer.spec.js => packages/react-data-grid-addons/src/__tests__/RowsContainerWithAddons.spec.js (52%) rename {src/addons => packages/react-data-grid-addons/src}/__tests__/data/MockStateObject.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/cells/headerCells/filters/AutoCompleteFilter.js (94%) rename {src/addons => packages/react-data-grid-addons/src}/cells/headerCells/filters/NumericFilter.js (98%) rename {src/addons => packages/react-data-grid-addons/src}/cells/headerCells/filters/__tests__/AutoCompleteFilter.spec.js (98%) rename {src/addons => packages/react-data-grid-addons/src}/cells/headerCells/filters/__tests__/NumericFilter.spec.js (97%) rename {src/addons => packages/react-data-grid-addons/src}/cells/headerCells/filters/index.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/data/RowFilterer.js (87%) rename {src/addons => packages/react-data-grid-addons/src}/data/RowGrouper.js (95%) rename {src/addons => packages/react-data-grid-addons/src}/data/RowGrouperResolver.js (92%) rename {src/addons => packages/react-data-grid-addons/src}/data/RowSorter.js (81%) rename {src/addons => packages/react-data-grid-addons/src}/data/Selectors.js (94%) rename {src/addons => packages/react-data-grid-addons/src}/data/__tests__/RowFilterer.spec.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/data/__tests__/RowGrouper.spec.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/data/__tests__/RowSorter.spec.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/data/__tests__/Selectors.spec.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/data/index.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/draggable/DragDropContainer.js (94%) rename {src/addons => packages/react-data-grid-addons/src}/draggable/DraggableHeaderCell.js (93%) rename {src/addons => packages/react-data-grid-addons/src}/draggable/DropTargetRowContainer.js (91%) rename {src/addons => packages/react-data-grid-addons/src}/draggable/RowActionsCell.js (93%) rename {src/addons => packages/react-data-grid-addons/src}/draggable/RowDragLayer.js (97%) rename {src/addons => packages/react-data-grid-addons/src}/draggable/__tests__/DragDropContainer.spec.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/draggable/__tests__/DropTargetRowContainer.spec.js (92%) rename {src/addons => packages/react-data-grid-addons/src}/draggable/__tests__/RowActionsCell.spec.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/draggable/__tests__/RowDragLayer.spec.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/draggable/__tests__/TestDragSources.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/draggable/index.js (69%) rename {src/addons => packages/react-data-grid-addons/src}/editors/AutoCompleteEditor.js (96%) rename {src/addons => packages/react-data-grid-addons/src}/editors/AutoCompleteTokensEditor.js (96%) rename {src/addons => packages/react-data-grid-addons/src}/editors/ContainerEditorWrapper.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/editors/DateRangeEditor.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/editors/DropDownEditor.js (95%) rename {src/addons => packages/react-data-grid-addons/src}/editors/__tests__/AutoCompleteEditor-integration.spec.js (89%) rename {src/addons => packages/react-data-grid-addons/src}/editors/__tests__/AutoCompleteEditor.spec.js (96%) rename {src/addons => packages/react-data-grid-addons/src}/editors/__tests__/ContainerEditorWrapper.spec.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/editors/__tests__/DropDownEditor.spec.js (88%) create mode 100644 packages/react-data-grid-addons/src/editors/index.js rename {src/addons => packages/react-data-grid-addons/src}/editors/widgets/DateRangeFilter.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/formatters/DateRangeFormatter.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/formatters/DropDownFormatter.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/formatters/ImageFormatter.js (96%) rename {src/addons => packages/react-data-grid-addons/src}/formatters/index.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/index.js (53%) rename {src/addons => packages/react-data-grid-addons/src}/menu/ContextMenu.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/menu/MenuHeader.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/menu/__tests__/ContextMenu.spec.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/menu/__tests__/MenuHeader.spec.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/menu/index.js (100%) rename {src/addons/__tests__ => packages/react-data-grid-addons/src}/performance/SummaryItemModel.js (100%) rename src/addons/__tests__/performance/PerformanceUtils.js => packages/react-data-grid-addons/src/performance/SummaryParser.js (97%) create mode 100644 packages/react-data-grid-addons/src/performance/index.js rename {src/addons/__tests__ => packages/react-data-grid-addons/src}/performance/whyDidYouUpdate.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/toolbars/AdvancedToolbar.js (89%) rename {src/addons => packages/react-data-grid-addons/src}/toolbars/GroupedColumnButton.js (100%) rename {src/addons => packages/react-data-grid-addons/src}/toolbars/GroupedColumnsPanel.js (96%) rename {src/addons => packages/react-data-grid-addons/src}/toolbars/Toolbar.js (95%) rename {src/addons => packages/react-data-grid-addons/src}/toolbars/index.js (65%) create mode 100644 packages/react-data-grid-examples/.npmignore create mode 100644 packages/react-data-grid-examples/README.md create mode 100644 packages/react-data-grid-examples/index.js create mode 100644 packages/react-data-grid-examples/package.json rename {src/addons => packages/react-data-grid-examples/src}/__tests__/Grid-perf.spec.js (94%) rename {src/addons => packages/react-data-grid-examples/src}/__tests__/Grid.integration-spec.js (99%) rename {src/addons => packages/react-data-grid-examples/src}/__tests__/GridRunner.js (98%) rename {examples => packages/react-data-grid-examples/src}/assets/css/bootstrap-theme.css (100%) rename {examples => packages/react-data-grid-examples/src}/assets/css/bootstrap.min.css (100%) rename {examples => packages/react-data-grid-examples/src}/assets/css/codemirror.css (100%) create mode 100644 packages/react-data-grid-examples/src/assets/css/exampleWrapper.css rename {examples => packages/react-data-grid-examples/src}/assets/css/examples.css (100%) rename {examples => packages/react-data-grid-examples/src}/assets/css/fonts/glyphicons-halflings-regular.eot (100%) rename {examples => packages/react-data-grid-examples/src}/assets/css/fonts/glyphicons-halflings-regular.svg (100%) rename {examples => packages/react-data-grid-examples/src}/assets/css/fonts/glyphicons-halflings-regular.ttf (100%) rename {examples => packages/react-data-grid-examples/src}/assets/css/fonts/glyphicons-halflings-regular.woff (100%) rename {examples => packages/react-data-grid-examples/src}/assets/css/fonts/glyphicons-halflings-regular.woff2 (100%) rename {examples => packages/react-data-grid-examples/src}/assets/css/highlight.css (100%) rename {examples => packages/react-data-grid-examples/src}/assets/css/main.css (100%) rename {examples => packages/react-data-grid-examples/src}/assets/css/react-context-menu.css (100%) create mode 100644 packages/react-data-grid-examples/src/assets/css/react-data-grid.css rename {examples => packages/react-data-grid-examples/src}/assets/fonts/glyphicons-halflings-regular.eot (100%) rename {examples => packages/react-data-grid-examples/src}/assets/fonts/glyphicons-halflings-regular.svg (100%) rename {examples => packages/react-data-grid-examples/src}/assets/fonts/glyphicons-halflings-regular.ttf (100%) rename {examples => packages/react-data-grid-examples/src}/assets/fonts/glyphicons-halflings-regular.woff (100%) rename {examples => packages/react-data-grid-examples/src}/assets/fonts/glyphicons-halflings-regular.woff2 (100%) rename {examples => packages/react-data-grid-examples/src}/assets/images/AdazzleHeaderLogo.png (100%) rename {examples => packages/react-data-grid-examples/src}/assets/images/AdazzleLogo.png (100%) rename {examples => packages/react-data-grid-examples/src}/assets/images/AdazzleLogoWhite.png (100%) rename {examples => packages/react-data-grid-examples/src}/assets/images/bg2.png (100%) rename {examples => packages/react-data-grid-examples/src}/assets/images/datagrid1.png (100%) rename {examples => packages/react-data-grid-examples/src}/assets/images/drag_column_full.png (100%) rename {examples => packages/react-data-grid-examples/src}/assets/images/drag_column_full2.PNG (100%) rename {examples => packages/react-data-grid-examples/src}/assets/images/grid.png (100%) rename {examples => packages/react-data-grid-examples/src}/assets/images/gridme.png (100%) rename {examples => packages/react-data-grid-examples/src}/assets/images/gridme_@2X.png (100%) rename {examples => packages/react-data-grid-examples/src}/assets/images/gt_favicon.png (100%) rename {examples => packages/react-data-grid-examples/src}/assets/images/logo.png (100%) rename {examples => packages/react-data-grid-examples/src}/assets/images/rdatagrid2.png (100%) rename {examples => packages/react-data-grid-examples/src}/assets/images/rsz_adazzlelogo.png (100%) rename {examples => packages/react-data-grid-examples/src}/assets/js/docs.js (100%) rename {examples => packages/react-data-grid-examples/src}/assets/js/dropdown.js (100%) rename {examples => packages/react-data-grid-examples/src}/assets/js/faker.js (100%) rename {examples => packages/react-data-grid-examples/src}/assets/js/font-awesome.min.css (100%) rename {examples => packages/react-data-grid-examples/src}/assets/js/jquery-1.11.2.min.js (100%) rename {examples => packages/react-data-grid-examples/src}/components/BasicExample.js (100%) rename {examples => packages/react-data-grid-examples/src}/components/ColsDescription.js (100%) rename {examples => packages/react-data-grid-examples/src}/components/ExampleList.js (100%) rename {examples => packages/react-data-grid-examples/src}/components/Navbar.js (100%) rename {examples => packages/react-data-grid-examples/src}/components/QuickStartDescription.js (100%) rename {examples => packages/react-data-grid-examples/src}/components/RenderGrid.js (100%) rename {examples => packages/react-data-grid-examples/src}/components/RowsDescription.js (100%) create mode 100644 packages/react-data-grid-examples/src/components/exampleWrapper.js rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/AdvancedToolbar.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/AutoCompleteEditor.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/AutoCompleteFilter.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/AutoCompleteTokensEditor.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/Canvas.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/Cell.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/CheckboxEditor.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/ContextMenu.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/DateRangeEditor.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/DateRangeFilter.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/DateRangeFormatter.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/DragDropContainer.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/Draggable.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/DraggableHeaderCell.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/DropDownEditor.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/DropDownFormatter.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/EditorBase.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/EditorContainer.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/FilterableHeaderCell.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/Grid.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/GroupedColumnButton.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/GroupedColumnsPanel.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/Header.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/HeaderCell.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/HeaderRow.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/ImageFormatter.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/MenuHeader.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/NumericFilter.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/ReactDataGrid.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/Row.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/RowActionsCell.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/RowDragLayer.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/RowGroup.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/SimpleCellFormatter.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/SortableHeaderCell.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/Toolbar.md (100%) rename {examples => packages/react-data-grid-examples/src}/docs/markdowns/Viewport.md (100%) rename {examples => packages/react-data-grid-examples/src}/documentation.html (72%) rename {examples => packages/react-data-grid-examples/src}/documentation.js (94%) rename {examples => packages/react-data-grid-examples/src}/examples.html (76%) rename {examples => packages/react-data-grid-examples/src}/examples.js (100%) rename {examples => packages/react-data-grid-examples/src}/examples.less (100%) rename {examples => packages/react-data-grid-examples/src}/fonts/glyphicons-halflings-regular.eot (100%) rename {examples => packages/react-data-grid-examples/src}/fonts/glyphicons-halflings-regular.svg (100%) rename {examples => packages/react-data-grid-examples/src}/fonts/glyphicons-halflings-regular.ttf (100%) rename {examples => packages/react-data-grid-examples/src}/fonts/glyphicons-halflings-regular.woff (100%) rename {examples => packages/react-data-grid-examples/src}/index.html (94%) rename {examples => packages/react-data-grid-examples/src}/index.js (100%) create mode 100644 packages/react-data-grid-examples/src/scriptDelegator.js rename {examples => packages/react-data-grid-examples/src}/scripts/FakeObjectDataStore.js (100%) rename {examples => packages/react-data-grid-examples/src}/scripts/documentation01-gettingstarted.js (100%) rename {examples => packages/react-data-grid-examples/src}/scripts/documentation02-apireference.js (100%) rename {examples => packages/react-data-grid-examples/src}/scripts/documentation03-components.js (98%) create mode 100644 packages/react-data-grid-examples/src/scripts/example01-basic.js create mode 100644 packages/react-data-grid-examples/src/scripts/example02-resizable-cols.js create mode 100644 packages/react-data-grid-examples/src/scripts/example03-fixed-cols.js create mode 100644 packages/react-data-grid-examples/src/scripts/example04-editable.js create mode 100644 packages/react-data-grid-examples/src/scripts/example05-custom-formatters.js create mode 100644 packages/react-data-grid-examples/src/scripts/example06-built-in-editors.js create mode 100644 packages/react-data-grid-examples/src/scripts/example08-sortable-cols.js create mode 100644 packages/react-data-grid-examples/src/scripts/example09-filterable-grid.js create mode 100644 packages/react-data-grid-examples/src/scripts/example10-one-million-rows.js create mode 100644 packages/react-data-grid-examples/src/scripts/example11-immutable-data.js create mode 100644 packages/react-data-grid-examples/src/scripts/example12-customRowRenderer.js create mode 100644 packages/react-data-grid-examples/src/scripts/example13-all-features.js create mode 100644 packages/react-data-grid-examples/src/scripts/example14-all-features-immutable.js create mode 100644 packages/react-data-grid-examples/src/scripts/example15-empty-rows.js create mode 100644 packages/react-data-grid-examples/src/scripts/example16-cell-drag-down.js create mode 100644 packages/react-data-grid-examples/src/scripts/example16-filterable-sortable-grid.js create mode 100644 packages/react-data-grid-examples/src/scripts/example16-row-select.js create mode 100644 packages/react-data-grid-examples/src/scripts/example17-grid-events.js create mode 100644 packages/react-data-grid-examples/src/scripts/example18-context-menu.js create mode 100644 packages/react-data-grid-examples/src/scripts/example19-column-events.js create mode 100644 packages/react-data-grid-examples/src/scripts/example20-cell-navigation.js create mode 100644 packages/react-data-grid-examples/src/scripts/example21-cell-selection-events.js create mode 100644 packages/react-data-grid-examples/src/scripts/example21-grouping.js create mode 100644 packages/react-data-grid-examples/src/scripts/example22-custom-filters.js create mode 100644 packages/react-data-grid-examples/src/scripts/example23-immutable-data-grouping.js create mode 100644 packages/react-data-grid-examples/src/scripts/example23-row-reordering.js rename {examples => packages/react-data-grid-examples/src}/scripts/index.js (100%) rename {examples => packages/react-data-grid-examples/src}/shared.js (100%) create mode 100644 packages/react-data-grid/.npmignore create mode 100644 packages/react-data-grid/README.md create mode 100644 packages/react-data-grid/index.js create mode 100644 packages/react-data-grid/package.json rename {src => packages/react-data-grid/src}/AppConstants.js (70%) rename {src => packages/react-data-grid/src}/Canvas.js (99%) rename {src => packages/react-data-grid/src}/Cell.js (98%) rename {src => packages/react-data-grid/src}/ColumnComparer.js (100%) rename {src => packages/react-data-grid/src}/ColumnMetrics.js (98%) rename {src => packages/react-data-grid/src}/ColumnMetricsMixin.js (100%) rename {src => packages/react-data-grid/src}/ColumnUtils.js (100%) rename {src => packages/react-data-grid/src}/Constants.js (100%) rename {src => packages/react-data-grid/src}/DOMMetrics.js (100%) rename {src => packages/react-data-grid/src}/Draggable.js (97%) rename {src => packages/react-data-grid/src}/Grid.js (99%) rename {src => packages/react-data-grid/src}/GridScrollMixin.js (100%) rename {src => packages/react-data-grid/src}/Header.js (99%) rename {src => packages/react-data-grid/src}/HeaderCell.js (98%) rename {src => packages/react-data-grid/src}/HeaderCellType.js (100%) rename {src => packages/react-data-grid/src}/HeaderRow.js (96%) rename {src => packages/react-data-grid/src}/KeyCodes.js (100%) rename {src => packages/react-data-grid/src}/KeyboardHandlerMixin.js (100%) rename {src => packages/react-data-grid/src}/OverflowCell.js (95%) rename {src => packages/react-data-grid/src}/OverflowRow.js (94%) rename {src => packages/react-data-grid/src}/PropTypeShapes/CellMetaDataShape.js (100%) rename {src => packages/react-data-grid/src}/PropTypeShapes/ExcelColumn.js (100%) create mode 100644 packages/react-data-grid/src/PropTypeShapes/index.js rename {src => packages/react-data-grid/src}/ReactDataGrid.js (99%) rename {src => packages/react-data-grid/src}/ResizeHandle.js (88%) rename {src => packages/react-data-grid/src}/Row.js (99%) rename {src => packages/react-data-grid/src}/RowComparer.js (100%) rename {src => packages/react-data-grid/src}/RowGroup.js (98%) rename {src => packages/react-data-grid/src}/RowUtils.js (100%) rename {src => packages/react-data-grid/src}/RowsContainer.js (100%) rename {src => packages/react-data-grid/src}/ScrollShim.js (100%) rename {src => packages/react-data-grid/src}/Viewport.js (100%) rename {src => packages/react-data-grid/src}/ViewportScrollMixin.js (100%) rename {src => packages/react-data-grid/src}/__tests__/AppConstants.spec.js (100%) rename {src => packages/react-data-grid/src}/__tests__/Canvas.spec.js (100%) rename {src => packages/react-data-grid/src}/__tests__/Cell.spec.js (99%) rename {src => packages/react-data-grid/src}/__tests__/ColumnMetrics.spec.js (98%) rename {src => packages/react-data-grid/src}/__tests__/ColumnUtils.spec.js (100%) rename {src => packages/react-data-grid/src}/__tests__/Draggable.spec.js (100%) rename {src => packages/react-data-grid/src}/__tests__/FocusableComponentTestRunner.js (100%) rename {src => packages/react-data-grid/src}/__tests__/Grid.spec.js (98%) rename {src => packages/react-data-grid/src}/__tests__/Header.spec.js (96%) rename {src => packages/react-data-grid/src}/__tests__/HeaderCell.spec.js (95%) rename {src => packages/react-data-grid/src}/__tests__/HeaderRow.spec.js (97%) rename {src => packages/react-data-grid/src}/__tests__/KeyboardHandlerMixin.spec.js (100%) rename {src => packages/react-data-grid/src}/__tests__/OverflowCell.spec.js (100%) rename {src => packages/react-data-grid/src}/__tests__/OverflowRow.spec.js (100%) rename {src => packages/react-data-grid/src}/__tests__/ReactDataGrid.spec.js (100%) rename {src => packages/react-data-grid/src}/__tests__/Row.spec.js (98%) rename {src => packages/react-data-grid/src}/__tests__/RowComparer.spec.js (100%) rename {src => packages/react-data-grid/src}/__tests__/RowUtils.spec.js (100%) create mode 100644 packages/react-data-grid/src/__tests__/RowsContainer.spec.js rename {src => packages/react-data-grid/src}/__tests__/Viewport.spec.js (97%) rename {src/addons => packages/react-data-grid/src}/cells/headerCells/FilterableHeaderCell.js (93%) rename {src/addons => packages/react-data-grid/src}/cells/headerCells/SortableHeaderCell.js (100%) rename {src => packages/react-data-grid/src}/createObjectWithProperties.js (100%) rename {src/addons => packages/react-data-grid/src}/editors/CheckboxEditor.js (94%) rename {src/addons => packages/react-data-grid/src}/editors/EditorBase.js (92%) rename {src/addons => packages/react-data-grid/src}/editors/EditorContainer.js (98%) rename {src/addons => packages/react-data-grid/src}/editors/SimpleTextEditor.js (100%) rename {src/addons => packages/react-data-grid/src}/editors/__tests__/CheckboxEditor.spec.js (85%) rename {src/addons => packages/react-data-grid/src}/editors/__tests__/EditorContainer.spec.js (98%) rename {src/addons => packages/react-data-grid/src}/editors/__tests__/SimpleTextEditor.spec.js (76%) create mode 100644 packages/react-data-grid/src/editors/index.js rename {src => packages/react-data-grid/src}/focusableComponentWrapper.js (100%) rename {src/addons => packages/react-data-grid/src}/formatters/SimpleCellFormatter.js (100%) rename {src => packages/react-data-grid/src}/getScrollbarSize.js (100%) rename {src => packages/react-data-grid/src}/getWindowSize.js (100%) create mode 100644 packages/react-data-grid/src/helpers/index.js rename {src/__tests__ => packages/react-data-grid/src/helpers/test}/GridPropHelpers.js (100%) create mode 100644 packages/react-data-grid/src/index.js rename {src => packages/react-data-grid/src}/shallowCloneObject.js (100%) create mode 100644 packages/react-data-grid/src/utils/index.js rename {src => packages/react-data-grid/src/utils}/isColumnsImmutable.js (100%) rename {src/addons => packages/react-data-grid/src}/utils/isEmptyArray.js (72%) rename {src/addons => packages/react-data-grid/src}/utils/isEmptyObject.js (78%) rename {src/addons => packages/react-data-grid/src}/utils/isFunction.js (100%) rename {src/addons => packages/react-data-grid/src}/utils/isImmutableCollection.js (76%) rename {src/addons => packages/react-data-grid/src}/utils/mixedTypeValueRetriever.js (86%) delete mode 100644 src/addons/editors/index.js delete mode 100644 src/index.js create mode 100644 themes/react-data-grid-cell.css create mode 100644 themes/react-data-grid-checkbox.css create mode 100644 themes/react-data-grid-core.css create mode 100644 themes/react-data-grid-drop-target.css create mode 100644 themes/react-data-grid-header.css create mode 100644 themes/react-data-grid-image.css create mode 100644 themes/react-data-grid-row.css create mode 100644 themes/react-data-grid-toolbar.css create mode 100644 themes/react-data-grid-viewport.css delete mode 100644 themes/react-data-grid.css delete mode 100644 themes/react-data-grid.less create mode 100644 themes/react-grid-ScrollShim.css create mode 100644 themes/ron-react-autocomplete.css create mode 100644 webpack-dev-server.js diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ab6e8bf4ac..0b8117dfae 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,16 +2,16 @@ Use [Github issues](https://github.com/adazzle/react-data-grid/issues) for featu ## Got a Question or Problem? -If you have questions about how to *use* react-data-grid, please direct them to [StackOverflow](https://www.stackoverflow.com). We are also available on our Slack channel +If you have questions about how to *use* react-data-grid, please direct them to [StackOverflow](http://stackoverflow.com/questions/tagged/react-data-grid). We are also available on our Slack channel ## Found an Issue? If you find a bug in the source code or a mistake in the documentation, you can help us by -[submitting an issue](#submit-issue) to our [GitHub Repository][github]. Even better, you can +[submitting an issue](#submit-issue) to our [GitHub Repository](https://github.com/adazzle/react-data-grid). Even better, you can [submit a Pull Request](#submit-pr) with a fix. ## Want a Feature? You can *request* a new feature by submitting an issue to our [GitHub -Repository][github]. If you would like to *implement* a new feature, please submit an issue with +Repository](https://github.com/adazzle/react-data-grid). If you would like to *implement* a new feature, please submit an issue with a proposal for your work first, to be sure that we can use it. Please consider what kind of change it is: @@ -20,14 +20,85 @@ discussed. This will also allow us to better coordinate our efforts, prevent dup and help you to craft the change so that it is successfully accepted into the project. * **Small Features** can be crafted and directly [submitted as a Pull Request](#submit-pr). -## Docs - -Please update the docs with any API changes, the code and docs should -always be in sync. ## Development +We want anyone contributing to react-data-grid to have the best experience possible. + +### tl;dr +You can start coding in 5 minutes. + +```sh +git clone https://github.com/adazzle/react-data-grid.git +cd react-data-grid +npm install +npm run dev-server +``` + +command | outcome | +-----------------------|-------------------------------------------------------------------------------------------------------| +npm test | runs tests in release mode | +npm run dev-test | runs tests in debug mode | +npm run dev-server | starts webpack dev server | +npm run eslint | runs the eslint task (runs automatically before npm test) | +npm run build | build the project in release mode | +npm run postinstall | boostraps the packages and fetches the individual dependencies (runs automatically after npm install) | + + +### Project structure +react-data-grid is a monorepo containing a total of three packages: +- **react-data-grid** the core package of the grid, contains all the core functionality of the project +- **react-data-grid-addons** a set of addons for the base grid, containing things like toolbars, custom editors... +- **react-data-grid-examples** a playground for the project, this is where you can check your changes for real, it's also what gets deployed to the public page. + +To manage the multiple packages in the project we use [lerna](https://lernajs.io/), It allows us to have an independent release process for each package, +individual and shared dependencies between packages and an automated bootstrap system to link packages together during development time. +This also means that you **must not add any path reference between packages**, when you need to use something in a different package you just need to import it as if +it was a standard npm package. (for example you if need something from react-data-grid package when developing in react-data-grid-addons you need to `import { something } from 'react-data-grid';`). + +### Enviroment +We use webpack-dev-server for development. If you're fancy about knowing the tools you’re working with you can find the details about this awesome tool [in here](https://webpack.github.io/docs/webpack-dev-server.html). +To run webpack-dev-server all you need to do is to run the following command: +```sh +npm run dev-server +``` +This will open your default browser at `http://localhost:8080/webpack-dev-server/` an you can navigate in our examples from there. +HMR is enabled, that means you won't need to reload the page wherever you make a change, webpack-dev-server will watch for any changes in the source code. + +### Testing +We use [karma](https://karma-runner.github.io/1.0/index.html) as our test runner combined with [Phantom JS](http://phantomjs.org/) and [jasmine](https://jasmine.github.io/). You can run your test in debug or release mode. +To run tests in release and dev mode you just need to run: +`npm test` for release +`npm dev-test` for debug + +When testing react components we encourage the use of [enzyme](https://github.com/airbnb/enzyme) as it presents a clean and descriptive interface for component testing. + +We want to keep our test coverage high, so when contributing you will need to test the changes you’re making and all the tests need to run successfully. + +Any file inside a `__tests__` subfolder in the packages folder that looks like `*.spec.js` will be picked up an executed by the test runner. +When writing new tests you must follow the following guidelines: +- If it is a test for a functionality that is already tested you need to write your tests in the existing spec file for that component. +- If you’re adding a new functionality, or testing a untested one you will need to add a spec file (and maybe a `__tests__` folder if that directory level doesn’t have one), + that spec file must be in the same deep level as the file your testing and by standard it will need to have the same name. + +### Code style +We use [eslint](http://eslint.org/) to enforce some code standards. +An npm script will run automatically before testing to check if there are any violations to the set of rules we defined, you can also run that same script independently by running `npm run eslint` on your console. +The easiest way to be aware of any violation on coding time is to have a plugin in you text editor that will be checking for any violation on the run. +Most modern text editor have their own plugins, you can find them in here for this popular editors: + +- [VS Code eslint plugin](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) +- [Atom eslint plugin](https://atom.io/packages/linter-eslint) +- [Sublime Text](https://github.com/roadhump/SublimeLinter-eslint) + +### Text Editor +Internally we use [VS Code](https://code.visualstudio.com/) as our main text editor, it is quite extensible and fully configurable. +It doesn’t mean you need to use it to contribute to our community. +You can use whatever is your personal preference, although it would be nice if it supports a eslint plugin as it would make your life a lot easier. + +### Build +To build the project you will need to run `npm run build`. +It will create a dist folder for each package, that dist folder will be what is published to npm after your code being released. -- `npm test` will fire up a karma test runner and run tests in Phantom JS -- `npm run debug-test` will fire up a karma test runner and run tests in chrome. This can be used for debugging purposes -- `npm run examples` will load a webpack dev server that will watch -for changes and build the examples +### Review process +To be accepted your code needs to be mergeable with the master branch, and the CI builds needs to be passing. After a sign of from those requirements you code will be subject of a code review by one of the team members. +All contributions are encouraged and most of all we hope you will have some fun writing code for react-data-grid. diff --git a/README.md b/README.md index c23b989d4c..25ef6d6e6c 100644 --- a/README.md +++ b/README.md @@ -23,32 +23,9 @@ Overview -------- ReactDataGrid is an advanced JavaScript spreadsheet-like grid component built using React -Exported Modules +Migrations -------- -ReactDataGrid exposes two possible modules, `react-data-grid` and `react-data-grid/addons`. -What's included in each module depends on ReactDataGrid's version you're using. -We have made a major change to this in v1, so please read below. - -### 0.X.X - - - You can import `react-data-grid` **or** `react-data-grid/addons` depending if you want to have access to the add-ons or not. - - `react-data-grid/addons` contains `react-data-grid` so in 0.X.X you *only* need to imort this module to get the addon extras *and* the grid itself. - - `react-data-grid/addons` points to `react-data-grid-with-addons.js` on dist folder. - - #### Known Issues: - - Some external dependencies in `react-data-grid/addons` don't offer support for older browsers like **IE8**, so you *cannot* use this on a page with IE* as babel generated script will break (using `default` and other issues that break in IE8) - - This also includes a much deeper set of dependencies that get bunlded, which in simple use cases, causes a lot of bloat - -### 1.0.0 - We have made a breaking change, so `react-data-grid/addons` will *not* include the grid itself, it is *only* for importing the addons and you need to also import `react-data-grid` - This solves for the issues above, as well as laying the groundwork for allowing more fine grained imports. - This will allow you to simply include `react-data-grid/addons` to get everything, but also to include single addons (a la lodash) - - If you just want the basic grid import `react-data-grid` - - If you want the addons (rich editors, etc) import `react-data-grid` **and** `react-data-grid/addons` - - Both modules are **completely independent and can be used separately**. - - `react-data-grid/addons` points to `react-data-grid.ui-plugins.js`` on dist folder. - -#### Migration from 0.X to 1.X - If you previously had an import for `react-data-grid/addons` you will need to now add `react-data-grid` as well +If you intend to do a major release update for you react-data-grid check [the migration documents](migrations). Features -------- diff --git a/addons.js b/addons.js deleted file mode 100644 index d477c9bd01..0000000000 --- a/addons.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require("./dist/react-data-grid.ui-plugins"); diff --git a/appveyor.yml b/appveyor.yml index 507a30e50d..b3b4203e44 100644 --- a/appveyor.yml +++ b/appveyor.yml @@ -18,12 +18,15 @@ environment: # Install scripts. (runs after repo cloning) install: # Decrypt .npmrc.enc file for publishing purposes if not pull request build and not scheduled build + # Lerna needs to have a npmrc for each package folder as it does not use the root npmrc https://github.com/lerna/lerna/issues/296#issuecomment-261080345 - ps: >- if($env:APPVEYOR_REPO_BRANCH -ne 'master'){ ./ci/publish/decrypt-npmrc.ps1 + ./ci/publish/copy-npmrc.ps1 } if(!$env:APPVEYOR_SCHEDULED_BUILD -and !$env:appveyor_pull_request_number -and $env:APPVEYOR_REPO_BRANCH -eq 'master') { ./ci/publish/decrypt-npmrc.ps1 + ./ci/publish/copy-npmrc.ps1 } - ps: Install-Product node 4 - npm -g install npm@3 @@ -31,9 +34,7 @@ install: - npm cache clean - npm install -g gulp - npm install - - gulp flow - - gulp dist - - gulp examples + - ps: ./ci/buildScripts/build.ps1 # Post-install test scripts. test_script: @@ -41,7 +42,7 @@ test_script: - node --version - npm --version # run tests - - gulp test --release true + - npm test - ps: ./test/uploadResults.ps1 - gulp coveralls @@ -55,10 +56,11 @@ build: off on_success: # If it is not a scheduled build/pr build and the current branch is master publish a new package. # If it is not build on master publish npm tag. -- ps: >- - if(!$env:APPVEYOR_SCHEDULED_BUILD -and !$env:appveyor_pull_request_number -and $env:APPVEYOR_REPO_BRANCH -eq 'master') { - ./ci/publish/publishMaster.ps1 - } - if ($env:APPVEYOR_REPO_BRANCH -ne 'master') { - ./ci/publish/publishBranch.ps1 - } + - npm run beforepublish + - ps: >- + if(!$env:APPVEYOR_SCHEDULED_BUILD -and !$env:appveyor_pull_request_number -and $env:APPVEYOR_REPO_BRANCH -eq 'master') { + ./ci/publish/publishMaster.ps1 + } + if ($env:APPVEYOR_REPO_BRANCH -ne 'master') { + ./ci/publish/publishBranch.ps1 + } diff --git a/ci/buildScripts/build.ps1 b/ci/buildScripts/build.ps1 new file mode 100644 index 0000000000..fadd7f99bf --- /dev/null +++ b/ci/buildScripts/build.ps1 @@ -0,0 +1,22 @@ +function Clear-Dist () { + $distFolders= dir packages/*/dist | ?{$_.PSISContainer} + + foreach ($folder in $distFolders){ + $path = Join-Path -Path $folder.FullName -ChildPath "*" + Remove-Item $path -recurse + Write-Host "Cleaned dist folder in $($path)" + } +} + +function Build () { + npm run build +} + +Write-Host "-- Cleaning files in dist folders --" +Clear-Dist +Write-Host "-- File cleanup finished --" +Write-Host "-- Build process --" +Build +Write-Host "-- Build completed --" + +exit $lastexitcode diff --git a/ci/publish/copy-npmrc.ps1 b/ci/publish/copy-npmrc.ps1 new file mode 100644 index 0000000000..f272118663 --- /dev/null +++ b/ci/publish/copy-npmrc.ps1 @@ -0,0 +1,12 @@ +$dir = dir packages | ?{$_.PSISContainer} + +foreach ($d in $dir){ + $path = Join-Path -Path $d.FullName -ChildPath "" + $name = $d.Name + $root = Get-Location + $fileToCopyPath = "$($root)\.npmrc" + + Write-Host "Copy .npmrc to package $($name) from $($fileToCopyPath) to $($path)" + + Copy-Item $fileToCopyPath $path +} diff --git a/ci/publish/publishBranch.ps1 b/ci/publish/publishBranch.ps1 index 7a18445f70..2fbdc374f5 100644 --- a/ci/publish/publishBranch.ps1 +++ b/ci/publish/publishBranch.ps1 @@ -5,11 +5,10 @@ Add-Content "$env:USERPROFILE\.git-credentials" "https://$($env:access_token):x- git config --global user.name $env:APPVEYOR_REPO_COMMIT_AUTHOR git config --global user.email $env:APPVEYOR_REPO_COMMIT_AUTHOR_EMAIL git checkout $env:APPVEYOR_REPO_BRANCH -npm version $nextVersion --message "Version Bump : $($nextVersion) [ci skip]" Write-Host "Publishing $($nextVersion) to npm" if($?) { - npm publish . --tag $env:APPVEYOR_REPO_BRANCH + ./node_modules/.bin/lerna publish --repo-version $nextVersion --npm-tag=$env:APPVEYOR_REPO_BRANCH --yes --skip-git } exit $lastexitcode diff --git a/ci/publish/publishExamples.js b/ci/publish/publishExamples.js new file mode 100644 index 0000000000..7191fe30e1 --- /dev/null +++ b/ci/publish/publishExamples.js @@ -0,0 +1,13 @@ +const ghpages = require('gh-pages'); +const path = require('path'); + +const publishToGhPages = () => { + ghpages.publish( + path.join(__dirname, '../../packages/react-data-grid-examples'), + (err) => { + if (err) throw new Error(err); + } + ); +}; + +publishToGhPages(); diff --git a/ci/publish/publishMaster.ps1 b/ci/publish/publishMaster.ps1 index 1074c3c49c..f1d4590fa8 100644 --- a/ci/publish/publishMaster.ps1 +++ b/ci/publish/publishMaster.ps1 @@ -5,26 +5,15 @@ Add-Content "$env:USERPROFILE\.git-credentials" "https://$($env:access_token):x- git config --global user.name $env:APPVEYOR_REPO_COMMIT_AUTHOR git config --global user.email $env:APPVEYOR_REPO_COMMIT_AUTHOR_EMAIL git checkout master - -#docs task currently broken needs investigation -#gulp docs:regenerate -#git add -A -#git commit -m "Docs Regeneration" - -npm version patch --message "Version Bump [ci skip]" $currentVersion = node ./ci/publish/getCurrentVersion -git commit --amend -m "Version Bump to $($currentVersion) [ci skip]" -git fetch -git pull --rebase -git push -git push --tags Write-Host "Publishing $($currentVersion) to npm" + if($?) { - npm publish + ./node_modules/.bin/lerna publish --repo-version $currentVersion --yes if($?){ Write-Host "regenerating public site and examples" - gulp docs + node ./ci/publish/publishExamples.js } } diff --git a/ci/publish/replacePackageEntry.js b/ci/publish/replacePackageEntry.js new file mode 100644 index 0000000000..46fa78dbf4 --- /dev/null +++ b/ci/publish/replacePackageEntry.js @@ -0,0 +1,25 @@ +const fs = require('fs'); +const path = require('path'); +const scriptArgs = process.argv.slice(2); +const packageName = scriptArgs[0]; +const publish = scriptArgs[1]; + +const getPathToPackageEntry = () => path.join(__dirname, `../../packages/${packageName}/index.js`); +const getPublishEntryData = () => `module.exports = require('./dist/${packageName}');`; +const getDevEntryData = () => "module.exports = require('./src');"; + +const replacePackageEntry = () => { + const entryData = publish ? getPublishEntryData() : getDevEntryData(); + console.log(` --- Overriding ${packageName} entry point ---`); + fs.writeFile( + getPathToPackageEntry(), + entryData, + (err) => { + if (err) throw new Error(errr); + const env = publish ? 'publish' : 'dev'; + console.log(` --- ${packageName} entry point was overriden to ${env}`); + } + ); +}; + +replacePackageEntry(); diff --git a/config/karma.js b/config/karma.js index 583b6f7573..e3e31080a6 100644 --- a/config/karma.js +++ b/config/karma.js @@ -2,7 +2,7 @@ * In local config, only run tests using phantom js. No code coverage reports applied */ var webpack = require('webpack'); -var webpackConfig = require('./webpack.common.js'); +var webpackConfig = require('./webpack.common.config.js'); var RewirePlugin = require("rewire-webpack"); var path = require('path'); var argv = require('minimist')(process.argv.slice(2)); @@ -102,7 +102,7 @@ module.exports = function (config) { extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx'] }, plugins: [ - new RewirePlugin() + new RewirePlugin() ], externals: { 'cheerio': 'window', diff --git a/config/webpack.common.config.js b/config/webpack.common.config.js new file mode 100644 index 0000000000..44ffaa9ff5 --- /dev/null +++ b/config/webpack.common.config.js @@ -0,0 +1,57 @@ +const webpack = require('webpack'); +const argv = require('minimist')(process.argv.slice(2)); +const RELEASE = argv.release; + +function getPlugins() { + const nodeEnv = RELEASE ? '"production"' : '"development"'; + var pluginsBase = [ + new webpack.DefinePlugin({'process.env.NODE_ENV': nodeEnv, 'global': 'window'}) + ]; + + if (RELEASE) { + pluginsBase.push(new webpack.optimize.DedupePlugin()); + pluginsBase.push(new webpack.optimize.OccurenceOrderPlugin()); + pluginsBase.push(new webpack.optimize.AggressiveMergingPlugin()); + pluginsBase.push(new webpack.optimize.UglifyJsPlugin({ + include: /\.min\.js$/, + compress: { warnings: false } + })); + } + return pluginsBase; +} + +const config = { + debug: !RELEASE, + externals: { + react: { + root: 'React', + commonjs: 'react', + commonjs2: 'react', + amd: 'react' + }, + 'react-dom': { + root: 'ReactDOM', + commonjs: 'react-dom', + commonjs2: 'react-dom', + amd: 'react-dom' + }, + 'react/addons': 'React', + moment: 'moment' + }, + module: { + loaders: [ + { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, + { test: /\.css$/, loader: 'style-loader!css-loader' } + ] + }, + plugins: getPlugins(), + postLoaders: [ + { + test: /\.js$/, + exclude: /node_modules|testData/, + loader: 'jshint' + }] +}; + + +module.exports = config; diff --git a/config/webpack.common.js b/config/webpack.common.js deleted file mode 100644 index 934b583fab..0000000000 --- a/config/webpack.common.js +++ /dev/null @@ -1,54 +0,0 @@ -var path = require("path"); -var webpack = require('webpack'); -var release = false; -var path = require("path"); -var argv = require('minimist')(process.argv.slice(2)); -var RELEASE = argv.release; - -function getPlugins() { - var nodeEnv = RELEASE ? '"production"' : '"development"'; - var pluginsBase = [ - new webpack.DefinePlugin({'process.env.NODE_ENV': nodeEnv, 'global': 'window'}) - ]; - - if (RELEASE) { - pluginsBase.push(new webpack.optimize.DedupePlugin()); - pluginsBase.push(new webpack.optimize.OccurenceOrderPlugin()); - pluginsBase.push(new webpack.optimize.AggressiveMergingPlugin()); - } - return pluginsBase; -}; - -var config = { - debug: !RELEASE, - externals: { - "react": { - root : 'React', - commonjs : 'react', - commonjs2 : 'react', - amd : 'react' - }, - "react-dom": { - root : 'ReactDOM', - commonjs : 'react-dom', - commonjs2 : 'react-dom', - amd : 'react-dom' - }, - "moment" : "moment" - }, - module: { - loaders: [ - { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"} - ] - }, - plugins: getPlugins(), - postLoaders: [ - { - test: /\.js$/, - exclude: /node_modules|testData/, - loader: 'jshint' - }] -} - - -module.exports = config; diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js new file mode 100644 index 0000000000..571b938f42 --- /dev/null +++ b/config/webpack.config.prod.js @@ -0,0 +1,22 @@ +const webpackCommon = require('./webpack.common.config'); + +const config = { + entry: { + 'react-data-grid/dist/react-data-grid': ['./packages/react-data-grid/src'], + 'react-data-grid-addons/dist/react-data-grid-addons': ['./packages/react-data-grid-addons/src'], + 'react-data-grid/dist/react-data-grid.min': ['./packages/react-data-grid/src'], + 'react-data-grid-addons/dist/react-data-grid-addons.min': ['./packages/react-data-grid-addons/src'], + 'react-data-grid-examples/dist/shared': './packages/react-data-grid-examples/src/shared.js', + 'react-data-grid-examples/dist/examples': './packages/react-data-grid-examples/src/examples.js', + 'react-data-grid-examples/dist/index': './packages/react-data-grid-examples/src/index.js', + 'react-data-grid-examples/dist/documentation': './packages/react-data-grid-examples/src/documentation.js' + }, + output: { + path: './packages', + filename: '[name].js', + library: ['ReactDataGrid'], + libraryTarget: 'umd' + } +}; + +module.exports = Object.assign({ }, webpackCommon, config); diff --git a/config/webpack.react-data-grid.js b/config/webpack.react-data-grid.js deleted file mode 100644 index aade86bd38..0000000000 --- a/config/webpack.react-data-grid.js +++ /dev/null @@ -1,34 +0,0 @@ -var path = require("path"); -var webpack = require('webpack'); -var commonConfig = require('./webpack.common'); -Object.assign = Object.assign || require('object-assign'); - -var config = Object.assign({}, commonConfig, { - entry: { - 'react-data-grid': './src/index' - }, - output: { - path: path.join(__dirname, "../dist"), - filename: "[name].js", - library: ["ReactDataGrid"], - libraryTarget: "umd" - }, - externals: { - "react": { - root: 'React', - commonjs: 'react', - commonjs2: 'react', - amd: 'react' - }, - "react-dom": { - root: 'ReactDOM', - commonjs: 'react-dom', - commonjs2: 'react-dom', - amd: 'react-dom' - } - } -} -); - - -module.exports = config; diff --git a/config/webpack.ui-plugins.js b/config/webpack.ui-plugins.js deleted file mode 100644 index 81714c36ee..0000000000 --- a/config/webpack.ui-plugins.js +++ /dev/null @@ -1,19 +0,0 @@ -var path = require("path"); -var commonConfig = require('./webpack.common'); -var webpack = require('webpack'); -Object.assign = Object.assign || require('object-assign'); - -var config = Object.assign({}, commonConfig, { - entry: { - 'react-data-grid.ui-plugins': './src/addons/index' - }, - output: { - path: path.join(__dirname, "../dist"), - filename: "[name].js", - library: ["ReactDataGrid"], - libraryTarget: "umd" - } -}); - - -module.exports = config; diff --git a/examples/assets/js/JSXTransformer.js b/examples/assets/js/JSXTransformer.js deleted file mode 100644 index b99a0dbbc4..0000000000 --- a/examples/assets/js/JSXTransformer.js +++ /dev/null @@ -1,15199 +0,0 @@ -/** - * JSXTransformer v0.12.2 - */ -!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.JSXTransformer=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o 1) { - source += ' (' + inlineScriptCount + ')'; - } - } else if (dummyAnchor) { - // Firefox has problems when the sourcemap source is a proper URL with a - // protocol and hostname, so use the pathname. We could use just the - // filename, but hopefully using the full path will prevent potential - // issues where the same filename exists in multiple directories. - dummyAnchor.href = url; - source = dummyAnchor.pathname.substr(1); - } - map.sources = [source]; - map.sourcesContent = [code]; - - return ( - transformed.code + - '\n//# sourceMappingURL=data:application/json;base64,' + - buffer.Buffer(JSON.stringify(map)).toString('base64') - ); -} - - -/** - * Appends a script element at the end of the with the content of code, - * after transforming it. - * - * @param {string} code The original source code - * @param {string?} url Where the code came from. null if inline - * @param {object?} options Options to pass to jstransform - * @internal - */ -function run(code, url, options) { - var scriptEl = document.createElement('script'); - scriptEl.text = transformCode(code, url, options); - headEl.appendChild(scriptEl); -} - -/** - * Load script from the provided url and pass the content to the callback. - * - * @param {string} url The location of the script src - * @param {function} callback Function to call with the content of url - * @internal - */ -function load(url, successCallback, errorCallback) { - var xhr; - xhr = window.ActiveXObject ? new window.ActiveXObject('Microsoft.XMLHTTP') - : new XMLHttpRequest(); - - // async, however scripts will be executed in the order they are in the - // DOM to mirror normal script loading. - xhr.open('GET', url, true); - if ('overrideMimeType' in xhr) { - xhr.overrideMimeType('text/plain'); - } - xhr.onreadystatechange = function() { - if (xhr.readyState === 4) { - if (xhr.status === 0 || xhr.status === 200) { - successCallback(xhr.responseText); - } else { - errorCallback(); - throw new Error("Could not load " + url); - } - } - }; - return xhr.send(null); -} - -/** - * Loop over provided script tags and get the content, via innerHTML if an - * inline script, or by using XHR. Transforms are applied if needed. The scripts - * are executed in the order they are found on the page. - * - * @param {array} scripts The - - - - - - + - + - - - + + + - - - @@ -77,12 +69,12 @@
- - - - - + + diff --git a/examples/documentation.js b/packages/react-data-grid-examples/src/documentation.js similarity index 94% rename from examples/documentation.js rename to packages/react-data-grid-examples/src/documentation.js index beb6de4dc8..fd8bdd3f77 100644 --- a/examples/documentation.js +++ b/packages/react-data-grid-examples/src/documentation.js @@ -6,7 +6,7 @@ var gettingStarted = require('./scripts/documentation01-gettingstarted'); var apiReference = require('./scripts/documentation02-apireference'); var componentsDocs = require('./scripts/documentation03-components'); -var { Route, RouteHandler, Link } = ReactRouter; +var { Route, RouteHandler } = ReactRouter; var App = React.createClass({ render: function () { diff --git a/examples/examples.html b/packages/react-data-grid-examples/src/examples.html similarity index 76% rename from examples/examples.html rename to packages/react-data-grid-examples/src/examples.html index f4195e21a5..64a2531100 100644 --- a/examples/examples.html +++ b/packages/react-data-grid-examples/src/examples.html @@ -11,19 +11,11 @@ - - - - - - - - @@ -51,14 +43,14 @@ - - - + + - - - - + + diff --git a/examples/examples.js b/packages/react-data-grid-examples/src/examples.js similarity index 100% rename from examples/examples.js rename to packages/react-data-grid-examples/src/examples.js diff --git a/examples/examples.less b/packages/react-data-grid-examples/src/examples.less similarity index 100% rename from examples/examples.less rename to packages/react-data-grid-examples/src/examples.less diff --git a/examples/fonts/glyphicons-halflings-regular.eot b/packages/react-data-grid-examples/src/fonts/glyphicons-halflings-regular.eot similarity index 100% rename from examples/fonts/glyphicons-halflings-regular.eot rename to packages/react-data-grid-examples/src/fonts/glyphicons-halflings-regular.eot diff --git a/examples/fonts/glyphicons-halflings-regular.svg b/packages/react-data-grid-examples/src/fonts/glyphicons-halflings-regular.svg similarity index 100% rename from examples/fonts/glyphicons-halflings-regular.svg rename to packages/react-data-grid-examples/src/fonts/glyphicons-halflings-regular.svg diff --git a/examples/fonts/glyphicons-halflings-regular.ttf b/packages/react-data-grid-examples/src/fonts/glyphicons-halflings-regular.ttf similarity index 100% rename from examples/fonts/glyphicons-halflings-regular.ttf rename to packages/react-data-grid-examples/src/fonts/glyphicons-halflings-regular.ttf diff --git a/examples/fonts/glyphicons-halflings-regular.woff b/packages/react-data-grid-examples/src/fonts/glyphicons-halflings-regular.woff similarity index 100% rename from examples/fonts/glyphicons-halflings-regular.woff rename to packages/react-data-grid-examples/src/fonts/glyphicons-halflings-regular.woff diff --git a/examples/index.html b/packages/react-data-grid-examples/src/index.html similarity index 94% rename from examples/index.html rename to packages/react-data-grid-examples/src/index.html index d8f6cc3a08..991dca9cec 100644 --- a/examples/index.html +++ b/packages/react-data-grid-examples/src/index.html @@ -15,16 +15,12 @@ - - - - @@ -179,12 +175,10 @@

Using Distribution Scripts

- - - - - - - + + diff --git a/examples/index.js b/packages/react-data-grid-examples/src/index.js similarity index 100% rename from examples/index.js rename to packages/react-data-grid-examples/src/index.js diff --git a/packages/react-data-grid-examples/src/scriptDelegator.js b/packages/react-data-grid-examples/src/scriptDelegator.js new file mode 100644 index 0000000000..2d06ec5d49 --- /dev/null +++ b/packages/react-data-grid-examples/src/scriptDelegator.js @@ -0,0 +1,9 @@ +const isDevEnv = () => window.location.hostname === 'localhost'; + +const delegateScript = fileName => { + let src = isDevEnv() ? `http://localhost:8080/${fileName}` : `../dist/${fileName}`; + + let script = document.createElement('script'); + script.setAttribute('src', src); + document.getElementsByTagName('body')[0].appendChild(script); +}; diff --git a/examples/scripts/FakeObjectDataStore.js b/packages/react-data-grid-examples/src/scripts/FakeObjectDataStore.js similarity index 100% rename from examples/scripts/FakeObjectDataStore.js rename to packages/react-data-grid-examples/src/scripts/FakeObjectDataStore.js diff --git a/examples/scripts/documentation01-gettingstarted.js b/packages/react-data-grid-examples/src/scripts/documentation01-gettingstarted.js similarity index 100% rename from examples/scripts/documentation01-gettingstarted.js rename to packages/react-data-grid-examples/src/scripts/documentation01-gettingstarted.js diff --git a/examples/scripts/documentation02-apireference.js b/packages/react-data-grid-examples/src/scripts/documentation02-apireference.js similarity index 100% rename from examples/scripts/documentation02-apireference.js rename to packages/react-data-grid-examples/src/scripts/documentation02-apireference.js diff --git a/examples/scripts/documentation03-components.js b/packages/react-data-grid-examples/src/scripts/documentation03-components.js similarity index 98% rename from examples/scripts/documentation03-components.js rename to packages/react-data-grid-examples/src/scripts/documentation03-components.js index c2c5ff53d3..073bc351ba 100644 --- a/examples/scripts/documentation03-components.js +++ b/packages/react-data-grid-examples/src/scripts/documentation03-components.js @@ -1,3 +1,5 @@ +const markdown = require('markdown'); + var DocumentContainer = React.createClass({ propTypes: { documentContent: React.PropTypes.string.isRequired, diff --git a/packages/react-data-grid-examples/src/scripts/example01-basic.js b/packages/react-data-grid-examples/src/scripts/example01-basic.js new file mode 100644 index 0000000000..810cf1a45a --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example01-basic.js @@ -0,0 +1,49 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); + +const Example = React.createClass({ + getInitialState() { + this.createRows(); + this._columns = [ + { key: 'id', name: 'ID' }, + { key: 'title', name: 'Title' }, + { key: 'count', name: 'Count' } ]; + + return null; + }, + + createRows() { + let rows = []; + for (let i = 1; i < 1000; i++) { + rows.push({ + id: i, + title: 'Title ' + i, + count: i * 1000 + }); + } + + this._rows = rows; + }, + + rowGetter(i) { + return this._rows[i]; + }, + + render() { + return ( + ); + } +}); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Basic Example', + exampleDescription: 'A display only grid.', + examplePath: './scripts/example01-basic.js', + examplePlaygroundLink: 'https://jsfiddle.net/f6mbnb8z/1/' +}); diff --git a/packages/react-data-grid-examples/src/scripts/example02-resizable-cols.js b/packages/react-data-grid-examples/src/scripts/example02-resizable-cols.js new file mode 100644 index 0000000000..c7b05dd6b1 --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example02-resizable-cols.js @@ -0,0 +1,99 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); + +const Example = React.createClass({ + getInitialState() { + this.createRows(); + this._columns = [ + { + key: 'id', + name: 'ID', + resizable: true, + width: 40 + }, + { + key: 'task', + name: 'Title', + resizable: true + }, + { + key: 'priority', + name: 'Priority', + resizable: true + }, + { + key: 'issueType', + name: 'Issue Type', + resizable: true + }, + { + key: 'complete', + name: '% Complete', + resizable: true + }, + { + key: 'startDate', + name: 'Start Date', + resizable: true + }, + { + key: 'completeDate', + name: 'Expected Complete', + resizable: true + } + ]; + + return null; + }, + + getRandomDate(start, end) { + return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString(); + }, + + createRows() { + let rows = []; + for (let i = 1; i < 1000; i++) { + rows.push({ + id: i, + task: 'Task ' + i, + complete: Math.min(100, Math.round(Math.random() * 110)), + priority: ['Critical', 'High', 'Medium', 'Low'][Math.floor((Math.random() * 3) + 1)], + issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor((Math.random() * 3) + 1)], + startDate: this.getRandomDate(new Date(2015, 3, 1), new Date()), + completeDate: this.getRandomDate(new Date(), new Date(2016, 0, 1)) + }); + } + + this._rows = rows; + }, + + rowGetter(i) { + return this._rows[i]; + }, + + render() { + return ( + ); + } +}); + +const exampleDescription = ( +
+

To make a given column resizable, set column.resizable = true

+

If you need to know when a column has been resized, use the onColumnResize prop. This will be triggered when a column is + resized and will report the column index and its new width. These can be saved on the back-end and used to restore column widths when + the component is initialized, by setting width key in each column.

+
); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Resizable Columns Example', + exampleDescription, + examplePath: './scripts/example02-resizable-cols.js', + examplePlaygroundLink: 'https://jsfiddle.net/k7tfnw1n/2/' +}); diff --git a/packages/react-data-grid-examples/src/scripts/example03-fixed-cols.js b/packages/react-data-grid-examples/src/scripts/example03-fixed-cols.js new file mode 100644 index 0000000000..5a41985458 --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example03-fixed-cols.js @@ -0,0 +1,92 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); + +const Example = React.createClass({ + getInitialState() { + this.createRows(); + this._columns = [ + { + key: 'id', + name: 'ID', + locked: true + }, + { + key: 'task', + name: 'Title', + width: 200 + }, + { + key: 'priority', + name: 'Priority', + width: 200 + }, + { + key: 'issueType', + name: 'Issue Type', + width: 200 + }, + { + key: 'complete', + name: '% Complete', + width: 200 + }, + { + key: 'startDate', + name: 'Start Date', + width: 200 + }, + { + key: 'completeDate', + name: 'Expected Complete', + width: 200 + } + ]; + + return null; + }, + + getRandomDate(start, end) { + return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString(); + }, + + createRows() { + let rows = []; + for (let i = 1; i < 1000; i++) { + rows.push({ + id: i, + task: 'Task ' + i, + complete: Math.min(100, Math.round(Math.random() * 110)), + priority: ['Critical', 'High', 'Medium', 'Low'][Math.floor((Math.random() * 3) + 1)], + issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor((Math.random() * 3) + 1)], + startDate: this.getRandomDate(new Date(2015, 3, 1), new Date()), + completeDate: this.getRandomDate(new Date(), new Date(2016, 0, 1)) + }); + } + + this._rows = rows; + }, + + rowGetter(i) { + return this._rows[i]; + }, + + render() { + return ( + ); + } +}); + +const exampleDescription =

To make a given column frozen, set column.locked = true. In this example, the ID columns has been frozen and will remain in position as you scroll horizontally

+ +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Frozen Columns Example', + exampleDescription, + examplePath: './scripts/example03-fixed-cols.js', + examplePlaygroundLink: 'https://jsfiddle.net/k7tfnw1n/5/' +}); diff --git a/packages/react-data-grid-examples/src/scripts/example04-editable.js b/packages/react-data-grid-examples/src/scripts/example04-editable.js new file mode 100644 index 0000000000..fea6816cec --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example04-editable.js @@ -0,0 +1,100 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); + +const Example = React.createClass({ + getInitialState() { + this._columns = [ + { + key: 'id', + name: 'ID', + width: 80 + }, + { + key: 'task', + name: 'Title', + editable: true + }, + { + key: 'priority', + name: 'Priority', + editable: true + }, + { + key: 'issueType', + name: 'Issue Type', + editable: true + }, + { + key: 'complete', + name: '% Complete', + editable: true + }, + { + key: 'startDate', + name: 'Start Date', + editable: true + }, + { + key: 'completeDate', + name: 'Expected Complete', + editable: true + } + ]; + + return { rows: this.createRows(1000) }; + }, + + getRandomDate(start, end) { + return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString(); + }, + + createRows(numberOfRows) { + let rows = []; + for (let i = 1; i < numberOfRows; i++) { + rows.push({ + id: i, + task: 'Task ' + i, + complete: Math.min(100, Math.round(Math.random() * 110)), + priority: ['Critical', 'High', 'Medium', 'Low'][Math.floor((Math.random() * 3) + 1)], + issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor((Math.random() * 3) + 1)], + startDate: this.getRandomDate(new Date(2015, 3, 1), new Date()), + completeDate: this.getRandomDate(new Date(), new Date(2016, 0, 1)) + }); + } + return rows; + }, + + rowGetter(i) { + return this.state.rows[i]; + }, + + handleRowUpdated({ rowIdx, updated }) { + // merge updated row with current row and rerender by setting state + const rows = this.state.rows; + Object.assign(rows[rowIdx], updated); + this.setState({rows: rows}); + }, + + render() { + return ( + ); + } +}); + +const exampleDescription = ( +

To make a given column editable set column.editable and create a onRowUpdated handler. Note that you will need to store your rows in state and update that state when a cell value changes.

); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Editable Example', + exampleDescription, + examplePath: './scripts/example04-editable.js', + examplePlaygroundLink: 'https://jsfiddle.net/k7tfnw1n/6/' +}); diff --git a/packages/react-data-grid-examples/src/scripts/example05-custom-formatters.js b/packages/react-data-grid-examples/src/scripts/example05-custom-formatters.js new file mode 100644 index 0000000000..f35c5dd2ac --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example05-custom-formatters.js @@ -0,0 +1,106 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); + +// Custom Formatter component +const PercentCompleteFormatter = React.createClass({ + propTypes: { + value: React.PropTypes.number.isRequired + }, + + render() { + const percentComplete = this.props.value + '%'; + return ( +
+
+ {percentComplete} +
+
); + } +}); + +const Example = React.createClass({ + getInitialState() { + this.createRows(); + this._columns = [ + { + key: 'id', + name: 'ID', + width: 80 + }, + { + key: 'task', + name: 'Title' + }, + { + key: 'priority', + name: 'Priority' + }, + { + key: 'issueType', + name: 'Issue Type' + }, + { + key: 'complete', + name: '% Complete', + formatter: PercentCompleteFormatter + }, + { + key: 'startDate', + name: 'Start Date' + }, + { + key: 'completeDate', + name: 'Expected Complete' + } + ]; + + return null; + }, + + getRandomDate(start, end) { + return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString(); + }, + + createRows() { + let rows = []; + for (let i = 1; i < 100; i++) { + rows.push({ + id: i, + task: 'Task ' + i, + complete: Math.min(100, Math.round(Math.random() * 110)), + priority: ['Critical', 'High', 'Medium', 'Low'][Math.floor((Math.random() * 3) + 1)], + issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor((Math.random() * 3) + 1)], + startDate: this.getRandomDate(new Date(2015, 3, 1), new Date()), + completeDate: this.getRandomDate(new Date(), new Date(2016, 0, 1)) + }); + } + + this._rows = rows; + }, + + rowGetter(i) { + return this._rows[i]; + }, + + render() { + return ( + ); + } +}); + +const exampleDescription = ( +

Its possible to create your own formatters for a given column by setting its formatter property. Here a React component is used to format the %complete column. A custom formatter will always receive a value prop, the value of the cell and this can be used however needed. Here we render a progress bar based on the props.value

); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Custom Formatter Example', + exampleDescription, + examplePath: './scripts/example05-custom-formatters.js', + examplePlaygroundLink: 'https://jsfiddle.net/k7tfnw1n/7/' +}); + diff --git a/packages/react-data-grid-examples/src/scripts/example06-built-in-editors.js b/packages/react-data-grid-examples/src/scripts/example06-built-in-editors.js new file mode 100644 index 0000000000..293916d88c --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example06-built-in-editors.js @@ -0,0 +1,100 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); +const { Editors, Formatters } = require('react-data-grid-addons'); + +const { AutoComplete: AutoCompleteEditor, DropDownEditor } = Editors; +const { DropDownFormatter } = Formatters; + +// options for priorities autocomplete editor +const priorities = [{ id: 0, title: 'Critical' }, { id: 1, title: 'High' }, { id: 2, title: 'Medium' }, { id: 3, title: 'Low'} ]; +const PrioritiesEditor = ; + +// options for IssueType dropdown editor +// these can either be an array of strings, or an object that matches the schema below. +const issueTypes = [ + { id: 'bug', value: 'bug', text: 'Bug', title: 'Bug' }, + { id: 'improvement', value: 'improvement', text: 'Improvement', title: 'Improvement' }, + { id: 'epic', value: 'epic', text: 'Epic', title: 'Epic' }, + { id: 'story', value: 'story', text: 'Story', title: 'Story' } +]; +const IssueTypesEditor = ; + +const IssueTypesFormatter = ; + +const Example = React.createClass({ + getInitialState() { + this._columns = [ + { + key: 'id', + name: 'ID', + width: 80 + }, + { + key: 'task', + name: 'Title', + editable: true + }, + { + key: 'priority', + name: 'Priority', + editor: PrioritiesEditor + }, + { + key: 'issueType', + name: 'Issue Type', + editor: IssueTypesEditor, + formatter: IssueTypesFormatter + } + ]; + + return { rows: this.createRows(1000) }; + }, + + createRows(numberOfRows) { + let rows = []; + for (let i = 1; i < numberOfRows; i++) { + rows.push({ + id: i, + task: 'Task ' + i, + priority: ['Critical', 'High', 'Medium', 'Low'][Math.floor((Math.random() * 3) + 1)], + issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor((Math.random() * 3) + 1)], + }); + } + + return rows; + }, + + rowGetter(i) { + return this.state.rows[i]; + }, + + handleRowUpdated({ rowIdx, updated }) { + // merge updated row with current row and rerender by setting state + let rows = this.state.rows; + Object.assign(rows[rowIdx], updated); + this.setState({rows: rows}); + }, + + render() { + return ( + ); + } +}); + +const exampleDescription = ( +

This example uses the built in Autocomplete editor for the priorities column and the DropdownEditor for the IssueType column. You must include the react-data-grid.ui-plugins.js package to use the built in editors.

); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Built-In Cell Editor Example', + exampleDescription, + examplePath: './scripts/example06-built-in-editors.js', + examplePlaygroundLink: undefined +}); diff --git a/packages/react-data-grid-examples/src/scripts/example08-sortable-cols.js b/packages/react-data-grid-examples/src/scripts/example08-sortable-cols.js new file mode 100644 index 0000000000..3ecd590f81 --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example08-sortable-cols.js @@ -0,0 +1,115 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); + +const Example = React.createClass({ + getInitialState() { + this._columns = [ + { + key: 'id', + name: 'ID', + locked: true + }, + { + key: 'task', + name: 'Title', + width: 200, + sortable: true + }, + { + key: 'priority', + name: 'Priority', + width: 200, + sortable: true + }, + { + key: 'issueType', + name: 'Issue Type', + width: 200, + sortable: true + }, + { + key: 'complete', + name: '% Complete', + width: 200, + sortable: true + }, + { + key: 'startDate', + name: 'Start Date', + width: 200, + sortable: true + }, + { + key: 'completeDate', + name: 'Expected Complete', + width: 200, + sortable: true + } + ]; + + let originalRows = this.createRows(1000); + let rows = originalRows.slice(0); + // Store the original rows array, and make a copy that can be used for modifying eg.filtering, sorting + return { originalRows, rows }; + }, + + getRandomDate(start, end) { + return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString(); + }, + + createRows() { + let rows = []; + for (let i = 1; i < 1000; i++) { + rows.push({ + id: i, + task: 'Task ' + i, + complete: Math.min(100, Math.round(Math.random() * 110)), + priority: ['Critical', 'High', 'Medium', 'Low'][Math.floor((Math.random() * 3) + 1)], + issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor((Math.random() * 3) + 1)], + startDate: this.getRandomDate(new Date(2015, 3, 1), new Date()), + completeDate: this.getRandomDate(new Date(), new Date(2016, 0, 1)) + }); + } + + return rows; + }, + + handleGridSort(sortColumn, sortDirection) { + const comparer = (a, b) => { + if (sortDirection === 'ASC') { + return (a[sortColumn] > b[sortColumn]) ? 1 : -1; + } else if (sortDirection === 'DESC') { + return (a[sortColumn] < b[sortColumn]) ? 1 : -1; + } + }; + + const rows = sortDirection === 'NONE' ? this.state.originalRows.slice(0) : this.state.rows.sort(comparer); + + this.setState({ rows }); + }, + + rowGetter(i) { + return this.state.rows[i]; + }, + + render() { + return ( + ); + } +}); + +const exampleDescription = (

While ReactDataGrid does not provide the ability to sort directly, it does provide hooks that allow you to provide your own sort function. This is done via the onGridSort prop. To enable sorting for a given column, set column.sortable = true for that column. Now when the header cell is clicked for that column, onGridSort will be triggered passing the column name and the sort direction.

); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Sortable Columns Example', + exampleDescription, + examplePath: './scripts/example08-sortable-cols.js', + examplePlaygroundLink: 'https://jsfiddle.net/k7tfnw1n/8/' +}); diff --git a/packages/react-data-grid-examples/src/scripts/example09-filterable-grid.js b/packages/react-data-grid-examples/src/scripts/example09-filterable-grid.js new file mode 100644 index 0000000000..9379cbb474 --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example09-filterable-grid.js @@ -0,0 +1,122 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); +const { Toolbar, Data: { Selectors } } = require('react-data-grid-addons'); + +const Example = React.createClass({ + getInitialState() { + this._columns = [ + { + key: 'id', + name: 'ID', + width: 80, + filterable: true + }, + { + key: 'task', + name: 'Title', + filterable: true + }, + { + key: 'priority', + name: 'Priority', + filterable: true + }, + { + key: 'issueType', + name: 'Issue Type', + filterable: true + }, + { + key: 'complete', + name: '% Complete', + filterable: true + }, + { + key: 'startDate', + name: 'Start Date', + filterable: true + }, + { + key: 'completeDate', + name: 'Expected Complete', + filterable: true + } + ]; + + return { rows: this.createRows(1000), filters: [] }; + }, + + getRandomDate(start, end) { + return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString(); + }, + + createRows() { + let rows = []; + for (let i = 1; i < 1000; i++) { + rows.push({ + id: i, + task: 'Task ' + i, + complete: Math.min(100, Math.round(Math.random() * 110)), + priority: ['Critical', 'High', 'Medium', 'Low'][Math.floor((Math.random() * 3) + 1)], + issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor((Math.random() * 3) + 1)], + startDate: this.getRandomDate(new Date(2015, 3, 1), new Date()), + completeDate: this.getRandomDate(new Date(), new Date(2016, 0, 1)) + }); + } + + return rows; + }, + + getRows() { + return Selectors.getRows(this.state); + }, + + getSize() { + return this.getRows().length; + }, + + rowGetter(rowIdx) { + let rows = this.getRows(); + return rows[rowIdx]; + }, + + handleFilterChange(filter) { + let newFilters = Object.assign({}, this.state.filters); + if (filter.filterTerm) { + newFilters[filter.column.key] = filter; + } else { + delete newFilters[filter.column.key]; + } + this.setState({ filters: newFilters }); + }, + + onClearFilters: function() { + // all filters removed + this.setState({filters: {} }); + }, + + render() { + return ( + } + onAddFilter={this.handleFilterChange} + onClearFilters={this.onClearFilters} />); + } +}); + +const exampleDescription = ( +

While ReactDataGrid doesn't not provide the ability to filter directly, it does provide hooks that allow you to provide your own filter function. This is done via the onAddFilter prop. To enable filtering for a given column, set column.filterable = true for that column. Now when the header cell has a new filter value entered for that column, onAddFilter will be triggered passing the filter key and value.

); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Filterable Columns Example', + exampleDescription, + examplePath: './scripts/example09-filterable-grid.js', + examplePlaygroundLink: undefined +}); diff --git a/packages/react-data-grid-examples/src/scripts/example10-one-million-rows.js b/packages/react-data-grid-examples/src/scripts/example10-one-million-rows.js new file mode 100644 index 0000000000..8dee943b30 --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example10-one-million-rows.js @@ -0,0 +1,54 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); + +const Example = React.createClass({ + getInitialState() { + this.createRows(); + this._columns = [ + { key: 'id', name: 'ID' }, + { key: 'task', name: 'Title' }, + { key: 'priority', name: 'Priority' }, + { key: 'issueType', name: 'Issue Type' }, + { key: 'complete', name: '% Complete' } + ]; + + return null; + }, + + createRows() { + let rows = []; + for (let i = 1; i < 1000000; i++) { + rows.push({ + id: i, + task: 'Task ' + i, + complete: 'a', + priority: 'b', + issueType: 'c' + }); + } + + this._rows = rows; + }, + + rowGetter(i) { + return this._rows[i]; + }, + + render() { + return ( + ); + } +}); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'One Million Rows Example', + exampleDescription: 'A grid with 1 Million rows.', + examplePath: './scripts/example10-one-million-rows.js', + examplePlaygroundLink: 'https://jsfiddle.net/k7tfnw1n/9/' +}); diff --git a/packages/react-data-grid-examples/src/scripts/example11-immutable-data.js b/packages/react-data-grid-examples/src/scripts/example11-immutable-data.js new file mode 100644 index 0000000000..d8c7f6327d --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example11-immutable-data.js @@ -0,0 +1,68 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); +const Immutable = require('immutable'); + +const Example = React.createClass({ + getInitialState() { + this._columns = this.createColumns(); + this._rows = this.createRows(); + + return { rows: new Immutable.fromJS(this._rows) }; + }, + + getRandomDate(start, end) { + return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString(); + }, + + createColumns() { + let cols = []; + for (let j = 0; j < 50; j++) { + cols.push({ key: 'col' + j, name: 'col' + j, width: 150, editable: true }); + } + + return cols; + }, + + createRows() { + let rows = []; + for (let rowIdx = 1; rowIdx < 300; rowIdx++) { + let row = {}; + this._columns.forEach((c, colIdx) => row[c.key] = '(' + colIdx + ',' + rowIdx + ')'); + rows.push(row); + } + + return rows; + }, + + rowGetter(rowIdx) { + return this.state.rows.get(rowIdx); + }, + + handleRowUpdated: function(e) { + // merge updated row with current row and rerender by setting state + let rows = this.state.rows.update(e.rowIdx, (row) => row.merge(e.updated)); + this.setState({ rows }); + }, + + render() { + return ( + ); + } +}); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Immutable Data Example', + exampleDescription: 'Data Grid using immutable data', + examplePath: './scripts/example11-immutable-data.js', + examplePlaygroundLink: undefined +}); + +module.exports.Component = Example; diff --git a/packages/react-data-grid-examples/src/scripts/example12-customRowRenderer.js b/packages/react-data-grid-examples/src/scripts/example12-customRowRenderer.js new file mode 100644 index 0000000000..0d574afc14 --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example12-customRowRenderer.js @@ -0,0 +1,128 @@ +const ReactDataGrid = require('react-data-grid'); +const { Row } = ReactDataGrid; +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); + +const RowRenderer = React.createClass({ + propTypes: { + idx: React.PropTypes.string.isRequired + }, + + setScrollLeft(scrollBy) { + // if you want freeze columns to work, you need to make sure you implement this as apass through + this.refs.row.setScrollLeft(scrollBy); + }, + + getRowStyle() { + return { + color: this.getRowBackground() + }; + }, + + getRowBackground() { + return this.props.idx % 2 ? 'green' : 'blue'; + }, + + render: function() { + // here we are just changing the style + // but we could replace this with anything we liked, cards, images, etc + // usually though it will just be a matter of wrapping a div, and then calling back through to the grid + return (
); + } +}); + +const Example = React.createClass({ + getInitialState() { + this.createRows(); + this._columns = [ + { + key: 'id', + name: 'ID', + resizable: true, + width: 40 + }, + { + key: 'task', + name: 'Title', + resizable: true + }, + { + key: 'priority', + name: 'Priority', + resizable: true + }, + { + key: 'issueType', + name: 'Issue Type', + resizable: true + }, + { + key: 'complete', + name: '% Complete', + resizable: true + }, + { + key: 'startDate', + name: 'Start Date', + resizable: true + }, + { + key: 'completeDate', + name: 'Expected Complete', + resizable: true + } + ]; + + return null; + }, + + getRandomDate(start, end) { + return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString(); + }, + + createRows() { + let rows = []; + for (let i = 1; i < 1000; i++) { + rows.push({ + id: i, + task: 'Task ' + i, + complete: Math.min(100, Math.round(Math.random() * 110)), + priority: ['Critical', 'High', 'Medium', 'Low'][Math.floor((Math.random() * 3) + 1)], + issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor((Math.random() * 3) + 1)], + startDate: this.getRandomDate(new Date(2015, 3, 1), new Date()), + completeDate: this.getRandomDate(new Date(), new Date(2016, 0, 1)) + }); + } + + this._rows = rows; + }, + + rowGetter(i) { + return this._rows[i]; + }, + + render() { + return ( + ); + } +}); + +const exampleDescription = ( +
+

This shows how you can easily override the default row renderer

+

Here we are just using that to wrap the default renderer, and then going back into the 'normal' flow, just changing some backgrounds

+

NOTE: if you want to use fixed columns as well, make sure you implement and pass through the call to setScrollLeft

+
); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Overriding the row renderer', + exampleDescription, + examplePath: './scripts/example12-customRowRenderer.js', + examplePlaygroundLink: 'https://jsfiddle.net/f6mbnb8z/2/' +}); diff --git a/packages/react-data-grid-examples/src/scripts/example13-all-features.js b/packages/react-data-grid-examples/src/scripts/example13-all-features.js new file mode 100644 index 0000000000..41e31192a9 --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example13-all-features.js @@ -0,0 +1,267 @@ +const faker = require('faker'); +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); +const { Editors, Toolbar, Formatters } = require('react-data-grid-addons'); +const { AutoComplete: AutoCompleteEditor, DropDownEditor } = Editors; +const { ImageFormatter } = Formatters; + +faker.locale = 'en_GB'; + +const counties = [ + { id: 0, title: 'Bedfordshire'}, + { id: 1, title: 'Berkshire'}, + { id: 2, title: 'Buckinghamshire'}, + { id: 3, title: 'Cambridgeshire'}, + { id: 4, title: 'Cheshire'}, + { id: 5, title: 'Cornwall'}, + { id: 6, title: 'Cumbria, (Cumberland)'}, + { id: 7, title: 'Derbyshire'}, + { id: 8, title: 'Devon'}, + { id: 9, title: 'Dorset'}, + { id: 10, title: 'Durham'}, + { id: 11, title: 'Essex'}, + { id: 12, title: 'Gloucestershire'}, + { id: 13, title: 'Hampshire'}, + { id: 14, title: 'Hertfordshire'}, + { id: 15, title: 'Huntingdonshire'}, + { id: 16, title: 'Kent'}, + { id: 17, title: 'Lancashire'}, + { id: 18, title: 'Leicestershire'}, + { id: 19, title: 'Lincolnshire'}, + { id: 20, title: 'Middlesex'}, + { id: 21, title: 'Norfolk'}, + { id: 22, title: 'Northamptonshire'}, + { id: 23, title: 'Northumberland'}, + { id: 24, title: 'Nottinghamshire'}, + { id: 25, title: 'Northamptonshire'}, + { id: 26, title: 'Oxfordshire'}, + { id: 27, title: 'Northamptonshire'}, + { id: 28, title: 'Rutland'}, + { id: 29, title: 'Shropshire'}, + { id: 30, title: 'Somerset'}, + { id: 31, title: 'Staffordshire'}, + { id: 32, title: 'Suffolk'}, + { id: 33, title: 'Surrey'}, + { id: 34, title: 'Sussex'}, + { id: 35, title: 'Warwickshire'}, + { id: 36, title: 'Westmoreland'}, + { id: 37, title: 'Wiltshire'}, + { id: 38, title: 'Worcestershire'}, + { id: 39, title: 'Yorkshire'} +]; + +const titles = ['Dr.', 'Mr.', 'Mrs.', 'Miss', 'Ms.']; + +const Example = React.createClass({ + getInitialState() { + this._columns = [ + { + key: 'id', + name: 'ID', + width: 80, + resizable: true + }, + { + key: 'avartar', + name: 'Avartar', + width: 60, + formatter: ImageFormatter, + resizable: true, + headerRenderer: + }, + { + key: 'county', + name: 'County', + editor: , + width: 200, + resizable: true + }, + { + key: 'title', + name: 'Title', + editor: , + width: 200, + resizable: true, + events: { + onDoubleClick: function() { + console.log('The user double clicked on title column'); + } + } + }, + { + key: 'firstName', + name: 'First Name', + editable: true, + width: 200, + resizable: true + }, + { + key: 'lastName', + name: 'Last Name', + editable: true, + width: 200, + resizable: true + }, + { + key: 'email', + name: 'Email', + editable: true, + width: 200, + resizable: true + }, + { + key: 'street', + name: 'Street', + editable: true, + width: 200, + resizable: true + }, + { + key: 'zipCode', + name: 'ZipCode', + editable: true, + width: 200, + resizable: true + }, + { + key: 'date', + name: 'Date', + editable: true, + width: 200, + resizable: true + }, + { + key: 'bs', + name: 'bs', + editable: true, + width: 200, + resizable: true + }, + { + key: 'catchPhrase', + name: 'Catch Phrase', + editable: true, + width: 200, + resizable: true + }, + { + key: 'companyName', + name: 'Company Name', + editable: true, + width: 200, + resizable: true + }, + { + key: 'sentence', + name: 'Sentence', + editable: true, + width: 200, + resizable: true + } + ]; + + return { rows: this.createRows(2000) }; + }, + + createRows(numberOfRows) { + let rows = []; + for (let i = 0; i < numberOfRows; i++) { + rows[i] = this.createFakeRowObjectData(i); + } + return rows; + }, + + createFakeRowObjectData(index) { + return { + id: 'id_' + index, + avartar: faker.image.avatar(), + county: faker.address.county(), + email: faker.internet.email(), + title: faker.name.prefix(), + firstName: faker.name.firstName(), + lastName: faker.name.lastName(), + street: faker.address.streetName(), + zipCode: faker.address.zipCode(), + date: faker.date.past().toLocaleDateString(), + bs: faker.company.bs(), + catchPhrase: faker.company.catchPhrase(), + companyName: faker.company.companyName(), + words: faker.lorem.words(), + sentence: faker.lorem.sentence() + }; + }, + + getColumns() { + let clonedColumns = this._columns.slice(); + clonedColumns[2].events = { + onClick: (ev, args) => { + const idx = args.idx; + const rowIdx = args.rowIdx; + this.refs.grid.openCellEditor(rowIdx, idx); + } + }; + + return clonedColumns; + }, + + handleGridRowsUpdated({ fromRow, toRow, updated }) { + let rows = this.state.rows; + + for (let i = fromRow; i <= toRow; i++) { + let rowToUpdate = rows[i]; + let updatedRow = React.addons.update(rowToUpdate, {$merge: updated}); + rows[i] = updatedRow; + } + + this.setState({ rows }); + }, + + handleAddRow({ newRowIndex }) { + const newRow = { + value: newRowIndex, + userStory: '', + developer: '', + epic: '' + }; + + const rows = React.addons.update(this.state.rows, {$push: [newRow]}); + this.setState({ rows }); + }, + + getRowAt(index) { + if (index < 0 || index > this.getSize()) { + return undefined; + } + + return this.state.rows[index]; + }, + + getSize() { + return this.state.rows.length; + }, + + render() { + return ( + } + enableRowSelect={true} + rowHeight={50} + minHeight={600} + rowScrollTimeout={200} />); + } +}); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'All the features grid', + exampleDescription: 'This example demonstrates all the features from the previous examples.', + examplePath: './scripts/example13-all-features.js', + examplePlaygroundLink: undefined +}); diff --git a/packages/react-data-grid-examples/src/scripts/example14-all-features-immutable.js b/packages/react-data-grid-examples/src/scripts/example14-all-features-immutable.js new file mode 100644 index 0000000000..9b011e646f --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example14-all-features-immutable.js @@ -0,0 +1,272 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); +const FakeObjectDataStore = require('./FakeObjectDataStore'); +const Immutable = require('immutable'); +const { + Editors: + { AutoComplete: AutoCompleteEditor, DropDownEditor }, + Toolbar, + Menu: + { ContextMenu, MenuItem }, + Formatters: + { ImageFormatter }} = require('react-data-grid-addons'); +const faker = require('faker'); + +const counties = [ + { id: 0, title: 'Bedfordshire'}, + { id: 1, title: 'Berkshire'}, + { id: 2, title: 'Buckinghamshire'}, + { id: 3, title: 'Cambridgeshire'}, + { id: 4, title: 'Cheshire'}, + { id: 5, title: 'Cornwall'}, + { id: 6, title: 'Cumbria, (Cumberland)'}, + { id: 7, title: 'Derbyshire'}, + { id: 8, title: 'Devon'}, + { id: 9, title: 'Dorset'}, + { id: 10, title: 'Durham'}, + { id: 11, title: 'Essex'}, + { id: 12, title: 'Gloucestershire'}, + { id: 13, title: 'Hampshire'}, + { id: 14, title: 'Hertfordshire'}, + { id: 15, title: 'Huntingdonshire'}, + { id: 16, title: 'Kent'}, + { id: 17, title: 'Lancashire'}, + { id: 18, title: 'Leicestershire'}, + { id: 19, title: 'Lincolnshire'}, + { id: 20, title: 'Middlesex'}, + { id: 21, title: 'Norfolk'}, + { id: 22, title: 'Northamptonshire'}, + { id: 23, title: 'Northumberland'}, + { id: 24, title: 'Nottinghamshire'}, + { id: 25, title: 'Northamptonshire'}, + { id: 26, title: 'Oxfordshire'}, + { id: 27, title: 'Northamptonshire'}, + { id: 28, title: 'Rutland'}, + { id: 29, title: 'Shropshire'}, + { id: 30, title: 'Somerset'}, + { id: 31, title: 'Staffordshire'}, + { id: 32, title: 'Suffolk'}, + { id: 33, title: 'Surrey'}, + { id: 34, title: 'Sussex'}, + { id: 35, title: 'Warwickshire'}, + { id: 36, title: 'Westmoreland'}, + { id: 37, title: 'Wiltshire'}, + { id: 38, title: 'Worcestershire'}, + { id: 39, title: 'Yorkshire'} +]; + +const titles = ['Dr.', 'Mr.', 'Mrs.', 'Miss', 'Ms.']; + +const columns = [ + { + key: 'id', + name: 'ID', + width: 80, + resizable: true + }, + { + key: 'avartar', + name: 'Avartar', + width: 60, + formatter: ImageFormatter, + resizable: true, + headerRenderer: + }, + { + key: 'county', + name: 'County', + editor: , + width: 200, + resizable: true + }, + { + key: 'title', + name: 'Title', + editor: , + width: 200, + resizable: true, + events: { + onDoubleClick: function() { + console.log('The user double clicked on title column'); + } + } + }, + { + key: 'firstName', + name: 'First Name', + editable: true, + width: 200, + resizable: true + }, + { + key: 'lastName', + name: 'Last Name', + editable: true, + width: 200, + resizable: true + }, + { + key: 'email', + name: 'Email', + editable: true, + width: 200, + resizable: true + }, + { + key: 'street', + name: 'Street', + editable: true, + width: 200, + resizable: true + }, + { + key: 'zipCode', + name: 'ZipCode', + editable: true, + width: 200, + resizable: true + }, + { + key: 'date', + name: 'Date', + editable: true, + width: 200, + resizable: true + }, + { + key: 'bs', + name: 'bs', + editable: true, + width: 200, + resizable: true + }, + { + key: 'catchPhrase', + name: 'Catch Phrase', + editable: true, + width: 200, + resizable: true + }, + { + key: 'companyName', + name: 'Company Name', + editable: true, + width: 200, + resizable: true + }, + { + key: 'sentence', + name: 'Sentence', + editable: true, + width: 200, + resizable: true + } +]; + +const MyContextMenu = React.createClass({ + propTypes: { + rowIdx: React.PropTypes.string.isRequired, + idx: React.PropTypes.string.isRequired + }, + + onItemClick() { + }, + + render() { + return ( + + {this.props.rowIdx},{this.props.idx} + + ); + } +}); + +const Component = React.createClass({ + propTypes: { + handleCellDrag: React.PropTypes.func.isRequired + }, + + getInitialState() { + const fakeRows = FakeObjectDataStore.createRows(100); + return { rows: Immutable.fromJS(fakeRows)}; + }, + + handleRowUpdated({ rowIdx, updated }) { + // merge the updated row values with the existing row + const rows = this.state.rows.update(rowIdx, r => r.merge(updated)); + + this.setState({ rows }); + }, + + handleCellDrag(e) { + let rows = this.state.rows; + for (let i = e.fromRow; i <= e.toRow; i++) { + rows = rows.update(i, r => r.set(e.cellKey, e.value)); + } + + if (this.props.handleCellDrag) { + this.props.handleCellDrag(e); + } + + this.setState({ rows }); + }, + + handleCellCopyPaste(e) { + let rows = this.state.rows.update(e.toRow, r => { + return r.set(e.cellKey, e.value); + }); + this.setState({ rows }); + }, + + handleAddRow({ newRowIndex }) { + const newRow = { + id: newRowIndex, + userStory: '', + developer: '', + epic: '' + }; + + let rows = this.state.rows.push(newRow); + this.setState({ rows }); + }, + + getRowAt(index) { + if (index < 0 || index > this.getSize()) { + return undefined; + } + return this.state.rows.get(index); + }, + + getSize() { + return this.state.rows.size; + }, + + render() { + return ( + } + ref="reactDataGrid" + enableCellSelect={true} + columns={columns} + rowGetter={this.getRowAt} + rowsCount={this.getSize()} + onRowUpdated={this.handleRowUpdated} + onCellsDragged={this.handleCellDrag} + onCellCopyPaste={this.handleCellCopyPaste} + toolbar={{}} numberOfRows={this.getSize()}/>} + rowHeight={50} + minHeight={600} /> + ); + } +}); + +module.exports = exampleWrapper({ + WrappedComponent: Component, + exampleName: 'All the features grid with immutable data', + exampleDescription: 'This example demonstrates all the features from the previous examples using immutable.', + examplePath: './scripts/example14-all-features-immutable.js', + examplePlaygroundLink: undefined +}); + +module.exports.Component = Component; diff --git a/packages/react-data-grid-examples/src/scripts/example15-empty-rows.js b/packages/react-data-grid-examples/src/scripts/example15-empty-rows.js new file mode 100644 index 0000000000..c7b4b4a73c --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example15-empty-rows.js @@ -0,0 +1,43 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); + +const EmptyRowsView = React.createClass({ + render() { + return (
Nothing to show
); + } +}); + +const Example = React.createClass({ + getInitialState() { + this._rows = []; + this._columns = [ + { key: 'id', name: 'ID' }, + { key: 'title', name: 'Title' }, + { key: 'count', name: 'Count' }]; + + return null; + }, + + rowGetter() { + return _rows[i]; + }, + + render() { + return ( + ); + } +}); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Empty rows grid', + exampleDescription: 'A grid with a empty rows view', + examplePath: './scripts/example15-empty-rows.js', + examplePlaygroundLink: 'https://jsfiddle.net/f6mbnb8z/3/' +}); diff --git a/packages/react-data-grid-examples/src/scripts/example16-cell-drag-down.js b/packages/react-data-grid-examples/src/scripts/example16-cell-drag-down.js new file mode 100644 index 0000000000..3198cc22ec --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example16-cell-drag-down.js @@ -0,0 +1,104 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); + +const Example = React.createClass({ + getInitialState() { + this._columns = [ + { + key: 'id', + name: 'ID', + width: 80 + }, + { + key: 'task', + name: 'Title', + editable: true + }, + { + key: 'priority', + name: 'Priority', + editable: true + }, + { + key: 'issueType', + name: 'Issue Type', + editable: true + } + ]; + + return { rows: this.createRows(1000) }; + }, + + createRows(numberOfRows) { + let rows = []; + for (let i = 1; i < numberOfRows; i++) { + rows.push({ + id: i, + task: 'Task ' + i, + complete: Math.min(100, Math.round(Math.random() * 110)), + priority: ['Critical', 'High', 'Medium', 'Low'][Math.floor((Math.random() * 3) + 1)], + issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor((Math.random() * 3) + 1)] + }); + } + return rows; + }, + + rowGetter(i) { + return this.state.rows[i]; + }, + + handleRowUpdated({ rowIdx, updated }) { + // merge updated row with current row and rerender by setting state + const rows = this.state.rows; + Object.assign(rows[rowIdx], updated); + this.setState({rows: rows}); + }, + + handleCellDrag({ fromRow, toRow, cellKey, value }) { + let rows = this.state.rows.slice(0); + for (let i = fromRow; i <= toRow; i++) { + let rowToUpdate = rows[i]; + rowToUpdate[cellKey] = value; + } + this.setState({ rows }); + }, + + handleDragHandleDoubleClick({ idx, rowIdx, rowData }) { + let rows = this.state.rows.map(r => Object.assign({}, r)); + const column = this._columns[idx]; + + for (let i = rowIdx; i <= rows.length - 1; i++) { + let rowToUpdate = rows[i]; + rowToUpdate[column.key] = rowData[column.key]; + } + this.setState({ rows }); + }, + + render() { + return ( + ); + } +}); + +const exampleDescription = ( +
+

This example demonstrates how you can easily update multiple cells by dragging from the drag handle of an editable cell.

+

Alternatively by double clicking on the drag handle, you can update all the cells underneath the active cell.

+
); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Cell Drag Down Example', + exampleDescription, + examplePath: './scripts/example16-cell-drag-down.js', + examplePlaygroundLink: 'https://jsfiddle.net/f6mbnb8z/4/' +}); diff --git a/packages/react-data-grid-examples/src/scripts/example16-filterable-sortable-grid.js b/packages/react-data-grid-examples/src/scripts/example16-filterable-sortable-grid.js new file mode 100644 index 0000000000..485b11e522 --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example16-filterable-sortable-grid.js @@ -0,0 +1,129 @@ +const ReactDataGrid = require('react-data-grid'); +const { Toolbar, Data: { Selectors } } = require('react-data-grid-addons'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); + +const Example = React.createClass({ + getInitialState() { + this._columns = [ + { + key: 'id', + name: 'ID', + width: 80 + }, + { + key: 'task', + name: 'Title', + filterable: true + }, + { + key: 'priority', + name: 'Priority', + filterable: true + }, + { + key: 'issueType', + name: 'Issue Type', + filterable: true + }, + { + key: 'complete', + name: '% Complete', + filterable: true + }, + { + key: 'startDate', + name: 'Start Date', + filterable: true + }, + { + key: 'completeDate', + name: 'Expected Complete', + filterable: true + } + ]; + + return { rows: this.createRows(1000), filters: {}, sortColumn: null, sortDirection: null }; + }, + + getRandomDate(start, end) { + return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString(); + }, + + createRows(numberOfRows) { + let rows = []; + for (let i = 1; i < numberOfRows; i++) { + rows.push({ + id: i, + task: 'Task ' + i, + complete: Math.min(100, Math.round(Math.random() * 110)), + priority: ['Critical', 'High', 'Medium', 'Low'][Math.floor((Math.random() * 3) + 1)], + issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor((Math.random() * 3) + 1)], + startDate: this.getRandomDate(new Date(2015, 3, 1), new Date()), + completeDate: this.getRandomDate(new Date(), new Date(2016, 0, 1)) + }); + } + return rows; + }, + + getRows() { + return Selectors.getRows(this.state); + }, + + getSize() { + return this.getRows().length; + }, + + rowGetter(rowIdx) { + const rows = this.getRows(); + return rows[rowIdx]; + }, + + handleGridSort(sortColumn, sortDirection) { + this.setState({ sortColumn: sortColumn, sortDirection: sortDirection }); + }, + + handleFilterChange(filter) { + let newFilters = Object.assign({}, this.state.filters); + if (filter.filterTerm) { + newFilters[filter.column.key] = filter; + } else { + delete newFilters[filter.column.key]; + } + + this.setState({ filters: newFilters }); + }, + + onClearFilters() { + this.setState({ filters: {} }); + }, + + render() { + return ( + } + onAddFilter={this.handleFilterChange} + onClearFilters={this.onClearFilters} />); + } +}); + +const exampleDescription = ( +
+

While ReactDataGrid does not provide the ability to sort or filter directly, it does provide hooks that allow you to provide your own sort and filter function. This is done via the onGridSort and onAddFilter props. To enable sorting for a given column, set column.sortable = true for that column, to enable filtering for a given column, set column.filterable = true for that column. Now when the header cell is clicked for that column, onGridSort will be triggered passing the column name and the sort direction, when the filterable cell has a new filter value entered for that column, onAddFilter will be triggered passing the filter key and value. +

+
+); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Filterable Sortable Columns Example', + exampleDescription, + examplePath: './scripts/example16-filterable-sortable-grid.js', + examplePlaygroundLink: undefined +}); diff --git a/packages/react-data-grid-examples/src/scripts/example16-row-select.js b/packages/react-data-grid-examples/src/scripts/example16-row-select.js new file mode 100644 index 0000000000..f9812ee627 --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example16-row-select.js @@ -0,0 +1,101 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); + +const Example = React.createClass({ + getInitialState() { + this._columns = [ + { + key: 'id', + name: 'ID' + }, + { + key: 'title', + name: 'Title' + }, + { + key: 'count', + name: 'Count' + } + ]; + + let rows = []; + for (let i = 1; i < 1000; i++) { + rows.push({ + id: i, + title: 'Title ' + i, + count: i * 1000 + }); + } + return { rows, selectedIndexes: [] }; + }, + + rowGetter(i) { + return this.state.rows[i]; + }, + + onRowsSelected(rows) { + this.setState({selectedIndexes: this.state.selectedIndexes.concat(rows.map(r => r.rowIdx))}); + }, + + onRowsDeselected(rows) { + let rowIndexes = rows.map(r => r.rowIdx); + this.setState({selectedIndexes: this.state.selectedIndexes.filter(i => rowIndexes.indexOf(i) === -1 )}); + }, + + render() { + const rowText = this.state.selectedIndexes.length === 1 ? 'row' : 'rows'; + return ( +
+ {this.state.selectedIndexes.length} {rowText} selected + +
); + } +}); + +const exampleDescription = ( +
+

Row selection is enabled via the rowSelection prop (object). The following keys control behaviour:

+

selectBy

+

+ This allows rows to be selected programatically. The options are:
+ indexes - to select rows by index.
+ keys - to select rows by specified key and values.
+ isSelectedKey - to select rows by specified key (based on value being truthy or falsy). +

+

onRowsSelected/onRowsDeselected

+

+ When rows are selected or de-selected, onRowsSelected or onRowsDeselected functions will be called (set as props) with an array of .
+ This allows for single or multiple selection to be implemented as desired, by either appending to or replacing the list of selected items. +

+

showCheckbox

+

Allows the row selection checkbox to be hidden (shown by default). Useful for selecting rows programatically and controlling selection via theonRowClick event.

+

enableShiftSelect

+

+ Allows a continuous range of rows to be selected by holding the shift key when clicking the row selection checkbox. +

+

Note: These props supercede the existing enableRowSelect and onRowUpdated props which will be removed in a later release.

+
+); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Row Selection', + exampleDescription, + examplePath: './scripts/example16-row-select.js', + examplePlaygroundLink: 'https://jsfiddle.net/f6mbnb8z/5/' +}); diff --git a/packages/react-data-grid-examples/src/scripts/example17-grid-events.js b/packages/react-data-grid-examples/src/scripts/example17-grid-events.js new file mode 100644 index 0000000000..e03991c85f --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example17-grid-events.js @@ -0,0 +1,96 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); + +const Example = React.createClass({ + getInitialState() { + this._columns = [ + { + key: 'id', + name: 'ID' + }, + { + key: 'title', + name: 'Title' + }, + { + key: 'count', + name: 'Count' + } + ]; + + return { rows: this.createRows(1000) }; + }, + + createRows() { + let rows = []; + for (let i = 1; i < 1000; i++) { + rows.push({ + id: i, + title: 'Title ' + i, + count: i * 1000, + isSelected: false + }); + } + + return rows; + }, + + rowGetter(i) { + return this.state.rows[i]; + }, + + onRowClick(rowIdx, row) { + let rows = this.state.rows; + rows[rowIdx] = Object.assign({}, row, {isSelected: !row.isSelected}); + this.setState({ rows }); + }, + + onKeyDown(e) { + if (e.ctrlKey && e.keyCode === 65) { + e.preventDefault(); + + let rows = []; + this.state.rows.forEach((r) =>{ + rows.push(Object.assign({}, r, {isSelected: true})); + }); + + this.setState({ rows }); + } + }, + + render() { + return ( + ); + } +}); + +const exampleDescription = ( +
+

onRowClick

+

Called when a row cell is clicked. Arguments are rowIndex and row.

+

onGridKeyUp/onGridKeyDown

+

Called when a key is pressed or released on the Grid viewport. Argument is a React SyntheticEvent.

+
+); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Grid Events', + exampleDescription, + examplePath: './scripts/example17-grid-events.js', + examplePlaygroundLink: 'https://jsfiddle.net/f6mbnb8z/6/' +}); diff --git a/packages/react-data-grid-examples/src/scripts/example18-context-menu.js b/packages/react-data-grid-examples/src/scripts/example18-context-menu.js new file mode 100644 index 0000000000..753a163600 --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example18-context-menu.js @@ -0,0 +1,127 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); +const { Menu: { ContextMenu, MenuItem, SubMenu } } = require('react-data-grid-addons'); + +const Example = React.createClass({ + getInitialState() { + this._columns = [ + { key: 'id', name: 'ID' }, + { key: 'title', name: 'Title' }, + { key: 'count', name: 'Count' } + ]; + + let rows = []; + for (let i = 1; i < 1000; i++) { + rows.push({ + id: i, + title: 'Title ' + i, + count: i * 1000 + }); + } + + return { rows }; + }, + + rowGetter(rowIdx) { + return this.state.rows[rowIdx]; + }, + + deleteRow(e, { rowIdx }) { + this.state.rows.splice(rowIdx, 1); + this.setState({rows: this.state.rows}); + }, + + insertRowAbove(e, { rowIdx }) { + this.insertRow(rowIdx); + }, + + insertRowBelow(e, { rowIdx }) { + this.insertRow(rowIdx + 1); + }, + + insertRow(rowIdx) { + const newRow = { + id: 0, + title: 'New at ' + (rowIdx + 1), + count: 0 + }; + + let rows = [...this.state.rows]; + rows.splice(rowIdx, 0, newRow); + + this.setState({ rows }); + }, + + render() { + return ( + } + columns={this._columns} + rowGetter={this.rowGetter} + rowsCount={this.state.rows.length} + minHeight={500} /> + ); + } +}); + +// Create the context menu. +// Use this.props.rowIdx and this.props.idx to get the row/column where the menu is shown. +const MyContextMenu = React.createClass({ + propTypes: { + onRowDelete: React.PropTypes.func.isRequired, + onRowInsertAbove: React.PropTypes.func.isRequired, + onRowInsertBelow: React.PropTypes.func.isRequired, + rowIdx: React.PropTypes.string.isRequired, + idx: React.PropTypes.string.isRequired + }, + + onRowDelete(e, data) { + if (typeof(this.props.onRowDelete) === 'function') { + this.props.onRowDelete(e, data); + } + }, + + onRowInsertAbove(e, data) { + if (typeof(this.props.onRowInsertAbove) === 'function') { + this.props.onRowInsertAbove(e, data); + } + }, + + onRowInsertBelow(e, data) { + if (typeof(this.props.onRowInsertBelow) === 'function') { + this.props.onRowInsertBelow(e, data); + } + }, + + render() { + return ( + + Delete Row + + Above + Below + + + ); + } +}); + +const exampleDescription = ( +
+

+ To use a context menu on the grid, create a ReactDataGridPlugins.Menu.ContextMenu and then set the contextMenu prop of the grid to this context menu. + Please note you must include the react-data-grid.ui-plugins.js package to create the context menu. +

+

If you need to know the row and column index where the context menu is shown, use the context menu's rowIdx and idx props.

+

Credits: the context menu we use is react-contextmenu by Vivek Kumar Bansal.

+
+); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Context Menu Example', + exampleDescription, + examplePath: './scripts/example18-context-menu.js', + examplePlaygroundLink: undefined +}); diff --git a/packages/react-data-grid-examples/src/scripts/example19-column-events.js b/packages/react-data-grid-examples/src/scripts/example19-column-events.js new file mode 100644 index 0000000000..881184be2d --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example19-column-events.js @@ -0,0 +1,125 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); +const { Editors: { DropDownEditor } } = require('react-data-grid-addons'); + +const titles = ['Dr.', 'Mr.', 'Mrs.', 'Miss', 'Ms.']; + +const Example = React.createClass({ + getInitialState: function() { + this._columns = [ + { + key: 'id', + name: 'ID', + resizable: true + }, + { + key: 'title', + name: 'Title', + editor: , + resizable: true, + events: { + onDoubleClick: function(ev, args) { + console.log('The user entered edit mode on title column with rowId: ' + args.rowIdx); + } + } + }, + { + key: 'name', + name: 'Name', + editable: true, + resizable: true, + events: { + onKeyDown: function(ev) { + if (ev.key === 'Enter') { + alert('Thanks for commiting a result with Enter'); + } + } + } + }, + { + key: 'age', + name: 'Age', + editable: true, + resizable: true + } + ]; + + let rows = []; + for (let i = 1; i < 1000; i++) { + rows.push({ + id: i, + title: titles[Math.floor((Math.random() * 4))], + name: "Name " + i, + age: Math.floor((Math.random() * 100) + 1) + }); + } + + return { rows }; + }, + + rowGetter: function(rowIdx) { + return this.state.rows[rowIdx]; + }, + + handleGridRowsUpdated({ fromRow, toRow, updated }) { + let rows = this.state.rows.slice(); + + for (let i = fromRow; i <= toRow; i++) { + let rowToUpdate = rows[i]; + const updatedRow = React.addons.update(rowToUpdate, {$merge: updated}); + rows[i] = updatedRow; + } + + this.setState({rows: rows}); + }, + + cellEditWithOneClick: function(ev, { idx, rowIdx }) { + this.refs.grid.openCellEditor(rowIdx, idx); + }, + + getColumns: function() { + let clonedColumns = this._columns.slice(); + clonedColumns[1].events = { + onClick: this.cellEditWithOneClick + }; + clonedColumns[3].events = { + onClick: this.cellEditWithOneClick + }; + + return clonedColumns; + }, + + render: function() { + return ( + + ); + } +}); + +const exampleDescription = ( +
+

+ By adding an event object with callbacks for the native react events you can bind events to a specific column. That will not break the default behaviour of the grid + and will run only for the specified column. +

+

+ Every event callback must respect this standard in order to work correctly: function onXxx(ev :SyntheticEvent, (rowIdx, idx, column): args) +

+
+); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Column Events Example', + exampleDescription, + examplePath: './scripts/example19-column-events.js', + examplePlaygroundLink: undefined +}); diff --git a/packages/react-data-grid-examples/src/scripts/example20-cell-navigation.js b/packages/react-data-grid-examples/src/scripts/example20-cell-navigation.js new file mode 100644 index 0000000000..73172ff6b0 --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example20-cell-navigation.js @@ -0,0 +1,100 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); + +const Example = React.createClass({ + getInitialState() { + this.createRows(); + this._columns = [ + { + key: 'id', + name: 'ID', + locked: true + }, + { + key: 'task', + name: 'Title', + width: 200 + }, + { + key: 'priority', + name: 'Priority', + width: 200 + }, + { + key: 'issueType', + name: 'Issue Type', + width: 200 + }, + { + key: 'complete', + name: '% Complete', + width: 200 + }, + { + key: 'startDate', + name: 'Start Date', + width: 200 + }, + { + key: 'completeDate', + name: 'Expected Complete', + width: 200 + } + ]; + + return null; + }, + + getRandomDate(start, end) { + return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString(); + }, + + createRows() { + let rows = []; + for (let i = 1; i < 1000; i++) { + rows.push({ + id: i, + task: 'Task ' + i, + complete: Math.min(100, Math.round(Math.random() * 110)), + priority: ['Critical', 'High', 'Medium', 'Low'][Math.floor((Math.random() * 3) + 1)], + issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor((Math.random() * 3) + 1)], + startDate: this.getRandomDate(new Date(2015, 3, 1), new Date()), + completeDate: this.getRandomDate(new Date(), new Date(2016, 0, 1)) + }); + } + + this._rows = rows; + }, + + rowGetter(i) { + return this._rows[i]; + }, + + render() { + return ( + ); + } +}); + +const exampleDescription = ( +
+

By setting cellNavigationMode = 'loopOverRow', you enable looping round the same row when navigation goes beyond the first/last cells.

+

Setting cellNavigationMode = 'changeRow', would make the selection jump to the next/previous row.

+

The default behavior is to do nothing.

+
+); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Column Navigation Modes Example', + exampleDescription, + examplePath: './scripts/example20-cell-navigation.js', + examplePlaygroundLink: 'https://jsfiddle.net/f6mbnb8z/7/' +}); diff --git a/packages/react-data-grid-examples/src/scripts/example21-cell-selection-events.js b/packages/react-data-grid-examples/src/scripts/example21-cell-selection-events.js new file mode 100644 index 0000000000..9adc16c6b6 --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example21-cell-selection-events.js @@ -0,0 +1,80 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); + +const Example = React.createClass({ + getInitialState() { + this._columns = [ + { key: 'id', name: 'ID' }, + { key: 'title', name: 'Title', editable: true }, + { key: 'count', name: 'Count' } + ]; + + let rows = []; + for (let i = 1; i < 1000; i++) { + rows.push({ + id: i, + title: 'Title ' + i, + count: i * 1000, + active: i % 2 + }); + } + + this._rows = rows; + + return { selectedRows: [] }; + }, + + rowGetter(index) { + return this._rows[index]; + }, + + onRowSelect(rows) { + this.setState({ selectedRows: rows }); + }, + + onCellSelected({ rowIdx, idx }) { + this.refs.grid.openCellEditor(rowIdx, idx); + }, + + onCellDeSelected({ rowIdx, idx }) { + if (idx === 2) { + alert('the editor for cell (' + rowIdx + ',' + idx + ') should have just closed'); + } + }, + + render() { + const rowText = this.state.selectedRows.length === 1 ? 'row' : 'rows'; + return ( +
+ {this.state.selectedRows.length} {rowText} selected + +
); + } +}); + +const exampleDescription = ( +
+

Define onCellSelected and onCellDeSelected callback handlers and pass them as props to enable events upon cell selection/deselection.

+

if passed, onCellSelected will be triggered each time a cell is selected with the cell coordinates. Similarly, onCellDeSelected will be triggered when a cell is deselected.

+
+); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Cell selection/delesection events', + exampleDescription, + examplePath: './scripts/example21-cell-selection-events.js', + examplePlaygroundLink: 'https://jsfiddle.net/f6mbnb8z/8/' +}); diff --git a/packages/react-data-grid-examples/src/scripts/example21-grouping.js b/packages/react-data-grid-examples/src/scripts/example21-grouping.js new file mode 100644 index 0000000000..8da474aa63 --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example21-grouping.js @@ -0,0 +1,218 @@ +const faker = require('faker'); +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); +const { + ToolsPanel: { AdvancedToolbar: Toolbar, GroupedColumnsPanel }, + Data: { Selectors }, + Draggable: { Container: DraggableContainer }, + Formatters: { ImageFormatter } +} = require('react-data-grid-addons'); + +faker.locale = 'en_GB'; + +const createFakeRowObjectData = (index) => ({ + id: 'id_' + index, + avartar: faker.image.avatar(), + county: faker.address.county(), + email: faker.internet.email(), + title: faker.name.prefix(), + firstName: faker.name.firstName(), + lastName: faker.name.lastName(), + street: faker.address.streetName(), + zipCode: faker.address.zipCode(), + date: faker.date.past().toLocaleDateString(), + bs: faker.company.bs(), + catchPhrase: faker.company.catchPhrase(), + companyName: faker.company.companyName(), + words: faker.lorem.words(), + sentence: faker.lorem.sentence() +}); + +const createRows = (numberOfRows) => { + let rows = []; + for (let i = 0; i < numberOfRows; i++) { + rows[i] = createFakeRowObjectData(i); + } + return rows; +}; + +const columns = [ + { + key: 'id', + name: 'ID', + width: 80, + resizable: true + }, + { + key: 'avartar', + name: 'Avartar', + width: 60, + formatter: ImageFormatter, + draggable: true + }, + { + key: 'county', + name: 'County', + width: 200, + draggable: true + }, + { + key: 'title', + name: 'Title', + width: 200, + draggable: true + }, + { + key: 'firstName', + name: 'First Name', + width: 200, + draggable: true + }, + { + key: 'lastName', + name: 'Last Name', + width: 200, + draggable: true + }, + { + key: 'email', + name: 'Email', + width: 200, + draggable: true + }, + { + key: 'street', + name: 'Street', + width: 200, + draggable: true + }, + { + key: 'zipCode', + name: 'ZipCode', + width: 200, + draggable: true + }, + { + key: 'date', + name: 'Date', + width: 200, + draggable: true + }, + { + key: 'bs', + name: 'bs', + draggable: true, + width: 200 + }, + { + key: 'catchPhrase', + name: 'Catch Phrase', + width: 200, + draggable: true + }, + { + key: 'companyName', + name: 'Company Name', + width: 200, + draggable: true + }, + { + key: 'sentence', + name: 'Sentence', + width: 200, + draggable: true + } +]; + +const CustomToolbar = React.createClass({ + propTypes: { + groupBy: React.PropTypes.array.isRequired, + onColumnGroupAdded: React.PropTypes.func.isRequired, + onColumnGroupDeleted: React.PropTypes.func.isRequired + }, + + render() { + return ( + + ); + } +}); + +const Example = React.createClass({ + getInitialState() { + let fakeRows = createRows(2000); + return {rows: fakeRows, groupBy: [], expandedRows: {}}; + }, + + getRows() { + let rows = Selectors.getRows(this.state); + return rows; + }, + + getRowAt(index) { + let rows = this.getRows(); + return rows[index]; + }, + + getSize() { + return this.getRows().length; + }, + + onColumnGroupAdded(colName) { + let columnGroups = this.state.groupBy.slice(0); + if (columnGroups.indexOf(colName) === -1) { + columnGroups.push(colName); + } + this.setState({groupBy: columnGroups}); + }, + + onColumnGroupDeleted(name) { + let columnGroups = this.state.groupBy.filter(function(g){return g !== name}); + this.setState({groupBy: columnGroups}); + }, + + onRowExpandToggle({ columnGroupName, name, shouldExpand }) { + let expandedRows = Object.assign({}, this.state.expandedRows); + expandedRows[columnGroupName] = Object.assign({}, expandedRows[columnGroupName]); + expandedRows[columnGroupName][name] = {isExpanded: shouldExpand}; + this.setState({expandedRows: expandedRows}); + }, + + render() { + return ( + + } + rowHeight={50} + minHeight={600} + /> + + ); + } +}); + +const exampleDescription = ( +
+

This example demonstrates how to group rows by column name. Drag a column header to group rows by that column.

+

To expand and close a row group, you can use either the mouse or keyboard

+

Press Enter or Left Arrow or Right Arrow to toggle whether a row is expanded or not

+

This feature also supports a custom Renderer, by using a renderer you can render some fancy custom html in the row gorup.

+

To use a renderer just inject your component with rowGroupRenderer prop in the grid.

+
+); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Row Grouping Example', + exampleDescription, + examplePath: './scripts/example21-grouping.js', + examplePlaygroundLink: undefined +}); diff --git a/packages/react-data-grid-examples/src/scripts/example22-custom-filters.js b/packages/react-data-grid-examples/src/scripts/example22-custom-filters.js new file mode 100644 index 0000000000..78ac2749ca --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example22-custom-filters.js @@ -0,0 +1,127 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); +const { Toolbar, Filters: { NumericFilter, AutoCompleteFilter }, Data: { Selectors } } = require('react-data-grid-addons'); + +const Example = React.createClass({ + getInitialState() { + this._columns = [ + { + key: 'id', + name: 'ID', + width: 120, + filterable: true, + filterRenderer: NumericFilter + }, + { + key: 'task', + name: 'Title', + filterable: true + }, + { + key: 'priority', + name: 'Priority', + filterable: true, + filterRenderer: AutoCompleteFilter + }, + { + key: 'issueType', + name: 'Issue Type', + filterable: true, + filterRenderer: AutoCompleteFilter + }, + { + key: 'complete', + name: '% Complete', + filterable: true, + filterRenderer: NumericFilter + }, + { + key: 'startDate', + name: 'Start Date', + filterable: true + }, + { + key: 'completeDate', + name: 'Expected Complete', + filterable: true + } + ]; + + return { rows: this.createRows(1000), filters: {} }; + }, + + getRandomDate(start, end) { + return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString(); + }, + + createRows(numberOfRows) { + let rows = []; + for (let i = 1; i < numberOfRows; i++) { + rows.push({ + id: i, + task: 'Task ' + i, + complete: Math.min(100, Math.round(Math.random() * 110)), + priority: ['Critical', 'High', 'Medium', 'Low'][Math.floor((Math.random() * 3) + 1)], + issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor((Math.random() * 3) + 1)], + startDate: this.getRandomDate(new Date(2015, 3, 1), new Date()), + completeDate: this.getRandomDate(new Date(), new Date(2016, 0, 1)) + }); + } + return rows; + }, + + rowGetter(index) { + return Selectors.getRows(this.state)[index]; + }, + + rowsCount() { + return Selectors.getRows(this.state).length; + }, + + handleFilterChange(filter) { + let newFilters = Object.assign({}, this.state.filters); + if (filter.filterTerm) { + newFilters[filter.column.key] = filter; + } else { + delete newFilters[filter.column.key]; + } + this.setState({ filters: newFilters }); + }, + + getValidFilterValues(columnId) { + let values = this.state.rows.map(r => r[columnId]); + return values.filter((item, i, a) => { return i === a.indexOf(item); }); + }, + + handleOnClearFilters() { + this.setState({ filters: {} }); + }, + + render() { + return ( + } + onAddFilter={this.handleFilterChange} + getValidFilterValues={this.getValidFilterValues} + onClearFilters={this.handleOnClearFilters} />); + } +}); + +const exampleDescription = ( +

Using the same approach as regular Filters setting column.filterable = true, Custom Filters can be implemented and applied as below. Add the attribute code.filterRenderer = NumberFilterableHeaderCell to the column object will + allow having a Numeric Filter.

+); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Custom Filters Example', + exampleDescription, + examplePath: './scripts/example22-custom-filters.js', + examplePlaygroundLink: undefined +}); diff --git a/packages/react-data-grid-examples/src/scripts/example23-immutable-data-grouping.js b/packages/react-data-grid-examples/src/scripts/example23-immutable-data-grouping.js new file mode 100644 index 0000000000..8a987e2618 --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example23-immutable-data-grouping.js @@ -0,0 +1,112 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); +const faker = require('faker'); +const Immutable = require('immutable'); +const { + ToolsPanel: { AdvancedToolbar: Toolbar, GroupedColumnsPanel }, + Data: { Selectors }, + Draggable: { Container: DraggableContainer } + } = require('react-data-grid-addons'); + +faker.locale = 'en_GB'; + +let _rows = []; +let _cols = []; + +for (let j = 0; j < 50; j++) { + _cols.push({key: 'col' + j, name: 'col' + j, width: 150, editable: true, draggable: true}); +} + +for (let rowIdx = 1; rowIdx < 100; rowIdx++) { + let row = {}; + _cols.forEach((c, colIdx) => { + row[c.key] = '(' + colIdx + ',' + rowIdx + ')'; + }); + _rows.push(row); +} + +const CustomToolbar = React.createClass({ + propTypes: { + groupBy: React.PropTypes.array.isRequired, + onColumnGroupAdded: React.PropTypes.func.isRequired, + onColumnGroupDeleted: React.PropTypes.func.isRequired + }, + + render() { + return ( + + + ); + } +}); + +const Example = React.createClass({ + getInitialState() { + return { + rows: new Immutable.fromJS(_rows), + cols: new Immutable.List(_cols), + groupBy: [], + expandedRows: {} + }; + }, + + getRows() { + let rows = Selectors.getRows(this.state); + return rows; + }, + + getRowAt(index) { + let rows = this.getRows(); + return rows.get(index); + }, + + getSize() { + return this.getRows().size; + }, + + onColumnGroupAdded(colName) { + let columnGroups = this.state.groupBy.slice(0); + if (columnGroups.indexOf(colName) === -1) { + columnGroups.push(colName); + } + this.setState({ groupBy: columnGroups }); + }, + + onColumnGroupDeleted(name) { + let columnGroups = this.state.groupBy.filter(function(g) {return g !== name;}); + this.setState({ groupBy: columnGroups }); + }, + + onRowExpandToggle(args) { + let expandedRows = Object.assign({}, this.state.expandedRows); + expandedRows[args.columnGroupName] = Object.assign({}, expandedRows[args.columnGroupName]); + expandedRows[args.columnGroupName][args.name] = { isExpanded: args.shouldExpand }; + this.setState({expandedRows: expandedRows}); + }, + + render() { + return ( + + } + rowHeight={50} + minHeight={600} + /> + + ); + } +}); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Row Grouping (immutable collection input) Example', + examplePath: './scripts/example23-immutable-data-grouping.js' +}); diff --git a/packages/react-data-grid-examples/src/scripts/example23-row-reordering.js b/packages/react-data-grid-examples/src/scripts/example23-row-reordering.js new file mode 100644 index 0000000000..90c6372447 --- /dev/null +++ b/packages/react-data-grid-examples/src/scripts/example23-row-reordering.js @@ -0,0 +1,124 @@ +const ReactDataGrid = require('react-data-grid'); +const exampleWrapper = require('../components/exampleWrapper'); +const React = require('react'); +const { + Draggable: { Container: DraggableContainer, RowActionsCell, DropTargetRowContainer }, + Data: { Selectors } +} = require('react-data-grid-addons'); + +const RowRenderer = DropTargetRowContainer(ReactDataGrid.Row); + +const Example = React.createClass({ + propTypes: { + rowKey: React.PropTypes.string.isRequired + }, + + getInitialState() { + this._columns = [ + { + key: 'id', + name: 'ID' + }, + { + key: 'task', + name: 'Title' + }, + { + key: 'priority', + name: 'Priority' + }, + { + key: 'issueType', + name: 'Issue Type' + } + ]; + + return { rows: this.createRows(1000), selectedIds: [1, 2] }; + }, + + getDefaultProps() { + return { rowKey: 'id' }; + }, + + getRandomDate(start, end) { + return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString(); + }, + + createRows(numberOfRows) { + let rows = []; + for (let i = 1; i < numberOfRows; i++) { + rows.push({ + id: i, + task: 'Task ' + i, + complete: Math.min(100, Math.round(Math.random() * 110)), + priority: ['Critical', 'High', 'Medium', 'Low'][Math.floor((Math.random() * 3) + 1)], + issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor((Math.random() * 3) + 1)], + startDate: this.getRandomDate(new Date(2015, 3, 1), new Date()), + completeDate: this.getRandomDate(new Date(), new Date(2016, 0, 1)) + }); + } + return rows; + }, + + rowGetter(i) { + return this.state.rows[i]; + }, + + isDraggedRowSelected: function(selectedRows, rowDragSource) { + if (selectedRows && selectedRows.length > 0) { + let key = this.props.rowKey; + return selectedRows.filter(r => r[key] === rowDragSource.data[key]).length > 0; + } + return false; + }, + + reorderRows: function(e) { + let selectedRows = Selectors.getSelectedRowsByKey({rowKey: this.props.rowKey, selectedKeys: this.state.selectedIds, rows: this.state.rows}); + let draggedRows = this.isDraggedRowSelected(selectedRows, e.rowSource) ? selectedRows : [e.rowSource.data]; + let undraggedRows = this.state.rows.filter(function(r) { + return draggedRows.indexOf(r) === -1; + }); + let args = [e.rowTarget.idx, 0].concat(draggedRows); + Array.prototype.splice.apply(undraggedRows, args); + this.setState({rows: undraggedRows}); + }, + + onRowsSelected: function(rows) { + this.setState({selectedIds: this.state.selectedIds.concat(rows.map(r => r.row[this.props.rowKey]))}); + }, + + onRowsDeselected: function(rows) { + let rowIds = rows.map(r => r.row[this.props.rowKey]); + this.setState({selectedIds: this.state.selectedIds.filter(i => rowIds.indexOf(i) === -1 )}); + }, + + render() { + return ( + + } + rowSelection={{ + showCheckbox: true, + enableShiftSelect: true, + onRowsSelected: this.onRowsSelected, + onRowsDeselected: this.onRowsDeselected, + selectBy: { + keys: {rowKey: this.props.rowKey, values: this.state.selectedIds} + } + }}/> + ); + } +}); + +module.exports = exampleWrapper({ + WrappedComponent: Example, + exampleName: 'Row Reordering', + exampleDescription: 'This examples demonstrates how single or multiple rows can be dragged to a different positions using components from Draggable React Addons', + examplePath: './scripts/example23-row-reordering.js' +}); diff --git a/examples/scripts/index.js b/packages/react-data-grid-examples/src/scripts/index.js similarity index 100% rename from examples/scripts/index.js rename to packages/react-data-grid-examples/src/scripts/index.js diff --git a/examples/shared.js b/packages/react-data-grid-examples/src/shared.js similarity index 100% rename from examples/shared.js rename to packages/react-data-grid-examples/src/shared.js diff --git a/packages/react-data-grid/.npmignore b/packages/react-data-grid/.npmignore new file mode 100644 index 0000000000..db5403a299 --- /dev/null +++ b/packages/react-data-grid/.npmignore @@ -0,0 +1,5 @@ +src +.npmrc +secure-file +npm-debug.log +lerna-debug.log \ No newline at end of file diff --git a/packages/react-data-grid/README.md b/packages/react-data-grid/README.md new file mode 100644 index 0000000000..9f6d4e90a1 --- /dev/null +++ b/packages/react-data-grid/README.md @@ -0,0 +1,44 @@ +# react-data-grid + +> The core of react-data-grid + + +## Install + +```sh +npm install --save react-data-grid +``` + +## Usage + +```sh +import ReactDataGrid from 'react-data-grid'; + +const columns = [{ key: 'id', name: 'ID' }, { key: 'title', name: 'Title' }]; +const rows = [{ id: 1, title: 'Title 1' }, ...]; +const rowGetter = rowNumber => rows[rowNumber]; + +const Grid = () => { + return ); +} +``` + +## Exports +Asside from the grid this package exports: + +name | source | +-----------------------|-----------------------------------------| +RowComparer | [RowComparer](./src/RowComparer.js) | +RowsContainer | [RowsContainer](./src/RowsContainer.js) | +Row | [Row](./src/Row.js) | +Cell | [Cell](./src/Cell.js) | +HeaderCell | [HeaderCell](./src/HeaderCell.js) | +editors | [Editors](./src/editors) | +utils | [utils](./src/utils) | +shapes | [shapes](./src/PropTypeShapes) | +_constants | [_constants](./src/AppConstants.js) | +_helpers | [_helpers](./src/helpers) | diff --git a/packages/react-data-grid/index.js b/packages/react-data-grid/index.js new file mode 100644 index 0000000000..211e452480 --- /dev/null +++ b/packages/react-data-grid/index.js @@ -0,0 +1 @@ +module.exports = require('./src'); \ No newline at end of file diff --git a/packages/react-data-grid/package.json b/packages/react-data-grid/package.json new file mode 100644 index 0000000000..4b1e1fd415 --- /dev/null +++ b/packages/react-data-grid/package.json @@ -0,0 +1,18 @@ +{ + "name": "react-data-grid", + "version": "2.0.0-dc-arch-revamp2310", + "description": "The grid core", + "scripts": { + "beforepublish": "node ../../ci/publish/replacePackageEntry react-data-grid true", + "postpublish": "node ../../ci/publish/replacePackageEntry react-data-grid", + "test": "npm test" + }, + "keywords": [ + "react", + "react-data-grid", + "data-grid", + "core" + ], + "author": "Adazzle", + "license": "MIT" +} diff --git a/src/AppConstants.js b/packages/react-data-grid/src/AppConstants.js similarity index 70% rename from src/AppConstants.js rename to packages/react-data-grid/src/AppConstants.js index d985d91cee..da77f0dc8c 100644 --- a/src/AppConstants.js +++ b/packages/react-data-grid/src/AppConstants.js @@ -6,7 +6,10 @@ const constants = { COLUMN_FILL: null, COPY_PASTE: null, CELL_DRAG: null - }) + }), + DragItemTypes: { + Column: 'column' + } }; -export default constants; +module.exports = constants; diff --git a/src/Canvas.js b/packages/react-data-grid/src/Canvas.js similarity index 99% rename from src/Canvas.js rename to packages/react-data-grid/src/Canvas.js index 3d3e8656fe..82e19cc148 100644 --- a/src/Canvas.js +++ b/packages/react-data-grid/src/Canvas.js @@ -6,6 +6,8 @@ const ScrollShim = require('./ScrollShim'); const Row = require('./Row'); const cellMetaDataShape = require('./PropTypeShapes/CellMetaDataShape'); const RowUtils = require('./RowUtils'); +require('../../../themes/react-data-grid-core.css'); + import shallowEqual from 'fbjs/lib/shallowEqual'; import RowsContainer from './RowsContainer'; import RowGroup from './RowGroup'; diff --git a/src/Cell.js b/packages/react-data-grid/src/Cell.js similarity index 98% rename from src/Cell.js rename to packages/react-data-grid/src/Cell.js index e5a65b1abf..92cb2007c1 100644 --- a/src/Cell.js +++ b/packages/react-data-grid/src/Cell.js @@ -2,13 +2,14 @@ import isEqual from 'lodash/isEqual'; const React = require('react'); const ReactDOM = require('react-dom'); const joinClasses = require('classnames'); -const EditorContainer = require('./addons/editors/EditorContainer'); +const EditorContainer = require('./editors/EditorContainer'); const ExcelColumn = require('./PropTypeShapes/ExcelColumn'); -const isFunction = require('./addons/utils/isFunction'); +const isFunction = require('./utils/isFunction'); const CellMetaDataShape = require('./PropTypeShapes/CellMetaDataShape'); -const SimpleCellFormatter = require('./addons/formatters/SimpleCellFormatter'); +const SimpleCellFormatter = require('./formatters/SimpleCellFormatter'); const ColumnUtils = require('./ColumnUtils'); const createObjectWithProperties = require('./createObjectWithProperties'); +require('../../../themes/react-data-grid-cell.css'); // The list of the propTypes that we want to include in the Cell div const knownDivPropertyKeys = ['height', 'tabIndex', 'value']; diff --git a/src/ColumnComparer.js b/packages/react-data-grid/src/ColumnComparer.js similarity index 100% rename from src/ColumnComparer.js rename to packages/react-data-grid/src/ColumnComparer.js diff --git a/src/ColumnMetrics.js b/packages/react-data-grid/src/ColumnMetrics.js similarity index 98% rename from src/ColumnMetrics.js rename to packages/react-data-grid/src/ColumnMetrics.js index fbdaa87a2b..46733fcf77 100644 --- a/src/ColumnMetrics.js +++ b/packages/react-data-grid/src/ColumnMetrics.js @@ -2,7 +2,7 @@ const shallowCloneObject = require('./shallowCloneObject'); const sameColumn = require('./ColumnComparer'); const ColumnUtils = require('./ColumnUtils'); const getScrollbarSize = require('./getScrollbarSize'); -const isColumnsImmutable = require('./isColumnsImmutable'); +const isColumnsImmutable = require('./utils/isColumnsImmutable'); type Column = { key: string; diff --git a/src/ColumnMetricsMixin.js b/packages/react-data-grid/src/ColumnMetricsMixin.js similarity index 100% rename from src/ColumnMetricsMixin.js rename to packages/react-data-grid/src/ColumnMetricsMixin.js diff --git a/src/ColumnUtils.js b/packages/react-data-grid/src/ColumnUtils.js similarity index 100% rename from src/ColumnUtils.js rename to packages/react-data-grid/src/ColumnUtils.js diff --git a/src/Constants.js b/packages/react-data-grid/src/Constants.js similarity index 100% rename from src/Constants.js rename to packages/react-data-grid/src/Constants.js diff --git a/src/DOMMetrics.js b/packages/react-data-grid/src/DOMMetrics.js similarity index 100% rename from src/DOMMetrics.js rename to packages/react-data-grid/src/DOMMetrics.js diff --git a/src/Draggable.js b/packages/react-data-grid/src/Draggable.js similarity index 97% rename from src/Draggable.js rename to packages/react-data-grid/src/Draggable.js index 4f1ecc11b1..187e9edacf 100644 --- a/src/Draggable.js +++ b/packages/react-data-grid/src/Draggable.js @@ -1,6 +1,7 @@ const React = require('react'); const PropTypes = React.PropTypes; const createObjectWithProperties = require('./createObjectWithProperties'); +require('../../../themes/react-data-grid-header.css'); // The list of the propTypes that we want to include in the Draggable div const knownDivPropertyKeys = ['onDragStart', 'onDragEnd', 'onDrag', 'style']; diff --git a/src/Grid.js b/packages/react-data-grid/src/Grid.js similarity index 99% rename from src/Grid.js rename to packages/react-data-grid/src/Grid.js index b1385b29f3..a45af2950c 100644 --- a/src/Grid.js +++ b/packages/react-data-grid/src/Grid.js @@ -5,6 +5,7 @@ const Viewport = require('./Viewport'); const GridScrollMixin = require('./GridScrollMixin'); const DOMMetrics = require('./DOMMetrics'); const cellMetaDataShape = require('./PropTypeShapes/CellMetaDataShape'); +require('../../../themes/react-data-grid-core.css'); const Grid = React.createClass({ propTypes: { diff --git a/src/GridScrollMixin.js b/packages/react-data-grid/src/GridScrollMixin.js similarity index 100% rename from src/GridScrollMixin.js rename to packages/react-data-grid/src/GridScrollMixin.js diff --git a/src/Header.js b/packages/react-data-grid/src/Header.js similarity index 99% rename from src/Header.js rename to packages/react-data-grid/src/Header.js index e81143e1bc..d4ba01a655 100644 --- a/src/Header.js +++ b/packages/react-data-grid/src/Header.js @@ -9,6 +9,7 @@ const getScrollbarSize = require('./getScrollbarSize'); const PropTypes = React.PropTypes; const createObjectWithProperties = require('./createObjectWithProperties'); const cellMetaDataShape = require('./PropTypeShapes/CellMetaDataShape'); +require('../../../themes/react-data-grid-header.css'); type Column = { width: number diff --git a/src/HeaderCell.js b/packages/react-data-grid/src/HeaderCell.js similarity index 98% rename from src/HeaderCell.js rename to packages/react-data-grid/src/HeaderCell.js index 512a21d4aa..8047b51d6e 100644 --- a/src/HeaderCell.js +++ b/packages/react-data-grid/src/HeaderCell.js @@ -3,6 +3,8 @@ const ReactDOM = require('react-dom'); const joinClasses = require('classnames'); const ExcelColumn = require('./PropTypeShapes/ExcelColumn'); const ResizeHandle = require('./ResizeHandle'); +require('../../../themes/react-data-grid-header.css'); + const PropTypes = React.PropTypes; function simpleCellRenderer(objArgs: {column: {name: string}}): ReactElement { diff --git a/src/HeaderCellType.js b/packages/react-data-grid/src/HeaderCellType.js similarity index 100% rename from src/HeaderCellType.js rename to packages/react-data-grid/src/HeaderCellType.js diff --git a/src/HeaderRow.js b/packages/react-data-grid/src/HeaderRow.js similarity index 96% rename from src/HeaderRow.js rename to packages/react-data-grid/src/HeaderRow.js index 2dd21014e3..bdab7a9614 100644 --- a/src/HeaderRow.js +++ b/packages/react-data-grid/src/HeaderRow.js @@ -4,10 +4,11 @@ const BaseHeaderCell = require('./HeaderCell'); const getScrollbarSize = require('./getScrollbarSize'); const ExcelColumn = require('./PropTypeShapes/ExcelColumn'); const ColumnUtilsMixin = require('./ColumnUtils'); -const SortableHeaderCell = require('./addons/cells/headerCells/SortableHeaderCell'); -const FilterableHeaderCell = require('./addons/cells/headerCells/FilterableHeaderCell'); +const SortableHeaderCell = require('./cells/headerCells/SortableHeaderCell'); +const FilterableHeaderCell = require('./cells/headerCells/FilterableHeaderCell'); const HeaderCellType = require('./HeaderCellType'); const createObjectWithProperties = require('./createObjectWithProperties'); +require('../../../themes/react-data-grid-header.css'); const PropTypes = React.PropTypes; diff --git a/src/KeyCodes.js b/packages/react-data-grid/src/KeyCodes.js similarity index 100% rename from src/KeyCodes.js rename to packages/react-data-grid/src/KeyCodes.js diff --git a/src/KeyboardHandlerMixin.js b/packages/react-data-grid/src/KeyboardHandlerMixin.js similarity index 100% rename from src/KeyboardHandlerMixin.js rename to packages/react-data-grid/src/KeyboardHandlerMixin.js diff --git a/src/OverflowCell.js b/packages/react-data-grid/src/OverflowCell.js similarity index 95% rename from src/OverflowCell.js rename to packages/react-data-grid/src/OverflowCell.js index aff70f5a9b..cfdf8ddcc8 100644 --- a/src/OverflowCell.js +++ b/packages/react-data-grid/src/OverflowCell.js @@ -1,5 +1,6 @@ import React from 'react'; import focusableComponentWrapper from './focusableComponentWrapper'; +import '../../../themes/react-data-grid-cell.css'; class OverflowCell extends React.Component { getStyle() { diff --git a/src/OverflowRow.js b/packages/react-data-grid/src/OverflowRow.js similarity index 94% rename from src/OverflowRow.js rename to packages/react-data-grid/src/OverflowRow.js index 2481ff8a2a..c82c388923 100644 --- a/src/OverflowRow.js +++ b/packages/react-data-grid/src/OverflowRow.js @@ -1,5 +1,6 @@ import React from 'react'; import focusableComponentWrapper from './focusableComponentWrapper'; +import '../../../themes/react-data-grid-row.css'; class OverflowRow extends React.Component { render() { diff --git a/src/PropTypeShapes/CellMetaDataShape.js b/packages/react-data-grid/src/PropTypeShapes/CellMetaDataShape.js similarity index 100% rename from src/PropTypeShapes/CellMetaDataShape.js rename to packages/react-data-grid/src/PropTypeShapes/CellMetaDataShape.js diff --git a/src/PropTypeShapes/ExcelColumn.js b/packages/react-data-grid/src/PropTypeShapes/ExcelColumn.js similarity index 100% rename from src/PropTypeShapes/ExcelColumn.js rename to packages/react-data-grid/src/PropTypeShapes/ExcelColumn.js diff --git a/packages/react-data-grid/src/PropTypeShapes/index.js b/packages/react-data-grid/src/PropTypeShapes/index.js new file mode 100644 index 0000000000..3cf44fcc1d --- /dev/null +++ b/packages/react-data-grid/src/PropTypeShapes/index.js @@ -0,0 +1,3 @@ +import ExcelColumn from './ExcelColumn'; + +export default { ExcelColumn }; diff --git a/src/ReactDataGrid.js b/packages/react-data-grid/src/ReactDataGrid.js similarity index 99% rename from src/ReactDataGrid.js rename to packages/react-data-grid/src/ReactDataGrid.js index a6cfd64294..ce549dc6fd 100644 --- a/src/ReactDataGrid.js +++ b/packages/react-data-grid/src/ReactDataGrid.js @@ -4,13 +4,15 @@ const BaseGrid = require('./Grid'); const Row = require('./Row'); const ExcelColumn = require('./PropTypeShapes/ExcelColumn'); const KeyboardHandlerMixin = require('./KeyboardHandlerMixin'); -const CheckboxEditor = require('./addons/editors/CheckboxEditor'); +const CheckboxEditor = require('./editors/CheckboxEditor'); const DOMMetrics = require('./DOMMetrics'); const ColumnMetricsMixin = require('./ColumnMetricsMixin'); const RowUtils = require('./RowUtils'); const ColumnUtils = require('./ColumnUtils'); const KeyCodes = require('./KeyCodes'); import AppConstants from './AppConstants'; +require('../../../themes/react-data-grid-core.css'); +require('../../../themes/react-data-grid-checkbox.css'); if (!Object.assign) { Object.assign = require('object-assign'); diff --git a/src/ResizeHandle.js b/packages/react-data-grid/src/ResizeHandle.js similarity index 88% rename from src/ResizeHandle.js rename to packages/react-data-grid/src/ResizeHandle.js index 3a84ebcfe3..97c6a499e3 100644 --- a/src/ResizeHandle.js +++ b/packages/react-data-grid/src/ResizeHandle.js @@ -1,5 +1,6 @@ const React = require('react'); const Draggable = require('./Draggable'); +require('../../../themes/react-data-grid-header.css'); const ResizeHandle = React.createClass({ style: { diff --git a/src/Row.js b/packages/react-data-grid/src/Row.js similarity index 99% rename from src/Row.js rename to packages/react-data-grid/src/Row.js index 97e4ff3f38..3c6d7e01c4 100644 --- a/src/Row.js +++ b/packages/react-data-grid/src/Row.js @@ -7,6 +7,7 @@ const ColumnUtilsMixin = require('./ColumnUtils'); const cellMetaDataShape = require('./PropTypeShapes/CellMetaDataShape'); const PropTypes = React.PropTypes; const createObjectWithProperties = require('./createObjectWithProperties'); +require('../../../themes/react-data-grid-row.css'); const CellExpander = React.createClass({ render() { diff --git a/src/RowComparer.js b/packages/react-data-grid/src/RowComparer.js similarity index 100% rename from src/RowComparer.js rename to packages/react-data-grid/src/RowComparer.js diff --git a/src/RowGroup.js b/packages/react-data-grid/src/RowGroup.js similarity index 98% rename from src/RowGroup.js rename to packages/react-data-grid/src/RowGroup.js index d987163ddd..7bc0942852 100644 --- a/src/RowGroup.js +++ b/packages/react-data-grid/src/RowGroup.js @@ -1,6 +1,7 @@ import React, {PropTypes, Component} from 'react'; import ReactDOM from 'react-dom'; import classnames from 'classnames'; +import '../../../themes/react-data-grid-row.css'; class RowGroup extends Component { diff --git a/src/RowUtils.js b/packages/react-data-grid/src/RowUtils.js similarity index 100% rename from src/RowUtils.js rename to packages/react-data-grid/src/RowUtils.js diff --git a/src/RowsContainer.js b/packages/react-data-grid/src/RowsContainer.js similarity index 100% rename from src/RowsContainer.js rename to packages/react-data-grid/src/RowsContainer.js diff --git a/src/ScrollShim.js b/packages/react-data-grid/src/ScrollShim.js similarity index 100% rename from src/ScrollShim.js rename to packages/react-data-grid/src/ScrollShim.js diff --git a/src/Viewport.js b/packages/react-data-grid/src/Viewport.js similarity index 100% rename from src/Viewport.js rename to packages/react-data-grid/src/Viewport.js diff --git a/src/ViewportScrollMixin.js b/packages/react-data-grid/src/ViewportScrollMixin.js similarity index 100% rename from src/ViewportScrollMixin.js rename to packages/react-data-grid/src/ViewportScrollMixin.js diff --git a/src/__tests__/AppConstants.spec.js b/packages/react-data-grid/src/__tests__/AppConstants.spec.js similarity index 100% rename from src/__tests__/AppConstants.spec.js rename to packages/react-data-grid/src/__tests__/AppConstants.spec.js diff --git a/src/__tests__/Canvas.spec.js b/packages/react-data-grid/src/__tests__/Canvas.spec.js similarity index 100% rename from src/__tests__/Canvas.spec.js rename to packages/react-data-grid/src/__tests__/Canvas.spec.js diff --git a/src/__tests__/Cell.spec.js b/packages/react-data-grid/src/__tests__/Cell.spec.js similarity index 99% rename from src/__tests__/Cell.spec.js rename to packages/react-data-grid/src/__tests__/Cell.spec.js index cbfa0256b0..b83caa6d5b 100644 --- a/src/__tests__/Cell.spec.js +++ b/packages/react-data-grid/src/__tests__/Cell.spec.js @@ -1,12 +1,12 @@ let React = require('react'); let rewire = require('rewire'); let Cell = rewire('../Cell'); -let rewireModule = require('../../test/rewireModule'); -let StubComponent = require('../../test/StubComponent'); +let rewireModule = require('../../../../test/rewireModule'); +let StubComponent = require('../../../../test/StubComponent'); import { mount, shallow } from 'enzyme'; import isEqual from 'lodash/isEqual'; Object.assign = require('object-assign'); -import * as helpers from './GridPropHelpers'; +import helpers from '../helpers/test/GridPropHelpers'; let testCellMetaData = { selected: {idx: 2, rowIdx: 3}, diff --git a/src/__tests__/ColumnMetrics.spec.js b/packages/react-data-grid/src/__tests__/ColumnMetrics.spec.js similarity index 98% rename from src/__tests__/ColumnMetrics.spec.js rename to packages/react-data-grid/src/__tests__/ColumnMetrics.spec.js index 4615f8d0eb..4d7b1dd938 100644 --- a/src/__tests__/ColumnMetrics.spec.js +++ b/packages/react-data-grid/src/__tests__/ColumnMetrics.spec.js @@ -1,5 +1,5 @@ import getScrollbarSize from '../getScrollbarSize'; -import GridPropHelpers from './GridPropHelpers'; +import GridPropHelpers from '../helpers/test/GridPropHelpers'; const rewire = require('rewire'); const ColumnMetrics = rewire('../ColumnMetrics'); const Immutable = window.Immutable = require('immutable'); diff --git a/src/__tests__/ColumnUtils.spec.js b/packages/react-data-grid/src/__tests__/ColumnUtils.spec.js similarity index 100% rename from src/__tests__/ColumnUtils.spec.js rename to packages/react-data-grid/src/__tests__/ColumnUtils.spec.js diff --git a/src/__tests__/Draggable.spec.js b/packages/react-data-grid/src/__tests__/Draggable.spec.js similarity index 100% rename from src/__tests__/Draggable.spec.js rename to packages/react-data-grid/src/__tests__/Draggable.spec.js diff --git a/src/__tests__/FocusableComponentTestRunner.js b/packages/react-data-grid/src/__tests__/FocusableComponentTestRunner.js similarity index 100% rename from src/__tests__/FocusableComponentTestRunner.js rename to packages/react-data-grid/src/__tests__/FocusableComponentTestRunner.js diff --git a/src/__tests__/Grid.spec.js b/packages/react-data-grid/src/__tests__/Grid.spec.js similarity index 98% rename from src/__tests__/Grid.spec.js rename to packages/react-data-grid/src/__tests__/Grid.spec.js index 4ed185c05a..7e278d9df7 100644 --- a/src/__tests__/Grid.spec.js +++ b/packages/react-data-grid/src/__tests__/Grid.spec.js @@ -3,8 +3,8 @@ const ReactDOM = require('react-dom'); const rewire = require('rewire'); const Grid = rewire('../Grid'); const TestUtils = require('react-addons-test-utils'); -const helpers = require('./GridPropHelpers'); -const rewireModule = require('../../test/rewireModule'); +const helpers = require('../helpers/test/GridPropHelpers'); +const rewireModule = require('../../../../test/rewireModule'); import { shallow } from 'enzyme'; import { ContextMenu } from 'react-contextmenu'; diff --git a/src/__tests__/Header.spec.js b/packages/react-data-grid/src/__tests__/Header.spec.js similarity index 96% rename from src/__tests__/Header.spec.js rename to packages/react-data-grid/src/__tests__/Header.spec.js index d317103008..4492a39370 100644 --- a/src/__tests__/Header.spec.js +++ b/packages/react-data-grid/src/__tests__/Header.spec.js @@ -1,10 +1,10 @@ const React = require('react'); const rewire = require('rewire'); const Header = rewire('../Header'); -const TestUtils = require('react/lib/ReactTestUtils'); -const rewireModule = require('../../test/rewireModule'); -const StubComponent = require('../../test/StubComponent'); -const helpers = require('./GridPropHelpers'); +const TestUtils = require('react-addons-test-utils'); +const rewireModule = require('../../../../test/rewireModule'); +const StubComponent = require('../../../../test/StubComponent'); +const helpers = require('../helpers/test/GridPropHelpers'); import { shallow } from 'enzyme'; const SCROLL_BAR_SIZE = 20; diff --git a/src/__tests__/HeaderCell.spec.js b/packages/react-data-grid/src/__tests__/HeaderCell.spec.js similarity index 95% rename from src/__tests__/HeaderCell.spec.js rename to packages/react-data-grid/src/__tests__/HeaderCell.spec.js index 168d6bce56..0f54245c38 100644 --- a/src/__tests__/HeaderCell.spec.js +++ b/packages/react-data-grid/src/__tests__/HeaderCell.spec.js @@ -1,10 +1,10 @@ const React = require('react'); const rewire = require('rewire'); const HeaderCell = rewire('../HeaderCell'); -const TestUtils = require('react/lib/ReactTestUtils'); -const rewireModule = require('../../test/rewireModule'); -const StubComponent = require('../../test/StubComponent'); -import SortableHeaderCell from '../addons/cells/headerCells/SortableHeaderCell'; +const TestUtils = require('react-addons-test-utils'); +const rewireModule = require('../../../../test/rewireModule'); +const StubComponent = require('../../../../test/StubComponent'); +import SortableHeaderCell from '../cells/headerCells/SortableHeaderCell'; describe('Header Cell Tests', () => { // Configure local constiable replacements for the module. diff --git a/src/__tests__/HeaderRow.spec.js b/packages/react-data-grid/src/__tests__/HeaderRow.spec.js similarity index 97% rename from src/__tests__/HeaderRow.spec.js rename to packages/react-data-grid/src/__tests__/HeaderRow.spec.js index b74fde84b0..e60d90c329 100644 --- a/src/__tests__/HeaderRow.spec.js +++ b/packages/react-data-grid/src/__tests__/HeaderRow.spec.js @@ -1,9 +1,9 @@ const React = require('react'); const rewire = require('rewire'); -const TestUtils = require('react/lib/ReactTestUtils'); -const rewireModule = require('../../test/rewireModule'); -const StubComponent = require('../../test/StubComponent'); -const helpers = require('./GridPropHelpers'); +const TestUtils = require('react-addons-test-utils'); +const rewireModule = require('../../../../test/rewireModule'); +const StubComponent = require('../../../../test/StubComponent'); +const helpers = require('../helpers/test/GridPropHelpers'); const HeaderRow = rewire('../HeaderRow'); import { shallow } from 'enzyme'; diff --git a/src/__tests__/KeyboardHandlerMixin.spec.js b/packages/react-data-grid/src/__tests__/KeyboardHandlerMixin.spec.js similarity index 100% rename from src/__tests__/KeyboardHandlerMixin.spec.js rename to packages/react-data-grid/src/__tests__/KeyboardHandlerMixin.spec.js diff --git a/src/__tests__/OverflowCell.spec.js b/packages/react-data-grid/src/__tests__/OverflowCell.spec.js similarity index 100% rename from src/__tests__/OverflowCell.spec.js rename to packages/react-data-grid/src/__tests__/OverflowCell.spec.js diff --git a/src/__tests__/OverflowRow.spec.js b/packages/react-data-grid/src/__tests__/OverflowRow.spec.js similarity index 100% rename from src/__tests__/OverflowRow.spec.js rename to packages/react-data-grid/src/__tests__/OverflowRow.spec.js diff --git a/src/__tests__/ReactDataGrid.spec.js b/packages/react-data-grid/src/__tests__/ReactDataGrid.spec.js similarity index 100% rename from src/__tests__/ReactDataGrid.spec.js rename to packages/react-data-grid/src/__tests__/ReactDataGrid.spec.js diff --git a/src/__tests__/Row.spec.js b/packages/react-data-grid/src/__tests__/Row.spec.js similarity index 98% rename from src/__tests__/Row.spec.js rename to packages/react-data-grid/src/__tests__/Row.spec.js index 7b960b3f3e..8d01ef1952 100644 --- a/src/__tests__/Row.spec.js +++ b/packages/react-data-grid/src/__tests__/Row.spec.js @@ -2,7 +2,7 @@ import React from 'react'; import TestUtils from 'react-addons-test-utils'; import Row from '../Row'; import { shallow } from 'enzyme'; -import * as helpers from './GridPropHelpers'; +import * as helpers from '../helpers/test/GridPropHelpers'; describe('Row', () => { let fakeProps = { diff --git a/src/__tests__/RowComparer.spec.js b/packages/react-data-grid/src/__tests__/RowComparer.spec.js similarity index 100% rename from src/__tests__/RowComparer.spec.js rename to packages/react-data-grid/src/__tests__/RowComparer.spec.js diff --git a/src/__tests__/RowUtils.spec.js b/packages/react-data-grid/src/__tests__/RowUtils.spec.js similarity index 100% rename from src/__tests__/RowUtils.spec.js rename to packages/react-data-grid/src/__tests__/RowUtils.spec.js diff --git a/packages/react-data-grid/src/__tests__/RowsContainer.spec.js b/packages/react-data-grid/src/__tests__/RowsContainer.spec.js new file mode 100644 index 0000000000..c83a169b6d --- /dev/null +++ b/packages/react-data-grid/src/__tests__/RowsContainer.spec.js @@ -0,0 +1,17 @@ +import React from 'react'; +import ReactTestUtils from 'react-addons-test-utils'; +import RowsContainer from '../RowsContainer'; + +describe('Rows Container', () => { + describe('without context menu', () => { + let componentWithoutContextMenu = {}; + + beforeEach(() => { + componentWithoutContextMenu = ReactTestUtils.renderIntoDocument(); + }); + + it('should create a new RowsContainer instance', () => { + expect(componentWithoutContextMenu).toBeDefined(); + }); + }); +}); diff --git a/src/__tests__/Viewport.spec.js b/packages/react-data-grid/src/__tests__/Viewport.spec.js similarity index 97% rename from src/__tests__/Viewport.spec.js rename to packages/react-data-grid/src/__tests__/Viewport.spec.js index 94466b0717..7088dbf5d2 100644 --- a/src/__tests__/Viewport.spec.js +++ b/packages/react-data-grid/src/__tests__/Viewport.spec.js @@ -1,7 +1,7 @@ import React from 'react'; import Viewport from '../Viewport'; import { shallow} from 'enzyme'; -import helpers from './GridPropHelpers'; +import helpers from '../helpers/test/GridPropHelpers'; let viewportProps = { rowOffsetHeight: 0, diff --git a/src/addons/cells/headerCells/FilterableHeaderCell.js b/packages/react-data-grid/src/cells/headerCells/FilterableHeaderCell.js similarity index 93% rename from src/addons/cells/headerCells/FilterableHeaderCell.js rename to packages/react-data-grid/src/cells/headerCells/FilterableHeaderCell.js index 42d41fb379..e0394dfcbf 100644 --- a/src/addons/cells/headerCells/FilterableHeaderCell.js +++ b/packages/react-data-grid/src/cells/headerCells/FilterableHeaderCell.js @@ -1,5 +1,5 @@ const React = require('react'); -const ExcelColumn = require('../../../PropTypeShapes/ExcelColumn'); +const ExcelColumn = require('../../PropTypeShapes/ExcelColumn'); const FilterableHeaderCell = React.createClass({ diff --git a/src/addons/cells/headerCells/SortableHeaderCell.js b/packages/react-data-grid/src/cells/headerCells/SortableHeaderCell.js similarity index 100% rename from src/addons/cells/headerCells/SortableHeaderCell.js rename to packages/react-data-grid/src/cells/headerCells/SortableHeaderCell.js diff --git a/src/createObjectWithProperties.js b/packages/react-data-grid/src/createObjectWithProperties.js similarity index 100% rename from src/createObjectWithProperties.js rename to packages/react-data-grid/src/createObjectWithProperties.js diff --git a/src/addons/editors/CheckboxEditor.js b/packages/react-data-grid/src/editors/CheckboxEditor.js similarity index 94% rename from src/addons/editors/CheckboxEditor.js rename to packages/react-data-grid/src/editors/CheckboxEditor.js index 3ab2f2560d..0aecfd1f5f 100644 --- a/src/addons/editors/CheckboxEditor.js +++ b/packages/react-data-grid/src/editors/CheckboxEditor.js @@ -1,4 +1,5 @@ const React = require('react'); +require('../../../../themes/react-data-grid-checkbox.css'); const CheckboxEditor = React.createClass({ diff --git a/src/addons/editors/EditorBase.js b/packages/react-data-grid/src/editors/EditorBase.js similarity index 92% rename from src/addons/editors/EditorBase.js rename to packages/react-data-grid/src/editors/EditorBase.js index 9eed4f8dff..6dc4084a8a 100644 --- a/src/addons/editors/EditorBase.js +++ b/packages/react-data-grid/src/editors/EditorBase.js @@ -1,6 +1,6 @@ const React = require('react'); const ReactDOM = require('react-dom'); -const ExcelColumn = require('../../PropTypeShapes/ExcelColumn'); +const ExcelColumn = require('../PropTypeShapes/ExcelColumn'); class EditorBase extends React.Component { diff --git a/src/addons/editors/EditorContainer.js b/packages/react-data-grid/src/editors/EditorContainer.js similarity index 98% rename from src/addons/editors/EditorContainer.js rename to packages/react-data-grid/src/editors/EditorContainer.js index 8be5dd3346..1bf5c88eeb 100644 --- a/src/addons/editors/EditorContainer.js +++ b/packages/react-data-grid/src/editors/EditorContainer.js @@ -1,9 +1,9 @@ const React = require('react'); const joinClasses = require('classnames'); -const keyboardHandlerMixin = require('../../KeyboardHandlerMixin'); +const keyboardHandlerMixin = require('../KeyboardHandlerMixin'); const SimpleTextEditor = require('./SimpleTextEditor'); const isFunction = require('../utils/isFunction'); - +require('../../../../themes/react-data-grid-core.css'); const EditorContainer = React.createClass({ mixins: [keyboardHandlerMixin], diff --git a/src/addons/editors/SimpleTextEditor.js b/packages/react-data-grid/src/editors/SimpleTextEditor.js similarity index 100% rename from src/addons/editors/SimpleTextEditor.js rename to packages/react-data-grid/src/editors/SimpleTextEditor.js diff --git a/src/addons/editors/__tests__/CheckboxEditor.spec.js b/packages/react-data-grid/src/editors/__tests__/CheckboxEditor.spec.js similarity index 85% rename from src/addons/editors/__tests__/CheckboxEditor.spec.js rename to packages/react-data-grid/src/editors/__tests__/CheckboxEditor.spec.js index 18aed510a6..1ecfc74eee 100644 --- a/src/addons/editors/__tests__/CheckboxEditor.spec.js +++ b/packages/react-data-grid/src/editors/__tests__/CheckboxEditor.spec.js @@ -1,10 +1,12 @@ const React = require('react'); const ReactDOM = require('react-dom'); -const TestUtils = require('react/lib/ReactTestUtils'); +const TestUtils = require('react-addons-test-utils'); const CheckboxEditor = require('../CheckboxEditor'); +const { mount } = require('enzyme'); describe('CheckboxEditor', () => { let component; + let componentWrapper; let testColumn = { key: 'columnKey', onCellChange: function() {} @@ -13,10 +15,11 @@ describe('CheckboxEditor', () => { describe('Basic tests', () => { beforeEach(() => { spyOn(testColumn, 'onCellChange'); - component = TestUtils.renderIntoDocument(); + component = componentWrapper.node; }); it('should create a new CheckboxEditor instance', () => { @@ -30,7 +33,7 @@ describe('CheckboxEditor', () => { }); it('should not be selected if value prop is false', () => { - component.setProps({value: false}); + componentWrapper.setProps({value: false}); let Input = TestUtils.findRenderedDOMComponentWithTag(component, 'input'); let checkboxNode = ReactDOM.findDOMNode(Input); expect(checkboxNode.checked).toBe(false); diff --git a/src/addons/editors/__tests__/EditorContainer.spec.js b/packages/react-data-grid/src/editors/__tests__/EditorContainer.spec.js similarity index 98% rename from src/addons/editors/__tests__/EditorContainer.spec.js rename to packages/react-data-grid/src/editors/__tests__/EditorContainer.spec.js index 2fca19a0f9..c02888d903 100644 --- a/src/addons/editors/__tests__/EditorContainer.spec.js +++ b/packages/react-data-grid/src/editors/__tests__/EditorContainer.spec.js @@ -3,7 +3,7 @@ const React = require('react'); const ReactDOM = require('react-dom'); const rewire = require('rewire'); const EditorContainer = rewire('../EditorContainer.js'); -const TestUtils = require('react/lib/ReactTestUtils'); +const TestUtils = require('react-addons-test-utils'); const SimpleTextEditor = require('../SimpleTextEditor'); const EditorBase = require('../EditorBase'); import { shallow } from 'enzyme'; @@ -172,7 +172,7 @@ describe('Editor Container Tests', () => { // otherwise IE (11) gives an error when we try and setCaretAtEndOfInput container = document.createElement('div'); document.body.appendChild(container); - component = React.render( { describe('Basic tests', () => { @@ -10,13 +10,13 @@ describe('SimpleTextEditor', () => { function fakeBlurCb() { return true; } function fakeFunction() { } beforeEach(() => { - component = TestUtils.renderIntoDocument(); + />).node; }); it('should create a new SimpleTextEditor instance', () => { @@ -24,8 +24,7 @@ describe('SimpleTextEditor', () => { }); it('should pass the onBlur fuction down to the input as a prop', () => { - let Input = TestUtils.findRenderedDOMComponentWithTag(component, 'input'); - expect(Input.props.onBlur()).toBe(true); + expect(component.props.onBlur()).toBe(true); }); it('should return the value when getValue is called', () => { diff --git a/packages/react-data-grid/src/editors/index.js b/packages/react-data-grid/src/editors/index.js new file mode 100644 index 0000000000..0edd52ae34 --- /dev/null +++ b/packages/react-data-grid/src/editors/index.js @@ -0,0 +1,5 @@ +module.exports = { + CheckboxEditor: require('./CheckboxEditor'), + EditorBase: require('./EditorBase'), + SimpleTextEditor: require('./SimpleTextEditor') +}; diff --git a/src/focusableComponentWrapper.js b/packages/react-data-grid/src/focusableComponentWrapper.js similarity index 100% rename from src/focusableComponentWrapper.js rename to packages/react-data-grid/src/focusableComponentWrapper.js diff --git a/src/addons/formatters/SimpleCellFormatter.js b/packages/react-data-grid/src/formatters/SimpleCellFormatter.js similarity index 100% rename from src/addons/formatters/SimpleCellFormatter.js rename to packages/react-data-grid/src/formatters/SimpleCellFormatter.js diff --git a/src/getScrollbarSize.js b/packages/react-data-grid/src/getScrollbarSize.js similarity index 100% rename from src/getScrollbarSize.js rename to packages/react-data-grid/src/getScrollbarSize.js diff --git a/src/getWindowSize.js b/packages/react-data-grid/src/getWindowSize.js similarity index 100% rename from src/getWindowSize.js rename to packages/react-data-grid/src/getWindowSize.js diff --git a/packages/react-data-grid/src/helpers/index.js b/packages/react-data-grid/src/helpers/index.js new file mode 100644 index 0000000000..df37f530b9 --- /dev/null +++ b/packages/react-data-grid/src/helpers/index.js @@ -0,0 +1,5 @@ +import GridPropHelpers from './test/GridPropHelpers'; + +module.exports = { + test: { GridPropHelpers } +}; diff --git a/src/__tests__/GridPropHelpers.js b/packages/react-data-grid/src/helpers/test/GridPropHelpers.js similarity index 100% rename from src/__tests__/GridPropHelpers.js rename to packages/react-data-grid/src/helpers/test/GridPropHelpers.js diff --git a/packages/react-data-grid/src/index.js b/packages/react-data-grid/src/index.js new file mode 100644 index 0000000000..954d1d9649 --- /dev/null +++ b/packages/react-data-grid/src/index.js @@ -0,0 +1,15 @@ +const Grid = require('./ReactDataGrid'); +import RowComparer from './RowComparer'; +import RowsContainer from './RowsContainer'; + +module.exports = Grid; +module.exports.Row = require('./Row'); +module.exports.Cell = require('./Cell'); +module.exports.HeaderCell = require('./HeaderCell'); +module.exports.RowComparer = RowComparer; +module.exports.RowsContainer = RowsContainer; +module.exports.editors = require('./editors'); +module.exports.utils = require('./utils'); +module.exports.shapes = require('./PropTypeShapes'); +module.exports._constants = require('./AppConstants'); +module.exports._helpers = require('./helpers'); diff --git a/src/shallowCloneObject.js b/packages/react-data-grid/src/shallowCloneObject.js similarity index 100% rename from src/shallowCloneObject.js rename to packages/react-data-grid/src/shallowCloneObject.js diff --git a/packages/react-data-grid/src/utils/index.js b/packages/react-data-grid/src/utils/index.js new file mode 100644 index 0000000000..6ddfc7a938 --- /dev/null +++ b/packages/react-data-grid/src/utils/index.js @@ -0,0 +1,8 @@ +module.exports = { + isEmptyArray: require('./isEmptyArray'), + isEmptyObject: require('./isEmptyObject'), + isFunction: require('./isFunction'), + isImmutableCollection: require('./isImmutableCollection'), + getMixedTypeValueRetriever: require('./mixedTypeValueRetriever'), + isColumnsImmutable: require('./isColumnsImmutable') +}; diff --git a/src/isColumnsImmutable.js b/packages/react-data-grid/src/utils/isColumnsImmutable.js similarity index 100% rename from src/isColumnsImmutable.js rename to packages/react-data-grid/src/utils/isColumnsImmutable.js diff --git a/src/addons/utils/isEmptyArray.js b/packages/react-data-grid/src/utils/isEmptyArray.js similarity index 72% rename from src/addons/utils/isEmptyArray.js rename to packages/react-data-grid/src/utils/isEmptyArray.js index 33364fc079..eb55d54b86 100644 --- a/src/addons/utils/isEmptyArray.js +++ b/packages/react-data-grid/src/utils/isEmptyArray.js @@ -1,4 +1,5 @@ const isEmptyArray = (obj) => { return Array.isArray(obj) && obj.length === 0; }; -export default isEmptyArray; + +module.exports = isEmptyArray; diff --git a/src/addons/utils/isEmptyObject.js b/packages/react-data-grid/src/utils/isEmptyObject.js similarity index 78% rename from src/addons/utils/isEmptyObject.js rename to packages/react-data-grid/src/utils/isEmptyObject.js index 4393cfd43b..1fe3b41aaf 100644 --- a/src/addons/utils/isEmptyObject.js +++ b/packages/react-data-grid/src/utils/isEmptyObject.js @@ -2,4 +2,4 @@ function isEmpty(obj) { return Object.keys(obj).length === 0 && obj.constructor === Object; } -export default isEmpty; +module.exports = isEmpty; diff --git a/src/addons/utils/isFunction.js b/packages/react-data-grid/src/utils/isFunction.js similarity index 100% rename from src/addons/utils/isFunction.js rename to packages/react-data-grid/src/utils/isFunction.js diff --git a/src/addons/utils/isImmutableCollection.js b/packages/react-data-grid/src/utils/isImmutableCollection.js similarity index 76% rename from src/addons/utils/isImmutableCollection.js rename to packages/react-data-grid/src/utils/isImmutableCollection.js index 95c68d4763..ec86c1b4c4 100644 --- a/src/addons/utils/isImmutableCollection.js +++ b/packages/react-data-grid/src/utils/isImmutableCollection.js @@ -3,4 +3,5 @@ import { Iterable } from 'immutable'; const isImmutableCollection = (objToVerify) => { return Iterable.isIterable(objToVerify); }; -export default isImmutableCollection; + +module.exports = isImmutableCollection; diff --git a/src/addons/utils/mixedTypeValueRetriever.js b/packages/react-data-grid/src/utils/mixedTypeValueRetriever.js similarity index 86% rename from src/addons/utils/mixedTypeValueRetriever.js rename to packages/react-data-grid/src/utils/mixedTypeValueRetriever.js index 1b20af182e..448de01600 100644 --- a/src/addons/utils/mixedTypeValueRetriever.js +++ b/packages/react-data-grid/src/utils/mixedTypeValueRetriever.js @@ -7,4 +7,5 @@ const getMixedTypeValueRetriever = (isImmutable) => { return retObj; }; -export default getMixedTypeValueRetriever; + +module.exports = getMixedTypeValueRetriever; diff --git a/src/addons/editors/index.js b/src/addons/editors/index.js deleted file mode 100644 index acca40e3c2..0000000000 --- a/src/addons/editors/index.js +++ /dev/null @@ -1,9 +0,0 @@ -const Editors = { - AutoComplete: require('./AutoCompleteEditor'), - DropDownEditor: require('./DropDownEditor'), - SimpleTextEditor: require('./SimpleTextEditor'), - CheckboxEditor: require('./CheckboxEditor'), - ContainerEditorWrapper: require('./ContainerEditorWrapper') -}; - -module.exports = Editors; diff --git a/src/index.js b/src/index.js deleted file mode 100644 index 6002bc7444..0000000000 --- a/src/index.js +++ /dev/null @@ -1,7 +0,0 @@ -const Grid = require('./ReactDataGrid'); -const Row = require('./Row'); -const Cell = require('./Cell'); - -module.exports = Grid; -module.exports.Row = Row; -module.exports.Cell = Cell; diff --git a/test/FullTests.jsx b/test/FullTests.jsx index 047b9b2fef..71d89c0082 100644 --- a/test/FullTests.jsx +++ b/test/FullTests.jsx @@ -1,2 +1,2 @@ -var testsContext = require.context("../src", true, /^.*\.(spec|integration-spec)$/); +var testsContext = require.context("../packages", true, /^.*\.(spec|integration-spec)$/); testsContext.keys().forEach(testsContext); diff --git a/test/integrationTests.jsx b/test/integrationTests.jsx index d94777221e..73db4b8c7b 100644 --- a/test/integrationTests.jsx +++ b/test/integrationTests.jsx @@ -1,2 +1,2 @@ -var testsContext = require.context("../src", true, /^.*\.(integation-spec)$/); +var testsContext = require.context("../packages", true, /^.*\.(integation-spec)$/); testsContext.keys().forEach(testsContext); diff --git a/test/unitTests.jsx b/test/unitTests.jsx index e9fe9cb2ce..408161b023 100644 --- a/test/unitTests.jsx +++ b/test/unitTests.jsx @@ -1,4 +1,4 @@ // require all modules ending in "spec.js" from the // current directory and all subdirectories -var testsContext = require.context("../src", true, /^.*\.(spec)$/); +var testsContext = require.context("../packages", true, /^.*\.(spec)$/); testsContext.keys().forEach(testsContext); diff --git a/themes/react-data-grid-cell.css b/themes/react-data-grid-cell.css new file mode 100644 index 0000000000..aa64039d4c --- /dev/null +++ b/themes/react-data-grid-cell.css @@ -0,0 +1,158 @@ +.react-grid-Cell { + background-color: #ffffff; + padding-left: 8px; + padding-right: 8px; + border-right: 1px solid #eee; + border-bottom: 1px solid #dddddd; +} + +.react-grid-Cell:focus { + outline: 2px solid #66afe9; + outline-offset: -2px; +} + +.react-grid-Cell:focus .drag-handle { + position: absolute; + bottom: -5px; + right: -4px; + background: #66afe9; + width: 8px; + height: 8px; + border: 1px solid #fff; + border-right: 0px; + border-bottom: 0px; + z-index: 8; + cursor: crosshair; + cursor: -webkit-grab; +} + +.react-grid-Cell:not(.editing) .react-grid-Cell__value { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + position: relative; + top: 50%; + transform: translateY(-50%); +} + +.react-grid-Cell.readonly { + background-color : black; +} + +.react-grid-Cell.copied { + background: rgba(0, 0, 255, 0.2) !important; + -webkit-transition: 0.5s background; +} + +.react-grid-Cell--locked:last-of-type { + border-right: 1px solid #dddddd; + box-shadow: none; + z-index:99; +} + +.react-grid-Cell:hover:focus .drag-handle .glyphicon-arrow-down { + display: 'block' +} + +.react-grid-Cell.is-dragged-over-down { + border-right: 1px dashed black; + border-left: 1px dashed black; + border-bottom: 1px dashed black; +} + +.react-grid-Cell.is-dragged-over-up { + border-right: 1px dashed black; + border-left: 1px dashed black; + border-top: 1px dashed black; +} + +.react-grid-Cell.is-dragged-over-up .drag-handle { + top: -5px; +} + +.react-grid-Cell:hover { + background: #eee; +} + +.react-grid-cell .form-control-feedback { + color: #a94442; + position: absolute; + top: 0px; + right: 10px; + z-index: 1000000; + display: block; + width: 34px; + height: 34px; +} +.react-grid-Cell.was-dragged-over { + border-right: 1px dashed black; + border-left: 1px dashed black; +} + +.react-grid-Cell:hover:focus .drag-handle { + position: absolute; + bottom: -8px; + right: -7px; + background: white; + width: 16px; + height: 16px; + border: 1px solid #66afe9; + z-index: 8; + cursor: crosshair; + cursor: -webkit-grab; +} + +.react-grid-Row.row-selected .react-grid-Cell{ + background-color: #DBECFA; +} + +.react-grid-Cell.editing { + padding: 0; + overflow: visible !important; +} +.react-grid-Cell.editing .has-error input { + border: 2px red solid !important; + border-radius: 2px !important; +} + +.react-grid-Cell__value ul { + margin-top: 0; + margin-bottom: 0; + display: inline-block; +} + +.react-grid-Cell__value .btn-sm { + padding: 0; +} + +.cell-tooltip { + position: relative; + display: inline-block; +} + +.cell-tooltip .cell-tooltip-text { + visibility: hidden; + width: 120px; + background-color: black; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px 0; + position: absolute; + z-index: 1; + bottom: -200%; + left: 50%; + margin-left: -60px; + /* Fade in tooltip - takes 1 second to go from 0% to 100% opacity */ + opacity: 0; + transition: opacity 1s; +} + +.cell-tooltip:hover .cell-tooltip-text { + visibility: visible; + opacity: 1; +} + +.react-grid-Canvas.opaque .react-grid-Cell.cell-tooltip:hover .cell-tooltip-text { + visibility: hidden; +} diff --git a/themes/react-data-grid-checkbox.css b/themes/react-data-grid-checkbox.css new file mode 100644 index 0000000000..a4ffdd5254 --- /dev/null +++ b/themes/react-data-grid-checkbox.css @@ -0,0 +1,53 @@ +.react-grid-checkbox, .radio-custom { + opacity: 0; + position: absolute; +} + +.react-grid-checkbox, .react-grid-checkbox-label, .radio-custom, .radio-custom-label { + display: inline-block; + vertical-align: middle; + margin: 10px; + cursor: pointer; +} + +.react-grid-checkbox-label, .radio-custom-label { + position: relative; +} + +.react-grid-checkbox + .react-grid-checkbox-label:before, .radio-custom + .radio-custom-label:before { + content: ''; + background: #fff; + border: 2px solid #ddd; + display: inline-block; + vertical-align: middle; + width: 20px; + height: 20px; + text-align: center; +} + +.react-grid-checkbox:checked + .react-grid-checkbox-label:before { + background: rebeccapurple; + box-shadow: inset 0px 0px 0px 4px #fff; +} + +.react-grid-checkbox:focus + .react-grid-checkbox-label, .radio-custom:focus + .radio-custom-label { + outline: 1px solid #ddd; /* focus style */ +} + +.react-grid-HeaderCell input[type='checkbox'] { + z-index: 99999; +} +.react-grid-HeaderCell > .react-grid-checkbox-container { + padding: 0px 10px; +} +.react-grid-HeaderCell > .react-grid-checkbox-container > .react-grid-checkbox-label { + margin : 0; +} +.radio-custom + .radio-custom-label:before { + border-radius: 50%; +} + +.radio-custom:checked + .radio-custom-label:before { + background: #ccc; + box-shadow: inset 0px 0px 0px 4px #fff; +} diff --git a/themes/react-data-grid-core.css b/themes/react-data-grid-core.css new file mode 100644 index 0000000000..c052651bad --- /dev/null +++ b/themes/react-data-grid-core.css @@ -0,0 +1,87 @@ +.react-grid-Container { + clear: both; + margin-top: 0; + padding: 0; +} + +.react-grid-Main { + background-color: #ffffff; + color: inherit; + padding: 0px; + outline: 1px solid #e7eaec; + clear : both; +} + +.react-grid-Grid { + background-color: #ffffff; + border: 1px solid #dddddd; +} + +.react-grid-Canvas { + background-color: #ffffff; +} + +.react-grid-Canvas.opaque .react-grid-Cell:not(.editing) { + opacity: 0.4; + transition: opacity .25s ease-in-out; + -moz-transition: opacity .25s ease-in-out; + -webkit-transition: opacity .25s ease-in-out; +} + +.react-grid-Cell input.editor-main, +select.editor-main { + display: block; + width: 100%; + height: 34px; + padding: 6px 12px; + font-size: 14px; + line-height: 1.42857143; + color: #555555; + background-color: #ffffff; + background-image: none; + border: 1px solid #cccccc; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; +} +input.editor-main:focus, +select.editor-main:focus { + border-color: #66afe9; + border: 2px solid #66afe9; + background: #eee; + border-radius: 4px; +} +.react-grid-Cell input.editor-main::-moz-placeholder, +select.editor-main::-moz-placeholder { + color: #999999; + opacity: 1; +} +.react-grid-Cell input.editor-main:-ms-input-placeholder, +select.editor-main:-ms-input-placeholder { + color: #999999; +} +.react-grid-Cell input.editor-main::-webkit-input-placeholder, +select.editor-main::-webkit-input-placeholder { + color: #999999; +} +.react-grid-Cell input.editor-main[disabled], +select.editor-main[disabled], +.react-grid-Cell input.editor-main[readonly], +select.editor-main[readonly], +fieldset[disabled] .react-grid-Cell input.editor-main, +fieldset[disabled] select.editor-main { + cursor: not-allowed; + background-color: #eeeeee; + opacity: 1; +} +textarea.react-grid-Cell input.editor-main, +textareaselect.editor-main { + height: auto; +} + +.react-grid-ScrollShim { + z-index: 10002; +} \ No newline at end of file diff --git a/themes/react-data-grid-drop-target.css b/themes/react-data-grid-drop-target.css new file mode 100644 index 0000000000..ef1603ff75 --- /dev/null +++ b/themes/react-data-grid-drop-target.css @@ -0,0 +1,55 @@ +.slideUp{ + animation-name: slideUp; + -webkit-animation-name: slideUp; + + animation-duration: 1s; + -webkit-animation-duration: 1s; + + animation-timing-function: ease; + -webkit-animation-timing-function: ease; + + visibility: visible !important; +} + +@keyframes slideUp { + 0% { + transform: translateY(100%); + } + 50%{ + transform: translateY(-8%); + } + 65%{ + transform: translateY(4%); + } + 80%{ + transform: translateY(-4%); + } + 95%{ + transform: translateY(2%); + } + 100% { + transform: translateY(0%); + } +} + + +@-webkit-keyframes slideUp { + 0% { + -webkit-transform: translateY(100%); + } + 50%{ + -webkit-transform: translateY(-8%); + } + 65%{ + -webkit-transform: translateY(4%); + } + 80%{ + -webkit-transform: translateY(-4%); + } + 95%{ + -webkit-transform: translateY(2%); + } + 100% { + -webkit-transform: translateY(0%); + } +} \ No newline at end of file diff --git a/themes/react-data-grid-header.css b/themes/react-data-grid-header.css new file mode 100644 index 0000000000..c867f871d1 --- /dev/null +++ b/themes/react-data-grid-header.css @@ -0,0 +1,45 @@ +.react-grid-Header { + box-shadow: 0px 0px 4px 0px #dddddd; + background: #f9f9f9; +} +.react-grid-Header--resizing { + cursor: ew-resize; +} +.react-grid-HeaderRow { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.react-grid-HeaderCell { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background: #f9f9f9; + padding: 8px; + font-weight: bold; + border-right: 1px solid #dddddd; + border-bottom: 1px solid #dddddd; +} +.react-grid-HeaderCell__value { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + position: relative; + top: 50%; + transform: translateY(-50%); +} +.react-grid-HeaderCell__resizeHandle:hover { + cursor: ew-resize; + background: #dddddd; +} +.react-grid-HeaderCell--locked:last-of-type { + box-shadow: none; +} +.react-grid-HeaderCell--resizing .react-grid-HeaderCell__resizeHandle { + background: #dddddd; +} +.react-grid-HeaderCell__draggable { + cursor: col-resize +} \ No newline at end of file diff --git a/themes/react-data-grid-image.css b/themes/react-data-grid-image.css new file mode 100644 index 0000000000..2449ae3f16 --- /dev/null +++ b/themes/react-data-grid-image.css @@ -0,0 +1,7 @@ +.react-grid-image { + background: #efefef; + background-size: 100%; + display: inline-block; + height: 40px; + width: 40px; +} \ No newline at end of file diff --git a/themes/react-data-grid-row.css b/themes/react-data-grid-row.css new file mode 100644 index 0000000000..ab37501d29 --- /dev/null +++ b/themes/react-data-grid-row.css @@ -0,0 +1,70 @@ +.react-grid-Row:hover .react-grid-Cell, +.react-grid-Row.row-context-menu .react-grid-Cell { + background-color: #f2f2f2; +} + +.react-grid-Row:hover .rdg-row-index { + display: none; +} + +.react-grid-Row:hover .rdg-actions-checkbox { + display: block; +} + +.react-grid-Row:hover .rdg-drag-row-handle { + cursor: move; /* fallback if grab cursor is unsupported */ + cursor: grab; + cursor: -moz-grab; + cursor: -webkit-grab; + width: 12px; + height: 30px; + margin-left: 3px; + background-image: url("data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjlweCIgaGVpZ2h0PSIyOXB4IiB2aWV3Qm94PSIwIDAgOSAyOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMzkgKDMxNjY3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5kcmFnIGljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iQWN0dWFsaXNhdGlvbi12MiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkRlc2t0b3AiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNS4wMDAwMDAsIC0yNjIuMDAwMDAwKSIgZmlsbD0iI0Q4RDhEOCI+CiAgICAgICAgICAgIDxnIGlkPSJJbnRlcmFjdGlvbnMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE1LjAwMDAwMCwgMjU4LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlJvdy1Db250cm9scyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDIuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImRyYWctaWNvbiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDIuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSIyIiBjeT0iMiIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSI3IiBjeT0iMiIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSIyIiBjeT0iNyIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSI3IiBjeT0iNyIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSIyIiBjeT0iMTIiIHI9IjIiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTMwIiBjeD0iNyIgY3k9IjEyIiByPSIyIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0zMCIgY3g9IjIiIGN5PSIxNyIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSI3IiBjeT0iMTciIHI9IjIiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTMwIiBjeD0iMiIgY3k9IjIyIiByPSIyIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0zMCIgY3g9IjciIGN5PSIyMiIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSIyIiBjeT0iMjciIHI9IjIiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTMwIiBjeD0iNyIgY3k9IjI3IiByPSIyIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="); + background-repeat: no-repeat; +} + +.react-grid-Row.row-selected{ + background-color: #DBECFA; +} + +.react-grid-Row .row-selected{ + background-color: #DBECFA; +} + +.react-grid-row-group .row-expand-icon:hover { + color: #777777; +} + +.react-grid-row-index { + padding: 0 18px; +} + +.rdg-row-index { + display: block; + text-align: center; +} + +.rdg-row-actions-cell { + padding: 0px; +} + +.rdg-actions-checkbox { + display: none; + text-align: center; +} + +.rdg-actions-checkbox.selected { + display: block; +} + +.rdg-dragging { + /*cursor: url(http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur);*/ + cursor: -webkit-grabbing; + cursor: -moz-grabbing; + cursor: grabbing; +} + +.rdg-dragged-row { + border-bottom: 1px solid black +} + diff --git a/themes/react-data-grid-toolbar.css b/themes/react-data-grid-toolbar.css new file mode 100644 index 0000000000..d6ff3acf9c --- /dev/null +++ b/themes/react-data-grid-toolbar.css @@ -0,0 +1,48 @@ +.react-grid-Toolbar { + background-color: #ffffff; + border-color: #e7eaec; + border-image: none; + border-style: solid solid none; + border-width: 1px 1px 1px 1px; + color: inherit; + margin-bottom: 0; + padding: 14px 15px 7px; + height: 48px; +} +.react-grid-Toolbar .btn { + display: inline-block; + padding: 6px 12px; + margin-bottom: 0; + font-size: 14px; + font-weight: 400; + line-height: 1.42857143; + text-align: center; + white-space: nowrap; + vertical-align: middle; + -ms-touch-action: manipulation; + touch-action: manipulation; + cursor: pointer; + -webkit-user-select: none; + color: inherit; + background: white; + border: 1px solid #e7eaec; +} +.react-grid-Toolbar .btn:hover { + color: inherit; + border: 1px solid #d2d2d2; +} +.react-grid-Toolbar .grouped-col-btn { + background-color: #428bca; + color: white; +} +.react-grid-Toolbar .grouped-col-btn:hover { + color: white; +} +.react-grid-Toolbar .tools { + display: inline-block; + float: right; + margin-top: 0; + position: relative; + padding: 0; + margin-top: -6px; +} \ No newline at end of file diff --git a/themes/react-data-grid-viewport.css b/themes/react-data-grid-viewport.css new file mode 100644 index 0000000000..5a3f83378c --- /dev/null +++ b/themes/react-data-grid-viewport.css @@ -0,0 +1,9 @@ +.react-grid-Viewport { + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Chrome/Safari/Opera */ + -khtml-user-select: none; /* Konqueror */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently + not supported by any browser */ +} \ No newline at end of file diff --git a/themes/react-data-grid.css b/themes/react-data-grid.css deleted file mode 100644 index f62218f8c0..0000000000 --- a/themes/react-data-grid.css +++ /dev/null @@ -1,662 +0,0 @@ -@import './node_modules/react-select/less/select.less'; - -.react-grid-Container { - clear: both; - margin-top: 0; - padding: 0; -} - -.react-grid-Toolbar { - background-color: #ffffff; - border-color: #e7eaec; - border-image: none; - border-style: solid solid none; - border-width: 1px 1px 1px 1px; - color: inherit; - margin-bottom: 0; - padding: 14px 15px 7px; - height: 48px; -} - -.react-grid-Toolbar .btn{ - display: inline-block; - padding: 6px 12px; - margin-bottom: 0; - font-size: 14px; - font-weight: 400; - line-height: 1.42857143; - text-align: center; - white-space: nowrap; - vertical-align: middle; - -ms-touch-action: manipulation; - touch-action: manipulation; - cursor: pointer; - -webkit-user-select: none; - color: inherit; - background: white; - border: 1px solid #e7eaec; -} - -.react-grid-Toolbar .btn:hover { - color: inherit; - border: 1px solid #d2d2d2; -} - -.react-grid-Toolbar .grouped-col-btn{ - background-color: #428bca; - color: white; -} - -.react-grid-Toolbar .grouped-col-btn:hover{ - color: white; -} - - - -.react-grid-Toolbar .tools { - display: inline-block; - float: right; - margin-top: 0; - position: relative; - padding: 0; - margin-top: -6px; -} - -.react-grid-Main { - background-color: #ffffff; - color: inherit; - padding: 0px; - outline: 1px solid #e7eaec; - clear : both; -} - -.react-grid-Grid { - background-color: #ffffff; - border: 1px solid #dddddd; - will-change: transform; -} -.react-grid-Canvas { - background-color: #ffffff; - will-change: transform; -} -.react-grid-Cell { - background-color: #ffffff; - padding-left: 8px; - padding-right: 8px; - border-right: 1px solid #eee; - border-bottom: 1px solid #dddddd; -} - -.react-grid-Cell:focus { - border-color: #66afe9; - border: 2px solid #66afe9; -} - -.react-grid-Cell:focus .drag-handle { - position: absolute; - bottom: -5px; - right: -4px; - background: #66afe9; - width: 8px; - height: 8px; - border: 1px solid #fff; - border-right: 0px; - border-bottom: 0px; - z-index: 8; - cursor: crosshair; - cursor: -webkit-grab; -} - -.react-grid-Cell:not(.editing) .react-grid-Cell__value { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - position: relative; - top: 50%; - transform: translateY(-50%); -} - -.react-grid-Canvas.opaque .react-grid-Cell:not(.editing) { - opacity: 0.4; - transition: opacity .25s ease-in-out; - -moz-transition: opacity .25s ease-in-out; - -webkit-transition: opacity .25s ease-in-out; -} - -.react-grid-Cell__value ul { - margin-top: 0; - margin-bottom: 0; - display: inline-block; -} -.react-grid-Cell__value .btn-sm { - padding: 0; -} -.react-grid-Cell.copied { - background: rgba(0, 0, 255, 0.2) !important; - -webkit-transition: 0.5s background; -} -.react-grid-Row:hover .react-grid-Cell, -.react-grid-Row.row-context-menu .react-grid-Cell { - background-color: #f2f2f2; -} - -.react-grid-Row:hover .rdg-row-index { - display: none; -} - -.rdg-row-index { - display: block; - text-align: center; -} - -.rdg-row-actions-cell { - padding: 0px; -} - -.rdg-actions-checkbox { - display: none; - text-align: center; -} - -.rdg-actions-checkbox.selected { - display: block; -} - -.react-grid-Row:hover .rdg-actions-checkbox { - display: block; -} - -.react-grid-Row:hover .rdg-drag-row-handle { - cursor: move; /* fallback if grab cursor is unsupported */ - cursor: grab; - cursor: -moz-grab; - cursor: -webkit-grab; - width: 12px; - height: 30px; - margin-left: 3px; - background-image: url("data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjlweCIgaGVpZ2h0PSIyOXB4IiB2aWV3Qm94PSIwIDAgOSAyOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMzkgKDMxNjY3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5kcmFnIGljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iQWN0dWFsaXNhdGlvbi12MiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkRlc2t0b3AiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNS4wMDAwMDAsIC0yNjIuMDAwMDAwKSIgZmlsbD0iI0Q4RDhEOCI+CiAgICAgICAgICAgIDxnIGlkPSJJbnRlcmFjdGlvbnMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE1LjAwMDAwMCwgMjU4LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlJvdy1Db250cm9scyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDIuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImRyYWctaWNvbiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDIuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSIyIiBjeT0iMiIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSI3IiBjeT0iMiIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSIyIiBjeT0iNyIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSI3IiBjeT0iNyIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSIyIiBjeT0iMTIiIHI9IjIiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTMwIiBjeD0iNyIgY3k9IjEyIiByPSIyIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0zMCIgY3g9IjIiIGN5PSIxNyIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSI3IiBjeT0iMTciIHI9IjIiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTMwIiBjeD0iMiIgY3k9IjIyIiByPSIyIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0zMCIgY3g9IjciIGN5PSIyMiIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSIyIiBjeT0iMjciIHI9IjIiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTMwIiBjeD0iNyIgY3k9IjI3IiByPSIyIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="); - background-repeat: no-repeat; -} - -.rdg-dragging { - /*cursor: url(http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur);*/ - cursor: -webkit-grabbing; - cursor: -moz-grabbing; - cursor: grabbing; -} - -.rdg-dragged-row { - border-bottom: 1px solid black -} - -@keyframes pulse { - 0% { - background-color: #ff0; - } - 50% { - background-color: #fff; - } - 100% { - background-color: #ff0; - } -} - -.react-grid-Cell.editing { - padding: 0; - overflow: visible !important; -} -.react-grid-Cell.editing .has-error input { - border: 2px red solid !important; - border-radius: 2px !important; -} -.react-grid-Cell input.editor-main, -select.editor-main { - display: block; - width: 100%; - height: 34px; - padding: 6px 12px; - font-size: 14px; - line-height: 1.42857143; - color: #555555; - background-color: #ffffff; - background-image: none; - border: 1px solid #cccccc; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; - -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; - transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -} -input.editor-main:focus, -select.editor-main:focus { - border-color: #66afe9; - border: 2px solid #66afe9; - background: #eee; - border-radius: 4px; -} -.react-grid-Cell input.editor-main::-moz-placeholder, -select.editor-main::-moz-placeholder { - color: #999999; - opacity: 1; -} -.react-grid-Cell input.editor-main:-ms-input-placeholder, -select.editor-main:-ms-input-placeholder { - color: #999999; -} -.react-grid-Cell input.editor-main::-webkit-input-placeholder, -select.editor-main::-webkit-input-placeholder { - color: #999999; -} -.react-grid-Cell input.editor-main[disabled], -select.editor-main[disabled], -.react-grid-Cell input.editor-main[readonly], -select.editor-main[readonly], -fieldset[disabled] .react-grid-Cell input.editor-main, -fieldset[disabled] select.editor-main { - cursor: not-allowed; - background-color: #eeeeee; - opacity: 1; -} -textarea.react-grid-Cell input.editor-main, -textareaselect.editor-main { - height: auto; -} - -.react-grid-checkbox, .radio-custom { - opacity: 0; - position: absolute; -} - -.react-grid-checkbox, .react-grid-checkbox-label, .radio-custom, .radio-custom-label { - display: inline-block; - vertical-align: middle; - margin: 10px; - cursor: pointer; -} - -.react-grid-checkbox-label, .radio-custom-label { - position: relative; -} - -.react-grid-checkbox + .react-grid-checkbox-label:before, .radio-custom + .radio-custom-label:before { - content: ''; - background: #fff; - border: 2px solid #ddd; - display: inline-block; - vertical-align: middle; - width: 20px; - height: 20px; - text-align: center; -} - -.react-grid-checkbox:checked + .react-grid-checkbox-label:before { - background: rebeccapurple; - box-shadow: inset 0px 0px 0px 4px #fff; -} - -.radio-custom + .radio-custom-label:before { - border-radius: 50%; -} - -.radio-custom:checked + .radio-custom-label:before { - background: #ccc; - box-shadow: inset 0px 0px 0px 4px #fff; -} - - -.react-grid-checkbox:focus + .react-grid-checkbox-label, .radio-custom:focus + .radio-custom-label { - outline: 1px solid #ddd; /* focus style */ -} - - -.react-grid-HeaderCell input[type='checkbox'] { - z-index: 99999; -} -.react-grid-HeaderCell > .react-grid-checkbox-container { - padding: 0px 10px; -} -.react-grid-HeaderCell > .react-grid-checkbox-container > .react-grid-checkbox-label { - margin : 0; -} -.react-grid-Header { - box-shadow: 0px 0px 4px 0px #dddddd; - background: #f9f9f9; -} -.react-grid-Header--resizing { - cursor: ew-resize; -} -.react-grid-HeaderRow { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.react-grid-HeaderCell { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background: #f9f9f9; - padding: 8px; - font-weight: bold; - border-right: 1px solid #dddddd; - border-bottom: 1px solid #dddddd; -} -.react-grid-HeaderCell__value { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - position: relative; - top: 50%; - transform: translateY(-50%); -} -.react-grid-HeaderCell__resizeHandle:hover { - cursor: ew-resize; - background: #dddddd; -} -.react-grid-HeaderCell--locked:last-of-type { - box-shadow: none; -} -.react-grid-HeaderCell--resizing .react-grid-HeaderCell__resizeHandle { - background: #dddddd; -} -.react-grid-HeaderCell__draggable { - cursor: col-resize -} -.react-grid-ScrollShim { - z-index: 10002; -} -.react-grid-cell .form-control-feedback { - color: #a94442; - position: absolute; - top: 0px; - right: 10px; - z-index: 1000000; - display: block; - width: 34px; - height: 34px; -} -.react-grid-Cell.was-dragged-over { - border-right: 1px dashed black; - border-left: 1px dashed black; -} - -.react-grid-Cell:hover:focus .drag-handle { - position: absolute; - bottom: -8px; - right: -7px; - background: white; - width: 16px; - height: 16px; - border: 1px solid #66afe9; - /* border-right: 0px; */ - /* border-bottom: 0px; */ - z-index: 8; - cursor: crosshair; - cursor: -webkit-grab; -} - -.react-grid-Cell:hover:focus .drag-handle .glyphicon-arrow-down { - display: 'block' -} - -.react-grid-Cell.is-dragged-over-down { - border-right: 1px dashed black; - border-left: 1px dashed black; - border-bottom: 1px dashed black; -} -.react-grid-Cell.is-dragged-over-up { - border-right: 1px dashed black; - border-left: 1px dashed black; - border-top: 1px dashed black; -} -.react-grid-Cell.is-dragged-over-up .drag-handle { - top: -5px; -} - -.react-grid-Cell:hover { - background: #eee; -} - -.react-grid-Row.row-selected .react-grid-Cell{ - background-color: #DBECFA; -} - -.react-grid-Row.row-selected{ - background-color: #DBECFA; -} - -.react-grid-Row .row-selected{ - background-color: #DBECFA; -} - -.react-grid-row-group .row-expand-icon:hover { - color: #777777; -} - -.react-grid-row-index { - padding: 0 18px; -} -.react-grid-Cell--locked:last-of-type { - border-right: 1px solid #dddddd; - box-shadow: none; - z-index:99; -} - -.react-grid-image { - background: #efefef; - background-size: 100%; - display: inline-block; - height: 40px; - width: 40px; -} -.react-autocomplete-Autocomplete__search { - display: block; - width: 100%; - height: 36px; - padding: 6px 12px; - font-size: 14px; - line-height: 1.6; - color: #555555; - background-color: white; - background-image: none; - border: 1px solid #cccccc; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; - -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; - transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -} -.react-autocomplete-Autocomplete__search:focus { - border-color: #a21618; - outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(162, 22, 24, 0.6); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(162, 22, 24, 0.6); -} -.react-autocomplete-Autocomplete__search::-moz-placeholder { - color: #777777; - opacity: 1; -} -.react-autocomplete-Autocomplete__search:-ms-input-placeholder { - color: #777777; -} -.react-autocomplete-Autocomplete__search::-webkit-input-placeholder { - color: #777777; -} -.react-autocomplete-Autocomplete__search[disabled], -.react-autocomplete-Autocomplete__search[readonly], -fieldset[disabled] .react-autocomplete-Autocomplete__search { - cursor: not-allowed; - background-color: #eeeeee; - opacity: 1; -} -textarea.react-autocomplete-Autocomplete__search { - height: auto; -} -.react-autocomplete-Autocomplete__results { - position: absolute; - top: 100%; - left: 0; - z-index: 1000; - display: none; - float: left; - min-width: 160px; - padding: 5px 0; - margin: 2px 0 0; - list-style: none; - font-size: 14px; - text-align: left; - background-color: white; - border: 1px solid #cccccc; - border: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 4px; - -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); - background-clip: padding-box; - min-width: 250px; - width: 100%; - max-height: 200px; - overflow: auto; -} -.react-autocomplete-Autocomplete__results.pull-right { - right: 0; - left: auto; -} -.react-autocomplete-Autocomplete__results .divider { - height: 1px; - margin: 10px 0; - overflow: hidden; - background-color: #e5e5e5; -} -.react-autocomplete-Autocomplete__results > li > a { - display: block; - padding: 3px 20px; - clear: both; - font-weight: normal; - line-height: 1.6; - color: #333333; - white-space: nowrap; -} -.react-autocomplete-Autocomplete__results div.action-button { - display: block !important; - padding: 4px; -} -.react-autocomplete-Result { - cursor: pointer; -} -.react-autocomplete-Result > a { - text-decoration: none; -} -.react-autocomplete-Result--active { - color: #262626; - background-color: whitesmoke; -} - -.react-grid-Cell.readonly { - background-color : black; -} - -.react-grid-Viewport { - -webkit-touch-callout: none; /* iOS Safari */ - -webkit-user-select: none; /* Chrome/Safari/Opera */ - -khtml-user-select: none; /* Konqueror */ - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* Internet Explorer/Edge */ - user-select: none; /* Non-prefixed version, currently - not supported by any browser */ -} - - -.slideUp{ - animation-name: slideUp; - -webkit-animation-name: slideUp; - - animation-duration: 1s; - -webkit-animation-duration: 1s; - - animation-timing-function: ease; - -webkit-animation-timing-function: ease; - - visibility: visible !important; -} - -@keyframes slideUp { - 0% { - transform: translateY(100%); - } - 50%{ - transform: translateY(-8%); - } - 65%{ - transform: translateY(4%); - } - 80%{ - transform: translateY(-4%); - } - 95%{ - transform: translateY(2%); - } - 100% { - transform: translateY(0%); - } -} - -@-webkit-keyframes slideUp { - 0% { - -webkit-transform: translateY(100%); - } - 50%{ - -webkit-transform: translateY(-8%); - } - 65%{ - -webkit-transform: translateY(4%); - } - 80%{ - -webkit-transform: translateY(-4%); - } - 95%{ - -webkit-transform: translateY(2%); - } - 100% { - -webkit-transform: translateY(0%); - } -} - -.cell-tooltip { - position: relative; - display: inline-block; -} - -.cell-tooltip .cell-tooltip-text { - visibility: hidden; - width: 75%; - background-color: black; - color: #fff; - text-align: center; - border-radius: 6px; - padding: 2px 2px; - position: absolute; - top: 50%; - margin-left: -37%; - bottom: initial; -} - -.cell-tooltip .cell-tooltip-text::after { - content: " "; - position: absolute; - left: 50%; - margin-left: -5px; - border-width: 5px; - border-style: solid; - border-color: transparent transparent black transparent; - } - -.react-grid-Cell.cell-tooltip:hover .cell-tooltip-text { - visibility: visible; -} - -.react-grid-Canvas.opaque .react-grid-Cell.cell-tooltip:hover .cell-tooltip-text { - visibility: hidden; -} diff --git a/themes/react-data-grid.less b/themes/react-data-grid.less deleted file mode 100644 index 638416f32b..0000000000 --- a/themes/react-data-grid.less +++ /dev/null @@ -1,653 +0,0 @@ -@import './node_modules/react-select/less/select.less'; - -.react-grid-Container { - clear: both; - margin-top: 0; - padding: 0; -} - -.react-grid-Toolbar { - background-color: #ffffff; - border-color: #e7eaec; - border-image: none; - border-style: solid solid none; - border-width: 1px 1px 1px 1px; - color: inherit; - margin-bottom: 0; - padding: 14px 15px 7px; - height: 48px; -} - -.react-grid-Toolbar .btn{ - display: inline-block; - padding: 6px 12px; - margin-bottom: 0; - font-size: 14px; - font-weight: 400; - line-height: 1.42857143; - text-align: center; - white-space: nowrap; - vertical-align: middle; - -ms-touch-action: manipulation; - touch-action: manipulation; - cursor: pointer; - -webkit-user-select: none; - color: inherit; - background: white; - border: 1px solid #e7eaec; -} - -.react-grid-Toolbar .btn:hover { - color: inherit; - border: 1px solid #d2d2d2; -} - -.react-grid-Toolbar .grouped-col-btn{ - background-color: #428bca; - color: white; -} - -.react-grid-Toolbar .grouped-col-btn:hover{ - color: white; -} - - - -.react-grid-Toolbar .tools { - display: inline-block; - float: right; - margin-top: 0; - position: relative; - padding: 0; - margin-top: -6px; -} - -.react-grid-Main { - background-color: #ffffff; - color: inherit; - padding: 0px; - outline: 1px solid #e7eaec; - clear : both; -} - -.react-grid-Grid { - background-color: #ffffff; - border: 1px solid #dddddd; -} -.react-grid-Canvas { - background-color: #ffffff; -} -.react-grid-Cell { - background-color: #ffffff; - padding-left: 8px; - padding-right: 8px; - border-right: 1px solid #eee; - border-bottom: 1px solid #dddddd; -} - -.react-grid-Cell:focus { - outline: 2px solid #66afe9; - outline-offset: -2px; -} - -.react-grid-Cell:focus .drag-handle { - position: absolute; - bottom: -5px; - right: -4px; - background: #66afe9; - width: 8px; - height: 8px; - border: 1px solid #fff; - border-right: 0px; - border-bottom: 0px; - z-index: 8; - cursor: crosshair; - cursor: -webkit-grab; -} - -.react-grid-Cell:not(.editing) .react-grid-Cell__value { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - position: relative; - top: 50%; - transform: translateY(-50%); -} - -.react-grid-Canvas.opaque .react-grid-Cell:not(.editing) { - opacity: 0.4; - transition: opacity .25s ease-in-out; - -moz-transition: opacity .25s ease-in-out; - -webkit-transition: opacity .25s ease-in-out; -} -.react-grid-Cell__value ul { - margin-top: 0; - margin-bottom: 0; - display: inline-block; -} -.react-grid-Cell__value .btn-sm { - padding: 0; -} -.react-grid-Cell.copied { - background: rgba(0, 0, 255, 0.2) !important; - -webkit-transition: 0.5s background; -} -.react-grid-Row:hover .react-grid-Cell, -.react-grid-Row.row-context-menu .react-grid-Cell { - background-color: #f2f2f2; -} - -.react-grid-Row:hover .rdg-row-index { - display: none; -} - -.rdg-row-index { - display: block; - text-align: center; -} - -.rdg-row-actions-cell { - padding: 0px; -} - -.rdg-actions-checkbox { - display: none; - text-align: center; -} - -.rdg-actions-checkbox.selected { - display: block; -} - -.react-grid-Row:hover .rdg-actions-checkbox { - display: block; -} - -.react-grid-Row:hover .rdg-drag-row-handle { - cursor: move; /* fallback if grab cursor is unsupported */ - cursor: grab; - cursor: -moz-grab; - cursor: -webkit-grab; - width: 12px; - height: 30px; - margin-left: 3px; - background-image: url("data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjlweCIgaGVpZ2h0PSIyOXB4IiB2aWV3Qm94PSIwIDAgOSAyOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMzkgKDMxNjY3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5kcmFnIGljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iQWN0dWFsaXNhdGlvbi12MiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkRlc2t0b3AiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNS4wMDAwMDAsIC0yNjIuMDAwMDAwKSIgZmlsbD0iI0Q4RDhEOCI+CiAgICAgICAgICAgIDxnIGlkPSJJbnRlcmFjdGlvbnMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE1LjAwMDAwMCwgMjU4LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlJvdy1Db250cm9scyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDIuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImRyYWctaWNvbiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDIuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSIyIiBjeT0iMiIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSI3IiBjeT0iMiIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSIyIiBjeT0iNyIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSI3IiBjeT0iNyIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSIyIiBjeT0iMTIiIHI9IjIiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTMwIiBjeD0iNyIgY3k9IjEyIiByPSIyIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0zMCIgY3g9IjIiIGN5PSIxNyIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSI3IiBjeT0iMTciIHI9IjIiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTMwIiBjeD0iMiIgY3k9IjIyIiByPSIyIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0zMCIgY3g9IjciIGN5PSIyMiIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSIyIiBjeT0iMjciIHI9IjIiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTMwIiBjeD0iNyIgY3k9IjI3IiByPSIyIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="); - background-repeat: no-repeat; -} - -.rdg-dragging { - /*cursor: url(http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur);*/ - cursor: -webkit-grabbing; - cursor: -moz-grabbing; - cursor: grabbing; -} - -.rdg-dragged-row { - border-bottom: 1px solid black -} - -@keyframes pulse { - 0% { - background-color: #ff0; - } - 50% { - background-color: #fff; - } - 100% { - background-color: #ff0; - } -} - -.react-grid-Cell.editing { - padding: 0; - overflow: visible !important; -} -.react-grid-Cell.editing .has-error input { - border: 2px red solid !important; - border-radius: 2px !important; -} -.react-grid-Cell input.editor-main, -select.editor-main { - display: block; - width: 100%; - height: 34px; - padding: 6px 12px; - font-size: 14px; - line-height: 1.42857143; - color: #555555; - background-color: #ffffff; - background-image: none; - border: 1px solid #cccccc; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; - -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; - transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -} -input.editor-main:focus, -select.editor-main:focus { - border-color: #66afe9; - border: 2px solid #66afe9; - background: #eee; - border-radius: 4px; -} -.react-grid-Cell input.editor-main::-moz-placeholder, -select.editor-main::-moz-placeholder { - color: #999999; - opacity: 1; -} -.react-grid-Cell input.editor-main:-ms-input-placeholder, -select.editor-main:-ms-input-placeholder { - color: #999999; -} -.react-grid-Cell input.editor-main::-webkit-input-placeholder, -select.editor-main::-webkit-input-placeholder { - color: #999999; -} -.react-grid-Cell input.editor-main[disabled], -select.editor-main[disabled], -.react-grid-Cell input.editor-main[readonly], -select.editor-main[readonly], -fieldset[disabled] .react-grid-Cell input.editor-main, -fieldset[disabled] select.editor-main { - cursor: not-allowed; - background-color: #eeeeee; - opacity: 1; -} -textarea.react-grid-Cell input.editor-main, -textareaselect.editor-main { - height: auto; -} - -.react-grid-checkbox, .radio-custom { - opacity: 0; - position: absolute; -} - -.react-grid-checkbox, .react-grid-checkbox-label, .radio-custom, .radio-custom-label { - display: inline-block; - vertical-align: middle; - margin: 10px; - cursor: pointer; -} - -.react-grid-checkbox-label, .radio-custom-label { - position: relative; -} - -.react-grid-checkbox + .react-grid-checkbox-label:before, .radio-custom + .radio-custom-label:before { - content: ''; - background: #fff; - border: 2px solid #ddd; - display: inline-block; - vertical-align: middle; - width: 20px; - height: 20px; - text-align: center; -} - -.react-grid-checkbox:checked + .react-grid-checkbox-label:before { - background: rebeccapurple; - box-shadow: inset 0px 0px 0px 4px #fff; -} - -.radio-custom + .radio-custom-label:before { - border-radius: 50%; -} - -.radio-custom:checked + .radio-custom-label:before { - background: #ccc; - box-shadow: inset 0px 0px 0px 4px #fff; -} - - -.react-grid-checkbox:focus + .react-grid-checkbox-label, .radio-custom:focus + .radio-custom-label { - outline: 1px solid #ddd; /* focus style */ -} - - -.react-grid-HeaderCell input[type='checkbox'] { - z-index: 99999; -} -.react-grid-HeaderCell > .react-grid-checkbox-container { - padding: 0px 10px; -} -.react-grid-HeaderCell > .react-grid-checkbox-container > .react-grid-checkbox-label { - margin : 0; -} -.react-grid-Header { - box-shadow: 0px 0px 4px 0px #dddddd; - background: #f9f9f9; -} -.react-grid-Header--resizing { - cursor: ew-resize; -} -.react-grid-HeaderRow { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.react-grid-HeaderCell { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background: #f9f9f9; - padding: 8px; - font-weight: bold; - border-right: 1px solid #dddddd; - border-bottom: 1px solid #dddddd; -} -.react-grid-HeaderCell__value { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - position: relative; - top: 50%; - transform: translateY(-50%); -} -.react-grid-HeaderCell__resizeHandle:hover { - cursor: ew-resize; - background: #dddddd; -} -.react-grid-HeaderCell--locked:last-of-type { - box-shadow: none; -} -.react-grid-HeaderCell--resizing .react-grid-HeaderCell__resizeHandle { - background: #dddddd; -} -.react-grid-HeaderCell__draggable { - cursor: col-resize -} -.react-grid-ScrollShim { - z-index: 10002; -} -.react-grid-cell .form-control-feedback { - color: #a94442; - position: absolute; - top: 0px; - right: 10px; - z-index: 1000000; - display: block; - width: 34px; - height: 34px; -} -.react-grid-Cell.was-dragged-over { - border-right: 1px dashed black; - border-left: 1px dashed black; -} - -.react-grid-Cell:hover:focus .drag-handle { - position: absolute; - bottom: -8px; - right: -7px; - background: white; - width: 16px; - height: 16px; - border: 1px solid #66afe9; - /* border-right: 0px; */ - /* border-bottom: 0px; */ - z-index: 8; - cursor: crosshair; - cursor: -webkit-grab; -} - -.react-grid-Cell:hover:focus .drag-handle .glyphicon-arrow-down { - display: 'block' -} - -.react-grid-Cell.is-dragged-over-down { - border-right: 1px dashed black; - border-left: 1px dashed black; - border-bottom: 1px dashed black; -} -.react-grid-Cell.is-dragged-over-up { - border-right: 1px dashed black; - border-left: 1px dashed black; - border-top: 1px dashed black; -} -.react-grid-Cell.is-dragged-over-up .drag-handle { - top: -5px; -} - -.react-grid-Cell:hover { - background: #eee; -} - -.react-grid-Row.row-selected .react-grid-Cell{ - background-color: #DBECFA; -} - -.react-grid-Row.row-selected{ - background-color: #DBECFA; -} - -.react-grid-Row .row-selected{ - background-color: #DBECFA; -} - -.react-grid-row-group .row-expand-icon:hover { - color: #777777; -} - -.react-grid-row-index { - padding: 0 18px; -} -.react-grid-Cell--locked:last-of-type { - border-right: 1px solid #dddddd; - box-shadow: none; - z-index:99; -} - -.react-grid-image { - background: #efefef; - background-size: 100%; - display: inline-block; - height: 40px; - width: 40px; -} -.react-autocomplete-Autocomplete__search { - display: block; - width: 100%; - height: 36px; - padding: 6px 12px; - font-size: 14px; - line-height: 1.6; - color: #555555; - background-color: white; - background-image: none; - border: 1px solid #cccccc; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; - -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; - transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -} -.react-autocomplete-Autocomplete__search:focus { - border-color: #a21618; - outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(162, 22, 24, 0.6); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(162, 22, 24, 0.6); -} -.react-autocomplete-Autocomplete__search::-moz-placeholder { - color: #777777; - opacity: 1; -} -.react-autocomplete-Autocomplete__search:-ms-input-placeholder { - color: #777777; -} -.react-autocomplete-Autocomplete__search::-webkit-input-placeholder { - color: #777777; -} -.react-autocomplete-Autocomplete__search[disabled], -.react-autocomplete-Autocomplete__search[readonly], -fieldset[disabled] .react-autocomplete-Autocomplete__search { - cursor: not-allowed; - background-color: #eeeeee; - opacity: 1; -} -textarea.react-autocomplete-Autocomplete__search { - height: auto; -} -.react-autocomplete-Autocomplete__results { - position: absolute; - top: 100%; - left: 0; - z-index: 1000; - display: none; - float: left; - min-width: 160px; - padding: 5px 0; - margin: 2px 0 0; - list-style: none; - font-size: 14px; - text-align: left; - background-color: white; - border: 1px solid #cccccc; - border: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 4px; - -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); - background-clip: padding-box; - min-width: 250px; - width: 100%; - max-height: 200px; - overflow: auto; -} -.react-autocomplete-Autocomplete__results.pull-right { - right: 0; - left: auto; -} -.react-autocomplete-Autocomplete__results .divider { - height: 1px; - margin: 10px 0; - overflow: hidden; - background-color: #e5e5e5; -} -.react-autocomplete-Autocomplete__results > li > a { - display: block; - padding: 3px 20px; - clear: both; - font-weight: normal; - line-height: 1.6; - color: #333333; - white-space: nowrap; -} -.react-autocomplete-Autocomplete__results div.action-button { - display: block !important; - padding: 4px; -} -.react-autocomplete-Result { - cursor: pointer; -} -.react-autocomplete-Result > a { - text-decoration: none; -} -.react-autocomplete-Result--active { - color: #262626; - background-color: whitesmoke; -} - -.react-grid-Cell.readonly { - background-color : black; -} - -.react-grid-Viewport { - -webkit-touch-callout: none; /* iOS Safari */ - -webkit-user-select: none; /* Chrome/Safari/Opera */ - -khtml-user-select: none; /* Konqueror */ - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* Internet Explorer/Edge */ - user-select: none; /* Non-prefixed version, currently - not supported by any browser */ -} - - -.slideUp{ - animation-name: slideUp; - -webkit-animation-name: slideUp; - - animation-duration: 1s; - -webkit-animation-duration: 1s; - - animation-timing-function: ease; - -webkit-animation-timing-function: ease; - - visibility: visible !important; -} - -@keyframes slideUp { - 0% { - transform: translateY(100%); - } - 50%{ - transform: translateY(-8%); - } - 65%{ - transform: translateY(4%); - } - 80%{ - transform: translateY(-4%); - } - 95%{ - transform: translateY(2%); - } - 100% { - transform: translateY(0%); - } -} - -@-webkit-keyframes slideUp { - 0% { - -webkit-transform: translateY(100%); - } - 50%{ - -webkit-transform: translateY(-8%); - } - 65%{ - -webkit-transform: translateY(4%); - } - 80%{ - -webkit-transform: translateY(-4%); - } - 95%{ - -webkit-transform: translateY(2%); - } - 100% { - -webkit-transform: translateY(0%); - } -} -.cell-tooltip { - position: relative; - display: inline-block; -} - -.cell-tooltip .cell-tooltip-text { - visibility: hidden; - width: 120px; - background-color: black; - color: #fff; - text-align: center; - border-radius: 6px; - padding: 5px 0; - position: absolute; - z-index: 1; - bottom: -200%; - left: 50%; - margin-left: -60px; - /* Fade in tooltip - takes 1 second to go from 0% to 100% opacity */ - opacity: 0; - transition: opacity 1s; -} - -.cell-tooltip:hover .cell-tooltip-text { - visibility: visible; - opacity: 1; -} - -.react-grid-Canvas.opaque .react-grid-Cell.cell-tooltip:hover .cell-tooltip-text { - visibility: hidden; -} diff --git a/themes/react-grid-ScrollShim.css b/themes/react-grid-ScrollShim.css new file mode 100644 index 0000000000..53037d67e0 --- /dev/null +++ b/themes/react-grid-ScrollShim.css @@ -0,0 +1,3 @@ +.react-grid-ScrollShim { + z-index: 10002; +} \ No newline at end of file diff --git a/themes/ron-react-autocomplete.css b/themes/ron-react-autocomplete.css new file mode 100644 index 0000000000..87d0db7906 --- /dev/null +++ b/themes/ron-react-autocomplete.css @@ -0,0 +1,102 @@ +.react-autocomplete-Autocomplete__search { + display: block; + width: 100%; + height: 36px; + padding: 6px 12px; + font-size: 14px; + line-height: 1.6; + color: #555555; + background-color: white; + background-image: none; + border: 1px solid #cccccc; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; +} +.react-autocomplete-Autocomplete__search:focus { + border-color: #a21618; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(162, 22, 24, 0.6); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(162, 22, 24, 0.6); +} +.react-autocomplete-Autocomplete__search::-moz-placeholder { + color: #777777; + opacity: 1; +} +.react-autocomplete-Autocomplete__search:-ms-input-placeholder { + color: #777777; +} +.react-autocomplete-Autocomplete__search::-webkit-input-placeholder { + color: #777777; +} +.react-autocomplete-Autocomplete__search[disabled], +.react-autocomplete-Autocomplete__search[readonly], +fieldset[disabled] .react-autocomplete-Autocomplete__search { + cursor: not-allowed; + background-color: #eeeeee; + opacity: 1; +} +textarea.react-autocomplete-Autocomplete__search { + height: auto; +} +.react-autocomplete-Autocomplete__results { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; + list-style: none; + font-size: 14px; + text-align: left; + background-color: white; + border: 1px solid #cccccc; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 4px; + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + background-clip: padding-box; + min-width: 250px; + width: 100%; + max-height: 200px; + overflow: auto; +} +.react-autocomplete-Autocomplete__results.pull-right { + right: 0; + left: auto; +} +.react-autocomplete-Autocomplete__results .divider { + height: 1px; + margin: 10px 0; + overflow: hidden; + background-color: #e5e5e5; +} +.react-autocomplete-Autocomplete__results > li > a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: 1.6; + color: #333333; + white-space: nowrap; +} +.react-autocomplete-Autocomplete__results div.action-button { + display: block !important; + padding: 4px; +} +.react-autocomplete-Result { + cursor: pointer; +} +.react-autocomplete-Result > a { + text-decoration: none; +} +.react-autocomplete-Result--active { + color: #262626; + background-color: whitesmoke; +} diff --git a/webpack-dev-server.js b/webpack-dev-server.js new file mode 100644 index 0000000000..3cf1ffff8d --- /dev/null +++ b/webpack-dev-server.js @@ -0,0 +1,49 @@ +const webpackCommon = require('./config/webpack.common.config'); +const WebpackDevServer = require('webpack-dev-server'); +const webpack = require('webpack'); + +const specificConfig = { + entry: { + index: ['./packages/react-data-grid-examples/src/index.js'], + shared: ['./packages/react-data-grid-examples/src/shared.js'], + examples: ['./packages/react-data-grid-examples/src/examples.js'], + documentation: ['./packages/react-data-grid-examples/src/documentation.js'] + }, + output: { + path: '/packages/react-data-grid-examples/src/', + filename: '[name].js', + library: ['ReactDataGrid'], + libraryTarget: 'umd' + }, + externals: { + react: 'React', + 'react/addons': 'React', + 'react-dom': 'ReactDOM', + faker: 'faker', + moment: 'moment' + }, + plugins: [ + new webpack.HotModuleReplacementPlugin() + ] +}; + +const config = Object.assign({ }, webpackCommon, specificConfig); +const entries = config.entry; + +for (const key in entries) { + if (entries.hasOwnProperty(key)) { + entries[key].unshift('webpack-dev-server/client?http://localhost:8080/', 'webpack/hot/dev-server'); + } +} + +const compiler = webpack(config); +const server = new WebpackDevServer(compiler, { + hot: true, + open: true, + contentBase: 'packages/react-data-grid-examples/src' +}); + +server.listen(8080, () => { + const open = require('open'); + open('http://localhost:8080/webpack-dev-server/'); +});