Skip to content

Commit

Permalink
fix(Tooltip): convert to TypeScript
Browse files Browse the repository at this point in the history
  • Loading branch information
@tujoworker
tujoworker committed Sep 5, 2022
1 parent 7f492a5 commit 8763172
Show file tree
Hide file tree
Showing 10 changed files with 310 additions and 263 deletions.
126 changes: 28 additions & 98 deletions ...eufemia/src/components/tooltip/Tooltip.js → ...ufemia/src/components/tooltip/Tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,101 +4,36 @@
*/

import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import Context from '../../shared/Context'
import {
makeUniqueId,
extendPropsWithContext,
registerElement,
validateDOMAttributes,
processChildren,
isTrue,
} from '../../shared/component-helper'
import {
spacingPropTypes,
createSpacingClasses,
} from '../space/SpacingHelper'
import { createSpacingClasses } from '../space/SpacingHelper'
import TooltipContainer from './TooltipContainer'
import TooltipWithEvents from './TooltipWithEvents'
import TooltipPortal from './TooltipPortal'
import { injectTooltipSemantic } from './TooltipHelpers'
import { defaultProps, injectTooltipSemantic } from './TooltipHelpers'
import { ISpacingProps } from '../../shared/interfaces'
import { TooltipProps } from './types'
import { includeValidProps } from '../form-row/FormRowHelpers'

export { injectTooltipSemantic }

