40 | ); 41 | const tooltip = ( 42 |

52 | {this.props.children} 53 | {pin} 54 |

55 | ); 56 | return createPortal(tooltip, this.domNode); 57 | } 58 | } 59 | 60 | function getTooltipPosition(node: HTMLElement, yOffset: number = 0) { 61 | const docHeight = document.documentElement.clientHeight; 62 | const rect = node.getBoundingClientRect(); 63 | return { 64 | bottom: docHeight - rect.top - yOffset, 65 | left: rect.left 66 | }; 67 | } 68 | -------------------------------------------------------------------------------- /stories/complex-example/complex.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { storiesOf } from '@storybook/react'; 4 | 5 | import Foco from '../../src'; 6 | import { Tooltip } from './Tooltip'; 7 | 8 | storiesOf('Tooltip', module) 9 | .add('sample', () => ) 10 | .add('with_scroll', () => ); 11 | 12 | const DemoScene = ({ count = 0 }: { count: number }) => ( 13 | <> 14 |

User List

15 |

16 |

26 |

27 | {getUsers(count).map((x, i) => )} 28 |

29 |

30 |

31 |

32 | User list has overflow-y: scroll and{' '} 33 | overflow-x: hidden. Tooltips are rendered as last child 34 | of body, with ReactDOM.createPortal api. Other way they will be 35 | hidden in case of overflow 36 |

37 |

38 | Foco component handles clicks and focuses outside, taking care 39 | of portals 40 |

41 |

42 |

43 | 44 | ); 45 | 46 | interface ItemProps { 47 | name: string; 48 | } 49 | 50 | interface ItemState { 51 | anchor: HTMLElement | null; 52 | } 53 | 54 | class Item extends React.Component { 55 | public state: ItemState = { 56 | anchor: null 57 | }; 58 | 59 | public render() { 60 | return ( 61 |

70 | {this.props.name} 71 | 75 | 76 | {this.state.anchor && ( 77 | 78 | 79 | Is admin 80 | 81 | 82 | )} 83 | 84 |

85 | ); 86 | } 87 | 88 | private closeTooltip = () => { 89 | return this.setState({ anchor: null }); 90 | }; 91 | 92 | private handleClick = (event: React.MouseEvent) => { 93 | const target = event.target as HTMLButtonElement; 94 | this.setState(state => { 95 | if (state.anchor) { 96 | return { anchor: null }; 97 | } 98 | return { anchor: target }; 99 | }); 100 | }; 101 | } 102 | 103 | function getUsers(count: number) { 104 | const Names: string[] = [ 105 | 'Chasidy', 106 | 'Remedios', 107 | 'Warner', 108 | 'Spencer', 109 | 'Malissa', 110 | 'Benton', 111 | 'Jeni', 112 | 'Jeremiah', 113 | 'Kori', 114 | 'Mardell', 115 | 'Marcelina', 116 | 'Rosamond', 117 | 'Lorriane', 118 | 'Artie', 119 | 'Bunny', 120 | 'Loren', 121 | 'Jame', 122 | 'Sonny', 123 | 'Keith', 124 | 'Jon' 125 | ]; 126 | const Surnames: string[] = [ 127 | 'Sherrard', 128 | 'Rustin', 129 | 'Schomer', 130 | 'Alvares', 131 | 'Sindelar', 132 | 'Vanarsdale', 133 | 'Wrobel', 134 | 'Tolman', 135 | 'Ellerman', 136 | 'Ayala', 137 | 'Comes', 138 | 'Bungard', 139 | 'Vine', 140 | 'Markus', 141 | 'Light', 142 | 'Tait', 143 | 'Batt', 144 | 'Steedley', 145 | 'Calico', 146 | 'Boissonneault' 147 | ]; 148 | 149 | const getRandName = () => Names[Math.floor(Math.random() * Names.length)]; 150 | const getRandSurname = () => 151 | Surnames[Math.floor(Math.random() * Surnames.length)]; 152 | 153 | return Array(count) 154 | .fill(0) 155 | .map((_: any, index: number) => `${getRandName()} ${getRandSurname()}`); 156 | } 157 | -------------------------------------------------------------------------------- /stories/index.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { storiesOf } from '@storybook/react'; 4 | 5 | import Foco from '../src'; 6 | import { TestElements } from './TestElements'; 7 | 8 | storiesOf('Foco', module).add('clicks_and_focuses', () => ); 9 | 10 | export enum ComponentActions { 11 | None = 'None', 12 | ClickInside = 'ClickInside', 13 | ClickOutside = 'ClickOutside', 14 | FocusInside = 'FocusInside', 15 | FocusOutside = 'FocusOutside' 16 | } 17 | 18 | class DemoComponent extends React.Component { 19 | public state = { 20 | clickStatus: ComponentActions.None, 21 | focusStatus: ComponentActions.None 22 | }; 23 | 24 | render() { 25 | return ( 26 | <> 27 | { 29 | this.setState({ clickStatus: ComponentActions.ClickOutside }); 30 | }} 31 | onFocusOutside={() => { 32 | this.setState({ focusStatus: ComponentActions.FocusOutside }); 33 | }} 34 | > 35 |

38 | this.setState({ clickStatus: ComponentActions.ClickInside }) 39 | } 40 | onFocus={() => 41 | this.setState({ focusStatus: ComponentActions.FocusInside }) 42 | } 43 | style={{ backgroundColor: 'hotpink', color: 'white', padding: 40 }} 44 | > 45 | 46 |

47 | Click status:{' '} 48 | 49 | {this.state.clickStatus} 50 | 51 |

52 |

53 | Focus status:{' '} 54 | 55 | {this.state.focusStatus} 56 | 57 |

58 |

59 | 60 |

61 | 62 |

63 | 64 | ); 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /stories/render-prop.stories.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { storiesOf } from '@storybook/react'; 4 | 5 | import Foco from '../src'; 6 | 7 | storiesOf('Render Prop', module) 8 | .add('prop render', () => { 9 | return ( 10 | alert('click out')} 12 | render={wrapperProps => ( 13 |

17 |

18 | Hola! Render prop is provided. Clicks outside would trigger alerts 19 |

20 |

21 | )} 22 | /> 23 | ); 24 | }) 25 | .add('prop children', () => { 26 | return ( 27 | alert('click out')}> 28 | {wrapperProps => ( 29 |

33 |

34 | Hola! Function as children prop is provided. Clicks outside would 35 | trigger alerts 36 |

37 |

38 | )} 39 | 40 | ); 41 | }) 42 | .add('prop component', () => { 43 | return ( 44 | alert('click out')} 46 | component="div" 47 | style={{ border: '1px solid skyblue', textAlign: 'center' }} 48 | > 49 |

50 | Hola! Component prop is provided. Clicks outside would trigger alerts 51 |

52 | 53 | ); 54 | }); 55 | -------------------------------------------------------------------------------- /tests/e2e/ClicksPage.ts: -------------------------------------------------------------------------------- 1 | import { Page } from 'puppeteer'; 2 | import { TestElements } from '../../stories/TestElements'; 3 | 4 | export class ClicksPage { 5 | constructor(private page: Page) {} 6 | 7 | public async open() { 8 | await this.page.goto( 9 | 'http://localhost:6006/iframe.html?selectedKind=Foco&selectedStory=clicks_and_focuses' 10 | ); 11 | } 12 | 13 | public getClicksStatus(): Promise { 14 | return this.page.$eval( 15 | getSelectorByTestID(TestElements.ClickStatusNode), 16 | node => node.textContent 17 | ); 18 | } 19 | 20 | public getFocusStatus(): Promise { 21 | return this.page.$eval( 22 | getSelectorByTestID(TestElements.FocusStatusNode), 23 | node => node.textContent 24 | ); 25 | } 26 | 27 | public clickInside() { 28 | return this.page.click( 29 | `${getSelectorByTestID(TestElements.InnerNode)} button` 30 | ); 31 | } 32 | 33 | public clickOutside() { 34 | return this.page.click( 35 | `${getSelectorByTestID(TestElements.OuterNode)} button` 36 | ); 37 | } 38 | 39 | public focusInside() { 40 | return this.page.focus( 41 | `${getSelectorByTestID(TestElements.InnerNode)} button` 42 | ); 43 | } 44 | 45 | public focusOutside() { 46 | return this.page.focus( 47 | `${getSelectorByTestID(TestElements.OuterNode)} button` 48 | ); 49 | } 50 | } 51 | 52 | function getSelectorByTestID(testID: string) { 53 | return `[data-testID=${testID}]`; 54 | } 55 | -------------------------------------------------------------------------------- /tests/e2e/clicks.test.ts: -------------------------------------------------------------------------------- 1 | import puppeteer, { Browser } from 'puppeteer'; 2 | import { ClicksPage } from './ClicksPage'; 3 | import { ComponentActions } from '../../stories/index.stories'; 4 | 5 | let browser: Browser; 6 | let clicksPage: ClicksPage; 7 | 8 | beforeAll(async () => { 9 | browser = await puppeteer.launch(); 10 | let page = await browser.newPage(); 11 | clicksPage = new ClicksPage(page); 12 | await clicksPage.open(); 13 | }); 14 | 15 | afterAll(async () => { 16 | await browser.close(); 17 | }); 18 | 19 | test('default status', async () => { 20 | expect(await clicksPage.getClicksStatus()).toBe(ComponentActions.None); 21 | }); 22 | 23 | test('click outside', async () => { 24 | await clicksPage.clickOutside(); 25 | expect(await clicksPage.getClicksStatus()).toBe( 26 | ComponentActions.ClickOutside 27 | ); 28 | }); 29 | 30 | test('click inside', async () => { 31 | await clicksPage.clickInside(); 32 | expect(await clicksPage.getClicksStatus()).toBe(ComponentActions.ClickInside); 33 | }); 34 | 35 | test('focus outside', async () => { 36 | await clicksPage.focusOutside(); 37 | expect(await clicksPage.getFocusStatus()).toBe(ComponentActions.FocusOutside); 38 | }); 39 | 40 | test('focus inside', async () => { 41 | await clicksPage.focusInside(); 42 | expect(await clicksPage.getFocusStatus()).toBe(ComponentActions.FocusInside); 43 | }); 44 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "lib": ["dom", "es2015"], 6 | "jsx": "react", 7 | "declaration": true, 8 | "outDir": "./lib", 9 | "strict": true, 10 | "esModuleInterop": true 11 | }, 12 | "include": ["./src"] 13 | } 14 | --------------------------------------------------------------------------------