@hero-design/rn 8.64.4 → 8.64.6-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.64.5
+
+### Patch Changes
+
+- [#3322](https://github.com/Thinkei/hero-design/pull/3322) [`7539669a0361a390a19b05b3ad6bd2e5cb55964e`](https://github.com/Thinkei/hero-design/commit/7539669a0361a390a19b05b3ad6bd2e5cb55964e) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [PinInput] Support long press, autoComplete and textContentType props
+
 ## 8.64.4
 
 ### Patch Changes

package/es/index.js

@@ -2870,7 +2870,8 @@ var getPinInputTheme = function getPinInputTheme(theme) {
   };
   var fontSizes = {
     cellText: theme.fontSizes.xxxxlarge,
-    errorMessage: theme.fontSizes.small
+    errorMessage: theme.fontSizes.small,
+    hiddenInputText: theme.fontSizes['7xlarge']
   };
   var lineHeights = {
     cellText: theme.lineHeights.xxxxlarge,
@@ -2883,7 +2884,9 @@ var getPinInputTheme = function getPinInputTheme(theme) {
   };
   var space = {
     spacer: theme.space.medium,
-    errorMessagePadding: theme.space.xsmall
+    errorMessagePadding: theme.space.xsmall,
+    hiddenInputText: theme.space.xlarge,
+    hiddenInputHorrizontalPadding: theme.space.small
   };
   var radii = {
     cell: theme.radii.medium,
@@ -15521,8 +15524,12 @@ var StyledHiddenInput = index$9(TextInput$1)(function (_ref6) {
     opacity: 0,
     left: 0,
     top: 0,
+    right: 0,
     width: themePinLength * cellWidth + (themePinLength - 1) * spacerWidth,
-    height: '100%'
+    height: '100%',
+    fontSize: theme.__hd__.pinInput.fontSizes.hiddenInputText,
+    letterSpacing: theme.__hd__.pinInput.space.hiddenInputText,
+    paddingHorizontal: theme.__hd__.pinInput.space.hiddenInputHorrizontalPadding
   };
 });
 var StyledErrorContainer = index$9(View)(function (_ref7) {
@@ -15590,7 +15597,9 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
     error = _ref2.error,
     style = _ref2.style,
-    testID = _ref2.testID;
+    testID = _ref2.testID,
+    textContentType = _ref2.textContentType,
+    autoComplete = _ref2.autoComplete;
   var inputRef = useRef(null);
   var _useState = useState(autoFocus),
     _useState2 = _slicedToArray(_useState, 2),
@@ -15600,6 +15609,7 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     disabled: disabled,
     error: error
   });
+  var maskedValueWithExtraSpace = !value ? '*' : value;
   var focus = useCallback(function () {
     if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
       inputRef.current.focus();
@@ -15651,7 +15661,7 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }), /*#__PURE__*/React__default.createElement(StyledErrorMessage, null, error)), /*#__PURE__*/React__default.createElement(StyledHiddenInput, {
     themePinLength: length,
     ref: inputRef,
-    value: value,
+    value: maskedValueWithExtraSpace,
     onChangeText: changeText,
     secureTextEntry: secure,
     editable: !disabled,
@@ -15659,11 +15669,13 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     onFocus: focus,
     onBlur: blur,
     maxLength: length,
-    keyboardType: "numeric",
-    contextMenuHidden: true,
     caretHidden: true,
-    pointerEvents: "box-only",
-    testID: "pin-hidden-input"
+    pointerEvents: "box-none",
+    keyboardType: "numeric",
+    testID: "pin-hidden-input",
+    textContentType: textContentType,
+    autoComplete: autoComplete,
+    selectTextOnFocus: false
   }));
 });
 PinInput.displayName = 'PinInput';

package/lib/index.js

