@hero-design/rn 7.10.1 → 7.10.2-rc.0

package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1,5 +1,494 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
+<View
+  pointerEvents="auto"
+  style={
+    Array [
+      Object {
+        "marginVertical": 8,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#292a2b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="filled"
+    />
+    <View
+      pointerEvents="none"
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "flexDirection": "row",
+            "left": 16,
+            "paddingHorizontal": 4,
+            "position": "absolute",
+            "top": -10,
+            "zIndex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
+              "letterSpacing": 0.36,
+              "lineHeight": 20,
+            },
+            Array [
+              Object {
+                "color": "#de350b",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeFontSize="small"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeVariant="filled"
+      >
+        *
+      </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
+              "letterSpacing": 0.36,
+              "lineHeight": 20,
+            },
+            Array [
+              Object {
+                "color": "#292a2b",
+              },
+              undefined,
+            ],
+          ]
+        }
+        testID="input-label"
+        themeFontSize="small"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeVariant="filled"
+      >
+        Amount (AUD)
+      </Text>
+    </View>
+    <HeroIcon
+      name="dollar-sign"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 16,
+          },
+          undefined,
+        ]
+      }
+      testID="input-prefix"
+      themeIntent="text"
+      themeSize="xsmall"
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "alignSelf": "stretch",
+            "flexDirection": "row",
+            "flexGrow": 2,
+          },
+          undefined,
+        ]
+      }
+    >
+      <TextInput
+        accessibilityState={
+          Object {
+            "disabled": false,
+          }
+        }
+        defaultValue="1000"
+        editable={true}
+        maxLength={255}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        style={
+          Array [
+            Object {
+              "alignSelf": "stretch",
+              "flexGrow": 2,
+              "fontSize": 14,
+              "marginHorizontal": 8,
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#292a2b",
+            },
+          ]
+        }
+        testID="text-input"
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "flex": 1,
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 12,
+            "letterSpacing": 0.36,
+            "lineHeight": 20,
+          },
+          Array [
+            Object {
+              "alignSelf": "flex-end",
+              "color": "#292a2b",
+              "flex": 1,
+              "flexGrow": 1,
+              "fontSize": 12,
+              "marginRight": 4,
+              "textAlign": "right",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="small"
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeVariant="filled"
+    >
+      4
+      /
+      255
+    </Text>
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          Array [
+            Object {
+              "fontSize": 12,
+              "marginLeft": 4,
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      This is helper text
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`TextInput defaultValue default Value and Value renders correctly with 2000 1`] = `
+<View
+  pointerEvents="auto"
+  style={
+    Array [
+      Object {
+        "marginVertical": 8,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#292a2b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="filled"
+    />
+    <View
+      pointerEvents="none"
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "flexDirection": "row",
+            "left": 16,
+            "paddingHorizontal": 4,
+            "position": "absolute",
+            "top": -10,
+            "zIndex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
+              "letterSpacing": 0.36,
+              "lineHeight": 20,
+            },
+            Array [
+              Object {
+                "color": "#de350b",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeFontSize="small"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeVariant="filled"
+      >
+        *
+      </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
+              "letterSpacing": 0.36,
+              "lineHeight": 20,
+            },
+            Array [
+              Object {
+                "color": "#292a2b",
+              },
+              undefined,
+            ],
+          ]
+        }
+        testID="input-label"
+        themeFontSize="small"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeVariant="filled"
+      >
+        Amount (AUD)
+      </Text>
+    </View>
+    <HeroIcon
+      name="dollar-sign"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 16,
+          },
+          undefined,
+        ]
+      }
+      testID="input-prefix"
+      themeIntent="text"
+      themeSize="xsmall"
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "alignSelf": "stretch",
+            "flexDirection": "row",
+            "flexGrow": 2,
+          },
+          undefined,
+        ]
+      }
+    >
+      <TextInput
+        accessibilityState={
+          Object {
+            "disabled": false,
+          }
+        }
+        defaultValue="1000"
+        editable={true}
+        maxLength={255}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        style={
+          Array [
+            Object {
+              "alignSelf": "stretch",
+              "flexGrow": 2,
+              "fontSize": 14,
+              "marginHorizontal": 8,
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#292a2b",
+            },
+          ]
+        }
+        testID="text-input"
+        value="2000"
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "flex": 1,
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 12,
+            "letterSpacing": 0.36,
+            "lineHeight": 20,
+          },
+          Array [
+            Object {
+              "alignSelf": "flex-end",
+              "color": "#292a2b",
+              "flex": 1,
+              "flexGrow": 1,
+              "fontSize": 12,
+              "marginRight": 4,
+              "textAlign": "right",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="small"
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeVariant="filled"
+    >
+      4
+      /
+      255
+    </Text>
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          Array [
+            Object {
+              "fontSize": 12,
+              "marginLeft": 4,
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      This is helper text
+    </Text>
+  </View>
+</View>
+`;
+
 exports[`TextInput disabled renders correctly 1`] = `
 <View
   pointerEvents="none"
@@ -341,7 +830,6 @@ exports[`TextInput error renders correctly 1`] = `
           ]
         }
         testID="text-input"
-        value=""
       />
     </View>
   </View>
@@ -764,7 +1252,6 @@ exports[`TextInput helper text renders correctly 1`] = `
           ]
         }
         testID="text-input"
-        value=""
       />
     </View>
   </View>
@@ -955,7 +1442,6 @@ exports[`TextInput idle renders correctly 1`] = `
           ]
         }
         testID="text-input"
