@bigbinary/neetoui-rn 0.0.136 → 0.0.137
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/components/Avatar.js
CHANGED
|
@@ -1 +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 _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","
|
|
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 _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","variant","bgColor","fontColor","imageUrl"];var _this=this,_jsxFileName="/home/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$variant=_ref.variant,variant=_ref$variant===void 0?"medium":_ref$variant,_ref$bgColor=_ref.bgColor,bgColor=_ref$bgColor===void 0?"background.lightBlue100":_ref$bgColor,_ref$fontColor=_ref.fontColor,fontColor=_ref$fontColor===void 0?"font.darkBlue100":_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 getSizes=function getSizes(){switch(variant){case"small":return[36,12];case"medium":return[48,14];default:return[48,14];}};var _getSizes=getSizes(),_getSizes2=(0,_slicedToArray2.default)(_getSizes,2),avatarSize=_getSizes2[0],avatarFontSize=_getSizes2[1];var styles={profileImage:{height:avatarSize,width:avatarSize,alignSelf:"center",borderRadius:avatarSize/2}};var renderFallbackText=fallback||!imageUrl;return _react.default.createElement(_react.default.Fragment,null,renderFallbackText?_react.default.createElement(_.Container,(0,_extends2.default)({bg:bgColor,width:avatarSize,height:avatarSize,borderRadius:avatarSize/2},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:77,columnNumber:9}}),_react.default.createElement(_.Typography,{fontFamily:"sf400",fontSize:avatarFontSize,color:fontColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:84,columnNumber:11}},acronym.toUpperCase())):_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:93,columnNumber:9}})));};exports.Avatar=Avatar;Avatar.defaultProps={alignItems:"center",justifyContent:"center"};Avatar.propTypes={name:_propTypes.default.string,variant:_propTypes.default.oneOf(["medium","small"]),bgColor:_propTypes.default.string,fontColor:_propTypes.default.string,imageUrl:_propTypes.default.string};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.BottomSheet=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _reactNativeModal=_interopRequireDefault(require("react-native-modal"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _theme=require("../theme");var _excluded=["data","title","hide","isVisible","onItemPress","selectedItemIndex","bg","children","titleContainerStyle","titleTextStyle","modalParams","HeaderComponent","ContentRow","contentType","canSearch"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomSheet.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 Title=function Title(_ref){var title=_ref.title,bg=_ref.bg,isVisible=_ref.isVisible,hide=_ref.hide,titleContainerStyle=_ref.titleContainerStyle,titleTextStyle=_ref.titleTextStyle,contentType=_ref.contentType,canSearch=_ref.canSearch,searchText=_ref.searchText,setSearchText=_ref.setSearchText;var touchY;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isSearchBarOpen=_useState2[0],setSearchBarOpen=_useState2[1];(0,_react.useEffect)(function(){setSearchText("");},[isVisible,setSearchText]);return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_.Container,(0,_extends2.default)({bg:bg,onTouchStart:function onTouchStart(e){return touchY=e.nativeEvent.pageY;},onTouchEnd:function onTouchEnd(e){if(e.nativeEvent.pageY-touchY>20)hide();},pb:12,borderRadius:20},titleContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:30,columnNumber:7}}),_react.default.createElement(_.Container,{flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:41,columnNumber:9}},title&&_react.default.createElement(_.Typography,(0,_extends2.default)({textStyle:"modalHeader"},titleTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:43,columnNumber:13}}),title),contentType&&_react.default.createElement(_.Touchable,{onPress:hide,__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:13}},_react.default.createElement(_.Typography,{textStyle:"modalHeader",color:"font.
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.BottomSheet=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _reactNativeModal=_interopRequireDefault(require("react-native-modal"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _theme=require("../theme");var _excluded=["data","title","hide","isVisible","onItemPress","selectedItemIndex","bg","children","titleContainerStyle","titleTextStyle","modalParams","HeaderComponent","ContentRow","contentType","canSearch"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomSheet.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 Title=function Title(_ref){var title=_ref.title,bg=_ref.bg,isVisible=_ref.isVisible,hide=_ref.hide,titleContainerStyle=_ref.titleContainerStyle,titleTextStyle=_ref.titleTextStyle,contentType=_ref.contentType,canSearch=_ref.canSearch,searchText=_ref.searchText,setSearchText=_ref.setSearchText;var touchY;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isSearchBarOpen=_useState2[0],setSearchBarOpen=_useState2[1];(0,_react.useEffect)(function(){setSearchText("");},[isVisible,setSearchText]);return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_.Container,(0,_extends2.default)({bg:bg,onTouchStart:function onTouchStart(e){return touchY=e.nativeEvent.pageY;},onTouchEnd:function onTouchEnd(e){if(e.nativeEvent.pageY-touchY>20)hide();},pb:12,borderRadius:20},titleContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:30,columnNumber:7}}),_react.default.createElement(_.Container,{flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:41,columnNumber:9}},title&&_react.default.createElement(_.Typography,(0,_extends2.default)({textStyle:"modalHeader"},titleTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:43,columnNumber:13}}),title),contentType&&_react.default.createElement(_.Touchable,{onPress:hide,__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:13}},_react.default.createElement(_.Typography,{textStyle:"modalHeader",color:"font.purple500",__self:_this,__source:{fileName:_jsxFileName,lineNumber:49,columnNumber:15}},"Done")),canSearch&&!isSearchBarOpen&&_react.default.createElement(_.Touchable,{onPress:function onPress(){return setSearchBarOpen(true);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:55,columnNumber:13}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"search-line",color:_theme.theme.colors.background.grey700,__self:_this,__source:{fileName:_jsxFileName,lineNumber:56,columnNumber:15}}))),canSearch&&isSearchBarOpen&&_react.default.createElement(_.Container,{pt:12,flexDirection:"row",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:65,columnNumber:11}},_react.default.createElement(_.Container,{flex:6,mr:3,__self:_this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:13}},_react.default.createElement(_.Input,{value:searchText,onChangeText:function onChangeText(word){return setSearchText(word.toLowerCase());},placeholder:"Search",containerStyles:styles.inputContainerStyle,LeftIcon:function LeftIcon(){return _react.default.createElement(_reactNativeRemixIcon.default,{name:"search-line",size:20,color:_theme.theme.colors.background.grey800,__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:21}});},__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:15}})),_react.default.createElement(_.Touchable,{onPress:function onPress(){setSearchText("");setSearchBarOpen(false);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:84,columnNumber:13}},_react.default.createElement(_.Typography,{fontSize:"l",fontFamily:"sf400",color:"font.grey800",__self:_this,__source:{fileName:_jsxFileName,lineNumber:90,columnNumber:15}},"Cancel")))));};Title.propTypes={title:_propTypes.default.string,isVisible:_propTypes.default.boolean,hide:_propTypes.default.func,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object,contentType:_propTypes.default.oneOf(["checkbox",null]),canSearch:_propTypes.default.bool,searchText:_propTypes.default.string,setSearchText:_propTypes.default.func};var BottomSheet=function BottomSheet(_ref2){var data=_ref2.data,title=_ref2.title,hide=_ref2.hide,isVisible=_ref2.isVisible,onItemPress=_ref2.onItemPress,selectedItemIndex=_ref2.selectedItemIndex,bg=_ref2.bg,children=_ref2.children,titleContainerStyle=_ref2.titleContainerStyle,titleTextStyle=_ref2.titleTextStyle,modalParams=_ref2.modalParams,HeaderComponent=_ref2.HeaderComponent,ContentRow=_ref2.ContentRow,contentType=_ref2.contentType,canSearch=_ref2.canSearch,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var _useState3=(0,_react.useState)(""),_useState4=(0,_slicedToArray2.default)(_useState3,2),searchText=_useState4[0],setSearchText=_useState4[1];return _react.default.createElement(_reactNativeModal.default,(0,_extends2.default)({style:styles.modalStyle,isVisible:isVisible,onBackdropPress:hide,useNativeDriver:true,avoidKeyboard:true,hideModalContentWhileAnimating:true,onRequestClose:hide},modalParams,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:172,columnNumber:5}}),_react.default.createElement(_.Container,(0,_extends2.default)({bg:bg,flex:1,borderTopRightRadius:20,borderTopLeftRadius:20,px:24,py:24},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:182,columnNumber:7}}),_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:191,columnNumber:9}},_react.default.createElement(Title,{bg:bg,title:title,isVisible:isVisible,hide:hide,titleContainerStyle:titleContainerStyle,titleTextStyle:titleTextStyle,HeaderComponent:HeaderComponent,contentType:contentType,canSearch:canSearch,searchText:searchText,setSearchText:setSearchText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:192,columnNumber:11}}),data&&_react.default.createElement(_reactNative.FlatList,{contentContainerStyle:styles.flatListContentContainerStyle,initialNumToRender:data.length,data:searchText?data.filter(function(word){return word.startsWith(searchText);}):data,renderItem:function renderItem(_ref3){var item=_ref3.item,index=_ref3.index;return _react.default.createElement(ContentRow,{isSelected:index===selectedItemIndex,key:index,onPress:function onPress(){!contentType&&hide();onItemPress(index);},id:index,label:item,__self:_this,__source:{fileName:_jsxFileName,lineNumber:217,columnNumber:19}});},keyExtractor:function keyExtractor(item,index){return index;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:207,columnNumber:13}}),children)));};exports.BottomSheet=BottomSheet;BottomSheet.defaultProps={bg:"background.primary"};BottomSheet.propTypes={data:_propTypes.default.array,title:_propTypes.default.string,isVisible:_propTypes.default.bool,hide:_propTypes.default.func,onItemPress:_propTypes.default.func,selectedItemIndex:_propTypes.default.number,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object,modalParams:_propTypes.default.object,children:_propTypes.default.node,HeaderComponent:_propTypes.default.elementType,ContentRow:_propTypes.default.elementType.isRequired,contentType:_propTypes.default.oneOf(["checkbox",null]),canSearch:_propTypes.default.bool};var styles=_reactNative.StyleSheet.create({flatListContentContainerStyle:{paddingBottom:70},modalStyle:{margin:0,alignItems:"flex-end",flexDirection:"row"},inputContainerStyle:{backgroundColor:"white",borderRadius:10}});
|
package/lib/theme/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.theme=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var defaultColors={white:"#ffffff",black:"#000000",base:"#4557F8",danger:"#ff6969",menubackground:"#F6F6FA"};var toastBorderColors={success:"#00BA88",error:"#F56A58",info:"#276EF1",warning:"#F3CD82"};var greyVariants={grey:"#828282",grey100:"#f8f9f9",grey200:"#e9ebed",grey300:"#d8dcde",grey400:"#c2c8cc",grey500:"#87929d",grey600:"#68737d",grey700:"#49545C",grey800:"#2f3941"};var
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.theme=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var defaultColors={white:"#ffffff",black:"#000000",base:"#4557F8",danger:"#ff6969",menubackground:"#F6F6FA"};var toastBorderColors={success:"#00BA88",error:"#F56A58",info:"#276EF1",warning:"#F3CD82"};var greyVariants={grey:"#828282",grey100:"#f8f9f9",grey200:"#e9ebed",grey300:"#d8dcde",grey400:"#c2c8cc",grey500:"#87929d",grey600:"#68737d",grey700:"#49545C",grey800:"#2f3941"};var darkBlueVariant={darkBlue100:"#0B4885"};var lightBlueVariants={lightBlue100:"#EAF3FC"};var purpleVariants={purple500:"#5E5CE6",purple700:"#4746B7",purple100:"#EFEFFD"};var greenVariants={green500:"#34C759",green600:"#33C8A0",green700:"#00BA88",green800:"#00956D"};var colors={font:(0,_extends2.default)({primary:"#2F3941",secondary:"#49545C",danger:"#D95D4E"},defaultColors,greyVariants,lightBlueVariants,darkBlueVariant,purpleVariants,greenVariants),background:(0,_extends2.default)({parentView:"#ffffff",primary:"#ffffff",secondary:"#F6F6FA",danger:"#D95D4E"},defaultColors,greyVariants,lightBlueVariants,darkBlueVariant,purpleVariants,greenVariants),border:(0,_extends2.default)({primary:"#E9EBED",secondary:"#C2C8CC",danger:"#D95D4E"},greyVariants,lightBlueVariants,darkBlueVariant,defaultColors,purpleVariants),toast:(0,_extends2.default)({},toastBorderColors)};var baseTheme={colors:colors,fonts:{sf400:"SFProText-Regular",sf500:"SFProText-Medium",sf600:"SFProText-Semibold",sf700:"SFProText-Bold"},lineHeights:[24],fontSizes:{"3xs":10,"2xs":12,xs:13,s:14,m:15,l:16,xl:17,"2xl":18,"3xl":20,"4xl":22,"5xl":30}};baseTheme.lineHeights.note=baseTheme.lineHeights[0]+"px";var theme=(0,_extends2.default)({},baseTheme,{textStyles:{defaultTextStyle:{color:baseTheme.colors.font.primary},header:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes["3xl"],fontFamily:baseTheme.fonts.sf700},modalHeader:{color:baseTheme.colors.font.black,fontSize:baseTheme.fontSizes["xl"],fontFamily:baseTheme.fonts.sf600},body:{color:baseTheme.colors.font.grey500,fontSize:baseTheme.fontSizes.s},subtext:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes["2xs"]},solid:{color:baseTheme.colors.font.white},inverse:{color:baseTheme.colors.font.base},text:{color:baseTheme.colors.font.base}},buttons:{solid:{border:2,borderColor:baseTheme.colors.background.base,backgroundColor:baseTheme.colors.background.base},inverse:{border:2,borderColor:baseTheme.colors.border.base,backgroundColor:baseTheme.colors.background.white},text:{color:baseTheme.colors.font.grey800,backgroundColor:baseTheme.colors.background.white}}});exports.theme=theme;
|
package/package.json
CHANGED
package/src/components/Avatar.js
CHANGED
|
@@ -8,13 +8,8 @@ import { Typography, Container } from "@components";
|
|
|
8
8
|
* Avatars can be used to represent people in a graphical way.
|
|
9
9
|
*
|
|
10
10
|
* <div class="screenshots">
|
|
11
|
-
* <img src="screenshots/avatar/
|
|
12
|
-
* <img src="screenshots/avatar/
|
|
13
|
-
* </div>
|
|
14
|
-
*
|
|
15
|
-
* <div class="screenshots">
|
|
16
|
-
* <img src="screenshots/avatar/imagesizes.png" />
|
|
17
|
-
* <img src="screenshots/avatar/textsizes.png" />
|
|
11
|
+
* <img src="screenshots/avatar/images.png" />
|
|
12
|
+
* <img src="screenshots/avatar/texts.png" />
|
|
18
13
|
* </div>
|
|
19
14
|
*
|
|
20
15
|
* ## Usage
|
|
@@ -26,7 +21,7 @@ import { Typography, Container } from "@components";
|
|
|
26
21
|
* return (
|
|
27
22
|
* <Container>
|
|
28
23
|
* <Avatar
|
|
29
|
-
*
|
|
24
|
+
* variant={"medium"}
|
|
30
25
|
* name="Oliver Smith"
|
|
31
26
|
* bgColor="background.black"
|
|
32
27
|
* fontColor="font.white"
|
|
@@ -40,9 +35,9 @@ import { Typography, Container } from "@components";
|
|
|
40
35
|
|
|
41
36
|
export const Avatar = ({
|
|
42
37
|
name,
|
|
43
|
-
|
|
44
|
-
bgColor = "background.
|
|
45
|
-
fontColor = "font.
|
|
38
|
+
variant = "medium",
|
|
39
|
+
bgColor = "background.lightBlue100",
|
|
40
|
+
fontColor = "font.darkBlue100",
|
|
46
41
|
imageUrl,
|
|
47
42
|
...rest
|
|
48
43
|
}) => {
|
|
@@ -51,14 +46,26 @@ export const Avatar = ({
|
|
|
51
46
|
?.split(/\s/)
|
|
52
47
|
.reduce((response, word) => (response += word.slice(0, 1)), "")
|
|
53
48
|
.slice(0, 2);
|
|
54
|
-
|
|
49
|
+
|
|
50
|
+
const getSizes = () => {
|
|
51
|
+
switch (variant) {
|
|
52
|
+
case "small":
|
|
53
|
+
return [36, 12];
|
|
54
|
+
case "medium":
|
|
55
|
+
return [48, 14];
|
|
56
|
+
default:
|
|
57
|
+
return [48, 14];
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
const [avatarSize, avatarFontSize] = getSizes();
|
|
55
62
|
|
|
56
63
|
const styles = {
|
|
57
64
|
profileImage: {
|
|
58
|
-
height:
|
|
59
|
-
width:
|
|
65
|
+
height: avatarSize,
|
|
66
|
+
width: avatarSize,
|
|
60
67
|
alignSelf: "center",
|
|
61
|
-
borderRadius:
|
|
68
|
+
borderRadius: avatarSize / 2,
|
|
62
69
|
},
|
|
63
70
|
};
|
|
64
71
|
|
|
@@ -69,14 +76,14 @@ export const Avatar = ({
|
|
|
69
76
|
{renderFallbackText ? (
|
|
70
77
|
<Container
|
|
71
78
|
bg={bgColor}
|
|
72
|
-
width={
|
|
73
|
-
height={
|
|
74
|
-
borderRadius={
|
|
79
|
+
width={avatarSize}
|
|
80
|
+
height={avatarSize}
|
|
81
|
+
borderRadius={avatarSize / 2}
|
|
75
82
|
{...rest}
|
|
76
83
|
>
|
|
77
84
|
<Typography
|
|
78
|
-
fontFamily="
|
|
79
|
-
fontSize={
|
|
85
|
+
fontFamily="sf400"
|
|
86
|
+
fontSize={avatarFontSize}
|
|
80
87
|
color={fontColor}
|
|
81
88
|
>
|
|
82
89
|
{acronym.toUpperCase()}
|
|
@@ -105,9 +112,9 @@ Avatar.propTypes = {
|
|
|
105
112
|
*/
|
|
106
113
|
name: PropTypes.string,
|
|
107
114
|
/**
|
|
108
|
-
*
|
|
115
|
+
* variant of the avatar: `medium` or `small`
|
|
109
116
|
*/
|
|
110
|
-
|
|
117
|
+
variant: PropTypes.oneOf(["medium", "small"]),
|
|
111
118
|
/**
|
|
112
119
|
* Custom color for the avatar.
|
|
113
120
|
*/
|
package/src/theme/index.js
CHANGED
|
@@ -25,11 +25,18 @@ const greyVariants = {
|
|
|
25
25
|
grey800: "#2f3941",
|
|
26
26
|
};
|
|
27
27
|
|
|
28
|
+
const darkBlueVariant = {
|
|
29
|
+
darkBlue100: "#0B4885",
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
const lightBlueVariants = {
|
|
33
|
+
lightBlue100: "#EAF3FC",
|
|
34
|
+
};
|
|
35
|
+
|
|
28
36
|
const purpleVariants = {
|
|
29
37
|
purple500: "#5E5CE6",
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
purple800: "#342DF4",
|
|
38
|
+
purple700: "#4746B7",
|
|
39
|
+
purple100: "#EFEFFD",
|
|
33
40
|
};
|
|
34
41
|
|
|
35
42
|
const greenVariants = {
|
|
@@ -46,6 +53,8 @@ const colors = {
|
|
|
46
53
|
danger: "#D95D4E",
|
|
47
54
|
...defaultColors,
|
|
48
55
|
...greyVariants,
|
|
56
|
+
...lightBlueVariants,
|
|
57
|
+
...darkBlueVariant,
|
|
49
58
|
...purpleVariants,
|
|
50
59
|
...greenVariants,
|
|
51
60
|
},
|
|
@@ -56,6 +65,8 @@ const colors = {
|
|
|
56
65
|
danger: "#D95D4E",
|
|
57
66
|
...defaultColors,
|
|
58
67
|
...greyVariants,
|
|
68
|
+
...lightBlueVariants,
|
|
69
|
+
...darkBlueVariant,
|
|
59
70
|
...purpleVariants,
|
|
60
71
|
...greenVariants,
|
|
61
72
|
},
|
|
@@ -64,6 +75,8 @@ const colors = {
|
|
|
64
75
|
secondary: "#C2C8CC",
|
|
65
76
|
danger: "#D95D4E",
|
|
66
77
|
...greyVariants,
|
|
78
|
+
...lightBlueVariants,
|
|
79
|
+
...darkBlueVariant,
|
|
67
80
|
...defaultColors,
|
|
68
81
|
...purpleVariants,
|
|
69
82
|
},
|