@bigbinary/neetoui-rn 0.0.41 → 0.0.45

package/lib/components/Avatar.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Avatar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var React=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");var _=require("./");var _excluded=["name","size","bgColor","fontColor","imageUrl"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Avatar.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 Avatar=function Avatar(_ref){var name=_ref.name,_ref$size=_ref.size,size=_ref$size===void 0?80:_ref$size,_ref$bgColor=_ref.bgColor,bgColor=_ref$bgColor===void 0?"background.grey200":_ref$bgColor,_ref$fontColor=_ref.fontColor,fontColor=_ref$fontColor===void 0?"font.grey600":_ref$fontColor,imageUrl=_ref.imageUrl,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var acronym=name.split(/\s/).reduce(function(response,word){return response+=word.slice(0,1);},"").slice(0,2);var fontSize=size/2-8;var styles={profileImage:{height:size,width:size,alignSelf:"center",borderRadius:size/2}};return React.createElement(React.Fragment,null,imageUrl?React.createElement(_reactNative.Image,(0,_extends2.default)({style:styles.profileImage,source:{uri:imageUrl}},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:9}})):React.createElement(_.Container,(0,_extends2.default)({bg:bgColor,width:size,height:size,borderRadius:size/2},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:72,columnNumber:9}}),React.createElement(_.Typography,{fontFamily:"inter700",fontSize:fontSize>14?fontSize:14,color:fontColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:79,columnNumber:11}},acronym)));};exports.Avatar=Avatar;Avatar.defaultProps={alignItems:"center",justifyContent:"center"};Avatar.propTypes={name:_propTypes.default.string.isRequired,size:_propTypes.default.number,bgColor:_propTypes.default.string,fontColor:_propTypes.default.string,imageUrl:_propTypes.default.string};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Avatar=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 _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");var _=require("./");var _excluded=["name","size","bgColor","fontColor","imageUrl"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Avatar.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 Avatar=function Avatar(_ref){var name=_ref.name,_ref$size=_ref.size,size=_ref$size===void 0?80:_ref$size,_ref$bgColor=_ref.bgColor,bgColor=_ref$bgColor===void 0?"background.grey200":_ref$bgColor,_ref$fontColor=_ref.fontColor,fontColor=_ref$fontColor===void 0?"font.grey600":_ref$fontColor,imageUrl=_ref.imageUrl,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),fallback=_useState2[0],setFallback=_useState2[1];var acronym=name==null?void 0:name.split(/\s/).reduce(function(response,word){return response+=word.slice(0,1);},"").slice(0,2);var fontSize=size/2-8;var styles={profileImage:{height:size,width:size,alignSelf:"center",borderRadius:size/2}};var renderFallbackText=fallback||!imageUrl;return _react.default.createElement(_react.default.Fragment,null,renderFallbackText?_react.default.createElement(_.Container,(0,_extends2.default)({bg:bgColor,width:size,height:size,borderRadius:size/2},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:70,columnNumber:9}}),_react.default.createElement(_.Typography,{fontFamily:"inter700",fontSize:fontSize>14?fontSize:14,color:fontColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:77,columnNumber:11}},acronym)):_react.default.createElement(_reactNative.Image,(0,_extends2.default)({style:styles.profileImage,source:{uri:imageUrl},onError:function onError(){return setFallback(true);}},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:86,columnNumber:9}})));};exports.Avatar=Avatar;Avatar.defaultProps={alignItems:"center",justifyContent:"center"};Avatar.propTypes={name:_propTypes.default.string,size:_propTypes.default.number,bgColor:_propTypes.default.string,fontColor:_propTypes.default.string,imageUrl:_propTypes.default.string};

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 _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"];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=function Input(_ref){var _ref$label=_ref.label,label=_ref$label===void 0?"":_ref$label,_ref$message=_ref.message,message=_ref$message===void 0?"":_ref$message,_ref$error=_ref.error,error=_ref$error===void 0?false:_ref$error,onFocus=_ref.onFocus,onBlur=_ref.onBlur,_ref$inline=_ref.inline,inline=_ref$inline===void 0?false:_ref$inline,brandRight=_ref.brandRight,brandLeft=_ref.brandLeft,_ref$brandColor=_ref.brandColor,brandColor=_ref$brandColor===void 0?"font.grey600":_ref$brandColor,_ref$brandBackground=_ref.brandBackground,brandBackground=_ref$brandBackground===void 0?"background.menubackground":_ref$brandBackground,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isFocus=_useState2[0],setIsFocus=_useState2[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:111,columnNumber:5}},!inline&&_react.default.createElement(LabelText,{inline:inline,label:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:112,columnNumber:19}}),_react.default.createElement(_.Container,(0,_extends2.default)({},focusStyles,disabledStyles,{flexDirection:inline?"row":"column",onBlur:handleBlur,onFocus:handleFocus,__self:_this,__source:{fileName:_jsxFileName,lineNumber:113,columnNumber:7}}),inline&&_react.default.createElement(_.Container,{alignSelf:"flex-end",maxWidth:100,px:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:121,columnNumber:11}},_react.default.createElement(LabelText,{inline:inline,label:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:122,columnNumber:13}})),_react.default.createElement(_.Container,{flexDirection:"row",width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:125,columnNumber:9}},brandLeft&&_react.default.createElement(InputText,{text:brandLeft,borderColor:borderColor,brandColor:brandColor,brandBackground:brandBackground,__self:_this,__source:{fileName:_jsxFileName,lineNumber:127,columnNumber:13}}),_react.default.createElement(TextInput,(0,_extends2.default)({height:40,flex:1,textStyle:"subtext"},rest,{border:!inline&&borderColor,editable:!disabled,color:error?theme.colors.font.danger:theme.colors.font.primary,__self:_this,__source:{fileName:_jsxFileName,lineNumber:134,columnNumber:11}})),brandRight&&_react.default.createElement(InputText,{text:brandRight,borderColor:borderColor,brandColor:brandColor,brandBackground:brandBackground,__self:_this,__source:{fileName:_jsxFileName,lineNumber:144,columnNumber:13}}))),inline&&_react.default.createElement(View,(0,_extends2.default)({backgroundColor:theme.colors.border.primary,height:1},inlineInputStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:154,columnNumber:9}})),_react.default.createElement(ErrorMessage,{theme:theme,error:error,message:message,__self:_this,__source:{fileName:_jsxFileName,lineNumber:160,columnNumber:7}}));};exports.Input=Input;var InputText=function InputText(_ref2){var text=_ref2.text,borderColor=_ref2.borderColor,brandColor=_ref2.brandColor,brandBackground=_ref2.brandBackground;return _react.default.createElement(_.Container,{bg:brandBackground,justifyContent:"center",px:2,borderColor:borderColor,borderWidth:"1px",__self:_this,__source:{fileName:_jsxFileName,lineNumber:166,columnNumber:3}},text&&_react.default.createElement(_.Typography,{color:brandColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:173,columnNumber:14}},text));};var LabelText=function LabelText(_ref3){var inline=_ref3.inline,label=_ref3.label;return _react.default.createElement(_.Typography,{numberOfLines:1,textStyle:"subtext",mb:inline?"12px":"7px",__self:_this,__source:{fileName:_jsxFileName,lineNumber:178,columnNumber:3}},label);};var ErrorMessage=function ErrorMessage(_ref4){var error=_ref4.error,message=_ref4.message,theme=_ref4.theme;if(error){return _react.default.createElement(_.Typography,{textStyle:"subtext",color:theme.colors.font.danger,__self:_this,__source:{fileName:_jsxFileName,lineNumber:190,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,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","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:"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};

