forward ref

Author: arturbien

src/components/ColorInput/ColorInput.js

@@ -21,6 +21,7 @@ export const StyledColorInput = styled.input`
   top: 0;
   opacity: 0;
 `;
+
 // TODO replace with SVG icon
 const ColorPreview = styled.div`
   box-sizing: border-box;
@@ -43,6 +44,7 @@ const ColorPreview = styled.div`
           border: 2px solid ${({ theme }) => theme.text};
         `}
 `;
+
 const ChevronIcon = styled.span`
   position: relative;
   width: 0px;
@@ -64,29 +66,33 @@ const ChevronIcon = styled.span`
           border-top: 6px solid ${({ theme }) => theme.text};
         `}
 `;
+
 // TODO make sure all aria and role attributes are in place
-const ColorInput = ({
-  value,
-  defaultValue,
-  onChange,
-  disabled,
-  variant,
-  ...otherProps
-}) => {
+const ColorInput = React.forwardRef(function ColorInput(props, ref) {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    disabled,
+    variant,
+    ...otherProps
+  } = props;
+
   const [valueDerived, setValueState] = useControlledOrUncontrolled({
     value,
     defaultValue
   });
+
   const handleChange = e => {
     const color = e.target.value;
     setValueState(color);
     if (onChange) {
       onChange(e);
     }
   };
+
   return (
-    // we need only button styles and behaviour when button is :active or disabled,
-    // so we display it as a div and reset type attribute
+    // we only need button styles, so we display it as a div and reset type attribute
     <Button isDisabled={disabled} as='div' type={null} variant={variant}>
       <ColorPreview
         color={valueDerived}
@@ -100,12 +106,14 @@ const ColorInput = ({
         disabled={disabled}
         value={valueDerived || '#008080'}
         type='color'
+        ref={ref}
         {...otherProps}
       />
       <ChevronIcon isDisabled={disabled} />
     </Button>
   );
-};
+});
+
 ColorInput.defaultProps = {
   value: undefined,
   defaultValue: undefined,

src/components/ColorInput/ColorInput.stories.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { storiesOf } from '@storybook/react';
 
 import styled from 'styled-components';
@@ -16,23 +16,17 @@ const StyledCutout = styled(Cutout)`
 `;
 storiesOf('ColorInput', module)
   .addDecorator(story => <Wrapper>{story()}</Wrapper>)
-  .add('uncontrolled', () => <ColorInput defaultValue='#00f' />)
-  .add('controlled', () => <ControlledColorInput />)
+  .add('uncontrolled', () =>
+    React.createElement(() => <ColorInput defaultValue='#00f' />)
+  )
 
-  .add('disabled', () => <ColorInput disabled defaultValue='#00f' />)
-  .add('flat', () => (
-    <StyledCutout>
-      <ColorInput variant='flat' defaultValue='#00f' />
-    </StyledCutout>
-  ))
-  .add('flat disabled', () => (
-    <StyledCutout>
-      <ColorInput variant='flat' disabled defaultValue='#00f' />
-    </StyledCutout>
-  ));
-
-const ControlledColorInput = () => {
-  const [color, setColor] = useState('#008080');
-  const handleChange = e => setColor(e.target.value);
-  return <ColorInput value={color} onChange={handleChange} />;
-};
+  .add('disabled', () =>
+    React.createElement(() => <ColorInput disabled defaultValue='#00f' />)
+  )
+  .add('flat', () =>
+    React.createElement(() => (
+      <StyledCutout>
+        <ColorInput variant='flat' defaultValue='#00f' />
+      </StyledCutout>
+    ))
+  );