Rewrite in Typescript: Popover

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",

src/scripts/Popover.js → src/scripts/Popover.tsx

@@ -1,39 +1,62 @@
 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) => (
   <div className='slds-popover__header'>{props.children}</div>
 );
 
-PopoverHeader.propTypes = {
-  children: PropTypes.node,
-};
+export type PopoverBodyProps = React.HTMLAttributes<HTMLDivElement>;
 
-export const PopoverBody = (props) => (
+export const PopoverBody: React.FC<PopoverBodyProps> = (props) => (
   <div className='slds-popover__body' {...props}>
     {props.children}
   </div>
 );
 
-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<HTMLDivElement>;
+
+export type PopoverState = {
+  hidden?: boolean;
 };
 
-export default class Popover extends React.Component {
-  constructor(props) {
-    super();
+export class Popover extends React.Component<PopoverProps, PopoverState> {
+  private isMouseEntered: boolean = false;
+
+  constructor(props: Readonly<PopoverProps>) {
+    super(props);
 
     this.state = {
       hidden: props.hidden,
     };
 
     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}
       >
         <PopoverBody style={bodyStyle}>{children}</PopoverBody>
       </div>
     );
   }
 }
-
-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,
-};

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';

stories/PopoverStories.js → 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 (
         <Popover
           position={position}

yarn.lock

@@ -1819,6 +1819,13 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
   integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
 
+"@types/react-dom@^16.9.0":
+  version "16.9.0"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.0.tgz#ba6ddb00bf5de700b0eb91daa452081ffccbfdea"
+  integrity sha512-OL2lk7LYGjxn4b0efW3Pvf2KBVP0y1v3wip1Bp7nA79NkOpElH98q3WdCEdDj93b2b0zaeBG9DvriuKjIK5xDA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.8.12":
   version "16.8.12"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.12.tgz#ffbdd7bcd2b7037c3f78e26c708922a2befbb71f"