style(Rating): update typings and propTypes usage (#1253)

src/modules/Rating/Rating.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -13,29 +13,10 @@ import {
 } from '../../lib'
 import RatingIcon from './RatingIcon'
 
-const _meta = {
-  name: 'Rating',
-  type: META.TYPES.MODULE,
-  props: {
-    clearable: ['auto'],
-    icon: ['star', 'heart'],
-    size: _.without(SUI.SIZES, 'medium', 'big'),
-  },
-}
-
 /**
- * A rating indicates user interest in content
+ * A rating indicates user interest in content.
  */
 export default class Rating extends Component {
-  static autoControlledProps = [
-    'rating',
-  ]
-
-  static defaultProps = {
-    clearable: 'auto',
-    maxRating: 1,
-  }
-
   static propTypes = {
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
@@ -49,26 +30,26 @@ export default class Rating extends Component {
      * Setting to `true`/`false` will allow or disallow a user to clear their rating.
      */
     clearable: PropTypes.oneOfType([
-      PropTypes.oneOf(_meta.props.clearable),
       PropTypes.bool,
+      PropTypes.oneOf(['auto']),
     ]),
 
     /** The initial rating value. */
     defaultRating: PropTypes.oneOfType([
-      PropTypes.string,
       PropTypes.number,
+      PropTypes.string,
     ]),
 
     /** You can disable or enable interactive rating.  Makes a read-only rating. */
     disabled: PropTypes.bool,
 
     /** A rating can use a set of star or heart icons. */
-    icon: PropTypes.oneOf(_meta.props.icon),
+    icon: PropTypes.oneOf(['star', 'heart']),
 
     /** The total number of icons. */
     maxRating: PropTypes.oneOfType([
-      PropTypes.string,
       PropTypes.number,
+      PropTypes.string,
     ]),
 
     /**
@@ -81,15 +62,28 @@ export default class Rating extends Component {
 
     /** The current number of active icons. */
     rating: PropTypes.oneOfType([
-      PropTypes.string,
       PropTypes.number,
+      PropTypes.string,
     ]),
 
     /** A progress bar can vary in size. */
-    size: PropTypes.oneOf(_meta.props.size),
+    size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium', 'big')),
+  }
+
+  static autoControlledProps = [
+    'rating',
+  ]
+
+  static defaultProps = {
+    clearable: 'auto',
+    maxRating: 1,
+  }
+
+  static _meta = {
+    name: 'Rating',
+    type: META.TYPES.MODULE,
   }
 
-  static _meta = _meta
   static Icon = RatingIcon
 
   handleIconClick = (e, { index }) => {
@@ -153,11 +147,11 @@ export default class Rating extends Component {
         {_.times(maxRating, (i) => (
           <RatingIcon
             active={rating >= i + 1}
-            index={i}
-            key={i}
             aria-checked={rating === i + 1}
             aria-posinset={i + 1}
             aria-setsize={maxRating}
+            index={i}
+            key={i}
             onClick={this.handleIconClick}
             onMouseEnter={this.handleIconMouseEnter}
             selected={selectedIndex >= i && isSelecting }

src/modules/Rating/RatingIcon.js

@@ -15,12 +15,12 @@ import {
  */
 export default class RatingIcon extends Component {
   static propTypes = {
-    /** Indicates activity of an icon. */
-    active: PropTypes.bool,
-
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
 
+    /** Indicates activity of an icon. */
+    active: PropTypes.bool,
+
     /** Additional classes. */
     className: PropTypes.string,
 
@@ -108,13 +108,13 @@ export default class RatingIcon extends Component {
 
     return (
       <ElementType
-        role='radio'
-        tabIndex={0}
         {...rest}
         className={classes}
-        onKeyUp={this.handleKeyUp}
         onClick={this.handleClick}
+        onKeyUp={this.handleKeyUp}
         onMouseEnter={this.handleMouseEnter}
+        tabIndex={0}
+        role='radio'
       />
     )
   }

src/modules/Rating/index.d.ts

@@ -1,7 +1,8 @@
-import { ReactMouseEvents, SemanticSIZES } from '../..';
 import * as React from 'react';
 
 interface RatingProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -16,51 +17,77 @@ interface RatingProps {
   clearable?: boolean | 'auto';
 
   /** The initial rating value. */
-  defaultRating?: string|number;
+  defaultRating?: number | string;
 
   /** You can disable or enable interactive rating.  Makes a read-only rating. */
-  disabled?:boolean;
+  disabled?: boolean;
 
   /** A rating can use a set of star or heart icons. */
-  icon?: 'star'|'heart';
+  icon?: 'star' | 'heart';
 
   /** The total number of icons. */
-  maxRating?: string|number;
+  maxRating?: number | string;
 
   /**
    * Called after user selects a new rating.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props and proposed rating.
    */
-  onRate?: React.MouseEventHandler<HTMLDivElement>;
+  onRate?: (event: React.MouseEvent<HTMLDivElement>, data: RatingProps) => void;
 
   /** The current number of active icons. */
-  rating?: string|number;
+  rating?: number | string;
 
   /** A progress bar can vary in size. */
-  size?: SemanticSIZES;
+  size?: 'mini' | 'tiny' | 'small' | 'large' | 'huge' | 'massive';
 }
 
-interface RatingClass extends React.ComponentClass<RatingProps> {
+interface RatingComponent extends React.ComponentClass<RatingProps> {
   Icon: typeof RatingIcon;
 }
 
-export const Rating: RatingClass;
+export const Rating: RatingComponent;
 
-interface RatingIconProps extends ReactMouseEvents<HTMLElement> {
-  /** Indicates activity of an icon. */
-  active?: boolean;
+interface RatingIconProps {
+  [key: string]: any;
 
   /** An element type to render as (string or function). */
   as?:any;
 
+  /** Indicates activity of an icon. */
+  active?: boolean;
+
   /** Additional classes. */
   className?: string;
 
   /** An index of icon inside Rating. */
   index?: number;
 
+  /**
+   * Called on click.
+   *
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All props and proposed rating.
+   */
+  onClick?: (event: React.MouseEvent<HTMLElement>, data: RatingIconProps) => void;
+
+  /**
+   * Called on keyup.
+   *
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All props and proposed rating.
+   */
+  onKeyUp?: (event: React.MouseEvent<HTMLElement>, data: RatingIconProps) => void;
+
+  /**
+   * Called on mouseenter.
+   *
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All props and proposed rating.
+   */
+  onMouseEnter?: (event: React.MouseEvent<HTMLElement>, data: RatingIconProps) => void;
+
   /** Indicates selection of an icon. */
   selected?: boolean;
 }

test/specs/modules/Rating/RatingIcon-test.js

@@ -1,8 +1,8 @@
 import React from 'react'
 
-import * as common from 'test/specs/commonTests'
-import RatingIcon from 'src/modules/Rating/RatingIcon'
 import { keyboardKey } from 'src/lib'
+import RatingIcon from 'src/modules/Rating/RatingIcon'
+import * as common from 'test/specs/commonTests'
 import { sandbox } from 'test/utils'
 
 describe('RatingIcon', () => {