diff options
Diffstat (limited to 'ui/app/components/new-tooltip.js')
-rw-r--r-- | ui/app/components/new-tooltip.js | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/ui/app/components/new-tooltip.js b/ui/app/components/new-tooltip.js new file mode 100644 index 000000000..e6103dc95 --- /dev/null +++ b/ui/app/components/new-tooltip.js @@ -0,0 +1,66 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const findDOMNode = require('react-dom').findDOMNode +const ReactTooltip = require('react-tooltip') + +module.exports = NewTooltip + +inherits(NewTooltip, Component) +function NewTooltip () { + Component.call(this) + this.state = { + tooltipNode: null, + tooltipBase: null, + } + + // this.pageClick = this.pageClick.bind(this) +} + +// NewTooltip.prototype.pageClick = function (e) { +// // event.preventDefault(); +// const tooltipNode = this.state.tooltipNode +// console.log(`e.target`, e.target); +// console.log(`tooltipNode.contains(e.target)`, tooltipNode.contains(e.target)); +// }, + +NewTooltip.prototype.componentDidMount = function () { + const tooltipNode = findDOMNode(this); + const tooltipBase = findDOMNode(this.refs.tester) + + this.setState({ tooltipBase, tooltipNode }) +} + +NewTooltip.prototype.componentDidUpdate = function () { + const { show } = this.props + const tooltipBase = this.state.tooltipBase + const tooltipNode = this.state.tooltipNode + + if (show) { + ReactTooltip.show(tooltipBase) + } + else { + ReactTooltip.hide(tooltipBase) + } +} + +NewTooltip.prototype.render = function () { + const props = this.props + const { position, title, children } = props + + return h('div', {}, [ + h('div', { + 'data-tip': 'test', + 'data-for': 'something', + 'ref': 'tester', + }), + h(ReactTooltip, { + place: position || 'top', + effect: 'solid', + id: 'something', + className: 'send-tooltip', + type: 'light', + }, children), + ]) + +} |