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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.64.8
+
+### Patch Changes
+
+- [#3341](https://github.com/Thinkei/hero-design/pull/3341) [`64499bbbdc8c3ee3de9ed61fd1e2d15f95eea7e9`](https://github.com/Thinkei/hero-design/commit/64499bbbdc8c3ee3de9ed61fd1e2d15f95eea7e9) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [PinInput] Update validation logic
+
 ## 8.64.7
 
 ### Patch Changes

package/es/index.js

@@ -6,7 +6,6 @@ import { createIconSet } from 'react-native-vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MonthYearPickerViewIOS, MonthYearPickerDialogueAndroid } from '@hero-design/react-native-month-year-picker';
 import DateTimePicker from '@react-native-community/datetimepicker';
-import Clipboard from '@react-native-clipboard/clipboard';
 import RnSlider from '@react-native-community/slider';
 import { RectButton, GestureHandlerRootView, Swipeable as Swipeable$1 } from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
@@ -372,36 +371,6 @@ function _typeof(o) {
     return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
   }, _typeof(o);
 }
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-  try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error) {
-    reject(error);
-    return;
-  }
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
-  }
-}
-function _asyncToGenerator(fn) {
-  return function () {
-    var self = this,
-      args = arguments;
-    return new Promise(function (resolve, reject) {
-      var gen = fn.apply(self, args);
-      function _next(value) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-      }
-      function _throw(err) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-      }
-      _next(undefined);
-    });
-  };
-}
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
     throw new TypeError("Cannot call a class as a function");
@@ -2916,7 +2885,7 @@ var getPinInputTheme = function getPinInputTheme(theme) {
   var space = {
     spacer: theme.space.medium,
     errorMessagePadding: theme.space.xsmall,
-    hiddenInputText: theme.space.xlarge,
+    hiddenInputText: theme.space.xsmall,
     hiddenInputHorrizontalPadding: theme.space.small
   };
   var radii = {
@@ -15557,6 +15526,7 @@ var StyledHiddenInput = index$9(TextInput$1)(function (_ref6) {
     top: 0,
     right: 0,
     width: themePinLength * cellWidth + (themePinLength - 1) * spacerWidth,
+    overflow: 'hidden',
     height: '100%',
     fontSize: theme.__hd__.pinInput.fontSizes.hiddenInputText,
     letterSpacing: theme.__hd__.pinInput.space.hiddenInputText,
@@ -15646,7 +15616,6 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     error: error
   });
   var trimmedValue = normalizeValue(value, length);
-  var maskedValueWithExtraSpace = Platform.OS === 'android' && !trimmedValue ? '*' : trimmedValue;
   var focus = useCallback(function () {
     if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
       inputRef.current.focus();
@@ -15660,13 +15629,20 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     }
   }, []);
   var changeText = useCallback(function (text) {
-    // Prevent user from entering more than the length
     var trimmedPin = normalizeValue(text, length);
-    onChangeText === null || onChangeText === void 0 || onChangeText(trimmedPin);
+    // If current value is already the length, replace it with the new text, starting from the length
+    if (trimmedValue.length === length && trimmedValue.length <= text.length) {
+      // Slice the text, starting from the length position
+      var slicedText = text.slice(length);
+      onChangeText === null || onChangeText === void 0 || onChangeText(normalizeValue(slicedText, length));
+    } else {
+      // Prevent user from entering more than the length
+      onChangeText === null || onChangeText === void 0 || onChangeText(trimmedPin);
+    }
     if (trimmedPin.length === length) {
       onFulfill === null || onFulfill === void 0 || onFulfill(trimmedPin);
     }
-  }, [length, onChangeText, onFulfill]);
+  }, [length, onChangeText, onFulfill, trimmedValue.length]);
   useEffect(function () {
     // Must run after animations for keyboard to automatically open
     if (autoFocus) {
@@ -15679,35 +15655,6 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       blur: blur
     };
   });
