@majoo-ui/react 1.47.0 → 1.48.0

package/components/form/components/InputOTP/InputOTP.d.ts

@@ -0,0 +1,108 @@
+import React from 'react';
+interface InputOTPProps {
+    /**
+     * Number of input boxes.
+     */
+    OTPLength?: number;
+    /**
+     * Returns OTP code typed in inputs.
+     */
+    onChange: (value: string | number) => void;
+    /**
+     * The value of the otp passed into the component.
+     */
+    value: string | number;
+    /**
+     * Disables all the inputs.
+     */
+    disabled?: boolean;
+    /**
+     * Auto focuses input on initial page load.
+     */
+    autoFocus?: boolean;
+    /**
+     * any - allows any value. number - allow only numbers. alpha - allows only a-zA-Z. alphanumeric - allows 0-9a-zA-z.
+     */
+    otpType?: 'any' | 'number' | 'alpha' | 'alphanumeric';
+    /**
+     * Change input type to password.
+     */
+    secure?: boolean;
+    /**
+     * Class for input element.
+     */
+    inputClassName?: string;
+    /**
+     * Class for root element.
+     */
+    className?: string;
+    /**
+     * Styles for input element.
+     */
+    inputStyles?: object;
+    /**
+     * Styles for root element.
+     */
+    style?: object;
+    /**
+     * Placeholder value of each input.
+     */
+    placeholder?: string[];
+    /**
+     * Error state input OTP.
+     */
+    isError?: boolean;
+}
+declare function InputOTP(props: InputOTPProps): JSX.Element;
+declare namespace InputOTP {
+    var defaultProps: {
+        OTPLength: number;
+        value: string;
+        disabled: boolean;
+        autoFocus: boolean;
+        otpType: string;
+        secure: boolean;
+    };
+}
+export default InputOTP;
+interface ResendOTPProps {
+    /**
+     * Timer that user has to wait before resend otp gets active.
+     */
+    maxTime?: number;
+    /**
+     * Function get triggers when user click on resend otp button. But when button is disabled(i.e. time is not completed) it won't get trigger.
+     */
+    onResendClick: () => void;
+    /**
+     * An optional callback when timer completes.
+     */
+    onTimerComplete?: () => void;
+    /**
+     * You can change time interval.
+     */
+    timeInterval?: number;
+    /**
+     * You can use your own component for seconds. Function will get remainingTime as props you can use it to show timer.
+     */
+    renderTime?: (remainingTime: number) => React.ReactElement;
+    /**
+     * You can use your own component for resend button. Function will get disabled and onClick function and remainingTime as props you can pass it to your component.
+     */
+    renderButton?: (buttonProps: object) => void;
+    /**
+     * For changing root component inline styles.
+     */
+    style?: object;
+    /**
+     * For adding class to root component.
+     */
+    className?: string;
+}
+export declare function ResendOTP(props: ResendOTPProps): JSX.Element;
+export declare namespace ResendOTP {
+    var defaultProps: {
+        maxTime: number;
+        timeInterval: number;
+    };
+}

package/components/form/components/InputOTP/index.d.ts

@@ -0,0 +1,2 @@
+export { default as InputOTP } from './InputOTP';
+export * from './InputOTP';

package/components/form/components/index.d.ts

@@ -20,3 +20,4 @@ export { default as InputSelectTag } from './InputSelectTag/InputSelectTag';
 export { default as InputCreatable } from './InputCreatable/InputCreatable';
 export { default as InputResourceList } from './InputResourceList/InputResourceList';
 export * from './InputCombobox';
+export * from './InputOTP';