style(Message): update typings and remove propTypes (Semantic-Org#1254)

* style(Message): update typings and remove propTypes * Update MessageItem.js
harel · Feb 18, 2017 · f45aa6e · f45aa6e
1 parent 2841ed5
commit f45aa6e
Show file tree

Hide file tree

Showing 7 changed files with 220 additions and 175 deletions.
diff --git a/src/collections/Message/Message.js b/src/collections/Message/Message.js
@@ -1,6 +1,6 @@
-import _ from 'lodash'
-import React, { PropTypes } from 'react'
 import cx from 'classnames'
+import _ from 'lodash'
+import React, { Component, PropTypes } from 'react'
 
 import {
   createShorthand,
@@ -13,175 +13,178 @@ import {
   useKeyOrValueAndKey,
 } from '../../lib'
 import Icon from '../../elements/Icon'
-
 import MessageContent from './MessageContent'
 import MessageHeader from './MessageHeader'
 import MessageList from './MessageList'
 import MessageItem from './MessageItem'
 
 /**
- * A message displays information that explains nearby content
+ * A message displays information that explains nearby content.
  * @see Form
  */
-function Message(props) {
-  const {
-    children,
-    className,
-    content,
-    header,
-    icon,
-    list,
-    onDismiss,
-    hidden,
-    visible,
-    floating,
-    compact,
-    attached,
-    warning,
-    info,
-    positive,
-    success,
-    negative,
-    error,
-    color,
-    size,
-  } = props
-
-  const classes = cx(
-    'ui',
-    size,
-    color,
-    useKeyOnly(icon, 'icon'),
-    useKeyOnly(hidden, 'hidden'),
-    useKeyOnly(visible, 'visible'),
-    useKeyOnly(floating, 'floating'),
-    useKeyOnly(compact, 'compact'),
-    useKeyOrValueAndKey(attached, 'attached'),
-    useKeyOnly(warning, 'warning'),
-    useKeyOnly(info, 'info'),
-    useKeyOnly(positive, 'positive'),
-    useKeyOnly(success, 'success'),
-    useKeyOnly(negative, 'negative'),
-    useKeyOnly(error, 'error'),
-    'message',
-    className,
-  )
-
-  const dismissIcon = onDismiss && <Icon name='close' onClick={onDismiss} />
-  const rest = getUnhandledProps(Message, props)
-  const ElementType = getElementType(Message, props)
-
-  if (!_.isNil(children)) {
-    return (
-      <ElementType {...rest} className={classes}>
-        {dismissIcon}
-        {children}
-      </ElementType>
-    )
-  }
+export default class Message extends Component {
+  static propTypes = {
+    /** An element type to render as (string or function). */
+    as: customPropTypes.as,
 
-  return (
-    <ElementType {...rest} className={classes}>
-      {dismissIcon}
-      {Icon.create(icon)}
-      {(!_.isNil(header) || !_.isNil(content) || !_.isNil(list)) && (
-        <MessageContent>
-          {MessageHeader.create(header)}
-          {MessageList.create(list)}
-          {createShorthand('p', val => ({ children: val }), content)}
-        </MessageContent>
-      )}
-    </ElementType>
-  )
-}
+    /** A message can be formatted to attach itself to other content. */
+    attached: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.oneOf(['bottom']),
+    ]),
 
-Message._meta = {
-  name: 'Message',
-  type: META.TYPES.COLLECTION,
-  props: {
-    attached: ['bottom'],
-    color: SUI.COLORS,
-    size: _.without(SUI.SIZES, 'medium'),
-  },
-}
+    /** Primary content. */
+    children: PropTypes.node,
+
+    /** Additional classes. */
+    className: PropTypes.string,
+
+    /** A message can be formatted to be different colors. */
+    color: PropTypes.oneOf(SUI.COLORS),
 
-Message.propTypes = {
-  /** An element type to render as (string or function). */
-  as: customPropTypes.as,
+    /** A message can only take up the width of its content. */
+    compact: PropTypes.bool,
 
-  /** Primary content. */
-  children: PropTypes.node,
+    /** Shorthand for primary content. */
+    content: customPropTypes.contentShorthand,
 
-  /** Additional classes. */
-  className: PropTypes.string,
+    /** A message may be formatted to display a negative message. Same as `negative`. */
+    error: PropTypes.bool,
 
-  /** Shorthand for primary content. */
-  content: customPropTypes.contentShorthand,
+    /** A message can float above content that it is related to. */
+    floating: PropTypes.bool,
 
-  /** Shorthand for MessageHeader. */
-  header: customPropTypes.itemShorthand,
+    /** Shorthand for MessageHeader. */
+    header: customPropTypes.itemShorthand,
 
-  /** A message can contain an icon. */
-  icon: PropTypes.oneOfType([
-    PropTypes.bool,
-    customPropTypes.itemShorthand,
-  ]),
+    /** A message can be hidden. */
+    hidden: PropTypes.bool,
 
-  /** Array shorthand items for the MessageList. Mutually exclusive with children. */
-  list: customPropTypes.collectionShorthand,
+    /** A message can contain an icon. */
+    icon: PropTypes.oneOfType([
+      customPropTypes.itemShorthand,
+      PropTypes.bool,
+    ]),
 
-  /**
-   * A message that the user can choose to hide.
-   * Called when the user clicks the "x" icon. This also adds the "x" icon.
-   */
-  onDismiss: PropTypes.func,
+    /** A message may be formatted to display information. */
+    info: PropTypes.bool,
 
-  /** A message can be hidden. */
-  hidden: PropTypes.bool,
+    /** Array shorthand items for the MessageList. Mutually exclusive with children. */
+    list: customPropTypes.collectionShorthand,
 
-  /** A message can be set to visible to force itself to be shown. */
-  visible: PropTypes.bool,
+    /** A message may be formatted to display a negative message. Same as `error`. */
+    negative: PropTypes.bool,
 
-  /** A message can float above content that it is related to. */
-  floating: PropTypes.bool,
+    /**
+     * A message that the user can choose to hide.
+     * Called when the user clicks the "x" icon. This also adds the "x" icon.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All props.
+     */
+    onDismiss: PropTypes.func,
 
-  /** A message can only take up the width of its content. */
-  compact: PropTypes.bool,
+    /** A message may be formatted to display a positive message.  Same as `success`. */
+    positive: PropTypes.bool,
 
-  /** A message can be formatted to attach itself to other content. */
-  attached: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.oneOf(Message._meta.props.attached),
-  ]),
+    /** A message may be formatted to display a positive message.  Same as `positive`. */
+    success: PropTypes.bool,
 
-  /** A message may be formatted to display warning messages. */
-  warning: PropTypes.bool,
+    /** A message can have different sizes. */
+    size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')),
 
-  /** A message may be formatted to display information. */
-  info: PropTypes.bool,
+    /** A message can be set to visible to force itself to be shown. */
+    visible: PropTypes.bool,
 
-  /** A message may be formatted to display a positive message.  Same as `success`. */
-  positive: PropTypes.bool,
+    /** A message may be formatted to display warning messages. */
+    warning: PropTypes.bool,
+  }
 
