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 ac28883 commit 452e889
Show file tree
Hide file tree
Showing 13 changed files with 255 additions and 310 deletions.
18 changes: 1 addition & 17 deletions packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -425,21 +425,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
width_selector={null}
/>
<Tooltip
active={null}
align={null}
animate_position={false}
arrow="center"
class={null}
className={null}
fixed_position={false}
group={null}
hide_delay={500}
id="dialog_id-tooltip"
no_animation={false}
position="top"
show_delay={300}
size="basis"
skip_portal={null}
target_element={
Object {
"current": <button
Expand Down Expand Up @@ -481,7 +467,6 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
</button>,
}
}
target_selector={null}
tooltip="dialog_title"
>
<TooltipWithEvents
Expand All @@ -494,7 +479,6 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
"className": "dnb-tooltip",
}
}
class={null}
className={null}
fixed_position={false}
group="dialog_id-tooltip"
Expand Down Expand Up @@ -602,8 +586,8 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
"className": "dnb-tooltip",
}
}
class={null}
className={null}
clientX={null}
fixed_position={false}
group="dialog_id-tooltip"
hide_delay={500}
Expand Down
18 changes: 1 addition & 17 deletions packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -423,21 +423,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
width_selector={null}
/>
<Tooltip
active={null}
align={null}
animate_position={false}
arrow="center"
class={null}
className={null}
fixed_position={false}
group={null}
hide_delay={500}
id="drawer_id-tooltip"
no_animation={false}
position="top"
show_delay={300}
size="basis"
skip_portal={null}
target_element={
Object {
"current": <button
Expand Down Expand Up @@ -479,7 +465,6 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
</button>,
}
}
target_selector={null}
tooltip="drawer_title"
>
<TooltipWithEvents
Expand All @@ -492,7 +477,6 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
"className": "dnb-tooltip",
}
}
class={null}
className={null}
fixed_position={false}
group="drawer_id-tooltip"
Expand Down Expand Up @@ -600,8 +584,8 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
"className": "dnb-tooltip",
}
}
class={null}
className={null}
clientX={null}
fixed_position={false}
group="drawer_id-tooltip"
hide_delay={500}
Expand Down
18 changes: 1 addition & 17 deletions packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -414,21 +414,7 @@ exports[`Modal component have to match snapshot 1`] = `
width_selector={null}
/>
<Tooltip
active={null}
align={null}
animate_position={false}
arrow="center"
class={null}
className={null}
fixed_position={false}
group={null}
hide_delay={500}
id="modal_id-tooltip"
no_animation={false}
position="top"
show_delay={300}
size="basis"
skip_portal={null}
target_element={
Object {
"current": <button
Expand Down Expand Up @@ -470,7 +456,6 @@ exports[`Modal component have to match snapshot 1`] = `
</button>,
}
}
target_selector={null}
tooltip="modal_title"
>
<TooltipWithEvents
Expand All @@ -483,7 +468,6 @@ exports[`Modal component have to match snapshot 1`] = `
"className": "dnb-tooltip",
}
}
class={null}
className={null}
fixed_position={false}
group="modal_id-tooltip"
Expand Down Expand Up @@ -591,8 +575,8 @@ exports[`Modal component have to match snapshot 1`] = `
"className": "dnb-tooltip",
}
}
class={null}
className={null}
clientX={null}
fixed_position={false}
group="modal_id-tooltip"
hide_delay={500}
Expand Down
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: null,
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 || 'main-' + this._id,
}
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
Loading

0 comments on commit 452e889

Please sign in to comment.