@bigbinary/neetoui-rn 0.0.47 → 0.0.51

package/lib/components/Alert.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Alert=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeModal=_interopRequireDefault(require("react-native-modal"));var _=require("./");var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Alert.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var useAlertHook=function useAlertHook(){var _React$useState=_react.default.useState(false),_React$useState2=(0,_slicedToArray2.default)(_React$useState,2),isVisible=_React$useState2[0],setIsVisible=_React$useState2[1];var _useState=(0,_react.useState)({}),_useState2=(0,_slicedToArray2.default)(_useState,2),params=_useState2[0],setParams=_useState2[1];var _params$title=params.title,title=_params$title===void 0?"":_params$title,_params$description=params.description,description=_params$description===void 0?"":_params$description,_params$isCancelable=params.isCancelable,isCancelable=_params$isCancelable===void 0?true:_params$isCancelable,onDismiss=params.onDismiss,_params$buttons=params.buttons,buttons=_params$buttons===void 0?[]:_params$buttons;var show=_react.default.useCallback(function(params){setParams(params);setIsVisible(true);},[]);var hide=_react.default.useCallback(function(){setIsVisible(false);},[]);var hideOnBackPressDrop=_react.default.useCallback(function(){if(isCancelable){hide();}if(onDismiss&&isCancelable){onDismiss();}},[hide,isCancelable,onDismiss]);return{isVisible:isVisible,show:show,hide:hide,hideOnBackPressDrop:hideOnBackPressDrop,title:title,description:description,isCancelable:isCancelable,buttons:buttons};};var rootLevelRef=null;var Alert=function Alert(){var _useAlertHook=useAlertHook(),isVisible=_useAlertHook.isVisible,show=_useAlertHook.show,hide=_useAlertHook.hide,buttons=_useAlertHook.buttons,hideOnBackPressDrop=_useAlertHook.hideOnBackPressDrop,title=_useAlertHook.title,description=_useAlertHook.description;var _buttons=(0,_slicedToArray2.default)(buttons,3),_buttons$=_buttons[0],button1=_buttons$===void 0?{label:"OK",onPress:function onPress(){}}:_buttons$,button2=_buttons[1],button3=_buttons[2];var ref=_react.default.useRef(null);_react.default.useImperativeHandle(ref,_react.default.useCallback(function(){return{show:show};},[show]));_react.default.useEffect(function(){rootLevelRef=ref.current;},[ref]);return _react.default.createElement(_reactNativeModal.default,{animationIn:"zoomInDown",animationOut:"zoomOutUp",animationInTiming:600,animationOutTiming:600,backdropTransitionInTiming:600,backdropTransitionOutTiming:600,style:styles.modalStyle,isVisible:isVisible,onBackdropPress:hideOnBackPressDrop,useNativeDriver:true,hideModalContentWhileAnimating:true,__self:_this,__source:{fileName:_jsxFileName,lineNumber:142,columnNumber:5}},_react.default.createElement(_.Container,{bg:"background.primary",justifyContent:"center",alignItems:"center",width:"90%",padding:20,borderRadius:20,__self:_this,__source:{fileName:_jsxFileName,lineNumber:155,columnNumber:7}},_react.default.createElement(_.Typography,{fontFamily:"inter400",fontSize:"l",color:"font.grey800",__self:_this,__source:{fileName:_jsxFileName,lineNumber:163,columnNumber:9}},title),_react.default.createElement(_.Container,{height:100,alignItems:"center",justifyContent:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:166,columnNumber:9}},_react.default.createElement(_.Typography,{textAlign:"center",py:20,fontFamily:"inter400",fontSize:"l",color:"font.grey600",__self:_this,__source:{fileName:_jsxFileName,lineNumber:167,columnNumber:11}},description)),_react.default.createElement(_.Container,{flexDirection:"row",width:"100%",justifyContent:"space-around",__self:_this,__source:{fileName:_jsxFileName,lineNumber:178,columnNumber:9}},button2&&_react.default.createElement(_.Button,{borderWidth:1,variant:"inverse",fontFamily:"inter400",fontSize:"m",borderRadius:50,minWidth:110,height:35,p:0,onPress:function onPress(){button2.onPress();hide();},label:button2.label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:184,columnNumber:13}}),button1&&_react.default.createElement(_.Button,{fontFamily:"inter400",fontSize:"m",borderRadius:50,minWidth:110,onPress:function onPress(){button1.onPress();hide();},label:button1.label,height:35,p:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:201,columnNumber:13}})),button3&&_react.default.createElement(_.Button,{mt:20,borderWidth:1,variant:"inverse",fontFamily:"inter400",fontSize:"m",borderRadius:50,minWidth:110,onPress:function onPress(){button3.onPress();hide();},label:button3.label,height:35,p:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:217,columnNumber:11}})));};exports.Alert=Alert;var styles=_reactNative.StyleSheet.create({modalStyle:{alignItems:"center",justifyContent:"center"}});Alert.show=function(params){rootLevelRef.show(params);};

