feat(material-icon): typescript (#525)

Author: Matt Goo

packages/material-icon/index.js renamed to packages/material-icon/index.tsx

@@ -20,20 +20,50 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React from 'react';
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
+import * as React from 'react';
+import * as classnames from 'classnames';
+import * as Ripple from '@material/react-ripple';
 
-import {withRipple} from '@material/react-ripple';
+export interface MaterialIconDefaultProps extends React.HTMLAttributes<HTMLElement> {
+  icon?: string;
+  className?: string;
+  hasRipple?: boolean;
+  unbounded?: boolean;
+};
 
-export default class MaterialIcon extends React.Component {
-  render() {
-    const {
-      icon,
-      hasRipple,
-      ...otherProps
-    } = this.props;
+export interface MaterialIconProps extends MaterialIconDefaultProps, Ripple.InjectedProps<HTMLElement> {};
+
+const MaterialIconDefault: React.FunctionComponent<MaterialIconProps> = ({
+  className, icon, initRipple, hasRipple, unbounded, ...otherProps // eslint-disable-line react/prop-types
+}) => {
+  const classes = classnames('material-icons', className, {
+    'material-icons--ripple-surface': hasRipple,
+  });
+  return (
+    <i
+      className={classes}
+      ref={initRipple}
+      {...otherProps}
+    >
+      {icon}
+    </i>
+  );
+};
+
+export const RippleMaterialIcon = Ripple.withRipple<MaterialIconProps, HTMLElement>(MaterialIconDefault);
 
+export default class MaterialIcon extends React.Component<
+  MaterialIconProps, {}
+  > {
+  static defaultProps: Partial<MaterialIconProps> = {
+    icon: '',
+    className: '',
+    hasRipple: false,
+    unbounded: false,
+  };
+
+  render() {
+    const {icon, hasRipple, unbounded, ...otherProps} = this.props; // eslint-disable-line no-unused-vars
     if (hasRipple) {
       return (
         <RippleMaterialIcon
@@ -44,7 +74,6 @@ export default class MaterialIcon extends React.Component {
         />
       );
     }
-
     return (
       <MaterialIconDefault
         icon={icon}
@@ -53,52 +82,3 @@ export default class MaterialIcon extends React.Component {
     );
   }
 }
-
-const MaterialIconDefault = (props) => {
-  const {
-    className,
-    icon,
-    initRipple,
-    hasRipple,
-    ...otherProps
-  } = props;
-  const classes = classnames('material-icons', className, {
-    'material-icons--ripple-surface': hasRipple,
-  });
-
-  return (
-    <i
-      className={classes}
-      ref={initRipple}
-      {...otherProps}
-    >
-      {icon}
-    </i>
-  );
-};
-
-export const RippleMaterialIcon = withRipple(MaterialIconDefault);
-
-MaterialIcon.propTypes = {
-  icon: PropTypes.string,
-  hasRipple: PropTypes.bool,
-};
-
-MaterialIcon.defaultProps = {
-  icon: '',
-  hasRipple: false,
-};
-
-MaterialIconDefault.propTypes = {
-  icon: PropTypes.string,
-  className: PropTypes.string,
-  initRipple: PropTypes.func,
-  hasRipple: PropTypes.bool,
-};
-
-MaterialIconDefault.defaultProps = {
-  icon: '',
-  className: '',
-  initRipple: () => {},
-  hasRipple: false,
-};

packages/text-field/index.tsx

@@ -282,6 +282,7 @@ class TextField<T extends {}> extends React.Component<TextFieldProps<T>, TextFie
   }
 
   inputProps(child: React.ReactElement<InputProps<T>>) {
+    // ref does exist on React.ReactElement<InputProps<T>>
     // @ts-ignore
     const {props, ref} = child;
     return Object.assign({}, props, {

test/screenshot/material-icon/index.js renamed to test/screenshot/material-icon/index.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
+import * as React from 'react';
 import MaterialIcon from '../../../packages/material-icon';
 import '../../../packages/material-icon/index.scss';
 
-
-const MaterialIconScreenshotTest = () => {
+const MaterialIconScreenshotTest: React.FunctionComponent = () => {
   return (
     <div>
       <MaterialIcon icon='menu' hasRipple />

test/screenshot/text-field/attributesMap.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {HelperText} from '../../../packages/text-field';
-// @ts-ignore
 import MaterialIcon from '../../../packages/material-icon/index';
 
 export declare type HelperTextMapType = {helperText: HelperText};

test/screenshot/text-field/helper-text/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-// @ts-ignore
-import HelperText from '../../../../packages/text-field/helper-text/index.tsx';
+import HelperText from '../../../../packages/text-field/helper-text/index';
 
 import '../../../../packages/text-field/helper-text/index.scss';
 

test/screenshot/text-field/icon/index.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
-// @ts-ignore
-import Icon from '../../../../packages/text-field/icon/index.tsx';
-// TODO: return to remove these ts-ignores
-// @ts-ignore
-import MaterialIcon from '../../../../packages/material-icon/index.js';
+import Icon from '../../../../packages/text-field/icon/index';
+import MaterialIcon from '../../../../packages/material-icon/index';
 import '../../../../packages/text-field/icon/index.scss';
 
 const TextFieldIconScreenshotTest = () => {
@@ -16,7 +13,7 @@ const TextFieldIconScreenshotTest = () => {
       </Icon>
 
       <Icon>
-        <MaterialIcon tabIndex='0' role='button' icon='favorite' />
+        <MaterialIcon tabIndex={0} role='button' icon='favorite' />
       </Icon>
     </div>
   );

test/screenshot/text-field/textArea.tsx

@@ -1,6 +1,4 @@
 import * as React from 'react';
-// @ts-ignore
-import HelperText from '../../../packages/text-field/helper-text/index.tsx'; // eslint-disable-line no-unused-vars
 import {
   denseMap,
   requiredMap,

test/unit/material-icon/index.test.js renamed to test/unit/material-icon/index.test.tsx

@@ -1,19 +1,22 @@
-import React from 'react';
+import * as React from 'react';
 import {assert} from 'chai';
 import {mount} from 'enzyme';
-import MaterialIcon, {RippleMaterialIcon} from '../../../packages/material-icon/index';
+
+import MaterialIcon, {
+  RippleMaterialIcon,
+} from '../../../packages/material-icon/index';
 
 suite('MaterialIcon');
 
 test('classNames adds classes', () => {
-  const wrapper = mount(<MaterialIcon className='test-class-name'/>);
+  const wrapper = mount(<MaterialIcon className='test-class-name' />);
   const icon = wrapper.find('.material-icons');
   assert.isTrue(icon.hasClass('test-class-name'));
   assert.equal(icon.length, 1);
 });
 
 test('classNames adds ripple class if hasRipple is true', () => {
-  const wrapper = mount(<MaterialIcon hasRipple className='test-class-name'/>);
+  const wrapper = mount(<MaterialIcon hasRipple className='test-class-name' />);
   const icon = wrapper.find('.material-icons');
   assert.isTrue(icon.hasClass('test-class-name'));
   assert.isTrue(icon.hasClass('material-icons--ripple-surface'));
@@ -23,19 +26,16 @@ test('has icon type as child', () => {
   const wrapper = mount(<MaterialIcon icon='menu' />);
   assert.equal(wrapper.find('.material-icons').text(), 'menu');
 });
-
-const rippledIconComponent = <RippleMaterialIcon hasRipple unbounded icon='menu' />;
+const rippledIconComponent = (
+  <RippleMaterialIcon hasRipple unbounded icon='menu' />
+);
 
 test('if hasRipple true, then it should contain RippleMaterialIcon', () => {
-  const wrapper = mount(
-    <MaterialIcon icon='menu' hasRipple />
-  );
+  const wrapper = mount(<MaterialIcon icon='menu' hasRipple />);
   assert.isTrue(wrapper.contains(rippledIconComponent));
 });
 
 test('if hasRipple false, then it should not contain RippleMaterialIcon', () => {
-  const wrapper = mount(
-    <MaterialIcon icon='menu' />
-  );
+  const wrapper = mount(<MaterialIcon icon='menu' />);
   assert.isFalse(wrapper.contains(rippledIconComponent));
 });

test/unit/text-field/icon/index.test.tsx

@@ -3,9 +3,7 @@ import * as td from 'testdouble';
 import {assert} from 'chai';
 import {shallow} from 'enzyme';
 import Icon from '../../../../packages/text-field/icon/index';
-// TODO: fix with #513
-// @ts-ignore
-import MaterialIcon from '../../../../packages/material-icon/index.js';
+import MaterialIcon from '../../../../packages/material-icon/index';
 
 suite('Text Field Icon');
 
@@ -166,7 +164,7 @@ test('#adapter.removeAttr for role', () => {
 test('#adapter.getAttr for tabIndex works with Custom Component', () => {
   const wrapper = shallow<Icon>(
     <Icon>
-      <MaterialIcon icon='favorite' tabIndex='0' />
+      <MaterialIcon icon='favorite' tabIndex={0} />
     </Icon>
   );
   const tabIndex = wrapper.instance().foundation_.adapter_.getAttr('tabindex');
@@ -186,7 +184,7 @@ test('#adapter.getAttr for role works with Custom Component', () => {
 test('#adapter.setAttr for tabIndex works with Custom Component', () => {
   const wrapper = shallow<Icon>(
     <Icon>
-      <MaterialIcon icon='favorite' tabIndex='0' />
+      <MaterialIcon icon='favorite' tabIndex={0} />
     </Icon>
   );
   wrapper.instance().foundation_.adapter_.setAttr('tabindex', -1);

tsconfig.json

@@ -20,6 +20,7 @@
   ],
   "baseUrl": ".",
   "paths": {
-    "@material/react-ripple": ["packages/ripple/"]
+    "@material/react-ripple": ["packages/ripple/"],
+    "@material/react-material-icon": ["packages/material-icon/"],
   }
 }