@hero-design/rn 8.64.7-alpha.1 → 8.64.8-alpha.0

package/es/index.js

@@ -15616,10 +15616,6 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   });
   var trimmedValue = normalizeValue(value, length);
   var maskedValueWithExtraSpace = Platform.OS === 'android' && !trimmedValue ? '*' : trimmedValue;
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    hasFulfilled = _useState4[0],
-    setHasFulfilled = _useState4[1];
   var focus = useCallback(function () {
     if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
       inputRef.current.focus();
@@ -15633,22 +15629,13 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     }
   }, []);
   var changeText = useCallback(function (text) {
-    // If the input is already fulfilled and the user tries to remove characters
-    if (hasFulfilled && text.length < length) {
-      setHasFulfilled(false);
-    }
-    // If the input is already fulfilled and the user tries to add more characters
-    if (hasFulfilled && ((text === null || text === void 0 ? void 0 : text.match(/\d/g)) || []).join('').length > length) {
-      return;
-    }
     // Prevent user from entering more than the length
     var trimmedPin = normalizeValue(text, length);
     onChangeText === null || onChangeText === void 0 || onChangeText(trimmedPin);
     if (trimmedPin.length === length) {
       onFulfill === null || onFulfill === void 0 || onFulfill(trimmedPin);
-      setHasFulfilled(true);
     }
-  }, [length, onChangeText, onFulfill, hasFulfilled]);
+  }, [length, onChangeText, onFulfill]);
   useEffect(function () {
     // Must run after animations for keyboard to automatically open
     if (autoFocus) {

package/lib/index.js

@@ -15646,10 +15646,6 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   });
   var trimmedValue = normalizeValue(value, length);
   var maskedValueWithExtraSpace = reactNative.Platform.OS === 'android' && !trimmedValue ? '*' : trimmedValue;
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    hasFulfilled = _useState4[0],
-    setHasFulfilled = _useState4[1];
   var focus = React.useCallback(function () {
     if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
       inputRef.current.focus();
@@ -15663,22 +15659,13 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     }
   }, []);
   var changeText = React.useCallback(function (text) {
-    // If the input is already fulfilled and the user tries to remove characters
-    if (hasFulfilled && text.length < length) {
-      setHasFulfilled(false);
-    }
-    // If the input is already fulfilled and the user tries to add more characters
-    if (hasFulfilled && ((text === null || text === void 0 ? void 0 : text.match(/\d/g)) || []).join('').length > length) {
-      return;
-    }
     // Prevent user from entering more than the length
     var trimmedPin = normalizeValue(text, length);
     onChangeText === null || onChangeText === void 0 || onChangeText(trimmedPin);
     if (trimmedPin.length === length) {
       onFulfill === null || onFulfill === void 0 || onFulfill(trimmedPin);
-      setHasFulfilled(true);
     }
-  }, [length, onChangeText, onFulfill, hasFulfilled]);
+  }, [length, onChangeText, onFulfill]);
   React.useEffect(function () {
     // Must run after animations for keyboard to automatically open
     if (autoFocus) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.64.7-alpha.1",
+  "version": "8.64.8-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/src/components/PinInput/__tests__/index.spec.tsx

@@ -150,6 +150,20 @@ describe('behaviors', () => {
       }
     }
   );
+  it('does not allow typing when the max length is reached', () => {
+    const onChangeText = jest.fn();
+    const onFulfill = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <PinInput value="" onChangeText={onChangeText} onFulfill={onFulfill} />
+    );
+
+    const pinInput = getByTestId('pin-hidden-input');
+    fireEvent.changeText(pinInput, '1234');
+    fireEvent.changeText(pinInput, '56789');
+
+    expect(onChangeText).toHaveBeenCalledTimes(1);
+    expect(onFulfill).toHaveBeenCalledTimes(1);
+  });
 });
 
 describe('getState', () => {

package/src/components/PinInput/index.tsx

@@ -130,8 +130,6 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
     const maskedValueWithExtraSpace =
       Platform.OS === 'android' && !trimmedValue ? '*' : trimmedValue;
 
-    const [hasFulfilled, setHasFulfilled] = useState(false);
-
     const focus = useCallback(() => {
       if (inputRef?.current) {
         inputRef.current.focus();
@@ -148,19 +146,6 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
 
     const changeText = useCallback(
       (text: string) => {
-        // If the input is already fulfilled and the user tries to remove characters
-        if (hasFulfilled && text.length < length) {
-          setHasFulfilled(false);
-        }
-
-        // If the input is already fulfilled and the user tries to add more characters
-        if (
-          hasFulfilled &&
-          (text?.match(/\d/g) || []).join('').length > length
-        ) {
-          return;
-        }
-
         // Prevent user from entering more than the length
         const trimmedPin = normalizeValue(text, length);
 
@@ -168,10 +153,9 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
 
         if (trimmedPin.length === length) {
           onFulfill?.(trimmedPin);
-          setHasFulfilled(true);
         }
       },
-      [length, onChangeText, onFulfill, hasFulfilled]
+      [length, onChangeText, onFulfill]
     );
 
     useEffect(() => {