chore(Confirm|Checkbox|Embed|Radio|TextArea): use React.forwardRef() (#4262)

Author: layershifter

src/addons/Confirm/Confirm.js

@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import { customPropTypes, getUnhandledProps } from '../../lib'
 import Button from '../../elements/Button'
@@ -10,55 +10,56 @@ import Modal from '../../modules/Modal'
  * A Confirm modal gives the user a choice to confirm or cancel an action/
  * @see Modal
  */
-class Confirm extends Component {
-  handleCancel = (e) => {
-    _.invoke(this.props, 'onCancel', e, this.props)
+const Confirm = React.forwardRef(function (props, ref) {
+  const { cancelButton, confirmButton, content, header, open, size } = props
+  const rest = getUnhandledProps(Confirm, props)
+
+  const handleCancel = (e) => {
+    _.invoke(props, 'onCancel', e, props)
   }
 
-  handleCancelOverrides = (predefinedProps) => ({
+  const handleCancelOverrides = (predefinedProps) => ({
     onClick: (e, buttonProps) => {
       _.invoke(predefinedProps, 'onClick', e, buttonProps)
-      this.handleCancel(e)
+      handleCancel(e)
     },
   })
 
-  handleConfirmOverrides = (predefinedProps) => ({
+  const handleConfirmOverrides = (predefinedProps) => ({
     onClick: (e, buttonProps) => {
       _.invoke(predefinedProps, 'onClick', e, buttonProps)
-      _.invoke(this.props, 'onConfirm', e, this.props)
+      _.invoke(props, 'onConfirm', e, props)
     },
   })
 
-  render() {
-    const { cancelButton, confirmButton, content, header, open, size } = this.props
-    const rest = getUnhandledProps(Confirm, this.props)
-
-    // `open` is auto controlled by the Modal
-    // It cannot be present (even undefined) with `defaultOpen`
-    // only apply it if the user provided an open prop
-    const openProp = {}
-    if (_.has(this.props, 'open')) openProp.open = open
-
-    return (
-      <Modal {...rest} {...openProp} size={size} onClose={this.handleCancel}>
-        {Modal.Header.create(header, { autoGenerateKey: false })}
-        {Modal.Content.create(content, { autoGenerateKey: false })}
-        <Modal.Actions>
-          {Button.create(cancelButton, {
-            autoGenerateKey: false,
-            overrideProps: this.handleCancelOverrides,
-          })}
-          {Button.create(confirmButton, {
-            autoGenerateKey: false,
-            defaultProps: { primary: true },
-            overrideProps: this.handleConfirmOverrides,
-          })}
-        </Modal.Actions>
-      </Modal>
-    )
+  // `open` is auto controlled by the Modal
+  // It cannot be present (even undefined) with `defaultOpen`
+  // only apply it if the user provided an open prop
+  const openProp = {}
+  if (_.has(props, 'open')) {
+    openProp.open = open
   }
-}
 
+  return (
+    <Modal {...rest} {...openProp} size={size} onClose={handleCancel} ref={ref}>
+      {Modal.Header.create(header, { autoGenerateKey: false })}
+      {Modal.Content.create(content, { autoGenerateKey: false })}
+      <Modal.Actions>
+        {Button.create(cancelButton, {
+          autoGenerateKey: false,
+          overrideProps: handleCancelOverrides,
+        })}
+        {Button.create(confirmButton, {
+          autoGenerateKey: false,
+          defaultProps: { primary: true },
+          overrideProps: handleConfirmOverrides,
+        })}
+      </Modal.Actions>
+    </Modal>
+  )
+})
+
+Confirm.displayName = 'Confirm'
 Confirm.propTypes = {
   /** The cancel button text. */
   cancelButton: customPropTypes.itemShorthand,

src/addons/Radio/Radio.js

@@ -9,17 +9,19 @@ import Checkbox from '../../modules/Checkbox'
  * @see Checkbox
  * @see Form
  */
-function Radio(props) {
+const Radio = React.forwardRef(function (props, ref) {
   const { slider, toggle, type } = props
+
   const rest = getUnhandledProps(Radio, props)
   // const ElementType = getElementType(Radio, props)
   // radio, slider, toggle are exclusive
   // use an undefined radio if slider or toggle are present
   const radio = !(slider || toggle) || undefined
 
-  return <Checkbox {...rest} type={type} radio={radio} slider={slider} toggle={toggle} />
-}
+  return <Checkbox {...rest} type={type} radio={radio} slider={slider} toggle={toggle} ref={ref} />
+})
 
+Radio.displayName = 'Radio'
 Radio.propTypes = {
   /** Format to emphasize the current selection state. */
   slider: Checkbox.propTypes.slider,

src/addons/TextArea/TextArea.js

@@ -1,50 +1,45 @@
-import { Ref } from '@fluentui/react-component-ref'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component, createRef } from 'react'
+import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getElementType, getUnhandledProps, useMergedRefs } from '../../lib'
 
 /**
  * A TextArea can be used to allow for extended user input.
  * @see Form
  */
-class TextArea extends Component {
-  ref = createRef()
+const TextArea = React.forwardRef(function (props, ref) {
+  const { rows, value } = props
+  const elementRef = useMergedRefs(ref, React.useRef())
 
-  focus = () => this.ref.current.focus()
+  const handleChange = (e) => {
+    const newValue = _.get(e, 'target.value')
 
-  handleChange = (e) => {
-    const value = _.get(e, 'target.value')
-
-    _.invoke(this.props, 'onChange', e, { ...this.props, value })
+    _.invoke(props, 'onChange', e, { ...props, value: newValue })
   }
 
-  handleInput = (e) => {
-    const value = _.get(e, 'target.value')
+  const handleInput = (e) => {
+    const newValue = _.get(e, 'target.value')
 
-    _.invoke(this.props, 'onInput', e, { ...this.props, value })
+    _.invoke(props, 'onInput', e, { ...props, value: newValue })
   }
 
-  render() {
-    const { rows, value } = this.props
-    const rest = getUnhandledProps(TextArea, this.props)
-    const ElementType = getElementType(TextArea, this.props)
-
-    return (
-      <Ref innerRef={this.ref}>
-        <ElementType
-          {...rest}
-          onChange={this.handleChange}
-          onInput={this.handleInput}
-          rows={rows}
-          value={value}
-        />
-      </Ref>
-    )
-  }
-}
-
+  const rest = getUnhandledProps(TextArea, props)
+  const ElementType = getElementType(TextArea, props)
+
+  return (
+    <ElementType
+      {...rest}
+      onChange={handleChange}
+      onInput={handleInput}
+      ref={elementRef}
+      rows={rows}
+      value={value}
+    />
+  )
+})
+
+TextArea.displayName = 'TextArea'
 TextArea.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,