New property delay in milliseconds.
parent
7fc2617fa9
commit
ef6bd0899d
|
@ -21,6 +21,7 @@ class Button extends React.Component {
|
||||||
ripple: React.PropTypes.bool,
|
ripple: React.PropTypes.bool,
|
||||||
toggle: React.PropTypes.bool,
|
toggle: React.PropTypes.bool,
|
||||||
tooltip: React.PropTypes.string,
|
tooltip: React.PropTypes.string,
|
||||||
|
tooltipDelay: React.PropTypes.number,
|
||||||
type: React.PropTypes.string
|
type: React.PropTypes.string
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -51,7 +52,7 @@ class Button extends React.Component {
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const {accent, flat, floating, href, icon, label, loading, mini,
|
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 element = href ? 'a' : 'button';
|
||||||
const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
|
const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
|
||||||
const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : toggle ? 'toggle' : 'flat';
|
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,
|
return React.createElement(element, props,
|
||||||
ripple ? <Ripple ref='ripple' loading={loading}/> : null,
|
ripple ? <Ripple ref='ripple' loading={loading}/> : null,
|
||||||
tooltip ? <Tooltip className={style.tooltip} label={tooltip}/> : null,
|
tooltip ? <Tooltip className={style.tooltip} delay={tooltipDelay} label={tooltip}/> : null,
|
||||||
icon ? <FontIcon className={style.icon} value={icon}/> : null,
|
icon ? <FontIcon className={style.icon} value={icon}/> : null,
|
||||||
label ? label : this.props.children
|
label ? label : this.props.children
|
||||||
);
|
);
|
||||||
|
|
|
@ -51,6 +51,7 @@ const TestButtons = () => (
|
||||||
| `ripple` | `Boolean` | `true` | If true, component will have a ripple effect on click.|
|
| `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. |
|
| `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. |
|
| `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.
|
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.
|
||||||
|
|
||||||
|
|
|
@ -18,6 +18,8 @@ class Input extends React.Component {
|
||||||
onFocus: React.PropTypes.func,
|
onFocus: React.PropTypes.func,
|
||||||
onKeyPress: React.PropTypes.func,
|
onKeyPress: React.PropTypes.func,
|
||||||
required: React.PropTypes.bool,
|
required: React.PropTypes.bool,
|
||||||
|
tooltip: React.PropTypes.string,
|
||||||
|
tooltipDelay: React.PropTypes.number,
|
||||||
type: React.PropTypes.string,
|
type: React.PropTypes.string,
|
||||||
value: React.PropTypes.any
|
value: React.PropTypes.any
|
||||||
};
|
};
|
||||||
|
@ -68,7 +70,7 @@ class Input extends React.Component {
|
||||||
<span className={style.bar}></span>
|
<span className={style.bar}></span>
|
||||||
{ this.props.label ? <label className={labelClassName}>{this.props.label}</label> : null }
|
{ this.props.label ? <label className={labelClassName}>{this.props.label}</label> : null }
|
||||||
{ this.renderUnderline() }
|
{ this.renderUnderline() }
|
||||||
{ this.props.tooltip ? <Tooltip label={this.props.tooltip}/> : null }
|
{ this.props.tooltip ? <Tooltip label={this.props.tooltip} delay={this.props.tooltipDelay}/> : null }
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -45,6 +45,8 @@ class InputTest extends React.Component {
|
||||||
| `onFocus` | `Function` | | Callback function that is fired when components is focused.|
|
| `onFocus` | `Function` | | Callback function that is fired when components is focused.|
|
||||||
| `onKeyPress` | `Function` | | Callback function that is fired when a key is pressed.|
|
| `onKeyPress` | `Function` | | Callback function that is fired when a key is pressed.|
|
||||||
| `required` | `Boolean` | `false` | If true, the html input has a required value.|
|
| `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|
|
| `type` | `String` | `text` | Type of the input element. It can be a valid HTML5 input type|
|
||||||
| `value` | `String` | | Current value of the input element.|
|
| `value` | `String` | | Current value of the input element.|
|
||||||
|
|
||||||
|
|
|
@ -7,11 +7,13 @@ const HIDE_TIMEOUT = 100;
|
||||||
class Tooltip extends React.Component {
|
class Tooltip extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
|
delay: React.PropTypes.number,
|
||||||
label: React.PropTypes.string
|
label: React.PropTypes.string
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
className: ''
|
className: '',
|
||||||
|
delay: 0
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
|
@ -30,8 +32,8 @@ class Tooltip extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
handleParentMouseOver = () => {
|
handleParentMouseOver = () => {
|
||||||
|
setTimeout(() => {
|
||||||
if (this.deferredHide) clearTimeout(this.deferredHide);
|
if (this.deferredHide) clearTimeout(this.deferredHide);
|
||||||
|
|
||||||
const node = ReactDOM.findDOMNode(this);
|
const node = ReactDOM.findDOMNode(this);
|
||||||
const parent = node.parentNode;
|
const parent = node.parentNode;
|
||||||
const parentStyle = parent.currentStyle || window.getComputedStyle(parent);
|
const parentStyle = parent.currentStyle || window.getComputedStyle(parent);
|
||||||
|
@ -41,6 +43,7 @@ class Tooltip extends React.Component {
|
||||||
node.style.top = `${position.height - offset}px`;
|
node.style.top = `${position.height - offset}px`;
|
||||||
node.style.left = `${parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
|
node.style.left = `${parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
|
||||||
if (!this.state.active) this.setState({ active: true});
|
if (!this.state.active) this.setState({ active: true});
|
||||||
|
}, this.props.delay);
|
||||||
};
|
};
|
||||||
|
|
||||||
handleParentMouseOut = () => {
|
handleParentMouseOut = () => {
|
||||||
|
|
|
@ -20,4 +20,5 @@ const TooltipTest = () => (
|
||||||
| Name | Type | Default | Description|
|
| Name | Type | Default | Description|
|
||||||
|:-----|:-----|:-----|:-----|
|
|:-----|:-----|:-----|:-----|
|
||||||
| `className` | `String` | `''` | Set a class to style the Component.|
|
| `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.|
|
| `label` | `String` | | The text string to use for the tooltip.|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
const TooltipTest = () => (
|
const TooltipTest = () => (
|
||||||
<div>
|
<div>
|
||||||
<p>Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.</p>
|
<p>Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' delay={500}/></strong> adipiscing elit.</p>
|
||||||
<Button label='Button with tooltip' raised accent tooltip='This is a tooltip by property' />
|
<Button label='Button with tooltip' raised accent tooltip='This is a tooltip by property' tooltipDelay={100}/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -7,12 +7,12 @@ const TooltipTest = () => (
|
||||||
<section>
|
<section>
|
||||||
<h5>Tooltip</h5>
|
<h5>Tooltip</h5>
|
||||||
<p>Give information on :hover</p>
|
<p>Give information on :hover</p>
|
||||||
<Button label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' />
|
<Button label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' tooltipDelay={1000} />
|
||||||
<Button icon='add' floating accent tooltip='Floating Tooltip'/>
|
<Button icon='add' floating accent tooltip='Floating Tooltip'/>
|
||||||
<Button icon='add' floating disabled tooltip='Floating can not be shown' />
|
<Button icon='add' floating disabled tooltip='Floating can not be shown' />
|
||||||
<Input tooltip='lorem ipsum...' />
|
<Input tooltip='lorem ipsum...' />
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.
|
Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' delay={300} /></strong> adipiscing elit.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue