@hero-design/rn 7.10.1 → 7.10.2

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

@@ -25,6 +25,7 @@ import {
   StyledLabelContainerInsideTextInput,
   StyledErrorAndHelpTextContainer,
   StyledBorderBackDrop,
+  StyledErrorAndMaxLengthContainer,
 } from './StyledTextInput';
 import Icon, { IconName } from '../Icon';
 import { useTheme } from '../../theme';
@@ -134,12 +135,13 @@ const TextInput = ({
   disabled = false,
   maxLength,
   helpText,
-  value = '',
+  value,
+  defaultValue,
   ...nativeProps
 }: TextInputProps): JSX.Element => {
   const textInputReference = useRef<RNTextInput | null>(null);
-
-  const isEmptyValue = value.length === 0;
+  const displayText = (value !== undefined ? value : defaultValue) ?? '';
+  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
             }
@@ -252,23 +255,25 @@ const TextInput = ({
         )}
       </StyledTextInputContainer>
       <StyledErrorAndHelpTextContainer>
-        {error && (
-          <StyledErrorContainer>
-            <Icon
-              testID="input-error-icon"
-              icon="circle-info"
-              size="xsmall"
-              intent="danger"
-            />
+        <StyledErrorAndMaxLengthContainer>
+          {error && (
+            <StyledErrorContainer>
+              <Icon
+                testID="input-error-icon"
+                icon="circle-info"
+                size="xsmall"
+                intent="danger"
+              />
 
-            <StyledError testID="input-error-message">{error}</StyledError>
-          </StyledErrorContainer>
-        )}
-        {shouldShowMaxLength && (
-          <StyledMaxLengthMessage themeVariant={variant} fontSize="small">
-            {value.length}/{maxLength}
-          </StyledMaxLengthMessage>
-        )}
+              <StyledError testID="input-error-message">{error}</StyledError>
+            </StyledErrorContainer>
+          )}
+          {shouldShowMaxLength && (
+            <StyledMaxLengthMessage themeVariant={variant} fontSize="small">
+              {displayText.length}/{maxLength}
+            </StyledMaxLengthMessage>
+          )}
+        </StyledErrorAndMaxLengthContainer>
         {helpText && <StyledHelperText>{helpText}</StyledHelperText>}
       </StyledErrorAndHelpTextContainer>
     </StyledContainer>

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -588,7 +588,7 @@ Object {
       "space": Object {
         "containerMarginVertical": 8,
         "containerPadding": 16,
-        "errorContainerMarginLeft": 16,
+        "errorAndHelpTextContainerPaddingLeft": 16,
         "errorContainerMarginRight": 4,
         "errorMarginLeft": 4,
         "inputHorizontalMargin": 8,

package/src/theme/components/textInput.ts

@@ -60,10 +60,10 @@ const getTextInputTheme = (theme: GlobalTheme) => {
     labelHorizontalPadding: theme.space.xsmall,
     inputHorizontalMargin: theme.space.small,
     containerMarginVertical: theme.space.small,
-    errorContainerMarginLeft: theme.space.medium,
     errorContainerMarginRight: theme.space.xsmall,
     errorMarginLeft: theme.space.xsmall,
     maxLengthLabelMarginLeft: theme.space.xsmall,
+    errorAndHelpTextContainerPaddingLeft: theme.space.medium,
   };
 
   const fontSizes = {

package/types/components/TextInput/StyledTextInput.d.ts

@@ -94,4 +94,10 @@ declare const StyledErrorAndHelpTextContainer: import("@emotion/native").StyledC
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export { StyledTextInputContainer, StyledLabel, StyledLabelContainer, StyledAsteriskLabel, StyledAsteriskLabelInsideTextInput, StyledTextInput, StyledError, StyledMaxLengthMessage, StyledLabelInsideTextInput, StyledContainer, StyledErrorContainer, StyledHelperText, StyledTextInputAndLabelContainer, StyledLabelContainerInsideTextInput, StyledErrorAndHelpTextContainer, StyledBorderBackDrop, };
+declare const StyledErrorAndMaxLengthContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledTextInputContainer, StyledLabel, StyledLabelContainer, StyledAsteriskLabel, StyledAsteriskLabelInsideTextInput, StyledTextInput, StyledError, StyledMaxLengthMessage, StyledLabelInsideTextInput, StyledContainer, StyledErrorContainer, StyledHelperText, StyledTextInputAndLabelContainer, StyledLabelContainerInsideTextInput, StyledErrorAndHelpTextContainer, StyledBorderBackDrop, StyledErrorAndMaxLengthContainer, };

package/types/components/TextInput/index.d.ts

@@ -58,5 +58,5 @@ export declare const getVariant: ({ disabled, error, editable, isFocused, isEmpt
     isFocused?: boolean | undefined;
     isEmptyValue?: boolean | undefined;
 }) => Variant;
-declare const TextInput: ({ label, prefix, suffix, style, textStyle, testID, accessibilityLabelledBy, error, required, editable, disabled, maxLength, helpText, value, ...nativeProps }: TextInputProps) => JSX.Element;
+declare const TextInput: ({ label, prefix, suffix, style, textStyle, testID, accessibilityLabelledBy, error, required, editable, disabled, maxLength, helpText, value, defaultValue, ...nativeProps }: TextInputProps) => JSX.Element;
 export default TextInput;