From ef6bd0899d43d3a76bee96e6c25b23bdf55ff459 Mon Sep 17 00:00:00 2001 From: "@soyjavi" Date: Sat, 21 Nov 2015 11:27:33 +0700 Subject: [PATCH] New property delay in milliseconds. --- components/button/index.jsx | 5 ++-- components/button/readme.md | 1 + components/input/index.jsx | 4 ++- components/input/readme.md | 2 ++ components/tooltip/index.jsx | 25 +++++++++++-------- components/tooltip/readme.md | 1 + .../modules/examples/tooltip_example_1.txt | 4 +-- spec/components/tooltip.jsx | 8 +++--- 8 files changed, 30 insertions(+), 20 deletions(-) diff --git a/components/button/index.jsx b/components/button/index.jsx index 31fde0e6..5c0533e2 100644 --- a/components/button/index.jsx +++ b/components/button/index.jsx @@ -21,6 +21,7 @@ class Button extends React.Component { ripple: React.PropTypes.bool, toggle: React.PropTypes.bool, tooltip: React.PropTypes.string, + tooltipDelay: React.PropTypes.number, type: React.PropTypes.string }; @@ -51,7 +52,7 @@ class Button extends React.Component { render () { const {accent, flat, floating, href, icon, label, loading, mini, - primary, raised, ripple, toggle, tooltip, ...others} = this.props; + primary, raised, ripple, toggle, tooltip, tooltipDelay, ...others} = this.props; const element = href ? 'a' : 'button'; const level = primary ? 'primary' : accent ? 'accent' : 'neutral'; const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : toggle ? 'toggle' : 'flat'; @@ -71,7 +72,7 @@ class Button extends React.Component { return React.createElement(element, props, ripple ? : null, - tooltip ? : null, + tooltip ? : null, icon ? : null, label ? label : this.props.children ); diff --git a/components/button/readme.md b/components/button/readme.md index 0d73910d..9e77ee29 100644 --- a/components/button/readme.md +++ b/components/button/readme.md @@ -51,6 +51,7 @@ const TestButtons = () => ( | `ripple` | `Boolean` | `true` | If true, component will have a ripple effect on click.| | `toggle` | `Boolean` | `false` | If true, the button will have a toggle icon look. | | `tooptip` | `String` | | The value will be shown as a tooltip when the button is hovered. | +| `tooltipDelay` | `Number` | | Amount of time in milliseconds before the tooltip is visible.| By default it will have neutral colors and a flat aspect even though the `flat` property is `false` by default. Also, some properties exclude others, for example a button cannot be `flat` and `raised` at the same time. diff --git a/components/input/index.jsx b/components/input/index.jsx index aa8cbed0..24fee236 100644 --- a/components/input/index.jsx +++ b/components/input/index.jsx @@ -18,6 +18,8 @@ class Input extends React.Component { onFocus: React.PropTypes.func, onKeyPress: React.PropTypes.func, required: React.PropTypes.bool, + tooltip: React.PropTypes.string, + tooltipDelay: React.PropTypes.number, type: React.PropTypes.string, value: React.PropTypes.any }; @@ -68,7 +70,7 @@ class Input extends React.Component { { this.props.label ? : null } { this.renderUnderline() } - { this.props.tooltip ? : null } + { this.props.tooltip ? : null } ); } diff --git a/components/input/readme.md b/components/input/readme.md index 11afe733..a79e02d7 100644 --- a/components/input/readme.md +++ b/components/input/readme.md @@ -45,6 +45,8 @@ class InputTest extends React.Component { | `onFocus` | `Function` | | Callback function that is fired when components is focused.| | `onKeyPress` | `Function` | | Callback function that is fired when a key is pressed.| | `required` | `Boolean` | `false` | If true, the html input has a required value.| +| `tooptip` | `String` | | The value will be shown as a tooltip when the button is hovered. | +| `tooltipDelay` | `Number` | | Amount of time in milliseconds before the tooltip is visible.| | `type` | `String` | `text` | Type of the input element. It can be a valid HTML5 input type| | `value` | `String` | | Current value of the input element.| diff --git a/components/tooltip/index.jsx b/components/tooltip/index.jsx index 67861d21..e223431a 100644 --- a/components/tooltip/index.jsx +++ b/components/tooltip/index.jsx @@ -7,11 +7,13 @@ const HIDE_TIMEOUT = 100; class Tooltip extends React.Component { static propTypes = { className: React.PropTypes.string, + delay: React.PropTypes.number, label: React.PropTypes.string }; static defaultProps = { - className: '' + className: '', + delay: 0 }; state = { @@ -30,17 +32,18 @@ class Tooltip extends React.Component { }; handleParentMouseOver = () => { - if (this.deferredHide) clearTimeout(this.deferredHide); + setTimeout(() => { + if (this.deferredHide) clearTimeout(this.deferredHide); + const node = ReactDOM.findDOMNode(this); + const parent = node.parentNode; + const parentStyle = parent.currentStyle || window.getComputedStyle(parent); + const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']); + const position = parent.getBoundingClientRect(); - const node = ReactDOM.findDOMNode(this); - const parent = node.parentNode; - const parentStyle = parent.currentStyle || window.getComputedStyle(parent); - const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']); - const position = parent.getBoundingClientRect(); - - node.style.top = `${position.height - offset}px`; - node.style.left = `${parseInt((position.width / 2) - (node.offsetWidth / 2))}px`; - if (!this.state.active) this.setState({ active: true}); + node.style.top = `${position.height - offset}px`; + node.style.left = `${parseInt((position.width / 2) - (node.offsetWidth / 2))}px`; + if (!this.state.active) this.setState({ active: true}); + }, this.props.delay); }; handleParentMouseOut = () => { diff --git a/components/tooltip/readme.md b/components/tooltip/readme.md index a2dff7fb..01d01e33 100644 --- a/components/tooltip/readme.md +++ b/components/tooltip/readme.md @@ -20,4 +20,5 @@ const TooltipTest = () => ( | Name | Type | Default | Description| |:-----|:-----|:-----|:-----| | `className` | `String` | `''` | Set a class to style the Component.| +| `delay` | `Number` | | Amount of time in miliseconds before the tooltip is visible.| | `label` | `String` | | The text string to use for the tooltip.| diff --git a/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt b/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt index e50b1547..b974394c 100644 --- a/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt +++ b/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt @@ -1,7 +1,7 @@ const TooltipTest = () => (
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
); diff --git a/spec/components/tooltip.jsx b/spec/components/tooltip.jsx index dd4c5011..a45b6f79 100644 --- a/spec/components/tooltip.jsx +++ b/spec/components/tooltip.jsx @@ -7,12 +7,12 @@ const TooltipTest = () => (
Tooltip

Give information on :hover

-
);