+ onMouseDown={this._onColumnResizerMouseDown}
+ onMouseEnter={() => props.setHoverState(true)}
+ onMouseLeave={() => props.setHoverState(false)}>
);
- },
-});
+ }
+}
module.exports = FixedDataTableCellDefault;
diff --git a/src/FixedDataTableCellGroup.react.js b/src/FixedDataTableCellGroup.react.js
index 81d80d7b..3d901cbb 100644
--- a/src/FixedDataTableCellGroup.react.js
+++ b/src/FixedDataTableCellGroup.react.js
@@ -13,17 +13,18 @@
'use strict';
var FixedDataTableHelper = require('FixedDataTableHelper');
+var PropTypes = require('prop-types');
var React = require('React');
+var createReactClass = require('create-react-class');
var FixedDataTableCell = require('FixedDataTableCell.react');
var cx = require('cx');
var translateDOMPositionXY = require('translateDOMPositionXY');
-var {PropTypes} = React;
-
var DIR_SIGN = FixedDataTableHelper.DIR_SIGN;
-var FixedDataTableCellGroupImpl = React.createClass({
+var FixedDataTableCellGroupImpl = createReactClass({
+ displayName: "FixedDataTableCellGroupImpl",
/**
* PropTypes are disabled in this component, because having them on slows
@@ -118,6 +119,8 @@ var FixedDataTableCellGroupImpl = React.createClass({
maxWidth={columnProps.maxWidth}
minWidth={columnProps.minWidth}
onColumnResize={onColumnResize}
+ isHoveringResizerKnob={this.props.isHoveringResizerKnob}
+ setHoverState={this.props.setHoverState}
rowIndex={rowIndex}
columnKey={columnProps.columnKey}
width={columnProps.width}
@@ -133,10 +136,11 @@ var FixedDataTableCellGroupImpl = React.createClass({
width += columns[i].props.width;
}
return width;
- },
+ }
});
-var FixedDataTableCellGroup = React.createClass({
+var FixedDataTableCellGroup = createReactClass({
+ displayName: "FixedDataTableCellGroup",
/**
* PropTypes are disabled in this component, because having them on slows
@@ -218,7 +222,7 @@ var FixedDataTableCellGroup = React.createClass({
columnKey,
event
);
- },
+ }
});
diff --git a/src/FixedDataTableColumnGroupNew.react.js b/src/FixedDataTableColumnGroupNew.react.js
index 99dcb626..11a9af2d 100644
--- a/src/FixedDataTableColumnGroupNew.react.js
+++ b/src/FixedDataTableColumnGroupNew.react.js
@@ -1,3 +1,4 @@
+var PropTypes = require('prop-types');
/**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
@@ -12,17 +13,13 @@
var React = require('React');
-var {PropTypes} = React;
-
/**
* Component that defines the attributes of a table column group.
*/
-var FixedDataTableColumnGroup = React.createClass({
- statics: {
- __TableColumnGroup__: true,
- },
+class FixedDataTableColumnGroup extends React.Component {
+ static __TableColumnGroup__ = true;
- propTypes: {
+ static propTypes = {
/**
* The horizontal alignment of the table cell content.
*/
@@ -57,13 +54,11 @@ var FixedDataTableColumnGroup = React.createClass({
PropTypes.func,
]),
- },
+ };
- getDefaultProps() /*object*/ {
- return {
- fixed: false,
- };
- },
+ static defaultProps = {
+ fixed: false,
+ };
render() {
if (__DEV__) {
@@ -72,7 +67,7 @@ var FixedDataTableColumnGroup = React.createClass({
);
}
return null;
- },
-});
+ }
+}
module.exports = FixedDataTableColumnGroup;
diff --git a/src/FixedDataTableColumnNew.react.js b/src/FixedDataTableColumnNew.react.js
index 91b0571f..b387e89f 100644
--- a/src/FixedDataTableColumnNew.react.js
+++ b/src/FixedDataTableColumnNew.react.js
@@ -1,3 +1,4 @@
+var PropTypes = require('prop-types');
/**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
@@ -12,178 +13,172 @@
var React = require('React');
-var {PropTypes} = React;
-
/**
* Component that defines the attributes of table column.
*/
-var FixedDataTableColumn = React.createClass({
- statics: {
- __TableColumn__: true
- },
-
- propTypes: {
- /**
- * The horizontal alignment of the table cell content.
- */
- align: PropTypes.oneOf(['left', 'center', 'right']),
-
- /**
- * Controls if the column is fixed when scrolling in the X axis.
- */
- fixed: PropTypes.bool,
-
- /**
- * The header cell for this column.
- * This can either be a string a React element, or a function that generates
- * a React Element. Passing in a string will render a default header cell
- * with that string. By default, the React element passed in can expect to
- * receive the following props:
- *
- * ```
- * props: {
- * columnKey: string // (of the column, if given)
- * height: number // (supplied from the Table or rowHeightGetter)
- * width: number // (supplied from the Column)
- * }
- * ```
- *
- * Because you are passing in your own React element, you can feel free to
- * pass in whatever props you may want or need.
- *
- * If you pass in a function, you will receive the same props object as the
- * first argument.
- */
- header: PropTypes.oneOfType([
- PropTypes.node,
- PropTypes.func,
- ]),
-
- /**
- * This is the body cell that will be cloned for this column.
- * This can either be a string a React element, or a function that generates
- * a React Element. Passing in a string will render a default header cell
- * with that string. By default, the React element passed in can expect to
- * receive the following props:
- *
- * ```
- * props: {
- * rowIndex; number // (the row index of the cell)
- * columnKey: string // (of the column, if given)
- * height: number // (supplied from the Table or rowHeightGetter)
- * width: number // (supplied from the Column)
- * }
- * ```
- *
- * Because you are passing in your own React element, you can feel free to
- * pass in whatever props you may want or need.
- *
- * If you pass in a function, you will receive the same props object as the
- * first argument.
- */
- cell: PropTypes.oneOfType([
- PropTypes.node,
- PropTypes.func,
- ]),
-
- /**
- * This is the footer cell for this column.
- * This can either be a string a React element, or a function that generates
- * a React Element. Passing in a string will render a default header cell
- * with that string. By default, the React element passed in can expect to
- * receive the following props:
- *
- * ```
- * props: {
- * columnKey: string // (of the column, if given)
- * height: number // (supplied from the Table or rowHeightGetter)
- * width: number // (supplied from the Column)
- * }
- * ```
- *
- * Because you are passing in your own React element, you can feel free to
- * pass in whatever props you may want or need.
- *
- * If you pass in a function, you will receive the same props object as the
- * first argument.
- */
- footer: PropTypes.oneOfType([
- PropTypes.node,
- PropTypes.func,
- ]),
-
- /**
- * This is used to uniquely identify the column, and is not required unless
- * you a resizing columns. This will be the key given in the
- * `onColumnResizeEndCallback` on the Table.
- */
- columnKey: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- ]),
-
- /**
- * The pixel width of the column.
- */
- width: PropTypes.number.isRequired,
-
- /**
- * If this is a resizable column this is its minimum pixel width.
- */
- minWidth: PropTypes.number,
-
- /**
- * If this is a resizable column this is its maximum pixel width.
- */
- maxWidth: PropTypes.number,
-
- /**
- * The grow factor relative to other columns. Same as the flex-grow API
- * from http://www.w3.org/TR/css3-flexbox/. Basically, take any available
- * extra width and distribute it proportionally according to all columns'
- * flexGrow values. Defaults to zero (no-flexing).
- */
- flexGrow: PropTypes.number,
-
- /**
- * Whether the column can be resized with the
- * FixedDataTableColumnResizeHandle. Please note that if a column
- * has a flex grow, once you resize the column this will be set to 0.
- *
- * This property only provides the UI for the column resizing. If this
- * is set to true, you will need to set the onColumnResizeEndCallback table
- * property and render your columns appropriately.
- */
- isResizable: PropTypes.bool,
-
- /**
- * Whether cells in this column can be removed from document when outside
- * of viewport as a result of horizontal scrolling.
- * Setting this property to true allows the table to not render cells in
- * particular column that are outside of viewport for visible rows. This
- * allows to create table with many columns and not have vertical scrolling
- * performance drop.
- * Setting the property to false will keep previous behaviour and keep
- * cell rendered if the row it belongs to is visible.
- */
- allowCellsRecycling: PropTypes.bool,
- },
-
- getDefaultProps() /*object*/ {
- return {
- allowCellsRecycling: false,
- fixed: false,
- };
- },
-
- render() {
- if (__DEV__) {
- throw new Error(
- 'Component
should never render'
- );
- }
- return null;
- },
-});
+class FixedDataTableColumn extends React.Component {
+ static __TableColumn__ = true;
+
+ static propTypes = {
+ /**
+ * The horizontal alignment of the table cell content.
+ */
+ align: PropTypes.oneOf(['left', 'center', 'right']),
+
+ /**
+ * Controls if the column is fixed when scrolling in the X axis.
+ */
+ fixed: PropTypes.bool,
+
+ /**
+ * The header cell for this column.
+ * This can either be a string a React element, or a function that generates
+ * a React Element. Passing in a string will render a default header cell
+ * with that string. By default, the React element passed in can expect to
+ * receive the following props:
+ *
+ * ```
+ * props: {
+ * columnKey: string // (of the column, if given)
+ * height: number // (supplied from the Table or rowHeightGetter)
+ * width: number // (supplied from the Column)
+ * }
+ * ```
+ *
+ * Because you are passing in your own React element, you can feel free to
+ * pass in whatever props you may want or need.
+ *
+ * If you pass in a function, you will receive the same props object as the
+ * first argument.
+ */
+ header: PropTypes.oneOfType([
+ PropTypes.node,
+ PropTypes.func,
+ ]),
+
+ /**
+ * This is the body cell that will be cloned for this column.
+ * This can either be a string a React element, or a function that generates
+ * a React Element. Passing in a string will render a default header cell
+ * with that string. By default, the React element passed in can expect to
+ * receive the following props:
+ *
+ * ```
+ * props: {
+ * rowIndex; number // (the row index of the cell)
+ * columnKey: string // (of the column, if given)
+ * height: number // (supplied from the Table or rowHeightGetter)
+ * width: number // (supplied from the Column)
+ * }
+ * ```
+ *
+ * Because you are passing in your own React element, you can feel free to
+ * pass in whatever props you may want or need.
+ *
+ * If you pass in a function, you will receive the same props object as the
+ * first argument.
+ */
+ cell: PropTypes.oneOfType([
+ PropTypes.node,
+ PropTypes.func,
+ ]),
+
+ /**
+ * This is the footer cell for this column.
+ * This can either be a string a React element, or a function that generates
+ * a React Element. Passing in a string will render a default header cell
+ * with that string. By default, the React element passed in can expect to
+ * receive the following props:
+ *
+ * ```
+ * props: {
+ * columnKey: string // (of the column, if given)
+ * height: number // (supplied from the Table or rowHeightGetter)
+ * width: number // (supplied from the Column)
+ * }
+ * ```
+ *
+ * Because you are passing in your own React element, you can feel free to
+ * pass in whatever props you may want or need.
+ *
+ * If you pass in a function, you will receive the same props object as the
+ * first argument.
+ */
+ footer: PropTypes.oneOfType([
+ PropTypes.node,
+ PropTypes.func,
+ ]),
+
+ /**
+ * This is used to uniquely identify the column, and is not required unless
+ * you a resizing columns. This will be the key given in the
+ * `onColumnResizeEndCallback` on the Table.
+ */
+ columnKey: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.number,
+ ]),
+
+ /**
+ * The pixel width of the column.
+ */
+ width: PropTypes.number.isRequired,
+
+ /**
+ * If this is a resizable column this is its minimum pixel width.
+ */
+ minWidth: PropTypes.number,
+
+ /**
+ * If this is a resizable column this is its maximum pixel width.
+ */
+ maxWidth: PropTypes.number,
+
+ /**
+ * The grow factor relative to other columns. Same as the flex-grow API
+ * from http://www.w3.org/TR/css3-flexbox/. Basically, take any available
+ * extra width and distribute it proportionally according to all columns'
+ * flexGrow values. Defaults to zero (no-flexing).
+ */
+ flexGrow: PropTypes.number,
+
+ /**
+ * Whether the column can be resized with the
+ * FixedDataTableColumnResizeHandle. Please note that if a column
+ * has a flex grow, once you resize the column this will be set to 0.
+ *
+ * This property only provides the UI for the column resizing. If this
+ * is set to true, you will need to set the onColumnResizeEndCallback table
+ * property and render your columns appropriately.
+ */
+ isResizable: PropTypes.bool,
+
+ /**
+ * Whether cells in this column can be removed from document when outside
+ * of viewport as a result of horizontal scrolling.
+ * Setting this property to true allows the table to not render cells in
+ * particular column that are outside of viewport for visible rows. This
+ * allows to create table with many columns and not have vertical scrolling
+ * performance drop.
+ * Setting the property to false will keep previous behaviour and keep
+ * cell rendered if the row it belongs to is visible.
+ */
+ allowCellsRecycling: PropTypes.bool,
+ };
+
+ static defaultProps = {
+ allowCellsRecycling: false,
+ fixed: false,
+ };
+
+ render() {
+ if (__DEV__) {
+ throw new Error(
+ 'Component
should never render'
+ );
+ }
+ return null;
+ }
+}
module.exports = FixedDataTableColumn;
diff --git a/src/FixedDataTableColumnResizeHandle.react.js b/src/FixedDataTableColumnResizeHandle.react.js
index e1751bd6..f5eac5be 100644
--- a/src/FixedDataTableColumnResizeHandle.react.js
+++ b/src/FixedDataTableColumnResizeHandle.react.js
@@ -16,15 +16,16 @@
var DOMMouseMoveTracker = require('DOMMouseMoveTracker');
var Locale = require('Locale');
+var PropTypes = require('prop-types');
var React = require('React');
+var createReactClass = require('create-react-class');
var ReactComponentWithPureRenderMixin = require('ReactComponentWithPureRenderMixin');
var clamp = require('clamp');
var cx = require('cx');
-var {PropTypes} = React;
-
-var FixedDataTableColumnResizeHandle = React.createClass({
+var FixedDataTableColumnResizeHandle = createReactClass({
+ displayName: "FixedDataTableColumnResizeHandle",
mixins: [ReactComponentWithPureRenderMixin],
propTypes: {
@@ -161,7 +162,7 @@ var FixedDataTableColumnResizeHandle = React.createClass({
this.state.width,
this.props.columnKey
);
- },
+ }
});
module.exports = FixedDataTableColumnResizeHandle;
diff --git a/src/FixedDataTableNew.react.js b/src/FixedDataTableNew.react.js
index f9e2bd9a..f5f1b11b 100644
--- a/src/FixedDataTableNew.react.js
+++ b/src/FixedDataTableNew.react.js
@@ -1,3 +1,4 @@
+var PropTypes = require("prop-types");
/**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
@@ -13,32 +14,33 @@
/*eslint no-bitwise:1*/
-var React = require('React');
-var ReactComponentWithPureRenderMixin = require('ReactComponentWithPureRenderMixin');
-var ReactWheelHandler = require('ReactWheelHandler');
-var Scrollbar = require('Scrollbar.react');
-var FixedDataTableBufferedRows = require('FixedDataTableBufferedRows.react');
-var FixedDataTableColumnResizeHandle = require('FixedDataTableColumnResizeHandle.react');
-var FixedDataTableRow = require('FixedDataTableRow.react');
-var FixedDataTableScrollHelper = require('FixedDataTableScrollHelper');
-var FixedDataTableWidthHelper = require('FixedDataTableWidthHelper');
-
-var cx = require('cx');
-var debounceCore = require('debounceCore');
-var emptyFunction = require('emptyFunction');
-var invariant = require('invariant');
-var joinClasses = require('joinClasses');
-var shallowEqual = require('shallowEqual');
-var translateDOMPositionXY = require('translateDOMPositionXY');
-
-var {PropTypes} = React;
+var React = require("React");
+var createReactClass = require("create-react-class");
+var ReactComponentWithPureRenderMixin = require("ReactComponentWithPureRenderMixin");
+var ReactWheelHandler = require("ReactWheelHandler");
+var Scrollbar = require("Scrollbar.react");
+var FixedDataTableBufferedRows = require("FixedDataTableBufferedRows.react");
+var FixedDataTableColumnResizeHandle = require("FixedDataTableColumnResizeHandle.react");
+var FixedDataTableRow = require("FixedDataTableRow.react");
+var FixedDataTableScrollHelper = require("FixedDataTableScrollHelper");
+var FixedDataTableWidthHelper = require("FixedDataTableWidthHelper");
+
+var cx = require("cx");
+var debounceCore = require("debounceCore");
+var emptyFunction = require("emptyFunction");
+var invariant = require("invariant");
+var joinClasses = require("joinClasses");
+var shallowEqual = require("shallowEqual");
+var translateDOMPositionXY = require("translateDOMPositionXY");
+var throttle = require("lodash.throttle");
+
var ReactChildren = React.Children;
var EMPTY_OBJECT = {};
var BORDER_HEIGHT = 1;
-var HEADER = 'header';
-var FOOTER = 'footer';
-var CELL = 'cell';
+var HEADER = "header";
+var FOOTER = "footer";
+var CELL = "cell";
/**
* Data grid component with fixed or scrollable header and columns.
@@ -86,10 +88,10 @@ var CELL = 'cell';
* - Scrollable Body Columns: The body columns that move while scrolling
* vertically or horizontally.
*/
-var FixedDataTable = React.createClass({
+var FixedDataTable = createReactClass({
+ displayName: "FixedDataTable",
propTypes: {
-
/**
* Pixel width of table. If all columns do not fit,
* a horizontal scrollbar will appear.
@@ -127,8 +129,8 @@ var FixedDataTable = React.createClass({
*/
ownerHeight: PropTypes.number,
- overflowX: PropTypes.oneOf(['hidden', 'auto']),
- overflowY: PropTypes.oneOf(['hidden', 'auto']),
+ overflowX: PropTypes.oneOf(["hidden", "auto"]),
+ overflowY: PropTypes.oneOf(["hidden", "auto"]),
/**
* Number of rows in the table.
@@ -194,6 +196,17 @@ var FixedDataTable = React.createClass({
*/
onScrollStart: PropTypes.func,
+ /**
+ * Callback that is called during scrolling with current horizontal
+ * and vertical scroll values.
+ */
+ onScroll: PropTypes.func,
+
+ /**
+ * Number of milliseconds to throttle the onScroll event
+ */
+ onScrollThrottle: PropTypes.number,
+
/**
* Callback that is called when scrolling ends or stops with new horizontal
* and vertical scroll values.
@@ -251,6 +264,17 @@ var FixedDataTable = React.createClass({
* Whether a column is currently being resized.
*/
isColumnResizing: PropTypes.bool,
+
+ /**
+ * CSS style props to pass to the box shadow that shows up on the fixed
+ * header while scrolling
+ */
+ topShadowStyle: PropTypes.object,
+
+ /**
+ * CSS style props to pass to the horizontal scrollbar
+ */
+ horizontalScrollbarStyle: PropTypes.object
},
getDefaultProps() /*object*/ {
@@ -260,6 +284,8 @@ var FixedDataTable = React.createClass({
headerHeight: 0,
scrollLeft: 0,
scrollTop: 0,
+ topShadowStyle: {},
+ horizontalScrollbarStyle: {}
};
},
@@ -281,7 +307,10 @@ var FixedDataTable = React.createClass({
}
this._didScrollStop = debounceCore(this._didScrollStop, 200, this);
- return this._calculateState(this.props);
+ return {
+ ...this._calculateState(this.props),
+ isHoveringResizerKnob: false,
+ };
},
componentWillMount() {
@@ -298,10 +327,14 @@ var FixedDataTable = React.createClass({
this._shouldHandleWheelX,
this._shouldHandleWheelY
);
+ this._didScroll = throttle(
+ this._didScroll,
+ this.props.onScrollThrottle || 0
+ );
},
_shouldHandleWheelX(/*number*/ delta) /*boolean*/ {
- if (this.props.overflowX === 'hidden') {
+ if (this.props.overflowX === "hidden") {
return false;
}
@@ -317,7 +350,7 @@ var FixedDataTable = React.createClass({
},
_shouldHandleWheelY(/*number*/ delta) /*boolean*/ {
- if (this.props.overflowY === 'hidden'|| delta === 0) {
+ if (this.props.overflowY === "hidden" || delta === 0) {
return false;
}
@@ -345,8 +378,10 @@ var FixedDataTable = React.createClass({
} else {
contentHeight = this.state.height + this.state.maxScrollY;
}
- if (contentHeight !== this._contentHeight &&
- this.props.onContentHeightChange) {
+ if (
+ contentHeight !== this._contentHeight &&
+ this.props.onContentHeightChange
+ ) {
this.props.onContentHeightChange(contentHeight);
}
this._contentHeight = contentHeight;
@@ -354,6 +389,7 @@ var FixedDataTable = React.createClass({
componentDidMount() {
this._reportContentHeight();
+ this._isMounted = true;
},
componentWillReceiveProps(/*object*/ nextProps) {
@@ -368,20 +404,25 @@ var FixedDataTable = React.createClass({
var newOverflowX = nextProps.overflowX;
var newOverflowY = nextProps.overflowY;
- if (newOverflowX !== this.props.overflowX ||
- newOverflowY !== this.props.overflowY) {
+ if (
+ newOverflowX !== this.props.overflowX ||
+ newOverflowY !== this.props.overflowY
+ ) {
this._wheelHandler = new ReactWheelHandler(
this._onWheel,
- newOverflowX !== 'hidden', // Should handle horizontal scroll
- newOverflowY !== 'hidden' // Should handle vertical scroll
+ newOverflowX !== "hidden", // Should handle horizontal scroll
+ newOverflowY !== "hidden" // Should handle vertical scroll
);
}
// In the case of controlled scrolling, notify.
- if (this.props.ownerHeight !== nextProps.ownerHeight ||
- this.props.scrollTop !== nextProps.scrollTop) {
+ if (
+ this.props.ownerHeight !== nextProps.ownerHeight ||
+ this.props.scrollTop !== nextProps.scrollTop
+ ) {
this._didScrollStart();
}
+ this._didScroll();
this._didScrollStop();
this.setState(this._calculateState(nextProps, this.state));
@@ -402,8 +443,8 @@ var FixedDataTable = React.createClass({
key="group_header"
isScrolling={this._isScrolling}
className={joinClasses(
- cx('fixedDataTableLayout/header'),
- cx('public/fixedDataTable/header'),
+ cx("fixedDataTableLayout/header"),
+ cx("public/fixedDataTable/header")
)}
width={state.width}
height={state.groupHeaderHeight}
@@ -414,24 +455,27 @@ var FixedDataTable = React.createClass({
fixedColumns={state.groupHeaderFixedColumns}
scrollableColumns={state.groupHeaderScrollableColumns}
onColumnResize={this._onColumnResize}
+ setHoverState={this.setHoverState}
+ isColumnResizing={state.isColumnResizing}
/>
);
}
var maxScrollY = this.state.maxScrollY;
- var showScrollbarX = state.maxScrollX > 0 && state.overflowX !== 'hidden';
- var showScrollbarY = maxScrollY > 0 && state.overflowY !== 'hidden';
+ var showScrollbarX = state.maxScrollX > 0 && state.overflowX !== "hidden";
+ var showScrollbarY = maxScrollY > 0 && state.overflowY !== "hidden";
var scrollbarXHeight = showScrollbarX ? Scrollbar.SIZE : 0;
- var scrollbarYHeight = state.height - scrollbarXHeight -
- (2 * BORDER_HEIGHT) - state.footerHeight;
+ var scrollbarYHeight =
+ state.height - scrollbarXHeight - 2 * BORDER_HEIGHT - state.footerHeight;
var headerOffsetTop = state.useGroupHeader ? state.groupHeaderHeight : 0;
var bodyOffsetTop = headerOffsetTop + state.headerHeight;
scrollbarYHeight -= bodyOffsetTop;
var bottomSectionOffset = 0;
- var footOffsetTop = props.maxHeight != null
- ? bodyOffsetTop + state.bodyHeight
- : bodyOffsetTop + scrollbarYHeight;
+ var footOffsetTop =
+ props.maxHeight != null
+ ? bodyOffsetTop + state.bodyHeight
+ : bodyOffsetTop + scrollbarYHeight;
var rowsContainerHeight = footOffsetTop + state.footerHeight;
if (props.ownerHeight !== undefined && props.ownerHeight < state.height) {
@@ -447,30 +491,33 @@ var FixedDataTable = React.createClass({
var verticalScrollbar;
if (showScrollbarY) {
- verticalScrollbar =
+ verticalScrollbar = (
;
+ />
+ );
}
var horizontalScrollbar;
if (showScrollbarX) {
var scrollbarXWidth = state.width;
- horizontalScrollbar =
+ horizontalScrollbar = (
;
+ horizontalScrollbarStyle={props.horizontalScrollbarStyle}
+ />
+ );
}
- var dragKnob =
+ var dragKnob = (
;
+ />
+ );
var footer = null;
if (state.footerHeight) {
- footer =
+ footer = (
;
+ />
+ );
}
var rows = this._renderRows(bodyOffsetTop);
- var header =
+ var header = (
;
+ isHoveringResizerKnob={state.isHoveringResizerKnob}
+ setHoverState={this.setHoverState}
+ isColumnResizing={state.isColumnResizing}
+ />
+ );
var topShadow;
var bottomShadow;
if (state.scrollY) {
- topShadow =
+ let topShadowStyle = {}
+ // Kinda hacky, but we'll use the header columns to apply this styling
+ // fix for a renegade border style.
+ if (props.useTopShadow) {
+ const sumOfColumnWidths = [...state.headFixedColumns, ...state.headScrollableColumns].reduce(
+ (acc, column) => acc + column.props.width,
+ 0
+ )
+ topShadowStyle = {
+ marginLeft: '3px',
+ width: sumOfColumnWidths + 'px',
+ maxWidth: 'calc(100% - 6px)',
+ }
+ }
+ topShadow = (
;
+ style={{ ...topShadowStyle, top: bodyOffsetTop }}
+ />
+ );
}
if (
@@ -545,27 +613,30 @@ var FixedDataTable = React.createClass({
state.scrollContentHeight + state.reservedHeight > state.ownerHeight) ||
state.scrollY < maxScrollY
) {
- bottomShadow =
+ bottomShadow = (
;
+ style={{ top: footOffsetTop }}
+ />
+ );
}
return (
+ style={{ height: state.height, width: state.width, opacity: this.state.isColumnResizing ? .4 : 1 }}
+ >
+ className={cx("fixedDataTableLayout/rowsContainer")}
+ style={{ height: rowsContainerHeight, width: state.width }}
+ >
{dragKnob}
{groupHeader}
{header}
@@ -580,6 +651,10 @@ var FixedDataTable = React.createClass({
);
},
+ componentWillUnmount() {
+ this._isMounted = false;
+ },
+
_renderRows(/*number*/ offsetTop) /*object*/ {
var state = this.state;
@@ -606,6 +681,10 @@ var FixedDataTable = React.createClass({
showLastRowBorder={true}
width={state.width}
rowPositionGetter={this._scrollHelper.getRowPosition}
+ onColumnResize={this._onColumnResize}
+ isHoveringResizerKnob={state.isHoveringResizerKnob}
+ setHoverState={this.setHoverState}
+ isColumnResizing={state.isColumnResizing}
/>
);
},
@@ -641,18 +720,12 @@ var FixedDataTable = React.createClass({
});
},
- _areColumnSettingsIdentical(
- oldColumns: Array,
- newColumns: Array
- ): boolean {
+ _areColumnSettingsIdentical(oldColumns: Array, newColumns: Array): boolean {
if (oldColumns.length !== newColumns.length) {
return false;
}
for (var index = 0; index < oldColumns.length; ++index) {
- if (!shallowEqual(
- oldColumns[index].props,
- newColumns[index].props
- )) {
+ if (!shallowEqual(oldColumns[index].props, newColumns[index].props)) {
return false;
}
}
@@ -668,12 +741,16 @@ var FixedDataTable = React.createClass({
var canReuseColumnGroupSettings = false;
if (oldState && oldState.columns) {
- canReuseColumnSettings =
- this._areColumnSettingsIdentical(columns, oldState.columns);
+ canReuseColumnSettings = this._areColumnSettingsIdentical(
+ columns,
+ oldState.columns
+ );
}
if (oldState && oldState.columnGroups && columnGroups) {
- canReuseColumnGroupSettings =
- this._areColumnSettingsIdentical(columnGroups, oldState.columnGroups);
+ canReuseColumnGroupSettings = this._areColumnSettingsIdentical(
+ columnGroups,
+ oldState.columnGroups
+ );
}
var columnInfo = {};
@@ -723,7 +800,7 @@ var FixedDataTable = React.createClass({
_calculateState(/*object*/ props, /*?object*/ oldState) /*object*/ {
invariant(
props.height !== undefined || props.maxHeight !== undefined,
- 'You must set either a height or a maxHeight'
+ "You must set either a height or a maxHeight"
);
var children = [];
@@ -732,10 +809,9 @@ var FixedDataTable = React.createClass({
return;
}
invariant(
- child.type.__TableColumnGroup__ ||
- child.type.__TableColumn__,
- 'child type should be
or ' +
- '
'
+ child.type.__TableColumnGroup__ || child.type.__TableColumn__,
+ "child type should be
or " +
+ "
"
);
children.push(child);
});
@@ -745,15 +821,27 @@ var FixedDataTable = React.createClass({
useGroupHeader = true;
}
+ if (
+ oldState &&
+ ((props.width !== undefined && props.width !== oldState.width) ||
+ (props.height !== undefined && props.height !== oldState.height) ||
+ (props.maxWidth !== undefined &&
+ props.maxWidth !== oldState.maxWidth) ||
+ (props.maxHeight !== undefined &&
+ props.maxHeight !== oldState.maxHeight))
+ ) {
+ oldState = null;
+ }
+
var firstRowIndex = (oldState && oldState.firstRowIndex) || 0;
var firstRowOffset = (oldState && oldState.firstRowOffset) || 0;
var scrollX, scrollY;
- if (oldState && props.overflowX !== 'hidden') {
+ if (oldState && props.overflowX !== "hidden") {
scrollX = oldState.scrollX;
} else {
scrollX = props.scrollLeft;
}
- if (oldState && props.overflowY !== 'hidden') {
+ if (oldState && props.overflowY !== "hidden") {
scrollY = oldState.scrollY;
} else {
scrollState = this._scrollHelper.scrollTo(props.scrollTop);
@@ -763,8 +851,7 @@ var FixedDataTable = React.createClass({
}
if (this._rowToScrollTo !== undefined) {
- scrollState =
- this._scrollHelper.scrollRowIntoView(this._rowToScrollTo);
+ scrollState = this._scrollHelper.scrollRowIntoView(this._rowToScrollTo);
firstRowIndex = scrollState.index;
firstRowOffset = scrollState.offset;
scrollY = scrollState.position;
@@ -787,8 +874,10 @@ var FixedDataTable = React.createClass({
viewportHeight,
props.rowHeightGetter
);
- var scrollState =
- this._scrollHelper.scrollToRow(firstRowIndex, firstRowOffset);
+ var scrollState = this._scrollHelper.scrollToRow(
+ firstRowIndex,
+ firstRowOffset
+ );
firstRowIndex = scrollState.index;
firstRowOffset = scrollState.offset;
scrollY = scrollState.position;
@@ -807,10 +896,9 @@ var FixedDataTable = React.createClass({
var columnGroups;
if (useGroupHeader) {
- var columnGroupSettings =
- FixedDataTableWidthHelper.adjustColumnGroupWidths(
- children,
- props.width
+ var columnGroupSettings = FixedDataTableWidthHelper.adjustColumnGroupWidths(
+ children,
+ props.width
);
columns = columnGroupSettings.columns;
columnGroups = columnGroupSettings.columnGroups;
@@ -840,7 +928,7 @@ var FixedDataTable = React.createClass({
var scrollableColumnIndex = Math.min(
this._columnToScrollTo - fixedColumnsCount,
- columnInfo.bodyScrollableColumns.length - 1,
+ columnInfo.bodyScrollableColumns.length - 1
);
var previousColumnsWidth = 0;
@@ -850,9 +938,8 @@ var FixedDataTable = React.createClass({
}
var availableScrollWidth = props.width - totalFixedColumnsWidth;
- var selectedColumnWidth = columnInfo.bodyScrollableColumns[
- scrollableColumnIndex
- ].props.width;
+ var selectedColumnWidth =
+ columnInfo.bodyScrollableColumns[scrollableColumnIndex].props.width;
var minAcceptableScrollPosition =
previousColumnsWidth + selectedColumnWidth - availableScrollWidth;
@@ -869,16 +956,18 @@ var FixedDataTable = React.createClass({
var useMaxHeight = props.height === undefined;
var height = Math.round(useMaxHeight ? props.maxHeight : props.height);
- var totalHeightReserved = props.footerHeight + props.headerHeight +
- groupHeaderHeight + 2 * BORDER_HEIGHT;
+ var totalHeightReserved =
+ props.footerHeight +
+ props.headerHeight +
+ groupHeaderHeight +
+ 2 * BORDER_HEIGHT;
var bodyHeight = height - totalHeightReserved;
var scrollContentHeight = this._scrollHelper.getContentHeight();
var totalHeightNeeded = scrollContentHeight + totalHeightReserved;
- var scrollContentWidth =
- FixedDataTableWidthHelper.getTotalWidth(columns);
+ var scrollContentWidth = FixedDataTableWidthHelper.getTotalWidth(columns);
- var horizontalScrollbarVisible = scrollContentWidth > props.width &&
- props.overflowX !== 'hidden';
+ var horizontalScrollbarVisible =
+ scrollContentWidth > props.width && props.overflowX !== "hidden";
if (horizontalScrollbarVisible) {
bodyHeight -= Scrollbar.SIZE;
@@ -930,7 +1019,7 @@ var FixedDataTable = React.createClass({
bodyHeight,
height,
groupHeaderHeight,
- useGroupHeader,
+ useGroupHeader
};
return newState;
@@ -940,12 +1029,11 @@ var FixedDataTable = React.createClass({
var newColumns = [];
for (var i = 0; i < columns.length; ++i) {
var column = columns[i];
- newColumns.push(React.cloneElement(
- column,
- {
- cell: type ? column.props[type] : column.props[CELL]
- }
- ));
+ newColumns.push(
+ React.cloneElement(column, {
+ cell: type ? column.props[type] : column.props[CELL]
+ })
+ );
}
return newColumns;
},
@@ -962,18 +1050,20 @@ var FixedDataTable = React.createClass({
}
return {
fixed: fixedColumns,
- scrollable: scrollableColumns,
+ scrollable: scrollableColumns
};
},
_onWheel(/*number*/ deltaX, /*number*/ deltaY) {
- if (this.isMounted()) {
+ if (this._isMounted) {
if (!this._isScrolling) {
this._didScrollStart();
}
var x = this.state.scrollX;
- if (Math.abs(deltaY) > Math.abs(deltaX) &&
- this.props.overflowY !== 'hidden') {
+ if (
+ Math.abs(deltaY) > Math.abs(deltaX) &&
+ this.props.overflowY !== "hidden"
+ ) {
var scrollState = this._scrollHelper.scrollBy(Math.round(deltaY));
var maxScrollY = Math.max(
0,
@@ -984,36 +1074,36 @@ var FixedDataTable = React.createClass({
firstRowOffset: scrollState.offset,
scrollY: scrollState.position,
scrollContentHeight: scrollState.contentHeight,
- maxScrollY: maxScrollY,
+ maxScrollY: maxScrollY
});
- } else if (deltaX && this.props.overflowX !== 'hidden') {
+ } else if (deltaX && this.props.overflowX !== "hidden") {
x += deltaX;
x = x < 0 ? 0 : x;
x = x > this.state.maxScrollX ? this.state.maxScrollX : x;
this.setState({
- scrollX: x,
+ scrollX: x
});
}
-
+ this._didScroll();
this._didScrollStop();
}
},
-
_onHorizontalScroll(/*number*/ scrollPos) {
- if (this.isMounted() && scrollPos !== this.state.scrollX) {
+ if (this._isMounted && scrollPos !== this.state.scrollX) {
if (!this._isScrolling) {
this._didScrollStart();
}
this.setState({
- scrollX: scrollPos,
+ scrollX: scrollPos
});
+ this._didScroll();
this._didScrollStop();
}
},
_onVerticalScroll(/*number*/ scrollPos) {
- if (this.isMounted() && scrollPos !== this.state.scrollY) {
+ if (this._isMounted && scrollPos !== this.state.scrollY) {
if (!this._isScrolling) {
this._didScrollStart();
}
@@ -1022,14 +1112,15 @@ var FixedDataTable = React.createClass({
firstRowIndex: scrollState.index,
firstRowOffset: scrollState.offset,
scrollY: scrollState.position,
- scrollContentHeight: scrollState.contentHeight,
+ scrollContentHeight: scrollState.contentHeight
});
+ this._didScroll();
this._didScrollStop();
}
},
_didScrollStart() {
- if (this.isMounted() && !this._isScrolling) {
+ if (this._isMounted && !this._isScrolling) {
this._isScrolling = true;
if (this.props.onScrollStart) {
this.props.onScrollStart(this.state.scrollX, this.state.scrollY);
@@ -1037,51 +1128,63 @@ var FixedDataTable = React.createClass({
}
},
+ _didScroll() {
+ if (this._isMounted && this._isScrolling) {
+ if (this.props.onScroll) {
+ this.props.onScroll(this.state.scrollX, this.state.scrollY);
+ }
+ }
+ },
+
_didScrollStop() {
- if (this.isMounted() && this._isScrolling) {
+ if (this._isMounted && this._isScrolling) {
this._isScrolling = false;
- this.setState({redraw: true});
+ this.setState({ redraw: true });
if (this.props.onScrollEnd) {
this.props.onScrollEnd(this.state.scrollX, this.state.scrollY);
}
}
},
+
+ setHoverState(hoverState) {
+ this.setState({ isHoveringResizerKnob: hoverState })
+ }
});
-var HorizontalScrollbar = React.createClass({
+var HorizontalScrollbar = createReactClass({
+ displayName: "HorizontalScrollbar",
mixins: [ReactComponentWithPureRenderMixin],
+
propTypes: {
contentSize: PropTypes.number.isRequired,
offset: PropTypes.number.isRequired,
onScroll: PropTypes.func.isRequired,
position: PropTypes.number.isRequired,
- size: PropTypes.number.isRequired,
+ size: PropTypes.number.isRequired
},
render() /*object*/ {
var outerContainerStyle = {
height: Scrollbar.SIZE,
width: this.props.size,
+ ...this.props.horizontalScrollbarStyle
};
var innerContainerStyle = {
height: Scrollbar.SIZE,
- position: 'absolute',
- overflow: 'hidden',
- width: this.props.size,
+ position: "absolute",
+ overflow: "hidden",
+ width: this.props.size
};
- translateDOMPositionXY(
- innerContainerStyle,
- 0,
- this.props.offset
- );
+ translateDOMPositionXY(innerContainerStyle, 0, this.props.offset);
return (
+ style={outerContainerStyle}
+ >
);
- },
+ }
});
module.exports = FixedDataTable;
diff --git a/src/FixedDataTableRoot.js b/src/FixedDataTableRoot.js
index 69cee919..9e7ec7b3 100644
--- a/src/FixedDataTableRoot.js
+++ b/src/FixedDataTableRoot.js
@@ -23,5 +23,5 @@ var FixedDataTableRoot = {
Table: FixedDataTable,
};
-FixedDataTableRoot.version = '0.6.0';
+FixedDataTableRoot.version = '0.7.0';
module.exports = FixedDataTableRoot;
diff --git a/src/FixedDataTableRow.react.js b/src/FixedDataTableRow.react.js
index ffaa60d0..18914729 100644
--- a/src/FixedDataTableRow.react.js
+++ b/src/FixedDataTableRow.react.js
@@ -12,6 +12,8 @@
'use strict';
+var PropTypes = require('prop-types');
+
var React = require('React');
var FixedDataTableCellGroup = require('FixedDataTableCellGroup.react');
@@ -19,16 +21,13 @@ var cx = require('cx');
var joinClasses = require('joinClasses');
var translateDOMPositionXY = require('translateDOMPositionXY');
-var {PropTypes} = React;
-
/**
* Component that renders the row for
.
* This component should not be used directly by developer. Instead,
* only
should use the component internally.
*/
-var FixedDataTableRowImpl = React.createClass({
-
- propTypes: {
+class FixedDataTableRowImpl extends React.Component {
+ static propTypes = {
isScrolling: PropTypes.bool,
@@ -84,7 +83,7 @@ var FixedDataTableRowImpl = React.createClass({
* @param object event
*/
onColumnResize: PropTypes.func,
- },
+ };
render() /*object*/ {
var style = {
@@ -111,6 +110,8 @@ var FixedDataTableRowImpl = React.createClass({
zIndex={2}
columns={this.props.fixedColumns}
onColumnResize={this.props.onColumnResize}
+ isHoveringResizerKnob={this.props.isHoveringResizerKnob}
+ setHoverState={this.props.setHoverState}
rowHeight={this.props.height}
rowIndex={this.props.index}
/>;
@@ -146,17 +147,17 @@ var FixedDataTableRowImpl = React.createClass({
);
- },
+ }
- _getColumnsWidth(/*array*/ columns) /*number*/ {
+ _getColumnsWidth = /*array*/ columns => /*number*/ {
var width = 0;
for (var i = 0; i < columns.length; ++i) {
width += columns[i].props.width;
}
return width;
- },
+ };
- _renderColumnsShadow(/*number*/ left) /*?object*/ {
+ _renderColumnsShadow = /*number*/ left => /*?object*/ {
if (left > 0) {
var className = cx({
'fixedDataTableRowLayout/fixedColumnsDivider': true,
@@ -170,32 +171,31 @@ var FixedDataTableRowImpl = React.createClass({
};
return
;
}
- },
+ };
- _onClick(/*object*/ event) {
+ _onClick = /*object*/ event => {
this.props.onClick(event, this.props.index);
- },
+ };
- _onDoubleClick(/*object*/ event) {
+ _onDoubleClick = /*object*/ event => {
this.props.onDoubleClick(event, this.props.index);
- },
+ };
- _onMouseDown(/*object*/ event) {
+ _onMouseDown = /*object*/ event => {
this.props.onMouseDown(event, this.props.index);
- },
+ };
- _onMouseEnter(/*object*/ event) {
+ _onMouseEnter = /*object*/ event => {
this.props.onMouseEnter(event, this.props.index);
- },
+ };
- _onMouseLeave(/*object*/ event) {
+ _onMouseLeave = /*object*/ event => {
this.props.onMouseLeave(event, this.props.index);
- },
-});
-
-var FixedDataTableRow = React.createClass({
+ };
+}
- propTypes: {
+class FixedDataTableRow extends React.Component {
+ static propTypes = {
isScrolling: PropTypes.bool,
@@ -219,7 +219,7 @@ var FixedDataTableRow = React.createClass({
* Width of the row.
*/
width: PropTypes.number.isRequired,
- },
+ };
render() /*object*/ {
var style = {
@@ -240,8 +240,8 @@ var FixedDataTableRow = React.createClass({
/>
);
- },
-});
+ }
+}
module.exports = FixedDataTableRow;
diff --git a/src/Scrollbar.react.js b/src/Scrollbar.react.js
index 185532f0..582160de 100644
--- a/src/Scrollbar.react.js
+++ b/src/Scrollbar.react.js
@@ -12,7 +12,9 @@
var DOMMouseMoveTracker = require('DOMMouseMoveTracker');
var Keys = require('Keys');
+var PropTypes = require('prop-types');
var React = require('React');
+var createReactClass = require('create-react-class');
var ReactDOM = require('ReactDOM');
var ReactComponentWithPureRenderMixin = require('ReactComponentWithPureRenderMixin');
var ReactWheelHandler = require('ReactWheelHandler');
@@ -22,8 +24,6 @@ var cx = require('cx');
var emptyFunction = require('emptyFunction');
var translateDOMPositionXY = require('translateDOMPositionXY');
-var {PropTypes} = React;
-
var UNSCROLLABLE_STATE = {
position: 0,
scrollable: false,
@@ -36,7 +36,8 @@ var KEYBOARD_SCROLL_AMOUNT = 40;
var _lastScrolledScrollbar = null;
-var Scrollbar = React.createClass({
+var Scrollbar = createReactClass({
+ displayName: "Scrollbar",
mixins: [ReactComponentWithPureRenderMixin],
propTypes: {
@@ -196,6 +197,8 @@ var Scrollbar = React.createClass({
this.state.position !== this.props.position) {
this._didScroll();
}
+
+ this._isMounted = true;
},
componentWillUnmount() {
@@ -205,6 +208,8 @@ var Scrollbar = React.createClass({
_lastScrolledScrollbar = null;
}
delete this._mouseMoveTracker;
+
+ this._isMounted = false;
},
scrollBy(/*number*/ delta) {
@@ -465,7 +470,7 @@ var Scrollbar = React.createClass({
},
_blur() {
- if (this.isMounted()) {
+ if (this._isMounted) {
try {
this._onBlur();
ReactDOM.findDOMNode(this).blur();
@@ -502,7 +507,7 @@ var Scrollbar = React.createClass({
_didScroll() {
this.props.onScroll(this.state.position);
- },
+ }
});
Scrollbar.KEYBOARD_SCROLL_AMOUNT = KEYBOARD_SCROLL_AMOUNT;
diff --git a/src/css/layout/fixedDataTableCellLayout.css b/src/css/layout/fixedDataTableCellLayout.css
index 90fc2f1d..3844e7b9 100644
--- a/src/css/layout/fixedDataTableCellLayout.css
+++ b/src/css/layout/fixedDataTableCellLayout.css
@@ -53,16 +53,11 @@
}
.fixedDataTableCellLayout/columnResizerContainer:hover {
- cursor: ew-resize;
-}
-
-.fixedDataTableCellLayout/columnResizerContainer:hover .fixedDataTableCellLayout/columnResizerKnob {
- visibility: visible;
+ cursor: col-resize;
}
.fixedDataTableCellLayout/columnResizerKnob {
position: absolute;
right: 0px;
- visibility: hidden;
- width: 4px;
+ width: 1px;
}
diff --git a/src/css/layout/fixedDataTableColumnResizerLineLayout.css b/src/css/layout/fixedDataTableColumnResizerLineLayout.css
index e724497c..2d1f0a25 100644
--- a/src/css/layout/fixedDataTableColumnResizerLineLayout.css
+++ b/src/css/layout/fixedDataTableColumnResizerLineLayout.css
@@ -10,7 +10,7 @@
*/
.fixedDataTableColumnResizerLineLayout/mouseArea {
- cursor: ew-resize;
+ cursor: col-resize;
position: absolute;
right: -5px;
width: 12px;
diff --git a/src/css/style/fixedDataTableCell.css b/src/css/style/fixedDataTableCell.css
index 7c878046..ed5e6cbc 100644
--- a/src/css/style/fixedDataTableCell.css
+++ b/src/css/style/fixedDataTableCell.css
@@ -26,5 +26,5 @@
}
.public/fixedDataTableCell/columnResizerKnob {
- background-color: #0284ff;
+ background-color: #f57c00;
}
diff --git a/src/css/style/fixedDataTableColumnResizerLine.css b/src/css/style/fixedDataTableColumnResizerLine.css
index 42a975fd..3f9653f6 100644
--- a/src/css/style/fixedDataTableColumnResizerLine.css
+++ b/src/css/style/fixedDataTableColumnResizerLine.css
@@ -14,5 +14,5 @@
* Column resizer line.
*/
.public/fixedDataTableColumnResizerLine/main {
- border-color: #0284ff;
+ border-color: #f57c00;
}
diff --git a/src/transition/FixedDataTable.react.js b/src/transition/FixedDataTable.react.js
index de768dda..82dc2735 100644
--- a/src/transition/FixedDataTable.react.js
+++ b/src/transition/FixedDataTable.react.js
@@ -9,22 +9,22 @@
* @providesModule FixedDataTable.react
*/
- /**
- * TRANSITION SHIM
- * This acts to provide an intermediate mapping from the old API to the new API
- *
- * Remove this entire file and replace the two lines in FixedDataTableRoot
- * when ready to continue to the new API.
- */
+/**
+ * TRANSITION SHIM
+ * This acts to provide an intermediate mapping from the old API to the new API
+ *
+ * Remove this entire file and replace the two lines in FixedDataTableRoot
+ * when ready to continue to the new API.
+ */
'use strict';
+var PropTypes = require('prop-types');
+
var React = require('React');
var ReactChildren = React.Children;
-var {PropTypes} = React;
-
// New Table API
var Table = require('FixedDataTableNew.react');
var Column = require('FixedDataTableColumnNew.react');
@@ -105,8 +105,8 @@ function notifyDeprecated(prop, reason) {
* - Scrollable Body Columns: The body columns that move while scrolling
* vertically or horizontally.
*/
-var TransitionTable = React.createClass({
- propTypes: {
+class TransitionTable extends React.Component {
+ static propTypes = {
/**
* Pixel width of table. If all columns do not fit,
* a horizontal scrollbar will appear.
@@ -303,17 +303,18 @@ var TransitionTable = React.createClass({
* Whether a column is currently being resized.
*/
isColumnResizing: PropTypes.bool,
- },
+ };
- getInitialState() {
- // Throw warnings on deprecated props.
- var state = {};
- state.needsMigration = this._checkDeprecations();
+ constructor(props, context) {
+ super(props, context);
+ // Throw warnings on deprecated props.
+ var state = {};
+ state.needsMigration = this._checkDeprecations();
- return state;
- },
+ this.state = state;
+ }
- _checkDeprecations() {
+ _checkDeprecations = () => {
var needsMigration = false;
if (this.props.rowGetter) {
@@ -398,10 +399,10 @@ var TransitionTable = React.createClass({
});
return needsMigration;
- },
+ };
// Wrapper for onRow callbacks, since we don't have rowData at that level.
- _onRowAction(props, callback) {
+ _onRowAction = (props, callback) => {
if (!callback) {
return undefined;
}
@@ -413,9 +414,9 @@ var TransitionTable = React.createClass({
(props.rowGetter && props.rowGetter(rowIndex)) || EMPTY_OBJECT
);
};
- },
+ };
- _transformColumn(column, tableProps, key) {
+ _transformColumn = (column, tableProps, key) => {
var props = column.props;
@@ -462,9 +463,9 @@ var TransitionTable = React.createClass({
/>
);
}
- },
+ };
- _transformColumnGroup(group, tableProps, key, labels) {
+ _transformColumnGroup = (group, tableProps, key, labels) => {
var props = group.props;
var j = 0;
@@ -490,9 +491,9 @@ var TransitionTable = React.createClass({
{columns}
);
- },
+ };
- _convertedColumns(needsMigration) {
+ _convertedColumns = needsMigration => {
// If we don't need to migrate, map directly to the new API.
if (!needsMigration) {
return ReactChildren.map(this.props.children, (child) => {
@@ -539,7 +540,7 @@ var TransitionTable = React.createClass({
i++;
return child;
});
- },
+ };
render() {
var props = this.props;
@@ -555,7 +556,7 @@ var TransitionTable = React.createClass({
{this._convertedColumns(this.state.needsMigration)}
);
- },
-});
+ }
+}
module.exports = TransitionTable;
diff --git a/src/transition/FixedDataTableCellTransition.react.js b/src/transition/FixedDataTableCellTransition.react.js
index 300c376a..02a4ab73 100644
--- a/src/transition/FixedDataTableCellTransition.react.js
+++ b/src/transition/FixedDataTableCellTransition.react.js
@@ -1,3 +1,4 @@
+var PropTypes = require('prop-types');
/**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
@@ -18,7 +19,6 @@
*/
var React = require('React');
-var {PropTypes} = React;
var cx = require('cx');
var joinClasses = require('joinClasses');
@@ -26,9 +26,8 @@ var shallowEqual = require('shallowEqual');
var CellDefault = require('FixedDataTableCellDefault.react');
-var TransitionCell = React.createClass({
-
- propTypes: {
+class TransitionCell extends React.Component {
+ static propTypes = {
label: PropTypes.string, // header, footer
className: PropTypes.string,
rowIndex: PropTypes.number,
@@ -46,7 +45,7 @@ var TransitionCell = React.createClass({
height: PropTypes.number,
isHeaderCell: PropTypes.bool, // header
isFooterCell: PropTypes.bool, // footer
- },
+ };
shouldComponentUpdate(/*object*/ nextProps): boolean {
var update = false;
@@ -74,9 +73,9 @@ var TransitionCell = React.createClass({
this._cellData = cellData;
return update || !shallowEqual(nextProps, this.props);
- },
+ }
- _getCellData(props) {
+ _getCellData = props => {
var dataKey = props.dataKey;
if (dataKey == null) {
return null;
@@ -106,9 +105,9 @@ var TransitionCell = React.createClass({
if (props.headerDataGetter) {
return props.headerDataGetter[dataKey];
}
- },
+ };
- _getRowData(props): Object {
+ _getRowData = (props): Object => {
if (props.rowGetter) {
return props.rowGetter(props.rowIndex) || {};
}
@@ -122,7 +121,7 @@ var TransitionCell = React.createClass({
}
return {};
- },
+ };
render() {
var props = this.props;
@@ -214,6 +213,6 @@ var TransitionCell = React.createClass({
);
}
-});
+}
module.exports = TransitionCell;
diff --git a/src/transition/FixedDataTableColumn.react.js b/src/transition/FixedDataTableColumn.react.js
index 25f31da1..c2d7ba19 100644
--- a/src/transition/FixedDataTableColumn.react.js
+++ b/src/transition/FixedDataTableColumn.react.js
@@ -19,10 +19,8 @@
var React = require('React');
-var TransitionColumn = React.createClass({
- statics: {
- __TableColumn__: true
- },
+class TransitionColumn extends React.Component {
+ static __TableColumn__ = true;
render() {
if (__DEV__) {
@@ -32,6 +30,6 @@ var TransitionColumn = React.createClass({
}
return null;
}
-});
+}
module.exports = TransitionColumn;
diff --git a/src/transition/FixedDataTableColumnGroup.react.js b/src/transition/FixedDataTableColumnGroup.react.js
index 911126d9..d0c2d38c 100644
--- a/src/transition/FixedDataTableColumnGroup.react.js
+++ b/src/transition/FixedDataTableColumnGroup.react.js
@@ -9,20 +9,18 @@
* @providesModule FixedDataTableColumnGroup.react
*/
- /**
- * TRANSITION SHIM
- * This provides an intermediate mapping from the old API to the new API.
- *
- * When ready, remove this file and rename the providesModule in
- * FixedDataTableColumnNew.react
- */
+/**
+ * TRANSITION SHIM
+ * This provides an intermediate mapping from the old API to the new API.
+ *
+ * When ready, remove this file and rename the providesModule in
+ * FixedDataTableColumnNew.react
+ */
var React = require('React');
-var TransitionColumnGroup = React.createClass({
- statics: {
- __TableColumnGroup__: true,
- },
+class TransitionColumnGroup extends React.Component {
+ static __TableColumnGroup__ = true;
render() {
if (__DEV__) {
@@ -32,6 +30,6 @@ var TransitionColumnGroup = React.createClass({
}
return null;
}
-});
+}
module.exports = TransitionColumnGroup;