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

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

@@ -6,6 +6,7 @@ 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';
@@ -371,6 +372,36 @@ 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");
@@ -15648,6 +15679,35 @@ 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

package/lib/index.js

@@ -8,6 +8,7 @@ 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');
@@ -39,6 +40,7 @@ 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);
@@ -401,6 +403,36 @@ 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");
@@ -15678,6 +15710,35 @@ 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.64.8-alpha.0",
+  "version": "8.64.8-alpha.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -29,6 +29,7 @@
   },
   "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",
@@ -52,6 +53,7 @@
     "@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,6 +40,7 @@ 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/__tests__/index.spec.tsx

@@ -150,20 +150,6 @@ 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

@@ -9,6 +9,7 @@ import React, {
 } from 'react';
 import { InteractionManager, Platform, 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 {
@@ -170,6 +171,28 @@ 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>