-        value=""
       />
     </View>
     <HeroIcon
@@ -1160,7 +1646,6 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
           ]
         }
         testID="text-input"
-        value=""
       />
     </View>
     <HeroIcon
@@ -1628,7 +2113,6 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
           ]
         }
         testID="text-input"
-        value=""
       />
     </View>
   </View>
@@ -2043,7 +2527,6 @@ exports[`TextInput required renders correctly 1`] = `
           ]
         }
         testID="text-input"
-        value=""
       />
     </View>
     <HeroIcon

package/src/components/TextInput/__tests__/index.spec.tsx

@@ -305,4 +305,48 @@ describe('TextInput', () => {
       });
     });
   });
+
+  describe('defaultValue', () => {
+    describe('TextInput is idle', () => {
+      it('renders correctly', () => {
+        const wrapper = renderWithTheme(
+          <TextInput
+            label="Amount (AUD)"
+            prefix="dollar-sign"
+            required
+            helpText="This is helper text"
+            placeholder="Enter Amount"
+            defaultValue="1000"
+            maxLength={255}
+          />
+        );
+
+        expect(wrapper.toJSON()).toMatchSnapshot();
+        expect(wrapper.queryByDisplayValue('1000')).toBeTruthy();
+        expect(wrapper.queryByText('4/255')).toBeTruthy();
+      });
+    });
+
+    describe('default Value and Value', () => {
+      it('renders correctly with 2000', () => {
+        const wrapper = renderWithTheme(
+          <TextInput
+            label="Amount (AUD)"
+            prefix="dollar-sign"
+            required
+            helpText="This is helper text"
+            placeholder="Enter Amount"
+            defaultValue="1000"
+            value="2000"
+            maxLength={255}
+          />
+        );
+
+        expect(wrapper.toJSON()).toMatchSnapshot();
+        expect(wrapper.queryByDisplayValue('2000')).toBeTruthy();
+        expect(wrapper.queryByDisplayValue('1000')).toBeFalsy();
+        expect(wrapper.queryByText('4/255')).toBeTruthy();
+      });
+    });
+  });
 });

package/src/components/TextInput/index.tsx

@@ -134,12 +134,14 @@ const TextInput = ({
   disabled = false,
   maxLength,
   helpText,
-  value = '',
+  value,
+  defaultValue,
   ...nativeProps
 }: TextInputProps): JSX.Element => {
   const textInputReference = useRef<RNTextInput | null>(null);
+  const displayText = value || defaultValue || '';
 
-  const isEmptyValue = value.length === 0;
+  const isEmptyValue = displayText.length === 0;
 
   const [isFocused, setIsFocused] = React.useState(false);
 
@@ -235,6 +237,7 @@ const TextInput = ({
             onChangeText={text => {
               nativeProps.onChangeText?.(text);
             }}
+            defaultValue={defaultValue}
             placeholder={
               variant === 'focused' ? nativeProps.placeholder : undefined
             }
@@ -266,7 +269,7 @@ const TextInput = ({
         )}
         {shouldShowMaxLength && (
           <StyledMaxLengthMessage themeVariant={variant} fontSize="small">
-            {value.length}/{maxLength}
+            {displayText.length}/{maxLength}
           </StyledMaxLengthMessage>
         )}
         {helpText && <StyledHelperText>{helpText}</StyledHelperText>}