style(mixed): update components styling

src/addons/Confirm/Confirm.js

@@ -59,7 +59,7 @@ class Confirm extends Component {
     type: META.TYPES.ADDON,
   }
 
-  handleCancel = e => {
+  handleCancel = (e) => {
     _.invoke(this.props, 'onCancel', e, this.props)
   }
 

src/addons/Portal/Portal.js

@@ -180,7 +180,7 @@ class Portal extends Component {
 
     const didClickInRootNode = this.rootNode.contains(e.target)
 
-    if (closeOnDocumentClick && !didClickInRootNode || closeOnRootNodeClick && didClickInRootNode) {
+    if ((closeOnDocumentClick && !didClickInRootNode) || (closeOnRootNodeClick && didClickInRootNode)) {
       debug('handleDocumentClick()')
 
       this.close(e)
@@ -209,7 +209,7 @@ class Portal extends Component {
     this.mouseLeaveTimer = this.closeWithTimeout(e, mouseLeaveDelay)
   }
 
-  handlePortalMouseEnter = (e) => {
+  handlePortalMouseEnter = () => {
     // In order to enable mousing from the trigger to the portal, we need to
     // clear the mouseleave timer that was set when leaving the trigger.
     const { closeOnPortalMouseLeave } = this.props
@@ -361,7 +361,7 @@ class Portal extends Component {
 
         this.portalNode.addEventListener('mouseleave', this.handlePortalMouseLeave)
         this.portalNode.addEventListener('mouseenter', this.handlePortalMouseEnter)
-      }
+      },
     )
   }
 
@@ -411,8 +411,9 @@ class Portal extends Component {
     if (onUnmount) onUnmount(null, this.props)
   }
 
-  handleRef = c => {
-    this.triggerNode = ReactDOM.findDOMNode(c)
+  handleRef = (c) => {
+    // TODO: Replace findDOMNode with Ref component when it will be merged
+    this.triggerNode = ReactDOM.findDOMNode(c) // eslint-disable-line react/no-find-dom-node
   }
 
   render() {

src/addons/TextArea/TextArea.js

@@ -58,20 +58,20 @@ class TextArea extends Component {
     this.updateHeight()
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
     // removed autoHeight
     if (!this.props.autoHeight && prevProps.autoHeight) {
       this.removeAutoHeightStyles()
     }
     // added autoHeight or value changed
-    if (this.props.autoHeight && !prevProps.autoHeight || prevProps.value !== this.props.value) {
+    if ((this.props.autoHeight && !prevProps.autoHeight) || prevProps.value !== this.props.value) {
       this.updateHeight()
     }
   }
 
   focus = () => (this.ref.focus())
 
-  handleChange = e => {
+  handleChange = (e) => {
     const value = _.get(e, 'target.value')
 
     _.invoke(this.props, 'onChange', e, { ...this.props, value })
@@ -102,7 +102,7 @@ class TextArea extends Component {
 
     // Measure the scrollHeight and update the height to match.
     this.ref.style.height = 'auto'
-    this.ref.style.height = Math.max(parseFloat(minHeight), Math.ceil(this.ref.scrollHeight + borderHeight)) + 'px'
+    this.ref.style.height = `${Math.max(parseFloat(minHeight), Math.ceil(this.ref.scrollHeight + borderHeight))}px`
   }
 
   render() {

src/collections/Form/Form.js

@@ -68,7 +68,7 @@ class Form extends Component {
     /** Automatically show any success Message children. */
     success: PropTypes.bool,
 
-    /** Automatically show any warning Message children .*/
+    /** Automatically show any warning Message children . */
     warning: PropTypes.bool,
 
     /** Forms can automatically divide fields to be equal width. */

src/collections/Menu/Menu.js

@@ -210,7 +210,7 @@ class Menu extends Component {
       useValueAndKey(fixed, 'fixed'),
       useWidthProp(widths, 'item'),
       className,
-      'menu'
+      'menu',
     )
     const rest = getUnhandledProps(Menu, this.props)
     const ElementType = getElementType(Menu, this.props)

src/collections/Menu/MenuItem.js

@@ -113,7 +113,7 @@ export default class MenuItem extends Component {
       position,
       useKeyOnly(active, 'active'),
       useKeyOnly(disabled, 'disabled'),
-      useKeyOnly(icon === true || icon && !(name || content), 'icon'),
+      useKeyOnly(icon === true || (icon && !(name || content)), 'icon'),
       useKeyOnly(header, 'header'),
       useKeyOnly(link, 'link'),
       useKeyOrValueAndKey(fitted, 'fitted'),

src/collections/Message/Message.js

@@ -112,7 +112,7 @@ export default class Message extends Component {
   static List = MessageList
   static Item = MessageItem
 
-  handleDismiss = e => {
+  handleDismiss = (e) => {
     const { onDismiss } = this.props
 
     if (onDismiss) onDismiss(e, this.props)

src/collections/Table/TableHeader.js

@@ -17,7 +17,7 @@ function TableHeader(props) {
   const { children, className, fullWidth } = props
   const classes = cx(
     useKeyOnly(fullWidth, 'full-width'),
-    className
+    className,
   )
   const rest = getUnhandledProps(TableHeader, props)
   const ElementType = getElementType(TableHeader, props)

src/collections/Table/TableHeaderCell.js

@@ -17,7 +17,7 @@ function TableHeaderCell(props) {
   const { as, className, sorted } = props
   const classes = cx(
     useValueAndKey(sorted, 'sorted'),
-    className
+    className,
   )
   const rest = getUnhandledProps(TableHeaderCell, props)
 

src/collections/Table/TableRow.js

@@ -56,7 +56,7 @@ function TableRow(props) {
 
   return (
     <ElementType {...rest} className={classes}>
-      {_.map(cells, (cell) => TableCell.create(cell, { defaultProps: { as: cellAs } }))}
+      {_.map(cells, cell => TableCell.create(cell, { defaultProps: { as: cellAs } }))}
     </ElementType>
   )
 }

src/elements/Button/Button.js

@@ -165,7 +165,7 @@ class Button extends Component {
     if (!_.isNil(attached) || !_.isNil(label)) return 'div'
   }
 
-  computeTabIndex = ElementType => {
+  computeTabIndex = (ElementType) => {
     const { disabled, tabIndex } = this.props
 
     if (!_.isNil(tabIndex)) return tabIndex

src/elements/Container/Container.js

@@ -29,7 +29,7 @@ function Container(props) {
     useKeyOnly(fluid, 'fluid'),
     useTextAlignProp(textAlign),
     'container',
-    className
+    className,
   )
   const rest = getUnhandledProps(Container, props)
   const ElementType = getElementType(Container, props)

src/elements/Divider/Divider.js

@@ -36,7 +36,7 @@ function Divider(props) {
     useKeyOnly(section, 'section'),
     useKeyOnly(vertical, 'vertical'),
     'divider',
-    className
+    className,
   )
   const rest = getUnhandledProps(Divider, props)
   const ElementType = getElementType(Divider, props)

src/elements/Icon/IconGroup.js

@@ -19,7 +19,7 @@ function IconGroup(props) {
   const classes = cx(
     size,
     'icons',
-    className
+    className,
   )
   const rest = getUnhandledProps(IconGroup, props)
   const ElementType = getElementType(IconGroup, props)

src/elements/Input/Input.js

@@ -141,7 +141,7 @@ class Input extends Component {
   handleChildOverrides = (child, defaultProps) => ({
     ...defaultProps,
     ...child.props,
-    ref: c => {
+    ref: (c) => {
       _.invoke(child, 'ref', c)
       this.handleInputRef(c)
     },

src/elements/Label/Label.js

@@ -136,7 +136,7 @@ export default class Label extends Component {
   }
 
   handleIconOverrides = predefinedProps => ({
-    onClick: e => {
+    onClick: (e) => {
       _.invoke(predefinedProps, 'onClick', e)
       _.invoke(this.props, 'onRemove', e, this.props)
     },
@@ -167,9 +167,9 @@ export default class Label extends Component {
       tag,
     } = this.props
 
-    const pointingClass = pointing === true && 'pointing'
-      || (pointing === 'left' || pointing === 'right') && `${pointing} pointing`
-      || (pointing === 'above' || pointing === 'below') && `pointing ${pointing}`
+    const pointingClass = (pointing === true && 'pointing')
+      || ((pointing === 'left' || pointing === 'right') && `${pointing} pointing`)
+      || ((pointing === 'above' || pointing === 'below') && `pointing ${pointing}`)
 
     const classes = cx(
       'ui',

src/elements/Label/LabelGroup.js

@@ -31,7 +31,7 @@ function LabelGroup(props) {
     useKeyOnly(circular, 'circular'),
     useKeyOnly(tag, 'tag'),
     'labels',
-    className
+    className,
   )
   const rest = getUnhandledProps(LabelGroup, props)
   const ElementType = getElementType(LabelGroup, props)

src/elements/List/ListIcon.js

@@ -18,7 +18,7 @@ function ListIcon(props) {
   const { className, verticalAlign } = props
   const classes = cx(
     useVerticalAlignProp(verticalAlign),
-    className
+    className,
   )
   const rest = getUnhandledProps(ListIcon, props)
 

src/elements/Step/StepGroup.js

@@ -48,7 +48,7 @@ function StepGroup(props) {
     return <ElementType {...rest} className={classes}>{children}</ElementType>
   }
 
-  const content = _.map(items, item => {
+  const content = _.map(items, (item) => {
     const key = item.key || [item.title, item.description].join('-')
     return <Step key={key} {...item} />
   })

src/lib/AutoControlledComponent.js

@@ -26,7 +26,7 @@
 import _ from 'lodash'
 import { Component } from 'react'
 
-const getDefaultPropName = (prop) => `default${prop[0].toUpperCase() + prop.slice(1)}`
+const getDefaultPropName = prop => `default${prop[0].toUpperCase() + prop.slice(1)}`
 
 /**
  * Return the auto controlled state value for a give prop. The initial value is chosen in this order:
@@ -141,7 +141,7 @@ export default class AutoControlledComponent extends Component {
         // prevent defaultFoo={} along side foo={}
         if (!_.isUndefined(this.props[defaultPropName]) && !_.isUndefined(this.props[prop])) {
           console.error(
-            `${name} prop "${prop}" is auto controlled. Specify either ${defaultPropName} or ${prop}, but not both.`
+            `${name} prop "${prop}" is auto controlled. Specify either ${defaultPropName} or ${prop}, but not both.`,
           )
         }
       }

src/lib/META.js

@@ -18,7 +18,7 @@ const TYPE_VALUES = _.values(TYPES)
  * @param {Object} _meta A proposed component _meta object.
  * @returns {Boolean}
  */
-export const isMeta = (_meta) => (
+export const isMeta = _meta => (
   _.includes(_.get('type', _meta), TYPE_VALUES)
 )
 

src/lib/SUI.js

@@ -251,7 +251,7 @@ export const ICONS_AND_ALIASES = [
 // Their CSS rules are defined by a specific component's CSS.
 // We don't want to show name warnings for those usages so we add them as valid names here.
 export const COMPONENT_CONTEXT_SPECIFIC_ICONS = [
-  'left dropdown',      // nested dropdown menu direction icon
+  'left dropdown', // nested dropdown menu direction icon
 ]
 export const ALL_ICONS_IN_ALL_CONTEXTS = [
   ...ICONS_AND_ALIASES,

src/lib/childMapping.js

@@ -13,7 +13,7 @@ const getPendingKeys = (prev, next) => {
   const nextKeysPending = {}
   let pendingKeys = []
 
-  _.forEach(_.keys(prev), prevKey => {
+  _.forEach(_.keys(prev), (prevKey) => {
     if (!_.has(next, prevKey)) {
       pendingKeys.push(prevKey)
       return
@@ -28,7 +28,7 @@ const getPendingKeys = (prev, next) => {
   return [nextKeysPending, pendingKeys]
 }
 
-const getValue = (key, prev, next) => _.has(next, key) ? next[key] : prev[key]
+const getValue = (key, prev, next) => (_.has(next, key) ? next[key] : prev[key])
 
 /**
  * When you're adding or removing children some may be added or removed in the same render pass. We want to show *both*
@@ -43,17 +43,17 @@ export const mergeChildMappings = (prev = {}, next = {}) => {
   const childMapping = {}
   const [nextKeysPending, pendingKeys] = getPendingKeys(prev, next)
 
-  _.forEach(_.keys(next), nextKey => {
+  _.forEach(_.keys(next), (nextKey) => {
     if (_.has(nextKeysPending, nextKey)) {
-      _.forEach(nextKeysPending[nextKey], pendingKey => {
+      _.forEach(nextKeysPending[nextKey], (pendingKey) => {
         childMapping[pendingKey] = getValue(pendingKey, next, prev)
       })
     }
 
     childMapping[nextKey] = getValue(nextKey, next, prev)
   })
 
-  _.forEach(pendingKeys, pendingKey => {
+  _.forEach(pendingKeys, (pendingKey) => {
     childMapping[pendingKey] = getValue(pendingKey, next, prev)
   })
 

src/lib/childrenUtils.js

@@ -22,8 +22,6 @@ export const findByType = (children, type) => _.find(Children.toArray(children),
  * @param {Object} children The children prop of a component.
  * @returns {Boolean}
  */
-export const isNil = children => {
-  return children === null
+export const isNil = children => children === null
     || children === undefined
-    || Array.isArray(children) && children.length === 0
-}
+    || (Array.isArray(children) && children.length === 0)

src/lib/classNameBuilders.js

@@ -62,7 +62,7 @@ export const useKeyOrValueAndKey = (val, key) => val && (val === true ? key : `$
  * <div class="mobile only row"></div>
  * <div class="mobile only tablet only row"></div>
  */
-export const useOnlyProp = val => {
+export const useOnlyProp = (val) => {
   if (!val || val === true) return null
 
   return val.replace('large screen', 'large-screen')
@@ -84,7 +84,7 @@ export const useOnlyProp = val => {
  * <Container textAlign='left' />
  * <div class="ui left aligned container"></div>
  */
-export const useTextAlignProp = val => val === 'justified' ? 'justified' : useValueAndKey(val, 'aligned')
+export const useTextAlignProp = val => (val === 'justified' ? 'justified' : useValueAndKey(val, 'aligned'))
 
 /**
  * The "verticalAlign" prop follows the useValueAndKey.