@@ -2900,7 +2900,8 @@ var getPinInputTheme = function getPinInputTheme(theme) {
   };
   var fontSizes = {
     cellText: theme.fontSizes.xxxxlarge,
-    errorMessage: theme.fontSizes.small
+    errorMessage: theme.fontSizes.small,
+    hiddenInputText: theme.fontSizes['7xlarge']
   };
   var lineHeights = {
     cellText: theme.lineHeights.xxxxlarge,
@@ -2913,7 +2914,9 @@ var getPinInputTheme = function getPinInputTheme(theme) {
   };
   var space = {
     spacer: theme.space.medium,
-    errorMessagePadding: theme.space.xsmall
+    errorMessagePadding: theme.space.xsmall,
+    hiddenInputText: theme.space.xlarge,
+    hiddenInputHorrizontalPadding: theme.space.small
   };
   var radii = {
     cell: theme.radii.medium,
@@ -15551,8 +15554,12 @@ var StyledHiddenInput = index$9(reactNative.TextInput)(function (_ref6) {
     opacity: 0,
     left: 0,
     top: 0,
+    right: 0,
     width: themePinLength * cellWidth + (themePinLength - 1) * spacerWidth,
-    height: '100%'
+    height: '100%',
+    fontSize: theme.__hd__.pinInput.fontSizes.hiddenInputText,
+    letterSpacing: theme.__hd__.pinInput.space.hiddenInputText,
+    paddingHorizontal: theme.__hd__.pinInput.space.hiddenInputHorrizontalPadding
   };
 });
 var StyledErrorContainer = index$9(reactNative.View)(function (_ref7) {
@@ -15620,7 +15627,9 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
     error = _ref2.error,
     style = _ref2.style,
-    testID = _ref2.testID;
+    testID = _ref2.testID,
+    textContentType = _ref2.textContentType,
+    autoComplete = _ref2.autoComplete;
   var inputRef = React.useRef(null);
   var _useState = React.useState(autoFocus),
     _useState2 = _slicedToArray(_useState, 2),
@@ -15630,6 +15639,7 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     disabled: disabled,
     error: error
   });
+  var maskedValueWithExtraSpace = !value ? '*' : value;
   var focus = React.useCallback(function () {
     if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
       inputRef.current.focus();
@@ -15681,7 +15691,7 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   }), /*#__PURE__*/React__default["default"].createElement(StyledErrorMessage, null, error)), /*#__PURE__*/React__default["default"].createElement(StyledHiddenInput, {
     themePinLength: length,
     ref: inputRef,
-    value: value,
+    value: maskedValueWithExtraSpace,
     onChangeText: changeText,
     secureTextEntry: secure,
     editable: !disabled,
@@ -15689,11 +15699,13 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     onFocus: focus,
     onBlur: blur,
     maxLength: length,
-    keyboardType: "numeric",
-    contextMenuHidden: true,
     caretHidden: true,
-    pointerEvents: "box-only",
-    testID: "pin-hidden-input"
+    pointerEvents: "box-none",
+    keyboardType: "numeric",
+    testID: "pin-hidden-input",
+    textContentType: textContentType,
+    autoComplete: autoComplete,
+    selectTextOnFocus: false
   }));
 });
 PinInput.displayName = 'PinInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.64.4",
+  "version": "8.64.6-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -93,5 +93,6 @@
     "ts-jest": "^29.1.1",
     "typescript": "4.8.4"
   },
-  "prettier": "prettier-config-hd"
+  "prettier": "prettier-config-hd",
+  "react-native": "src/index.ts"
 }

package/sonar-project.properties

@@ -1,5 +1,3 @@
-sonar.host.url=https://sonarqube.staging.ehrocks.com
-
 sonar.projectKey=hero-design-react-native
 sonar.projectName=Hero Design React Native
 sonar.organization=thinkei

package/src/components/PinInput/StyledPinInput.tsx

@@ -68,8 +68,13 @@ export const StyledHiddenInput = styled(TextInput)<{ themePinLength: number }>(
       opacity: 0,
       left: 0,
       top: 0,
+      right: 0,
       width: themePinLength * cellWidth + (themePinLength - 1) * spacerWidth,
       height: '100%',
+      fontSize: theme.__hd__.pinInput.fontSizes.hiddenInputText,
+      letterSpacing: theme.__hd__.pinInput.space.hiddenInputText,
+      paddingHorizontal:
+        theme.__hd__.pinInput.space.hiddenInputHorrizontalPadding,
     };
   }
 );

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

@@ -204,22 +204,26 @@ exports[`rendering renders correctly 1`] = `
     <TextInput
       autoFocus={false}
       caretHidden={true}
-      contextMenuHidden={true}
       editable={true}
       keyboardType="numeric"
       maxLength={4}
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      pointerEvents="box-only"
+      pointerEvents="box-none"
       secureTextEntry={true}
+      selectTextOnFocus={false}
       style={
         [
           {
+            "fontSize": 42,
             "height": "100%",
             "left": 0,
+            "letterSpacing": 32,
             "opacity": 0,
+            "paddingHorizontal": 8,
             "position": "absolute",
+            "right": 0,
             "top": 0,
             "width": 208,
           },
@@ -458,22 +462,26 @@ exports[`rendering renders correctly when disabled 1`] = `
     <TextInput
       autoFocus={false}
       caretHidden={true}