package/lib/components/Input.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TextInput=exports.Input=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _styledSystem=require("styled-system");var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _native=_interopRequireWildcard(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["label","message","error","onFocus","onBlur","inline","brandRight","brandLeft","brandColor","brandBackground","disabled","secureTextEntry"];var _templateObject,_templateObject2,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Input.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography);exports.TextInput=TextInput;var View=_native.default.View(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.layout);var Input=_react.default.forwardRef(function(props,ref){var _props$label=props.label,label=_props$label===void 0?"":_props$label,_props$message=props.message,message=_props$message===void 0?"":_props$message,_props$error=props.error,error=_props$error===void 0?false:_props$error,onFocus=props.onFocus,onBlur=props.onBlur,_props$inline=props.inline,inline=_props$inline===void 0?false:_props$inline,brandRight=props.brandRight,brandLeft=props.brandLeft,_props$brandColor=props.brandColor,brandColor=_props$brandColor===void 0?"font.grey600":_props$brandColor,_props$brandBackgroun=props.brandBackground,brandBackground=_props$brandBackgroun===void 0?"background.menubackground":_props$brandBackgroun,_props$disabled=props.disabled,disabled=_props$disabled===void 0?false:_props$disabled,_props$secureTextEntr=props.secureTextEntry,secureTextEntry=_props$secureTextEntr===void 0?false:_props$secureTextEntr,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isPasswordVisible=_useState2[0],setIsPasswordVisible=_useState2[1];var _useState3=(0,_react.useState)(false),_useState4=(0,_slicedToArray2.default)(_useState3,2),isFocus=_useState4[0],setIsFocus=_useState4[1];var borderColor=error?theme.colors.border.danger:theme.colors.border.primary;var handleFocus=function handleFocus(e){onFocus&&onFocus(e);setIsFocus(true);};var handleBlur=function handleBlur(e){onBlur&&onBlur(e);setIsFocus(false);};var focusStyles=isFocus&&{borderRadius:4,borderColor:error?"rgba(255, 105, 105, 0.3)":theme.colors.border.grey400,borderWidth:inline?"0px":"3px",borderStyle:"solid"};var disabledStyles=disabled&&{opacity:0.5,bg:theme.colors.background.secondary};var inlineInputStyles=isFocus&&{backgroundColor:error?theme.colors.border.danger:theme.colors.border.base};return _react.default.createElement(_.Container,{mb:20,__self:_this,__source:{fileName:_jsxFileName,lineNumber:116,columnNumber:5}},!inline&&_react.default.createElement(LabelText,{inline:inline,label:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:117,columnNumber:19}}),_react.default.createElement(_.Container,(0,_extends2.default)({},focusStyles,disabledStyles,{flexDirection:inline?"row":"column",onBlur:handleBlur,onFocus:handleFocus,position:"relative",__self:_this,__source:{fileName:_jsxFileName,lineNumber:118,columnNumber:7}}),inline&&_react.default.createElement(_.Container,{alignSelf:"flex-end",maxWidth:100,px:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:127,columnNumber:11}},_react.default.createElement(LabelText,{inline:inline,label:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:128,columnNumber:13}})),_react.default.createElement(_.Container,{flexDirection:"row",width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:131,columnNumber:9}},brandLeft&&_react.default.createElement(InputText,{text:brandLeft,borderColor:borderColor,brandColor:brandColor,brandBackground:brandBackground,__self:_this,__source:{fileName:_jsxFileName,lineNumber:133,columnNumber:13}}),_react.default.createElement(TextInput,(0,_extends2.default)({ref:ref,height:40,flex:1,textStyle:"subtext"},rest,{border:!inline&&borderColor,editable:!disabled,color:error?theme.colors.font.danger:theme.colors.font.primary,secureTextEntry:secureTextEntry&&!isPasswordVisible,__self:_this,__source:{fileName:_jsxFileName,lineNumber:140,columnNumber:11}})),brandRight&&_react.default.createElement(InputText,{text:brandRight,borderColor:borderColor,brandColor:brandColor,brandBackground:brandBackground,__self:_this,__source:{fileName:_jsxFileName,lineNumber:153,columnNumber:13}})),secureTextEntry&&_react.default.createElement(_.Container,{position:"absolute",left:"90%",height:"100%",justifyContent:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:162,columnNumber:11}},_react.default.createElement(_reactNativeRemixIcon.default,{name:isPasswordVisible?"eye-line":"eye-off-line",color:theme.colors.background.grey500,onPress:function onPress(){return setIsPasswordVisible(!isPasswordVisible);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:168,columnNumber:13}}))),inline&&_react.default.createElement(View,(0,_extends2.default)({backgroundColor:theme.colors.border.primary,height:1},inlineInputStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:177,columnNumber:9}})),_react.default.createElement(ErrorMessage,{theme:theme,error:error,message:message,__self:_this,__source:{fileName:_jsxFileName,lineNumber:183,columnNumber:7}}));});exports.Input=Input;var InputText=function InputText(_ref){var text=_ref.text,borderColor=_ref.borderColor,brandColor=_ref.brandColor,brandBackground=_ref.brandBackground;return _react.default.createElement(_.Container,{bg:brandBackground,justifyContent:"center",px:2,borderColor:borderColor,borderWidth:"1px",__self:_this,__source:{fileName:_jsxFileName,lineNumber:189,columnNumber:3}},text&&_react.default.createElement(_.Typography,{color:brandColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:196,columnNumber:14}},text));};var LabelText=function LabelText(_ref2){var inline=_ref2.inline,label=_ref2.label;return _react.default.createElement(_.Typography,{numberOfLines:1,textStyle:"subtext",mb:inline?"12px":"7px",__self:_this,__source:{fileName:_jsxFileName,lineNumber:201,columnNumber:3}},label);};var ErrorMessage=function ErrorMessage(_ref3){var error=_ref3.error,message=_ref3.message,theme=_ref3.theme;if(error){return _react.default.createElement(_.Typography,{textStyle:"subtext",color:theme.colors.font.danger,__self:_this,__source:{fileName:_jsxFileName,lineNumber:213,columnNumber:7}},message);}return null;};Input.propTypes=(0,_extends2.default)({},_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.buttonStyle,{label:_propTypes2.default.string.isRequired,message:_propTypes2.default.string,error:_propTypes2.default.bool,inline:_propTypes2.default.bool,brandRight:_propTypes2.default.string,brandLeft:_propTypes2.default.string,disabled:_propTypes2.default.bool,brandColor:_propTypes2.default.string,brandBackground:_propTypes2.default.string,secureTextEntry:_propTypes2.default.bool,children:_propTypes2.default.node});InputText.propTypes={text:_propTypes2.default.string,borderColor:_propTypes2.default.string,brandColor:_propTypes2.default.string,brandBackground:_propTypes2.default.string};LabelText.propTypes={inline:_propTypes2.default.bool,label:_propTypes2.default.string};ErrorMessage.propTypes={error:_propTypes2.default.bool,message:_propTypes2.default.string};TextInput.defaultProps={height:40,border:1,px:2,fontFamily:"inter400",fontSize:"14px",borderRadius:2};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TextInput=exports.Input=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _styledSystem=require("styled-system");var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _native=_interopRequireWildcard(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["label","labelStyles","message","error","onFocus","onBlur","inline","brandRight","brandLeft","brandColor","brandBackground","disabled","secureTextEntry","textAlignVertical"];var _templateObject,_templateObject2,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Input.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography);exports.TextInput=TextInput;var View=_native.default.View(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.layout);var Input=_react.default.forwardRef(function(props,ref){var _props$label=props.label,label=_props$label===void 0?"":_props$label,labelStyles=props.labelStyles,_props$message=props.message,message=_props$message===void 0?"":_props$message,_props$error=props.error,error=_props$error===void 0?false:_props$error,onFocus=props.onFocus,onBlur=props.onBlur,_props$inline=props.inline,inline=_props$inline===void 0?false:_props$inline,brandRight=props.brandRight,brandLeft=props.brandLeft,_props$brandColor=props.brandColor,brandColor=_props$brandColor===void 0?"font.grey600":_props$brandColor,_props$brandBackgroun=props.brandBackground,brandBackground=_props$brandBackgroun===void 0?"background.menubackground":_props$brandBackgroun,_props$disabled=props.disabled,disabled=_props$disabled===void 0?false:_props$disabled,_props$secureTextEntr=props.secureTextEntry,secureTextEntry=_props$secureTextEntr===void 0?false:_props$secureTextEntr,_props$textAlignVerti=props.textAlignVertical,textAlignVertical=_props$textAlignVerti===void 0?"top":_props$textAlignVerti,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isPasswordVisible=_useState2[0],setIsPasswordVisible=_useState2[1];var _useState3=(0,_react.useState)(false),_useState4=(0,_slicedToArray2.default)(_useState3,2),isFocus=_useState4[0],setIsFocus=_useState4[1];var borderColor=error?theme.colors.border.danger:theme.colors.border.primary;var handleFocus=function handleFocus(e){onFocus&&onFocus(e);setIsFocus(true);};var handleBlur=function handleBlur(e){onBlur&&onBlur(e);setIsFocus(false);};var focusStyles=isFocus&&{borderRadius:4,borderColor:error?"rgba(255, 105, 105, 0.3)":theme.colors.border.grey400,borderWidth:inline?"0px":"3px",borderStyle:"solid"};var disabledStyles=disabled&&{opacity:0.5,bg:theme.colors.background.secondary};var inlineInputStyles=isFocus&&{backgroundColor:error?theme.colors.border.danger:theme.colors.border.base};return _react.default.createElement(_.Container,{mb:20,__self:_this,__source:{fileName:_jsxFileName,lineNumber:118,columnNumber:5}},!inline&&_react.default.createElement(LabelText,{labelStyles:labelStyles,inline:inline,label:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:120,columnNumber:9}}),_react.default.createElement(_.Container,(0,_extends2.default)({},focusStyles,disabledStyles,{flexDirection:inline?"row":"column",onBlur:handleBlur,onFocus:handleFocus,position:"relative",__self:_this,__source:{fileName:_jsxFileName,lineNumber:122,columnNumber:7}}),inline&&_react.default.createElement(_.Container,{alignSelf:"flex-end",maxWidth:100,__self:_this,__source:{fileName:_jsxFileName,lineNumber:131,columnNumber:11}},_react.default.createElement(LabelText,{labelStyles:labelStyles,inline:inline,label:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:132,columnNumber:13}})),_react.default.createElement(_.Container,{flexDirection:"row",width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:139,columnNumber:9}},brandLeft&&_react.default.createElement(InputText,{text:brandLeft,borderColor:borderColor,brandColor:brandColor,brandBackground:brandBackground,__self:_this,__source:{fileName:_jsxFileName,lineNumber:141,columnNumber:13}}),_react.default.createElement(TextInput,(0,_extends2.default)({ref:ref,height:40,flex:1,textStyle:"subtext",border:!inline&&borderColor,editable:!disabled,color:error?theme.colors.font.danger:theme.colors.font.primary,secureTextEntry:secureTextEntry&&!isPasswordVisible,textAlignVertical:textAlignVertical},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:148,columnNumber:11}})),brandRight&&_react.default.createElement(InputText,{text:brandRight,borderColor:borderColor,brandColor:brandColor,brandBackground:brandBackground,__self:_this,__source:{fileName:_jsxFileName,lineNumber:162,columnNumber:13}})),secureTextEntry&&_react.default.createElement(_.Container,{position:"absolute",left:"90%",height:"100%",justifyContent:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:171,columnNumber:11}},_react.default.createElement(_reactNativeRemixIcon.default,{name:isPasswordVisible?"eye-line":"eye-off-line",color:theme.colors.background.grey500,onPress:function onPress(){return setIsPasswordVisible(!isPasswordVisible);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:177,columnNumber:13}}))),inline&&_react.default.createElement(View,(0,_extends2.default)({backgroundColor:theme.colors.border.primary,height:1},inlineInputStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:186,columnNumber:9}})),_react.default.createElement(ErrorMessage,{theme:theme,error:error,message:message,__self:_this,__source:{fileName:_jsxFileName,lineNumber:192,columnNumber:7}}));});exports.Input=Input;var InputText=function InputText(_ref){var text=_ref.text,borderColor=_ref.borderColor,brandColor=_ref.brandColor,brandBackground=_ref.brandBackground;return _react.default.createElement(_.Container,{bg:brandBackground,justifyContent:"center",px:2,borderColor:borderColor,borderWidth:"1px",__self:_this,__source:{fileName:_jsxFileName,lineNumber:198,columnNumber:3}},text&&_react.default.createElement(_.Typography,{color:brandColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:205,columnNumber:14}},text));};var LabelText=function LabelText(_ref2){var inline=_ref2.inline,label=_ref2.label,labelStyles=_ref2.labelStyles;return _react.default.createElement(_.Typography,(0,_extends2.default)({numberOfLines:1,textStyle:"subtext",mb:inline?"12px":"7px"},labelStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:210,columnNumber:3}}),label);};var ErrorMessage=function ErrorMessage(_ref3){var error=_ref3.error,message=_ref3.message,theme=_ref3.theme;if(error){return _react.default.createElement(_.Typography,{textStyle:"subtext",color:theme.colors.font.danger,__self:_this,__source:{fileName:_jsxFileName,lineNumber:223,columnNumber:7}},message);}return null;};Input.propTypes=(0,_extends2.default)({},_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.buttonStyle,{label:_propTypes2.default.string,labelStyles:_propTypes2.default.object,message:_propTypes2.default.string,error:_propTypes2.default.bool,inline:_propTypes2.default.bool,brandRight:_propTypes2.default.string,brandLeft:_propTypes2.default.string,disabled:_propTypes2.default.bool,brandColor:_propTypes2.default.string,brandBackground:_propTypes2.default.string,secureTextEntry:_propTypes2.default.bool,children:_propTypes2.default.node});InputText.propTypes={text:_propTypes2.default.string,borderColor:_propTypes2.default.string,brandColor:_propTypes2.default.string,brandBackground:_propTypes2.default.string};LabelText.propTypes={inline:_propTypes2.default.bool,label:_propTypes2.default.string,labelStyles:_propTypes2.default.object};ErrorMessage.propTypes={error:_propTypes2.default.bool,message:_propTypes2.default.string};TextInput.defaultProps={height:40,border:1,px:2,fontFamily:"inter400",fontSize:"14px",borderRadius:2};

