carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 2.9 kB
JavaScript
import{jsx as o}from"react/jsx-runtime";import{useState as t,useEffect as e}from"react";import{Tooltip as r}from"../tooltip/tooltip.component.js";import i from"../../__internal__/utils/helpers/tags/tags.js";import{StyledPortraitInitials as n,StyledPortraitContainer as l,StyledIcon as s,StyledCustomImg as p}from"./portrait.style.js";import"../../style/utils/filter-styled-system-padding-props.js";import a from"../../style/utils/filter-styled-system-margin-props.js";function c(o,t,e){return t in o?Object.defineProperty(o,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):o[t]=e,o}function u(o){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{},r=Object.keys(e);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(e).filter((function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})))),r.forEach((function(t){c(o,t,e[t])}))}return o}function f(o,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(t)):function(o){var t=Object.keys(o);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(o);t.push.apply(t,e)}return t}(Object(t)).forEach((function(e){Object.defineProperty(o,e,Object.getOwnPropertyDescriptor(t,e))})),o}const d=c=>{var{alt:d,backgroundColor:g,foregroundColor:y,name:b,darkBackground:m=!1,iconType:O="individual",initials:j,shape:k="circle",size:C="M",src:h,onClick:P,tooltipMessage:w,tooltipId:v,tooltipIsVisible:z,tooltipPosition:S,tooltipType:B,tooltipSize:I,tooltipBgColor:V,tooltipFontColor:x}=c,D=function(o,t){if(null==o)return{};var e,r,i=function(o,t){if(null==o)return{};var e,r,i={},n=Object.keys(o);for(r=0;r<n.length;r++)e=n[r],t.indexOf(e)>=0||(i[e]=o[e]);return i}(o,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(o);for(r=0;r<n.length;r++)e=n[r],t.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(o,e)&&(i[e]=o[e])}return i}(c,["alt","backgroundColor","foregroundColor","name","darkBackground","iconType","initials","shape","size","src","onClick","tooltipMessage","tooltipId","tooltipIsVisible","tooltipPosition","tooltipType","tooltipSize","tooltipBgColor","tooltipFontColor"]);const[E,T]=t(!1),_=Boolean(h)&&!E;e((()=>{T(!1)}),[h]);const M=i("portrait",D);return(()=>{let t=o(s,{type:O,size:C});return j&&(t=o(n,{size:C,"data-element":"initials",children:j.slice(0,3).toUpperCase()})),h&&!E&&(t=o(p,{src:h,alt:d||b||"","data-element":"user-image",onError:()=>T(!0)})),w?o(r,{message:w,id:v,position:S,type:B,size:I,isVisible:z,bgColor:V,fontColor:x,children:o(l,f(u(f(u({},a(D)),{onClick:P}),M),{hasValidImg:_,darkBackground:m,size:C,shape:k,backgroundColor:g,foregroundColor:y,children:t}))}):o(l,f(u(f(u({},a(D)),{onClick:P}),M),{hasValidImg:_,darkBackground:m,size:C,shape:k,backgroundColor:g,foregroundColor:y,children:t}))})()};export{d as Portrait,d as default};