Add ref forwarding to Snacks components

package.json

@@ -47,8 +47,8 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.22.0",
     "codecov": "^3.1.0",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme": "^3.7.0",
+    "enzyme-adapter-react-16": "^1.6.0",
     "enzyme-to-json": "^3.3.3",
     "eslint": "^4.18.1",
     "eslint-plugin-jsx-a11y": "^6.0.3",
@@ -60,7 +60,7 @@
     "react": "16.4.2",
     "react-dom": "16.4.2",
     "react-styleguidist": "^7.2.3",
-    "react-test-renderer": "^16.2.0",
+    "react-test-renderer": "^16.5.2",
     "react-transition-group": "^2.2.1",
     "sinon": "^2.3.8",
     "uglifyjs-webpack-plugin": "^1.2.5",
@@ -80,8 +80,8 @@
   "peerDependencies": {
     "prop-types": "^15.0.0 || ^16.0.0",
     "radium": ">=0.18.0",
-    "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0",
+    "react": ">=16.3.0 <17.0.0",
+    "react-dom": ">=16.3.0 <17.0.0",
     "react-transition-group": "^2.2.1"
   },
   "jest": {

src/base/RadioCheckboxBase.js

@@ -79,6 +79,7 @@ class RadioCheckboxBase extends React.PureComponent {
     snacksTheme   : themePropTypes,
     value         : PropTypes.string,
     wrapEl        : PropTypes.string,
+    forwardedRef    : PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }
 
   static defaultProps = {
@@ -128,6 +129,7 @@ class RadioCheckboxBase extends React.PureComponent {
           checked={isSelected}
           disabled={isDisabled}
           aria-label={aria.label}
+          ref={this.props.forwardedRef}
         />
       </div>
     )

src/components/Buttons/Button.js

@@ -214,6 +214,7 @@ const Button = props => {
   const ElementType = props.href ? 'a' : 'button'
 
   const finalProps = {
+    ref: props.forwardedRef,
     disabled: props.disabled,
     tabIndex: props.tabIndex,
     type: props.type,
@@ -323,7 +324,9 @@ Button.propTypes = {
   elementAttributes: PropTypes.object,
 
   /** Snacks theme attributes provided by `Themer` */
-  snacksTheme: themePropTypes
+  snacksTheme: themePropTypes,
+
+  forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 }
 
 Button.defaultProps = {
@@ -338,4 +341,6 @@ Button.defaultProps = {
   elementAttributes: {}
 }
 
-export default withTheme(Radium(Button))
+const ButtonWithHocs = withTheme(Radium(Button))
+
+export default React.forwardRef((props, ref) => <ButtonWithHocs {...props} forwardedRef={ref} />)

src/components/Buttons/Checkbox.js

@@ -9,15 +9,16 @@ const BKG_SVG_SPRITES = {
   selected:   bkgSvgSelected,
 }
 
-const Checkbox = (props) => {
+const Checkbox = React.forwardRef((props, ref) => {
   return (
     <RadioCheckboxBase
       btnType='checkbox'
       bkgSvgSprites={BKG_SVG_SPRITES}
+      forwardedRef={ref}
       {...props}
     />
   )
-}
+})
 
 Checkbox.propTypes = {
   aria          : PropTypes.shape({

src/components/Buttons/CircleButton.js

@@ -35,6 +35,7 @@ const CircleButton = props => {
 
   return (
     <button
+      ref={props.forwardedRef}
       onClick={e => {
         if (props.onClick) {
           e.preventDefault()
@@ -81,6 +82,10 @@ CircleButton.propTypes = {
     PropTypes.object,
     PropTypes.array
   ]),
+
+  forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 }
 
-export default withTheme(Radium(CircleButton))
+const CircleButtonWithHocs = withTheme(Radium(CircleButton))
+
+export default React.forwardRef((props, ref) => <CircleButtonWithHocs {...props} forwardedRef={ref} />)

src/components/Buttons/Radio.js

@@ -9,15 +9,16 @@ const BKG_SVG_SPRITES = {
   selected:   bkgSvgSelected,
 }
 
-const Radio = (props) => {
+const Radio = React.forwardRef((props, ref) => {
   return (
     <RadioCheckboxBase
       btnType='radio'
       bkgSvgSprites={BKG_SVG_SPRITES}
+      forwardedRef={ref}
       {...props}
     />
   )
-}
+})
 
 Radio.propTypes = {
   aria          : PropTypes.shape({

src/components/Buttons/__tests__/Button.spec.js

@@ -149,4 +149,12 @@ describe('Button', () => {
     )
     expect(tree).toMatchSnapshot()
   })
+
+  it('correctly forwards refs', () => {
+    const ref = React.createRef()
+
+    renderer.create(<StyleRoot><Button ref={ref} /></StyleRoot>, { createNodeMock: element => element })
+
+    expect(ref.current.type).toBe('button')
+  })
 })

src/components/Buttons/__tests__/Checkbox.spec.js

@@ -12,7 +12,7 @@ describe('Checkbox', () => {
     expect(tree).toMatchSnapshot()
   })
 
-  it("renders the correct selected state", () => {
+  it('renders the correct selected state', () => {
     const testCases = [
       { id: 1, isSelected: false },
       { id: 2, isSelected: true },
@@ -46,7 +46,7 @@ describe('Checkbox', () => {
       .create(<Checkbox id={1}>Test label</Checkbox>)
       .toJSON()
     expect(tree).toMatchSnapshot()
-  });
+  })
 
 
   it('incorporates user style if passed', () => {
@@ -80,4 +80,14 @@ describe('Checkbox', () => {
     wrapper.find('input').simulate('change')
     expect(onChange.calledOnce).toBe(true)
   })
+
+  it('correctly forwards refs', () => {
+    const ref = React.createRef()
+
+    // Enzyme does not currently support forwarded refs. react-test-renderer does, but you must specify createNodeMock.
+    // https://github.com/airbnb/enzyme/issues/1852
+    renderer.create(<Checkbox id={1} ref={ref} />, { createNodeMock: element => element })
+
+    expect(ref.current.type).toBe('input')
+  })
 })

src/components/Buttons/__tests__/CircleButton.spec.js

@@ -119,3 +119,11 @@ it('does not call onClick when disabled prop is true', () => {
   button.simulate('click')
   expect(onClick.calledOnce).toBeFalsy()
 })
+
+it('correctly forwards refs', () => {
+  const ref = React.createRef()
+
+  renderer.create(<StyleRoot><CircleButton ref={ref} /></StyleRoot>, { createNodeMock: element => element })
+
+  expect(ref.current.type).toBe('button')
+})

src/components/Buttons/__tests__/Radio.spec.js

@@ -81,4 +81,12 @@ describe('Radio', () => {
     wrapper.find('input').simulate('change')
     expect(onChange.calledOnce).toBe(true)
   })
+
+  it('correctly forwards refs', () => {
+    const ref = React.createRef()
+
+    renderer.create(<Radio id={1} ref={ref} />, { createNodeMock: element => element })
+
+    expect(ref.current.type).toBe('input')
+  })
 })

src/components/Forms/DateField.js

@@ -6,37 +6,19 @@ const mask = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]
 const hint = 'MM/DD/YYYY'
 const pipe = createAutoCorrectedDatePipe('mm/dd/yyyy')
 
-const getValue = (value) => value
-
-class DateField extends React.Component {
-  static propTypes = {}
-
-  static defaultProps = {}
-
-  getValue = () => {
-    if (!this.input) {
-      return null
-    }
-
-    return this.input.getValue()
-  }
-
-  triggerFocus = () => this.input.wrapped.FormComponent.triggerFocus()
-
-  render() {
-    return (
-      <MaskedTextField
-        type='tel'
-        mask={mask}
-        maskHint={hint}
-        pipe={pipe}
-        getValue={getValue}
-        ref={(ref) => this.input = ref}
-        {...this.props}
-      />
-    )
-  }
-}
+const DateField = React.forwardRef((props, ref) =>  {
+  return (
+    <MaskedTextField
+      type='tel'
+      mask={mask}
+      maskHint={hint}
+      pipe={pipe}
+      getValue={v => v}
+      ref={ref}
+      {...props}
+    />
+  )
+})
 
 export default DateField
 

src/components/Forms/MaskedTextField.js

@@ -161,7 +161,8 @@ class MaskedTextField extends React.Component {
     /** Value will make TextField a controlled component  */
     value              : PropTypes.string,
     /** Snacks theme attributes provided by `Themer` */
-    snacksTheme        : themePropTypes
+    snacksTheme        : themePropTypes,
+    forwardedRef         : PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }
 
   static defaultProps = {
@@ -189,15 +190,13 @@ class MaskedTextField extends React.Component {
   }
 
   getValue = () => {
-    if (!this.input) {
+    if (!this.input.current) {
       return null
     }
 
-    return this.props.getValue(this.input.value)
+    return this.props.getValue(this.input.current.value)
   }
 
-  triggerFocus = () => this.input.focus()
-
   handleInputChange = (e) => {
     const { onChange } = this.props
     const { hasValue } = this.state
@@ -247,14 +246,17 @@ class MaskedTextField extends React.Component {
       value,
       helperText,
       autoComplete,
-      snacksTheme
+      snacksTheme,
+      forwardedRef
     } = this.props
 
     const {
       hasValue,
       isFocused
     } = this.state
 
+    this.input = forwardedRef || React.createRef()
+
     return (
       <div
         style={[
@@ -307,20 +309,19 @@ class MaskedTextField extends React.Component {
             disabled={disabled}
             keepCharPositions={true}
             type={this.props.type}
-            render={(ref, props) => (
-              <input
-                ref={(input) => {
-                  this.input = input
-                  ref(input)}
-                }
-                style={getInputSyles({
-                  props: this.props,
-                  theme: snacksTheme,
-                  isFocused
-                })}
-                {...props}
-              />
-            )}
+            render={(ref, props) => {
+              ref(this.input)
+              return(
+                <input
+                  ref={this.input}
+                  style={getInputSyles({
+                    props: this.props,
+                    theme: snacksTheme,
+                    isFocused
+                  })}
+                  {...props}
+                />
+              )}}
           />
         </div>
 
@@ -336,5 +337,4 @@ class MaskedTextField extends React.Component {
   }
 }
 
-export default MaskedTextField
-
+export default React.forwardRef((props, ref) => <MaskedTextField {...props} forwardedRef={ref} />)

src/components/Forms/PhoneNumberField.js

@@ -1,7 +1,6 @@
 import React              from 'react'
 import MaskedTextField    from './MaskedTextField'
 
-
 const phoneRegex = /\(|\)|-| /g
 
 // input masks by alpha-2 code - https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
@@ -15,34 +14,15 @@ const inputMasks = {
 
 const getValue = (value) => value.replace(phoneRegex, '')
 
-class PhoneNumberField extends React.Component {
-
-  static propTypes = {}
-
-  static defaultProps = {}
-
-  getValue = () => {
-    if (!this.input) {
-      return null
-    }
-
-    return getValue(this.input.getValue())
-  }
-
-  triggerFocus = () => this.input.wrapped.FormComponent.triggerFocus()
-
-  render() {
-    return (
-      <MaskedTextField
-        type='tel'
-        mask={inputMasks.US.mask}
-        maskHint={inputMasks.US.hint}
-        getValue={getValue}
-        ref={(ref) => this.input = ref}
-        {...this.props}
-      />
-    )
-  }
-}
+const PhoneNumberField = React.forwardRef((props, ref) =>
+  <MaskedTextField
+    type='tel'
+    mask={inputMasks.US.mask}
+    maskHint={inputMasks.US.hint}
+    getValue={getValue}
+    ref={ref}
+    {...props}
+  />
+)
 
 export default PhoneNumberField