@bikdotai/bik-component-library 0.0.821-beta.4 → 0.0.821-beta.5
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),m=require("react"),c=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),x=require("../../assets/icons/bik_livechat.svg.js"),o=require("../../assets/icons/email-channel.svg.js"),d=require("../../assets/icons/facebook_channel.svg.js"),y=require("../../assets/icons/gmail.svg.js"),f=require("../../assets/icons/instagram-channel.svg.js"),_=require("../../assets/icons/task.svg.js"),j=require("../../assets/icons/whatsapp_color.svg.js"),S=require("./Avatar.styled.js"),i=require("./AvatarHelper.js"),n={[i.SIZE.EXTRA_SMALL]:10,[i.SIZE.SMALL]:16,[i.SIZE.MEDIUM]:20,[i.SIZE.LARGE]:32},u={[i.AVATAR_BACKGROUND.LIGHT]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.WHITE]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.DARK]:a.COLORS.surface.standard,[i.AVATAR_BACKGROUND.BRAND]:a.COLORS.background.inverseLight};var A=(e=>(e.INSTAGRAM="instagram",e.MESSENGER="messenger",e.WHATSAPP="whatsapp",e.GMAIL="gmail",e.LIVECHAT="livechat",e.GOOGLE_BUSINESS_CHAT="gbm",e.SHOPIFY="shopify",e.FACEBOOK="facebook",e.EMAIL="email",e.SMTP="smtp",e.FACEBOOK_CATALOG="facebook-catalog",e.TASKS="tasks",e.BIK_LIVECHAT="livechat",e))(A||{});const C=e=>{const[l,g]=m.useState(!1),h=()=>{const s=(e.name||"").split(".").join(" ").split(" ").map(b=>b.charAt(0).toUpperCase()).slice(0,2).join(""),r=u[e.background];return e.size===i.SIZE.LARGE?t.jsx(c.TitleMedium,{style:{color:r},children:s}):e.size===i.SIZE.MEDIUM?t.jsx(c.TitleSmall,{style:{color:r},children:s}):e.size===i.SIZE.SMALL?t.jsx(c.SubHeading,{style:{color:r},children:s}):t.jsx(c.BodyTiny,{style:{color:r},children:s})},R=()=>e.useNameFallback&&(!e.photoUrl||l)&&e.name?t.jsx("div",{children:h()}):e.useNameFallback&&e.photoUrl&&!l?t.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[e.size],height:i.AVATAR_SIZE_MAP[e.size],style:{borderRadius:e?.borderRadius||"50%",objectFit:"contain"},src:e.photoUrl,onError:()=>{g(!0)}}):t.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[e.size],height:i.AVATAR_SIZE_MAP[e.size],style:{borderRadius:e?.borderRadius||"50%",objectFit:"contain"},src:e.photoUrl}),I=()=>{switch(e.channelName){case"email":return t.jsx(o.default,{width:11,height:11});case"smtp":return t.jsx(o.default,{width:11,height:11});case"facebook":return t.jsx(d.default,{width:11,height:11});case"facebook-catalog":return t.jsx(d.default,{width:11,height:11});case"messenger":return t.jsx(d.default,{width:11,height:11});case"instagram":return t.jsx(f.default,{width:11,height:11});case"whatsapp":return t.jsx(j.default,{width:11,height:11});case"gmail":return t.jsx(y.default,{width:11,height:11});case"tasks":return t.jsx(_.default,{width:11,height:11});case"livechat":return t.jsx(x.default,{width:11,height:11})}},O=()=>e.status?t.jsx("div",{style:{backgroundColor:e.status==="ONLINE"?a.COLORS.special.whatsapp.brand:a.COLORS.content.inactive,width:"8px",height:"8px",borderRadius:"50%"}}):null,T=()=>e.type===i.AVATAR_TYPES.IMAGE&&(l||!e.photoUrl)&&e.useNameFallback&&e.name?i.AVATAR_TYPES.INITIALS:e.type;return t.jsxs("div",{style:{position:"relative"},children:[t.jsxs(S.AvatarStyle,{type:T(),size:e.size,background:e.background,children:[e.type===i.AVATAR_TYPES.IMAGE&&R(),e.type===i.AVATAR_TYPES.INITIALS&&t.jsx("div",{children:h()}),e.type===i.AVATAR_TYPES.ICON&&e.icon&&t.jsx(e.icon,{width:n[e.size],height:n[e.size],color:u[e.background]})]}),e.inboxSettings&&t.jsx("div",{style:{position:"absolute",left:n[e.size]+"px",top:n[e.size]+"px",width:14,height:14,borderRadius:e?.borderRadius||"50%",display:"flex",justifyContent:"center",backgroundColor:e.inboxSettings.isSelected?e.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.background.brandLight:e.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.surface.standard,alignItems:"center"},children:I()}),e.status&&t.jsx("div",{style:{position:"absolute",left:n[e.size]+"px",top:n[e.size]+"px",width:11,height:11,borderRadius:"50%",display:"flex",justifyContent:"center",backgroundColor:a.COLORS.surface.standard,alignItems:"center"},children:O()})]})};exports.AVATAR_SIZE_VS_ICON_SIZE_MAP=n;exports.Avatar=C;exports.BACKGROUND_VS_TEXT_COLOR_MAP=u;exports.MESSAGE_CHANNELS=A;
|
|
2
2
|
//# sourceMappingURL=Avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n\tBodyTiny,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\nimport { AvatarStyle } from './Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from './AvatarHelper';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.EXTRA_SMALL]: 10,\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n\t[AVATAR_BACKGROUND.BRAND]: COLORS.background.inverseLight,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' | 'OFFLINE' | 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name || '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tconst color = BACKGROUND_VS_TEXT_COLOR_MAP[props.background];\n\n\t\tif (props.size === SIZE.LARGE) {\n\t\t\treturn <TitleMedium style={{ color }}>{initials}</TitleMedium>;\n\t\t}\n\t\tif (props.size === SIZE.MEDIUM) {\n\t\t\treturn <TitleSmall style={{ color }}>{initials}</TitleSmall>;\n\t\t}\n\t\treturn <BodyTiny style={{ color }}>{initials}</BodyTiny>;\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl || imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError || !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","COLORS","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","e","color","TitleMedium","TitleSmall","BodyTiny","getImageBlock","jsx","AVATAR_SIZE_MAP","getChannelIcon","EmailIcon","FacebookIcon","InstagramIcon","WhatsappIcon","GmailIcon","TaskIcon","BikLivechatIcon","getOnlineStatusIcon","getPropsType","AVATAR_TYPES","jsxs","AvatarStyle"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n\tBodyTiny,\n\tSubHeading,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\nimport { AvatarStyle } from './Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from './AvatarHelper';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.EXTRA_SMALL]: 10,\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n\t[AVATAR_BACKGROUND.BRAND]: COLORS.background.inverseLight,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' | 'OFFLINE' | 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name || '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tconst color = BACKGROUND_VS_TEXT_COLOR_MAP[props.background];\n\n\t\tif (props.size === SIZE.LARGE) {\n\t\t\treturn <TitleMedium style={{ color }}>{initials}</TitleMedium>;\n\t\t}\n\t\tif (props.size === SIZE.MEDIUM) {\n\t\t\treturn <TitleSmall style={{ color }}>{initials}</TitleSmall>;\n\t\t}\n\t\tif (props.size === SIZE.SMALL) {\n\t\t\treturn <SubHeading style={{ color }}>{initials}</SubHeading>;\n\t\t}\n\t\treturn <BodyTiny style={{ color }}>{initials}</BodyTiny>;\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl || imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError || !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","COLORS","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","e","color","TitleMedium","TitleSmall","SubHeading","BodyTiny","getImageBlock","jsx","AVATAR_SIZE_MAP","getChannelIcon","EmailIcon","FacebookIcon","InstagramIcon","WhatsappIcon","GmailIcon","TaskIcon","BikLivechatIcon","getOnlineStatusIcon","getPropsType","AVATAR_TYPES","jsxs","AvatarStyle"],"mappings":"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"}
|
|
@@ -1,38 +1,38 @@
|
|
|
1
1
|
import { jsxs as g, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { useState as R } from "react";
|
|
3
|
-
import { TitleMedium as k, TitleSmall as A,
|
|
3
|
+
import { TitleMedium as k, TitleSmall as A, SubHeading as w, BodyTiny as O } from "../TypographyStyle.js";
|
|
4
4
|
import { COLORS as i } from "../../constants/Theme.js";
|
|
5
|
-
import
|
|
5
|
+
import x from "../../assets/icons/bik_livechat.svg.js";
|
|
6
6
|
import u from "../../assets/icons/email-channel.svg.js";
|
|
7
7
|
import d from "../../assets/icons/facebook_channel.svg.js";
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
8
|
+
import z from "../../assets/icons/gmail.svg.js";
|
|
9
|
+
import C from "../../assets/icons/instagram-channel.svg.js";
|
|
10
|
+
import L from "../../assets/icons/task.svg.js";
|
|
11
11
|
import U from "../../assets/icons/whatsapp_color.svg.js";
|
|
12
12
|
import { AvatarStyle as B } from "./Avatar.styled.js";
|
|
13
|
-
import { SIZE as n, AVATAR_TYPES as r, AVATAR_BACKGROUND as
|
|
13
|
+
import { SIZE as n, AVATAR_TYPES as r, AVATAR_BACKGROUND as s, AVATAR_SIZE_MAP as l } from "./AvatarHelper.js";
|
|
14
14
|
const a = {
|
|
15
15
|
[n.EXTRA_SMALL]: 10,
|
|
16
16
|
[n.SMALL]: 16,
|
|
17
17
|
[n.MEDIUM]: 20,
|
|
18
18
|
[n.LARGE]: 32
|
|
19
19
|
}, b = {
|
|
20
|
-
[
|
|
21
|
-
[
|
|
22
|
-
[
|
|
23
|
-
[
|
|
20
|
+
[s.LIGHT]: i.content.secondary,
|
|
21
|
+
[s.WHITE]: i.content.secondary,
|
|
22
|
+
[s.DARK]: i.surface.standard,
|
|
23
|
+
[s.BRAND]: i.background.inverseLight
|
|
24
24
|
};
|
|
25
25
|
var P = /* @__PURE__ */ ((t) => (t.INSTAGRAM = "instagram", t.MESSENGER = "messenger", t.WHATSAPP = "whatsapp", t.GMAIL = "gmail", t.LIVECHAT = "livechat", t.GOOGLE_BUSINESS_CHAT = "gbm", t.SHOPIFY = "shopify", t.FACEBOOK = "facebook", t.EMAIL = "email", t.SMTP = "smtp", t.FACEBOOK_CATALOG = "facebook-catalog", t.TASKS = "tasks", t.BIK_LIVECHAT = "livechat", t))(P || {});
|
|
26
|
-
const
|
|
27
|
-
const [
|
|
28
|
-
const
|
|
29
|
-
return t.size === n.LARGE ? /* @__PURE__ */ e(k, { style: { color:
|
|
30
|
-
}, f = () => t.useNameFallback && (!t.photoUrl ||
|
|
26
|
+
const J = (t) => {
|
|
27
|
+
const [h, I] = R(!1), m = () => {
|
|
28
|
+
const o = (t.name || "").split(".").join(" ").split(" ").map((v) => v.charAt(0).toUpperCase()).slice(0, 2).join(""), c = b[t.background];
|
|
29
|
+
return t.size === n.LARGE ? /* @__PURE__ */ e(k, { style: { color: c }, children: o }) : t.size === n.MEDIUM ? /* @__PURE__ */ e(A, { style: { color: c }, children: o }) : t.size === n.SMALL ? /* @__PURE__ */ e(w, { style: { color: c }, children: o }) : /* @__PURE__ */ e(O, { style: { color: c }, children: o });
|
|
30
|
+
}, f = () => t.useNameFallback && (!t.photoUrl || h) && t.name ? /* @__PURE__ */ e("div", { children: m() }) : t.useNameFallback && t.photoUrl && !h ? /* @__PURE__ */ e(
|
|
31
31
|
"img",
|
|
32
32
|
{
|
|
33
33
|
alt: "",
|
|
34
|
-
width:
|
|
35
|
-
height:
|
|
34
|
+
width: l[t.size],
|
|
35
|
+
height: l[t.size],
|
|
36
36
|
style: {
|
|
37
37
|
borderRadius: t?.borderRadius || "50%",
|
|
38
38
|
objectFit: "contain"
|
|
@@ -46,8 +46,8 @@ const q = (t) => {
|
|
|
46
46
|
"img",
|
|
47
47
|
{
|
|
48
48
|
alt: "",
|
|
49
|
-
width:
|
|
50
|
-
height:
|
|
49
|
+
width: l[t.size],
|
|
50
|
+
height: l[t.size],
|
|
51
51
|
style: {
|
|
52
52
|
borderRadius: t?.borderRadius || "50%",
|
|
53
53
|
objectFit: "contain"
|
|
@@ -67,15 +67,15 @@ const q = (t) => {
|
|
|
67
67
|
case "messenger":
|
|
68
68
|
return /* @__PURE__ */ e(d, { width: 11, height: 11 });
|
|
69
69
|
case "instagram":
|
|
70
|
-
return /* @__PURE__ */ e(
|
|
70
|
+
return /* @__PURE__ */ e(C, { width: 11, height: 11 });
|
|
71
71
|
case "whatsapp":
|
|
72
72
|
return /* @__PURE__ */ e(U, { width: 11, height: 11 });
|
|
73
73
|
case "gmail":
|
|
74
|
-
return /* @__PURE__ */ e(
|
|
74
|
+
return /* @__PURE__ */ e(z, { width: 11, height: 11 });
|
|
75
75
|
case "tasks":
|
|
76
|
-
return /* @__PURE__ */ e(
|
|
76
|
+
return /* @__PURE__ */ e(L, { width: 11, height: 11 });
|
|
77
77
|
case "livechat":
|
|
78
|
-
return /* @__PURE__ */ e(
|
|
78
|
+
return /* @__PURE__ */ e(x, { width: 11, height: 11 });
|
|
79
79
|
}
|
|
80
80
|
}, T = () => t.status ? /* @__PURE__ */ e(
|
|
81
81
|
"div",
|
|
@@ -98,7 +98,7 @@ const q = (t) => {
|
|
|
98
98
|
/* @__PURE__ */ g(
|
|
99
99
|
B,
|
|
100
100
|
{
|
|
101
|
-
type: t.type === r.IMAGE && (
|
|
101
|
+
type: t.type === r.IMAGE && (h || !t.photoUrl) && t.useNameFallback && t.name ? r.INITIALS : t.type,
|
|
102
102
|
size: t.size,
|
|
103
103
|
background: t.background,
|
|
104
104
|
children: [
|
|
@@ -157,7 +157,7 @@ const q = (t) => {
|
|
|
157
157
|
};
|
|
158
158
|
export {
|
|
159
159
|
a as AVATAR_SIZE_VS_ICON_SIZE_MAP,
|
|
160
|
-
|
|
160
|
+
J as Avatar,
|
|
161
161
|
b as BACKGROUND_VS_TEXT_COLOR_MAP,
|
|
162
162
|
P as MESSAGE_CHANNELS
|
|
163
163
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n\tBodyTiny,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\nimport { AvatarStyle } from './Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from './AvatarHelper';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.EXTRA_SMALL]: 10,\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n\t[AVATAR_BACKGROUND.BRAND]: COLORS.background.inverseLight,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' | 'OFFLINE' | 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name || '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tconst color = BACKGROUND_VS_TEXT_COLOR_MAP[props.background];\n\n\t\tif (props.size === SIZE.LARGE) {\n\t\t\treturn <TitleMedium style={{ color }}>{initials}</TitleMedium>;\n\t\t}\n\t\tif (props.size === SIZE.MEDIUM) {\n\t\t\treturn <TitleSmall style={{ color }}>{initials}</TitleSmall>;\n\t\t}\n\t\treturn <BodyTiny style={{ color }}>{initials}</BodyTiny>;\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl || imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError || !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","COLORS","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","e","color","TitleMedium","TitleSmall","BodyTiny","getImageBlock","jsx","AVATAR_SIZE_MAP","getChannelIcon","EmailIcon","FacebookIcon","InstagramIcon","WhatsappIcon","GmailIcon","TaskIcon","BikLivechatIcon","getOnlineStatusIcon","jsxs","AvatarStyle","AVATAR_TYPES"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n\tBodyTiny,\n\tSubHeading,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\nimport { AvatarStyle } from './Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from './AvatarHelper';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.EXTRA_SMALL]: 10,\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n\t[AVATAR_BACKGROUND.BRAND]: COLORS.background.inverseLight,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' | 'OFFLINE' | 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name || '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tconst color = BACKGROUND_VS_TEXT_COLOR_MAP[props.background];\n\n\t\tif (props.size === SIZE.LARGE) {\n\t\t\treturn <TitleMedium style={{ color }}>{initials}</TitleMedium>;\n\t\t}\n\t\tif (props.size === SIZE.MEDIUM) {\n\t\t\treturn <TitleSmall style={{ color }}>{initials}</TitleSmall>;\n\t\t}\n\t\tif (props.size === SIZE.SMALL) {\n\t\t\treturn <SubHeading style={{ color }}>{initials}</SubHeading>;\n\t\t}\n\t\treturn <BodyTiny style={{ color }}>{initials}</BodyTiny>;\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl || imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError || !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","COLORS","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","e","color","TitleMedium","TitleSmall","SubHeading","BodyTiny","getImageBlock","jsx","AVATAR_SIZE_MAP","getChannelIcon","EmailIcon","FacebookIcon","InstagramIcon","WhatsappIcon","GmailIcon","TaskIcon","BikLivechatIcon","getOnlineStatusIcon","jsxs","AvatarStyle","AVATAR_TYPES"],"mappings":"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"}
|