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

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");
@@ -15616,10 +15647,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 +15660,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) {
@@ -15661,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");
@@ -15646,10 +15678,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 +15691,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) {
@@ -15691,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.7",
+  "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",
@@ -93,5 +95,6 @@
     "ts-jest": "^29.1.1",
     "typescript": "4.8.4"
   },
-  "prettier": "prettier-config-hd"
+  "prettier": "prettier-config-hd",
+  "react-native": "src/index.ts"
 }

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 {
@@ -130,8 +131,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 +147,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 +154,9 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
 
         if (trimmedPin.length === length) {
           onFulfill?.(trimmedPin);
-          setHasFulfilled(true);
         }
       },
-      [length, onChangeText, onFulfill, hasFulfilled]
+      [length, onChangeText, onFulfill]
     );
 
     useEffect(() => {
@@ -186,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>

package/.turbo/turbo-build.log

@@ -1,5 +0,0 @@
-
-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