-  useEffect(function () {
-    var autoFillInterval = setInterval( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var clipboardContent, canAutoFill, isValidClipboardContent;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (!(Platform.OS === 'android')) {
-              _context.next = 7;
-              break;
-            }
-            _context.next = 3;
-            return Clipboard.getString();
-          case 3:
-            clipboardContent = _context.sent;
-            canAutoFill = autoComplete === 'one-time-code' || textContentType === 'oneTimeCode';
-            isValidClipboardContent = clipboardContent && clipboardContent.match(/^\d+$/) || normalizeValue(clipboardContent, length) !== trimmedValue;
-            if (canAutoFill && isValidClipboardContent) {
-              onChangeText === null || onChangeText === void 0 || onChangeText(clipboardContent);
-            }
-          case 7:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    })), 1000);
-    return function () {
-      clearInterval(autoFillInterval);
-    };
-  }, [autoComplete, textContentType, onChangeText, trimmedValue, length]);
   return /*#__PURE__*/React__default.createElement(StyledWrapper$5, {
     style: style,
     testID: testID
@@ -15728,7 +15675,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: maskedValueWithExtraSpace,
+    value: trimmedValue,
     onChangeText: changeText,
     secureTextEntry: secure,
     editable: !disabled,
@@ -15740,7 +15687,11 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     testID: "pin-hidden-input",
     textContentType: textContentType,
     autoComplete: autoComplete,
-    selectTextOnFocus: false
+    selectTextOnFocus: false,
+    selection: {
+      start: trimmedValue.length,
+      end: trimmedValue.length + 1
+    }
   }));
 });
 PinInput.displayName = 'PinInput';

package/lib/index.js

@@ -8,7 +8,6 @@ var reactNativeVectorIcons = require('react-native-vector-icons');
 var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 var reactNativeMonthYearPicker = require('@hero-design/react-native-month-year-picker');
 var DateTimePicker = require('@react-native-community/datetimepicker');
-var Clipboard = require('@react-native-clipboard/clipboard');
 var RnSlider = require('@react-native-community/slider');
 var reactNativeGestureHandler = require('react-native-gesture-handler');
 var LinearGradient = require('react-native-linear-gradient');
@@ -40,7 +39,6 @@ var reactNative__namespace = /*#__PURE__*/_interopNamespace(reactNative);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var DateTimePicker__default = /*#__PURE__*/_interopDefaultLegacy(DateTimePicker);
-var Clipboard__default = /*#__PURE__*/_interopDefaultLegacy(Clipboard);
 var RnSlider__default = /*#__PURE__*/_interopDefaultLegacy(RnSlider);
 var LinearGradient__default = /*#__PURE__*/_interopDefaultLegacy(LinearGradient);
 var PagerView__default = /*#__PURE__*/_interopDefaultLegacy(PagerView);
@@ -403,36 +401,6 @@ function _typeof(o) {
     return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
   }, _typeof(o);
 }
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-  try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error) {
-    reject(error);
-    return;
-  }
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
-  }
-}
-function _asyncToGenerator(fn) {
-  return function () {
-    var self = this,
-      args = arguments;
-    return new Promise(function (resolve, reject) {
-      var gen = fn.apply(self, args);
-      function _next(value) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-      }
-      function _throw(err) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-      }
-      _next(undefined);
-    });
-  };
-}
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
     throw new TypeError("Cannot call a class as a function");
