Skip to content

Commit

Permalink
Merge pull request #1307 from skbkontur/tooltip-1304
Browse files Browse the repository at this point in the history
 fix(Tooltip): deactivate RenderLayer by default
  • Loading branch information
wKich authored Mar 29, 2019
2 parents 85f1be0 + 670aa44 commit 570df16
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 11 deletions.
22 changes: 14 additions & 8 deletions packages/retail-ui/components/RenderLayer/RenderLayer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,17 @@ export interface RenderLayerProps {
}

class RenderLayer extends React.Component<RenderLayerProps> {
public static propTypes = {
active(props: RenderLayerProps, propName: keyof RenderLayerProps, componentName: string) {
const { active, onClickOutside, onFocusOutside } = props;
if (active && !(onClickOutside || onFocusOutside)) {
return new Error(
`[${componentName}]: using the component without either 'onClickOutside' or 'onFocusOutside' callback is pointless.`,
);
}
},
};

public static defaultProps = {
active: true,
};
Expand Down Expand Up @@ -44,14 +55,9 @@ class RenderLayer extends React.Component<RenderLayerProps> {
}

private attachListeners() {
if (this.props.onFocusOutside) {
this.focusOutsideListenerToken = listenFocusOutside(() => [this.getDomNode()], this.handleFocusOutside);
window.addEventListener('blur', this.handleFocusOutside);
}

if (this.props.onClickOutside) {
document.addEventListener('mousedown', this.handleNativeDocClick);
}
this.focusOutsideListenerToken = listenFocusOutside(() => [this.getDomNode()], this.handleFocusOutside);
window.addEventListener('blur', this.handleFocusOutside);
document.addEventListener('mousedown', this.handleNativeDocClick);
}

private detachListeners() {
Expand Down
2 changes: 1 addition & 1 deletion packages/retail-ui/components/Tooltip/Tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ class Tooltip extends React.Component<TooltipProps, TooltipState> {
public render() {
const props = this.props;
const content = this.renderContent();
const { popupProps, layerProps = {} } = this.getProps();
const { popupProps, layerProps = { active: false } } = this.getProps();
const anchorElement = props.children || props.anchorElement;
const popup = this.renderPopup(anchorElement, popupProps, content);

Expand Down
47 changes: 45 additions & 2 deletions packages/retail-ui/components/Tooltip/__tests__/Tooltip-test.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
// tslint:disable:jsx-no-lambda
import { mount } from 'enzyme';
import { mount, ReactWrapper } from 'enzyme';
import * as React from 'react';
import Button from '../../Button';
import Tooltip, { TooltipProps } from '../Tooltip';
import Tooltip, { TooltipProps, TooltipState } from '../Tooltip';

function clickOutside() {
const event = document.createEvent('HTMLEvents');
event.initEvent('mousedown', true, true);

document.body.dispatchEvent(event);
}

describe('Tooltip', () => {
const render = () => '';
Expand Down Expand Up @@ -118,4 +125,40 @@ describe('Tooltip', () => {
wrapper.setProps({ trigger: 'hover' });
expect(wrapper.find(Content).length).toBe(0);
});

describe('calls onCloseRequest on clickOutside when tooltip is opened', () => {
const Content = () => <div />;
const onCloseRequest = jest.fn();
let wrapper: ReactWrapper<TooltipProps, TooltipState, Tooltip>;

beforeEach(() => {
onCloseRequest.mockClear();
wrapper = mount<Tooltip, TooltipProps, TooltipState>(
<Tooltip disableAnimations={true} render={() => <Content />} onCloseRequest={onCloseRequest}>
<Button>Anchor</Button>
</Tooltip>,
);
});

it('with "click" trigger', () => {
wrapper.setProps({ trigger: 'click' });
wrapper.setState({ opened: true });
wrapper.update();
expect(wrapper.find(Content).length).toBe(1);

clickOutside();

expect(onCloseRequest).toHaveBeenCalledTimes(1);
});

it('with "opened" trigger', () => {
wrapper.setProps({ trigger: 'opened' });
wrapper.update();
expect(wrapper.find(Content).length).toBe(1);

clickOutside();

expect(onCloseRequest).toHaveBeenCalledTimes(1);
});
});
});

0 comments on commit 570df16

Please sign in to comment.