diff --git a/.gitignore b/.gitignore index f2a529e..9038659 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules .DS_Store -coverage \ No newline at end of file +coverage +dist \ No newline at end of file diff --git a/dist/jest.config.d.ts b/dist/jest.config.d.ts deleted file mode 100644 index 0c491e5..0000000 --- a/dist/jest.config.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import type { Config } from "@jest/types"; -declare const config: Config.InitialOptions; -export default config; diff --git a/dist/jest.config.js b/dist/jest.config.js deleted file mode 100644 index 9c8d4b4..0000000 --- a/dist/jest.config.js +++ /dev/null @@ -1,21 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -const Presets = require("ts-jest/presets"); -const config = { - ...Presets.defaults, - preset: "react-native", - transform: { - "^.+\\.jsx$": "babel-jest", - "^.+\\.tsx?$": [ - "ts-jest", - { - tsconfig: "tsconfig.jest.json", - }, - ], - }, - moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"], - modulePathIgnorePatterns: ["./dist/"], - coverageReporters: ["json-summary", "html"], - setupFilesAfterEnv: ["./jest.setupFilesAfterEnv.ts"], -}; -exports.default = config; diff --git a/dist/jest.setupFilesAfterEnv.d.ts b/dist/jest.setupFilesAfterEnv.d.ts deleted file mode 100644 index 534d1ed..0000000 --- a/dist/jest.setupFilesAfterEnv.d.ts +++ /dev/null @@ -1 +0,0 @@ -import "@testing-library/jest-native/extend-expect"; diff --git a/dist/jest.setupFilesAfterEnv.js b/dist/jest.setupFilesAfterEnv.js deleted file mode 100644 index 4c53a92..0000000 --- a/dist/jest.setupFilesAfterEnv.js +++ /dev/null @@ -1,3 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -require("@testing-library/jest-native/extend-expect"); diff --git a/dist/src/OtpInput/OtpInput.d.ts b/dist/src/OtpInput/OtpInput.d.ts deleted file mode 100644 index c065295..0000000 --- a/dist/src/OtpInput/OtpInput.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -/// -import { OtpInputProps, OtpInputRef } from "./OtpInput.types"; -export declare const OtpInput: import("react").ForwardRefExoticComponent>; diff --git a/dist/src/OtpInput/OtpInput.js b/dist/src/OtpInput/OtpInput.js deleted file mode 100644 index c1c5e20..0000000 --- a/dist/src/OtpInput/OtpInput.js +++ /dev/null @@ -1,46 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -exports.OtpInput = void 0; -const react_1 = require("react"); -const react_native_1 = require("react-native"); -const OtpInput_styles_1 = require("./OtpInput.styles"); -const VerticalStick_1 = require("./VerticalStick"); -const useOtpInput_1 = require("./useOtpInput"); -exports.OtpInput = (0, react_1.forwardRef)((props, ref) => { - const { models: { text, inputRef, focusedInputIndex, hasCursor }, actions: { clear, handlePress, handleTextChange, focus, handleFocus, handleBlur }, forms: { setTextWithRef }, } = (0, useOtpInput_1.useOtpInput)(props); - const { disabled, numberOfDigits = 6, autoFocus = true, hideStick, focusColor = "#A4D0A4", focusStickBlinkingDuration, secureTextEntry = false, theme = {}, textInputProps, } = props; - const { containerStyle, inputsContainerStyle, pinCodeContainerStyle, pinCodeTextStyle, focusStickStyle, focusedPinCodeContainerStyle, filledPinCodeContainerStyle, disabledPinCodeContainerStyle, } = theme; - (0, react_1.useImperativeHandle)(ref, () => ({ clear, focus, setValue: setTextWithRef })); - const generatePinCodeContainerStyle = (isFocusedInput, char) => { - const stylesArray = [OtpInput_styles_1.styles.codeContainer, pinCodeContainerStyle]; - if (focusColor && isFocusedInput) { - stylesArray.push({ borderColor: focusColor }); - } - if (focusedPinCodeContainerStyle && isFocusedInput) { - stylesArray.push(focusedPinCodeContainerStyle); - } - if (filledPinCodeContainerStyle && Boolean(char)) { - stylesArray.push(filledPinCodeContainerStyle); - } - if (disabledPinCodeContainerStyle && disabled) { - stylesArray.push(disabledPinCodeContainerStyle); - } - return stylesArray; - }; - return ( - - {Array(numberOfDigits) - .fill(0) - .map((_, index) => { - const char = text[index]; - const isFocusedInput = index === focusedInputIndex && !disabled && Boolean(hasCursor); - return ( - {isFocusedInput && !hideStick ? () : ( - {char && secureTextEntry ? "•" : char} - )} - ); - })} - - - ); -}); diff --git a/dist/src/OtpInput/OtpInput.styles.d.ts b/dist/src/OtpInput/OtpInput.styles.d.ts deleted file mode 100644 index ba365c1..0000000 --- a/dist/src/OtpInput/OtpInput.styles.d.ts +++ /dev/null @@ -1,35 +0,0 @@ -export declare const styles: { - container: { - flexDirection: "row"; - }; - inputsContainer: { - flexDirection: "row"; - flex: number; - justifyContent: "space-between"; - }; - codeContainer: { - borderWidth: number; - borderRadius: number; - borderColor: string; - height: number; - width: number; - justifyContent: "center"; - alignItems: "center"; - }; - codeText: { - fontSize: number; - }; - hiddenInput: { - opacity: number; - position: "absolute"; - left: 0; - right: 0; - top: 0; - bottom: 0; - }; - stick: { - width: number; - height: number; - backgroundColor: string; - }; -}; diff --git a/dist/src/OtpInput/OtpInput.styles.js b/dist/src/OtpInput/OtpInput.styles.js deleted file mode 100644 index 25c6cf8..0000000 --- a/dist/src/OtpInput/OtpInput.styles.js +++ /dev/null @@ -1,35 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -exports.styles = void 0; -const react_native_1 = require("react-native"); -exports.styles = react_native_1.StyleSheet.create({ - container: { - flexDirection: "row", - }, - inputsContainer: { - flexDirection: "row", - flex: 1, - justifyContent: "space-between", - }, - codeContainer: { - borderWidth: 1, - borderRadius: 12, - borderColor: "#DFDFDE", - height: 60, - width: 44, - justifyContent: "center", - alignItems: "center", - }, - codeText: { - fontSize: 28, - }, - hiddenInput: { - ...react_native_1.StyleSheet.absoluteFillObject, - opacity: 0.01, - }, - stick: { - width: 2, - height: 30, - backgroundColor: "green", - }, -}); diff --git a/dist/src/OtpInput/OtpInput.types.d.ts b/dist/src/OtpInput/OtpInput.types.d.ts deleted file mode 100644 index de8d21b..0000000 --- a/dist/src/OtpInput/OtpInput.types.d.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { ColorValue, TextInputProps, TextStyle, ViewStyle } from "react-native"; -export interface OtpInputProps { - numberOfDigits?: number; - autoFocus?: boolean; - focusColor?: ColorValue; - onTextChange?: (text: string) => void; - onFilled?: (text: string) => void; - hideStick?: boolean; - focusStickBlinkingDuration?: number; - secureTextEntry?: boolean; - theme?: Theme; - disabled?: boolean; - textInputProps?: TextInputProps; -} -export interface OtpInputRef { - clear: () => void; - focus: () => void; - setValue: (value: string) => void; -} -export interface Theme { - containerStyle?: ViewStyle; - inputsContainerStyle?: ViewStyle; - pinCodeContainerStyle?: ViewStyle; - filledPinCodeContainerStyle?: ViewStyle; - pinCodeTextStyle?: TextStyle; - focusStickStyle?: ViewStyle; - focusedPinCodeContainerStyle?: ViewStyle; - disabledPinCodeContainerStyle?: ViewStyle; -} diff --git a/dist/src/OtpInput/OtpInput.types.js b/dist/src/OtpInput/OtpInput.types.js deleted file mode 100644 index c8ad2e5..0000000 --- a/dist/src/OtpInput/OtpInput.types.js +++ /dev/null @@ -1,2 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); diff --git a/dist/src/OtpInput/VerticalStick.d.ts b/dist/src/OtpInput/VerticalStick.d.ts deleted file mode 100644 index 0546512..0000000 --- a/dist/src/OtpInput/VerticalStick.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -/// -import { ColorValue, ViewStyle } from "react-native"; -interface VerticalStickProps { - focusColor?: ColorValue; - style?: ViewStyle; - focusStickBlinkingDuration?: number; -} -export declare const VerticalStick: React.FC; -export {}; diff --git a/dist/src/OtpInput/VerticalStick.js b/dist/src/OtpInput/VerticalStick.js deleted file mode 100644 index 961edbf..0000000 --- a/dist/src/OtpInput/VerticalStick.js +++ /dev/null @@ -1,28 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -exports.VerticalStick = void 0; -const react_1 = require("react"); -const react_native_1 = require("react-native"); -const OtpInput_styles_1 = require("./OtpInput.styles"); -exports.VerticalStick = (0, react_1.memo)(({ focusColor, style, focusStickBlinkingDuration = 350 }) => { - const opacityAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current; - (0, react_1.useEffect)(() => { - react_native_1.Animated.loop(react_native_1.Animated.sequence([ - react_native_1.Animated.timing(opacityAnim, { - toValue: 0, - useNativeDriver: true, - duration: focusStickBlinkingDuration, - }), - react_native_1.Animated.timing(opacityAnim, { - toValue: 1, - useNativeDriver: true, - duration: focusStickBlinkingDuration, - }), - ]), { - iterations: -1, - }).start(); - }, []); - return ( - - ); -}); diff --git a/dist/src/OtpInput/__tests__/OtpInput.test.d.ts b/dist/src/OtpInput/__tests__/OtpInput.test.d.ts deleted file mode 100644 index cb0ff5c..0000000 --- a/dist/src/OtpInput/__tests__/OtpInput.test.d.ts +++ /dev/null @@ -1 +0,0 @@ -export {}; diff --git a/dist/src/OtpInput/__tests__/OtpInput.test.js b/dist/src/OtpInput/__tests__/OtpInput.test.js deleted file mode 100644 index 0f489df..0000000 --- a/dist/src/OtpInput/__tests__/OtpInput.test.js +++ /dev/null @@ -1,171 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -const react_native_1 = require("@testing-library/react-native"); -const React = require("react"); -const react_native_2 = require("react-native"); -const OtpInput_1 = require("../OtpInput"); -const renderOtpInput = (props) => (0, react_native_1.render)(); -describe("OtpInput", () => { - describe("UI", () => { - test("should render correctly", () => { - const tree = renderOtpInput().toJSON(); - expect(tree).toMatchSnapshot(); - }); - test("should render stick if hideStick is false", () => { - renderOtpInput({ hideStick: false }); - const stick = react_native_1.screen.getByTestId("otp-input-stick"); - expect(stick).toBeTruthy(); - }); - test('should not render stick if "hideStick" is true', () => { - renderOtpInput({ hideStick: true }); - const stick = react_native_1.screen.queryByTestId("otp-input-stick"); - expect(stick).toBeFalsy(); - }); - test('should not show values if "secureTextEntry" is true', () => { - renderOtpInput({ secureTextEntry: true }); - const input = react_native_1.screen.getByTestId("otp-input-hidden"); - react_native_1.fireEvent.changeText(input, "123456"); - const inputs = react_native_1.screen.getAllByTestId("otp-input"); - inputs.forEach((input) => { - expect(input).toHaveTextContent("•"); - }); - }); - test("should have 6 inputs by default", () => { - renderOtpInput(); - const inputs = react_native_1.screen.getAllByTestId("otp-input"); - expect(inputs).toHaveLength(6); - }); - test("should autoFocused by default", () => { - renderOtpInput(); - const input = react_native_1.screen.getByTestId("otp-input-hidden"); - expect(input.props.autoFocus).toBe(true); - }); - test('should not focus if "autoFocus" is false', () => { - renderOtpInput({ autoFocus: false }); - const input = react_native_1.screen.getByTestId("otp-input-hidden"); - expect(input.props.autoFocus).toBe(false); - }); - test("should not focus if disabled is true", () => { - renderOtpInput({ - disabled: true, - focusColor: "#444", - }); - const inputs = react_native_1.screen.getAllByTestId("otp-input"); - expect(inputs[0]).not.toHaveStyle({ borderColor: "#444" }); - }); - test("it should not allow input if disabled is true", () => { - renderOtpInput({ disabled: true }); - const input = react_native_1.screen.getByTestId("otp-input-hidden"); - react_native_1.fireEvent.changeText(input, "123456"); - const inputs = react_native_1.screen.getAllByTestId("otp-input"); - expect(inputs[0]).not.toHaveTextContent("1"); - inputs.forEach((i) => expect(i).toBeDisabled()); - const hiddenInput = react_native_1.screen.getByTestId("otp-input-hidden"); - expect(hiddenInput).toBeDisabled(); - }); - test("focusColor should not be overridden by theme", () => { - renderOtpInput({ - focusColor: "#000", - theme: { pinCodeContainerStyle: { borderColor: "#fff" } }, - }); - const inputs = react_native_1.screen.getAllByTestId("otp-input"); - expect(inputs[0]).toHaveStyle({ borderColor: "#000" }); - }); - test("focusedPinCodeContainerStyle should not be overridden by theme", () => { - renderOtpInput({ - focusColor: "#000", - theme: { focusedPinCodeContainerStyle: { borderColor: "#fff", backgroundColor: "green" } }, - }); - const inputs = react_native_1.screen.getAllByTestId("otp-input"); - expect(inputs[0]).toHaveStyle({ borderColor: "#fff", backgroundColor: "green" }); - }); - // Test if the number of rendered inputs is equal to the number of digits - test.each([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])("should render the correct number of inputs: %i", (numberOfDigits) => { - renderOtpInput({ numberOfDigits: numberOfDigits }); - const inputs = react_native_1.screen.getAllByTestId("otp-input"); - expect(inputs).toHaveLength(numberOfDigits); - }); - test("filledPinCodeContainerStyle should allow for new style when digit is present", () => { - renderOtpInput({ - theme: { filledPinCodeContainerStyle: { borderBottomColor: "red" } }, - }); - const input = react_native_1.screen.getByTestId("otp-input-hidden"); - react_native_1.fireEvent.changeText(input, "12"); - const inputs = react_native_1.screen.getAllByTestId("otp-input"); - expect(inputs[0]).toHaveStyle({ borderBottomColor: "red" }); - expect(inputs[1]).toHaveStyle({ borderBottomColor: "red" }); - expect(inputs[2]).not.toHaveStyle({ borderBottomColor: "red" }); - }); - test("disabledPinCodeContainerStyle should allow for new style when input is disabled", () => { - renderOtpInput({ - disabled: true, - theme: { disabledPinCodeContainerStyle: { borderBottomColor: "red" } }, - }); - const inputs = react_native_1.screen.getAllByTestId("otp-input"); - expect(inputs[0]).toHaveStyle({ borderBottomColor: "red" }); - }); - test('autoComplete should be set "sms-otp" on Android', () => { - react_native_2.Platform.OS = "android"; - renderOtpInput(); - const input = react_native_1.screen.getByTestId("otp-input-hidden"); - expect(input.props.autoComplete).toBe("sms-otp"); - }); - test('autoComplete should be set "one-time-code" on iOS', () => { - react_native_2.Platform.OS = "ios"; - renderOtpInput(); - const input = react_native_1.screen.getByTestId("otp-input-hidden"); - expect(input.props.autoComplete).toBe("one-time-code"); - }); - }); - describe("Logic", () => { - test("should split text on screen from the text written in the hidden input", () => { - const otp = "123456"; - renderOtpInput(); - const input = react_native_1.screen.getByTestId("otp-input-hidden"); - react_native_1.fireEvent.changeText(input, otp); - (0, react_native_1.act)(() => { - expect(react_native_1.screen.getByText("1")).toBeTruthy(); - expect(react_native_1.screen.getByText("2")).toBeTruthy(); - expect(react_native_1.screen.getByText("3")).toBeTruthy(); - expect(react_native_1.screen.getByText("4")).toBeTruthy(); - expect(react_native_1.screen.getByText("5")).toBeTruthy(); - expect(react_native_1.screen.getByText("6")).toBeTruthy(); - expect(react_native_1.screen.queryByText(otp)).not.toBeTruthy(); - }); - }); - test("ref clear() should clear input", () => { - const ref = React.createRef(); - (0, react_native_1.render)(); - const otp = "1"; - const input = react_native_1.screen.getByTestId("otp-input-hidden"); - react_native_1.fireEvent.changeText(input, otp); - (0, react_native_1.act)(() => { - ref.current?.clear(); - }); - expect(react_native_1.screen.queryByText("1")).toBeFalsy(); - }); - test("ref setValue() should set input value", () => { - const ref = React.createRef(); - (0, react_native_1.render)(); - const otp = "1"; - (0, react_native_1.act)(() => { - ref.current?.setValue(otp); - }); - expect(react_native_1.screen.getByText("1")).toBeTruthy(); - }); - test('ref setValue() should set only the first "numberOfDigits" characters', () => { - const ref = React.createRef(); - (0, react_native_1.render)(); - const otp = "123456"; - (0, react_native_1.act)(() => { - ref.current?.setValue(otp); - }); - expect(react_native_1.screen.getByText("1")).toBeTruthy(); - expect(react_native_1.screen.getByText("2")).toBeTruthy(); - expect(react_native_1.screen.getByText("3")).toBeTruthy(); - expect(react_native_1.screen.getByText("4")).toBeTruthy(); - expect(react_native_1.screen.queryByText("5")).toBeFalsy(); - expect(react_native_1.screen.queryByText("6")).toBeFalsy(); - }); - }); -}); diff --git a/dist/src/OtpInput/__tests__/VerticalStick.test.d.ts b/dist/src/OtpInput/__tests__/VerticalStick.test.d.ts deleted file mode 100644 index cb0ff5c..0000000 --- a/dist/src/OtpInput/__tests__/VerticalStick.test.d.ts +++ /dev/null @@ -1 +0,0 @@ -export {}; diff --git a/dist/src/OtpInput/__tests__/VerticalStick.test.js b/dist/src/OtpInput/__tests__/VerticalStick.test.js deleted file mode 100644 index 9d0b158..0000000 --- a/dist/src/OtpInput/__tests__/VerticalStick.test.js +++ /dev/null @@ -1,16 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -const react_native_1 = require("@testing-library/react-native"); -const VerticalStick_1 = require("../VerticalStick"); -describe("VerticalStick", () => { - test("should set focusColor when passed", () => { - (0, react_native_1.render)(); - const stick = react_native_1.screen.getByTestId("otp-input-stick"); - expect(stick).toHaveStyle({ backgroundColor: "red" }); - }); - test("should set focusColor to 'green' if not passed", () => { - (0, react_native_1.render)(); - const stick = react_native_1.screen.getByTestId("otp-input-stick"); - expect(stick).toHaveStyle({ backgroundColor: "green" }); - }); -}); diff --git a/dist/src/OtpInput/__tests__/useOtpInput.test.d.ts b/dist/src/OtpInput/__tests__/useOtpInput.test.d.ts deleted file mode 100644 index cb0ff5c..0000000 --- a/dist/src/OtpInput/__tests__/useOtpInput.test.d.ts +++ /dev/null @@ -1 +0,0 @@ -export {}; diff --git a/dist/src/OtpInput/__tests__/useOtpInput.test.js b/dist/src/OtpInput/__tests__/useOtpInput.test.js deleted file mode 100644 index 08af6af..0000000 --- a/dist/src/OtpInput/__tests__/useOtpInput.test.js +++ /dev/null @@ -1,126 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -const react_native_1 = require("@testing-library/react-native"); -const React = require("react"); -const react_native_2 = require("react-native"); -const useOtpInput_1 = require("../useOtpInput"); -const renderUseOtInput = (props) => (0, react_native_1.renderHook)(() => (0, useOtpInput_1.useOtpInput)({ numberOfDigits: 6, ...props })); -describe("useOtpInput", () => { - afterEach(() => { - jest.clearAllMocks(); - }); - test("should return models as defined", () => { - const { result: { current: { models: { text, focusedInputIndex, inputRef }, }, }, } = renderUseOtInput(); - expect(text).toBe(""); - expect(focusedInputIndex).toBe(0); - expect(inputRef.current).toBeNull(); - }); - test("clear() should clear text", () => { - jest.spyOn(React, "useState").mockImplementation(() => ["", jest.fn()]); - const { result } = renderUseOtInput(); - result.current.actions.clear(); - (0, react_native_1.act)(() => { - expect(result.current.forms.setText).toHaveBeenCalledWith(""); - }); - }); - test("focus() should focus on input", () => { - jest.spyOn(React, "useRef").mockReturnValue({ current: { focus: jest.fn() } }); - const { result } = renderUseOtInput(); - result.current.actions.focus(); - (0, react_native_1.act)(() => { - expect(result.current.models.inputRef.current?.focus).toHaveBeenCalled(); - }); - }); - test("setTextWithRef() should only call setText the first 'numberOfDigits' characters", () => { - jest.spyOn(React, "useState").mockImplementation(() => ["", jest.fn()]); - const { result } = renderUseOtInput(); - result.current.forms.setTextWithRef("123456789"); - (0, react_native_1.act)(() => { - expect(result.current.forms.setText).toHaveBeenCalledWith("123456"); - }); - }); - test("handlePress() should dismiss Keyboard if it's visible", () => { - jest.spyOn(react_native_2.Keyboard, "dismiss"); - jest.spyOn(react_native_2.Keyboard, "isVisible").mockReturnValue(false); - const { result } = renderUseOtInput(); - result.current.actions.handlePress(); - (0, react_native_1.act)(() => { - expect(react_native_2.Keyboard.dismiss).toHaveBeenCalled(); - }); - }); - test("handlePress() should NOT dismiss Keyboard if it's NOT visible", () => { - jest.spyOn(react_native_2.Keyboard, "dismiss"); - jest.spyOn(react_native_2.Keyboard, "isVisible").mockReturnValue(true); - const { result } = renderUseOtInput(); - result.current.actions.handlePress(); - (0, react_native_1.act)(() => { - expect(react_native_2.Keyboard.dismiss).not.toHaveBeenCalled(); - }); - }); - test("handlePress() should focus on input", () => { - jest.spyOn(React, "useRef").mockReturnValue({ current: { focus: jest.fn() } }); - const { result } = renderUseOtInput(); - result.current.actions.handlePress(); - (0, react_native_1.act)(() => { - expect(result.current.models.inputRef.current?.focus).toHaveBeenCalled(); - }); - }); - test("handleTextChange() should call setText() and onTextChange() with value", () => { - const value = "123456"; - const mockOnTextChange = jest.fn(); - jest.spyOn(React, "useState").mockImplementation(() => ["", jest.fn()]); - const { result } = renderUseOtInput({ onTextChange: mockOnTextChange }); - result.current.actions.handleTextChange(value); - (0, react_native_1.act)(() => { - expect(result.current.forms.setText).toHaveBeenCalledWith(value); - expect(mockOnTextChange).toHaveBeenCalledWith(value); - }); - }); - test("handleTextChange() should not proceed if the input is disabled", () => { - const value = "123456"; - const mockOnTextChange = jest.fn(); - jest.spyOn(React, "useState").mockImplementation(() => ["", jest.fn()]); - const { result } = renderUseOtInput({ onTextChange: mockOnTextChange, disabled: true }); - result.current.actions.handleTextChange(value); - (0, react_native_1.act)(() => { - expect(result.current.forms.setText).not.toHaveBeenCalled(); - expect(mockOnTextChange).not.toHaveBeenCalled(); - }); - }); - test("onFilled() should be called when the input filled", () => { - const value = "123456"; - const mockOnFilled = jest.fn(); - const { result } = renderUseOtInput({ onFilled: mockOnFilled }); - result.current.actions.handleTextChange(value); - (0, react_native_1.act)(() => { - expect(mockOnFilled).toHaveBeenCalledWith(value); - }); - }); - test("onFilled() should NOT be called when the input is NOT filled", () => { - const value = "12345"; - const mockOnFilled = jest.fn(); - const { result } = renderUseOtInput({ onFilled: mockOnFilled }); - result.current.actions.handleTextChange(value); - (0, react_native_1.act)(() => { - expect(mockOnFilled).not.toHaveBeenCalled(); - }); - }); - test("handleFocus() should set hasCurrentFocus to true", () => { - const mockSetState = jest.fn(); - jest.spyOn(React, "useState").mockImplementation(() => [false, mockSetState]); - const { result } = renderUseOtInput(); - result.current.actions.handleFocus(); - (0, react_native_1.act)(() => { - expect(mockSetState).toHaveBeenCalledWith(true); - }); - }); - test("handleBlur() should set hasCurrentFocus to false", () => { - const mockSetState = jest.fn(); - jest.spyOn(React, "useState").mockImplementation(() => [true, mockSetState]); - const { result } = renderUseOtInput(); - result.current.actions.handleBlur(); - (0, react_native_1.act)(() => { - expect(mockSetState).toHaveBeenCalledWith(false); - }); - }); -}); diff --git a/dist/src/OtpInput/index.d.ts b/dist/src/OtpInput/index.d.ts deleted file mode 100644 index 6b8d58e..0000000 --- a/dist/src/OtpInput/index.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./OtpInput"; -export * from "./OtpInput.types"; diff --git a/dist/src/OtpInput/index.js b/dist/src/OtpInput/index.js deleted file mode 100644 index a02e4f4..0000000 --- a/dist/src/OtpInput/index.js +++ /dev/null @@ -1,18 +0,0 @@ -"use strict"; -var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { - if (k2 === undefined) k2 = k; - var desc = Object.getOwnPropertyDescriptor(m, k); - if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { - desc = { enumerable: true, get: function() { return m[k]; } }; - } - Object.defineProperty(o, k2, desc); -}) : (function(o, m, k, k2) { - if (k2 === undefined) k2 = k; - o[k2] = m[k]; -})); -var __exportStar = (this && this.__exportStar) || function(m, exports) { - for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); -}; -Object.defineProperty(exports, "__esModule", { value: true }); -__exportStar(require("./OtpInput"), exports); -__exportStar(require("./OtpInput.types"), exports); diff --git a/dist/src/OtpInput/useOtpInput.d.ts b/dist/src/OtpInput/useOtpInput.d.ts deleted file mode 100644 index f076a0c..0000000 --- a/dist/src/OtpInput/useOtpInput.d.ts +++ /dev/null @@ -1,23 +0,0 @@ -/// -import { TextInput } from "react-native"; -import { OtpInputProps } from "./OtpInput.types"; -export declare const useOtpInput: ({ onTextChange, onFilled, numberOfDigits, disabled, autoFocus, }: OtpInputProps) => { - models: { - text: string; - inputRef: import("react").RefObject; - focusedInputIndex: number; - hasCursor: boolean; - }; - actions: { - handlePress: () => void; - handleTextChange: (value: string) => void; - clear: () => void; - focus: () => void; - handleFocus: () => void; - handleBlur: () => void; - }; - forms: { - setText: import("react").Dispatch>; - setTextWithRef: (value: string) => void; - }; -}; diff --git a/dist/src/OtpInput/useOtpInput.js b/dist/src/OtpInput/useOtpInput.js deleted file mode 100644 index 616255c..0000000 --- a/dist/src/OtpInput/useOtpInput.js +++ /dev/null @@ -1,49 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -exports.useOtpInput = void 0; -const react_1 = require("react"); -const react_native_1 = require("react-native"); -const useOtpInput = ({ onTextChange, onFilled, numberOfDigits = 6, disabled, autoFocus = true, }) => { - const [text, setText] = (0, react_1.useState)(""); - const [hasCursor, setHasCursor] = (0, react_1.useState)(autoFocus); - const inputRef = (0, react_1.useRef)(null); - const focusedInputIndex = text.length; - const handlePress = () => { - // To fix bug when keyboard is not popping up after being dismissed - if (!react_native_1.Keyboard.isVisible()) { - react_native_1.Keyboard.dismiss(); - } - inputRef.current?.focus(); - }; - const handleTextChange = (value) => { - if (disabled) - return; - setText(value); - onTextChange?.(value); - if (value.length === numberOfDigits) { - onFilled?.(value); - } - }; - const setTextWithRef = (value) => { - const normalizedValue = value.length > numberOfDigits ? value.slice(0, numberOfDigits) : value; - handleTextChange(normalizedValue); - }; - const clear = () => { - setText(""); - }; - const focus = () => { - inputRef.current?.focus(); - }; - const handleFocus = () => { - setHasCursor(true); - }; - const handleBlur = () => { - setHasCursor(false); - }; - return { - models: { text, inputRef, focusedInputIndex, hasCursor }, - actions: { handlePress, handleTextChange, clear, focus, handleFocus, handleBlur }, - forms: { setText, setTextWithRef }, - }; -}; -exports.useOtpInput = useOtpInput; diff --git a/dist/src/index.d.ts b/dist/src/index.d.ts deleted file mode 100644 index d15c6f7..0000000 --- a/dist/src/index.d.ts +++ /dev/null @@ -1 +0,0 @@ -export { OtpInput, OtpInputProps, Theme, OtpInputRef } from "./OtpInput"; diff --git a/dist/src/index.js b/dist/src/index.js deleted file mode 100644 index 3d04da4..0000000 --- a/dist/src/index.js +++ /dev/null @@ -1,5 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -exports.OtpInput = void 0; -var OtpInput_1 = require("./OtpInput"); -Object.defineProperty(exports, "OtpInput", { enumerable: true, get: function () { return OtpInput_1.OtpInput; } }); diff --git a/package.json b/package.json index b5217ca..7831100 100644 --- a/package.json +++ b/package.json @@ -2,14 +2,20 @@ "name": "react-native-otp-entry", "version": "1.6.0", "description": "A fully modifiable OTP Input Component for React Native", - "main": "dist/src/index.js", - "types": "dist/src/index.d.ts", + "main": "dist/index.js", + "types": "dist/index.d.ts", + "files": [ + "dist", + "!dist/src/**/__tests__" + ], "repository": "git@github.com:anday2000/react-native-otp-entry.git", "scripts": { "test": "jest .", "test:watch": "jest --watch", "test:coverage": "jest --collectCoverage --coverageDirectory=\"./coverage\"", - "build": "tsc" + "build:dev": "tsc", + "build:prod": "tsc -p tsconfig.prod.json", + "prepublishOnly": "npm run build:prod" }, "keywords": [ "react-native", diff --git a/tsconfig.prod.json b/tsconfig.prod.json new file mode 100644 index 0000000..d6126a7 --- /dev/null +++ b/tsconfig.prod.json @@ -0,0 +1,4 @@ +{ + "extends": "./tsconfig", + "exclude": ["**/__tests__", "jest.config.ts", "jest.setupFilesAfterEnv.ts"] +}