1 | import ensureFile from './ensure-file.js'
|
2 | import path from 'path'
|
3 |
|
4 | let USE_IS_HOVERED = `// This file is automatically generated by Views and will be overwritten
|
5 | // when the morpher runs. If you want to contribute to how it's generated, eg,
|
6 | // improving the algorithms inside, etc, see this:
|
7 | // https://github.com/viewstools/morph/blob/master/ensure-is-hovered.js
|
8 | import { useEffect, useMemo, useState } from 'react'
|
9 |
|
10 | // TODO replace with something more performant like:
|
11 | // https://github.com/therealparmesh/use-hovering/blob/master/src/index.js
|
12 | // or useTooltip from Reach UI
|
13 | // https://github.com/reach/reach-ui/blob/master/packages/tooltip/src/index.tsx
|
14 | export default function useIsHovered({ isDisabled, isSelected, onMouseEnter, onMouseLeave }) {
|
15 | let [isHovered, setIsHovered] = useState(false)
|
16 |
|
17 | let isHoveredBind = useMemo(() => {
|
18 | return {
|
19 | onMouseEnter: event => {
|
20 | setIsHovered(true)
|
21 |
|
22 | if (typeof onMouseEnter === 'function') {
|
23 | onMouseEnter(event)
|
24 | }
|
25 | },
|
26 | onMouseLeave: event => {
|
27 | setIsHovered(false)
|
28 |
|
29 | if (typeof onMouseLeave === 'function') {
|
30 | onMouseLeave(event)
|
31 | }
|
32 | },
|
33 | }
|
34 | }, [onMouseEnter, onMouseLeave])
|
35 |
|
36 | useEffect(() => {
|
37 | if (!isDisabled) return
|
38 |
|
39 | setIsHovered(false)
|
40 | }, [isDisabled])
|
41 |
|
42 | return [isHovered, isHovered && isSelected, isHoveredBind]
|
43 | }`
|
44 |
|
45 | export default function ensureIsHovered({ src }) {
|
46 | return ensureFile({
|
47 | file: path.join(src, 'Logic', 'useIsHovered.js'),
|
48 | content: USE_IS_HOVERED,
|
49 | })
|
50 | }
|