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..f7bb5adfe7 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"'; @@ -36,7 +37,8 @@ const config = { amd: 'react-dom' }, 'react/addons': 'React', - moment: 'moment' + moment: 'moment', + immutable: 'immutable' }, module: { loaders: [ @@ -45,6 +47,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 89% rename from packages/react-data-grid/src/cells/headerCells/FilterableHeaderCell.js rename to packages/common/cells/headerCells/FilterableHeaderCell.js index 127d82dd93..d809a4976a 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'); +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/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..c712979cb4 --- /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/common/constants/zIndexes.js b/packages/common/constants/zIndexes.js new file mode 100644 index 0000000000..ac1db24517 --- /dev/null +++ b/packages/common/constants/zIndexes.js @@ -0,0 +1,6 @@ +export default { + CELL_MASK: 5, + EDITOR_CONTAINER: 10, + FROZEN_CELL_MASK: 15, + FROZEN_EDITOR_CONTAINER: 20 +}; 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 93% rename from packages/react-data-grid/src/editors/EditorContainer.js rename to packages/common/editors/EditorContainer.js index 0e8b0bd2f9..4ade69f715 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'; +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,9 @@ 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 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 (
{this.createEditor()} 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 74% rename from packages/react-data-grid/src/RowComparer.js rename to packages/common/utils/RowComparer.js index af12b2234b..9957322f60 100644 --- a/packages/react-data-grid/src/RowComparer.js +++ b/packages/common/utils/RowComparer.js @@ -1,20 +1,17 @@ -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 default function 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; +} + diff --git a/packages/common/utils/index.js b/packages/common/utils/index.js new file mode 100644 index 0000000000..ab2b86f027 --- /dev/null +++ b/packages/common/utils/index.js @@ -0,0 +1,50 @@ +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/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-addons/src/cells/headerCells/filters/AutoCompleteFilter.js b/packages/react-data-grid-addons/src/cells/headerCells/filters/AutoCompleteFilter.js index c6596fd7e7..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,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'; +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..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 { utils } from 'react-data-grid'; -const { getMixedTypeValueRetriever, isImmutableCollection } = utils; +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 2db95a55ea..fdbd3cb558 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'; 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..778b6836a7 100644 --- a/packages/react-data-grid-addons/src/data/RowGrouperResolver.js +++ b/packages/react-data-grid-addons/src/data/RowGrouperResolver.js @@ -1,7 +1,6 @@ import {List} from 'immutable'; import groupBy from 'lodash/groupBy'; -import { utils } from 'react-data-grid'; -const { getMixedTypeValueRetriever, isImmutableMap } = utils; +import { isImmutableMap, getMixedTypeValueRetriever} from 'common/utils'; export default class RowGrouperResolver { diff --git a/packages/react-data-grid-addons/src/data/RowSorter.js b/packages/react-data-grid-addons/src/data/RowSorter.js index e55cfb7875..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 { utils } from 'react-data-grid'; -const { getMixedTypeValueRetriever, isImmutableCollection } = utils; +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 55fcb305dc..9c62cb72bc 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 { utils } from 'react-data-grid'; -const { isEmptyArray, isEmptyObject } = utils; +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 579de277c9..a581ed44af 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,42 @@ import React from 'react'; import PropTypes from 'prop-types'; import { DragSource, DropTarget } from 'react-dnd'; -import { HeaderCell } from 'react-data-grid'; + +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' + }; + } + + setScrollLeft = (scrollLeft) => { + 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} +
+ ); + } +} class DraggableHeaderCell extends React.Component { render() { @@ -26,7 +61,7 @@ class DraggableHeaderCell extends React.Component { style={{ width: 0, cursor: 'move', opacity }} className={isOver && canDrop ? 'rdg-can-drop' : ''} > - +
) ); 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..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 @@ -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( - + }/> ); 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..b56968b466 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'; 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..e5ad60d43a 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 { @@ -16,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() { @@ -26,14 +26,15 @@ class DraggableHeaderCell extends Component { if (isDragging) { return null; } - return connectDragSource(
); + return connectDragSource(
this.node = node} style={{cursor: 'move'}}>{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.isRequired }; 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-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 } 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..c5762d3897 100644 --- a/packages/react-data-grid/src/Cell.js +++ b/packages/react-data-grid/src/Cell.js @@ -1,13 +1,13 @@ 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'; +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/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/CellExpander.js similarity index 78% rename from packages/react-data-grid/src/CellExpand.js rename to packages/react-data-grid/src/CellExpander.js index 775269eabb..fc46c887cd 100644 --- a/packages/react-data-grid/src/CellExpand.js +++ b/packages/react-data-grid/src/CellExpander.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..fd9eb10aa2 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'; 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..49a2edd686 100644 --- a/packages/react-data-grid/src/ReactDataGrid.js +++ b/packages/react-data-grid/src/ReactDataGrid.js @@ -1,26 +1,25 @@ -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'; 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 { EventBus } from './masks'; - if (!Object.assign) { Object.assign = require('object-assign'); } +import { CellNavigationMode, EventTypes, UpdateActions } from 'common/constants'; +import { EventBus } from './masks'; + 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 +340,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 +372,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 +380,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..640145606c 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 '../CellExpander'; +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/constants/zIndexes.js b/packages/react-data-grid/src/constants/zIndexes.js deleted file mode 100644 index 4e05b8aef5..0000000000 --- a/packages/react-data-grid/src/constants/zIndexes.js +++ /dev/null @@ -1,5 +0,0 @@ -export default { - CELL_MASK: 300, - LOCKED_CELL_MASK: 400, - EDITOR_CONTAINER: 500 -}; 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..d386d7fe4a 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'; 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 845e1e44ac..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)); @@ -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/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 8f6d2e8830..341dca868d 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'; 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; @@ -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/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/index.js b/packages/react-data-grid/src/utils/index.js deleted file mode 100644 index 2e684a6f2f..0000000000 --- a/packages/react-data-grid/src/utils/index.js +++ /dev/null @@ -1,26 +0,0 @@ -import { List } from 'immutable'; - -module.exports = { - isEmptyArray: require('./isEmptyArray'), - isEmptyObject: require('./isEmptyObject'), - isFunction: require('./isFunction'), - 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)); - } -}; diff --git a/packages/react-data-grid/src/utils/isColumnsImmutable.js b/packages/react-data-grid/src/utils/isColumnsImmutable.js deleted file mode 100644 index 737aa2a899..0000000000 --- a/packages/react-data-grid/src/utils/isColumnsImmutable.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = function isColumnsImmutable(columns: Array) { - return (typeof Immutable !== 'undefined' && (columns instanceof Immutable.List)); -}; diff --git a/packages/react-data-grid/src/utils/isEmptyArray.js b/packages/react-data-grid/src/utils/isEmptyArray.js deleted file mode 100644 index eb55d54b86..0000000000 --- a/packages/react-data-grid/src/utils/isEmptyArray.js +++ /dev/null @@ -1,5 +0,0 @@ -const isEmptyArray = (obj) => { - return Array.isArray(obj) && obj.length === 0; -}; - -module.exports = isEmptyArray; diff --git a/packages/react-data-grid/src/utils/isEmptyObject.js b/packages/react-data-grid/src/utils/isEmptyObject.js deleted file mode 100644 index 1fe3b41aaf..0000000000 --- a/packages/react-data-grid/src/utils/isEmptyObject.js +++ /dev/null @@ -1,5 +0,0 @@ -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/react-data-grid/src/utils/isFunction.js deleted file mode 100644 index dc7822f5f9..0000000000 --- a/packages/react-data-grid/src/utils/isFunction.js +++ /dev/null @@ -1,8 +0,0 @@ -/* @flow */ - -const isFunction = function(functionToCheck: any): boolean { - let getType = {}; - return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]'; -}; - -module.exports = isFunction; 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; diff --git a/packages/react-data-grid/src/utils/isImmutableMap.js b/packages/react-data-grid/src/utils/isImmutableMap.js deleted file mode 100644 index 4704bcb9b8..0000000000 --- a/packages/react-data-grid/src/utils/isImmutableMap.js +++ /dev/null @@ -1,3 +0,0 @@ -import { Map } from 'immutable'; - -module.exports = Map.isMap; diff --git a/packages/react-data-grid/src/utils/mixedTypeValueRetriever.js b/packages/react-data-grid/src/utils/mixedTypeValueRetriever.js deleted file mode 100644 index 448de01600..0000000000 --- a/packages/react-data-grid/src/utils/mixedTypeValueRetriever.js +++ /dev/null @@ -1,11 +0,0 @@ -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; -}; - -module.exports = getMixedTypeValueRetriever; 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 {