export default class Tooltip extends React.PureComponent {
export default class Tooltip extends React.PureComponent<
TooltipProps & ISpacingProps
> {
_id: string

static tagName = 'dnb-tooltip'
static contextType = Context

static propTypes = {
id: PropTypes.string,
group: PropTypes.string,
size: PropTypes.oneOf(['basis', 'large']),
active: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
arrow: PropTypes.oneOf([
null,
'center',
'top',
'right',
'bottom',
'left',
]),
align: PropTypes.oneOf([null, 'center', 'right', 'left']),
animate_position: PropTypes.oneOfType([
PropTypes.string,
PropTypes.bool,
]),
fixed_position: PropTypes.oneOfType([
PropTypes.string,
PropTypes.bool,
]),
skip_portal: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
show_delay: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
hide_delay: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
target_selector: PropTypes.string,
target_element: PropTypes.oneOfType([
PropTypes.object,
PropTypes.node,
]),

...spacingPropTypes,

class: PropTypes.string,
className: PropTypes.string,
children: PropTypes.oneOfType([
PropTypes.string,
PropTypes.func,
PropTypes.node,
]),
tooltip: PropTypes.node,
}

static defaultProps = {
id: null,
group: 'main',
size: 'basis',
active: null,
position: 'top',
arrow: 'center',
align: null,
animate_position: false,
fixed_position: false,
skip_portal: null,
no_animation: false,
show_delay: 300,
hide_delay: 500,
target_selector: null,
target_element: null,

class: null,
className: null,
children: null,
tooltip: null,
}

static enableWebComponent() {
registerElement(Tooltip?.tagName, Tooltip, Tooltip.defaultProps)
registerElement(Tooltip?.tagName, Tooltip, defaultProps)
}

static getContent(props) {
Expand All @@ -123,19 +58,18 @@ export default class Tooltip extends React.PureComponent {
const inherited = this.getPropsFromTooltipProp()

// use only the props from context, who are available here anyway
const props = extendPropsWithContext(
this.props,
Tooltip.defaultProps,
inherited,
this.context.getTranslation(this.props).Tooltip,
this.context.FormRow,
this.context.Tooltip
)
const props = {
...defaultProps,
...this.props,
...inherited,
...this.context.getTranslation(this.props).Tooltip,
...includeValidProps(this.context.FormRow),
...this.context.Tooltip,
}

const {
target_element,
target_selector,
class: class_name,
className,
id, // eslint-disable-line
tooltip, // eslint-disable-line
Expand All @@ -154,13 +88,15 @@ export default class Tooltip extends React.PureComponent {
...params
} = props

props.internal_id = this._id
props.group = this.props.id || group || 'main-' + this._id

const content = Tooltip.getContent(props)

const classes = classnames(
'dnb-tooltip',
size === 'large' && 'dnb-tooltip--large',
createSpacingClasses(props),
class_name,
className
)

Expand All @@ -172,14 +108,8 @@ export default class Tooltip extends React.PureComponent {
// also used for code markup simulation
validateDOMAttributes(this.props, attributes)

const newProps = {
...this.props,
...inherited,
internal_id: this._id,
group: this.props.id || group,
}
if (newProps.active === null) {
delete newProps.active
if (!isTrue(props.active)) {
delete props.active
}

return (
Expand All @@ -188,15 +118,15 @@ export default class Tooltip extends React.PureComponent {
<TooltipContainer
target={target_element}
attributes={attributes}
{...newProps}
{...props}
>
{content}
</TooltipContainer>
) : target_element ? (
<TooltipWithEvents
target={target_element}
attributes={attributes}
{...newProps}
{...props}
>
{content}
</TooltipWithEvents>
Expand All @@ -205,7 +135,7 @@ export default class Tooltip extends React.PureComponent {
<TooltipPortal
target={target_selector}
attributes={attributes}
{...newProps}
{...props}
>
{content}
</TooltipPortal>
Expand Down
136 changes: 81 additions & 55 deletions ...rc/components/tooltip/TooltipContainer.js → ...c/components/tooltip/TooltipContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,62 +4,82 @@
*/

import React from 'react'
import PropTypes from 'prop-types'
import { isTrue } from '../../shared/component-helper'
import { getOffsetLeft } from '../../shared/helpers'
import classnames from 'classnames'
import { TooltipProps } from './types'

type TooltipContainerProps = {
targetElement: HTMLElement
clientX?: number
style?: React.CSSProperties
useHover?: boolean
internal_id?: string
attributes?: Record<string, unknown>
}

export default class TooltipContainer extends React.PureComponent {
static propTypes = {
internal_id: PropTypes.string,
targetElement: PropTypes.oneOfType([
PropTypes.string,
PropTypes.func,
PropTypes.object,
PropTypes.node,
]),
clientX: PropTypes.number,
active: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
position: PropTypes.string,
arrow: PropTypes.string,
align: PropTypes.string,
animate_position: PropTypes.oneOfType([
PropTypes.string,
PropTypes.bool,
]),
fixed_position: PropTypes.oneOfType([
PropTypes.string,
PropTypes.bool,
]),
no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
useHover: PropTypes.bool,
style: PropTypes.object,
attributes: PropTypes.object,
children: PropTypes.oneOfType([
PropTypes.string,
PropTypes.func,
PropTypes.node,
]),
}

static defaultProps = {
internal_id: null,
targetElement: null,
clientX: null,
active: false,
position: 'center',
arrow: null,
align: null,
animate_position: null,
fixed_position: null,
no_animation: null,
useHover: true,
style: null,
attributes: null,
children: null,
}
type TooltipContainerState = {
w?: number
h?: number
width: number
height: number
hover: boolean
}

_rootRef = React.createRef()
export default class TooltipContainer extends React.PureComponent<
TooltipProps & TooltipContainerProps,
TooltipContainerState
> {
// static propTypes = {
// internal_id: PropTypes.string,
// targetElement: PropTypes.oneOfType([
// PropTypes.string,
// PropTypes.func,
// PropTypes.object,
// PropTypes.node,
// ]),
// clientX: PropTypes.number,
// active: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
// position: PropTypes.string,
// arrow: PropTypes.string,
// align: PropTypes.string,
// animate_position: PropTypes.oneOfType([
// PropTypes.string,
// PropTypes.bool,
// ]),
// fixed_position: PropTypes.oneOfType([
// PropTypes.string,
// PropTypes.bool,
// ]),
// no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
// useHover: PropTypes.bool,
// style: PropTypes.object,
// attributes: PropTypes.object,
// children: PropTypes.oneOfType([
// PropTypes.string,
// PropTypes.func,
// PropTypes.node,
// ]),
// }

// static defaultProps = {
// internal_id: null,
// targetElement: null,
// clientX: null,
// active: false,
// position: 'center',
// arrow: null,
// align: null,
// animate_position: null,
// fixed_position: null,
// no_animation: null,
// useHover: true,
// style: null,
// attributes: null,
// children: null,
// }

_rootRef = React.createRef<HTMLElement>()
offset = 16
state = {
hide: null,
Expand All @@ -68,6 +88,10 @@ export default class TooltipContainer extends React.PureComponent {
height: 0,
}

_ddt: NodeJS.Timeout
resizeObserver: ResizeObserver
_style: React.CSSProperties

static getDerivedStateFromProps(props, state) {
if (state.leaveInDOM && !props.active && !state.hover) {
state.hide = true
Expand Down Expand Up @@ -247,13 +271,15 @@ export default class TooltipContainer extends React.PureComponent {
}
}

checkWindowPosition(style) {
checkWindowPosition(style: React.CSSProperties) {
if (style.left < 0) {
style.left = this.offset
} else {
try {
const rightOffset =
style.left + this.state.width - window.innerWidth
parseFloat(String(style.left)) +
this.state.width -
window.innerWidth
if (rightOffset > 0) {
style.left = window.innerWidth - this.state.width - this.offset
}
Expand Down Expand Up @@ -287,13 +313,13 @@ export default class TooltipContainer extends React.PureComponent {
}

handleMouseEnter = () => {
if (isTrue(this.props.active) && this.props.useHover) {
if (isTrue(this.props.active) && this.props.useHover !== false) {
this.setState({ hover: true })
}
}

handleMouseLeave = () => {
if (this.props.useHover) {
if (this.props.useHover !== false) {
this.setState({ hover: false })
}
}
Expand Down
16 changes: 0 additions & 16 deletions packages/dnb-eufemia/src/components/tooltip/TooltipHelpers.js
View file

This file was deleted.

Loading

0 comments on commit 8763172

Please sign in to comment.