@bigbinary/neetoui-rn 0.0.75 → 0.0.76

package/lib/components/OtpInputs.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.styles=exports.OtpInputs=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _theme=require("../theme");var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/OtpInputs.js";var OtpInputs=function OtpInputs(_ref){var _ref$handleChange=_ref.handleChange,handleChange=_ref$handleChange===void 0?function(){}:_ref$handleChange,_ref$numberOfInputs=_ref.numberOfInputs,numberOfInputs=_ref$numberOfInputs===void 0?4:_ref$numberOfInputs,_ref$error=_ref.error,error=_ref$error===void 0?false:_ref$error,_ref$code=_ref.code,code=_ref$code===void 0?"":_ref$code,textContainerStyle=_ref.textContainerStyle,textStyle=_ref.textStyle;var inputRef=_react.default.useRef();return _react.default.createElement(_.Container,{style:styles.container,__self:_this,__source:{fileName:_jsxFileName,lineNumber:51,columnNumber:5}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:function onPress(){_reactNative.Keyboard.dismiss();inputRef&&inputRef.current.focus();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:52,columnNumber:7}},_react.default.createElement(_.Container,{style:styles.inputsContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:58,columnNumber:9}},Array(numberOfInputs).fill().map(function(number,index){return _react.default.createElement(_.Container,{key:index,style:[styles.textContainer,textContainerStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:63,columnNumber:17}},_react.default.createElement(_reactNative.Text,{testID:"otp",accessibilityLabel:"otp",style:[styles.otpInput,error===true?{color:_theme.theme.colors.font.danger}:{},textStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:19}},code[index]||""));}),_react.default.createElement(_reactNative.TextInput,{keyboardType:"phone-pad",selectionColor:"transparent",onChangeText:function onChangeText(value){if(!isNaN(value)){if(value.length<=numberOfInputs){handleChange&&handleChange(value);}if(value.length>=numberOfInputs){return _reactNative.Keyboard.dismiss();}}},ref:inputRef,style:styles.emptyViewStyle,value:code||"",__self:_this,__source:{fileName:_jsxFileName,lineNumber:81,columnNumber:11}}))));};exports.OtpInputs=OtpInputs;OtpInputs.propTypes={code:_propTypes.default.string.isRequired,numberOfInputs:_propTypes.default.number.isRequired,handleChange:_propTypes.default.func.isRequired,error:_propTypes.default.bool,textContainerStyle:_propTypes.default.object,textStyle:_propTypes.default.object};var styles=_reactNative.StyleSheet.create({container:{marginTop:5,marginBottom:5},otpInput:(0,_extends2.default)({color:_theme.theme.colors.font.secondary,fontSize:_theme.theme.fontSizes.xl,fontFamily:_theme.theme.fonts.inter700,textAlign:"center",minHeight:40,minWidth:40,textAlignVertical:"center",alignItems:"center"},_reactNative.Platform.select({ios:{paddingTop:5},android:{}}),{backgroundColor:"transparent"}),textContainer:{margin:5,borderRadius:6,borderWidth:1,borderColor:_theme.theme.colors.background.secondary,backgroundColor:_theme.theme.colors.background.white},inputsContainer:{flexDirection:"row",alignItems:"center",justifyContent:"center"},emptyViewStyle:{fontSize:0,backgroundColor:"transparent",color:"transparent",width:"100%",height:"100%",position:"absolute"}});exports.styles=styles;

package/lib/components/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.75",
+  "version": "0.0.76",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",

package/src/components/OtpInputs.js

