style(Dropdown): update typings and propTypes usage (#1334)

Author: layershifter

src/modules/Dropdown/Dropdown.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { Children, cloneElement, PropTypes } from 'react'
 
 import {
@@ -18,23 +18,13 @@ import {
 } from '../../lib'
 import Icon from '../../elements/Icon'
 import Label from '../../elements/Label'
-
 import DropdownDivider from './DropdownDivider'
 import DropdownItem from './DropdownItem'
 import DropdownHeader from './DropdownHeader'
 import DropdownMenu from './DropdownMenu'
 
 const debug = makeDebugger('dropdown')
 
-const _meta = {
-  name: 'Dropdown',
-  type: META.TYPES.MODULE,
-  props: {
-    pointing: ['left', 'right', 'top', 'top left', 'top right', 'bottom', 'bottom left', 'bottom right'],
-    additionPosition: ['top', 'bottom'],
-  },
-}
-
 /**
  * A dropdown allows a user to select a value from a series of options.
  * @see Form
@@ -43,6 +33,18 @@ const _meta = {
  */
 export default class Dropdown extends Component {
   static propTypes = {
+    /** An element type to render as (string or function). */
+    as: customPropTypes.as,
+
+    /** Label prefixed to an option added by a user. */
+    additionLabel: PropTypes.oneOfType([
+      PropTypes.element,
+      PropTypes.string,
+    ]),
+
+    /** Position of the `Add: ...` option in the dropdown list ('top' or 'bottom'). */
+    additionPosition: PropTypes.oneOf(['top', 'bottom']),
+
     /**
      * Allow user additions to the list of options (boolean).
      * Requires the use of `selection`, `options` and `search`.
@@ -52,19 +54,7 @@ export default class Dropdown extends Component {
       PropTypes.bool,
     ]),
 
-    /** Position of the `Add: ...` option in the dropdown list ('top' or 'bottom'). */
-    additionPosition: PropTypes.oneOf(_meta.props.additionPosition),
-
-    /** Label prefixed to an option added by a user. */
-    additionLabel: PropTypes.oneOfType([
-      PropTypes.element,
-      PropTypes.string,
-    ]),
-
-    /** An element type to render as (string or function). */
-    as: customPropTypes.as,
-
-    /** A Dropdown can reduce its complexity */
+    /** A Dropdown can reduce its complexity. */
     basic: PropTypes.bool,
 
     /** Format the Dropdown to appear as a button. */
@@ -102,15 +92,15 @@ export default class Dropdown extends Component {
     defaultSelectedLabel: customPropTypes.every([
       customPropTypes.demand(['multiple']),
       PropTypes.oneOfType([
-        PropTypes.string,
         PropTypes.number,
+        PropTypes.string,
       ]),
     ]),
 
     /** Initial value or value array if multiple. */
     defaultValue: PropTypes.oneOfType([
-      PropTypes.string,
       PropTypes.number,
+      PropTypes.string,
       PropTypes.arrayOf(PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.number,
@@ -141,12 +131,12 @@ export default class Dropdown extends Component {
     /** A dropdown can be formatted to appear inline in other content. */
     inline: PropTypes.bool,
 
-    /** A dropdown can be labeled. */
-    labeled: PropTypes.bool,
-
     /** A dropdown can be formatted as a Menu item. */
     item: PropTypes.bool,
 
+    /** A dropdown can be labeled. */
+    labeled: PropTypes.bool,
+
     /** A dropdown can show that it is currently loading data. */
     loading: PropTypes.bool,
 
@@ -184,60 +174,60 @@ export default class Dropdown extends Component {
     onChange: PropTypes.func,
 
     /**
-     * Called when a close event happens.
+     * Called on click.
      *
      * @param {SyntheticEvent} event - React's original SyntheticEvent.
      * @param {object} data - All props.
      */
-    onClose: PropTypes.func,
+    onClick: PropTypes.func,
 
     /**
-     * Called when a multi-select label is clicked.
+     * Called when a close event happens.
      *
      * @param {SyntheticEvent} event - React's original SyntheticEvent.
-     * @param {object} data - All label props.
+     * @param {object} data - All props.
      */
-    onLabelClick: PropTypes.func,
+    onClose: PropTypes.func,
 
     /**
-     * Called when an open event happens.
+     * Called on focus.
      *
      * @param {SyntheticEvent} event - React's original SyntheticEvent.
      * @param {object} data - All props.
      */
-    onOpen: PropTypes.func,
+    onFocus: PropTypes.func,
 
     /**
-     * Called on search input change.
+     * Called when a multi-select label is clicked.
      *
      * @param {SyntheticEvent} event - React's original SyntheticEvent.
-     * @param {string} value - Current value of search input.
+     * @param {object} data - All label props.
      */
-    onSearchChange: PropTypes.func,
+    onLabelClick: PropTypes.func,
 
     /**
-     * Called on click.
+     * Called on mousedown.
      *
      * @param {SyntheticEvent} event - React's original SyntheticEvent.
      * @param {object} data - All props.
      */
-    onClick: PropTypes.func,
+    onMouseDown: PropTypes.func,
 
     /**
-     * Called on focus.
+     * Called when an open event happens.
      *
      * @param {SyntheticEvent} event - React's original SyntheticEvent.
      * @param {object} data - All props.
      */
-    onFocus: PropTypes.func,
+    onOpen: PropTypes.func,
 
     /**
-     * Called on mousedown.
+     * Called on search input change.
      *
      * @param {SyntheticEvent} event - React's original SyntheticEvent.
-     * @param {object} data - All props.
+     * @param {string} value - Current value of search input.
      */
-    onMouseDown: PropTypes.func,
+    onSearchChange: PropTypes.func,
 
     /** Controls whether or not the dropdown menu is displayed. */
     open: PropTypes.bool,
@@ -257,13 +247,10 @@ export default class Dropdown extends Component {
     /** A dropdown can be formatted so that its menu is pointing. */
     pointing: PropTypes.oneOfType([
       PropTypes.bool,
-      PropTypes.oneOf(_meta.props.pointing),
+      PropTypes.oneOf(['left', 'right', 'top', 'top left', 'top right', 'bottom', 'bottom left', 'bottom right']),
     ]),
 
-    /**
-     * A function that takes (data, index, defaultLabelProps) and returns
-     * shorthand for Label .
-     */
+    /** A function that takes (data, index, defaultLabelProps) and returns shorthand for Label. */
     renderLabel: PropTypes.func,
 
     /** A dropdown can have its menu scroll. */
@@ -280,6 +267,9 @@ export default class Dropdown extends Component {
 
     // TODO 'searchInMenu' or 'search='in menu' or ???  How to handle this markup and functionality?
 
+    /** Define whether the highlighted item should be selected on blur. */
+    selectOnBlur: PropTypes.bool,
+
     /** Currently selected label in multi-select. */
     selectedLabel: customPropTypes.every([
       customPropTypes.demand(['multiple']),
@@ -296,9 +286,6 @@ export default class Dropdown extends Component {
       PropTypes.bool,
     ]),
 
-    /** Define whether the highlighted item should be selected on blur. */
-    selectOnBlur: PropTypes.bool,
-
     /** A simple dropdown can open without Javascript. */
     simple: PropTypes.bool,
 
@@ -345,7 +332,11 @@ export default class Dropdown extends Component {
     'selectedLabel',
   ]
 
-  static _meta = _meta
+  static _meta = {
+    name: 'Dropdown',
+    type: META.TYPES.MODULE,
+  }
+
   static Divider = DropdownDivider
   static Header = DropdownHeader
   static Item = DropdownItem

src/modules/Dropdown/DropdownDivider.js

@@ -8,6 +8,9 @@ import {
   META,
 } from '../../lib'
 
+/**
+ * A dropdown menu can contain dividers to separate related content.
+ */
 function DropdownDivider(props) {
   const { className } = props
   const classes = cx('divider', className)

src/modules/Dropdown/DropdownHeader.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -10,8 +10,17 @@ import {
 } from '../../lib'
 import Icon from '../../elements/Icon'
 
+/**
+ * A dropdown menu can contain a header.
+ */
 function DropdownHeader(props) {
-  const { children, className, content, icon } = props
+  const {
+    children,
+    className,
+    content,
+    icon,
+  } = props
+
   const classes = cx('header', className)
   const rest = getUnhandledProps(DropdownHeader, props)
   const ElementType = getElementType(DropdownHeader, props)

src/modules/Dropdown/DropdownItem.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { Component, PropTypes } from 'react'
 
 import {
@@ -17,7 +17,7 @@ import Image from '../../elements/Image'
 import Label from '../../elements/Label'
 
 /**
- * An item sub-component for Dropdown component
+ * An item sub-component for Dropdown component.
  */
 export default class DropdownItem extends Component {
   static propTypes = {
@@ -54,6 +54,14 @@ export default class DropdownItem extends Component {
     /** Shorthand for Label. */
     label: customPropTypes.itemShorthand,
 
+    /**
+     * Called on click.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All props.
+     */
+    onClick: PropTypes.func,
+
     /**
      * The item currently selected by keyboard shortcut.
      * This is not the active item.
@@ -63,19 +71,11 @@ export default class DropdownItem extends Component {
     /** Display text. */
     text: customPropTypes.contentShorthand,
 
-    /** Stored value */
+    /** Stored value. */
     value: PropTypes.oneOfType([
       PropTypes.number,
       PropTypes.string,
     ]),
-
-    /**
-     * Called on click.
-     *
-     * @param {SyntheticEvent} event - React's original SyntheticEvent.
-     * @param {object} data - All props.
-     */
-    onClick: PropTypes.func,
   }
 
   static _meta = {

src/modules/Dropdown/DropdownMenu.js

@@ -1,5 +1,5 @@
-import React, { PropTypes } from 'react'
 import cx from 'classnames'
+import React, { PropTypes } from 'react'
 
 import {
   customPropTypes,
@@ -9,6 +9,9 @@ import {
   useKeyOnly,
 } from '../../lib'
 
+/**
+ * A dropdown menu can contain a menu.
+ */
 function DropdownMenu(props) {
   const { children, className, scrolling } = props
   const classes = cx(