Rewrite in Typescript: Icon

package.json

@@ -72,10 +72,12 @@
     "@types/classnames": "^2.2.7",
     "@types/enzyme": "^3.9.1",
     "@types/jest": "^24.0.11",
+    "@types/power-assert": "^1.5.0",
     "@types/react": "^16.8.12",
     "@types/storybook__addon-actions": "^3.4.2",
     "@types/storybook__addon-knobs": "^5.0.0",
     "@types/storybook__react": "^4.0.1",
+    "@types/svg4everybody": "^2.1.1",
     "@types/uuid": "^3.4.4",
     "@typescript-eslint/eslint-plugin": "^1.5.0",
     "babel-core": "^7.0.0-bridge.0",

src/scripts/Button.tsx

@@ -1,6 +1,6 @@
 import React, { Component, ReactNode, ButtonHTMLAttributes } from 'react';
 import classnames from 'classnames';
-import Icon from './Icon';
+import { Icon } from './Icon';
 import { Spinner } from './Spinner';
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
@@ -71,7 +71,7 @@ export class Button extends Component<ButtonProps, {}> {
     const inverse = inv || /-?inverse$/.test(type || '');
     return (
       <ButtonIcon
-        icon={icon}
+        icon={icon!}
         align={iconAlign}
         size={iconSize}
         inverse={inverse}
@@ -84,7 +84,7 @@ export class Button extends Component<ButtonProps, {}> {
     const adjoining = icon && (iconAlign === 'right' || !(label || children));
     const iconMoreSize =
       this.props.iconMoreSize || adjoining ? 'x-small' : 'small';
-    return <ButtonIcon icon={iconMore} align='right' size={iconMoreSize} />;
+    return <ButtonIcon icon={iconMore!} align='right' size={iconMoreSize} />;
   }
 
   render() {
@@ -143,7 +143,7 @@ export class Button extends Component<ButtonProps, {}> {
 
 export type ButtonIconProps = {
   className?: string;
-  icon?: string;
+  icon: string;
   align?: ButtonIconAlign;
   size?: ButtonIconSize;
   inverse?: boolean;
@@ -173,13 +173,13 @@ export const ButtonIcon: React.FC<ButtonIconProps> = ({
     inverseClassName,
     className
   );
-  const iconStyle = { ...style, pointerEvents: 'none' };
   return (
     <Icon
       className={iconClassNames}
       icon={icon}
       textColor={null}
-      style={iconStyle}
+      pointerEvents='none'
+      style={style}
       {...props}
     />
   );

src/scripts/DateInput.js

@@ -5,7 +5,7 @@ import moment from 'moment';
 import autoAlign from './AutoAlign';
 import { FormElement } from './FormElement';
 import Input from './Input';
-import Icon from './Icon';
+import { Icon } from './Icon';
 import Datepicker from './Datepicker';
 import { uuid, isElInChildren, registerStyle } from './util';
 

src/scripts/DropdownMenu.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import Icon from './Icon';
+import { Icon } from './Icon';
 import autoAlign from './AutoAlign';
 import { PicklistItem } from './Picklist';
 

src/scripts/Icon.js → src/scripts/Icon.tsx

@@ -1,8 +1,9 @@
-import React, { Component } from 'react';
+import React, { Component, SVGAttributes } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import svg4everybody from 'svg4everybody';
 import { registerStyle, getAssetRoot } from './util';
+import { ComponentSettingsContext } from './ComponentSettings';
 
 svg4everybody();
 
@@ -89,8 +90,55 @@ weeklyview,world,zoomin,zoomout
   .split(/[\s,]+/);
 /* eslint-enable max-len */
 
-export default class Icon extends Component {
-  constructor(props) {
+export type IconCategory =
+  | 'action'
+  | 'custom'
+  | 'doctype'
+  | 'standard'
+  | 'utility';
+export type IconSize = 'x-small' | 'small' | 'medium' | 'large';
+export type IconContainer = boolean | 'default' | 'circle';
+export type IconTextColor = 'default' | 'warning' | 'error' | null;
+
+export type IconProps = {
+  className?: string;
+  containerClassName?: string;
+  category?: IconCategory;
+  icon: string;
+  size?: IconSize;
+  container?: IconContainer;
+  color?: string;
+  textColor?: IconTextColor;
+  tabIndex?: number;
+  fillColor?: string;
+};
+
+export type IconState = {
+  iconColor?: string;
+};
+
+export class Icon extends Component<
+  IconProps & SVGAttributes<SVGElement>,
+  IconState
+> {
+  static contextTypes = { assetRoot: PropTypes.string };
+
+  static ICONS = {
+    STANDARD_ICONS,
+    CUSTOM_ICONS,
+    ACTION_ICONS,
+    DOCTYPE_ICONS,
+    UTILITY_ICONS,
+  };
+
+  // eslint-disable-next-line react/sort-comp
+  context!: Pick<ComponentSettingsContext, 'assetRoot'>;
+
+  iconContainer: HTMLSpanElement | null = null;
+
+  svgIcon: SVGElement | null = null;
+
+  constructor(props: Readonly<IconProps & SVGAttributes<SVGElement>>) {
     super(props);
     this.state = {};
     registerStyle('icon', [['.slds-icon use', '{ pointer-events: none; }']]);
@@ -99,18 +147,21 @@ export default class Icon extends Component {
   componentDidMount() {
     this.checkIconColor();
     const svgEl = this.svgIcon;
-    if (svgEl) {
-      svgEl.setAttribute('focusable', this.props.tabIndex >= 0);
+    if (svgEl && this.props.tabIndex !== undefined) {
+      svgEl.setAttribute('focusable', (this.props.tabIndex >= 0).toString());
     }
   }
 
   componentDidUpdate() {
     this.checkIconColor();
   }
 
-  getIconColor(fillColor, category, icon) {
+  getIconColor(
+    fillColor: string | undefined,
+    category: string | undefined,
+    icon: string
+  ) {
     /* eslint-disable no-unneeded-ternary */
-    /* eslint-disable max-len */
     return this.state.iconColor
       ? this.state.iconColor
       : category === 'doctype'
@@ -126,6 +177,7 @@ export default class Icon extends Component {
       : category === 'action' && /^new_custom/.test(icon)
       ? icon.replace(/^new_custom/, 'custom-')
       : `${category}-${(icon || '').replace(/_/g, '-')}`;
+    /* eslint-enable no-unneeded-ternary */
   }
 
   checkIconColor() {
@@ -143,9 +195,12 @@ export default class Icon extends Component {
     if (!el) {
       return;
     }
-    const bgColorStyle = getComputedStyle(el)['background-color'];
+    const bgColorStyle = getComputedStyle(el).backgroundColor;
     // if no background color set to the icon
-    if (/^(transparent|rgba\(0,\s*0,\s*0,\s*0\))$/.test(bgColorStyle)) {
+    if (
+      bgColorStyle &&
+      /^(transparent|rgba\(0,\s*0,\s*0,\s*0\))$/.test(bgColorStyle)
+    ) {
       this.setState({ iconColor: 'standard-default' });
     }
   }
@@ -162,7 +217,7 @@ export default class Icon extends Component {
     style,
     assetRoot,
     ...props
-  }) {
+  }: any) {
     const iconColor = this.getIconColor(fillColor, category, icon);
     const iconClassNames = classnames(
       {
@@ -201,7 +256,7 @@ export default class Icon extends Component {
     let { category, icon } = props;
 
     if (icon.indexOf(':') > 0) {
-      [category, icon] = icon.split(':');
+      [category, icon] = icon.split(':') as [IconProps['category'], string];
     }
     if (container) {
       const { containerClassName, fillColor, ...pprops } = props;
@@ -232,37 +287,3 @@ export default class Icon extends Component {
     return this.renderSVG({ ...props, category, icon, assetRoot });
   }
 }
-
-Icon.propTypes = {
-  className: PropTypes.string,
-  containerClassName: PropTypes.string,
-  category: PropTypes.oneOf([
-    'action',
-    'custom',
-    'doctype',
-    'standard',
-    'utility',
-  ]),
-  icon: PropTypes.string,
-  size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
-  container: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.oneOf(['default', 'circle']),
-  ]),
-  color: PropTypes.string,
-  textColor: PropTypes.oneOf(['default', 'warning', 'error']),
-  tabIndex: PropTypes.number,
-  fillColor: PropTypes.string,
-};
-
-Icon.contextTypes = {
-  assetRoot: PropTypes.string,
-};
-
-Icon.ICONS = {
-  STANDARD_ICONS,
-  CUSTOM_ICONS,
-  ACTION_ICONS,
-  DOCTYPE_ICONS,
-  UTILITY_ICONS,
-};

src/scripts/Input.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import keycoder from 'keycoder';
-import Icon from './Icon';
+import { Icon } from './Icon';
 import { FormElement } from './FormElement';
 import { Text } from './Text';
 import { uuid, registerStyle } from './util';

src/scripts/Lookup.js

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import autoAlign from './AutoAlign';
 import { FormElement } from './FormElement';
 import Input from './Input';
-import Icon from './Icon';
+import { Icon } from './Icon';
 import { Spinner } from './Spinner';
 import Pill from './Pill';
 import DropdownButton from './DropdownButton';

src/scripts/Notification.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Button } from './Button';
-import Icon from './Icon';
+import { Icon } from './Icon';
 
 const NOTIFICATION_TYPES = ['alert', 'toast'];
 

src/scripts/Picklist.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { FormElement } from './FormElement';
-import Icon from './Icon';
+import { Icon } from './Icon';
 import { Button } from './Button';
 import DropdownMenu, { DropdownMenuItem } from './DropdownMenu';
 import { uuid, isElInChildren } from './util';

src/scripts/Pill.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import Icon from './Icon';
+import { Icon } from './Icon';
 import { Button } from './Button';
 
 class Pill extends Component {

src/scripts/SalesPath.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import Icon from './Icon';
+import { Icon } from './Icon';
 
 class SalesPath extends React.Component {
   constructor() {

src/scripts/Table.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import Icon from './Icon';
+import { Icon } from './Icon';
 
 export class TableHeader extends Component {
   renderBaseHeaderRow() {

src/scripts/index.js

@@ -1,7 +1,6 @@
 // TODO: revert
 // changed
 // because of https://github.com/gaearon/react-hot-loader/issues/158
-import Icon from './Icon';
 import DropdownButton from './DropdownButton';
 import DropdownMenu, {
   DropdownMenuItem,
@@ -47,7 +46,6 @@ export {
   Notification,
   Alert,
   Toast,
-  Icon,
   DropdownButton,
   DropdownMenu,
   DropdownMenuItem,
@@ -103,6 +101,7 @@ export * from './BreadCrumbs';
 export * from './Button';
 export * from './ButtonGroup';
 export * from './Container';
+export * from './Icon';
 export * from './MediaObject';
 export * from './Radio';
 export * from './RadioGroup';