-      contextMenuHidden={true}
       editable={false}
       keyboardType="numeric"
       maxLength={4}
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      pointerEvents="box-only"
+      pointerEvents="box-none"
       secureTextEntry={true}
+      selectTextOnFocus={false}
       style={
         [
           {
+            "fontSize": 42,
             "height": "100%",
             "left": 0,
+            "letterSpacing": 32,
             "opacity": 0,
+            "paddingHorizontal": 8,
             "position": "absolute",
+            "right": 0,
             "top": 0,
             "width": 208,
           },
@@ -830,22 +838,26 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
     <TextInput
       autoFocus={false}
       caretHidden={true}
-      contextMenuHidden={true}
       editable={true}
       keyboardType="numeric"
       maxLength={6}
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      pointerEvents="box-only"
+      pointerEvents="box-none"
       secureTextEntry={false}
+      selectTextOnFocus={false}
       style={
         [
           {
+            "fontSize": 42,
             "height": "100%",
             "left": 0,
+            "letterSpacing": 32,
             "opacity": 0,
+            "paddingHorizontal": 8,
             "position": "absolute",
+            "right": 0,
             "top": 0,
             "width": 320,
           },
@@ -1137,22 +1149,26 @@ exports[`rendering renders correctly when there is error 1`] = `
     <TextInput
       autoFocus={false}
       caretHidden={true}
-      contextMenuHidden={true}
       editable={true}
       keyboardType="numeric"
       maxLength={4}
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      pointerEvents="box-only"
+      pointerEvents="box-none"
       secureTextEntry={true}
+      selectTextOnFocus={false}
       style={
         [
           {
+            "fontSize": 42,
             "height": "100%",
             "left": 0,
+            "letterSpacing": 32,
             "opacity": 0,
+            "paddingHorizontal": 8,
             "position": "absolute",
+            "right": 0,
             "top": 0,
             "width": 208,
           },
@@ -1186,3 +1202,263 @@ exports[`rendering renders correctly when there is error 1`] = `
   />
 </View>
 `;
+
+exports[`rendering renders correctly with textContentType and autoComplete 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignContent": "flex-start",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "flexDirection": "row",
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "borderColor": "#001f23",
+              "borderRadius": 8,
+              "borderWidth": 1,
+              "height": 48,
+              "justifyContent": "center",
+              "width": 40,
+            },
+            undefined,
+          ]
+        }
+        themeFocused={false}
+        themeState="default"
+      >
+        <View
+          style={
+            [
+              {
+                "backgroundColor": "#001f23",
+                "borderColor": "#001f23",
+                "borderRadius": 999,
+                "borderWidth": 1,
+                "height": 16,
+                "width": 16,
+              },
+              undefined,
+            ]
+          }
+          testID="pin-cell-filled-mask"
+          themeState="default"
+        />
+      </View>
+      <View
+        style={
+          [
+            {
+              "marginLeft": 16,
+            },
+            undefined,
+          ]
+        }
+      />
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "borderColor": "#001f23",
+              "borderRadius": 8,
+              "borderWidth": 1,
+              "height": 48,
+              "justifyContent": "center",
+              "width": 40,
+            },
+            undefined,
+          ]
+        }
+        themeFocused={false}
+        themeState="default"
+      >
+        <View
+          style={
+            [
+              {
+                "backgroundColor": "#001f23",
+                "borderColor": "#001f23",
+                "borderRadius": 999,
+                "borderWidth": 1,
+                "height": 16,
+                "width": 16,
+              },
+              undefined,
+            ]
+          }
+          testID="pin-cell-filled-mask"
+          themeState="default"
+        />
+      </View>
+      <View
+        style={
+          [
+            {
+              "marginLeft": 16,
+            },
+            undefined,
+          ]
+        }
+      />
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "borderColor": "#001f23",
+              "borderRadius": 8,
+              "borderWidth": 1,
+              "height": 48,
+              "justifyContent": "center",
+              "width": 40,
+            },
+            undefined,
+          ]
+        }
+        themeFocused={false}
+        themeState="default"
+      >
+        <View
+          style={
+            [
+              {
+                "borderColor": "#001f23",
+                "borderRadius": 999,
+                "borderWidth": 1,
+                "height": 16,
+                "width": 16,
+              },
+              undefined,
+            ]
+          }
+          testID="pin-cell-mask"
+          themeState="default"
+        />
+      </View>
+      <View
+        style={
+          [
+            {
+              "marginLeft": 16,
+            },
+            undefined,
+          ]
+        }
+      />
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "borderColor": "#001f23",
+              "borderRadius": 8,
+              "borderWidth": 1,
+              "height": 48,
+              "justifyContent": "center",
+              "width": 40,
+            },
+            undefined,
+          ]
+        }
+        themeFocused={false}
+        themeState="default"
+      >
+        <View
+          style={
+            [
+              {
+                "borderColor": "#001f23",
+                "borderRadius": 999,
+                "borderWidth": 1,
+                "height": 16,
+                "width": 16,
+              },
+              undefined,
+            ]
+          }
+          testID="pin-cell-mask"
+          themeState="default"
+        />
+      </View>
+    </View>
+    <TextInput
+      autoComplete="one-time-code"
+      autoFocus={false}
+      caretHidden={true}
+      editable={true}
+      keyboardType="numeric"
+      maxLength={4}
+      onBlur={[Function]}
+      onChangeText={[Function]}
+      onFocus={[Function]}
+      pointerEvents="box-none"
+      secureTextEntry={true}
+      selectTextOnFocus={false}
+      style={
+        [
+          {
+            "fontSize": 42,
+            "height": "100%",
+            "left": 0,
+            "letterSpacing": 32,
+            "opacity": 0,
+            "paddingHorizontal": 8,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "width": 208,
+          },
+          undefined,
+        ]
+      }
+      testID="pin-hidden-input"
+      textContentType="oneTimeCode"
+      themePinLength={4}
+      value="12"
+    />
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
+import { Platform } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import PinInput, { getState } from '..';
 