@@ -2947,7 +2915,7 @@ var getPinInputTheme = function getPinInputTheme(theme) {
   var space = {
     spacer: theme.space.medium,
     errorMessagePadding: theme.space.xsmall,
-    hiddenInputText: theme.space.xlarge,
+    hiddenInputText: theme.space.xsmall,
     hiddenInputHorrizontalPadding: theme.space.small
   };
   var radii = {
@@ -15588,6 +15556,7 @@ var StyledHiddenInput = index$9(reactNative.TextInput)(function (_ref6) {
     top: 0,
     right: 0,
     width: themePinLength * cellWidth + (themePinLength - 1) * spacerWidth,
+    overflow: 'hidden',
     height: '100%',
     fontSize: theme.__hd__.pinInput.fontSizes.hiddenInputText,
     letterSpacing: theme.__hd__.pinInput.space.hiddenInputText,
@@ -15677,7 +15646,6 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     error: error
   });
   var trimmedValue = normalizeValue(value, length);
-  var maskedValueWithExtraSpace = reactNative.Platform.OS === 'android' && !trimmedValue ? '*' : trimmedValue;
   var focus = React.useCallback(function () {
     if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
       inputRef.current.focus();
@@ -15691,13 +15659,20 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     }
   }, []);
   var changeText = React.useCallback(function (text) {
-    // Prevent user from entering more than the length
     var trimmedPin = normalizeValue(text, length);
-    onChangeText === null || onChangeText === void 0 || onChangeText(trimmedPin);
+    // If current value is already the length, replace it with the new text, starting from the length
+    if (trimmedValue.length === length && trimmedValue.length <= text.length) {
+      // Slice the text, starting from the length position
+      var slicedText = text.slice(length);
+      onChangeText === null || onChangeText === void 0 || onChangeText(normalizeValue(slicedText, length));
+    } else {
+      // Prevent user from entering more than the length
+      onChangeText === null || onChangeText === void 0 || onChangeText(trimmedPin);
+    }
     if (trimmedPin.length === length) {
       onFulfill === null || onFulfill === void 0 || onFulfill(trimmedPin);
     }
-  }, [length, onChangeText, onFulfill]);
+  }, [length, onChangeText, onFulfill, trimmedValue.length]);
   React.useEffect(function () {
     // Must run after animations for keyboard to automatically open
     if (autoFocus) {
@@ -15710,35 +15685,6 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       blur: blur
     };
   });
-  React.useEffect(function () {
-    var autoFillInterval = setInterval( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var clipboardContent, canAutoFill, isValidClipboardContent;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (!(reactNative.Platform.OS === 'android')) {
-              _context.next = 7;
-              break;
-            }
-            _context.next = 3;
-            return Clipboard__default["default"].getString();
-          case 3:
-            clipboardContent = _context.sent;
-            canAutoFill = autoComplete === 'one-time-code' || textContentType === 'oneTimeCode';
-            isValidClipboardContent = clipboardContent && clipboardContent.match(/^\d+$/) || normalizeValue(clipboardContent, length) !== trimmedValue;
-            if (canAutoFill && isValidClipboardContent) {
-              onChangeText === null || onChangeText === void 0 || onChangeText(clipboardContent);
-            }
-          case 7:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    })), 1000);
-    return function () {
-      clearInterval(autoFillInterval);
-    };
-  }, [autoComplete, textContentType, onChangeText, trimmedValue, length]);
   return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$5, {
     style: style,
     testID: testID
@@ -15759,7 +15705,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: maskedValueWithExtraSpace,
+    value: trimmedValue,
     onChangeText: changeText,
     secureTextEntry: secure,
     editable: !disabled,
@@ -15771,7 +15717,11 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     testID: "pin-hidden-input",
     textContentType: textContentType,
     autoComplete: autoComplete,
-    selectTextOnFocus: false
+    selectTextOnFocus: false,
+    selection: {
+      start: trimmedValue.length,
+      end: trimmedValue.length + 1
+    }
   }));
 });
 PinInput.displayName = 'PinInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.64.8-alpha.1",