package/lib/components/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});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,"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,"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 _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");
+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,"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,"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");

package/package.json

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

package/src/components/Alert.js

@@ -0,0 +1,248 @@
+import React, { useState } from "react";
+import { StyleSheet } from "react-native";
+import Modal from "react-native-modal";
+
+import { Typography, Container, Button } from "@components";
+
+const useAlertHook = () => {
+  const [isVisible, setIsVisible] = React.useState(false);
+  const [params, setParams] = useState({});
+
+  const {
+    title = "",
+    description = "",
+    isCancelable = true,
+    onDismiss,
+    buttons = [],
+  } = params;
+
+  const show = React.useCallback(params => {
+    setParams(params);
+    setIsVisible(true);
+  }, []);
+
+  const hide = React.useCallback(() => {
+    setIsVisible(false);
+  }, []);
+
+  const hideOnBackPressDrop = React.useCallback(() => {
+    if (isCancelable) {
+      hide();
+    }
+    if (onDismiss && isCancelable) {
+      onDismiss();
+    }
+  }, [hide, isCancelable, onDismiss]);
+
+  return {
+    isVisible,
+    show,
+    hide,
+    hideOnBackPressDrop,
+    title,
+    description,
+    isCancelable,
+    buttons,
+  };
+};
+
+let rootLevelRef = null;
+/**
+ * Launches an alert dialog with the specified title and message.
+ * Optionally provide a list of buttons.
+ * Tapping any button will fire the respective onPress callback and dismiss the alert.
+ * By default, the only button will be an 'OK' button.
+ *  ## Usage
+ * ```js
+ *import * as React from "react";
+ *import { Alert } from "@bigbinary/neetoui-rn";
+ *export function App(props) {
+ *  return (
+ *    <>
+ *      // Render at root component.
+ *      <Alert />
+ *    </>
+ *  );
+ *}
+ *
+ *import * as React from "react";
+ *import { Alert, Button } from "@bigbinary/neetoui-rn";
+ *
+ *export default function Main() {
+ *  return (
+ *    <Button
+ *      width={200}
+ *      my={10}
+ *      label="Three Buttons"
+ *      onPress={() => {
+ *        Alert.show({
+ *          title: "Enjoying our app ?",
+ *          description: "Do you wannna rate us on app store ?",
+ *          buttons: [
+ *            {
+ *              label: "Yay!",
+ *              onPress: () => {},
+ *            },
+ *            {
+ *              label: "No",
+ *              onPress: () => {},
+ *            },
+ *            {
+ *              label: "Ask me later",
+ *              onPress: () => {},
+ *            },
+ *          ],
+ *          isCancelable: false,
+ *          onDismiss: () => {},
+ *        });
+ *      }}
+ *    />
+ *  );
+ *}
+ *
+ * ```
+ */
+export const Alert = () => {
+  const {
+    isVisible,
+    show,
+    hide,
+    buttons,
+    hideOnBackPressDrop,
+    title,
+    description,
+  } = useAlertHook();
+
+  const [
+    button1 = {
+      label: "OK",
+      onPress: () => {},
+    },
+    button2,
+    button3,
+  ] = buttons;
+
+  const ref = React.useRef(null);
+
+  React.useImperativeHandle(
+    ref,
+    React.useCallback(
+      () => ({
+        show,
+      }),
+      [show]
+    )
+  );
+
+  React.useEffect(() => {
+    rootLevelRef = ref.current;
+  }, [ref]);
+
+  return (
+    <Modal
+      animationIn="zoomInDown"
+      animationOut="zoomOutUp"
+      animationInTiming={600}
+      animationOutTiming={600}
+      backdropTransitionInTiming={600}
+      backdropTransitionOutTiming={600}
+      style={styles.modalStyle}
+      isVisible={isVisible}
+      onBackdropPress={hideOnBackPressDrop}
+      useNativeDriver
+      hideModalContentWhileAnimating
+    >
+      <Container
+        bg="background.primary"
+        justifyContent="center"
+        alignItems="center"
+        width="90%"
+        padding={20}
+        borderRadius={20}
+      >
+        <Typography fontFamily="inter400" fontSize="l" color="font.grey800">
+          {title}
+        </Typography>
+        <Container height={100} alignItems="center" justifyContent="center">
+          <Typography
+            textAlign="center"
+            py={20}
+            fontFamily="inter400"
+            fontSize="l"
+            color="font.grey600"
+          >
+            {description}
+          </Typography>
+        </Container>
+
+        <Container
+          flexDirection="row"
+          width="100%"
+          justifyContent="space-around"
+        >
+          {button2 && (
+            <Button
+              borderWidth={1}
+              variant="inverse"
+              fontFamily="inter400"
+              fontSize="m"
+              borderRadius={50}
+              minWidth={110}
+              height={35}
+              p={0}
+              onPress={() => {
+                button2.onPress();
+                hide();
+              }}
+              label={button2.label}
+            />
+          )}
+          {button1 && (
+            <Button
+              fontFamily="inter400"
+              fontSize="m"
+              borderRadius={50}
+              minWidth={110}
+              onPress={() => {
+                button1.onPress();
+                hide();
+              }}
+              label={button1.label}
+              height={35}
+              p={0}
+            />
+          )}
+        </Container>
+        {button3 && (
+          <Button
+            mt={20}
+            borderWidth={1}
+            variant="inverse"
+            fontFamily="inter400"
+            fontSize="m"
+            borderRadius={50}
+            minWidth={110}
+            onPress={() => {
+              button3.onPress();
+              hide();
+            }}
+            label={button3.label}
+            height={35}
+            p={0}
+          />
+        )}
+      </Container>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalStyle: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
+
+Alert.show = params => {
+  rootLevelRef.show(params);
+};

package/src/components/Input.js

@@ -61,6 +61,7 @@ const View = styled.View`
 export const Input = React.forwardRef((props, ref) => {
   const {
     label = "",
+    labelStyles,
     message = "",
     error = false,
     onFocus,
@@ -72,6 +73,7 @@ export const Input = React.forwardRef((props, ref) => {
     brandBackground = "background.menubackground",
     disabled = false,
     secureTextEntry = false,
+    textAlignVertical = "top",
     ...rest
   } = props;
 
@@ -114,7 +116,9 @@ export const Input = React.forwardRef((props, ref) => {
 
   return (
     <Container mb={20}>
-      {!inline && <LabelText inline={inline} label={label} />}
+      {!inline && (
+        <LabelText labelStyles={labelStyles} inline={inline} label={label} />
+      )}
       <Container
         {...focusStyles}
         {...disabledStyles}
@@ -124,8 +128,12 @@ export const Input = React.forwardRef((props, ref) => {
         position="relative"
       >
         {inline && (
-          <Container alignSelf="flex-end" maxWidth={100} px={2}>
-            <LabelText inline={inline} label={label} />
+          <Container alignSelf="flex-end" maxWidth={100}>
+            <LabelText
+              labelStyles={labelStyles}
+              inline={inline}
+              label={label}
+            />
           </Container>
         )}
         <Container flexDirection="row" width="100%">
@@ -142,11 +150,12 @@ export const Input = React.forwardRef((props, ref) => {
             height={40}
             flex={1}
             textStyle="subtext"
-            {...rest}
             border={!inline && borderColor}
             editable={!disabled}
             color={error ? theme.colors.font.danger : theme.colors.font.primary}
             secureTextEntry={secureTextEntry && !isPasswordVisible}
+            textAlignVertical={textAlignVertical}
+            {...rest}
           />
 
           {brandRight && (
@@ -197,11 +206,12 @@ const InputText = ({ text, borderColor, brandColor, brandBackground }) => (
   </Container>
 );
 
-const LabelText = ({ inline, label }) => (
+const LabelText = ({ inline, label, labelStyles }) => (
   <Typography
     numberOfLines={1}
     textStyle="subtext"
     mb={inline ? "12px" : "7px"}
+    {...labelStyles}
   >
     {label}
   </Typography>
@@ -226,7 +236,11 @@ Input.propTypes = {
   /**
    * The text to use for the floating label.
    */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  /**
+   * To change the styles of label
+   */
+  labelStyles: PropTypes.object,
   /**
    * To display error/info messages
    */
@@ -276,6 +290,7 @@ InputText.propTypes = {
 LabelText.propTypes = {
   inline: PropTypes.bool,
   label: PropTypes.string,
+  labelStyles: PropTypes.object,
 };
 
 ErrorMessage.propTypes = {

package/src/components/index.js

@@ -7,5 +7,6 @@ export { ToggleSwitch } from "./ToggleSwitch";
 export { Avatar } from "./Avatar";
 export { Badge } from "./Badge";
 export { Toast } from "./Toast";
+export { Alert } from "./Alert";
 export { BottomSheet } from "./BottomSheet";
 export { Chip } from "./Chip";