From 5134c893891708b3f82d12f7bd6c26bf96ecd9b3 Mon Sep 17 00:00:00 2001 From: Conor Malone Date: Wed, 5 Sep 2018 10:43:56 +0100 Subject: [PATCH 1/8] Fix some zIndex issues around frozen cells and editors --- packages/react-data-grid/src/constants/zIndexes.js | 7 ++++--- packages/react-data-grid/src/editors/EditorContainer.js | 3 ++- packages/react-data-grid/src/masks/SelectionMask.js | 2 +- packages/react-data-grid/src/utils/SelectedCellUtils.js | 4 ++-- themes/react-data-grid-cell.css | 4 ++-- 5 files changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/react-data-grid/src/constants/zIndexes.js b/packages/react-data-grid/src/constants/zIndexes.js index 4e05b8aef5..ac1db24517 100644 --- a/packages/react-data-grid/src/constants/zIndexes.js +++ b/packages/react-data-grid/src/constants/zIndexes.js @@ -1,5 +1,6 @@ export default { - CELL_MASK: 300, - LOCKED_CELL_MASK: 400, - EDITOR_CONTAINER: 500 + CELL_MASK: 5, + EDITOR_CONTAINER: 10, + FROZEN_CELL_MASK: 15, + FROZEN_EDITOR_CONTAINER: 20 }; diff --git a/packages/react-data-grid/src/editors/EditorContainer.js b/packages/react-data-grid/src/editors/EditorContainer.js index 0e8b0bd2f9..9d9314a272 100644 --- a/packages/react-data-grid/src/editors/EditorContainer.js +++ b/packages/react-data-grid/src/editors/EditorContainer.js @@ -323,7 +323,8 @@ class EditorContainer extends React.Component { render() { const { left, top, width, height, column, scrollLeft } = this.props; const editorLeft = columnUtils.isFrozen(column) ? left + scrollLeft : left; - const style = { position: 'absolute', height, width, zIndex: zIndexes.EDITOR_CONTAINER, transform: `translate(${editorLeft}px, ${top}px)` }; + const zIndex = columnUtils.isFrozen(column) ? zIndexes.FROZEN_EDITOR_CONTAINER : zIndexes.EDITOR_CONTAINER; + const style = { position: 'absolute', height, width, zIndex, transform: `translate(${editorLeft}px, ${top}px)` }; return (
{this.createEditor()} diff --git a/packages/react-data-grid/src/masks/SelectionMask.js b/packages/react-data-grid/src/masks/SelectionMask.js index 845e1e44ac..c0e52b2668 100644 --- a/packages/react-data-grid/src/masks/SelectionMask.js +++ b/packages/react-data-grid/src/masks/SelectionMask.js @@ -18,7 +18,7 @@ export const getCellMaskDimensions = ({ selectedPosition, columns, scrollLeft, g const height = getSelectedRowHeight(selectedPosition.rowIdx); const top = getSelectedRowTop(selectedPosition.rowIdx); const frozen = isFrozenColumn(columns, selectedPosition); - const zIndex = frozen ? zIndexes.LOCKED_CELL_MASK : zIndexes.CELL_MASK; + const zIndex = frozen ? zIndexes.FROZEN_CELL_MASK : zIndexes.CELL_MASK; const left = getLeftPosition(frozen, scrollLeft, column.left); return {height, top, width: column.width, left, zIndex}; }; diff --git a/packages/react-data-grid/src/utils/SelectedCellUtils.js b/packages/react-data-grid/src/utils/SelectedCellUtils.js index 8f6d2e8830..fa714ae237 100644 --- a/packages/react-data-grid/src/utils/SelectedCellUtils.js +++ b/packages/react-data-grid/src/utils/SelectedCellUtils.js @@ -17,7 +17,7 @@ export const getSelectedDimensions = ({ selectedPosition, columns, rowHeight }) const column = columnUtils.getColumn(columns, idx); const { width, left, frozen } = column; const top = getRowTop(rowIdx, rowHeight); - const zIndex = frozen ? zIndexes.LOCKED_CELL_MASK : zIndexes.CELL_MASK; + const zIndex = frozen ? zIndexes.FROZEN_CELL_MASK : zIndexes.CELL_MASK; return { width, left, top, height: rowHeight, zIndex }; } return { width: 0, left: 0, top: 0, height: rowHeight, zIndex: 1 }; @@ -44,7 +44,7 @@ export const getSelectedRangeDimensions = ({ selectedRange, columns, rowHeight } const { totalWidth, anyColFrozen, left } = getColumnRangeProperties(topLeft.idx, bottomRight.idx, columns); const top = getRowTop(topLeft.rowIdx, rowHeight); const height = (bottomRight.rowIdx - topLeft.rowIdx + 1) * rowHeight; - const zIndex = anyColFrozen ? zIndexes.LOCKED_CELL_MASK : zIndexes.CELL_MASK; + const zIndex = anyColFrozen ? zIndexes.FROZEN_CELL_MASK : zIndexes.CELL_MASK; return { width: totalWidth, left, top, height, zIndex }; }; diff --git a/themes/react-data-grid-cell.css b/themes/react-data-grid-cell.css index 5b688164b6..5da2c8ebdd 100644 --- a/themes/react-data-grid-cell.css +++ b/themes/react-data-grid-cell.css @@ -20,11 +20,11 @@ } .react-grid-Cell--frozen { - z-index: 300; + z-index: 12; } .react-grid-Cell--frozen:focus { - z-index: 300; + z-index: 12; } .rdg-last--frozen { From 955d6730f680c4cebd5e40a750607b082badaf7b Mon Sep 17 00:00:00 2001 From: Conor Malone Date: Thu, 6 Sep 2018 12:17:40 +0100 Subject: [PATCH 2/8] Remove rdg dependency from addons package --- config/karma.js | 5 ++- config/webpack.common.config.js | 6 +++ .../cells/headerCells/FilterableHeaderCell.js | 2 +- .../cells/headerCells/SortableHeaderCell.js | 0 .../__tests__/SortableHeaderCell.spec.js | 0 .../constants/CellNavigationMode.js | 0 .../src => common}/constants/EventTypes.js | 0 packages/common/constants/index.js | 29 ++++++++++++++ .../src => common}/constants/zIndexes.js | 0 .../src => common}/editors/CheckboxEditor.js | 2 +- .../src => common}/editors/EditorBase.js | 2 +- .../src => common}/editors/EditorContainer.js | 15 ++++---- .../editors/SimpleTextEditor.js | 0 .../editors/__tests__/CheckboxEditor.spec.js | 0 .../editors/__tests__/EditorContainer.spec.js | 0 .../__tests__/SimpleTextEditor.spec.js | 0 .../src => common}/editors/index.js | 0 .../prop-shapes}/CellActionShape.js | 0 .../prop-shapes}/CellMetaDataShape.js | 0 .../prop-shapes}/ExcelColumn.js | 0 .../prop-shapes}/index.js | 0 .../src => common/utils}/RowComparer.js | 38 +++++++++---------- .../src => common}/utils/index.js | 1 - .../utils/isColumnsImmutable.js | 4 +- .../src => common}/utils/isEmptyArray.js | 10 ++--- .../src => common}/utils/isEmptyObject.js | 4 +- .../src => common}/utils/isFunction.js | 8 +--- .../common/utils/isImmutableCollection.js | 7 ++++ .../src => common}/utils/isImmutableMap.js | 0 .../src => common}/utils/keyboardUtils.js | 0 .../utils/mixedTypeValueRetriever.js | 6 +-- .../headerCells/filters/AutoCompleteFilter.js | 5 +-- .../headerCells/filters/NumericFilter.js | 4 +- .../src/data/RowFilterer.js | 4 +- .../src/data/RowGrouper.js | 4 +- .../src/data/RowGrouperResolver.js | 6 +-- .../src/data/RowSorter.js | 4 +- .../src/data/Selectors.js | 4 +- .../draggable-header/DraggableHeaderCell.js | 6 +-- .../__tests__/DraggableHeaderCell.spec.js | 5 ++- .../src/draggable/DragDropContainer.js | 3 +- .../src/draggable/DraggableHeaderCell.js | 8 ++-- .../src/draggable/DropTargetRowContainer.js | 6 +-- .../src/draggable/RowActionsCell.js | 3 +- .../src/editors/AutoCompleteEditor.js | 2 +- .../src/editors/DropDownEditor.js | 2 +- .../src/editors/index.js | 2 +- packages/react-data-grid-addons/src/index.js | 2 +- .../src/toolbars/GroupedColumnsPanel.js | 3 +- packages/react-data-grid/src/AppConstants.js | 19 ---------- packages/react-data-grid/src/Canvas.js | 4 +- packages/react-data-grid/src/Cell.js | 6 +-- packages/react-data-grid/src/CellAction.js | 2 +- packages/react-data-grid/src/CellExpand.js | 8 ++-- packages/react-data-grid/src/ColumnMetrics.js | 14 +------ packages/react-data-grid/src/Grid.js | 2 +- packages/react-data-grid/src/Header.js | 2 +- packages/react-data-grid/src/HeaderCell.js | 2 +- packages/react-data-grid/src/HeaderRow.js | 4 +- packages/react-data-grid/src/ReactDataGrid.js | 29 ++++++-------- packages/react-data-grid/src/Row.js | 4 +- packages/react-data-grid/src/RowGroup.js | 8 ++-- packages/react-data-grid/src/Viewport.js | 2 +- .../src/__tests__/AppConstants.spec.js | 7 ---- .../src/__tests__/CellExpand.spec.js | 16 +++----- .../src/__tests__/HeaderCell.spec.js | 2 +- .../src/__tests__/RowComparer.spec.js | 2 +- .../react-data-grid/src/constants/index.js | 7 ---- packages/react-data-grid/src/index.js | 11 +++--- .../src/masks/InteractionMasks.js | 14 +++---- .../src/masks/SelectionMask.js | 2 +- .../src/masks/__tests__/CellMask.spec.js | 2 +- .../src/masks/__tests__/CopyMask.spec.js | 2 +- .../src/masks/__tests__/DragMask.spec.js | 2 +- .../masks/__tests__/InteractionMasks.spec.js | 9 ++--- .../src/masks/__tests__/SelectionMask.spec.js | 2 +- .../__tests__/SelectionRangeMask.spec.js | 2 +- .../src/utils/SelectedCellUtils.js | 6 +-- .../src/utils/__tests__/keyboardUtils.spec.js | 2 +- .../src/utils/isImmutableCollection.js | 7 ---- 80 files changed, 192 insertions(+), 221 deletions(-) rename packages/{react-data-grid/src => common}/cells/headerCells/FilterableHeaderCell.js (93%) rename packages/{react-data-grid/src => common}/cells/headerCells/SortableHeaderCell.js (100%) rename packages/{react-data-grid/src => common}/cells/headerCells/__tests__/SortableHeaderCell.spec.js (100%) rename packages/{react-data-grid/src => common}/constants/CellNavigationMode.js (100%) rename packages/{react-data-grid/src => common}/constants/EventTypes.js (100%) create mode 100644 packages/common/constants/index.js rename packages/{react-data-grid/src => common}/constants/zIndexes.js (100%) rename packages/{react-data-grid/src => common}/editors/CheckboxEditor.js (94%) rename packages/{react-data-grid/src => common}/editors/EditorBase.js (92%) rename packages/{react-data-grid/src => common}/editors/EditorContainer.js (95%) rename packages/{react-data-grid/src => common}/editors/SimpleTextEditor.js (100%) rename packages/{react-data-grid/src => common}/editors/__tests__/CheckboxEditor.spec.js (100%) rename packages/{react-data-grid/src => common}/editors/__tests__/EditorContainer.spec.js (100%) rename packages/{react-data-grid/src => common}/editors/__tests__/SimpleTextEditor.spec.js (100%) rename packages/{react-data-grid/src => common}/editors/index.js (100%) rename packages/{react-data-grid/src/PropTypeShapes => common/prop-shapes}/CellActionShape.js (100%) rename packages/{react-data-grid/src/PropTypeShapes => common/prop-shapes}/CellMetaDataShape.js (100%) rename packages/{react-data-grid/src/PropTypeShapes => common/prop-shapes}/ExcelColumn.js (100%) rename packages/{react-data-grid/src/PropTypeShapes => common/prop-shapes}/index.js (100%) rename packages/{react-data-grid/src => common/utils}/RowComparer.js (84%) rename packages/{react-data-grid/src => common}/utils/index.js (94%) rename packages/{react-data-grid/src => common}/utils/isColumnsImmutable.js (53%) rename packages/{react-data-grid/src => common}/utils/isEmptyArray.js (71%) rename packages/{react-data-grid/src => common}/utils/isEmptyObject.js (59%) rename packages/{react-data-grid/src => common}/utils/isFunction.js (51%) create mode 100644 packages/common/utils/isImmutableCollection.js rename packages/{react-data-grid/src => common}/utils/isImmutableMap.js (100%) rename packages/{react-data-grid/src => common}/utils/keyboardUtils.js (100%) rename packages/{react-data-grid/src => common}/utils/mixedTypeValueRetriever.js (70%) delete mode 100644 packages/react-data-grid/src/AppConstants.js delete mode 100644 packages/react-data-grid/src/__tests__/AppConstants.spec.js delete mode 100644 packages/react-data-grid/src/constants/index.js delete mode 100644 packages/react-data-grid/src/utils/isImmutableCollection.js diff --git a/config/karma.js b/config/karma.js index 4502793ffd..5351597366 100644 --- a/config/karma.js +++ b/config/karma.js @@ -87,7 +87,10 @@ module.exports = function (config) { loaders: webpackConfig.module.loaders }, resolve: { - extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx'] + extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx'], + alias: { + common: path.resolve('packages/common/') + } }, plugins: [ new RewirePlugin() diff --git a/config/webpack.common.config.js b/config/webpack.common.config.js index 44ffaa9ff5..02b6bd1153 100644 --- a/config/webpack.common.config.js +++ b/config/webpack.common.config.js @@ -1,6 +1,7 @@ const webpack = require('webpack'); const argv = require('minimist')(process.argv.slice(2)); const RELEASE = argv.release; +const path = require('path'); function getPlugins() { const nodeEnv = RELEASE ? '"production"' : '"development"'; @@ -45,6 +46,11 @@ const config = { ] }, plugins: getPlugins(), + resolve: { + alias: { + common: path.resolve('packages/common/') + } + }, postLoaders: [ { test: /\.js$/, diff --git a/packages/react-data-grid/src/cells/headerCells/FilterableHeaderCell.js b/packages/common/cells/headerCells/FilterableHeaderCell.js similarity index 93% rename from packages/react-data-grid/src/cells/headerCells/FilterableHeaderCell.js rename to packages/common/cells/headerCells/FilterableHeaderCell.js index 127d82dd93..2875551f14 100644 --- a/packages/react-data-grid/src/cells/headerCells/FilterableHeaderCell.js +++ b/packages/common/cells/headerCells/FilterableHeaderCell.js @@ -1,5 +1,5 @@ const React = require('react'); -const ExcelColumn = require('../../PropTypeShapes/ExcelColumn'); +const ExcelColumn = require('common/prop-shapes/ExcelColumn'); import PropTypes from 'prop-types'; class FilterableHeaderCell extends React.Component { diff --git a/packages/react-data-grid/src/cells/headerCells/SortableHeaderCell.js b/packages/common/cells/headerCells/SortableHeaderCell.js similarity index 100% rename from packages/react-data-grid/src/cells/headerCells/SortableHeaderCell.js rename to packages/common/cells/headerCells/SortableHeaderCell.js diff --git a/packages/react-data-grid/src/cells/headerCells/__tests__/SortableHeaderCell.spec.js b/packages/common/cells/headerCells/__tests__/SortableHeaderCell.spec.js similarity index 100% rename from packages/react-data-grid/src/cells/headerCells/__tests__/SortableHeaderCell.spec.js rename to packages/common/cells/headerCells/__tests__/SortableHeaderCell.spec.js diff --git a/packages/react-data-grid/src/constants/CellNavigationMode.js b/packages/common/constants/CellNavigationMode.js similarity index 100% rename from packages/react-data-grid/src/constants/CellNavigationMode.js rename to packages/common/constants/CellNavigationMode.js diff --git a/packages/react-data-grid/src/constants/EventTypes.js b/packages/common/constants/EventTypes.js similarity index 100% rename from packages/react-data-grid/src/constants/EventTypes.js rename to packages/common/constants/EventTypes.js diff --git a/packages/common/constants/index.js b/packages/common/constants/index.js new file mode 100644 index 0000000000..47f8cf7046 --- /dev/null +++ b/packages/common/constants/index.js @@ -0,0 +1,29 @@ +import * as CellNavigationMode from './CellNavigationMode'; +import * as EventTypes from './EventTypes'; +import keyMirror from 'keymirror'; + + +const UpdateActions = keyMirror({ + CELL_UPDATE: null, + COLUMN_FILL: null, + COPY_PASTE: null, + CELL_DRAG: null +}); + +const DragItemTypes = { + Column: 'column' +}; + +const CellExpand = { + DOWN_TRIANGLE: String.fromCharCode('9660'), + RIGHT_TRIANGLE: String.fromCharCode('9654') +}; + + +export { + CellNavigationMode, + EventTypes, + UpdateActions, + CellExpand, + DragItemTypes +}; diff --git a/packages/react-data-grid/src/constants/zIndexes.js b/packages/common/constants/zIndexes.js similarity index 100% rename from packages/react-data-grid/src/constants/zIndexes.js rename to packages/common/constants/zIndexes.js diff --git a/packages/react-data-grid/src/editors/CheckboxEditor.js b/packages/common/editors/CheckboxEditor.js similarity index 94% rename from packages/react-data-grid/src/editors/CheckboxEditor.js rename to packages/common/editors/CheckboxEditor.js index f4d59fade2..3ca73bebc0 100644 --- a/packages/react-data-grid/src/editors/CheckboxEditor.js +++ b/packages/common/editors/CheckboxEditor.js @@ -1,6 +1,6 @@ const React = require('react'); import PropTypes from 'prop-types'; -require('../../../../themes/react-data-grid-checkbox.css'); +require('../../../themes/react-data-grid-checkbox.css'); class CheckboxEditor extends React.Component { static propTypes = { diff --git a/packages/react-data-grid/src/editors/EditorBase.js b/packages/common/editors/EditorBase.js similarity index 92% rename from packages/react-data-grid/src/editors/EditorBase.js rename to packages/common/editors/EditorBase.js index 8b49e6cfaf..bcfceb3539 100644 --- a/packages/react-data-grid/src/editors/EditorBase.js +++ b/packages/common/editors/EditorBase.js @@ -1,6 +1,6 @@ const React = require('react'); const ReactDOM = require('react-dom'); -const ExcelColumn = require('../PropTypeShapes/ExcelColumn'); +import ExcelColumn from 'common/prop-shapes/ExcelColumn'; import PropTypes from 'prop-types'; class EditorBase extends React.Component { diff --git a/packages/react-data-grid/src/editors/EditorContainer.js b/packages/common/editors/EditorContainer.js similarity index 95% rename from packages/react-data-grid/src/editors/EditorContainer.js rename to packages/common/editors/EditorContainer.js index 9d9314a272..b14115c6c6 100644 --- a/packages/react-data-grid/src/editors/EditorContainer.js +++ b/packages/common/editors/EditorContainer.js @@ -2,11 +2,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import joinClasses from 'classnames'; import SimpleTextEditor from './SimpleTextEditor'; -import isFunction from'../utils/isFunction'; -import { isKeyPrintable, isCtrlKeyHeldDown } from '../utils/keyboardUtils'; -import zIndexes from '../constants/zIndexes'; -import columnUtils from '../ColumnUtils'; -require('../../../../themes/react-data-grid-core.css'); +import isFunction from 'common/utils/isFunction'; +import { isKeyPrintable, isCtrlKeyHeldDown } from 'common/utils/keyboardUtils'; +import zIndexes from 'common/constants/zIndexes'; +require('../../../themes/react-data-grid-core.css'); + +const isFrozen = column => column.frozen === true || column.locked === true; class EditorContainer extends React.Component { static displayName = 'EditorContainer'; @@ -322,8 +323,8 @@ class EditorContainer extends React.Component { render() { const { left, top, width, height, column, scrollLeft } = this.props; - const editorLeft = columnUtils.isFrozen(column) ? left + scrollLeft : left; - const zIndex = columnUtils.isFrozen(column) ? zIndexes.FROZEN_EDITOR_CONTAINER : zIndexes.EDITOR_CONTAINER; + const editorLeft = isFrozen(column) ? left + scrollLeft : left; + const zIndex = isFrozen(column) ? zIndexes.FROZEN_EDITOR_CONTAINER : zIndexes.EDITOR_CONTAINER; const style = { position: 'absolute', height, width, zIndex, transform: `translate(${editorLeft}px, ${top}px)` }; return (
diff --git a/packages/react-data-grid/src/editors/SimpleTextEditor.js b/packages/common/editors/SimpleTextEditor.js similarity index 100% rename from packages/react-data-grid/src/editors/SimpleTextEditor.js rename to packages/common/editors/SimpleTextEditor.js diff --git a/packages/react-data-grid/src/editors/__tests__/CheckboxEditor.spec.js b/packages/common/editors/__tests__/CheckboxEditor.spec.js similarity index 100% rename from packages/react-data-grid/src/editors/__tests__/CheckboxEditor.spec.js rename to packages/common/editors/__tests__/CheckboxEditor.spec.js diff --git a/packages/react-data-grid/src/editors/__tests__/EditorContainer.spec.js b/packages/common/editors/__tests__/EditorContainer.spec.js similarity index 100% rename from packages/react-data-grid/src/editors/__tests__/EditorContainer.spec.js rename to packages/common/editors/__tests__/EditorContainer.spec.js diff --git a/packages/react-data-grid/src/editors/__tests__/SimpleTextEditor.spec.js b/packages/common/editors/__tests__/SimpleTextEditor.spec.js similarity index 100% rename from packages/react-data-grid/src/editors/__tests__/SimpleTextEditor.spec.js rename to packages/common/editors/__tests__/SimpleTextEditor.spec.js diff --git a/packages/react-data-grid/src/editors/index.js b/packages/common/editors/index.js similarity index 100% rename from packages/react-data-grid/src/editors/index.js rename to packages/common/editors/index.js diff --git a/packages/react-data-grid/src/PropTypeShapes/CellActionShape.js b/packages/common/prop-shapes/CellActionShape.js similarity index 100% rename from packages/react-data-grid/src/PropTypeShapes/CellActionShape.js rename to packages/common/prop-shapes/CellActionShape.js diff --git a/packages/react-data-grid/src/PropTypeShapes/CellMetaDataShape.js b/packages/common/prop-shapes/CellMetaDataShape.js similarity index 100% rename from packages/react-data-grid/src/PropTypeShapes/CellMetaDataShape.js rename to packages/common/prop-shapes/CellMetaDataShape.js diff --git a/packages/react-data-grid/src/PropTypeShapes/ExcelColumn.js b/packages/common/prop-shapes/ExcelColumn.js similarity index 100% rename from packages/react-data-grid/src/PropTypeShapes/ExcelColumn.js rename to packages/common/prop-shapes/ExcelColumn.js diff --git a/packages/react-data-grid/src/PropTypeShapes/index.js b/packages/common/prop-shapes/index.js similarity index 100% rename from packages/react-data-grid/src/PropTypeShapes/index.js rename to packages/common/prop-shapes/index.js diff --git a/packages/react-data-grid/src/RowComparer.js b/packages/common/utils/RowComparer.js similarity index 84% rename from packages/react-data-grid/src/RowComparer.js rename to packages/common/utils/RowComparer.js index af12b2234b..def0c3655c 100644 --- a/packages/react-data-grid/src/RowComparer.js +++ b/packages/common/utils/RowComparer.js @@ -1,20 +1,18 @@ -import ColumnMetrics from './ColumnMetrics'; - -export const shouldRowUpdate = (nextProps, currentProps) => { - return !(ColumnMetrics.sameColumns(currentProps.columns, nextProps.columns, ColumnMetrics.sameColumn)) || - nextProps.row !== currentProps.row || - currentProps.colOverscanStartIdx !== nextProps.colOverscanStartIdx || - currentProps.colOverscanEndIdx !== nextProps.colOverscanEndIdx || - currentProps.colVisibleStartIdx !== nextProps.colVisibleStartIdx || - currentProps.colVisibleEndIdx !== nextProps.colVisibleEndIdx || - currentProps.isSelected !== nextProps.isSelected || - currentProps.isScrolling !== nextProps.isScrolling || - nextProps.height !== currentProps.height || - currentProps.isOver !== nextProps.isOver || - currentProps.expandedRows !== nextProps.expandedRows || - currentProps.canDrop !== nextProps.canDrop || - currentProps.forceUpdate === true || - currentProps.extraClasses !== nextProps.extraClasses; -}; - -export default shouldRowUpdate; +export const shouldRowUpdate = (nextProps, currentProps) => { + return currentProps.columns !== nextProps.columns || + nextProps.row !== currentProps.row || + currentProps.colOverscanStartIdx !== nextProps.colOverscanStartIdx || + currentProps.colOverscanEndIdx !== nextProps.colOverscanEndIdx || + currentProps.colVisibleStartIdx !== nextProps.colVisibleStartIdx || + currentProps.colVisibleEndIdx !== nextProps.colVisibleEndIdx || + currentProps.isSelected !== nextProps.isSelected || + currentProps.isScrolling !== nextProps.isScrolling || + nextProps.height !== currentProps.height || + currentProps.isOver !== nextProps.isOver || + currentProps.expandedRows !== nextProps.expandedRows || + currentProps.canDrop !== nextProps.canDrop || + currentProps.forceUpdate === true || + currentProps.extraClasses !== nextProps.extraClasses; +}; + +export default shouldRowUpdate; diff --git a/packages/react-data-grid/src/utils/index.js b/packages/common/utils/index.js similarity index 94% rename from packages/react-data-grid/src/utils/index.js rename to packages/common/utils/index.js index 2e684a6f2f..65c9eb8629 100644 --- a/packages/react-data-grid/src/utils/index.js +++ b/packages/common/utils/index.js @@ -3,7 +3,6 @@ import { List } from 'immutable'; module.exports = { isEmptyArray: require('./isEmptyArray'), isEmptyObject: require('./isEmptyObject'), - isFunction: require('./isFunction'), isImmutableCollection: require('./isImmutableCollection'), getMixedTypeValueRetriever: require('./mixedTypeValueRetriever'), isColumnsImmutable: require('./isColumnsImmutable'), diff --git a/packages/react-data-grid/src/utils/isColumnsImmutable.js b/packages/common/utils/isColumnsImmutable.js similarity index 53% rename from packages/react-data-grid/src/utils/isColumnsImmutable.js rename to packages/common/utils/isColumnsImmutable.js index 737aa2a899..4e027033cc 100644 --- a/packages/react-data-grid/src/utils/isColumnsImmutable.js +++ b/packages/common/utils/isColumnsImmutable.js @@ -1,3 +1,3 @@ -module.exports = function isColumnsImmutable(columns: Array) { +export default function isColumnsImmutable(columns) { return (typeof Immutable !== 'undefined' && (columns instanceof Immutable.List)); -}; +} diff --git a/packages/react-data-grid/src/utils/isEmptyArray.js b/packages/common/utils/isEmptyArray.js similarity index 71% rename from packages/react-data-grid/src/utils/isEmptyArray.js rename to packages/common/utils/isEmptyArray.js index eb55d54b86..80501b6335 100644 --- a/packages/react-data-grid/src/utils/isEmptyArray.js +++ b/packages/common/utils/isEmptyArray.js @@ -1,5 +1,5 @@ -const isEmptyArray = (obj) => { - return Array.isArray(obj) && obj.length === 0; -}; - -module.exports = isEmptyArray; +const isEmptyArray = (obj) => { + return Array.isArray(obj) && obj.length === 0; +}; + +export default isEmptyArray; diff --git a/packages/react-data-grid/src/utils/isEmptyObject.js b/packages/common/utils/isEmptyObject.js similarity index 59% rename from packages/react-data-grid/src/utils/isEmptyObject.js rename to packages/common/utils/isEmptyObject.js index 1fe3b41aaf..c0995a1cf0 100644 --- a/packages/react-data-grid/src/utils/isEmptyObject.js +++ b/packages/common/utils/isEmptyObject.js @@ -1,5 +1,5 @@ -function isEmpty(obj) { +export default function isEmpty(obj) { return Object.keys(obj).length === 0 && obj.constructor === Object; } -module.exports = isEmpty; + diff --git a/packages/react-data-grid/src/utils/isFunction.js b/packages/common/utils/isFunction.js similarity index 51% rename from packages/react-data-grid/src/utils/isFunction.js rename to packages/common/utils/isFunction.js index dc7822f5f9..1efcdbfcfc 100644 --- a/packages/react-data-grid/src/utils/isFunction.js +++ b/packages/common/utils/isFunction.js @@ -1,8 +1,4 @@ -/* @flow */ - -const isFunction = function(functionToCheck: any): boolean { +export default function isFunction(functionToCheck) { let getType = {}; return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]'; -}; - -module.exports = isFunction; +} diff --git a/packages/common/utils/isImmutableCollection.js b/packages/common/utils/isImmutableCollection.js new file mode 100644 index 0000000000..511030a1ec --- /dev/null +++ b/packages/common/utils/isImmutableCollection.js @@ -0,0 +1,7 @@ +import { Iterable } from 'immutable'; + +export default function isImmutableCollection(objToVerify) { + return Iterable.isIterable(objToVerify); +}; + + diff --git a/packages/react-data-grid/src/utils/isImmutableMap.js b/packages/common/utils/isImmutableMap.js similarity index 100% rename from packages/react-data-grid/src/utils/isImmutableMap.js rename to packages/common/utils/isImmutableMap.js diff --git a/packages/react-data-grid/src/utils/keyboardUtils.js b/packages/common/utils/keyboardUtils.js similarity index 100% rename from packages/react-data-grid/src/utils/keyboardUtils.js rename to packages/common/utils/keyboardUtils.js diff --git a/packages/react-data-grid/src/utils/mixedTypeValueRetriever.js b/packages/common/utils/mixedTypeValueRetriever.js similarity index 70% rename from packages/react-data-grid/src/utils/mixedTypeValueRetriever.js rename to packages/common/utils/mixedTypeValueRetriever.js index 448de01600..1a0cdf9eb5 100644 --- a/packages/react-data-grid/src/utils/mixedTypeValueRetriever.js +++ b/packages/common/utils/mixedTypeValueRetriever.js @@ -1,4 +1,4 @@ -const getMixedTypeValueRetriever = (isImmutable) => { +export default function getMixedTypeValueRetriever(isImmutable) { let retObj = {}; const retriever = (item, key) => { return item[key]; }; const immutableRetriever = (immutable, key) => { return immutable.get(key); }; @@ -6,6 +6,4 @@ const getMixedTypeValueRetriever = (isImmutable) => { retObj.getValue = isImmutable ? immutableRetriever : retriever; return retObj; -}; - -module.exports = getMixedTypeValueRetriever; +} diff --git a/packages/react-data-grid-addons/src/cells/headerCells/filters/AutoCompleteFilter.js b/packages/react-data-grid-addons/src/cells/headerCells/filters/AutoCompleteFilter.js index c6596fd7e7..c0423fffd3 100644 --- a/packages/react-data-grid-addons/src/cells/headerCells/filters/AutoCompleteFilter.js +++ b/packages/react-data-grid-addons/src/cells/headerCells/filters/AutoCompleteFilter.js @@ -2,9 +2,8 @@ import 'react-select/dist/react-select.css'; import React from 'react'; import PropTypes from 'prop-types'; import Select from 'react-select'; -import { utils, shapes } from 'react-data-grid'; -const { isEmptyArray } = utils; -const { ExcelColumn } = shapes; +import isEmptyArray from 'common/utils/isEmptyArray'; +import ExcelColumn from 'common/prop-shapes/ExcelColumn'; class AutoCompleteFilter extends React.Component { constructor(props) { diff --git a/packages/react-data-grid-addons/src/cells/headerCells/filters/NumericFilter.js b/packages/react-data-grid-addons/src/cells/headerCells/filters/NumericFilter.js index 73524ec7d5..ed69903afb 100644 --- a/packages/react-data-grid-addons/src/cells/headerCells/filters/NumericFilter.js +++ b/packages/react-data-grid-addons/src/cells/headerCells/filters/NumericFilter.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { shapes } from 'react-data-grid'; -const { ExcelColumn } = shapes; +import ExcelColumn from 'common/prop-shapes/ExcelColumn'; + const RuleType = { Number: 1, Range: 2, diff --git a/packages/react-data-grid-addons/src/data/RowFilterer.js b/packages/react-data-grid-addons/src/data/RowFilterer.js index 3bdec637d1..1cdbffc743 100644 --- a/packages/react-data-grid-addons/src/data/RowFilterer.js +++ b/packages/react-data-grid-addons/src/data/RowFilterer.js @@ -1,5 +1,5 @@ -import { utils } from 'react-data-grid'; -const { getMixedTypeValueRetriever, isImmutableCollection } = utils; +import isImmutableCollection from 'common/utils/isImmutableCollection'; +import getMixedTypeValueRetriever from 'common/utils/mixedTypeValueRetriever'; const filterRows = (filters, rows = []) => { return rows.filter(r => { diff --git a/packages/react-data-grid-addons/src/data/RowGrouper.js b/packages/react-data-grid-addons/src/data/RowGrouper.js index 2db95a55ea..90c797cc3a 100644 --- a/packages/react-data-grid-addons/src/data/RowGrouper.js +++ b/packages/react-data-grid-addons/src/data/RowGrouper.js @@ -1,6 +1,6 @@ -import { utils } from 'react-data-grid'; +import isImmutableCollection from 'common/utils/isImmutableCollection'; import Resolver from './RowGrouperResolver'; -const { isImmutableCollection } = utils; + class RowGrouper { diff --git a/packages/react-data-grid-addons/src/data/RowGrouperResolver.js b/packages/react-data-grid-addons/src/data/RowGrouperResolver.js index a005985e7d..fb25ddeccf 100644 --- a/packages/react-data-grid-addons/src/data/RowGrouperResolver.js +++ b/packages/react-data-grid-addons/src/data/RowGrouperResolver.js @@ -1,8 +1,8 @@ import {List} from 'immutable'; import groupBy from 'lodash/groupBy'; -import { utils } from 'react-data-grid'; -const { getMixedTypeValueRetriever, isImmutableMap } = utils; - +import getMixedTypeValueRetriever from 'common/utils/mixedTypeValueRetriever'; +import isImmutableMap from 'common/utils/isImmutableMap' +; export default class RowGrouperResolver { constructor(isImmutable) { diff --git a/packages/react-data-grid-addons/src/data/RowSorter.js b/packages/react-data-grid-addons/src/data/RowSorter.js index e55cfb7875..dced10316c 100644 --- a/packages/react-data-grid-addons/src/data/RowSorter.js +++ b/packages/react-data-grid-addons/src/data/RowSorter.js @@ -1,5 +1,5 @@ -import { utils } from 'react-data-grid'; -const { getMixedTypeValueRetriever, isImmutableCollection } = utils; +import getMixedTypeValueRetriever from 'common/utils/mixedTypeValueRetriever'; +import isImmutableCollection from 'common/utils/isImmutableCollection'; const comparer = (a, b) => { if (a > b) { diff --git a/packages/react-data-grid-addons/src/data/Selectors.js b/packages/react-data-grid-addons/src/data/Selectors.js index 55fcb305dc..b041ba94cb 100644 --- a/packages/react-data-grid-addons/src/data/Selectors.js +++ b/packages/react-data-grid-addons/src/data/Selectors.js @@ -1,6 +1,6 @@ import { createSelector } from 'reselect'; -import { utils } from 'react-data-grid'; -const { isEmptyArray, isEmptyObject } = utils; +import isEmptyArray from 'common/utils/isEmptyArray'; +import isEmptyObject from 'common/utils/isEmptyObject'; const groupRows = require('./RowGrouper'); const filterRows = require('./RowFilterer'); const sortRows = require('./RowSorter'); diff --git a/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js b/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js index 579de277c9..edd7c45a79 100644 --- a/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js +++ b/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import { DragSource, DropTarget } from 'react-dnd'; -import { HeaderCell } from 'react-data-grid'; class DraggableHeaderCell extends React.Component { render() { @@ -26,7 +25,7 @@ class DraggableHeaderCell extends React.Component { style={{ width: 0, cursor: 'move', opacity }} className={isOver && canDrop ? 'rdg-can-drop' : ''} > - + {this.props.renderHeaderCell(this.props)}
) ); @@ -84,7 +83,8 @@ DraggableHeaderCell.propTypes = { connectDropTarget: PropTypes.func.isRequired, isDragging: PropTypes.bool.isRequired, isOver: PropTypes.bool, - canDrop: PropTypes.bool + canDrop: PropTypes.bool, + renderHeaderCell: PropTypes.fund }; DraggableHeaderCell = DropTarget('Column', target, targetCollect)( diff --git a/packages/react-data-grid-addons/src/draggable-header/__tests__/DraggableHeaderCell.spec.js b/packages/react-data-grid-addons/src/draggable-header/__tests__/DraggableHeaderCell.spec.js index ecaf11a680..8186f027dc 100644 --- a/packages/react-data-grid-addons/src/draggable-header/__tests__/DraggableHeaderCell.spec.js +++ b/packages/react-data-grid-addons/src/draggable-header/__tests__/DraggableHeaderCell.spec.js @@ -3,13 +3,14 @@ import { shallow } from 'enzyme'; import DraggableContainer from '../DraggableContainer'; import DraggableHeaderCell from '../DraggableHeaderCell'; -import { HeaderCell } from 'react-data-grid'; + +const HeaderCell = () =>
; describe('', () => { it('should render grid HeaderCell wrapper with cursor: move ', () => { const wrapper = shallow( - + HeaderCell}/> ); expect(wrapper.find(HeaderCell)); diff --git a/packages/react-data-grid-addons/src/draggable/DragDropContainer.js b/packages/react-data-grid-addons/src/draggable/DragDropContainer.js index 4b134ad173..29e95f9de5 100644 --- a/packages/react-data-grid-addons/src/draggable/DragDropContainer.js +++ b/packages/react-data-grid-addons/src/draggable/DragDropContainer.js @@ -2,8 +2,7 @@ import React, {Component} from 'react'; import html5DragDropContext from '../shared/html5DragDropContext'; import DraggableHeaderCell from './DraggableHeaderCell'; import RowDragLayer from './RowDragLayer'; -import { utils } from 'react-data-grid'; -const { isColumnsImmutable } = utils; +import isColumnsImmutable from 'common/utils/isColumnsImmutable'; import PropTypes from 'prop-types'; class DraggableContainer extends Component { diff --git a/packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js b/packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js index ed20cb1079..7e3411f406 100644 --- a/packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js +++ b/packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js @@ -1,8 +1,7 @@ import { DragSource } from 'react-dnd'; import React, {Component} from 'react'; import PropTypes from 'prop-types'; -import { _constants, HeaderCell } from 'react-data-grid'; -const { DragItemTypes } = _constants; +import { DragItemTypes } from 'common/constants'; class DraggableHeaderCell extends Component { @@ -26,14 +25,15 @@ class DraggableHeaderCell extends Component { if (isDragging) { return null; } - return connectDragSource(
); + return connectDragSource(
{this.props.renderHeaderCell(this.props)}
); } } DraggableHeaderCell.propTypes = { connectDragSource: PropTypes.func.isRequired, connectDragPreview: PropTypes.func.isRequired, - isDragging: PropTypes.bool.isRequired + isDragging: PropTypes.bool.isRequired, + renderHeaderCell: PropTypes.func }; function collect(connect, monitor) { diff --git a/packages/react-data-grid-addons/src/draggable/DropTargetRowContainer.js b/packages/react-data-grid-addons/src/draggable/DropTargetRowContainer.js index 187ad76c91..6ae157b906 100644 --- a/packages/react-data-grid-addons/src/draggable/DropTargetRowContainer.js +++ b/packages/react-data-grid-addons/src/draggable/DropTargetRowContainer.js @@ -2,12 +2,12 @@ import '../../../../themes/react-data-grid-drop-target.css'; import React from 'react'; import ReactDOM from 'react-dom'; import { DropTarget } from 'react-dnd'; -import { RowComparer as shouldRowUpdate } from 'react-data-grid'; +import rowComparer from 'common/utils/RowComparer'; let rowDropTarget = (Row) => class extends React.Component { shouldComponentUpdate(nextProps) { - return shouldRowUpdate(nextProps, this.props); + return rowComparer(nextProps, this.props); } moveRow() { @@ -51,4 +51,4 @@ function collect(connect, monitor) { }; } -export default (Row) => DropTarget('Row', target, collect, {arePropsEqual: (nextProps, currentProps) => !shouldRowUpdate(nextProps, currentProps)})(rowDropTarget(Row)); +export default (Row) => DropTarget('Row', target, collect, {arePropsEqual: (nextProps, currentProps) => !rowComparer(nextProps, currentProps)})(rowDropTarget(Row)); diff --git a/packages/react-data-grid-addons/src/draggable/RowActionsCell.js b/packages/react-data-grid-addons/src/draggable/RowActionsCell.js index 3c0e423877..33f195654e 100644 --- a/packages/react-data-grid-addons/src/draggable/RowActionsCell.js +++ b/packages/react-data-grid-addons/src/draggable/RowActionsCell.js @@ -2,8 +2,7 @@ import '../../../../themes/react-data-grid-row.css'; import React from 'react'; import PropTypes from 'prop-types'; import { DragSource } from 'react-dnd'; -import { editors } from 'react-data-grid'; -const { CheckboxEditor } = editors; +import { CheckboxEditor } from 'common/editors'; class RowActionsCell extends React.Component { diff --git a/packages/react-data-grid-addons/src/editors/AutoCompleteEditor.js b/packages/react-data-grid-addons/src/editors/AutoCompleteEditor.js index 2c1b1669c7..9f1eee2be9 100644 --- a/packages/react-data-grid-addons/src/editors/AutoCompleteEditor.js +++ b/packages/react-data-grid-addons/src/editors/AutoCompleteEditor.js @@ -1,7 +1,7 @@ const React = require('react'); const ReactDOM = require('react-dom'); const ReactAutocomplete = require('ron-react-autocomplete'); -const { shapes: { ExcelColumn } } = require('react-data-grid'); +import { ExcelColumn } from 'common/prop-shapes'; require('../../../../themes/ron-react-autocomplete.css'); import PropTypes from 'prop-types'; diff --git a/packages/react-data-grid-addons/src/editors/DropDownEditor.js b/packages/react-data-grid-addons/src/editors/DropDownEditor.js index c99df95353..a0398b4f06 100644 --- a/packages/react-data-grid-addons/src/editors/DropDownEditor.js +++ b/packages/react-data-grid-addons/src/editors/DropDownEditor.js @@ -1,6 +1,6 @@ const React = require('react'); import PropTypes from 'prop-types'; -const { editors: { EditorBase } } = require('react-data-grid'); +import { EditorBase } from 'common/editors'; import ReactDOM from 'react-dom'; class DropDownEditor extends EditorBase { diff --git a/packages/react-data-grid-addons/src/editors/index.js b/packages/react-data-grid-addons/src/editors/index.js index 93d0df8932..5a047e8a3c 100644 --- a/packages/react-data-grid-addons/src/editors/index.js +++ b/packages/react-data-grid-addons/src/editors/index.js @@ -1,4 +1,4 @@ -const { editors: { SimpleTextEditor, CheckboxEditor } } = require('react-data-grid'); +import { SimpleTextEditor, CheckboxEditor } from 'common/editors'; const Editors = { AutoComplete: require('./AutoCompleteEditor'), diff --git a/packages/react-data-grid-addons/src/index.js b/packages/react-data-grid-addons/src/index.js index 50864835e4..6b2b0634d0 100644 --- a/packages/react-data-grid-addons/src/index.js +++ b/packages/react-data-grid-addons/src/index.js @@ -7,7 +7,7 @@ const Menu = require('./menu'); const Draggable = require('./draggable'); const DraggableHeader = require('./draggable-header'); const Filters = require('./cells/headerCells/filters'); -const { RowComparer: rowComparer } = require('react-data-grid'); +import rowComparer from 'common/utils/RowComparer'; const performance = require('./performance'); const Utils = { rowComparer, performance }; diff --git a/packages/react-data-grid-addons/src/toolbars/GroupedColumnsPanel.js b/packages/react-data-grid-addons/src/toolbars/GroupedColumnsPanel.js index 7226b1ca05..2e473b0e65 100644 --- a/packages/react-data-grid-addons/src/toolbars/GroupedColumnsPanel.js +++ b/packages/react-data-grid-addons/src/toolbars/GroupedColumnsPanel.js @@ -3,8 +3,7 @@ import PropTypes from 'prop-types'; import { DropTarget } from 'react-dnd'; import GroupedColumnButton from './GroupedColumnButton'; -import { _constants } from 'react-data-grid'; -const { DragItemTypes } = _constants; +import { DragItemTypes } from 'common/constants'; const propTypes = { isOver: PropTypes.bool.isRequired, diff --git a/packages/react-data-grid/src/AppConstants.js b/packages/react-data-grid/src/AppConstants.js deleted file mode 100644 index fd6411ee06..0000000000 --- a/packages/react-data-grid/src/AppConstants.js +++ /dev/null @@ -1,19 +0,0 @@ -import keyMirror from 'keymirror'; - -const constants = { - UpdateActions: keyMirror({ - CELL_UPDATE: null, - COLUMN_FILL: null, - COPY_PASTE: null, - CELL_DRAG: null - }), - DragItemTypes: { - Column: 'column' - }, - CellExpand: { - DOWN_TRIANGLE: String.fromCharCode('9660'), - RIGHT_TRIANGLE: String.fromCharCode('9654') - } -}; - -module.exports = constants; diff --git a/packages/react-data-grid/src/Canvas.js b/packages/react-data-grid/src/Canvas.js index 2cb1730ced..af8585e182 100644 --- a/packages/react-data-grid/src/Canvas.js +++ b/packages/react-data-grid/src/Canvas.js @@ -2,12 +2,12 @@ import React from 'react'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import Row from './Row'; -import cellMetaDataShape from './PropTypeShapes/CellMetaDataShape'; +import cellMetaDataShape from 'common/prop-shapes/CellMetaDataShape'; import * as rowUtils from './RowUtils'; import RowGroup, { DefaultRowGroupRenderer } from './RowGroup'; import { InteractionMasks } from './masks'; import { getColumnScrollPosition } from './utils/canvasUtils'; -import { EventTypes } from './constants'; +import { EventTypes } from 'common/constants'; require('../../../themes/react-data-grid-core.css'); class Canvas extends React.PureComponent { diff --git a/packages/react-data-grid/src/Cell.js b/packages/react-data-grid/src/Cell.js index ffc89c92bd..3d6397203d 100644 --- a/packages/react-data-grid/src/Cell.js +++ b/packages/react-data-grid/src/Cell.js @@ -1,9 +1,9 @@ const React = require('react'); import PropTypes from 'prop-types'; const joinClasses = require('classnames'); -const ExcelColumn = require('./PropTypeShapes/ExcelColumn'); -const isFunction = require('./utils/isFunction'); -const CellMetaDataShape = require('./PropTypeShapes/CellMetaDataShape'); +import ExcelColumn from 'common/prop-shapes/ExcelColumn'; +import isFunction from 'common/utils/isFunction'; +import CellMetaDataShape from 'common/prop-shapes/CellMetaDataShape'; const SimpleCellFormatter = require('./formatters/SimpleCellFormatter'); const createObjectWithProperties = require('./createObjectWithProperties'); import CellAction from './CellAction'; diff --git a/packages/react-data-grid/src/CellAction.js b/packages/react-data-grid/src/CellAction.js index e5988f784c..d05453227b 100644 --- a/packages/react-data-grid/src/CellAction.js +++ b/packages/react-data-grid/src/CellAction.js @@ -1,7 +1,7 @@ import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; -import CellActionShape from './PropTypeShapes/CellActionShape'; +import CellActionShape from 'common/prop-shapes/CellActionShape'; class CellAction extends React.Component { static propTypes = { diff --git a/packages/react-data-grid/src/CellExpand.js b/packages/react-data-grid/src/CellExpand.js index 775269eabb..fc46c887cd 100644 --- a/packages/react-data-grid/src/CellExpand.js +++ b/packages/react-data-grid/src/CellExpand.js @@ -1,8 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; -import AppConstants from './AppConstants'; +import { CellExpand } from 'common/constants'; -class CellExpand extends React.Component { +class CellExpander extends React.Component { static propTypes = { expandableOptions: PropTypes.object.isRequired, onCellExpand: PropTypes.func.isRequired @@ -29,10 +29,10 @@ class CellExpand extends React.Component { render() { return ( - {this.state.expanded ? AppConstants.CellExpand.DOWN_TRIANGLE : AppConstants.CellExpand.RIGHT_TRIANGLE} + {this.state.expanded ? CellExpand.DOWN_TRIANGLE : CellExpand.RIGHT_TRIANGLE} ); } } -export default CellExpand; +export default CellExpander; diff --git a/packages/react-data-grid/src/ColumnMetrics.js b/packages/react-data-grid/src/ColumnMetrics.js index a62387c7af..0976d4316d 100644 --- a/packages/react-data-grid/src/ColumnMetrics.js +++ b/packages/react-data-grid/src/ColumnMetrics.js @@ -2,19 +2,7 @@ const shallowCloneObject = require('./shallowCloneObject'); const sameColumn = require('./ColumnComparer'); const ColumnUtils = require('./ColumnUtils'); const getScrollbarSize = require('./getScrollbarSize'); -const isColumnsImmutable = require('./utils/isColumnsImmutable'); - -type Column = { - key: string; - left: number; - width: number; -}; - -type ColumnMetricsType = { - columns: Array; - totalWidth: number; - minColumnWidth: number; -}; +import isColumnsImmutable from 'common/utils/isColumnsImmutable'; function setColumnWidths(columns, totalWidth) { return columns.map(column => { diff --git a/packages/react-data-grid/src/Grid.js b/packages/react-data-grid/src/Grid.js index 89ddcf2254..f7835ae674 100644 --- a/packages/react-data-grid/src/Grid.js +++ b/packages/react-data-grid/src/Grid.js @@ -2,7 +2,7 @@ const React = require('react'); import PropTypes from 'prop-types'; const Header = require('./Header'); const Viewport = require('./Viewport'); -import cellMetaDataShape from './PropTypeShapes/CellMetaDataShape'; +import cellMetaDataShape from 'common/prop-shapes/CellMetaDataShape'; import columnUtils from './ColumnUtils'; require('../../../themes/react-data-grid-core.css'); diff --git a/packages/react-data-grid/src/Header.js b/packages/react-data-grid/src/Header.js index c523a5f742..235aa0d150 100644 --- a/packages/react-data-grid/src/Header.js +++ b/packages/react-data-grid/src/Header.js @@ -8,7 +8,7 @@ const HeaderRow = require('./HeaderRow'); const getScrollbarSize = require('./getScrollbarSize'); import PropTypes from 'prop-types'; const createObjectWithProperties = require('./createObjectWithProperties'); -const cellMetaDataShape = require('./PropTypeShapes/CellMetaDataShape'); +const cellMetaDataShape = require('common/prop-shapes/CellMetaDataShape'); require('../../../themes/react-data-grid-header.css'); type Column = { diff --git a/packages/react-data-grid/src/HeaderCell.js b/packages/react-data-grid/src/HeaderCell.js index eeb2244af5..1aea40d672 100644 --- a/packages/react-data-grid/src/HeaderCell.js +++ b/packages/react-data-grid/src/HeaderCell.js @@ -1,7 +1,7 @@ const React = require('react'); const ReactDOM = require('react-dom'); const joinClasses = require('classnames'); -const ExcelColumn = require('./PropTypeShapes/ExcelColumn'); +import ExcelColumn from 'common/prop-shapes/ExcelColumn'; import columnUtils from './ColumnUtils'; const ResizeHandle = require('./ResizeHandle'); require('../../../themes/react-data-grid-header.css'); diff --git a/packages/react-data-grid/src/HeaderRow.js b/packages/react-data-grid/src/HeaderRow.js index e84f428d33..fde5a67844 100644 --- a/packages/react-data-grid/src/HeaderRow.js +++ b/packages/react-data-grid/src/HeaderRow.js @@ -3,8 +3,8 @@ const shallowEqual = require('shallowequal'); const BaseHeaderCell = require('./HeaderCell'); const getScrollbarSize = require('./getScrollbarSize'); const columnUtils = require('./ColumnUtils'); -const SortableHeaderCell = require('./cells/headerCells/SortableHeaderCell'); -const FilterableHeaderCell = require('./cells/headerCells/FilterableHeaderCell'); +const SortableHeaderCell = require('common/cells/headerCells/SortableHeaderCell'); +const FilterableHeaderCell = require('common/cells/headerCells/FilterableHeaderCell'); const HeaderCellType = require('./HeaderCellType'); const createObjectWithProperties = require('./createObjectWithProperties'); require('../../../themes/react-data-grid-header.css'); diff --git a/packages/react-data-grid/src/ReactDataGrid.js b/packages/react-data-grid/src/ReactDataGrid.js index 60b896b956..7e4a0c72b6 100644 --- a/packages/react-data-grid/src/ReactDataGrid.js +++ b/packages/react-data-grid/src/ReactDataGrid.js @@ -1,26 +1,21 @@ -const React = require('react'); +import React from 'react'; import PropTypes from 'prop-types'; import {deprecate} from 'react-is-deprecated'; -const BaseGrid = require('./Grid'); -const CheckboxEditor = require('./editors/CheckboxEditor'); -const RowUtils = require('./RowUtils'); -const ColumnUtils = require('./ColumnUtils'); -const KeyCodes = require('./KeyCodes'); -const isFunction = require('./utils/isFunction'); +import BaseGrid from './Grid'; +import CheckboxEditor from 'common/editors/CheckboxEditor'; +import RowUtils from './RowUtils'; +import ColumnUtils from './ColumnUtils'; +import KeyCodes from './KeyCodes'; +import isFunction from 'common/utils/isFunction'; import SelectAll from './formatters/SelectAll'; -import AppConstants from './AppConstants'; -import { DEFINE_SORT } from './cells/headerCells/SortableHeaderCell'; +import { DEFINE_SORT } from 'common/cells/headerCells/SortableHeaderCell'; const ColumnMetrics = require('./ColumnMetrics'); require('../../../themes/react-data-grid-core.css'); require('../../../themes/react-data-grid-checkbox.css'); -import { CellNavigationMode, EventTypes } from './constants'; +import { CellNavigationMode, EventTypes, UpdateActions } from 'common/constants'; import { EventBus } from './masks'; -if (!Object.assign) { - Object.assign = require('object-assign'); -} - const deprecationWarning = (propName, alternative) => `${propName} has been deprecated and will be removed in a future version. Please use ${alternative} instead`; class ReactDataGrid extends React.Component { @@ -341,7 +336,7 @@ class ReactDataGrid extends React.Component { if (this.props.onGridRowsUpdated) { let cellKey = this.getColumn(e.idx).key; - this.onGridRowsUpdated(cellKey, e.rowIdx, this.props.rowsCount - 1, {[cellKey]: e.rowData[cellKey]}, AppConstants.UpdateActions.COLUMN_FILL); + this.onGridRowsUpdated(cellKey, e.rowIdx, this.props.rowsCount - 1, {[cellKey]: e.rowData[cellKey]}, UpdateActions.COLUMN_FILL); } }; @@ -373,7 +368,7 @@ class ReactDataGrid extends React.Component { rowIds.push(rowGetter(i)[rowKey]); } - const fromRowData = rowGetter(action === AppConstants.UpdateActions.COPY_PASTE ? originRow : fromRow); + const fromRowData = rowGetter(action === UpdateActions.COPY_PASTE ? originRow : fromRow); const fromRowId = fromRowData[rowKey]; const toRowId = rowGetter(toRow)[rowKey]; onGridRowsUpdated({ cellKey, fromRow, toRow, fromRowId, toRowId, rowIds, updated, action, fromRowData }); @@ -381,7 +376,7 @@ class ReactDataGrid extends React.Component { onCommit = (commit) => { const targetRow = commit.rowIdx; - this.onGridRowsUpdated(commit.cellKey, targetRow, targetRow, commit.updated, AppConstants.UpdateActions.CELL_UPDATE); + this.onGridRowsUpdated(commit.cellKey, targetRow, targetRow, commit.updated, UpdateActions.CELL_UPDATE); }; onScroll = (scrollState) => { diff --git a/packages/react-data-grid/src/Row.js b/packages/react-data-grid/src/Row.js index b3b4bce7bd..348465f50c 100644 --- a/packages/react-data-grid/src/Row.js +++ b/packages/react-data-grid/src/Row.js @@ -1,9 +1,9 @@ -import rowComparer from './RowComparer'; +import rowComparer from 'common/utils/RowComparer'; import React from 'react'; import PropTypes from 'prop-types'; import joinClasses from 'classnames'; import Cell from './Cell'; -import cellMetaDataShape from './PropTypeShapes/CellMetaDataShape'; +import cellMetaDataShape from 'common/prop-shapes/CellMetaDataShape'; import createObjectWithProperties from './createObjectWithProperties'; import columnUtils from './ColumnUtils'; require('../../../themes/react-data-grid-row.css'); diff --git a/packages/react-data-grid/src/RowGroup.js b/packages/react-data-grid/src/RowGroup.js index 0993bfd36d..ba11b21699 100644 --- a/packages/react-data-grid/src/RowGroup.js +++ b/packages/react-data-grid/src/RowGroup.js @@ -1,8 +1,8 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; -import utils from './utils'; -const cellMetaDataShape = require('./PropTypeShapes/CellMetaDataShape'); -import { EventTypes } from './constants'; +import {last} from 'common/utils'; +import cellMetaDataShape from 'common/prop-shapes/CellMetaDataShape'; +import { EventTypes } from 'common/constants'; import '../../../themes/react-data-grid-row.css'; @@ -38,7 +38,7 @@ class RowGroup extends Component { } render() { - let lastColumn = utils.last(this.props.columns); + let lastColumn = last(this.props.columns); let style = {width: lastColumn.left + lastColumn.width}; diff --git a/packages/react-data-grid/src/Viewport.js b/packages/react-data-grid/src/Viewport.js index 4f88d05f23..ca12e902c2 100644 --- a/packages/react-data-grid/src/Viewport.js +++ b/packages/react-data-grid/src/Viewport.js @@ -1,6 +1,6 @@ const React = require('react'); const Canvas = require('./Canvas'); -const cellMetaDataShape = require('./PropTypeShapes/CellMetaDataShape'); +import cellMetaDataShape from 'common/prop-shapes/CellMetaDataShape'; import PropTypes from 'prop-types'; import columnUtils from './ColumnUtils'; import { diff --git a/packages/react-data-grid/src/__tests__/AppConstants.spec.js b/packages/react-data-grid/src/__tests__/AppConstants.spec.js deleted file mode 100644 index 7a9afaf2ea..0000000000 --- a/packages/react-data-grid/src/__tests__/AppConstants.spec.js +++ /dev/null @@ -1,7 +0,0 @@ -import AppConstants from '../AppConstants'; - -describe('AppConstants test', () => { - it('should import AppConstants', () => { - expect(AppConstants).toBeDefined(); - }); -}); diff --git a/packages/react-data-grid/src/__tests__/CellExpand.spec.js b/packages/react-data-grid/src/__tests__/CellExpand.spec.js index 706b1c4f00..8b71c3aefe 100644 --- a/packages/react-data-grid/src/__tests__/CellExpand.spec.js +++ b/packages/react-data-grid/src/__tests__/CellExpand.spec.js @@ -1,6 +1,6 @@ import React from 'react'; -import CellExpand from '../CellExpand'; -import AppConstants from '../AppConstants'; +import CellExpander from '../CellExpand'; +import { CellExpand } from 'common/constants'; import { mount } from 'enzyme'; describe('CellExpand', () => { @@ -15,32 +15,28 @@ describe('CellExpand', () => { }; const renderComponent = (props) => { - const wrapper = mount(); + const wrapper = mount(); return wrapper; }; - it('should import CellExpand', () => { - expect(CellExpand).toBeDefined(); - }); - it('should create an instance of CellExpand', () => { let fakeProps = getFakeProps(false); testElement = renderComponent(fakeProps); - expect(testElement.find(CellExpand).length).toBe(1); + expect(testElement.find(CellExpander).length).toBe(1); }); it('should render correctly when expanded is true', () => { let fakeProps = getFakeProps(true); testElement = renderComponent(fakeProps); expect(testElement.state('expanded')).toBeTruthy(); - expect(testElement.find('span.rdg-cell-expand').text()).toBe(AppConstants.CellExpand.DOWN_TRIANGLE); + expect(testElement.find('span.rdg-cell-expand').text()).toBe(CellExpand.DOWN_TRIANGLE); }); it('should render correctly when expanded is false', () => { let fakeProps = getFakeProps(false); testElement = renderComponent(fakeProps); expect(testElement.state('expanded')).toBeFalsy(); - expect(testElement.find('span.rdg-cell-expand').text()).toBe(AppConstants.CellExpand.RIGHT_TRIANGLE); + expect(testElement.find('span.rdg-cell-expand').text()).toBe(CellExpand.RIGHT_TRIANGLE); }); it('should call onCellExpand when clicked', () => { diff --git a/packages/react-data-grid/src/__tests__/HeaderCell.spec.js b/packages/react-data-grid/src/__tests__/HeaderCell.spec.js index cdc8692979..55f2d89e36 100644 --- a/packages/react-data-grid/src/__tests__/HeaderCell.spec.js +++ b/packages/react-data-grid/src/__tests__/HeaderCell.spec.js @@ -4,7 +4,7 @@ const HeaderCell = rewire('../HeaderCell'); const TestUtils = require('react-dom/test-utils'); const rewireModule = require('../../../../test/rewireModule'); const StubComponent = require('../../../../test/StubComponent'); -import SortableHeaderCell from '../cells/headerCells/SortableHeaderCell'; +import SortableHeaderCell from 'common/cells/headerCells/SortableHeaderCell'; describe('Header Cell Tests', () => { // Configure local constiable replacements for the module. diff --git a/packages/react-data-grid/src/__tests__/RowComparer.spec.js b/packages/react-data-grid/src/__tests__/RowComparer.spec.js index 236599bfe1..ca9ed5443f 100644 --- a/packages/react-data-grid/src/__tests__/RowComparer.spec.js +++ b/packages/react-data-grid/src/__tests__/RowComparer.spec.js @@ -1,4 +1,4 @@ -import {shouldRowUpdate} from '../RowComparer'; +import shouldRowUpdate from 'common/utils/RowComparer'; let columns = [{ id: 1, key: 'col1', width: 100 }, { id: 2, key: 'col2', width: 100 }]; let cellMetaData = { diff --git a/packages/react-data-grid/src/constants/index.js b/packages/react-data-grid/src/constants/index.js deleted file mode 100644 index 98829bad34..0000000000 --- a/packages/react-data-grid/src/constants/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import * as CellNavigationMode from './CellNavigationMode'; -import * as EventTypes from './EventTypes'; - -export { - CellNavigationMode, - EventTypes -}; diff --git a/packages/react-data-grid/src/index.js b/packages/react-data-grid/src/index.js index 5ee3e39055..34151f8062 100644 --- a/packages/react-data-grid/src/index.js +++ b/packages/react-data-grid/src/index.js @@ -1,5 +1,5 @@ -const Grid = require('./ReactDataGrid'); -import RowComparer from './RowComparer'; +import Grid from './ReactDataGrid'; +import RowComparer from 'common/utils/RowComparer'; import Cell from './Cell'; module.exports = Grid; module.exports.Row = require('./Row'); @@ -7,9 +7,8 @@ module.exports.Cell = Cell; module.exports.HeaderCell = require('./HeaderCell'); module.exports.RowComparer = RowComparer; module.exports.EmptyChildRow = require('./EmptyChildRow'); -module.exports.editors = require('./editors'); +module.exports.editors = require('common/editors'); module.exports.formatters = require('./formatters'); -module.exports.utils = require('./utils'); -module.exports.shapes = require('./PropTypeShapes'); -module.exports._constants = require('./AppConstants'); +module.exports.shapes = require('common/prop-shapes'); +module.exports._constants = require('common/constants'); module.exports._helpers = require('./helpers'); diff --git a/packages/react-data-grid/src/masks/InteractionMasks.js b/packages/react-data-grid/src/masks/InteractionMasks.js index 83dcba1323..9739a692f8 100644 --- a/packages/react-data-grid/src/masks/InteractionMasks.js +++ b/packages/react-data-grid/src/masks/InteractionMasks.js @@ -6,8 +6,9 @@ import SelectionRangeMask from './SelectionRangeMask'; import CopyMask from './CopyMask'; import DragMask from './DragMask'; import DragHandle from './DragHandle'; -import EditorContainer from '../editors/EditorContainer'; -import { isKeyPrintable, isCtrlKeyHeldDown } from '../utils/keyboardUtils'; +import EditorContainer from 'common/editors/EditorContainer'; +import { UpdateActions } from 'common/constants'; +import { isKeyPrintable, isCtrlKeyHeldDown } from 'common/utils/keyboardUtils'; import { getSelectedDimensions, getSelectedCellValue, @@ -18,11 +19,10 @@ import { isSelectedCellEditable, selectedRangeIsSingleCell } from '../utils/SelectedCellUtils'; -import isFunction from '../utils/isFunction'; -import * as AppConstants from '../AppConstants'; +import isFunction from 'common/utils/isFunction'; import * as columnUtils from '../ColumnUtils'; import * as keyCodes from '../KeyCodes'; -import { CellNavigationMode, EventTypes } from '../constants'; +import { CellNavigationMode, EventTypes } from 'common/constants'; require('../../../../themes/interaction-masks.css'); @@ -266,7 +266,7 @@ class InteractionMasks extends React.Component { }); } - onGridRowsUpdated(cellKey, toRow, toRow, { [cellKey]: textToCopy }, AppConstants.UpdateActions.COPY_PASTE, fromRow); + onGridRowsUpdated(cellKey, toRow, toRow, { [cellKey]: textToCopy }, UpdateActions.COPY_PASTE, fromRow); }; isKeyboardNavigationEvent(e) { @@ -549,7 +549,7 @@ class InteractionMasks extends React.Component { onCellsDragged({ cellKey, fromRow, toRow, value }); } if (isFunction(onGridRowsUpdated)) { - onGridRowsUpdated(cellKey, fromRow, toRow, { [cellKey]: value }, AppConstants.UpdateActions.CELL_DRAG); + onGridRowsUpdated(cellKey, fromRow, toRow, { [cellKey]: value }, UpdateActions.CELL_DRAG); } } this.setState({ diff --git a/packages/react-data-grid/src/masks/SelectionMask.js b/packages/react-data-grid/src/masks/SelectionMask.js index c0e52b2668..494ee36ae5 100644 --- a/packages/react-data-grid/src/masks/SelectionMask.js +++ b/packages/react-data-grid/src/masks/SelectionMask.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import CellMask from './CellMask'; import * as columnUtils from '../ColumnUtils'; -import zIndexes from '../constants/zIndexes'; +import zIndexes from 'common/constants/zIndexes'; const isFrozenColumn = (columns, {idx}) => columnUtils.isFrozen(columnUtils.getColumn(columns, idx)); diff --git a/packages/react-data-grid/src/masks/__tests__/CellMask.spec.js b/packages/react-data-grid/src/masks/__tests__/CellMask.spec.js index 900bf3f627..7a60c60567 100644 --- a/packages/react-data-grid/src/masks/__tests__/CellMask.spec.js +++ b/packages/react-data-grid/src/masks/__tests__/CellMask.spec.js @@ -3,7 +3,7 @@ import { shallow } from 'enzyme'; import { sel } from '../../__tests__/utils'; import CellMask from '../CellMask'; -import zIndexes from '../../constants/zIndexes'; +import zIndexes from 'common/constants/zIndexes'; describe('CellMask', () => { const setup = (children) => { diff --git a/packages/react-data-grid/src/masks/__tests__/CopyMask.spec.js b/packages/react-data-grid/src/masks/__tests__/CopyMask.spec.js index 0d41a1d7f4..806489fbf2 100644 --- a/packages/react-data-grid/src/masks/__tests__/CopyMask.spec.js +++ b/packages/react-data-grid/src/masks/__tests__/CopyMask.spec.js @@ -3,7 +3,7 @@ import { shallow } from 'enzyme'; import CellMask from '../CellMask'; import CopyMask from '../CopyMask'; -import zIndexes from '../../constants/zIndexes'; +import zIndexes from 'common/constants/zIndexes'; describe('CopyMask', () => { const setup = (propsOverride = {}) => { diff --git a/packages/react-data-grid/src/masks/__tests__/DragMask.spec.js b/packages/react-data-grid/src/masks/__tests__/DragMask.spec.js index 61997fd6e7..5c771114d3 100644 --- a/packages/react-data-grid/src/masks/__tests__/DragMask.spec.js +++ b/packages/react-data-grid/src/masks/__tests__/DragMask.spec.js @@ -3,7 +3,7 @@ import { shallow } from 'enzyme'; import CellMask from '../CellMask'; import DragMask from '../DragMask'; -import zIndexes from '../../constants/zIndexes'; +import zIndexes from 'common/constants/zIndexes'; describe('DragMask', () => { const setup = (propsOverride = {}) => { diff --git a/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.js b/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.js index 234e322538..aaa244e9ff 100644 --- a/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.js +++ b/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.js @@ -8,11 +8,10 @@ import CopyMask from '../CopyMask'; import DragMask from '../DragMask'; import DragHandle from '../DragHandle'; import EventBus from '../EventBus'; -import EditorContainer from '../../editors/EditorContainer'; +import EditorContainer from 'common/editors/EditorContainer'; import { sel, createColumns } from '../../__tests__/utils'; -import * as AppConstants from '../../AppConstants'; import * as keyCodes from '../../KeyCodes'; -import { CellNavigationMode, EventTypes } from '../../constants'; +import { CellNavigationMode, EventTypes, UpdateActions } from 'common/constants'; const NUMBER_OF_COLUMNS = 10; const ROWS_COUNT = 5; @@ -713,7 +712,7 @@ describe('', () => { // Paste copied cell pressKey(wrapper, 'v', { keyCode: keyCodes.v, ctrlKey: true }); - expect(props.onGridRowsUpdated).toHaveBeenCalledWith('Column1', 1, 1, { Column1: '3' }, AppConstants.UpdateActions.COPY_PASTE, 2); + expect(props.onGridRowsUpdated).toHaveBeenCalledWith('Column1', 1, 1, { Column1: '3' }, UpdateActions.COPY_PASTE, 2); }); }); @@ -758,7 +757,7 @@ describe('', () => { props.eventBus.dispatch(EventTypes.DRAG_ENTER, { overRowIdx: 6 }); wrapper.find(DragHandle).simulate('dragEnd'); - expect(props.onGridRowsUpdated).toHaveBeenCalledWith('Column1', 2, 6, { Column1: '3' }, AppConstants.UpdateActions.CELL_DRAG); + expect(props.onGridRowsUpdated).toHaveBeenCalledWith('Column1', 2, 6, { Column1: '3' }, UpdateActions.CELL_DRAG); }); }); diff --git a/packages/react-data-grid/src/masks/__tests__/SelectionMask.spec.js b/packages/react-data-grid/src/masks/__tests__/SelectionMask.spec.js index c5b06f5644..962fdf4d7d 100644 --- a/packages/react-data-grid/src/masks/__tests__/SelectionMask.spec.js +++ b/packages/react-data-grid/src/masks/__tests__/SelectionMask.spec.js @@ -3,7 +3,7 @@ import { shallow } from 'enzyme'; import CellMask from '../CellMask'; import SelectionMask from '../SelectionMask'; -import zIndexes from '../../constants/zIndexes'; +import zIndexes from 'common/constants/zIndexes'; describe('SelectionMask', () => { const TOP = 45; diff --git a/packages/react-data-grid/src/masks/__tests__/SelectionRangeMask.spec.js b/packages/react-data-grid/src/masks/__tests__/SelectionRangeMask.spec.js index 2e4988d011..388d4c3dfa 100644 --- a/packages/react-data-grid/src/masks/__tests__/SelectionRangeMask.spec.js +++ b/packages/react-data-grid/src/masks/__tests__/SelectionRangeMask.spec.js @@ -3,7 +3,7 @@ import { shallow } from 'enzyme'; import CellMask from '../CellMask'; import SelectionRangeMask from '../SelectionRangeMask'; -import zIndexes from '../../constants/zIndexes'; +import zIndexes from 'common/constants/zIndexes'; describe('SelectionRangeMask', () => { const setup = (propsOverride = {}) => { diff --git a/packages/react-data-grid/src/utils/SelectedCellUtils.js b/packages/react-data-grid/src/utils/SelectedCellUtils.js index fa714ae237..640d2f241a 100644 --- a/packages/react-data-grid/src/utils/SelectedCellUtils.js +++ b/packages/react-data-grid/src/utils/SelectedCellUtils.js @@ -1,8 +1,8 @@ -import { CellNavigationMode } from '../constants/'; -import isFunction from './isFunction'; +import { CellNavigationMode } from 'common/constants'; +import isFunction from 'common/utils/isFunction'; import * as rowUtils from '../RowUtils'; import * as columnUtils from '../ColumnUtils'; -import zIndexes from '../constants/zIndexes'; +import zIndexes from 'common/constants/zIndexes'; const getRowTop = (rowIdx, rowHeight) => rowIdx * rowHeight; diff --git a/packages/react-data-grid/src/utils/__tests__/keyboardUtils.spec.js b/packages/react-data-grid/src/utils/__tests__/keyboardUtils.spec.js index e708944f58..20ad812b78 100644 --- a/packages/react-data-grid/src/utils/__tests__/keyboardUtils.spec.js +++ b/packages/react-data-grid/src/utils/__tests__/keyboardUtils.spec.js @@ -1,4 +1,4 @@ -import { isCtrlKeyHeldDown, isKeyPrintable } from '../keyboardUtils'; +import { isCtrlKeyHeldDown, isKeyPrintable } from 'common/utils/keyboardUtils'; describe('isKeyPrintable', () => { it('should return true if ctrl key is pressed', () => { diff --git a/packages/react-data-grid/src/utils/isImmutableCollection.js b/packages/react-data-grid/src/utils/isImmutableCollection.js deleted file mode 100644 index ec86c1b4c4..0000000000 --- a/packages/react-data-grid/src/utils/isImmutableCollection.js +++ /dev/null @@ -1,7 +0,0 @@ -import { Iterable } from 'immutable'; - -const isImmutableCollection = (objToVerify) => { - return Iterable.isIterable(objToVerify); -}; - -module.exports = isImmutableCollection; From be93dad61eca848f2027d1a4d1c671b8334b14b7 Mon Sep 17 00:00:00 2001 From: Conor Malone Date: Thu, 6 Sep 2018 14:22:56 +0100 Subject: [PATCH 3/8] Fix object assign --- packages/react-data-grid/src/ReactDataGrid.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-data-grid/src/ReactDataGrid.js b/packages/react-data-grid/src/ReactDataGrid.js index 7e4a0c72b6..a0ccb1caba 100644 --- a/packages/react-data-grid/src/ReactDataGrid.js +++ b/packages/react-data-grid/src/ReactDataGrid.js @@ -13,6 +13,10 @@ const ColumnMetrics = require('./ColumnMetrics'); require('../../../themes/react-data-grid-core.css'); require('../../../themes/react-data-grid-checkbox.css'); +if (!Object.assign) { + Object.assign = require('object-assign'); +} + import { CellNavigationMode, EventTypes, UpdateActions } from 'common/constants'; import { EventBus } from './masks'; From a189f4a186d01ca21ad9aed54422cca420bd36bb Mon Sep 17 00:00:00 2001 From: Conor Malone Date: Fri, 7 Sep 2018 10:30:15 +0100 Subject: [PATCH 4/8] Adress PR comments --- .../cells/headerCells/FilterableHeaderCell.js | 4 +- packages/common/constants/index.js | 4 +- packages/common/editors/EditorContainer.js | 2 +- packages/common/utils/RowComparer.js | 5 +- packages/common/utils/index.js | 71 +++++++++++++------ packages/common/utils/isColumnsImmutable.js | 3 - packages/common/utils/isEmptyArray.js | 5 -- packages/common/utils/isEmptyObject.js | 5 -- packages/common/utils/isFunction.js | 4 -- .../common/utils/isImmutableCollection.js | 7 -- packages/common/utils/isImmutableMap.js | 3 - .../common/utils/mixedTypeValueRetriever.js | 9 --- .../headerCells/filters/AutoCompleteFilter.js | 2 +- .../src/data/RowFilterer.js | 3 +- .../src/data/RowGrouper.js | 2 +- .../src/data/RowGrouperResolver.js | 5 +- .../src/data/RowSorter.js | 3 +- .../src/data/Selectors.js | 3 +- .../draggable-header/DraggableHeaderCell.js | 5 ++ .../__tests__/DraggableHeaderCell.spec.js | 2 +- .../src/draggable/DragDropContainer.js | 2 +- .../src/draggable/DraggableHeaderCell.js | 2 +- packages/react-data-grid/src/Cell.js | 4 +- .../src/{CellExpand.js => CellExpander.js} | 0 packages/react-data-grid/src/ColumnMetrics.js | 2 +- packages/react-data-grid/src/ReactDataGrid.js | 2 +- .../src/__tests__/CellExpand.spec.js | 2 +- .../src/masks/InteractionMasks.js | 2 +- .../src/utils/SelectedCellUtils.js | 2 +- 29 files changed, 77 insertions(+), 88 deletions(-) delete mode 100644 packages/common/utils/isColumnsImmutable.js delete mode 100644 packages/common/utils/isEmptyArray.js delete mode 100644 packages/common/utils/isEmptyObject.js delete mode 100644 packages/common/utils/isFunction.js delete mode 100644 packages/common/utils/isImmutableCollection.js delete mode 100644 packages/common/utils/isImmutableMap.js delete mode 100644 packages/common/utils/mixedTypeValueRetriever.js rename packages/react-data-grid/src/{CellExpand.js => CellExpander.js} (100%) diff --git a/packages/common/cells/headerCells/FilterableHeaderCell.js b/packages/common/cells/headerCells/FilterableHeaderCell.js index 2875551f14..d809a4976a 100644 --- a/packages/common/cells/headerCells/FilterableHeaderCell.js +++ b/packages/common/cells/headerCells/FilterableHeaderCell.js @@ -1,5 +1,5 @@ -const React = require('react'); -const ExcelColumn = require('common/prop-shapes/ExcelColumn'); +import React from 'react'; +import ExcelColumn from 'common/prop-shapes/ExcelColumn'; import PropTypes from 'prop-types'; class FilterableHeaderCell extends React.Component { diff --git a/packages/common/constants/index.js b/packages/common/constants/index.js index 47f8cf7046..c712979cb4 100644 --- a/packages/common/constants/index.js +++ b/packages/common/constants/index.js @@ -15,8 +15,8 @@ const DragItemTypes = { }; const CellExpand = { - DOWN_TRIANGLE: String.fromCharCode('9660'), - RIGHT_TRIANGLE: String.fromCharCode('9654') + DOWN_TRIANGLE: String.fromCharCode(9660), + RIGHT_TRIANGLE: String.fromCharCode(9654) }; diff --git a/packages/common/editors/EditorContainer.js b/packages/common/editors/EditorContainer.js index b14115c6c6..4ade69f715 100644 --- a/packages/common/editors/EditorContainer.js +++ b/packages/common/editors/EditorContainer.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import joinClasses from 'classnames'; import SimpleTextEditor from './SimpleTextEditor'; -import isFunction from 'common/utils/isFunction'; +import {isFunction} from 'common/utils'; import { isKeyPrintable, isCtrlKeyHeldDown } from 'common/utils/keyboardUtils'; import zIndexes from 'common/constants/zIndexes'; require('../../../themes/react-data-grid-core.css'); diff --git a/packages/common/utils/RowComparer.js b/packages/common/utils/RowComparer.js index def0c3655c..9957322f60 100644 --- a/packages/common/utils/RowComparer.js +++ b/packages/common/utils/RowComparer.js @@ -1,4 +1,4 @@ -export const shouldRowUpdate = (nextProps, currentProps) => { +export default function shouldRowUpdate(nextProps, currentProps) { return currentProps.columns !== nextProps.columns || nextProps.row !== currentProps.row || currentProps.colOverscanStartIdx !== nextProps.colOverscanStartIdx || @@ -13,6 +13,5 @@ export const shouldRowUpdate = (nextProps, currentProps) => { currentProps.canDrop !== nextProps.canDrop || currentProps.forceUpdate === true || currentProps.extraClasses !== nextProps.extraClasses; -}; +} -export default shouldRowUpdate; diff --git a/packages/common/utils/index.js b/packages/common/utils/index.js index 65c9eb8629..ab2b86f027 100644 --- a/packages/common/utils/index.js +++ b/packages/common/utils/index.js @@ -1,25 +1,50 @@ -import { List } from 'immutable'; - -module.exports = { - isEmptyArray: require('./isEmptyArray'), - isEmptyObject: require('./isEmptyObject'), - isImmutableCollection: require('./isImmutableCollection'), - getMixedTypeValueRetriever: require('./mixedTypeValueRetriever'), - isColumnsImmutable: require('./isColumnsImmutable'), - isImmutableMap: require('./isImmutableMap'), - last: (arrayOrList) => { - if (arrayOrList == null) { - throw new Error('arrayOrCollection is null'); - } - - if (List.isList(arrayOrList)) { - return arrayOrList.last(); - } - - if (Array.isArray(arrayOrList)) { - return arrayOrList[arrayOrList.length - 1]; - } - - throw new Error('Cant get last of: ' + typeof(arrayOrList)); +import { List, Iterable, Map } from 'immutable'; + +export const isColumnsImmutable = (columns) => { + return (typeof Immutable !== 'undefined' && (columns instanceof Immutable.List)); +}; + +export const isEmptyArray = (obj) => { + return Array.isArray(obj) && obj.length === 0; +}; + +export const isFunction = (functionToCheck) => { + let getType = {}; + return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]'; +}; + +export const isEmptyObject = (obj) => { + return Object.keys(obj).length === 0 && obj.constructor === Object; +}; + +export const isImmutableCollection = objToVerify => { + return Iterable.isIterable(objToVerify); +}; + +export const getMixedTypeValueRetriever = (isImmutable) => { + let retObj = {}; + const retriever = (item, key) => { return item[key]; }; + const immutableRetriever = (immutable, key) => { return immutable.get(key); }; + + retObj.getValue = isImmutable ? immutableRetriever : retriever; + + return retObj; +}; + +export const isImmutableMap = Map.isMap; + +export const last = arrayOrList => { + if (arrayOrList == null) { + throw new Error('arrayOrCollection is null'); } + + if (List.isList(arrayOrList)) { + return arrayOrList.last(); + } + + if (Array.isArray(arrayOrList)) { + return arrayOrList[arrayOrList.length - 1]; + } + + throw new Error('Cant get last of: ' + typeof(arrayOrList)); }; diff --git a/packages/common/utils/isColumnsImmutable.js b/packages/common/utils/isColumnsImmutable.js deleted file mode 100644 index 4e027033cc..0000000000 --- a/packages/common/utils/isColumnsImmutable.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function isColumnsImmutable(columns) { - return (typeof Immutable !== 'undefined' && (columns instanceof Immutable.List)); -} diff --git a/packages/common/utils/isEmptyArray.js b/packages/common/utils/isEmptyArray.js deleted file mode 100644 index 80501b6335..0000000000 --- a/packages/common/utils/isEmptyArray.js +++ /dev/null @@ -1,5 +0,0 @@ -const isEmptyArray = (obj) => { - return Array.isArray(obj) && obj.length === 0; -}; - -export default isEmptyArray; diff --git a/packages/common/utils/isEmptyObject.js b/packages/common/utils/isEmptyObject.js deleted file mode 100644 index c0995a1cf0..0000000000 --- a/packages/common/utils/isEmptyObject.js +++ /dev/null @@ -1,5 +0,0 @@ -export default function isEmpty(obj) { - return Object.keys(obj).length === 0 && obj.constructor === Object; -} - - diff --git a/packages/common/utils/isFunction.js b/packages/common/utils/isFunction.js deleted file mode 100644 index 1efcdbfcfc..0000000000 --- a/packages/common/utils/isFunction.js +++ /dev/null @@ -1,4 +0,0 @@ -export default function isFunction(functionToCheck) { - let getType = {}; - return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]'; -} diff --git a/packages/common/utils/isImmutableCollection.js b/packages/common/utils/isImmutableCollection.js deleted file mode 100644 index 511030a1ec..0000000000 --- a/packages/common/utils/isImmutableCollection.js +++ /dev/null @@ -1,7 +0,0 @@ -import { Iterable } from 'immutable'; - -export default function isImmutableCollection(objToVerify) { - return Iterable.isIterable(objToVerify); -}; - - diff --git a/packages/common/utils/isImmutableMap.js b/packages/common/utils/isImmutableMap.js deleted file mode 100644 index 4704bcb9b8..0000000000 --- a/packages/common/utils/isImmutableMap.js +++ /dev/null @@ -1,3 +0,0 @@ -import { Map } from 'immutable'; - -module.exports = Map.isMap; diff --git a/packages/common/utils/mixedTypeValueRetriever.js b/packages/common/utils/mixedTypeValueRetriever.js deleted file mode 100644 index 1a0cdf9eb5..0000000000 --- a/packages/common/utils/mixedTypeValueRetriever.js +++ /dev/null @@ -1,9 +0,0 @@ -export default function getMixedTypeValueRetriever(isImmutable) { - let retObj = {}; - const retriever = (item, key) => { return item[key]; }; - const immutableRetriever = (immutable, key) => { return immutable.get(key); }; - - retObj.getValue = isImmutable ? immutableRetriever : retriever; - - return retObj; -} diff --git a/packages/react-data-grid-addons/src/cells/headerCells/filters/AutoCompleteFilter.js b/packages/react-data-grid-addons/src/cells/headerCells/filters/AutoCompleteFilter.js index c0423fffd3..6525b13e05 100644 --- a/packages/react-data-grid-addons/src/cells/headerCells/filters/AutoCompleteFilter.js +++ b/packages/react-data-grid-addons/src/cells/headerCells/filters/AutoCompleteFilter.js @@ -2,7 +2,7 @@ import 'react-select/dist/react-select.css'; import React from 'react'; import PropTypes from 'prop-types'; import Select from 'react-select'; -import isEmptyArray from 'common/utils/isEmptyArray'; +import {isEmptyArray} from 'common/utils'; import ExcelColumn from 'common/prop-shapes/ExcelColumn'; class AutoCompleteFilter extends React.Component { diff --git a/packages/react-data-grid-addons/src/data/RowFilterer.js b/packages/react-data-grid-addons/src/data/RowFilterer.js index 1cdbffc743..3aaed1ebf3 100644 --- a/packages/react-data-grid-addons/src/data/RowFilterer.js +++ b/packages/react-data-grid-addons/src/data/RowFilterer.js @@ -1,5 +1,4 @@ -import isImmutableCollection from 'common/utils/isImmutableCollection'; -import getMixedTypeValueRetriever from 'common/utils/mixedTypeValueRetriever'; +import {isImmutableCollection, getMixedTypeValueRetriever} from 'common/utils'; const filterRows = (filters, rows = []) => { return rows.filter(r => { diff --git a/packages/react-data-grid-addons/src/data/RowGrouper.js b/packages/react-data-grid-addons/src/data/RowGrouper.js index 90c797cc3a..fdbd3cb558 100644 --- a/packages/react-data-grid-addons/src/data/RowGrouper.js +++ b/packages/react-data-grid-addons/src/data/RowGrouper.js @@ -1,4 +1,4 @@ -import isImmutableCollection from 'common/utils/isImmutableCollection'; +import {isImmutableCollection} from 'common/utils'; import Resolver from './RowGrouperResolver'; diff --git a/packages/react-data-grid-addons/src/data/RowGrouperResolver.js b/packages/react-data-grid-addons/src/data/RowGrouperResolver.js index fb25ddeccf..778b6836a7 100644 --- a/packages/react-data-grid-addons/src/data/RowGrouperResolver.js +++ b/packages/react-data-grid-addons/src/data/RowGrouperResolver.js @@ -1,8 +1,7 @@ import {List} from 'immutable'; import groupBy from 'lodash/groupBy'; -import getMixedTypeValueRetriever from 'common/utils/mixedTypeValueRetriever'; -import isImmutableMap from 'common/utils/isImmutableMap' -; +import { isImmutableMap, getMixedTypeValueRetriever} from 'common/utils'; + export default class RowGrouperResolver { constructor(isImmutable) { diff --git a/packages/react-data-grid-addons/src/data/RowSorter.js b/packages/react-data-grid-addons/src/data/RowSorter.js index dced10316c..d527f95c0b 100644 --- a/packages/react-data-grid-addons/src/data/RowSorter.js +++ b/packages/react-data-grid-addons/src/data/RowSorter.js @@ -1,5 +1,4 @@ -import getMixedTypeValueRetriever from 'common/utils/mixedTypeValueRetriever'; -import isImmutableCollection from 'common/utils/isImmutableCollection'; +import {getMixedTypeValueRetriever, isImmutableCollection} from 'common/utils'; const comparer = (a, b) => { if (a > b) { diff --git a/packages/react-data-grid-addons/src/data/Selectors.js b/packages/react-data-grid-addons/src/data/Selectors.js index b041ba94cb..4abcfb1af4 100644 --- a/packages/react-data-grid-addons/src/data/Selectors.js +++ b/packages/react-data-grid-addons/src/data/Selectors.js @@ -1,6 +1,5 @@ import { createSelector } from 'reselect'; -import isEmptyArray from 'common/utils/isEmptyArray'; -import isEmptyObject from 'common/utils/isEmptyObject'; +import {isEmptyObject , isEmptyArray} from 'common/utils'; const groupRows = require('./RowGrouper'); const filterRows = require('./RowFilterer'); const sortRows = require('./RowSorter'); diff --git a/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js b/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js index edd7c45a79..e1e44a1853 100644 --- a/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js +++ b/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js @@ -3,6 +3,11 @@ import PropTypes from 'prop-types'; import { DragSource, DropTarget } from 'react-dnd'; class DraggableHeaderCell extends React.Component { + + static defaultProps = { + renderHeaderCell: () =>
+ }; + render() { const { connectDragSource, diff --git a/packages/react-data-grid-addons/src/draggable-header/__tests__/DraggableHeaderCell.spec.js b/packages/react-data-grid-addons/src/draggable-header/__tests__/DraggableHeaderCell.spec.js index 8186f027dc..55a747d527 100644 --- a/packages/react-data-grid-addons/src/draggable-header/__tests__/DraggableHeaderCell.spec.js +++ b/packages/react-data-grid-addons/src/draggable-header/__tests__/DraggableHeaderCell.spec.js @@ -10,7 +10,7 @@ describe('', () => { it('should render grid HeaderCell wrapper with cursor: move ', () => { const wrapper = shallow( - HeaderCell}/> + }/> ); expect(wrapper.find(HeaderCell)); diff --git a/packages/react-data-grid-addons/src/draggable/DragDropContainer.js b/packages/react-data-grid-addons/src/draggable/DragDropContainer.js index 29e95f9de5..b56968b466 100644 --- a/packages/react-data-grid-addons/src/draggable/DragDropContainer.js +++ b/packages/react-data-grid-addons/src/draggable/DragDropContainer.js @@ -2,7 +2,7 @@ import React, {Component} from 'react'; import html5DragDropContext from '../shared/html5DragDropContext'; import DraggableHeaderCell from './DraggableHeaderCell'; import RowDragLayer from './RowDragLayer'; -import isColumnsImmutable from 'common/utils/isColumnsImmutable'; +import {isColumnsImmutable} from 'common/utils'; import PropTypes from 'prop-types'; class DraggableContainer extends Component { diff --git a/packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js b/packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js index 7e3411f406..17b9774dea 100644 --- a/packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js +++ b/packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js @@ -33,7 +33,7 @@ DraggableHeaderCell.propTypes = { connectDragSource: PropTypes.func.isRequired, connectDragPreview: PropTypes.func.isRequired, isDragging: PropTypes.bool.isRequired, - renderHeaderCell: PropTypes.func + renderHeaderCell: PropTypes.func.isRequired }; function collect(connect, monitor) { diff --git a/packages/react-data-grid/src/Cell.js b/packages/react-data-grid/src/Cell.js index 3d6397203d..c5762d3897 100644 --- a/packages/react-data-grid/src/Cell.js +++ b/packages/react-data-grid/src/Cell.js @@ -2,12 +2,12 @@ const React = require('react'); import PropTypes from 'prop-types'; const joinClasses = require('classnames'); import ExcelColumn from 'common/prop-shapes/ExcelColumn'; -import isFunction from 'common/utils/isFunction'; +import {isFunction} from 'common/utils'; import CellMetaDataShape from 'common/prop-shapes/CellMetaDataShape'; const SimpleCellFormatter = require('./formatters/SimpleCellFormatter'); const createObjectWithProperties = require('./createObjectWithProperties'); import CellAction from './CellAction'; -import CellExpand from './CellExpand'; +import CellExpand from './CellExpander'; import ChildRowDeleteButton from './ChildRowDeleteButton'; import columnUtils from './ColumnUtils'; require('../../../themes/react-data-grid-cell.css'); diff --git a/packages/react-data-grid/src/CellExpand.js b/packages/react-data-grid/src/CellExpander.js similarity index 100% rename from packages/react-data-grid/src/CellExpand.js rename to packages/react-data-grid/src/CellExpander.js diff --git a/packages/react-data-grid/src/ColumnMetrics.js b/packages/react-data-grid/src/ColumnMetrics.js index 0976d4316d..fd9eb10aa2 100644 --- a/packages/react-data-grid/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'); -import isColumnsImmutable from 'common/utils/isColumnsImmutable'; +import {isColumnsImmutable} from 'common/utils'; function setColumnWidths(columns, totalWidth) { return columns.map(column => { diff --git a/packages/react-data-grid/src/ReactDataGrid.js b/packages/react-data-grid/src/ReactDataGrid.js index a0ccb1caba..49a2edd686 100644 --- a/packages/react-data-grid/src/ReactDataGrid.js +++ b/packages/react-data-grid/src/ReactDataGrid.js @@ -6,7 +6,7 @@ import CheckboxEditor from 'common/editors/CheckboxEditor'; import RowUtils from './RowUtils'; import ColumnUtils from './ColumnUtils'; import KeyCodes from './KeyCodes'; -import isFunction from 'common/utils/isFunction'; +import {isFunction} from 'common/utils'; import SelectAll from './formatters/SelectAll'; import { DEFINE_SORT } from 'common/cells/headerCells/SortableHeaderCell'; const ColumnMetrics = require('./ColumnMetrics'); diff --git a/packages/react-data-grid/src/__tests__/CellExpand.spec.js b/packages/react-data-grid/src/__tests__/CellExpand.spec.js index 8b71c3aefe..640145606c 100644 --- a/packages/react-data-grid/src/__tests__/CellExpand.spec.js +++ b/packages/react-data-grid/src/__tests__/CellExpand.spec.js @@ -1,5 +1,5 @@ import React from 'react'; -import CellExpander from '../CellExpand'; +import CellExpander from '../CellExpander'; import { CellExpand } from 'common/constants'; import { mount } from 'enzyme'; diff --git a/packages/react-data-grid/src/masks/InteractionMasks.js b/packages/react-data-grid/src/masks/InteractionMasks.js index 9739a692f8..d386d7fe4a 100644 --- a/packages/react-data-grid/src/masks/InteractionMasks.js +++ b/packages/react-data-grid/src/masks/InteractionMasks.js @@ -19,7 +19,7 @@ import { isSelectedCellEditable, selectedRangeIsSingleCell } from '../utils/SelectedCellUtils'; -import isFunction from 'common/utils/isFunction'; +import {isFunction} from 'common/utils'; import * as columnUtils from '../ColumnUtils'; import * as keyCodes from '../KeyCodes'; import { CellNavigationMode, EventTypes } from 'common/constants'; diff --git a/packages/react-data-grid/src/utils/SelectedCellUtils.js b/packages/react-data-grid/src/utils/SelectedCellUtils.js index 640d2f241a..341dca868d 100644 --- a/packages/react-data-grid/src/utils/SelectedCellUtils.js +++ b/packages/react-data-grid/src/utils/SelectedCellUtils.js @@ -1,5 +1,5 @@ import { CellNavigationMode } from 'common/constants'; -import isFunction from 'common/utils/isFunction'; +import {isFunction} from 'common/utils'; import * as rowUtils from '../RowUtils'; import * as columnUtils from '../ColumnUtils'; import zIndexes from 'common/constants/zIndexes'; From 24a0e7d5ea22d50bb0c7e0b6259d1bd454d825fc Mon Sep 17 00:00:00 2001 From: Conor Malone Date: Fri, 7 Sep 2018 10:48:24 +0100 Subject: [PATCH 5/8] Fix tests --- .../draggable-header/DraggableHeaderCell.js | 38 +++++++++++++++++-- .../src/scripts/example24-draggable-header.js | 2 +- 2 files changed, 35 insertions(+), 5 deletions(-) diff --git a/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js b/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js index e1e44a1853..a169b75b2f 100644 --- a/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js +++ b/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js @@ -2,12 +2,42 @@ import React from 'react'; import PropTypes from 'prop-types'; import { DragSource, DropTarget } from 'react-dnd'; -class DraggableHeaderCell extends React.Component { +class HeaderCell extends React.Component { + static propTypes = { + column: PropTypes.isRequired, + height: PropTypes.number.isRequired, + className: PropTypes.string + }; + + getStyle() { + return { + width: this.props.column.width, + left: this.props.column.left, + display: 'inline-block', + position: 'absolute', + height: this.props.height, + margin: 0, + textOverflow: 'ellipsis', + whiteSpace: 'nowrap' + }; + } - static defaultProps = { - renderHeaderCell: () =>
+ setScrollLeft = (scrollLeft) => { + let node = ReactDOM.findDOMNode(this); + node.style.webkitTransform = `translate3d(${scrollLeft}px, 0px, 0px)`; + node.style.transform = `translate3d(${scrollLeft}px, 0px, 0px)`; }; + render() { + return ( +
+ {this.props.column.name} +
+ ); + } +} + +class DraggableHeaderCell extends React.Component { render() { const { connectDragSource, @@ -30,7 +60,7 @@ class DraggableHeaderCell extends React.Component { style={{ width: 0, cursor: 'move', opacity }} className={isOver && canDrop ? 'rdg-can-drop' : ''} > - {this.props.renderHeaderCell(this.props)} +
) ); diff --git a/packages/react-data-grid-examples/src/scripts/example24-draggable-header.js b/packages/react-data-grid-examples/src/scripts/example24-draggable-header.js index c93ec4d122..c44ad295e6 100644 --- a/packages/react-data-grid-examples/src/scripts/example24-draggable-header.js +++ b/packages/react-data-grid-examples/src/scripts/example24-draggable-header.js @@ -1,5 +1,5 @@ const React = require('react'); -const ReactDataGrid = require('react-data-grid'); +import ReactDataGrid from 'react-data-grid'; const exampleWrapper = require('../components/exampleWrapper'); const { DraggableHeader: { DraggableContainer } From 3560fb569c4c72bfc60277ea6c7930c1054477ab Mon Sep 17 00:00:00 2001 From: Conor Malone Date: Fri, 7 Sep 2018 11:24:12 +0100 Subject: [PATCH 6/8] Fix lint error --- config/webpack.common.config.js | 3 ++- packages/react-data-grid-addons/src/data/Selectors.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/config/webpack.common.config.js b/config/webpack.common.config.js index 02b6bd1153..f7bb5adfe7 100644 --- a/config/webpack.common.config.js +++ b/config/webpack.common.config.js @@ -37,7 +37,8 @@ const config = { amd: 'react-dom' }, 'react/addons': 'React', - moment: 'moment' + moment: 'moment', + immutable: 'immutable' }, module: { loaders: [ diff --git a/packages/react-data-grid-addons/src/data/Selectors.js b/packages/react-data-grid-addons/src/data/Selectors.js index 4abcfb1af4..9c62cb72bc 100644 --- a/packages/react-data-grid-addons/src/data/Selectors.js +++ b/packages/react-data-grid-addons/src/data/Selectors.js @@ -1,5 +1,5 @@ import { createSelector } from 'reselect'; -import {isEmptyObject , isEmptyArray} from 'common/utils'; +import {isEmptyObject, isEmptyArray} from 'common/utils'; const groupRows = require('./RowGrouper'); const filterRows = require('./RowFilterer'); const sortRows = require('./RowSorter'); From 12764bf5cc6d2b807a6c21b13203f16414ceb451 Mon Sep 17 00:00:00 2001 From: Conor Malone Date: Tue, 11 Sep 2018 09:51:16 +0100 Subject: [PATCH 7/8] add ref to draggable header cell --- .../src/draggable/DraggableHeaderCell.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js b/packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js index 17b9774dea..e5ad60d43a 100644 --- a/packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js +++ b/packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js @@ -15,9 +15,10 @@ class DraggableHeaderCell extends Component { } setScrollLeft(scrollLeft) { - let node = ReactDOM.findDOMNode(this); - node.style.webkitTransform = `translate3d(${scrollLeft}px, 0px, 0px)`; - node.style.transform = `translate3d(${scrollLeft}px, 0px, 0px)`; + if (this.node) { + node.style.webkitTransform = `translate3d(${scrollLeft}px, 0px, 0px)`; + node.style.transform = `translate3d(${scrollLeft}px, 0px, 0px)`; + } } render() { @@ -25,7 +26,7 @@ class DraggableHeaderCell extends Component { if (isDragging) { return null; } - return connectDragSource(
{this.props.renderHeaderCell(this.props)}
); + return connectDragSource(
this.node = node} style={{cursor: 'move'}}>{this.props.renderHeaderCell(this.props)}
); } } From 0f5bdeb3b64d7b00af1a09f6d01134b8be1d3f86 Mon Sep 17 00:00:00 2001 From: Conor Malone Date: Tue, 11 Sep 2018 09:58:03 +0100 Subject: [PATCH 8/8] Adress PR comments --- .../src/draggable-header/DraggableHeaderCell.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js b/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js index a169b75b2f..a581ed44af 100644 --- a/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js +++ b/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js @@ -23,14 +23,15 @@ class HeaderCell extends React.Component { } setScrollLeft = (scrollLeft) => { - let node = ReactDOM.findDOMNode(this); - node.style.webkitTransform = `translate3d(${scrollLeft}px, 0px, 0px)`; - node.style.transform = `translate3d(${scrollLeft}px, 0px, 0px)`; + if (this.node) { + node.style.webkitTransform = `translate3d(${scrollLeft}px, 0px, 0px)`; + node.style.transform = `translate3d(${scrollLeft}px, 0px, 0px)`; + } }; render() { return ( -
+
this.node = node} className="react-grid-HeaderCell" style={this.getStyle()}> {this.props.column.name}
); @@ -118,8 +119,7 @@ DraggableHeaderCell.propTypes = { connectDropTarget: PropTypes.func.isRequired, isDragging: PropTypes.bool.isRequired, isOver: PropTypes.bool, - canDrop: PropTypes.bool, - renderHeaderCell: PropTypes.fund + canDrop: PropTypes.bool }; DraggableHeaderCell = DropTarget('Column', target, targetCollect)(