diff --git a/package.json b/package.json
index e023895cd..5de71e022 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
"@types/jest": "^24.0.11",
"@types/power-assert": "^1.5.0",
"@types/react": "^16.8.12",
+ "@types/react-dom": "^16.9.0",
"@types/storybook__addon-actions": "^3.4.2",
"@types/storybook__addon-knobs": "^5.0.0",
"@types/storybook__react": "^4.0.1",
diff --git a/src/scripts/Popover.js b/src/scripts/Popover.tsx
similarity index 65%
rename from src/scripts/Popover.js
rename to src/scripts/Popover.tsx
index c9b537bb7..a5c214e35 100644
--- a/src/scripts/Popover.js
+++ b/src/scripts/Popover.tsx
@@ -1,30 +1,55 @@
import React from 'react';
-import PropTypes from 'prop-types';
import classnames from 'classnames';
import { findDOMNode } from 'react-dom';
-import { isElInChildren, cleanProps } from './util';
+import { isElInChildren } from './util';
-export const PopoverHeader = (props) => (
+export const PopoverHeader: React.FC = (props) => (
{props.children}
);
-PopoverHeader.propTypes = {
- children: PropTypes.node,
-};
+export type PopoverBodyProps = React.HTMLAttributes;
-export const PopoverBody = (props) => (
+export const PopoverBody: React.FC = (props) => (
{props.children}
);
-PopoverBody.propTypes = {
- children: PropTypes.node,
+export type PopoverPosition =
+ | 'top'
+ | 'top-left'
+ | 'top-right'
+ | 'bottom'
+ | 'bottom-left'
+ | 'bottom-right'
+ | 'left'
+ | 'left-top'
+ | 'left-bottom'
+ | 'right'
+ | 'right-top'
+ | 'right-bottom';
+
+export type PopoverTheme = 'info' | 'success' | 'warning' | 'error';
+
+export type PopoverProps = {
+ position?: PopoverPosition;
+ hidden?: boolean;
+ theme?: PopoverTheme;
+ tooltip?: boolean;
+ hover?: boolean;
+ bodyStyle?: object;
+ trigger?: () => any;
+} & React.HTMLAttributes;
+
+export type PopoverState = {
+ hidden?: boolean;
};
-export default class Popover extends React.Component {
- constructor(props) {
- super();
+export class Popover extends React.Component {
+ private isMouseEntered: boolean = false;
+
+ constructor(props: Readonly) {
+ super(props);
this.state = {
hidden: props.hidden,
@@ -32,8 +57,6 @@ export default class Popover extends React.Component {
this.documentClick = this.documentClick.bind(this);
- this.isMouseEntered = false;
-
this.onMouseEnter = this.onMouseEnter.bind(this);
this.onMouseLeave = this.onMouseLeave.bind(this);
}
@@ -60,7 +83,7 @@ export default class Popover extends React.Component {
this.toggle(false);
}
- documentClick(e) {
+ documentClick(e: any) {
let triggerEl;
const { trigger } = this.props;
if (trigger) {
@@ -81,7 +104,7 @@ export default class Popover extends React.Component {
}
}
- toggle(value) {
+ toggle(value: boolean) {
this.setState((prevState) => ({
hidden: typeof value !== 'undefined' ? !value : !prevState.hidden,
}));
@@ -99,12 +122,16 @@ export default class Popover extends React.Component {
const {
children,
position,
+ /* eslint-disable @typescript-eslint/no-unused-vars */
+ hidden = true,
+ hover,
+ trigger,
+ /* eslint-enable @typescript-eslint/no-unused-vars */
theme,
tooltip,
bodyStyle,
...props
} = this.props;
- const pprops = cleanProps(props, Popover.propTypes);
const popoverClassNames = classnames('slds-popover', {
'slds-hide': this.state.hidden,
'slds-popover--tooltip': tooltip,
@@ -117,43 +144,10 @@ export default class Popover extends React.Component {
onMouseLeave={this.onMouseLeave}
className={popoverClassNames}
role='dialog'
- {...pprops}
+ {...props}
>
{children}
);
}
}
-
-const POPOVER_POSITIONS = [
- 'top',
- 'top-left',
- 'top-right',
- 'bottom',
- 'bottom-left',
- 'bottom-right',
- 'left',
- 'left-top',
- 'left-bottom',
- 'right',
- 'right-top',
- 'right-bottom',
-];
-
-const POPOVER_THEMES = ['info', 'success', 'warning', 'error'];
-
-Popover.propTypes = {
- position: PropTypes.oneOf(POPOVER_POSITIONS),
- hidden: PropTypes.bool,
- theme: PropTypes.oneOf(POPOVER_THEMES),
- tooltip: PropTypes.bool,
- children: PropTypes.node,
- hover: PropTypes.bool,
- trigger: PropTypes.func,
- /* eslint-disable react/forbid-prop-types */
- bodyStyle: PropTypes.object,
-};
-
-Popover.defaultProps = {
- hidden: true,
-};
diff --git a/src/scripts/index.js b/src/scripts/index.js
index 70d9da024..7503d404a 100644
--- a/src/scripts/index.js
+++ b/src/scripts/index.js
@@ -21,7 +21,6 @@ import Table, {
TableRowColumn,
TableRowColumnActions,
} from './Table';
-import Popover, { PopoverHeader, PopoverBody } from './Popover';
export {
Datepicker,
@@ -38,9 +37,6 @@ export {
PageHeaderDetailItem,
PageHeaderDetailBody,
PageHeaderDetailLabel,
- Popover,
- PopoverHeader,
- PopoverBody,
Table,
TableHeader,
TableBody,
@@ -82,4 +78,5 @@ export * from './Notification';
export * from './Tree';
export * from './TreeNode';
export * from './SalesPath';
+export * from './Popover';
export * from './ComponentSettings';
diff --git a/stories/PopoverStories.js b/stories/PopoverStories.tsx
similarity index 93%
rename from stories/PopoverStories.js
rename to stories/PopoverStories.tsx
index f59cd3a79..7928a7cc2 100644
--- a/stories/PopoverStories.js
+++ b/stories/PopoverStories.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { select, boolean } from '@storybook/addon-knobs';
-import { Popover } from '../src/scripts';
+import { Popover, PopoverPosition, PopoverTheme } from '../src/scripts';
const popoverText = `Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Commodi laudantium molestias reprehenderit nostrum quod natus saepe
@@ -13,7 +13,7 @@ storiesOf('Popover', module)
'Controlled with knobs',
() => {
const positionOptions = {
- '': '(none)',
+ '(none)': '',
left: 'left',
right: 'right',
top: 'top',
@@ -27,17 +27,21 @@ storiesOf('Popover', module)
'bottom-left': 'bottom-left',
'bottom-right': 'bottom-right',
};
- const position = select('position', positionOptions);
+ const position = select(
+ 'position',
+ positionOptions,
+ ''
+ ) as PopoverPosition;
const themeOptions = {
- '': '(none)',
+ '(none)': '',
info: 'info',
success: 'success',
warning: 'warning',
error: 'error',
};
- const theme = select('theme', themeOptions);
+ const theme = select('theme', themeOptions, '') as PopoverTheme;
const hidden = boolean('hidden', false);
- const tooltip = boolean('tooltip');
+ const tooltip = boolean('tooltip', false);
return (