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 (