Support ref forwarding on form controls (#7)

* Support ref forwarding on form controls * Add ref forwarding examples * Bump to 2.0.0
trendmicro-frontend · Dec 14, 2019 · 8f5022c · 8f5022c
1 parent 5826097
commit 8f5022c
Show file tree

Hide file tree

Showing 12 changed files with 319 additions and 154 deletions.
diff --git a/dist/react-form-control.css b/dist/react-form-control.css
diff --git a/dist/react-form-control.min.css b/dist/react-form-control.min.css
diff --git a/docs/build/bundle.2481d621.js → docs/build/bundle.52009ab0.js b/docs/build/bundle.2481d621.js → docs/build/bundle.52009ab0.js
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1,14 @@
-<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>React Form Control v1.1.0</title><link href="main.css" rel="stylesheet"></head><body><div id="rsg-root"></div><script src="build/bundle.2481d621.js"></script></body></html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>React Form Control v2.0.0</title>
+    <link href="main.css" rel="stylesheet">
+  </head>
+  <body>
+    <div id="rsg-root"></div>
+    <script src="build/bundle.52009ab0.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trendmicro/react-form-control",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "React Form Control component",
   "main": "lib/index.js",
   "files": [
@@ -44,7 +44,7 @@
     "react-form-control"
   ],
   "peerDependencies": {
-    "react": "^0.14.0 || >=15.0.0"
+    "react": ">=16.3.0"
   },
   "dependencies": {
     "classnames": "^2.2.6",

diff --git a/src/FormControl.jsx b/src/FormControl.jsx
@@ -15,14 +15,14 @@ const defaultProps = {
     tag: 'div',
 };
 
-const FormControl = ({
+const FormControl = React.forwardRef(({
     className,
     tag: Tag,
     lg,
     md,
     sm,
     ...props
-}) => {
+}, ref) => {
     if (lg) {
         md = false;
         sm = false;
@@ -36,6 +36,7 @@ const FormControl = ({
 
     return (
         <Tag
+            ref={ref}
             {...props}
             className={cx(className, styles.formControl, {
                 [styles.formControlLg]: lg,
@@ -44,7 +45,7 @@ const FormControl = ({
             })}
         />
     );
-};
+});
 
 FormControl.propTypes = propTypes;
 FormControl.defaultProps = defaultProps;

diff --git a/src/Input.jsx b/src/Input.jsx
@@ -10,9 +10,9 @@ const defaultProps = {
     tag: 'input',
 };
 
-const Input = (props) => (
-    <FormControl {...props} />
-);
+const Input = React.forwardRef((props, ref) => (
+    <FormControl ref={ref} {...props} />
+));
 
 Input.propTypes = propTypes;
 Input.defaultProps = defaultProps;

diff --git a/src/Select.jsx b/src/Select.jsx
@@ -12,9 +12,9 @@ const defaultProps = {
     tag: 'select',
 };
 
-const Select = ({ className, ...props }) => (
-    <FormControl {...props} className={cx(className, styles.select)} />
-);
+const Select = React.forwardRef(({ className, ...props }, ref) => (
+    <FormControl ref={ref} {...props} className={cx(className, styles.select)} />
+));
 
 Select.propTypes = propTypes;
 Select.defaultProps = defaultProps;

diff --git a/src/Textarea.jsx b/src/Textarea.jsx
@@ -12,9 +12,9 @@ const defaultProps = {
     tag: 'textarea',
 };
 
-const Textarea = ({ className, ...props }) => (
-    <FormControl {...props} className={cx(className, styles.textarea)} />
-);
+const Textarea = React.forwardRef(({ className, ...props }, ref) => (
+    <FormControl ref={ref} {...props} className={cx(className, styles.textarea)} />
+));
 
 Textarea.propTypes = propTypes;
 Textarea.defaultProps = defaultProps;

diff --git a/styleguide/examples/Input.md b/styleguide/examples/Input.md
@@ -33,3 +33,22 @@ The `readOnly` attribute specifies whether the control may be modified by the us
 <Input type="text" placeholder="[placeholder] Read-only input" readOnly />
 <Input type="text" value="[value] Read-only input" readOnly />
 ```
+
+### Ref forwarding
+
+```jsx
+const ref = React.createRef();
+const [value, setValue] = React.useState('');
+
+<>
+    <div>ref.current.value = {JSON.stringify(value)}</div>
+    <br />
+    <Input
+        ref={ref}
+        type="text"
+        onChange={() => {
+            setValue(ref.current.value);
+        }}
+    />
+</>
+```
diff --git a/styleguide/examples/Select.md b/styleguide/examples/Select.md
@@ -57,3 +57,26 @@ The `size` attribute specifies the number of visible options in the list.
     <option value="3">Three</option>
 </Select>
 ```
+
+### Ref forwarding
+
+```jsx
+const ref = React.createRef();
+const [value, setValue] = React.useState('one');
+
+<>
+    <div>ref.current.value = {JSON.stringify(value)}</div>
+    <br />
+    <Select
+        ref={ref}
+        defaultValue="one"
+        onChange={(value) => {
+            setValue(ref.current.value);
+        }}
+    >
+        <option value="one">One</option>
+        <option value="two">Two</option>
+        <option value="three">Three</option>
+    </Select>
+</>
+```
diff --git a/styleguide/examples/Textarea.md b/styleguide/examples/Textarea.md
@@ -29,3 +29,21 @@ The `readOnly` attribute specifies whether the control may be modified by the us
 <Textarea placeholder="[placeholder] Read-only textarea" readOnly />
 <Textarea value="[value] Read-only textarea" readOnly />
 ```
+
+### Ref forwarding
+
+```jsx
+const ref = React.createRef();
+const [value, setValue] = React.useState('');
+
+<>
+    <div>ref.current.value = {JSON.stringify(value)}</div>
+    <br />
+    <Textarea
+        ref={ref}
+        onChange={(value) => {
+            setValue(ref.current.value);
+        }}
+    />
+</>
+```