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

package/.turbo/turbo-build.log

@@ -0,0 +1,5 @@
+
+src/index.ts → lib/index.js, es/index.js...
+(!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
+(!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
+created lib/index.js, es/index.js in 1m 3.5s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.64.7
+
+### Patch Changes
+
+- [#3336](https://github.com/Thinkei/hero-design/pull/3336) [`34f5cb207ed68fcb4d2882e0175c7c085963332d`](https://github.com/Thinkei/hero-design/commit/34f5cb207ed68fcb4d2882e0175c7c085963332d) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [PinInput] Add value validation logic
+
 ## 8.64.6
 
 ### Patch Changes

package/es/index.js

@@ -15582,6 +15582,11 @@ function getState(_ref) {
   }
   return 'default';
 }
+// Normalize the value to only contain numbers and limit the length
+var normalizeValue = function normalizeValue(value) {
+  var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 4;
+  return ((value === null || value === void 0 ? void 0 : value.match(/\d/g)) || []).join('').slice(0, length);
+};
 var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var _ref2$value = _ref2.value,
     value = _ref2$value === void 0 ? '' : _ref2$value,
@@ -15609,8 +15614,12 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     disabled: disabled,
     error: error
   });
-  var trimmedValue = ((value === null || value === void 0 ? void 0 : value.match(/\d/g)) || []).join('').slice(0, length);
+  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();
@@ -15624,14 +15633,22 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     }
   }, []);
   var changeText = useCallback(function (text) {
-    var pin = (text.match(/\d/g) || []).join('');
+    // 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 = pin.slice(0, 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]);
+  }, [length, onChangeText, onFulfill, hasFulfilled]);
   useEffect(function () {
     // Must run after animations for keyboard to automatically open
     if (autoFocus) {

package/lib/index.js

@@ -15612,6 +15612,11 @@ function getState(_ref) {
   }
   return 'default';
 }
+// Normalize the value to only contain numbers and limit the length
+var normalizeValue = function normalizeValue(value) {
+  var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 4;
+  return ((value === null || value === void 0 ? void 0 : value.match(/\d/g)) || []).join('').slice(0, length);
+};
 var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var _ref2$value = _ref2.value,
     value = _ref2$value === void 0 ? '' : _ref2$value,
@@ -15639,8 +15644,12 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     disabled: disabled,
     error: error
   });
-  var trimmedValue = ((value === null || value === void 0 ? void 0 : value.match(/\d/g)) || []).join('').slice(0, length);
+  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();
@@ -15654,14 +15663,22 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     }
   }, []);
   var changeText = React.useCallback(function (text) {
-    var pin = (text.match(/\d/g) || []).join('');
+    // 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 = pin.slice(0, 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]);
+  }, [length, onChangeText, onFulfill, hasFulfilled]);
   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.0",
+  "version": "8.64.7",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -93,6 +93,5 @@
     "ts-jest": "^29.1.1",
     "typescript": "4.8.4"
   },
-  "prettier": "prettier-config-hd",
-  "react-native": "src/index.ts"
+  "prettier": "prettier-config-hd"
 }

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

@@ -205,7 +205,6 @@ exports[`rendering renders correctly 1`] = `
       autoFocus={false}
       editable={true}
       keyboardType="numeric"
-      maxLength={4}
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
@@ -462,7 +461,6 @@ exports[`rendering renders correctly when disabled 1`] = `
       autoFocus={false}
       editable={false}
       keyboardType="numeric"
-      maxLength={4}
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
@@ -837,7 +835,6 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
       autoFocus={false}
       editable={true}
       keyboardType="numeric"
