parent
8f1312f79f
commit
2427d05568
|
@ -66,6 +66,12 @@ const factory = (MenuItem) => {
|
||||||
: this.props.position;
|
: this.props.position;
|
||||||
this.setState({ position, width, height });
|
this.setState({ position, width, height });
|
||||||
});
|
});
|
||||||
|
if (this.state.active) {
|
||||||
|
events.addEventsToDocument({
|
||||||
|
click: this.handleDocumentClick,
|
||||||
|
touchstart: this.handleDocumentClick,
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps) {
|
componentWillReceiveProps(nextProps) {
|
||||||
|
|
|
@ -56,6 +56,7 @@ const tooltipFactory = (options = {}) => {
|
||||||
]),
|
]),
|
||||||
tooltipDelay: PropTypes.number,
|
tooltipDelay: PropTypes.number,
|
||||||
tooltipHideOnClick: PropTypes.bool,
|
tooltipHideOnClick: PropTypes.bool,
|
||||||
|
tooltipOnFocus: PropTypes.bool,
|
||||||
tooltipPosition: PropTypes.oneOf(Object.keys(POSITION).map(key => POSITION[key])),
|
tooltipPosition: PropTypes.oneOf(Object.keys(POSITION).map(key => POSITION[key])),
|
||||||
tooltipShowOnClick: PropTypes.bool,
|
tooltipShowOnClick: PropTypes.bool,
|
||||||
};
|
};
|
||||||
|
@ -215,6 +216,7 @@ const tooltipFactory = (options = {}) => {
|
||||||
onMouseEnter, // eslint-disable-line no-unused-vars
|
onMouseEnter, // eslint-disable-line no-unused-vars
|
||||||
onMouseLeave, // eslint-disable-line no-unused-vars
|
onMouseLeave, // eslint-disable-line no-unused-vars
|
||||||
tooltip,
|
tooltip,
|
||||||
|
tooltipOnFocus, // eslint-disable-line no-unused-vars
|
||||||
tooltipDelay, // eslint-disable-line no-unused-vars
|
tooltipDelay, // eslint-disable-line no-unused-vars
|
||||||
tooltipHideOnClick, // eslint-disable-line no-unused-vars
|
tooltipHideOnClick, // eslint-disable-line no-unused-vars
|
||||||
tooltipPosition, // eslint-disable-line no-unused-vars
|
tooltipPosition, // eslint-disable-line no-unused-vars
|
||||||
|
@ -231,10 +233,16 @@ const tooltipFactory = (options = {}) => {
|
||||||
...other,
|
...other,
|
||||||
className,
|
className,
|
||||||
onClick: this.handleClick,
|
onClick: this.handleClick,
|
||||||
onMouseEnter: this.handleMouseEnter,
|
|
||||||
onMouseLeave: this.handleMouseLeave,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (tooltipOnFocus) {
|
||||||
|
childProps.onFocus = this.handleMouseEnter;
|
||||||
|
childProps.onBlur = this.handleMouseLeave;
|
||||||
|
} else {
|
||||||
|
childProps.onMouseEnter = this.handleMouseEnter;
|
||||||
|
childProps.onMouseLeave = this.handleMouseLeave;
|
||||||
|
}
|
||||||
|
|
||||||
const shouldPass = typeof ComposedComponent !== 'string' && defaultPassthrough;
|
const shouldPass = typeof ComposedComponent !== 'string' && defaultPassthrough;
|
||||||
const finalProps = shouldPass ? { ...childProps, theme } : childProps;
|
const finalProps = shouldPass ? { ...childProps, theme } : childProps;
|
||||||
|
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
:root {
|
:root {
|
||||||
--tooltip-background: color(rgb(97, 97, 97) a(90%));
|
--tooltip-background: color(rgb(97, 97, 97) a(90%));
|
||||||
--tooltip-margin: calc(0.5 * var(--unit));
|
--tooltip-margin: calc(0.5 * var(--unit));
|
||||||
--tooltip-border-radius: calc(0.2 * var(--unit));
|
--tooltip-border-radius: calc(0.5 * var(--unit));
|
||||||
--tooltip-color: var(--color-white);
|
--tooltip-color: var(--color-white);
|
||||||
--tooltip-font-size: var(--unit);
|
--tooltip-font-size: calc(1.5 * var(--unit));
|
||||||
--tooltip-max-width: calc(17 * var(--unit));
|
--tooltip-max-width: calc(35 * var(--unit));
|
||||||
--tooltip-padding: calc(0.8 * var(--unit));
|
--tooltip-padding: calc(1.2 * var(--unit));
|
||||||
--tooltip-animation-duration: 200ms;
|
--tooltip-animation-duration: 200ms;
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
font-family: var(--preferred-font);
|
font-family: var(--preferred-font);
|
||||||
font-size: var(--tooltip-font-size);
|
font-size: var(--tooltip-font-size);
|
||||||
font-weight: var(--font-weight-bold);
|
font-weight: var(--font-weight-bold);
|
||||||
line-height: var(--font-size-small);
|
line-height: calc(1.1 * var(--tooltip-font-size));
|
||||||
max-width: var(--tooltip-max-width);
|
max-width: var(--tooltip-max-width);
|
||||||
padding: var(--tooltip-margin);
|
padding: var(--tooltip-margin);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
"name": "react-toolbox",
|
"name": "react-toolbox",
|
||||||
"description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
|
"description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
|
||||||
"homepage": "http://www.react-toolbox.io",
|
"homepage": "http://www.react-toolbox.io",
|
||||||
"version": "2.0.0-beta.18",
|
"version": "2.0.0-beta.19",
|
||||||
"main": "./lib",
|
"main": "./lib",
|
||||||
"module": "./components",
|
"module": "./components",
|
||||||
"author": {
|
"author": {
|
||||||
|
|
Loading…
Reference in New Issue