From c576707abd05dbd67fabba4fdcf5cb351802a0dd Mon Sep 17 00:00:00 2001 From: James Portelli Date: Wed, 21 Nov 2018 16:47:40 +0000 Subject: [PATCH 1/8] change level tooltip gets rendered and level it gets triggered --- packages/react-data-grid/src/Cell.js | 15 ++++++++++----- themes/react-data-grid-cell.css | 27 +++++++++++++-------------- 2 files changed, 23 insertions(+), 19 deletions(-) diff --git a/packages/react-data-grid/src/Cell.js b/packages/react-data-grid/src/Cell.js index 4298af8e57..27ebc2e01b 100644 --- a/packages/react-data-grid/src/Cell.js +++ b/packages/react-data-grid/src/Cell.js @@ -174,7 +174,6 @@ class Cell extends React.PureComponent { let extraClasses = joinClasses({ 'row-selected': this.props.isRowSelected, editing: this.isEditorEnabled(), - 'cell-tooltip': this.props.tooltip ? true : false, 'rdg-child-cell': this.props.expandableOptions && this.props.expandableOptions.subRowDetails && this.props.expandableOptions.treeDepth > 0, 'last-column': this.props.column.isLastColumn }); @@ -317,13 +316,21 @@ class Cell extends React.PureComponent { if (treeDepth > 0 && isExpandCell) { cellDeleter = ; } + + const tooltip = this.props.tooltip ? ({this.props.tooltip}) : null; + + const classes = joinClasses('react-grid-Cell__value', + { 'cell-tooltip': this.props.tooltip ? true : false } + ); + return ( -
+
{cellDeleter}
{CellContent} {this.props.cellControls}
+ {tooltip}
); }; @@ -347,8 +354,7 @@ class Cell extends React.PureComponent { isScrolling }); - let events = this.getEvents(); - const tooltip = this.props.tooltip ? ({this.props.tooltip}) : null; + const events = this.getEvents(); const cellExpander = this.canExpand() && ( @@ -365,7 +371,6 @@ class Cell extends React.PureComponent { {cellActionButtons} {cellExpander} {cellContent} - {tooltip}
); } diff --git a/themes/react-data-grid-cell.css b/themes/react-data-grid-cell.css index de172ec65b..f6e1b78465 100644 --- a/themes/react-data-grid-cell.css +++ b/themes/react-data-grid-cell.css @@ -50,6 +50,13 @@ .react-grid-Cell:hover { background: #eee; + /* + A minor hack to get cell tooltips to show correctly. + Hover is triggered on a child (react-grid-Cell__value) + and to avoid having the tooltip hide under the cell in + the next row we need to up the z-index of the cell being hovered. + */ + z-index: 101; } .react-grid-cell .form-control-feedback { @@ -90,16 +97,8 @@ padding: 0; } -.cell-tooltip { - position: relative; - display: inline-block; -} - -.cell-tooltip:hover { - z-index: 101; -} - .cell-tooltip .cell-tooltip-text { + white-space: normal; visibility: hidden; width: 150px; background-color: black; @@ -108,12 +107,12 @@ border-radius: 6px; padding: 5px 0; position: absolute; - z-index: 1; - bottom: -150%; + z-index: 999; + top: 50%; + bottom: initial; left: 50%; - margin-left: -60px; - /* Fade in tooltip - takes 1 second to go from 0% to 100% opacity */ - opacity: 1s; + margin-top: 15px; + margin-left: -75px } .cell-tooltip:hover .cell-tooltip-text { From 3b22f60e0e3b3098dd620b84bd30c4c7df2c1b9f Mon Sep 17 00:00:00 2001 From: James Portelli Date: Wed, 21 Nov 2018 17:37:43 +0000 Subject: [PATCH 2/8] remove unsed editors and fix imports. --- .../src/editors/AutoCompleteTokensEditor.js | 60 ------------------- .../src/editors/DateRangeEditor.js | 49 --------------- .../src/editors/index.js | 3 +- 3 files changed, 2 insertions(+), 110 deletions(-) delete mode 100644 packages/react-data-grid-addons/src/editors/AutoCompleteTokensEditor.js delete mode 100644 packages/react-data-grid-addons/src/editors/DateRangeEditor.js diff --git a/packages/react-data-grid-addons/src/editors/AutoCompleteTokensEditor.js b/packages/react-data-grid-addons/src/editors/AutoCompleteTokensEditor.js deleted file mode 100644 index 9e9b346de1..0000000000 --- a/packages/react-data-grid-addons/src/editors/AutoCompleteTokensEditor.js +++ /dev/null @@ -1,60 +0,0 @@ -import React, {Component} from 'react'; -import PropTypes from 'prop-types'; -import Select from 'react-select'; -import ReactDOM from 'react-dom'; -import 'react-select/dist/react-select.css'; - -const ExcelColumn = { - name: PropTypes.string.isRequired, - key: PropTypes.string.isRequired, - width: PropTypes.number.isRequired, - filterable: PropTypes.bool -}; - -class AutoCompleteTokensEditor extends Component { - - static propTypes = { - options: PropTypes.array.isRequired, - column: PropTypes.shape(ExcelColumn), - value: PropTypes.array - } - - constructor(props) { - super(props); - this.state = { - value: [] - }; - this.handleSelectChange = this.handleSelectChange.bind(this); - } - - getInputNode() { - return ReactDOM.findDOMNode(this); - } - - getValue() { - let updated = {}; - updated[this.props.column.key] = this.state.value; - return updated; - } - - handleSelectChange(value) { - this.setState({value}); - } - - render() { - let options = []; - this.props.options.forEach(function(name) { - if (typeof (name) === 'string') { - options.push({label: name, value: name}); - } else { - options.push({label: name.caption, value: name.id}); - } - }); - return ( - + ); + } +} + +export default AutoCompleteTokensEditor; diff --git a/packages/react-data-grid-addons/src/editors/DateRangeEditor.js b/packages/react-data-grid-addons/src/editors/DateRangeEditor.js new file mode 100644 index 0000000000..790868af53 --- /dev/null +++ b/packages/react-data-grid-addons/src/editors/DateRangeEditor.js @@ -0,0 +1,49 @@ +const React = require('react'); +import PropTypes from 'prop-types'; +const Moment = require('moment'); +const DateRangeFilter = require('./widgets/DateRangeFilter'); + +class DateRangeEditor extends React.Component { + static displayName = 'DateRangeEditor'; + + static propTypes = { + format: PropTypes.string, + ranges: PropTypes.arrayOf(PropTypes.string), + value: PropTypes.shape({ + startDate: PropTypes.Date.isRequired, + endDate: PropTypes.Date.isRequired + }).isRequired + }; + + static defaultProps = { + format: 'YYYY-MM-DD', + ranges: [] + }; + + rangeSeparatorChar = ' - '; + + isDateValid = (date) => { + return new Moment(date, this.props.format, true).isValid(); + }; + + validate = (value) => { + return this.isDateValid(value.startDate) + && this.isDateValid(value.endDate) + && (new Moment(value.startDate, this.props.format).isBefore(value.endDate) + || new Moment(value.startDate, this.props.format).isSame(value.endDate)); + }; + + handleDateFilterApply = (startDate, endDate) => { + this.commit({value: {startDate: startDate, endDate: endDate}}); + }; + + render() { + return ( +
+ this.datepicker = node} onApply={this.handleDateFilterApply} format={this.props.format} ranges={this.props.ranges} startDate={this.props.value.startDate} endDate={this.props.value.endDate} /> +
+ ); + } +} + +module.exports = DateRangeEditor; diff --git a/packages/react-data-grid-addons/src/editors/index.js b/packages/react-data-grid-addons/src/editors/index.js index abe488cc43..5a047e8a3c 100644 --- a/packages/react-data-grid-addons/src/editors/index.js +++ b/packages/react-data-grid-addons/src/editors/index.js @@ -1,10 +1,9 @@ import { SimpleTextEditor, CheckboxEditor } from 'common/editors'; -import ContainerEditorWrapper from './ContainerEditorWrapper'; const Editors = { AutoComplete: require('./AutoCompleteEditor'), DropDownEditor: require('./DropDownEditor'), - ContainerEditorWrapper, + ContainerEditorWrapper: require('./ContainerEditorWrapper'), SimpleTextEditor, CheckboxEditor }; From 71a293120157936806fbcbf5339615dae836b43f Mon Sep 17 00:00:00 2001 From: James Portelli Date: Wed, 5 Dec 2018 19:00:40 +0000 Subject: [PATCH 6/8] fix issues --- packages/react-data-grid/src/Cell.js | 1 + themes/react-data-grid-cell.css | 28 +++++++++++++++++++--------- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/packages/react-data-grid/src/Cell.js b/packages/react-data-grid/src/Cell.js index 8a24085cd9..3ad731ee47 100644 --- a/packages/react-data-grid/src/Cell.js +++ b/packages/react-data-grid/src/Cell.js @@ -174,6 +174,7 @@ class Cell extends React.PureComponent { let extraClasses = joinClasses({ 'row-selected': this.props.isRowSelected, editing: this.isEditorEnabled(), + 'has-tooltip': this.props.tooltip ? true : false, 'rdg-child-cell': this.props.expandableOptions && this.props.expandableOptions.subRowDetails && this.props.expandableOptions.treeDepth > 0, 'last-column': this.props.column.isLastColumn }); diff --git a/themes/react-data-grid-cell.css b/themes/react-data-grid-cell.css index 10a72648bf..e42ae817ce 100644 --- a/themes/react-data-grid-cell.css +++ b/themes/react-data-grid-cell.css @@ -19,11 +19,27 @@ will-change: transform; } +.react-grid-Cell--frozen { + z-index: 12; +} + .react-grid-Cell--frozen:focus { + z-index: 12; +} + .rdg-last--frozen { border-right: 1px solid #dddddd; box-shadow: 2px 0 5px -2px rgba(136, 136, 136, .3) !important; } +/* cell which have tooltips need to have a higher z-index on hover so that the tooltip appears above the other cells*/ +.react-grid-Cell.has-tooltip:hover { + z-index: 5; +} + +.react-grid-Cell.react-grid-Cell--frozen.has-tooltip:hover { + z-index: 15; +} + .react-contextmenu--visible { z-index: 1000; } @@ -39,16 +55,8 @@ background-color : black; } - .react-grid-Cell:hover { background: #eee; - /* - A minor hack to get cell tooltips to show correctly. - Hover is triggered on a child (react-grid-Cell__value) - and to avoid having the tooltip hide under the cell in - the next row we need to up the z-index of the cell being hovered. - */ - z-index: 101; } .react-grid-cell .form-control-feedback { @@ -71,6 +79,9 @@ overflow: visible !important; } +.react-grid-Cell--frozen.editing { + z-index: 100; +} .react-grid-Cell.editing .has-error input { border: 2px red solid !important; border-radius: 2px !important; @@ -96,7 +107,6 @@ border-radius: 6px; padding: 5px 0; position: absolute; - z-index: 999; top: 50%; bottom: initial; left: 50%; From a9e19fb7d7813b8477aaf5c6ac4fea96cdb91354 Mon Sep 17 00:00:00 2001 From: James Portelli Date: Wed, 5 Dec 2018 19:02:30 +0000 Subject: [PATCH 7/8] fix issues --- themes/react-data-grid-cell.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/themes/react-data-grid-cell.css b/themes/react-data-grid-cell.css index e42ae817ce..ca61a915a9 100644 --- a/themes/react-data-grid-cell.css +++ b/themes/react-data-grid-cell.css @@ -22,6 +22,7 @@ .react-grid-Cell--frozen { z-index: 12; } + .react-grid-Cell--frozen:focus { z-index: 12; } @@ -55,6 +56,7 @@ background-color : black; } + .react-grid-Cell:hover { background: #eee; } From 714ad2a4b0c4e64a1023e772edb9a18ef94508d7 Mon Sep 17 00:00:00 2001 From: James Portelli Date: Wed, 5 Dec 2018 19:03:33 +0000 Subject: [PATCH 8/8] remove extra space --- themes/react-data-grid-cell.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/react-data-grid-cell.css b/themes/react-data-grid-cell.css index ca61a915a9..63f99b9a71 100644 --- a/themes/react-data-grid-cell.css +++ b/themes/react-data-grid-cell.css @@ -23,7 +23,7 @@ z-index: 12; } - .react-grid-Cell--frozen:focus { +.react-grid-Cell--frozen:focus { z-index: 12; }