package/lib/components/Typography.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Typography=exports.Text=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var React=_interopRequireWildcard(require("react"));var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _excluded=["children"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Typography.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 Text=_native.default.Text(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.textStyle,_styledSystem.space,_styledSystem.layout,_styledSystem.flexbox,_styledSystem.typography,_styledSystem.color,_styledSystem.position,(0,_styledSystem.system)({textDecoration:{property:"textDecoration",cssProperty:"textDecoration"},textTransform:{property:"textTransform",cssProperty:"textTransform"}}));exports.Text=Text;var Typography=function Typography(_ref){var children=_ref.children,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);return React.createElement(Text,(0,_extends2.default)({},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:77,columnNumber:10}}),children);};exports.Typography=Typography;Typography.propTypes=(0,_extends2.default)({},_propTypes.default.space,_propTypes.default.layout,_propTypes.default.flexbox,_propTypes.default.typography,_propTypes.default.color,_propTypes.default.textStyle,{children:_propTypes2.default.node.isRequired});Typography.defaultProps={textStyle:"defaultTextStyle"};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Typography=exports.Text=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var React=_interopRequireWildcard(require("react"));var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _excluded=["children"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Typography.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 Text=_native.default.Text(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.textStyle,_styledSystem.space,_styledSystem.layout,_styledSystem.flexbox,_styledSystem.typography,_styledSystem.color,_styledSystem.position,(0,_styledSystem.system)({textDecoration:{property:"textDecoration",cssProperty:"textDecoration"},textTransform:{property:"textTransform",cssProperty:"textTransform"}}));exports.Text=Text;var Typography=function Typography(_ref){var children=_ref.children,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);return React.createElement(Text,(0,_extends2.default)({},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:77,columnNumber:10}}),children);};exports.Typography=Typography;Typography.propTypes=(0,_extends2.default)({},_propTypes.default.space,_propTypes.default.layout,_propTypes.default.flexbox,_propTypes.default.typography,_propTypes.default.color,_propTypes.default.textStyle,{children:_propTypes2.default.node});Typography.defaultProps={textStyle:"defaultTextStyle"};

package/package.json

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