@@ -0,0 +1,173 @@
+import React from "react";
+import {
+  Keyboard,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  Platform,
+} from "react-native";
+import { theme } from "../theme";
+import PropTypes from "prop-types";
+import { Container } from "@components";
+
+/**
+ *
+ * One-Time password input component.
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/otpInputs/otpInputs.png" />
+ * </div>
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Container, OtpInputs, Typography} from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ * const [code, setCode] = useState("");
+ * return (
+ *   <Container flex={1} justifyContent="center" alignItems="center">
+ *      <OtpInputs code={code} numberOfInputs={6} handleChange={setCode} />
+ *      <Typography py={10} fontSize="xl">
+ *        {`Your entered OTP is ${code}`}
+ *      </Typography>
+ *    </Container>
+ *  );
+ * ```
+ */
+
+export const OtpInputs = ({
+  handleChange = () => {},
+  numberOfInputs = 4,
+  error = false,
+  code = "",
+  textContainerStyle,
+  textStyle,
+}) => {
+  const inputRef = React.useRef();
+
+  return (
+    <Container style={styles.container}>
+      <TouchableOpacity
+        onPress={() => {
+          Keyboard.dismiss();
+          inputRef && inputRef.current.focus();
+        }}
+      >
+        <Container style={styles.inputsContainer}>
+          {Array(numberOfInputs)
+            .fill()
+            .map((number, index) => {
+              return (
+                <Container
+                  key={index}
+                  style={[styles.textContainer, textContainerStyle]}
+                >
+                  <Text
+                    testID="otp"
+                    accessibilityLabel="otp"
+                    style={[
+                      styles.otpInput,
+                      error === true ? { color: theme.colors.font.danger } : {},
+                      textStyle,
+                    ]}
+                  >
+                    {code[index] || ""}
+                  </Text>
+                </Container>
+              );
+            })}
+          <TextInput
+            keyboardType="phone-pad"
+            selectionColor="transparent"
+            onChangeText={value => {
+              if (!isNaN(value)) {
+                if (value.length <= numberOfInputs) {
+                  handleChange && handleChange(value);
+                }
+                if (value.length >= numberOfInputs) {
+                  return Keyboard.dismiss();
+                }
+              }
+            }}
+            ref={inputRef}
+            style={styles.emptyViewStyle}
+            value={code || ""}
+          />
+        </Container>
+      </TouchableOpacity>
+    </Container>
+  );
+};
+
+OtpInputs.propTypes = {
+  /**
+   * This would be OTP code.
+   */
+  code: PropTypes.string.isRequired,
+  /**
+   * Number of Input Fields.
+   */
+  numberOfInputs: PropTypes.number.isRequired,
+  /**
+   * Callback called when code is changed.
+   */
+  handleChange: PropTypes.func.isRequired,
+  /**
+   * If true, code will be shown in red color.
+   */
+  error: PropTypes.bool,
+  /**
+   * To change the styles of main container.
+   */
+  textContainerStyle: PropTypes.object,
+  /**
+   * To change the styles of OTP text.
+   */
+  textStyle: PropTypes.object,
+};
+
+export const styles = StyleSheet.create({
+  container: {
+    marginTop: 5,
+    marginBottom: 5,
+  },
+  otpInput: {
+    color: theme.colors.font.secondary,
+    fontSize: theme.fontSizes.xl,
+    fontFamily: theme.fonts.inter700,
+    textAlign: "center",
+    minHeight: 40,
+    minWidth: 40,
+    textAlignVertical: "center",
+    alignItems: "center",
+    ...Platform.select({
+      ios: {
+        paddingTop: 5,
+      },
+      android: {},
+    }),
+    backgroundColor: "transparent",
+  },
+  textContainer: {
+    margin: 5,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: theme.colors.background.secondary,
+    backgroundColor: theme.colors.background.white,
+  },
+  inputsContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  emptyViewStyle: {
+    fontSize: 0,
+    backgroundColor: "transparent",
+    color: "transparent",
+    width: "100%",
+    height: "100%",
+    position: "absolute",
+  },
+});

package/src/components/index.js

@@ -13,3 +13,4 @@ export { Chip } from "./Chip";
 export { ParentView } from "./ParentView";
 export { RichTextEditor } from "./RichTextEditor";
 export { ButtonGroup } from "./ButtonGroup";
+export { OtpInputs } from "./OtpInputs";