-      maxLength={6}
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
@@ -1147,7 +1144,6 @@ exports[`rendering renders correctly when there is error 1`] = `
       autoFocus={false}
       editable={true}
       keyboardType="numeric"
-      maxLength={4}
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
@@ -1405,7 +1401,6 @@ exports[`rendering renders correctly with textContentType and autoComplete 1`] =
       autoFocus={false}
       editable={true}
       keyboardType="numeric"
-      maxLength={4}
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}

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

@@ -2,7 +2,7 @@ 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 '..';
+import PinInput, { getState, normalizeValue } from '..';
 
 describe('rendering', () => {
   it('renders correctly', () => {
@@ -94,6 +94,76 @@ describe('behaviors', () => {
     expect(onChangeText).toHaveBeenCalledWith('1234');
     expect(onFulfill).toHaveBeenCalledWith('1234');
   });
+
+  it.each`
+    value          | expected
+    ${'12 34'}     | ${'1234'}
+    ${'1 2 3 4'}   | ${'1234'}
+    ${' 1 2 3 4 '} | ${'1234'}
+  `(
+    'automatically trims whitespace characters when value is $value',
+    ({ value, expected }) => {
+      const onChangeText = jest.fn();
+      const onFulfill = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <PinInput
+          secure={false}
+          value=""
+          onChangeText={onChangeText}
+          onFulfill={onFulfill}
+        />
+      );
+
+      const pinInput = getByTestId('pin-hidden-input');
+      fireEvent.changeText(pinInput, value);
+
+      expect(onChangeText).toHaveBeenCalledWith(expected);
+      expect(onFulfill).toHaveBeenCalledWith(expected);
+    }
+  );
+
+  it.each`
+    value      | length | expected
+    ${'1234'}  | ${4}   | ${'1234'}
+    ${'12345'} | ${4}   | ${'1234'}
+    ${'1234'}  | ${6}   | ${'1234'}
+  `(
+    'limits the value when value is $value and length is $length',
+    ({ value, length, expected }) => {
+      const onChangeText = jest.fn();
+      const onFulfill = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <PinInput
+          value=""
+          length={length}
+          onChangeText={onChangeText}
+          onFulfill={onFulfill}
+        />
+      );
+
+      const pinInput = getByTestId('pin-hidden-input');
+      fireEvent.changeText(pinInput, value);
+
+      expect(onChangeText).toHaveBeenCalledWith(expected);
+      if (length === expected.legth) {
+        expect(onFulfill).toHaveBeenCalledWith(expected);
+      }
+    }
+  );
+  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', () => {
@@ -115,3 +185,30 @@ describe('getState', () => {
     }
   );
 });
+
+describe('normalizeValue', () => {
+  it.each`
+    value        | expected
+    ${''}        | ${''}
+    ${'1'}       | ${'1'}
+    ${'1234 '}   | ${'1234'}
+    ${' 1234'}   | ${'1234'}
+    ${'1 2 3 4'} | ${'1234'}
+  `('returns correct value without any whitespace', ({ value, expected }) => {
+    expect(normalizeValue(value)).toBe(expected);
+  });
+
+  it.each`
+    value      | length       | expected
+    ${'1234'}  | ${undefined} | ${'1234'}
+    ${'1234'}  | ${4}         | ${'1234'}
+    ${'12345'} | ${4}         | ${'1234'}
+    ${'1234'}  | ${6}         | ${'1234'}
+    ${'12345'} | ${6}         | ${'12345'}
+  `(
+    'returns correct value when length is $length',
+    ({ value, length, expected }) => {
+      expect(normalizeValue(value, length)).toBe(expected);
+    }
+  );
+});

package/src/components/PinInput/index.tsx

@@ -99,6 +99,10 @@ export interface PinInputHandler {
    */
   blur: () => void;
 }
+// Normalize the value to only contain numbers and limit the length
+export const normalizeValue = (value?: string, length = 4) => {
+  return (value?.match(/\d/g) || []).join('').slice(0, length);
+};
 
 const PinInput = forwardRef<PinInputHandler, PinInputProps>(
   (
@@ -121,11 +125,13 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
     const inputRef = useRef<TextInput>(null);
     const [focused, setFocused] = useState(autoFocus);
     const state = getState({ disabled, error });
-    const trimmedValue = (value?.match(/\d/g) || []).join('').slice(0, length);
+    const trimmedValue = normalizeValue(value, length);
 
     const maskedValueWithExtraSpace =
       Platform.OS === 'android' && !trimmedValue ? '*' : trimmedValue;
 
+    const [hasFulfilled, setHasFulfilled] = useState(false);
+
     const focus = useCallback(() => {
       if (inputRef?.current) {
         inputRef.current.focus();
@@ -142,17 +148,30 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
 
     const changeText = useCallback(
       (text: string) => {
-        const pin = (text.match(/\d/g) || []).join('');
+        // 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 = pin.slice(0, length);
+        const trimmedPin = normalizeValue(text, length);
 
         onChangeText?.(trimmedPin);
 
         if (trimmedPin.length === length) {
           onFulfill?.(trimmedPin);
+          setHasFulfilled(true);
         }
       },
-      [length, onChangeText, onFulfill]
+      [length, onChangeText, onFulfill, hasFulfilled]
     );
 
     useEffect(() => {