package/src/components/Avatar.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { Image } from "react-native";
 
@@ -46,8 +46,9 @@ export const Avatar = ({
   imageUrl,
   ...rest
 }) => {
+  const [fallback, setFallback] = useState(false);
   const acronym = name
-    .split(/\s/)
+    ?.split(/\s/)
     .reduce((response, word) => (response += word.slice(0, 1)), "")
     .slice(0, 2);
   const fontSize = size / 2 - 8;
@@ -60,15 +61,12 @@ export const Avatar = ({
       borderRadius: size / 2,
     },
   };
+
+  const renderFallbackText = fallback || !imageUrl;
+
   return (
     <>
-      {imageUrl ? (
-        <Image
-          style={styles.profileImage}
-          source={{ uri: imageUrl }}
-          {...rest}
-        />
-      ) : (
+      {renderFallbackText ? (
         <Container
           bg={bgColor}
           width={size}
@@ -84,6 +82,13 @@ export const Avatar = ({
             {acronym}
           </Typography>
         </Container>
+      ) : (
+        <Image
+          style={styles.profileImage}
+          source={{ uri: imageUrl }}
+          onError={() => setFallback(true)}
+          {...rest}
+        />
       )}
     </>
   );
@@ -98,7 +103,7 @@ Avatar.propTypes = {
   /**
    * Name to obtain user initials to show as the text in the Avatar.
    */
-  name: PropTypes.string.isRequired,
+  name: PropTypes.string,
   /**
    * Size of the avatar.
    */

package/src/components/Input.js

@@ -8,6 +8,7 @@ import {
   color,
   layout,
 } from "styled-system";
+import Icon from "react-native-remix-icon";
 import styled, { ThemeContext } from "styled-components/native";
 import propTypes from "@styled-system/prop-types";
 import PropTypes from "prop-types";
@@ -57,21 +58,25 @@ const View = styled.View`
  *
  */
 
-export const Input = ({
-  label = "",
-  message = "",
-  error = false,
-  onFocus,
-  onBlur,
-  inline = false,
-  brandRight,
-  brandLeft,
-  brandColor = "font.grey600",
-  brandBackground = "background.menubackground",
-  disabled = false,
-  ...rest
-}) => {
+export const Input = React.forwardRef((props, ref) => {
+  const {
+    label = "",
+    message = "",
+    error = false,
+    onFocus,
+    onBlur,
+    inline = false,
+    brandRight,
+    brandLeft,
+    brandColor = "font.grey600",
+    brandBackground = "background.menubackground",
+    disabled = false,
+    secureTextEntry = false,
+    ...rest
+  } = props;
+
   const theme = useContext(ThemeContext);
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
   const [isFocus, setIsFocus] = useState(false);
   const borderColor = error
     ? theme.colors.border.danger
@@ -116,6 +121,7 @@ export const Input = ({
         flexDirection={inline ? "row" : "column"}
         onBlur={handleBlur}
         onFocus={handleFocus}
+        position="relative"
       >
         {inline && (
           <Container alignSelf="flex-end" maxWidth={100} px={2}>
@@ -132,6 +138,7 @@ export const Input = ({
             />
           )}
           <TextInput
+            ref={ref}
             height={40}
             flex={1}
             textStyle="subtext"
@@ -139,7 +146,9 @@ export const Input = ({
             border={!inline && borderColor}
             editable={!disabled}
             color={error ? theme.colors.font.danger : theme.colors.font.primary}
+            secureTextEntry={secureTextEntry && !isPasswordVisible}
           />
+
           {brandRight && (
             <InputText
               text={brandRight}
@@ -149,6 +158,20 @@ export const Input = ({
             />
           )}
         </Container>
+        {secureTextEntry && (
+          <Container
+            position="absolute"
+            left="90%"
+            height="100%"
+            justifyContent="center"
+          >
+            <Icon
+              name={isPasswordVisible ? "eye-line" : "eye-off-line"}
+              color="background.grey500"
+              onPress={() => setIsPasswordVisible(!isPasswordVisible)}
+            />
+          </Container>
+        )}
       </Container>
       {inline && (
         <View
@@ -160,7 +183,7 @@ export const Input = ({
       <ErrorMessage theme={theme} error={error} message={message} />
     </Container>
   );
-};
+});
 
 const InputText = ({ text, borderColor, brandColor, brandBackground }) => (
   <Container
@@ -236,6 +259,10 @@ Input.propTypes = {
    * To change the color of brand text
    */
   brandBackground: PropTypes.string,
+  /**
+   * To hide and show password and enable secure text entry
+   */
+  secureTextEntry: PropTypes.bool,
   children: PropTypes.node,
 };
 

package/src/components/Typography.js

@@ -84,7 +84,7 @@ Typography.propTypes = {
   ...propTypes.typography,
   ...propTypes.color,
   ...propTypes.textStyle,
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
 };
 
 Typography.defaultProps = {