@bigbinary/neetoui-rn 0.0.28 → 0.0.29

package/lib/components/Avatar.js

@@ -0,0 +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:32,columnNumber:9}})):React.createElement(_.Container,(0,_extends2.default)({bg:bgColor,width:size,height:size,borderRadius:size/2},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:38,columnNumber:9}}),React.createElement(_.Typography,{fontFamily:"inter700",fontSize:fontSize>14?fontSize:14,color:fontColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:45,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};

package/lib/components/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});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,"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");
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});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,"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");

package/package.json

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

package/src/components/Avatar.js

@@ -0,0 +1,69 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import { Image } from "react-native";
+
+import { Typography, Container } from "@components";
+
+export const Avatar = ({
+  name,
+  size = 80,
+  bgColor = "background.grey200",
+  fontColor = "font.grey600",
+  imageUrl,
+  ...rest
+}) => {
+  const acronym = name
+    .split(/\s/)
+    .reduce((response, word) => (response += word.slice(0, 1)), "")
+    .slice(0, 2);
+  const fontSize = size / 2 - 8;
+
+  const styles = {
+    profileImage: {
+      height: size,
+      width: size,
+      alignSelf: "center",
+      borderRadius: size / 2,
+    },
+  };
+  return (
+    <>
+      {imageUrl ? (
+        <Image
+          style={styles.profileImage}
+          source={{ uri: imageUrl }}
+          {...rest}
+        />
+      ) : (
+        <Container
+          bg={bgColor}
+          width={size}
+          height={size}
+          borderRadius={size / 2}
+          {...rest}
+        >
+          <Typography
+            fontFamily="inter700"
+            fontSize={fontSize > 14 ? fontSize : 14}
+            color={fontColor}
+          >
+            {acronym}
+          </Typography>
+        </Container>
+      )}
+    </>
+  );
+};
+
+Avatar.defaultProps = {
+  alignItems: "center",
+  justifyContent: "center",
+};
+
+Avatar.propTypes = {
+  name: PropTypes.string.isRequired,
+  size: PropTypes.number,
+  bgColor: PropTypes.string,
+  fontColor: PropTypes.string,
+  imageUrl: PropTypes.string,
+};

package/src/components/index.js

@@ -4,3 +4,4 @@ export { Typography } from "./Typography";
 export { Input } from "./Input";
 export { FAB } from "./FAB";
 export { ToggleSwitch } from "./ToggleSwitch";
+export { Avatar } from "./Avatar";