Skip to content

Commit 4744b88

Browse files
mrholekmrholek
committed
refactor: update Popper references
1 parent a3042fa commit 4744b88

File tree

2 files changed

+145
-132
lines changed

2 files changed

+145
-132
lines changed

‎packages/coreui-react/src/components/popover/CPopover.tsx

+78-71
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { FC, ReactElement, ReactNode, useRef, useState } from 'react'
1+
import React, { FC, ReactNode, useRef, useState } from 'react'
22
import { createPortal } from 'react-dom'
33
import PropTypes from 'prop-types'
44
import classNames from 'classnames'
@@ -9,7 +9,8 @@ import { Transition } from 'react-transition-group'
99
import { Triggers, triggerPropType } from '../Types'
1010

1111
export interface CPopoverProps {
12-
children: ReactElement
12+
// TODO: find solution to not use any
13+
children: any
1314
/**
1415
* Content node for your component.
1516
*/
@@ -73,76 +74,82 @@ export const CPopover: FC<CPopoverProps> = ({
7374

7475
return (
7576
<Manager>
76-
<Reference>
77-
{({ ref }) =>
78-
React.cloneElement(children, {
79-
ref: ref,
80-
...((trigger === 'click' || trigger.includes('click')) && {
81-
onClick: () => setVisible(!_visible),
82-
}),
83-
...((trigger === 'focus' || trigger.includes('focus')) && {
84-
onFocus: () => setVisible(true),
85-
onBlur: () => setVisible(false),
86-
}),
87-
...((trigger === 'hover' || trigger.includes('hover')) && {
88-
onMouseEnter: () => setVisible(true),
89-
onMouseLeave: () => setVisible(false),
90-
}),
91-
})
92-
}
93-
</Reference>
94-
{typeof window !== 'undefined' &&
95-
createPortal(
96-
<Transition
97-
in={_visible}
98-
mountOnEnter
99-
nodeRef={popoverRef}
100-
onEnter={onShow}
101-
onExit={onHide}
102-
timeout={{
103-
enter: 0,
104-
exit: 200,
105-
}}
106-
unmountOnExit
107-
>
108-
{(state) => {
109-
const transitionClass = getTransitionClass(state)
110-
return (
111-
<Popper
112-
placement={placement}
113-
modifiers={[
114-
{
115-
name: 'offset',
116-
options: {
117-
offset: offset,
77+
<>
78+
<Reference>
79+
{({ ref }) =>
80+
React.cloneElement(children, {
81+
ref: ref,
82+
...((trigger === 'click' || trigger.includes('click')) && {
83+
onClick: () => setVisible(!_visible),
84+
}),
85+
...((trigger === 'focus' || trigger.includes('focus')) && {
86+
onFocus: () => setVisible(true),
87+
onBlur: () => setVisible(false),
88+
}),
89+
...((trigger === 'hover' || trigger.includes('hover')) && {
90+
onMouseEnter: () => setVisible(true),
91+
onMouseLeave: () => setVisible(false),
92+
}),
93+
})
94+
}
95+
</Reference>
96+
{typeof window !== 'undefined' &&
97+
createPortal(
98+
<Transition
99+
in={_visible}
100+
mountOnEnter
101+
nodeRef={popoverRef}
102+
onEnter={onShow}
103+
onExit={onHide}
104+
timeout={{
105+
enter: 0,
106+
exit: 200,
107+
}}
108+
unmountOnExit
109+
>
110+
{(state) => {
111+
const transitionClass = getTransitionClass(state)
112+
return (
113+
<Popper
114+
placement={placement}
115+
modifiers={[
116+
{
117+
name: 'offset',
118+
options: {
119+
offset: offset,
120+
},
118121
},
119-
},
120-
]}
121-
>
122-
{({ arrowProps, style, ref }) => (
123-
<div
124-
className={classNames(
125-
`popover bs-popover-${
126-
placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
127-
}`,
128-
transitionClass,
129-
)}
130-
ref={ref}
131-
role="tooltip"
132-
style={style}
133-
{...rest}
134-
>
135-
<div className="popover-arrow" {...arrowProps}></div>
136-
<div className="popover-header">{title}</div>
137-
<div className="popover-body">{content}</div>
138-
</div>
139-
)}
140-
</Popper>
141-
)
142-
}}
143-
</Transition>,
144-
document.body,
145-
)}
122+
]}
123+
>
124+
{({ arrowProps, style, ref }) => (
125+
<div
126+
className={classNames(
127+
`popover bs-popover-${
128+
placement === 'left'
129+
? 'start'
130+
: placement === 'right'
131+
? 'end'
132+
: placement
133+
}`,
134+
transitionClass,
135+
)}
136+
ref={ref}
137+
role="tooltip"
138+
style={style}
139+
{...rest}
140+
>
141+
<div className="popover-arrow" {...arrowProps}></div>
142+
<div className="popover-header">{title}</div>
143+
<div className="popover-body">{content}</div>
144+
</div>
145+
)}
146+
</Popper>
147+
)
148+
}}
149+
</Transition>,
150+
document.body,
151+
)}
152+
</>
146153
</Manager>
147154
)
148155
}

‎packages/coreui-react/src/components/tooltip/CTooltip.tsx

+67-61
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { FC, ReactElement, ReactNode, useRef, useState } from 'react'
1+
import React, { FC, ReactNode, useRef, useState } from 'react'
22
import { createPortal } from 'react-dom'
33
import PropTypes from 'prop-types'
44
import classNames from 'classnames'
@@ -9,7 +9,7 @@ import { Transition } from 'react-transition-group'
99
import { Triggers, triggerPropType } from '../Types'
1010

1111
export interface CTooltipProps {
12-
children: ReactElement
12+
children: any
1313
/**
1414
* Content node for your component.
1515
*/
@@ -63,65 +63,71 @@ export const CTooltip: FC<CTooltipProps> = ({
6363

6464
return (
6565
<Manager>
66-
<Reference>
67-
{({ ref }) =>
68-
React.cloneElement(children, {
69-
ref: ref,
70-
...((trigger === 'click' || trigger.includes('click')) && {
71-
onClick: () => setVisible(!_visible),
72-
}),
73-
...((trigger === 'focus' || trigger.includes('focus')) && {
74-
onFocus: () => setVisible(true),
75-
onBlur: () => setVisible(false),
76-
}),
77-
...((trigger === 'hover' || trigger.includes('hover')) && {
78-
onMouseEnter: () => setVisible(true),
79-
onMouseLeave: () => setVisible(false),
80-
}),
81-
})
82-
}
83-
</Reference>
84-
{typeof window !== 'undefined' &&
85-
createPortal(
86-
<Transition
87-
in={_visible}
88-
mountOnEnter
89-
nodeRef={tooltipRef}
90-
onEnter={onShow}
91-
onExit={onHide}
92-
timeout={{
93-
enter: 0,
94-
exit: 200,
95-
}}
96-
unmountOnExit
97-
>
98-
{(state) => {
99-
const transitionClass = getTransitionClass(state)
100-
return (
101-
<Popper placement={placement}>
102-
{({ arrowProps, style, ref }) => (
103-
<div
104-
className={classNames(
105-
`tooltip bs-tooltip-${
106-
placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
107-
}`,
108-
transitionClass,
109-
)}
110-
ref={ref}
111-
role="tooltip"
112-
style={style}
113-
{...rest}
114-
>
115-
<div className="tooltip-arrow" {...arrowProps}></div>
116-
<div className="tooltip-inner">{content}</div>
117-
</div>
118-
)}
119-
</Popper>
120-
)
121-
}}
122-
</Transition>,
123-
document.body,
124-
)}
66+
<>
67+
<Reference>
68+
{({ ref }) =>
69+
React.cloneElement(children, {
70+
ref: ref,
71+
...((trigger === 'click' || trigger.includes('click')) && {
72+
onClick: () => setVisible(!_visible),
73+
}),
74+
...((trigger === 'focus' || trigger.includes('focus')) && {
75+
onFocus: () => setVisible(true),
76+
onBlur: () => setVisible(false),
77+
}),
78+
...((trigger === 'hover' || trigger.includes('hover')) && {
79+
onMouseEnter: () => setVisible(true),
80+
onMouseLeave: () => setVisible(false),
81+
}),
82+
})
83+
}
84+
</Reference>
85+
{typeof window !== 'undefined' &&
86+
createPortal(
87+
<Transition
88+
in={_visible}
89+
mountOnEnter
90+
nodeRef={tooltipRef}
91+
onEnter={onShow}
92+
onExit={onHide}
93+
timeout={{
94+
enter: 0,
95+
exit: 200,
96+
}}
97+
unmountOnExit
98+
>
99+
{(state) => {
100+
const transitionClass = getTransitionClass(state)
101+
return (
102+
<Popper placement={placement}>
103+
{({ arrowProps, style, ref }) => (
104+
<div
105+
className={classNames(
106+
`tooltip bs-tooltip-${
107+
placement === 'left'
108+
? 'start'
109+
: placement === 'right'
110+
? 'end'
111+
: placement
112+
}`,
113+
transitionClass,
114+
)}
115+
ref={ref}
116+
role="tooltip"
117+
style={style}
118+
{...rest}
119+
>
120+
<div className="tooltip-arrow" {...arrowProps}></div>
121+
<div className="tooltip-inner">{content}</div>
122+
</div>
123+
)}
124+
</Popper>
125+
)
126+
}}
127+
</Transition>,
128+
document.body,
129+
)}
130+
</>
125131
</Manager>
126132
)
127133
}

0 commit comments

Comments
 (0)