Merge pull request #107 from infinitered/focus-forward

Forward TextField focus
infinitered · Oct 5, 2018 · 6766dda · 6766dda
2 parents 1b45dbc + fcdece3
commit 6766dda
Show file tree

Hide file tree

Showing 4 changed files with 205 additions and 0 deletions.
diff --git a/boilerplate/src/views/shared/text-field/text-field.props.ts b/boilerplate/src/views/shared/text-field/text-field.props.ts
@@ -35,4 +35,6 @@ export interface TextFieldProps extends TextInputProperties {
    * Various look & feels.
    */
   preset?: "default"
+
+  forwardedRef?: any
 }
diff --git a/boilerplate/src/views/shared/text-field/text-field.story.tsx b/boilerplate/src/views/shared/text-field/text-field.story.tsx
@@ -22,6 +22,7 @@ const inputStyleArray: TextStyle[] = [
     borderColor: "#7fff00",
   },
 ] 
+var alertWhenFocused = true
 
 storiesOf("TextField", module)
   .addDecorator(fn => <StoryScreen>{fn()}</StoryScreen>)
@@ -125,3 +126,38 @@ storiesOf("TextField", module)
       </UseCase>
     </Story>
   ))
+  .add("Ref Forwarding", () => (
+    <Story>
+      <UseCase
+        text="Ref Forwarding"
+        usage=""
+      >
+        <State initial={{ value: "fancy colour" }}>
+          {({ state, setState }) => (
+            <TextField
+              onChangeText={value => setState({ value })}
+              value={state.value}
+              label="Name"
+              inputStyle={{
+                backgroundColor: "rebeccapurple",
+                color: "white",
+                padding: 40,
+                borderWidth: 10,
+                borderRadius: 4,
+                borderColor: "hotpink",
+              }}
+              forwardedRef={ref => ref}
+              onFocus={() => {
+                if(alertWhenFocused) {
+                  // Prevent text field focus from being repeatedly triggering alert
+                  alertWhenFocused = false
+                  window.alert("Text field focuesed with forwarded ref!")
+                }
+              }}
+            />
+          )}
+        </State>
+        <Text text="* attention designers:  i am so sorry" preset="secondary" />
+      </UseCase>
+    </Story>
+  ))
diff --git a/boilerplate/src/views/shared/text-field/text-field.tsx b/boilerplate/src/views/shared/text-field/text-field.tsx
@@ -52,6 +52,7 @@ export class TextField extends React.Component<TextFieldProps, {}> {
       preset = "default",
       style: styleOverride,
       inputStyle: inputStyleOverride,
+      forwardedRef,
       ...rest,
     } = this.props
     let containerStyle: ViewStyle = { ...CONTAINER, ...PRESETS[preset] }
@@ -70,6 +71,7 @@ export class TextField extends React.Component<TextFieldProps, {}> {
           underlineColorAndroid={color.transparent}
           {...rest}
           style={inputStyle}
+          ref={forwardedRef}
         />
       </View>
     )

diff --git a/boilerplate/test/__snapshots__/storyshots.test.ts.snap b/boilerplate/test/__snapshots__/storyshots.test.ts.snap
@@ -5764,6 +5764,171 @@ exports[`Storyshots TextField Labelling 1`] = `
 </View>
 `;
 
+exports[`Storyshots TextField Ref Forwarding 1`] = `
+<View
+  enabled={true}
+  keyboardVerticalOffset={50}
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#f0f0f0",
+        "flex": 1,
+      },
+      Object {
+        "paddingBottom": 0,
+      },
+    ]
+  }
+>
+  <View
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <RCTScrollView>
+      <View>
+        <View
+          style={
+            Object {
+              "backgroundColor": "#eee",
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "borderBottomColor": "#e6e6e6",
+                "borderBottomWidth": 1,
+                "paddingBottom": 10,
+                "paddingHorizontal": 10,
+                "paddingTop": 20,
+              }
+            }
+          >
+            <View
+              style={
+                Object {
+                  "borderTopColor": "#e6e6e6",
+                  "borderTopWidth": 1,
+                  "flexDirection": "row",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                }
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "color": "#666",
+                    "fontSize": 10,
+                    "paddingBottom": 2,
+                    "paddingHorizontal": 4,
+                  }
+                }
+              >
+                Use Case
+              </Text>
+            </View>
+            <View
+              style={Object {}}
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "color": "#3d3d3d",
+                    "fontWeight": "600",
+                  }
+                }
+              >
+                Ref Forwarding
+              </Text>
+            </View>
+            
+          </View>
+          <View
+            style={
+              Object {
+                "backgroundColor": "#fff",
+                "padding": 10,
+              }
+            }
+          >
+            <View
+              style={
+                Object {
+                  "paddingVertical": 12,
+                }
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "color": "#939AA4",
+                    "fontFamily": "Montserrat",
+                    "fontSize": 13,
+                  }
+                }
+              >
+                Name
+              </Text>
+              <TextInput
+                autoFocus={false}
+                onChangeText={[Function]}
+                onFocus={[Function]}
+                placeholderTextColor="#CDD4DA"
+                style={
+                  Object {
+                    "backgroundColor": "rebeccapurple",
+                    "borderColor": "hotpink",
+                    "borderRadius": 4,
+                    "borderWidth": 10,
+                    "color": "white",
+                    "fontFamily": "Montserrat",
+                    "fontSize": 18,
+                    "minHeight": 44,
+                    "padding": 40,
+                  }
+                }
+                underlineColorAndroid="rgba(0, 0, 0, 0)"
+                value="fancy colour"
+              />
+            </View>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Object {
+                  "color": "#939AA4",
+                  "fontFamily": "Montserrat",
+                  "fontSize": 9,
+                }
+              }
+            >
+              * attention designers:  i am so sorry
+            </Text>
+          </View>
+        </View>
+      </View>
+    </RCTScrollView>
+  </View>
+</View>
+`;
+
 exports[`Storyshots TextField Style Overrides 1`] = `
 <View
   enabled={true}