Merge branch 'akinoxsolutions-dev' into dev
* akinoxsolutions-dev: Add tooltipShowOnClick to README Add "tooltipShowOnClick" to Tooltip componentold
commit
5477698f53
|
@ -19,6 +19,7 @@ const defaults = {
|
|||
className: '',
|
||||
delay: 0,
|
||||
hideOnClick: true,
|
||||
showOnClick: false,
|
||||
position: POSITION.VERTICAL,
|
||||
theme: {}
|
||||
};
|
||||
|
@ -28,6 +29,7 @@ const tooltipFactory = (options = {}) => {
|
|||
className: defaultClassName,
|
||||
delay: defaultDelay,
|
||||
hideOnClick: defaultHideOnClick,
|
||||
showOnClick: defaultShowOnClick,
|
||||
position: defaultPosition,
|
||||
theme: defaultTheme
|
||||
} = {...defaults, ...options};
|
||||
|
@ -51,14 +53,16 @@ const tooltipFactory = (options = {}) => {
|
|||
]),
|
||||
tooltipDelay: PropTypes.number,
|
||||
tooltipHideOnClick: 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
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
className: defaultClassName,
|
||||
tooltipDelay: defaultDelay,
|
||||
tooltipHideOnClick: defaultHideOnClick,
|
||||
tooltipPosition: defaultPosition
|
||||
tooltipPosition: defaultPosition,
|
||||
tooltipShowOnClick: defaultShowOnClick
|
||||
};
|
||||
|
||||
state = {
|
||||
|
@ -158,7 +162,14 @@ const tooltipFactory = (options = {}) => {
|
|||
};
|
||||
|
||||
handleClick = (event) => {
|
||||
if (this.props.tooltipHideOnClick) this.deactivate();
|
||||
if (this.props.tooltipHideOnClick && this.state.active) {
|
||||
this.deactivate();
|
||||
}
|
||||
|
||||
if (this.props.tooltipShowOnClick && !this.state.active) {
|
||||
this.activate(this.calculatePosition(event.target));
|
||||
}
|
||||
|
||||
if (this.props.onClick) this.props.onClick(event);
|
||||
};
|
||||
|
||||
|
@ -173,6 +184,7 @@ const tooltipFactory = (options = {}) => {
|
|||
tooltipDelay, //eslint-disable-line no-unused-vars
|
||||
tooltipHideOnClick, //eslint-disable-line no-unused-vars
|
||||
tooltipPosition, //eslint-disable-line no-unused-vars
|
||||
tooltipShowOnClick, //eslint-disable-line no-unused-vars
|
||||
...other
|
||||
} = this.props;
|
||||
|
||||
|
|
|
@ -38,6 +38,7 @@ In any component you decorate with the Tooltip you'd get some additional props:
|
|||
| `tooltipDelay` | `Number` | | Amount of time in miliseconds spent before the tooltip is visible.|
|
||||
| `tooltipHideOnClick` | `Boolean` | `true` | If true, the Tooltip hides after a click in the host component.|
|
||||
| `tooltipPosition` | `String` | `vertical` | Determines the position of the tooltip. It can be automatic with `vertical` and `horizontal` values or forced with `bottom`, `top`, `left` or `right`.|
|
||||
| `tooltipShowOnClick` | `Boolean` | `false` | Determines the tooltip should be toggled when clicked. This is useful for mobile where there is no mouse enter.|
|
||||
|
||||
## Theming
|
||||
|
||||
|
|
|
@ -24,6 +24,14 @@ const TooltipTest = () => (
|
|||
/>
|
||||
<TooltipInput tooltip='lorem ipsum...' />
|
||||
<p>Lorem ipsum dolor sit amet, <TooltipStrong tooltip='This is a auto show tooltip'>consectetur</TooltipStrong> adipiscing elit.</p>
|
||||
<p>
|
||||
Click this next word to show and hide on click:
|
||||
{' '}
|
||||
<TooltipStrong tooltip='This is a auto show tooltip' tooltipShowOnClick>
|
||||
oh hai
|
||||
</TooltipStrong>
|
||||
{' '}. This is useful for mobile!
|
||||
</p>
|
||||
</section>
|
||||
);
|
||||
|
||||
|
|
Loading…
Reference in New Issue