@@ -14,6 +15,21 @@ describe('rendering', () => {
     expect(wrapper.queryAllByTestId('pin-cell-mask')).toHaveLength(2);
   });
 
+  it('renders correctly with textContentType and autoComplete', () => {
+    const wrapper = renderWithTheme(
+      <PinInput
+        value="12"
+        onChangeText={jest.fn()}
+        textContentType="oneTimeCode"
+        autoComplete="one-time-code"
+      />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(wrapper.queryAllByTestId('pin-cell-filled-mask')).toHaveLength(2);
+    expect(wrapper.queryAllByTestId('pin-cell-mask')).toHaveLength(2);
+  });
+
   it('renders correctly when length is 6 and secure is false', () => {
     const wrapper = renderWithTheme(
       <PinInput
@@ -52,6 +68,16 @@ describe('rendering', () => {
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
+
+  it('renders a placeholder if the value is empty on android', () => {
+    Platform.OS = 'android';
+
+    const wrapper = renderWithTheme(
+      <PinInput value="" onChangeText={jest.fn()} />
+    );
+
+    expect(wrapper.getByDisplayValue('*')).toBeTruthy();
+  });
 });
 
 describe('behaviors', () => {

package/src/components/PinInput/index.tsx

@@ -1,4 +1,5 @@
 import React, {
+  ComponentProps,
   forwardRef,
   useCallback,
   useEffect,
@@ -62,6 +63,14 @@ interface PinInputProps {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * The text content type of the input.
+   */
+  textContentType?: ComponentProps<typeof TextInput>['textContentType'];
+  /**
+   * The autofill type of the input.
+   */
+  autoComplete?: ComponentProps<typeof TextInput>['autoComplete'];
 }
 
 export function getState({
@@ -104,12 +113,15 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
       error,
       style,
       testID,
+      textContentType,
+      autoComplete,
     },
     ref
   ) => {
     const inputRef = useRef<TextInput>(null);
     const [focused, setFocused] = useState(autoFocus);
     const state = getState({ disabled, error });
+    const maskedValueWithExtraSpace = !value ? '*' : value;
 
     const focus = useCallback(() => {
       if (inputRef?.current) {
@@ -179,7 +191,7 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
         <StyledHiddenInput
           themePinLength={length}
           ref={inputRef}
-          value={value}
+          value={maskedValueWithExtraSpace}
           onChangeText={changeText}
           secureTextEntry={secure}
           editable={!disabled}
@@ -187,11 +199,13 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
           onFocus={focus}
           onBlur={blur}
           maxLength={length}
-          keyboardType="numeric"
-          contextMenuHidden
           caretHidden
-          pointerEvents="box-only"
+          pointerEvents="box-none"
+          keyboardType="numeric"
           testID="pin-hidden-input"
+          textContentType={textContentType}
+          autoComplete={autoComplete}
+          selectTextOnFocus={false}
         />
       </StyledWrapper>
     );