@clayui/tooltip 3.104.0 → 3.105.1-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/Tooltip.d.ts +0 -0
- package/lib/Tooltip.js.map +1 -0
- package/lib/TooltipProvider.d.ts +0 -0
- package/lib/TooltipProvider.js.map +1 -0
- package/lib/index.d.ts +0 -0
- package/lib/index.js.map +1 -0
- package/lib/useAlign.d.ts +0 -0
- package/lib/useAlign.js.map +1 -0
- package/lib/useClosestTitle.d.ts +0 -0
- package/lib/useClosestTitle.js.map +1 -0
- package/lib/useTooltipState.d.ts +0 -0
- package/lib/useTooltipState.js.map +1 -0
- package/package.json +4 -5
- package/src/Tooltip.tsx +0 -65
- package/src/TooltipProvider.tsx +0 -331
- package/src/__tests__/__snapshots__/index.tsx.snap +0 -19
- package/src/__tests__/index.tsx +0 -80
- package/src/index.tsx +0 -11
- package/src/useAlign.ts +0 -144
- package/src/useClosestTitle.ts +0 -187
- package/src/useTooltipState.ts +0 -43
package/lib/Tooltip.d.ts
CHANGED
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.js","names":["_classnames","_interopRequireDefault","require","_react","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ALIGN_POSITIONS","exports","ClayTooltip","React","forwardRef","_ref","ref","_ref$alignPosition","alignPosition","children","className","show","otherProps","createElement","classNames","concat","role","displayName","_default"],"sources":["../src/Tooltip.tsx"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport classNames from 'classnames';\nimport React from 'react';\n\nexport const ALIGN_POSITIONS = [\n\t'top',\n\t'top-left',\n\t'top-right',\n\t'bottom',\n\t'bottom-left',\n\t'bottom-right',\n\t'left',\n\t'right',\n] as const;\n\ninterface IProps extends React.HTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Position in which the tooltip will be aligned to the element.\n\t */\n\talignPosition?: typeof ALIGN_POSITIONS[number];\n\n\t/**\n\t * Flag to indicate if tooltip is displayed.\n\t */\n\tshow?: boolean;\n}\n\nconst ClayTooltip = React.forwardRef<HTMLElement, IProps>(\n\t(\n\t\t{\n\t\t\talignPosition = 'bottom',\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tshow,\n\t\t\t...otherProps\n\t\t}: IProps,\n\t\tref\n\t) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\tclassName,\n\t\t\t\t\t'tooltip',\n\t\t\t\t\t`clay-tooltip-${alignPosition}`,\n\t\t\t\t\t{show}\n\t\t\t\t)}\n\t\t\t\trole=\"tooltip\"\n\t\t\t\t{...otherProps}\n\t\t\t\tref={ref as React.RefObject<HTMLDivElement>}\n\t\t\t>\n\t\t\t\t<div className=\"arrow\" />\n\n\t\t\t\t<div className=\"tooltip-inner\">{children}</div>\n\t\t\t</div>\n\t\t);\n\t}\n);\n\nClayTooltip.displayName = 'ClayTooltip';\n\nexport default ClayTooltip;\n"],"mappings":"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"}
|
package/lib/TooltipProvider.d.ts
CHANGED
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TooltipProvider.js","names":["_shared","require","_react","_interopRequireWildcard","_warning","_interopRequireDefault","_Tooltip","_useAlign","_useClosestTitle2","_useTooltipState2","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","r","l","t","Symbol","iterator","e","u","a","f","next","done","push","value","return","isArray","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","apply","_objectSpread","arguments","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","toPrimitive","undefined","res","Number","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","initialState","align","floating","setAsHTML","title","TRIGGER_HIDE_EVENTS","TRIGGER_SHOW_EVENTS","reducer","state","_ref","type","payload","TooltipProvider","_ref2","_ref2$autoAlign","autoAlign","children","_ref2$containerProps","containerProps","_ref2$contentRenderer","contentRenderer","props","_ref2$delay","delay","scope","_useReducer","useReducer","_useReducer2","_useReducer2$","_useReducer2$$title","dispatch","tooltipRef","useRef","_useInteractionFocus","useInteractionFocus","getInteraction","isFocusVisible","isHovered","isFocused","_useTooltipState","useTooltipState","close","isOpen","open","_useClosestTitle","useClosestTitle","onClick","useCallback","current","onHide","getProps","titleNode","useAlign","onAlign","sourceElement","targetElement","onShow","event","_ref3","useEffect","handleEsc","Keys","Esc","stopImmediatePropagation","document","addEventListener","removeEventListener","onHoverStart","onHoverEnd","onFocus","onBlur","disposeShowEvents","map","eventName","delegate","body","disposeHideEvents","concat","disposeShowFocus","disposeCloseBlur","_ref4","dispose","_ref5","warning","React","Fragment","titleContent","targetNode","tooltip","createElement","ClayPortal","alignPosition","ref","show","dangerouslySetInnerHTML","__html","cloneElement","onMouseOut","onMouseOver","_default","exports"],"sources":["../src/TooltipProvider.tsx"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {\n\tClayPortal,\n\tIPortalBaseProps,\n\tKeys,\n\tdelegate,\n\tuseInteractionFocus,\n} from '@clayui/shared';\nimport React, {useCallback, useEffect, useReducer, useRef} from 'react';\nimport warning from 'warning';\n\nimport ClayTooltip from './Tooltip';\nimport {Align, useAlign} from './useAlign';\nimport {useClosestTitle} from './useClosestTitle';\nimport {useTooltipState} from './useTooltipState';\n\ninterface IState {\n\talign: Align;\n\tfloating: boolean;\n\tsetAsHTML?: boolean;\n\ttitle?: string;\n}\n\nconst initialState: IState = {\n\talign: 'top',\n\tfloating: false,\n\tsetAsHTML: false,\n\ttitle: '',\n};\n\nconst TRIGGER_HIDE_EVENTS = [\n\t'dragstart',\n\t'mouseout',\n\t'mouseup',\n\t'pointerup',\n\t'touchend',\n] as const;\n\nconst TRIGGER_SHOW_EVENTS = [\n\t'mouseover',\n\t'mouseup',\n\t'pointerdown',\n\t'touchstart',\n] as const;\n\ninterface IAction extends Partial<IState> {\n\ttype: 'reset' | 'update';\n}\n\nconst reducer = (state: IState, {type, ...payload}: IAction): IState => {\n\tswitch (type) {\n\t\tcase 'update':\n\t\t\treturn {...state, ...payload};\n\t\tcase 'reset':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\talign: initialState.align,\n\t\t\t\tfloating: false,\n\t\t\t};\n\t\tdefault:\n\t\t\tthrow new TypeError();\n\t}\n};\n\ntype TContentRenderer = (props: {\n\ttargetNode?: HTMLElement | null;\n\ttitle: string;\n}) => React.ReactElement | React.ReactNode;\n\ninterface IPropsBase {\n\t/**\n\t * Flag to indicate if tooltip should automatically align based on the window\n\t */\n\tautoAlign?: boolean;\n\n\t/**\n\t * Props to add to the <ClayPortal/>.\n\t */\n\tcontainerProps?: IPortalBaseProps;\n\n\t/**\n\t * Custom function for rendering the contents of the tooltip\n\t */\n\tcontentRenderer?: TContentRenderer;\n\n\t/**\n\t * Delay in miliseconds before showing tooltip\n\t */\n\tdelay?: number;\n}\n\ninterface IPropsWithChildren extends IPropsBase {\n\tchildren: React.ReactElement;\n\tscope?: never;\n}\n\ninterface IPropsWithScope extends IPropsBase {\n\tchildren?: never;\n\n\t/**\n\t * CSS selector to scope provider to. All titles within this scope will be\n\t * rendered in the tooltip. Titles outside of this scope will be styled\n\t * as with the default browser.\n\t */\n\tscope: string;\n}\n\nconst TooltipProvider = ({\n\tautoAlign = true,\n\tchildren,\n\tcontainerProps = {},\n\tcontentRenderer = (props) => props.title,\n\tdelay = 600,\n\tscope,\n}: IPropsWithChildren | IPropsWithScope) => {\n\tconst [{align, floating, setAsHTML, title = ''}, dispatch] = useReducer(\n\t\treducer,\n\t\tinitialState\n\t);\n\n\tconst tooltipRef = useRef<HTMLElement>(null);\n\n\tconst {getInteraction, isFocusVisible} = useInteractionFocus();\n\n\tconst isHovered = useRef(false);\n\tconst isFocused = useRef(false);\n\n\tconst {close, isOpen, open} = useTooltipState({delay});\n\n\tconst {getProps, onHide, target, titleNode} = useClosestTitle({\n\t\tonClick: useCallback(() => {\n\t\t\tisFocused.current = false;\n\t\t\tisHovered.current = false;\n\t\t}, []),\n\t\tonHide: useCallback(() => {\n\t\t\tif (!isHovered.current && !isFocused.current) {\n\t\t\t\tdispatch({type: 'reset'});\n\t\t\t\tclose();\n\t\t\t}\n\t\t}, []),\n\t\ttooltipRef,\n\t});\n\n\tuseAlign({\n\t\talign,\n\t\tautoAlign,\n\t\tfloating,\n\t\tisOpen,\n\t\tonAlign: useCallback((align) => dispatch({align, type: 'update'}), []),\n\t\tsourceElement: tooltipRef,\n\t\ttargetElement: titleNode,\n\t\ttitle,\n\t});\n\n\tconst onShow = useCallback(\n\t\t(event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n\t\t\tif (isHovered.current || isFocused.current) {\n\t\t\t\tconst props = getProps(event, isHovered.current);\n\n\t\t\t\tif (props) {\n\t\t\t\t\tdispatch({\n\t\t\t\t\t\talign: (props.align as any) ?? align,\n\t\t\t\t\t\tfloating: props.floating,\n\t\t\t\t\t\tsetAsHTML: props.setAsHTML,\n\t\t\t\t\t\ttitle: props.title,\n\t\t\t\t\t\ttype: 'update',\n\t\t\t\t\t});\n\t\t\t\t\topen(\n\t\t\t\t\t\tisFocused.current,\n\t\t\t\t\t\tprops.delay ? Number(props.delay) : undefined\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[align]\n\t);\n\n\tuseEffect(() => {\n\t\tconst handleEsc = (event: KeyboardEvent) => {\n\t\t\tif (isOpen && event.key === Keys.Esc) {\n\t\t\t\tevent.stopImmediatePropagation();\n\n\t\t\t\tonHide();\n\t\t\t}\n\t\t};\n\n\t\tdocument.addEventListener('keyup', handleEsc, true);\n\n\t\treturn () => document.removeEventListener('keyup', handleEsc, true);\n\t}, [isOpen]);\n\n\tconst onHoverStart = (event: any) => {\n\t\tif (getInteraction() === 'pointer') {\n\t\t\tisHovered.current = true;\n\t\t} else {\n\t\t\tisHovered.current = false;\n\t\t}\n\n\t\tonShow(event);\n\t};\n\n\tconst onHoverEnd = (event: any) => {\n\t\tisFocused.current = false;\n\t\tisHovered.current = false;\n\n\t\tonHide(event);\n\t};\n\n\tconst onFocus = (event: any) => {\n\t\tif (isFocusVisible()) {\n\t\t\tisFocused.current = true;\n\n\t\t\tonShow(event);\n\t\t}\n\t};\n\n\tconst onBlur = (event: any) => {\n\t\tisFocused.current = false;\n\t\tisHovered.current = false;\n\n\t\tonHide(event);\n\t};\n\n\tuseEffect(() => {\n\t\tif (scope) {\n\t\t\tconst disposeShowEvents = TRIGGER_SHOW_EVENTS.map((eventName) =>\n\t\t\t\tdelegate(document.body, eventName, scope, onHoverStart)\n\t\t\t);\n\t\t\tconst disposeHideEvents = TRIGGER_HIDE_EVENTS.map((eventName) =>\n\t\t\t\tdelegate(\n\t\t\t\t\tdocument.body,\n\t\t\t\t\teventName,\n\t\t\t\t\t`${scope}, .tooltip`,\n\t\t\t\t\tonHoverEnd\n\t\t\t\t)\n\t\t\t);\n\n\t\t\tconst disposeShowFocus = delegate(\n\t\t\t\tdocument.body,\n\t\t\t\t'focus',\n\t\t\t\t`${scope}, .tooltip`,\n\t\t\t\tonFocus,\n\t\t\t\ttrue\n\t\t\t);\n\t\t\tconst disposeCloseBlur = delegate(\n\t\t\t\tdocument.body,\n\t\t\t\t'blur',\n\t\t\t\t`${scope}, .tooltip`,\n\t\t\t\tonBlur,\n\t\t\t\ttrue\n\t\t\t);\n\n\t\t\treturn () => {\n\t\t\t\tdisposeShowEvents.forEach(({dispose}) => dispose());\n\t\t\t\tdisposeHideEvents.forEach(({dispose}) => dispose());\n\n\t\t\t\tdisposeShowFocus.dispose();\n\t\t\t\tdisposeCloseBlur.dispose();\n\t\t\t};\n\t\t}\n\t}, [onShow]);\n\n\twarning(\n\t\t(typeof children === 'undefined' && typeof scope !== 'undefined') ||\n\t\t\t(typeof scope === 'undefined' && typeof children !== 'undefined'),\n\t\t'<TooltipProvider />: You must use at least one of the following props: `children` or `scope`.'\n\t);\n\n\twarning(\n\t\ttypeof children !== 'undefined' || typeof scope !== 'undefined',\n\t\t'<TooltipProvider />: If you want to use `scope`, use <TooltipProvider /> as a singleton and do not pass `children`.'\n\t);\n\n\twarning(\n\t\tchildren?.type !== React.Fragment,\n\t\t'<TooltipProvider />: React Fragment is not allowed as a child to TooltipProvider. Child must be a single HTML element that accepts `onMouseOver` and `onMouseOut`.'\n\t);\n\n\tconst titleContent = contentRenderer({\n\t\ttargetNode: target.current,\n\t\ttitle,\n\t});\n\n\tconst tooltip = isOpen && (\n\t\t<ClayPortal {...containerProps}>\n\t\t\t<ClayTooltip alignPosition={align} ref={tooltipRef} show>\n\t\t\t\t{setAsHTML && typeof titleContent === 'string' ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t__html: titleContent,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\ttitleContent\n\t\t\t\t)}\n\t\t\t</ClayTooltip>\n\t\t</ClayPortal>\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{scope ? (\n\t\t\t\t<>\n\t\t\t\t\t{tooltip}\n\t\t\t\t\t{children}\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\tchildren &&\n\t\t\t\tReact.cloneElement(children, {\n\t\t\t\t\t...children.props,\n\t\t\t\t\tchildren: (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{children.props.children}\n\t\t\t\t\t\t\t{tooltip}\n\t\t\t\t\t\t</>\n\t\t\t\t\t),\n\t\t\t\t\tonBlur,\n\t\t\t\t\tonFocus,\n\t\t\t\t\tonMouseOut: onHoverEnd,\n\t\t\t\t\tonMouseOver: onHoverStart,\n\t\t\t\t})\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nexport default TooltipProvider;\n"],"mappings":"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"}
|
package/lib/index.d.ts
CHANGED
|
File without changes
|
package/lib/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["_Tooltip","_interopRequireDefault","require","_TooltipProvider","obj","__esModule","default","_default","ClayTooltip","exports"],"sources":["../src/index.tsx"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport ClayTooltip from './Tooltip';\nimport ClayTooltipProvider from './TooltipProvider';\n\nexport {ClayTooltipProvider};\n\nexport default ClayTooltip;\n"],"mappings":";;;;;;;;;;;;AAKA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAF,sBAAA,CAAAC,OAAA;AAAoD,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AANpD;AACA;AACA;AACA;AAHA,IAAAG,QAAA,GAUeC,gBAAW;AAAAC,OAAA,CAAAH,OAAA,GAAAC,QAAA"}
|
package/lib/useAlign.d.ts
CHANGED
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useAlign.js","names":["_shared","require","_domAlign","_react","_typeof","o","Symbol","iterator","constructor","prototype","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","minLen","_arrayLikeToArray","n","Object","toString","call","slice","name","Array","from","test","len","length","arr2","r","l","t","e","u","a","f","next","done","push","value","return","isArray","ownKeys","keys","getOwnPropertySymbols","filter","getOwnPropertyDescriptor","enumerable","apply","_objectSpread","arguments","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","obj","key","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","toPrimitive","undefined","res","Number","ALIGNMENTS","ALIGNMENTS_MAP","bottom","left","right","top","ALIGNMENTS_INVERSE_MAP","bctc","bltl","brtr","clcr","crcl","tcbc","tlbl","trbr","BOTTOM_OFFSET","LEFT_OFFSET","RIGHT_OFFSET","TOP_OFFSET","OFFSET_MAP","ALIGNMENTS_FORCE_MAP","useAlign","_ref","align","autoAlign","floating","isOpen","onAlign","sourceElement","targetElement","title","mousePosition","useMousePosition","useEffect","current","points","_mousePosition","clientX","clientY","alignPoint","offset","join","alignment","doAlign","overflow","adjustX","adjustY","alignmentString","pointsString"],"sources":["../src/useAlign.ts"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {doAlign, useMousePosition} from '@clayui/shared';\nimport {alignPoint} from 'dom-align';\nimport React, {useEffect} from 'react';\n\nconst ALIGNMENTS = [\n\t'top',\n\t'top-right',\n\t'right',\n\t'bottom-right',\n\t'bottom',\n\t'bottom-left',\n\t'left',\n\t'top-left',\n] as const;\n\nconst ALIGNMENTS_MAP = {\n\tbottom: ['tc', 'bc'],\n\t'bottom-left': ['tl', 'bl'],\n\t'bottom-right': ['tr', 'br'],\n\tleft: ['cr', 'cl'],\n\tright: ['cl', 'cr'],\n\ttop: ['bc', 'tc'],\n\t'top-left': ['bl', 'tl'],\n\t'top-right': ['br', 'tr'],\n} as const;\n\nconst ALIGNMENTS_INVERSE_MAP = {\n\tbctc: 'top',\n\tbltl: 'top-left',\n\tbrtr: 'top-right',\n\tclcr: 'right',\n\tcrcl: 'left',\n\ttcbc: 'bottom',\n\ttlbl: 'bottom-left',\n\ttrbr: 'bottom-right',\n} as const;\n\nconst BOTTOM_OFFSET = [0, 7] as const;\nconst LEFT_OFFSET = [-7, 0] as const;\nconst RIGHT_OFFSET = [7, 0] as const;\nconst TOP_OFFSET = [0, -7] as const;\n\nconst OFFSET_MAP = {\n\tbctc: TOP_OFFSET,\n\tbltl: TOP_OFFSET,\n\tbrtr: TOP_OFFSET,\n\tclcr: RIGHT_OFFSET,\n\tcrcl: LEFT_OFFSET,\n\ttcbc: BOTTOM_OFFSET,\n\ttlbl: BOTTOM_OFFSET,\n\ttrbr: BOTTOM_OFFSET,\n};\n\nconst ALIGNMENTS_FORCE_MAP = {\n\t...ALIGNMENTS_INVERSE_MAP,\n\tbctc: 'top-left',\n\ttcbc: 'bottom-left',\n} as const;\n\nexport type Align = typeof ALIGNMENTS[number];\n\ntype Props = {\n\talign: Align;\n\tautoAlign: boolean;\n\tfloating: boolean;\n\tisOpen: boolean;\n\tonAlign: (align: Align) => void;\n\tsourceElement: React.MutableRefObject<HTMLElement | null>;\n\ttargetElement: React.MutableRefObject<HTMLElement | null>;\n\ttitle: string;\n};\n\nexport function useAlign({\n\talign,\n\tautoAlign,\n\tfloating,\n\tisOpen,\n\tonAlign,\n\tsourceElement,\n\ttargetElement,\n\ttitle,\n}: Props) {\n\tconst mousePosition = useMousePosition(20);\n\n\tuseEffect(() => {\n\t\tif (sourceElement.current && isOpen && floating) {\n\t\t\tconst points = ALIGNMENTS_MAP[align || 'top'] as [string, string];\n\n\t\t\tconst [clientX, clientY] = mousePosition;\n\n\t\t\talignPoint(\n\t\t\t\tsourceElement.current,\n\t\t\t\t{\n\t\t\t\t\tclientX,\n\t\t\t\t\tclientY,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\toffset: OFFSET_MAP[\n\t\t\t\t\t\tpoints.join('') as keyof typeof OFFSET_MAP\n\t\t\t\t\t] as [number, number],\n\t\t\t\t\tpoints,\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t}, [isOpen, floating]);\n\n\tuseEffect(() => {\n\t\tif (\n\t\t\ttargetElement.current &&\n\t\t\tsourceElement.current &&\n\t\t\tisOpen &&\n\t\t\t!floating\n\t\t) {\n\t\t\tconst points = ALIGNMENTS_MAP[align || 'top'] as [string, string];\n\n\t\t\tconst alignment = doAlign({\n\t\t\t\toverflow: {\n\t\t\t\t\tadjustX: autoAlign,\n\t\t\t\t\tadjustY: autoAlign,\n\t\t\t\t},\n\t\t\t\tpoints,\n\t\t\t\tsourceElement: sourceElement.current,\n\t\t\t\ttargetElement: targetElement.current,\n\t\t\t});\n\n\t\t\tconst alignmentString = alignment.points.join(\n\t\t\t\t''\n\t\t\t) as keyof typeof ALIGNMENTS_INVERSE_MAP;\n\n\t\t\tconst pointsString = points.join('');\n\n\t\t\tif (alignment.overflow.adjustX) {\n\t\t\t\tonAlign(ALIGNMENTS_FORCE_MAP[alignmentString]);\n\t\t\t} else if (pointsString !== alignmentString) {\n\t\t\t\tonAlign(ALIGNMENTS_INVERSE_MAP[alignmentString]);\n\t\t\t}\n\t\t}\n\t}, [align, title, isOpen]);\n}\n"],"mappings":"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"}
|
package/lib/useClosestTitle.d.ts
CHANGED
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useClosestTitle.js","names":["_react","require","matches","element","selectorString","msMatchesSelector","webkitMatchesSelector","closestAncestor","node","s","ancestor","document","documentElement","contains","parentElement","useClosestTitle","props","targetRef","useRef","titleNodeRef","saveTitle","useCallback","title","getAttribute","setAttribute","removeAttribute","tagName","titleTag","querySelector","innerHTML","remove","hasParentTitle","closest","restoreTitle","createElement","appendChild","onClick","event","onHide","_event$relatedTarget","_props$tooltipRef$cur","_targetRef$current","relatedTarget","tooltipRef","current","removeEventListener","getProps","hideBrowserTitle","target","hasTitle","hasAttribute","addEventListener","align","delay","floating","Boolean","setAsHTML","titleNode"],"sources":["../src/useClosestTitle.ts"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport React, {useCallback, useRef} from 'react';\n\nfunction matches(\n\telement: HTMLElement & {\n\t\tmsMatchesSelector?: HTMLElement['matches'];\n\t},\n\tselectorString: string\n) {\n\tif (element.matches) {\n\t\treturn element.matches(selectorString);\n\t} else if (element.msMatchesSelector) {\n\t\treturn element.msMatchesSelector(selectorString);\n\t} else if (element.webkitMatchesSelector) {\n\t\treturn element.webkitMatchesSelector(selectorString);\n\t} else {\n\t\treturn false;\n\t}\n}\n\nfunction closestAncestor(node: HTMLElement, s: string) {\n\tconst element = node;\n\tlet ancestor: HTMLElement | null = node;\n\n\tif (!document.documentElement.contains(element)) {\n\t\treturn null;\n\t}\n\n\tdo {\n\t\tif (matches(ancestor, s)) {\n\t\t\treturn ancestor;\n\t\t}\n\n\t\tancestor = ancestor.parentElement;\n\t} while (ancestor !== null);\n\n\treturn null;\n}\n\ntype Props = {\n\tonHide: () => void;\n\tonClick: () => void;\n\ttooltipRef: React.MutableRefObject<HTMLElement | null>;\n};\n\nexport function useClosestTitle(props: Props) {\n\tconst targetRef = useRef<HTMLElement | null>(null);\n\tconst titleNodeRef = useRef<HTMLElement | null>(null);\n\n\tconst saveTitle = useCallback((element: HTMLElement) => {\n\t\tconst title = element.getAttribute('title');\n\n\t\tif (title) {\n\t\t\telement.setAttribute('data-restore-title', title);\n\t\t\telement.removeAttribute('title');\n\t\t} else if (element.tagName === 'svg') {\n\t\t\tconst titleTag = element.querySelector('title');\n\n\t\t\tif (titleTag) {\n\t\t\t\telement.setAttribute('data-restore-title', titleTag.innerHTML);\n\n\t\t\t\ttitleTag.remove();\n\t\t\t}\n\t\t}\n\n\t\tconst hasParentTitle = element.closest<HTMLElement>('[title]');\n\n\t\tif (hasParentTitle) {\n\t\t\tsaveTitle(hasParentTitle);\n\t\t}\n\t}, []);\n\n\tconst restoreTitle = useCallback((element: HTMLElement) => {\n\t\tconst title = element.getAttribute('data-restore-title');\n\n\t\tif (title) {\n\t\t\tif (element.tagName === 'svg') {\n\t\t\t\tconst titleTag = document.createElement('title');\n\n\t\t\t\ttitleTag.innerHTML = title;\n\n\t\t\t\telement.appendChild(titleTag);\n\t\t\t} else {\n\t\t\t\telement.setAttribute('title', title);\n\t\t\t}\n\n\t\t\telement.removeAttribute('data-restore-title');\n\t\t}\n\n\t\tconst hasParentTitle = element.closest<HTMLElement>(\n\t\t\t'[data-restore-title]'\n\t\t);\n\n\t\tif (hasParentTitle) {\n\t\t\trestoreTitle(hasParentTitle);\n\t\t}\n\t}, []);\n\n\tconst onClick = useCallback((event?: any) => {\n\t\tprops.onClick();\n\t\t// eslint-disable-next-line @typescript-eslint/no-use-before-define\n\t\tonHide(event);\n\t}, []);\n\n\tconst onHide = useCallback((event?: any) => {\n\t\tif (\n\t\t\tevent &&\n\t\t\t!event.relatedTarget?.getAttribute('title') &&\n\t\t\t(props.tooltipRef.current?.contains(event.relatedTarget) ||\n\t\t\t\ttargetRef.current?.contains(event.relatedTarget))\n\t\t) {\n\t\t\treturn null;\n\t\t}\n\n\t\tprops.onHide();\n\n\t\tif (titleNodeRef.current) {\n\t\t\trestoreTitle(titleNodeRef.current);\n\t\t\ttitleNodeRef.current = null;\n\t\t}\n\n\t\tif (targetRef.current) {\n\t\t\ttargetRef.current.removeEventListener('click', onClick);\n\t\t\ttargetRef.current = null;\n\t\t}\n\t}, []);\n\n\tconst getProps = useCallback(\n\t\t(\n\t\t\tevent: React.MouseEvent<HTMLElement, MouseEvent>,\n\t\t\thideBrowserTitle: boolean\n\t\t) => {\n\t\t\tif (targetRef.current) {\n\t\t\t\tprops.onClick();\n\n\t\t\t\tif (onHide(event) === null) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst target = event.target as HTMLElement;\n\n\t\t\tconst hasTitle =\n\t\t\t\ttarget &&\n\t\t\t\t(target.hasAttribute('[title]') ||\n\t\t\t\t\ttarget.hasAttribute('[data-title]'));\n\n\t\t\tconst node = hasTitle\n\t\t\t\t? target\n\t\t\t\t: closestAncestor(target, '[title], [data-title]');\n\n\t\t\tif (node) {\n\t\t\t\ttargetRef.current = target;\n\n\t\t\t\ttarget.addEventListener('click', onClick);\n\n\t\t\t\tconst title =\n\t\t\t\t\tnode.getAttribute('title') ||\n\t\t\t\t\tnode.getAttribute('data-title') ||\n\t\t\t\t\t'';\n\n\t\t\t\ttitleNodeRef.current = node;\n\n\t\t\t\tif (hideBrowserTitle) {\n\t\t\t\t\tsaveTitle(node);\n\t\t\t\t}\n\n\t\t\t\treturn {\n\t\t\t\t\talign: node.getAttribute('data-tooltip-align'),\n\t\t\t\t\tdelay: node.getAttribute('data-tooltip-delay'),\n\t\t\t\t\tfloating: Boolean(\n\t\t\t\t\t\tnode.getAttribute('data-tooltip-floating')\n\t\t\t\t\t),\n\t\t\t\t\tsetAsHTML: !!node.getAttribute('data-title-set-as-html'),\n\t\t\t\t\ttitle,\n\t\t\t\t};\n\t\t\t}\n\t\t},\n\t\t[]\n\t);\n\n\treturn {getProps, onHide, target: targetRef, titleNode: titleNodeRef};\n}\n"],"mappings":"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"}
|
package/lib/useTooltipState.d.ts
CHANGED
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTooltipState.js","names":["_react","require","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","Object","prototype","toString","call","slice","constructor","name","Array","from","test","len","length","arr2","r","l","t","Symbol","iterator","e","u","a","f","next","done","push","value","return","isArray","useTooltipState","_ref","_ref$delay","delay","_useState","useState","_useState2","isOpen","setOpen","timeoutIdRef","useRef","open","useCallback","immediate","customDelay","clearTimeout","current","setTimeout","undefined","close"],"sources":["../src/useTooltipState.ts"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {useCallback, useRef, useState} from 'react';\n\ntype Props = {\n\tdelay?: number;\n};\n\nexport function useTooltipState({delay = 600}: Props) {\n\tconst [isOpen, setOpen] = useState(false);\n\n\tconst timeoutIdRef = useRef<any>();\n\n\tconst open = useCallback((immediate: boolean, customDelay?: number) => {\n\t\tif (!immediate) {\n\t\t\tclearTimeout(timeoutIdRef.current);\n\n\t\t\ttimeoutIdRef.current = setTimeout(\n\t\t\t\t() => {\n\t\t\t\t\tsetOpen(true);\n\t\t\t\t},\n\t\t\t\tcustomDelay !== undefined ? customDelay : delay\n\t\t\t);\n\t\t} else {\n\t\t\tsetOpen(true);\n\t\t}\n\t}, []);\n\n\tconst close = useCallback(() => {\n\t\tclearTimeout(timeoutIdRef.current);\n\n\t\tsetOpen(false);\n\t}, []);\n\n\treturn {\n\t\tclose,\n\t\tisOpen,\n\t\topen,\n\t};\n}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clayui/tooltip",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.105.1-alpha.0",
|
|
4
4
|
"description": "ClayTooltip component",
|
|
5
5
|
"license": "BSD-3-Clause",
|
|
6
6
|
"repository": "https://github.com/liferay/clay",
|
|
@@ -12,8 +12,7 @@
|
|
|
12
12
|
"types": "lib/index.d.ts",
|
|
13
13
|
"ts:main": "src/index.tsx",
|
|
14
14
|
"files": [
|
|
15
|
-
"lib"
|
|
16
|
-
"src"
|
|
15
|
+
"lib"
|
|
17
16
|
],
|
|
18
17
|
"scripts": {
|
|
19
18
|
"build": "cross-env NODE_ENV=production babel src --root-mode upward --out-dir lib --extensions .ts,.tsx",
|
|
@@ -26,7 +25,7 @@
|
|
|
26
25
|
"react"
|
|
27
26
|
],
|
|
28
27
|
"dependencies": {
|
|
29
|
-
"@clayui/shared": "^3.
|
|
28
|
+
"@clayui/shared": "^3.105.1-alpha.0",
|
|
30
29
|
"classnames": "^2.2.6",
|
|
31
30
|
"dom-align": "^1.12.2",
|
|
32
31
|
"warning": "^4.0.3"
|
|
@@ -39,5 +38,5 @@
|
|
|
39
38
|
"browserslist": [
|
|
40
39
|
"extends browserslist-config-clay"
|
|
41
40
|
],
|
|
42
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "0a2003a935bf5c37ffc4c07618552bbebabe13b9"
|
|
43
42
|
}
|
package/src/Tooltip.tsx
DELETED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
3
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import classNames from 'classnames';
|
|
7
|
-
import React from 'react';
|
|
8
|
-
|
|
9
|
-
export const ALIGN_POSITIONS = [
|
|
10
|
-
'top',
|
|
11
|
-
'top-left',
|
|
12
|
-
'top-right',
|
|
13
|
-
'bottom',
|
|
14
|
-
'bottom-left',
|
|
15
|
-
'bottom-right',
|
|
16
|
-
'left',
|
|
17
|
-
'right',
|
|
18
|
-
] as const;
|
|
19
|
-
|
|
20
|
-
interface IProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
21
|
-
/**
|
|
22
|
-
* Position in which the tooltip will be aligned to the element.
|
|
23
|
-
*/
|
|
24
|
-
alignPosition?: typeof ALIGN_POSITIONS[number];
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* Flag to indicate if tooltip is displayed.
|
|
28
|
-
*/
|
|
29
|
-
show?: boolean;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
const ClayTooltip = React.forwardRef<HTMLElement, IProps>(
|
|
33
|
-
(
|
|
34
|
-
{
|
|
35
|
-
alignPosition = 'bottom',
|
|
36
|
-
children,
|
|
37
|
-
className,
|
|
38
|
-
show,
|
|
39
|
-
...otherProps
|
|
40
|
-
}: IProps,
|
|
41
|
-
ref
|
|
42
|
-
) => {
|
|
43
|
-
return (
|
|
44
|
-
<div
|
|
45
|
-
className={classNames(
|
|
46
|
-
className,
|
|
47
|
-
'tooltip',
|
|
48
|
-
`clay-tooltip-${alignPosition}`,
|
|
49
|
-
{show}
|
|
50
|
-
)}
|
|
51
|
-
role="tooltip"
|
|
52
|
-
{...otherProps}
|
|
53
|
-
ref={ref as React.RefObject<HTMLDivElement>}
|
|
54
|
-
>
|
|
55
|
-
<div className="arrow" />
|
|
56
|
-
|
|
57
|
-
<div className="tooltip-inner">{children}</div>
|
|
58
|
-
</div>
|
|
59
|
-
);
|
|
60
|
-
}
|
|
61
|
-
);
|
|
62
|
-
|
|
63
|
-
ClayTooltip.displayName = 'ClayTooltip';
|
|
64
|
-
|
|
65
|
-
export default ClayTooltip;
|
package/src/TooltipProvider.tsx
DELETED
|
@@ -1,331 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
3
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import {
|
|
7
|
-
ClayPortal,
|
|
8
|
-
IPortalBaseProps,
|
|
9
|
-
Keys,
|
|
10
|
-
delegate,
|
|
11
|
-
useInteractionFocus,
|
|
12
|
-
} from '@clayui/shared';
|
|
13
|
-
import React, {useCallback, useEffect, useReducer, useRef} from 'react';
|
|
14
|
-
import warning from 'warning';
|
|
15
|
-
|
|
16
|
-
import ClayTooltip from './Tooltip';
|
|
17
|
-
import {Align, useAlign} from './useAlign';
|
|
18
|
-
import {useClosestTitle} from './useClosestTitle';
|
|
19
|
-
import {useTooltipState} from './useTooltipState';
|
|
20
|
-
|
|
21
|
-
interface IState {
|
|
22
|
-
align: Align;
|
|
23
|
-
floating: boolean;
|
|
24
|
-
setAsHTML?: boolean;
|
|
25
|
-
title?: string;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
const initialState: IState = {
|
|
29
|
-
align: 'top',
|
|
30
|
-
floating: false,
|
|
31
|
-
setAsHTML: false,
|
|
32
|
-
title: '',
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
const TRIGGER_HIDE_EVENTS = [
|
|
36
|
-
'dragstart',
|
|
37
|
-
'mouseout',
|
|
38
|
-
'mouseup',
|
|
39
|
-
'pointerup',
|
|
40
|
-
'touchend',
|
|
41
|
-
] as const;
|
|
42
|
-
|
|
43
|
-
const TRIGGER_SHOW_EVENTS = [
|
|
44
|
-
'mouseover',
|
|
45
|
-
'mouseup',
|
|
46
|
-
'pointerdown',
|
|
47
|
-
'touchstart',
|
|
48
|
-
] as const;
|
|
49
|
-
|
|
50
|
-
interface IAction extends Partial<IState> {
|
|
51
|
-
type: 'reset' | 'update';
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
const reducer = (state: IState, {type, ...payload}: IAction): IState => {
|
|
55
|
-
switch (type) {
|
|
56
|
-
case 'update':
|
|
57
|
-
return {...state, ...payload};
|
|
58
|
-
case 'reset':
|
|
59
|
-
return {
|
|
60
|
-
...state,
|
|
61
|
-
align: initialState.align,
|
|
62
|
-
floating: false,
|
|
63
|
-
};
|
|
64
|
-
default:
|
|
65
|
-
throw new TypeError();
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
type TContentRenderer = (props: {
|
|
70
|
-
targetNode?: HTMLElement | null;
|
|
71
|
-
title: string;
|
|
72
|
-
}) => React.ReactElement | React.ReactNode;
|
|
73
|
-
|
|
74
|
-
interface IPropsBase {
|
|
75
|
-
/**
|
|
76
|
-
* Flag to indicate if tooltip should automatically align based on the window
|
|
77
|
-
*/
|
|
78
|
-
autoAlign?: boolean;
|
|
79
|
-
|
|
80
|
-
/**
|
|
81
|
-
* Props to add to the <ClayPortal/>.
|
|
82
|
-
*/
|
|
83
|
-
containerProps?: IPortalBaseProps;
|
|
84
|
-
|
|
85
|
-
/**
|
|
86
|
-
* Custom function for rendering the contents of the tooltip
|
|
87
|
-
*/
|
|
88
|
-
contentRenderer?: TContentRenderer;
|
|
89
|
-
|
|
90
|
-
/**
|
|
91
|
-
* Delay in miliseconds before showing tooltip
|
|
92
|
-
*/
|
|
93
|
-
delay?: number;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
interface IPropsWithChildren extends IPropsBase {
|
|
97
|
-
children: React.ReactElement;
|
|
98
|
-
scope?: never;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
interface IPropsWithScope extends IPropsBase {
|
|
102
|
-
children?: never;
|
|
103
|
-
|
|
104
|
-
/**
|
|
105
|
-
* CSS selector to scope provider to. All titles within this scope will be
|
|
106
|
-
* rendered in the tooltip. Titles outside of this scope will be styled
|
|
107
|
-
* as with the default browser.
|
|
108
|
-
*/
|
|
109
|
-
scope: string;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
const TooltipProvider = ({
|
|
113
|
-
autoAlign = true,
|
|
114
|
-
children,
|
|
115
|
-
containerProps = {},
|
|
116
|
-
contentRenderer = (props) => props.title,
|
|
117
|
-
delay = 600,
|
|
118
|
-
scope,
|
|
119
|
-
}: IPropsWithChildren | IPropsWithScope) => {
|
|
120
|
-
const [{align, floating, setAsHTML, title = ''}, dispatch] = useReducer(
|
|
121
|
-
reducer,
|
|
122
|
-
initialState
|
|
123
|
-
);
|
|
124
|
-
|
|
125
|
-
const tooltipRef = useRef<HTMLElement>(null);
|
|
126
|
-
|
|
127
|
-
const {getInteraction, isFocusVisible} = useInteractionFocus();
|
|
128
|
-
|
|
129
|
-
const isHovered = useRef(false);
|
|
130
|
-
const isFocused = useRef(false);
|
|
131
|
-
|
|
132
|
-
const {close, isOpen, open} = useTooltipState({delay});
|
|
133
|
-
|
|
134
|
-
const {getProps, onHide, target, titleNode} = useClosestTitle({
|
|
135
|
-
onClick: useCallback(() => {
|
|
136
|
-
isFocused.current = false;
|
|
137
|
-
isHovered.current = false;
|
|
138
|
-
}, []),
|
|
139
|
-
onHide: useCallback(() => {
|
|
140
|
-
if (!isHovered.current && !isFocused.current) {
|
|
141
|
-
dispatch({type: 'reset'});
|
|
142
|
-
close();
|
|
143
|
-
}
|
|
144
|
-
}, []),
|
|
145
|
-
tooltipRef,
|
|
146
|
-
});
|
|
147
|
-
|
|
148
|
-
useAlign({
|
|
149
|
-
align,
|
|
150
|
-
autoAlign,
|
|
151
|
-
floating,
|
|
152
|
-
isOpen,
|
|
153
|
-
onAlign: useCallback((align) => dispatch({align, type: 'update'}), []),
|
|
154
|
-
sourceElement: tooltipRef,
|
|
155
|
-
targetElement: titleNode,
|
|
156
|
-
title,
|
|
157
|
-
});
|
|
158
|
-
|
|
159
|
-
const onShow = useCallback(
|
|
160
|
-
(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
|
|
161
|
-
if (isHovered.current || isFocused.current) {
|
|
162
|
-
const props = getProps(event, isHovered.current);
|
|
163
|
-
|
|
164
|
-
if (props) {
|
|
165
|
-
dispatch({
|
|
166
|
-
align: (props.align as any) ?? align,
|
|
167
|
-
floating: props.floating,
|
|
168
|
-
setAsHTML: props.setAsHTML,
|
|
169
|
-
title: props.title,
|
|
170
|
-
type: 'update',
|
|
171
|
-
});
|
|
172
|
-
open(
|
|
173
|
-
isFocused.current,
|
|
174
|
-
props.delay ? Number(props.delay) : undefined
|
|
175
|
-
);
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
},
|
|
179
|
-
[align]
|
|
180
|
-
);
|
|
181
|
-
|
|
182
|
-
useEffect(() => {
|
|
183
|
-
const handleEsc = (event: KeyboardEvent) => {
|
|
184
|
-
if (isOpen && event.key === Keys.Esc) {
|
|
185
|
-
event.stopImmediatePropagation();
|
|
186
|
-
|
|
187
|
-
onHide();
|
|
188
|
-
}
|
|
189
|
-
};
|
|
190
|
-
|
|
191
|
-
document.addEventListener('keyup', handleEsc, true);
|
|
192
|
-
|
|
193
|
-
return () => document.removeEventListener('keyup', handleEsc, true);
|
|
194
|
-
}, [isOpen]);
|
|
195
|
-
|
|
196
|
-
const onHoverStart = (event: any) => {
|
|
197
|
-
if (getInteraction() === 'pointer') {
|
|
198
|
-
isHovered.current = true;
|
|
199
|
-
} else {
|
|
200
|
-
isHovered.current = false;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
onShow(event);
|
|
204
|
-
};
|
|
205
|
-
|
|
206
|
-
const onHoverEnd = (event: any) => {
|
|
207
|
-
isFocused.current = false;
|
|
208
|
-
isHovered.current = false;
|
|
209
|
-
|
|
210
|
-
onHide(event);
|
|
211
|
-
};
|
|
212
|
-
|
|
213
|
-
const onFocus = (event: any) => {
|
|
214
|
-
if (isFocusVisible()) {
|
|
215
|
-
isFocused.current = true;
|
|
216
|
-
|
|
217
|
-
onShow(event);
|
|
218
|
-
}
|
|
219
|
-
};
|
|
220
|
-
|
|
221
|
-
const onBlur = (event: any) => {
|
|
222
|
-
isFocused.current = false;
|
|
223
|
-
isHovered.current = false;
|
|
224
|
-
|
|
225
|
-
onHide(event);
|
|
226
|
-
};
|
|
227
|
-
|
|
228
|
-
useEffect(() => {
|
|
229
|
-
if (scope) {
|
|
230
|
-
const disposeShowEvents = TRIGGER_SHOW_EVENTS.map((eventName) =>
|
|
231
|
-
delegate(document.body, eventName, scope, onHoverStart)
|
|
232
|
-
);
|
|
233
|
-
const disposeHideEvents = TRIGGER_HIDE_EVENTS.map((eventName) =>
|
|
234
|
-
delegate(
|
|
235
|
-
document.body,
|
|
236
|
-
eventName,
|
|
237
|
-
`${scope}, .tooltip`,
|
|
238
|
-
onHoverEnd
|
|
239
|
-
)
|
|
240
|
-
);
|
|
241
|
-
|
|
242
|
-
const disposeShowFocus = delegate(
|
|
243
|
-
document.body,
|
|
244
|
-
'focus',
|
|
245
|
-
`${scope}, .tooltip`,
|
|
246
|
-
onFocus,
|
|
247
|
-
true
|
|
248
|
-
);
|
|
249
|
-
const disposeCloseBlur = delegate(
|
|
250
|
-
document.body,
|
|
251
|
-
'blur',
|
|
252
|
-
`${scope}, .tooltip`,
|
|
253
|
-
onBlur,
|
|
254
|
-
true
|
|
255
|
-
);
|
|
256
|
-
|
|
257
|
-
return () => {
|
|
258
|
-
disposeShowEvents.forEach(({dispose}) => dispose());
|
|
259
|
-
disposeHideEvents.forEach(({dispose}) => dispose());
|
|
260
|
-
|
|
261
|
-
disposeShowFocus.dispose();
|
|
262
|
-
disposeCloseBlur.dispose();
|
|
263
|
-
};
|
|
264
|
-
}
|
|
265
|
-
}, [onShow]);
|
|
266
|
-
|
|
267
|
-
warning(
|
|
268
|
-
(typeof children === 'undefined' && typeof scope !== 'undefined') ||
|
|
269
|
-
(typeof scope === 'undefined' && typeof children !== 'undefined'),
|
|
270
|
-
'<TooltipProvider />: You must use at least one of the following props: `children` or `scope`.'
|
|
271
|
-
);
|
|
272
|
-
|
|
273
|
-
warning(
|
|
274
|
-
typeof children !== 'undefined' || typeof scope !== 'undefined',
|
|
275
|
-
'<TooltipProvider />: If you want to use `scope`, use <TooltipProvider /> as a singleton and do not pass `children`.'
|
|
276
|
-
);
|
|
277
|
-
|
|
278
|
-
warning(
|
|
279
|
-
children?.type !== React.Fragment,
|
|
280
|
-
'<TooltipProvider />: React Fragment is not allowed as a child to TooltipProvider. Child must be a single HTML element that accepts `onMouseOver` and `onMouseOut`.'
|
|
281
|
-
);
|
|
282
|
-
|
|
283
|
-
const titleContent = contentRenderer({
|
|
284
|
-
targetNode: target.current,
|
|
285
|
-
title,
|
|
286
|
-
});
|
|
287
|
-
|
|
288
|
-
const tooltip = isOpen && (
|
|
289
|
-
<ClayPortal {...containerProps}>
|
|
290
|
-
<ClayTooltip alignPosition={align} ref={tooltipRef} show>
|
|
291
|
-
{setAsHTML && typeof titleContent === 'string' ? (
|
|
292
|
-
<span
|
|
293
|
-
dangerouslySetInnerHTML={{
|
|
294
|
-
__html: titleContent,
|
|
295
|
-
}}
|
|
296
|
-
/>
|
|
297
|
-
) : (
|
|
298
|
-
titleContent
|
|
299
|
-
)}
|
|
300
|
-
</ClayTooltip>
|
|
301
|
-
</ClayPortal>
|
|
302
|
-
);
|
|
303
|
-
|
|
304
|
-
return (
|
|
305
|
-
<>
|
|
306
|
-
{scope ? (
|
|
307
|
-
<>
|
|
308
|
-
{tooltip}
|
|
309
|
-
{children}
|
|
310
|
-
</>
|
|
311
|
-
) : (
|
|
312
|
-
children &&
|
|
313
|
-
React.cloneElement(children, {
|
|
314
|
-
...children.props,
|
|
315
|
-
children: (
|
|
316
|
-
<>
|
|
317
|
-
{children.props.children}
|
|
318
|
-
{tooltip}
|
|
319
|
-
</>
|
|
320
|
-
),
|
|
321
|
-
onBlur,
|
|
322
|
-
onFocus,
|
|
323
|
-
onMouseOut: onHoverEnd,
|
|
324
|
-
onMouseOver: onHoverStart,
|
|
325
|
-
})
|
|
326
|
-
)}
|
|
327
|
-
</>
|
|
328
|
-
);
|
|
329
|
-
};
|
|
330
|
-
|
|
331
|
-
export default TooltipProvider;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
-
|
|
3
|
-
exports[`ClayTooltip renders 1`] = `
|
|
4
|
-
<div>
|
|
5
|
-
<div
|
|
6
|
-
class="tooltip clay-tooltip-bottom show"
|
|
7
|
-
role="tooltip"
|
|
8
|
-
>
|
|
9
|
-
<div
|
|
10
|
-
class="arrow"
|
|
11
|
-
/>
|
|
12
|
-
<div
|
|
13
|
-
class="tooltip-inner"
|
|
14
|
-
>
|
|
15
|
-
Tooltip
|
|
16
|
-
</div>
|
|
17
|
-
</div>
|
|
18
|
-
</div>
|
|
19
|
-
`;
|
package/src/__tests__/index.tsx
DELETED
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
3
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import ClayTooltip, {ClayTooltipProvider} from '..';
|
|
7
|
-
import {act, cleanup, fireEvent, render} from '@testing-library/react';
|
|
8
|
-
import React from 'react';
|
|
9
|
-
|
|
10
|
-
describe('ClayTooltip', () => {
|
|
11
|
-
afterEach(cleanup);
|
|
12
|
-
|
|
13
|
-
it('renders', () => {
|
|
14
|
-
const {container} = render(<ClayTooltip show>Tooltip</ClayTooltip>);
|
|
15
|
-
|
|
16
|
-
expect(container).toMatchSnapshot();
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
it('displays on mouseover and hides on mouse out', () => {
|
|
20
|
-
jest.useFakeTimers();
|
|
21
|
-
|
|
22
|
-
const {getByTestId} = render(
|
|
23
|
-
<ClayTooltipProvider>
|
|
24
|
-
<button
|
|
25
|
-
data-testid="button"
|
|
26
|
-
data-tooltip-align="bottom"
|
|
27
|
-
title="Bottom"
|
|
28
|
-
>
|
|
29
|
-
tooltip
|
|
30
|
-
</button>
|
|
31
|
-
</ClayTooltipProvider>
|
|
32
|
-
);
|
|
33
|
-
|
|
34
|
-
expect(document.querySelector('.tooltip')).toBeFalsy();
|
|
35
|
-
|
|
36
|
-
fireEvent.mouseDown(document.body);
|
|
37
|
-
|
|
38
|
-
fireEvent.mouseOver(getByTestId('button'));
|
|
39
|
-
|
|
40
|
-
act(() => {
|
|
41
|
-
jest.runAllTimers();
|
|
42
|
-
});
|
|
43
|
-
|
|
44
|
-
expect(document.querySelector('.tooltip')).toBeTruthy();
|
|
45
|
-
|
|
46
|
-
fireEvent.mouseOut(getByTestId('button'));
|
|
47
|
-
|
|
48
|
-
act(() => {
|
|
49
|
-
jest.runAllTimers();
|
|
50
|
-
});
|
|
51
|
-
|
|
52
|
-
expect(document.querySelector('.tooltip')).toBeFalsy();
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
it('show tooltip on element focus and hide on blur', () => {
|
|
56
|
-
const {getByTestId} = render(
|
|
57
|
-
<ClayTooltipProvider>
|
|
58
|
-
<button
|
|
59
|
-
data-testid="button"
|
|
60
|
-
data-tooltip-align="bottom"
|
|
61
|
-
title="Bottom"
|
|
62
|
-
>
|
|
63
|
-
tooltip
|
|
64
|
-
</button>
|
|
65
|
-
</ClayTooltipProvider>
|
|
66
|
-
);
|
|
67
|
-
|
|
68
|
-
fireEvent.keyDown(document.body, {key: 'Tab'});
|
|
69
|
-
|
|
70
|
-
expect(document.querySelector('.tooltip')).toBeFalsy();
|
|
71
|
-
|
|
72
|
-
fireEvent.focus(getByTestId('button'));
|
|
73
|
-
|
|
74
|
-
expect(document.querySelector('.tooltip')).toBeTruthy();
|
|
75
|
-
|
|
76
|
-
fireEvent.blur(getByTestId('button'));
|
|
77
|
-
|
|
78
|
-
expect(document.querySelector('.tooltip')).toBeFalsy();
|
|
79
|
-
});
|
|
80
|
-
});
|
package/src/index.tsx
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
3
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import ClayTooltip from './Tooltip';
|
|
7
|
-
import ClayTooltipProvider from './TooltipProvider';
|
|
8
|
-
|
|
9
|
-
export {ClayTooltipProvider};
|
|
10
|
-
|
|
11
|
-
export default ClayTooltip;
|
package/src/useAlign.ts
DELETED
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
3
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import {doAlign, useMousePosition} from '@clayui/shared';
|
|
7
|
-
import {alignPoint} from 'dom-align';
|
|
8
|
-
import React, {useEffect} from 'react';
|
|
9
|
-
|
|
10
|
-
const ALIGNMENTS = [
|
|
11
|
-
'top',
|
|
12
|
-
'top-right',
|
|
13
|
-
'right',
|
|
14
|
-
'bottom-right',
|
|
15
|
-
'bottom',
|
|
16
|
-
'bottom-left',
|
|
17
|
-
'left',
|
|
18
|
-
'top-left',
|
|
19
|
-
] as const;
|
|
20
|
-
|
|
21
|
-
const ALIGNMENTS_MAP = {
|
|
22
|
-
bottom: ['tc', 'bc'],
|
|
23
|
-
'bottom-left': ['tl', 'bl'],
|
|
24
|
-
'bottom-right': ['tr', 'br'],
|
|
25
|
-
left: ['cr', 'cl'],
|
|
26
|
-
right: ['cl', 'cr'],
|
|
27
|
-
top: ['bc', 'tc'],
|
|
28
|
-
'top-left': ['bl', 'tl'],
|
|
29
|
-
'top-right': ['br', 'tr'],
|
|
30
|
-
} as const;
|
|
31
|
-
|
|
32
|
-
const ALIGNMENTS_INVERSE_MAP = {
|
|
33
|
-
bctc: 'top',
|
|
34
|
-
bltl: 'top-left',
|
|
35
|
-
brtr: 'top-right',
|
|
36
|
-
clcr: 'right',
|
|
37
|
-
crcl: 'left',
|
|
38
|
-
tcbc: 'bottom',
|
|
39
|
-
tlbl: 'bottom-left',
|
|
40
|
-
trbr: 'bottom-right',
|
|
41
|
-
} as const;
|
|
42
|
-
|
|
43
|
-
const BOTTOM_OFFSET = [0, 7] as const;
|
|
44
|
-
const LEFT_OFFSET = [-7, 0] as const;
|
|
45
|
-
const RIGHT_OFFSET = [7, 0] as const;
|
|
46
|
-
const TOP_OFFSET = [0, -7] as const;
|
|
47
|
-
|
|
48
|
-
const OFFSET_MAP = {
|
|
49
|
-
bctc: TOP_OFFSET,
|
|
50
|
-
bltl: TOP_OFFSET,
|
|
51
|
-
brtr: TOP_OFFSET,
|
|
52
|
-
clcr: RIGHT_OFFSET,
|
|
53
|
-
crcl: LEFT_OFFSET,
|
|
54
|
-
tcbc: BOTTOM_OFFSET,
|
|
55
|
-
tlbl: BOTTOM_OFFSET,
|
|
56
|
-
trbr: BOTTOM_OFFSET,
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
const ALIGNMENTS_FORCE_MAP = {
|
|
60
|
-
...ALIGNMENTS_INVERSE_MAP,
|
|
61
|
-
bctc: 'top-left',
|
|
62
|
-
tcbc: 'bottom-left',
|
|
63
|
-
} as const;
|
|
64
|
-
|
|
65
|
-
export type Align = typeof ALIGNMENTS[number];
|
|
66
|
-
|
|
67
|
-
type Props = {
|
|
68
|
-
align: Align;
|
|
69
|
-
autoAlign: boolean;
|
|
70
|
-
floating: boolean;
|
|
71
|
-
isOpen: boolean;
|
|
72
|
-
onAlign: (align: Align) => void;
|
|
73
|
-
sourceElement: React.MutableRefObject<HTMLElement | null>;
|
|
74
|
-
targetElement: React.MutableRefObject<HTMLElement | null>;
|
|
75
|
-
title: string;
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
export function useAlign({
|
|
79
|
-
align,
|
|
80
|
-
autoAlign,
|
|
81
|
-
floating,
|
|
82
|
-
isOpen,
|
|
83
|
-
onAlign,
|
|
84
|
-
sourceElement,
|
|
85
|
-
targetElement,
|
|
86
|
-
title,
|
|
87
|
-
}: Props) {
|
|
88
|
-
const mousePosition = useMousePosition(20);
|
|
89
|
-
|
|
90
|
-
useEffect(() => {
|
|
91
|
-
if (sourceElement.current && isOpen && floating) {
|
|
92
|
-
const points = ALIGNMENTS_MAP[align || 'top'] as [string, string];
|
|
93
|
-
|
|
94
|
-
const [clientX, clientY] = mousePosition;
|
|
95
|
-
|
|
96
|
-
alignPoint(
|
|
97
|
-
sourceElement.current,
|
|
98
|
-
{
|
|
99
|
-
clientX,
|
|
100
|
-
clientY,
|
|
101
|
-
},
|
|
102
|
-
{
|
|
103
|
-
offset: OFFSET_MAP[
|
|
104
|
-
points.join('') as keyof typeof OFFSET_MAP
|
|
105
|
-
] as [number, number],
|
|
106
|
-
points,
|
|
107
|
-
}
|
|
108
|
-
);
|
|
109
|
-
}
|
|
110
|
-
}, [isOpen, floating]);
|
|
111
|
-
|
|
112
|
-
useEffect(() => {
|
|
113
|
-
if (
|
|
114
|
-
targetElement.current &&
|
|
115
|
-
sourceElement.current &&
|
|
116
|
-
isOpen &&
|
|
117
|
-
!floating
|
|
118
|
-
) {
|
|
119
|
-
const points = ALIGNMENTS_MAP[align || 'top'] as [string, string];
|
|
120
|
-
|
|
121
|
-
const alignment = doAlign({
|
|
122
|
-
overflow: {
|
|
123
|
-
adjustX: autoAlign,
|
|
124
|
-
adjustY: autoAlign,
|
|
125
|
-
},
|
|
126
|
-
points,
|
|
127
|
-
sourceElement: sourceElement.current,
|
|
128
|
-
targetElement: targetElement.current,
|
|
129
|
-
});
|
|
130
|
-
|
|
131
|
-
const alignmentString = alignment.points.join(
|
|
132
|
-
''
|
|
133
|
-
) as keyof typeof ALIGNMENTS_INVERSE_MAP;
|
|
134
|
-
|
|
135
|
-
const pointsString = points.join('');
|
|
136
|
-
|
|
137
|
-
if (alignment.overflow.adjustX) {
|
|
138
|
-
onAlign(ALIGNMENTS_FORCE_MAP[alignmentString]);
|
|
139
|
-
} else if (pointsString !== alignmentString) {
|
|
140
|
-
onAlign(ALIGNMENTS_INVERSE_MAP[alignmentString]);
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
}, [align, title, isOpen]);
|
|
144
|
-
}
|
package/src/useClosestTitle.ts
DELETED
|
@@ -1,187 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
3
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import React, {useCallback, useRef} from 'react';
|
|
7
|
-
|
|
8
|
-
function matches(
|
|
9
|
-
element: HTMLElement & {
|
|
10
|
-
msMatchesSelector?: HTMLElement['matches'];
|
|
11
|
-
},
|
|
12
|
-
selectorString: string
|
|
13
|
-
) {
|
|
14
|
-
if (element.matches) {
|
|
15
|
-
return element.matches(selectorString);
|
|
16
|
-
} else if (element.msMatchesSelector) {
|
|
17
|
-
return element.msMatchesSelector(selectorString);
|
|
18
|
-
} else if (element.webkitMatchesSelector) {
|
|
19
|
-
return element.webkitMatchesSelector(selectorString);
|
|
20
|
-
} else {
|
|
21
|
-
return false;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
function closestAncestor(node: HTMLElement, s: string) {
|
|
26
|
-
const element = node;
|
|
27
|
-
let ancestor: HTMLElement | null = node;
|
|
28
|
-
|
|
29
|
-
if (!document.documentElement.contains(element)) {
|
|
30
|
-
return null;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
do {
|
|
34
|
-
if (matches(ancestor, s)) {
|
|
35
|
-
return ancestor;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
ancestor = ancestor.parentElement;
|
|
39
|
-
} while (ancestor !== null);
|
|
40
|
-
|
|
41
|
-
return null;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
type Props = {
|
|
45
|
-
onHide: () => void;
|
|
46
|
-
onClick: () => void;
|
|
47
|
-
tooltipRef: React.MutableRefObject<HTMLElement | null>;
|
|
48
|
-
};
|
|
49
|
-
|
|
50
|
-
export function useClosestTitle(props: Props) {
|
|
51
|
-
const targetRef = useRef<HTMLElement | null>(null);
|
|
52
|
-
const titleNodeRef = useRef<HTMLElement | null>(null);
|
|
53
|
-
|
|
54
|
-
const saveTitle = useCallback((element: HTMLElement) => {
|
|
55
|
-
const title = element.getAttribute('title');
|
|
56
|
-
|
|
57
|
-
if (title) {
|
|
58
|
-
element.setAttribute('data-restore-title', title);
|
|
59
|
-
element.removeAttribute('title');
|
|
60
|
-
} else if (element.tagName === 'svg') {
|
|
61
|
-
const titleTag = element.querySelector('title');
|
|
62
|
-
|
|
63
|
-
if (titleTag) {
|
|
64
|
-
element.setAttribute('data-restore-title', titleTag.innerHTML);
|
|
65
|
-
|
|
66
|
-
titleTag.remove();
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
const hasParentTitle = element.closest<HTMLElement>('[title]');
|
|
71
|
-
|
|
72
|
-
if (hasParentTitle) {
|
|
73
|
-
saveTitle(hasParentTitle);
|
|
74
|
-
}
|
|
75
|
-
}, []);
|
|
76
|
-
|
|
77
|
-
const restoreTitle = useCallback((element: HTMLElement) => {
|
|
78
|
-
const title = element.getAttribute('data-restore-title');
|
|
79
|
-
|
|
80
|
-
if (title) {
|
|
81
|
-
if (element.tagName === 'svg') {
|
|
82
|
-
const titleTag = document.createElement('title');
|
|
83
|
-
|
|
84
|
-
titleTag.innerHTML = title;
|
|
85
|
-
|
|
86
|
-
element.appendChild(titleTag);
|
|
87
|
-
} else {
|
|
88
|
-
element.setAttribute('title', title);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
element.removeAttribute('data-restore-title');
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
const hasParentTitle = element.closest<HTMLElement>(
|
|
95
|
-
'[data-restore-title]'
|
|
96
|
-
);
|
|
97
|
-
|
|
98
|
-
if (hasParentTitle) {
|
|
99
|
-
restoreTitle(hasParentTitle);
|
|
100
|
-
}
|
|
101
|
-
}, []);
|
|
102
|
-
|
|
103
|
-
const onClick = useCallback((event?: any) => {
|
|
104
|
-
props.onClick();
|
|
105
|
-
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
|
106
|
-
onHide(event);
|
|
107
|
-
}, []);
|
|
108
|
-
|
|
109
|
-
const onHide = useCallback((event?: any) => {
|
|
110
|
-
if (
|
|
111
|
-
event &&
|
|
112
|
-
!event.relatedTarget?.getAttribute('title') &&
|
|
113
|
-
(props.tooltipRef.current?.contains(event.relatedTarget) ||
|
|
114
|
-
targetRef.current?.contains(event.relatedTarget))
|
|
115
|
-
) {
|
|
116
|
-
return null;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
props.onHide();
|
|
120
|
-
|
|
121
|
-
if (titleNodeRef.current) {
|
|
122
|
-
restoreTitle(titleNodeRef.current);
|
|
123
|
-
titleNodeRef.current = null;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
if (targetRef.current) {
|
|
127
|
-
targetRef.current.removeEventListener('click', onClick);
|
|
128
|
-
targetRef.current = null;
|
|
129
|
-
}
|
|
130
|
-
}, []);
|
|
131
|
-
|
|
132
|
-
const getProps = useCallback(
|
|
133
|
-
(
|
|
134
|
-
event: React.MouseEvent<HTMLElement, MouseEvent>,
|
|
135
|
-
hideBrowserTitle: boolean
|
|
136
|
-
) => {
|
|
137
|
-
if (targetRef.current) {
|
|
138
|
-
props.onClick();
|
|
139
|
-
|
|
140
|
-
if (onHide(event) === null) {
|
|
141
|
-
return;
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
const target = event.target as HTMLElement;
|
|
146
|
-
|
|
147
|
-
const hasTitle =
|
|
148
|
-
target &&
|
|
149
|
-
(target.hasAttribute('[title]') ||
|
|
150
|
-
target.hasAttribute('[data-title]'));
|
|
151
|
-
|
|
152
|
-
const node = hasTitle
|
|
153
|
-
? target
|
|
154
|
-
: closestAncestor(target, '[title], [data-title]');
|
|
155
|
-
|
|
156
|
-
if (node) {
|
|
157
|
-
targetRef.current = target;
|
|
158
|
-
|
|
159
|
-
target.addEventListener('click', onClick);
|
|
160
|
-
|
|
161
|
-
const title =
|
|
162
|
-
node.getAttribute('title') ||
|
|
163
|
-
node.getAttribute('data-title') ||
|
|
164
|
-
'';
|
|
165
|
-
|
|
166
|
-
titleNodeRef.current = node;
|
|
167
|
-
|
|
168
|
-
if (hideBrowserTitle) {
|
|
169
|
-
saveTitle(node);
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
return {
|
|
173
|
-
align: node.getAttribute('data-tooltip-align'),
|
|
174
|
-
delay: node.getAttribute('data-tooltip-delay'),
|
|
175
|
-
floating: Boolean(
|
|
176
|
-
node.getAttribute('data-tooltip-floating')
|
|
177
|
-
),
|
|
178
|
-
setAsHTML: !!node.getAttribute('data-title-set-as-html'),
|
|
179
|
-
title,
|
|
180
|
-
};
|
|
181
|
-
}
|
|
182
|
-
},
|
|
183
|
-
[]
|
|
184
|
-
);
|
|
185
|
-
|
|
186
|
-
return {getProps, onHide, target: targetRef, titleNode: titleNodeRef};
|
|
187
|
-
}
|
package/src/useTooltipState.ts
DELETED
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
3
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import {useCallback, useRef, useState} from 'react';
|
|
7
|
-
|
|
8
|
-
type Props = {
|
|
9
|
-
delay?: number;
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
export function useTooltipState({delay = 600}: Props) {
|
|
13
|
-
const [isOpen, setOpen] = useState(false);
|
|
14
|
-
|
|
15
|
-
const timeoutIdRef = useRef<any>();
|
|
16
|
-
|
|
17
|
-
const open = useCallback((immediate: boolean, customDelay?: number) => {
|
|
18
|
-
if (!immediate) {
|
|
19
|
-
clearTimeout(timeoutIdRef.current);
|
|
20
|
-
|
|
21
|
-
timeoutIdRef.current = setTimeout(
|
|
22
|
-
() => {
|
|
23
|
-
setOpen(true);
|
|
24
|
-
},
|
|
25
|
-
customDelay !== undefined ? customDelay : delay
|
|
26
|
-
);
|
|
27
|
-
} else {
|
|
28
|
-
setOpen(true);
|
|
29
|
-
}
|
|
30
|
-
}, []);
|
|
31
|
-
|
|
32
|
-
const close = useCallback(() => {
|
|
33
|
-
clearTimeout(timeoutIdRef.current);
|
|
34
|
-
|
|
35
|
-
setOpen(false);
|
|
36
|
-
}, []);
|
|
37
|
-
|
|
38
|
-
return {
|
|
39
|
-
close,
|
|
40
|
-
isOpen,
|
|
41
|
-
open,
|
|
42
|
-
};
|
|
43
|
-
}
|