-  /** A message may be formatted to display a positive message.  Same as `positive`. */
-  success: PropTypes.bool,
+  static _meta = {
+    name: 'Message',
+    type: META.TYPES.COLLECTION,
+  }
 
-  /** A message may be formatted to display a negative message. Same as `error`. */
-  negative: PropTypes.bool,
+  static Content = MessageContent
+  static Header = MessageHeader
+  static List = MessageList
+  static Item = MessageItem
 
-  /** A message may be formatted to display a negative message. Same as `negative`. */
-  error: PropTypes.bool,
+  handleDismiss = e => {
+    const { onDismiss } = this.props
 
-  /** A message can be formatted to be different colors. */
-  color: PropTypes.oneOf(Message._meta.props.color),
+    if (onDismiss) onDismiss(e, this.props)
+  }
 
-  /** A message can have different sizes. */
-  size: PropTypes.oneOf(Message._meta.props.size),
-}
+  render() {
+    const {
+      attached,
+      children,
+      className,
+      color,
+      compact,
+      content,
+      error,
+      floating,
+      header,
+      hidden,
+      icon,
+      info,
+      list,
+      negative,
+      onDismiss,
+      positive,
+      size,
+      success,
+      visible,
+      warning,
+    } = this.props
+
+    const classes = cx(
+      'ui',
+      color,
+      size,
+      useKeyOnly(compact, 'compact'),
+      useKeyOnly(error, 'error'),
+      useKeyOnly(floating, 'floating'),
+      useKeyOnly(hidden, 'hidden'),
+      useKeyOnly(icon, 'icon'),
+      useKeyOnly(info, 'info'),
+      useKeyOnly(negative, 'negative'),
+      useKeyOnly(positive, 'positive'),
+      useKeyOnly(success, 'success'),
+      useKeyOnly(visible, 'visible'),
+      useKeyOnly(warning, 'warning'),
+      useKeyOrValueAndKey(attached, 'attached'),
+      'message',
+      className,
+    )
+
+    const dismissIcon = onDismiss && <Icon name='close' onClick={this.handleDismiss} />
+    const rest = getUnhandledProps(Message, this.props)
+    const ElementType = getElementType(Message, this.props)
 
-Message.Content = MessageContent
-Message.Header = MessageHeader
-Message.List = MessageList
-Message.Item = MessageItem
+    if (!_.isNil(children)) {
+      return (
+        <ElementType {...rest} className={classes}>
+          {dismissIcon}
+          {children}
+        </ElementType>
+      )
+    }
 
-export default Message
+    return (
+      <ElementType {...rest} className={classes}>
+        {dismissIcon}
+        {Icon.create(icon)}
+        {(!_.isNil(header) || !_.isNil(content) || !_.isNil(list)) && (
+          <MessageContent>
+            {MessageHeader.create(header)}
+            {MessageList.create(list)}
+            {createShorthand('p', val => ({ children: val }), content)}
+          </MessageContent>
+        )}
+      </ElementType>
+    )
+  }
+}
diff --git a/src/collections/Message/MessageContent.js b/src/collections/Message/MessageContent.js
@@ -8,6 +8,9 @@ import {
   META,
 } from '../../lib'
 
+/**
+ * A message can contain a content.
+ */
 function MessageContent(props) {
   const { children, className } = props
   const classes = cx('content', className)

diff --git a/src/collections/Message/MessageHeader.js b/src/collections/Message/MessageHeader.js
@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -10,13 +10,20 @@ import {
   META,
 } from '../../lib'
 
+/**
+ * A message can contain a header.
+ */
 function MessageHeader(props) {
   const { children, className, content } = props
   const classes = cx('header', className)
   const rest = getUnhandledProps(MessageHeader, props)
   const ElementType = getElementType(MessageHeader, props)
 
-  return <ElementType {...rest} className={classes}>{_.isNil(children) ? content : children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {_.isNil(children) ? content : children}
+    </ElementType>
+  )
 }
 
 MessageHeader._meta = {
@@ -32,11 +39,11 @@ MessageHeader.propTypes = {
   /** Primary content. */
   children: PropTypes.node,
 
-  /** Shorthand for primary content. */
-  content: customPropTypes.itemShorthand,
-
   /** Additional classes. */
   className: PropTypes.string,
+
+  /** Shorthand for primary content. */
+  content: customPropTypes.itemShorthand,
 }
 
 MessageHeader.create = createShorthandFactory(MessageHeader, val => ({ content: val }))