Rewrite in Typescript: Pill

src/scripts/Lookup.js

@@ -6,7 +6,7 @@ import { FormElement } from './FormElement';
 import Input from './Input';
 import { Icon } from './Icon';
 import { Spinner } from './Spinner';
-import Pill from './Pill';
+import { Pill } from './Pill';
 import DropdownButton from './DropdownButton';
 import { DropdownMenuItem } from './DropdownMenu';
 import { uuid, isElInChildren, registerStyle } from './util';

src/scripts/Pill.js → src/scripts/Pill.tsx

@@ -1,26 +1,40 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component, ReactHTML } from 'react';
 import classnames from 'classnames';
 
-import { Icon } from './Icon';
+import { Icon, IconCategory } from './Icon';
 import { Button } from './Button';
 
-class Pill extends Component {
-  onPillClick(e) {
+export type PillProps = {
+  className?: string;
+  label?: string;
+  truncate?: boolean;
+  disabled?: boolean;
+  tag?: keyof ReactHTML;
+  icon?: {
+    category?: IconCategory;
+    icon?: string;
+  };
+  pillRef?: (node?: HTMLElement) => void;
+  onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  onRemove?: (e: any) => void;
+};
+
+export class Pill extends Component<PillProps> {
+  onPillClick(e: React.MouseEvent<HTMLElement, MouseEvent>) {
     if (this.props.onClick) {
       this.props.onClick(e);
     }
   }
 
-  onPillRemove(e) {
+  onPillRemove(e: any) {
     e.preventDefault();
     e.stopPropagation();
     if (this.props.onRemove) {
       this.props.onRemove(e);
     }
   }
 
-  onKeyDown(e) {
+  onKeyDown(e: React.KeyboardEvent<HTMLElement>) {
     if (e.keyCode === 8 || e.keyCode === 46) {
       // Bacspace / DEL
       e.preventDefault();
@@ -39,22 +53,22 @@ class Pill extends Component {
       truncate,
       className,
     } = this.props;
-    const Tag = disabled ? 'span' : tag || 'a';
+    const Tag: any = disabled ? 'span' : tag || 'a';
     const pillClassNames = classnames(
       'slds-pill',
       { 'slds-truncate': truncate },
       className
     );
     return (
       <Tag
-        ref={(node) => {
+        ref={(node: HTMLElement) => {
           if (pillRef) pillRef(node);
         }}
         className={pillClassNames}
         onKeyDown={this.onKeyDown.bind(this)}
         onClick={this.onPillClick.bind(this)}
       >
-        {icon ? (
+        {icon && icon.icon ? (
           <Icon
             className='slds-pill__icon'
             category={icon.category}
@@ -77,20 +91,3 @@ class Pill extends Component {
     );
   }
 }
-
-Pill.propTypes = {
-  onClick: PropTypes.func,
-  onRemove: PropTypes.func,
-  truncate: PropTypes.bool,
-  className: PropTypes.string,
-  label: PropTypes.string,
-  tag: PropTypes.string,
-  pillRef: PropTypes.func,
-  icon: PropTypes.shape({
-    category: PropTypes.string,
-    icon: PropTypes.string,
-  }),
-  disabled: PropTypes.bool,
-};
-
-export default Pill;

src/scripts/index.js

@@ -40,7 +40,6 @@ import Table, {
 } from './Table';
 import Popover, { PopoverHeader, PopoverBody } from './Popover';
 import Toggle from './Toggle';
-import Pill from './Pill';
 
 export {
   Notification,
@@ -91,7 +90,6 @@ export {
   TableRowColumn,
   TableRowColumnActions,
   Toggle,
-  Pill,
 };
 
 export { default as util } from './util';
@@ -107,6 +105,7 @@ export * from './Radio';
 export * from './RadioGroup';
 export * from './Form';
 export * from './FormElement';
+export * from './Pill';
 export * from './Spinner';
 export * from './Text';
 export * from './Textarea';