+  "version": "8.64.9-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -29,7 +29,6 @@
   },
   "peerDependencies": {
     "@hero-design/react-native-month-year-picker": "^8.42.10",
-    "@react-native-clipboard/clipboard": "^1.13.2",
     "@react-native-community/datetimepicker": "^3.5.2 || ^7.6.1",
     "@react-native-community/slider": "^4.5.1",
     "react": "18.2.0",
@@ -53,7 +52,6 @@
     "@eslint/js": "^9.8.0",
     "@hero-design/eslint-plugin": "9.2.0",
     "@hero-design/react-native-month-year-picker": "^8.42.10",
-    "@react-native-clipboard/clipboard": "^1.14.2",
     "@react-native-community/datetimepicker": "7.6.1",
     "@react-native-community/slider": "^4.5.1",
     "@rollup/plugin-babel": "^5.3.1",

package/rollup.config.js

@@ -40,7 +40,6 @@ export default {
     'react-native-vector-icons',
     'react-native-linear-gradient',
     '@hero-design/react-native-month-year-picker',
-    '@react-native-clipboard/clipboard',
   ],
   plugins: [
     replace({

package/src/components/PinInput/StyledPinInput.tsx

@@ -70,6 +70,7 @@ export const StyledHiddenInput = styled(TextInput)<{ themePinLength: number }>(
       top: 0,
       right: 0,
       width: themePinLength * cellWidth + (themePinLength - 1) * spacerWidth,
+      overflow: 'hidden',
       height: '100%',
       fontSize: theme.__hd__.pinInput.fontSizes.hiddenInputText,
       letterSpacing: theme.__hd__.pinInput.space.hiddenInputText,

package/src/components/PinInput/index.tsx

@@ -7,9 +7,8 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { InteractionManager, Platform, TextInput } from 'react-native';
+import { InteractionManager, TextInput } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
-import Clipboard from '@react-native-clipboard/clipboard';
 import Icon from '../Icon';
 import PinCell from './PinCell';
 import {
@@ -128,9 +127,6 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
     const state = getState({ disabled, error });
     const trimmedValue = normalizeValue(value, length);
 
-    const maskedValueWithExtraSpace =
-      Platform.OS === 'android' && !trimmedValue ? '*' : trimmedValue;
-
     const focus = useCallback(() => {
       if (inputRef?.current) {
         inputRef.current.focus();
@@ -144,19 +140,29 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
         setFocused(false);
       }
     }, []);
-
     const changeText = useCallback(
       (text: string) => {
-        // Prevent user from entering more than the length
         const trimmedPin = normalizeValue(text, length);
 
-        onChangeText?.(trimmedPin);
+        // If current value is already the length, replace it with the new text, starting from the length
+        if (
+          trimmedValue.length === length &&
+          trimmedValue.length <= text.length
+        ) {
+          // Slice the text, starting from the length position
+          const slicedText = text.slice(length);
+
+          onChangeText?.(normalizeValue(slicedText, length));
+        } else {
+          // Prevent user from entering more than the length
+          onChangeText?.(trimmedPin);
+        }
 
         if (trimmedPin.length === length) {
           onFulfill?.(trimmedPin);
         }
       },
-      [length, onChangeText, onFulfill]
+      [length, onChangeText, onFulfill, trimmedValue.length]
     );
 
     useEffect(() => {
@@ -171,28 +177,6 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
       blur,
     }));
 
-    useEffect(() => {
-      const autoFillInterval = setInterval(async () => {
-        if (Platform.OS === 'android') {
-          const clipboardContent = await Clipboard.getString();
-          const canAutoFill =
-            autoComplete === 'one-time-code' ||
-            textContentType === 'oneTimeCode';
-          const isValidClipboardContent =
-            (clipboardContent && clipboardContent.match(/^\d+$/)) ||
-            normalizeValue(clipboardContent, length) !== trimmedValue;
-
-          if (canAutoFill && isValidClipboardContent) {
-            onChangeText?.(clipboardContent);
-          }
-        }
-      }, 1000);
-
-      return () => {
-        clearInterval(autoFillInterval);
-      };
-    }, [autoComplete, textContentType, onChangeText, trimmedValue, length]);
-
     return (
       <StyledWrapper style={style} testID={testID}>
         <StyledPinWrapper>
@@ -222,7 +206,7 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
         <StyledHiddenInput
           themePinLength={length}
           ref={inputRef}
-          value={maskedValueWithExtraSpace}
+          value={trimmedValue}
           onChangeText={changeText}
           secureTextEntry={secure}
           editable={!disabled}
@@ -235,6 +219,10 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
           textContentType={textContentType}
           autoComplete={autoComplete}
           selectTextOnFocus={false}
+          selection={{
+            start: trimmedValue.length,
+            end: trimmedValue.length + 1,
+          }}
         />
       </StyledWrapper>
     );

package/src/theme/components/pinInput.ts

@@ -37,7 +37,7 @@ const getPinInputTheme = (theme: GlobalTheme) => {
   const space = {
     spacer: theme.space.medium,
     errorMessagePadding: theme.space.xsmall,
-    hiddenInputText: theme.space.xlarge,
+    hiddenInputText: theme.space.xsmall,
     hiddenInputHorrizontalPadding: theme.space.small,
   };