chore: disable ESLint rule for function names (#4241)

.eslintrc

@@ -11,6 +11,7 @@
     "consistent-return": "off",
     "complexity": ["warn", 10],
     "global-require": "off",
+    "func-names": "off",
     "lines-between-class-members": "off",
     "no-console": "error",
     "no-multi-spaces": ["error", { "ignoreEOLComments": true }],

src/collections/Table/Table.js

@@ -25,7 +25,7 @@ import TableRow from './TableRow'
 /**
  * A table displays a collections of data grouped into rows.
  */
-const Table = React.forwardRef(function TableInner(props, ref) {
+const Table = React.forwardRef(function (props, ref) {
   const {
     attached,
     basic,

src/collections/Table/TableBody.js

@@ -4,7 +4,7 @@ import React from 'react'
 
 import { getElementType, getUnhandledProps } from '../../lib'
 
-const TableBody = React.forwardRef(function TableBodyInner(props, ref) {
+const TableBody = React.forwardRef(function (props, ref) {
   const { children, className } = props
   const classes = cx(className)
   const rest = getUnhandledProps(TableBody, props)

src/collections/Table/TableCell.js

@@ -20,7 +20,7 @@ import Icon from '../../elements/Icon'
 /**
  * A table row can have cells.
  */
-const TableCell = React.forwardRef(function TableCellInner(props, ref) {
+const TableCell = React.forwardRef(function (props, ref) {
   const {
     active,
     children,

src/collections/Table/TableFooter.js

@@ -7,7 +7,7 @@ import TableHeader from './TableHeader'
 /**
  * A table can have a footer.
  */
-const TableFooter = React.forwardRef(function TableFooterInner(props, ref) {
+const TableFooter = React.forwardRef(function (props, ref) {
   const { as } = props
   const rest = getUnhandledProps(TableFooter, props)
 

src/collections/Table/TableHeader.js

@@ -13,7 +13,7 @@ import {
 /**
  * A table can have a header.
  */
-const TableHeader = React.forwardRef(function TableHeaderInner(props, ref) {
+const TableHeader = React.forwardRef(function (props, ref) {
   const { children, className, content, fullWidth } = props
   const classes = cx(useKeyOnly(fullWidth, 'full-width'), className)
   const rest = getUnhandledProps(TableHeader, props)

src/collections/Table/TableHeaderCell.js

@@ -8,7 +8,7 @@ import TableCell from './TableCell'
 /**
  * A table can have a header cell.
  */
-const TableHeaderCell = React.forwardRef(function TableHeaderCellInner(props, ref) {
+const TableHeaderCell = React.forwardRef(function (props, ref) {
   const { as, className, sorted } = props
   const classes = cx(useValueAndKey(sorted, 'sorted'), className)
   const rest = getUnhandledProps(TableHeaderCell, props)

src/collections/Table/TableRow.js

@@ -19,7 +19,7 @@ import TableCell from './TableCell'
 /**
  * A table can have rows.
  */
-const TableRow = React.forwardRef(function TableRowInner(props, ref) {
+const TableRow = React.forwardRef(function (props, ref) {
   const {
     active,
     cellAs,

src/elements/Header/Header.js

@@ -23,7 +23,7 @@ import HeaderContent from './HeaderContent'
 /**
  * A header provides a short summary of content
  */
-const Header = React.forwardRef(function HeaderInner(props, ref) {
+const Header = React.forwardRef(function (props, ref) {
   const {
     attached,
     block,

src/elements/Header/HeaderContent.js

@@ -7,7 +7,7 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * Header content wraps the main content when there is an adjacent Icon or Image.
  */
-const HeaderContent = React.forwardRef(function HeaderContentInner(props, ref) {
+const HeaderContent = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('content', className)
   const rest = getUnhandledProps(HeaderContent, props)

src/elements/Header/HeaderSubheader.js

@@ -13,7 +13,7 @@ import {
 /**
  * Headers may contain subheaders.
  */
-const HeaderSubheader = React.forwardRef(function HeaderSubheaderInner(props, ref) {
+const HeaderSubheader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('sub header', className)
   const rest = getUnhandledProps(HeaderSubheader, props)

src/elements/Image/Image.js

@@ -25,7 +25,7 @@ import ImageGroup from './ImageGroup'
  * An image is a graphic representation of something.
  * @see Icon
  */
-const Image = React.forwardRef(function ImageInner(props, ref) {
+const Image = React.forwardRef(function (props, ref) {
   const {
     avatar,
     bordered,

src/elements/Placeholder/Placeholder.js

@@ -17,7 +17,7 @@ import PlaceholderParagraph from './PlaceholderParagraph'
 /**
  * A placeholder is used to reserve space for content that soon will appear in a layout.
  */
-const Placeholder = React.forwardRef(function PlaceholderInner(props, ref) {
+const Placeholder = React.forwardRef(function (props, ref) {
   const { children, className, content, fluid, inverted } = props
   const classes = cx(
     'ui',

src/elements/Placeholder/PlaceholderHeader.js

@@ -13,7 +13,7 @@ import {
 /**
  * A placeholder can contain a header.
  */
-const PlaceholderHeader = React.forwardRef(function PlaceholderHeaderInner(props, ref) {
+const PlaceholderHeader = React.forwardRef(function (props, ref) {
   const { children, className, content, image } = props
   const classes = cx(useKeyOnly(image, 'image'), 'header', className)
   const rest = getUnhandledProps(PlaceholderHeader, props)

src/elements/Placeholder/PlaceholderImage.js

@@ -7,7 +7,7 @@ import { customPropTypes, getElementType, getUnhandledProps, useKeyOnly } from '
 /**
  * A placeholder can contain an image.
  */
-const PlaceholderImage = React.forwardRef(function PlaceholderImageInner(props, ref) {
+const PlaceholderImage = React.forwardRef(function (props, ref) {
   const { className, square, rectangular } = props
   const classes = cx(
     useKeyOnly(square, 'square'),

src/elements/Placeholder/PlaceholderLine.js

@@ -7,7 +7,7 @@ import { getElementType, getUnhandledProps } from '../../lib'
 /**
  * A placeholder can contain have lines of text.
  */
-const PlaceholderLine = React.forwardRef(function PlaceholderLineInner(props, ref) {
+const PlaceholderLine = React.forwardRef(function (props, ref) {
   const { className, length } = props
   const classes = cx('line', length, className)
   const rest = getUnhandledProps(PlaceholderLine, props)

src/elements/Placeholder/PlaceholderParagraph.js

@@ -7,7 +7,7 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A placeholder can contain a paragraph.
  */
-const PlaceholderParagraph = React.forwardRef(function PlaceholderParagraphInner(props, ref) {
+const PlaceholderParagraph = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('paragraph', className)
   const rest = getUnhandledProps(PlaceholderParagraph, props)

src/elements/Segment/Segment.js

@@ -20,7 +20,7 @@ import SegmentInline from './SegmentInline'
 /**
  * A segment is used to create a grouping of related content.
  */
-const Segment = React.forwardRef(function SegmentInner(props, ref) {
+const Segment = React.forwardRef(function (props, ref) {
   const {
     attached,
     basic,

src/elements/Segment/SegmentGroup.js

@@ -15,7 +15,7 @@ import {
 /**
  * A group of segments can be formatted to appear together.
  */
-const SegmentGroup = React.forwardRef(function SegmentGroupInner(props, ref) {
+const SegmentGroup = React.forwardRef(function (props, ref) {
   const { children, className, compact, content, horizontal, piled, raised, size, stacked } = props
 
   const classes = cx(

src/elements/Segment/SegmentInline.js

@@ -7,7 +7,7 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A placeholder segment can be inline.
  */
-const SegmentInline = React.forwardRef(function SegmentInlineInner(props, ref) {
+const SegmentInline = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('inline', className)
   const rest = getUnhandledProps(SegmentInline, props)

src/elements/Step/Step.js

@@ -21,7 +21,7 @@ import StepTitle from './StepTitle'
 /**
  * A step shows the completion status of an activity in a series of activities.
  */
-const Step = React.forwardRef(function StepInner(props, ref) {
+const Step = React.forwardRef(function (props, ref) {
   const {
     active,
     children,

src/elements/Step/StepContent.js

@@ -15,7 +15,7 @@ import StepTitle from './StepTitle'
 /**
  * A step can contain a content.
  */
-const StepContent = React.forwardRef(function StepContentInner(props, ref) {
+const StepContent = React.forwardRef(function (props, ref) {
   const { children, className, content, description, title } = props
   const classes = cx('content', className)
   const rest = getUnhandledProps(StepContent, props)

src/elements/Step/StepDescription.js

@@ -10,7 +10,7 @@ import {
   getUnhandledProps,
 } from '../../lib'
 
-const StepDescription = React.forwardRef(function StepDescriptionInner(props, ref) {
+const StepDescription = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('description', className)
   const rest = getUnhandledProps(StepDescription, props)

src/elements/Step/StepGroup.js

@@ -22,7 +22,7 @@ const numberMap = _.pickBy(numberToWordMap, (val, key) => key <= 8)
 /**
  * A set of steps.
  */
-const StepGroup = React.forwardRef(function StepGroupInner(props, ref) {
+const StepGroup = React.forwardRef(function (props, ref) {
   const {
     attached,
     children,

src/elements/Step/StepTitle.js

@@ -13,7 +13,7 @@ import {
 /**
  * A step can contain a title.
  */
-const StepTitle = React.forwardRef(function StepTitleInner(props, ref) {
+const StepTitle = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('title', className)
   const rest = getUnhandledProps(StepTitle, props)

test/specs/commonTests/forwardsRef.js

@@ -16,6 +16,11 @@ export default function forwardsRef(Component, options = {}) {
       expect(ReactIs.isForwardRef(<Component {...requiredProps} />)).to.equal(true)
     })
 
+    it('a render function is anonymous', () => {
+      const innerFunctionName = Component.render.name
+      expect(innerFunctionName).to.equal('')
+    })
+
     it(`forwards ref to "${tagName}"`, () => {
       const ref = sandbox.spy()