beta-parity-react/ui/Avatar/index.js

Beta Parity React Components

"use strict";function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}Object.defineProperty(exports,"__esModule",{value:true});exports.AvatarTrigger=exports.AvatarGroup=exports.Avatar=void 0;var _react=_interopRequireDefault(require("react"));var _classnames=_interopRequireDefault(require("classnames"));require("./index.css");require("./variables.css");var _Dot=require("../Dot");var _lucideReact=require("lucide-react");var _jsxRuntime=require("react/jsx-runtime");var _excluded=["className","src","alt","initials","size","disabled","framePadding","status","style","children","wrapperProps"],_excluded2=["children","className","max","direction","spacing","size","borderStyle","framePadding","renderOverflow","onOverflowClick","style"],_excluded3=["className","active"];function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _iterableToArrayLimit(r,l){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var e,n,i,u,a=[],f=!0,o=!1;try{if(i=(t=t.call(r)).next,0===l){if(Object(t)!==t)return;f=!1}else for(;!(f=(e=i.call(t)).done)&&(a.push(e.value),a.length!==l);f=!0);}catch(r){o=!0,n=r}finally{try{if(!f&&null!=t["return"]&&(u=t["return"](),Object(u)!==u))return}finally{if(o)throw n}}return a}}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function _defineProperty(obj,key,value){key=_toPropertyKey(key);if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}}return target}var sizeAvatarMap={xxs:"xxs",xs:"xs",sm:"sm",md:"md",lg:"lg",xl:"xl"};var sizeAvatarToDot={xxs:"xs",xs:"xs",sm:"sm",md:"md",lg:"lg",xl:"xl"};var Avatar=exports.Avatar=_react["default"].forwardRef(function(_ref,ref){var className=_ref.className,src=_ref.src,alt=_ref.alt,initials=_ref.initials,_ref$size=_ref.size,size=_ref$size===void 0?"md":_ref$size,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,_ref$framePadding=_ref.framePadding,framePadding=_ref$framePadding===void 0?1:_ref$framePadding,statusProp=_ref.status,style=_ref.style,children=_ref.children,wrapperProps=_ref.wrapperProps,props=_objectWithoutProperties(_ref,_excluded);var status=_objectSpread({type:"border",color:undefined,pulse:false,borderStyle:"default"},statusProp);var _React$useState=_react["default"].useState(false),_React$useState2=_slicedToArray(_React$useState,2),imgError=_React$useState2[0],setImgError=_React$useState2[1];var handleImgError=function handleImgError(){setImgError(true)};var avatarContent=children?(0,_jsxRuntime.jsx)("div",{className:"avatar-img",children:children}):src&&!imgError?(0,_jsxRuntime.jsx)("img",{src:src,alt:alt||"",onError:handleImgError,className:"avatar-img",style:_objectSpread({objectFit:"cover",width:"100%",height:"100%"},style)}):initials?(0,_jsxRuntime.jsx)("span",{className:"avatar-initials",children:initials}):(0,_jsxRuntime.jsx)("span",{className:"avatar-placeholder","aria-hidden":"true",children:(0,_jsxRuntime.jsx)(_lucideReact.UserRound,{className:"avatar-placeholder-icon"})});if((status===null||status===void 0?void 0:status.type)==="border"){var hasColor=!!status.color;var isHasGapFrame=status.borderStyle==="inherit"||hasColor;var showBorder=!["none","inherit"].includes(status.borderStyle||"");var borderStyleVars=hasColor?_defineProperty({},"--par-avatar-status-color","var(--par-color-border-avatar-".concat(status.color,")")):{};var frameGap=isHasGapFrame?"".concat(framePadding,"px"):"0px";return(0,_jsxRuntime.jsxs)("div",_objectSpread(_objectSpread({},wrapperProps),{},{className:(0,_classnames["default"])("avatar-wrapper",wrapperProps===null||wrapperProps===void 0?void 0:wrapperProps.className),children:[showBorder&&(0,_jsxRuntime.jsx)("div",{className:(0,_classnames["default"])("avatar-border",{"border-alternative":status.borderStyle==="alternative","status-border":hasColor,pulse:status.pulse}),style:_objectSpread({},borderStyleVars),"data-status-color":status.color}),(0,_jsxRuntime.jsx)("div",{className:(0,_classnames["default"])("avatar-frame",sizeAvatarMap[size]),style:_defineProperty({},"--avatar-frame-gap",frameGap),children:(0,_jsxRuntime.jsx)("div",_objectSpread(_objectSpread({className:(0,_classnames["default"])("avatar",sizeAvatarMap[size],{disabled:disabled},className),ref:ref},props),{},{children:avatarContent}))})]}))}if(status&&(status.type==="dot"||!status.type)){return(0,_jsxRuntime.jsxs)("div",_objectSpread(_objectSpread({},wrapperProps),{},{className:(0,_classnames["default"])("avatar-wrapper",wrapperProps===null||wrapperProps===void 0?void 0:wrapperProps.className),children:[(0,_jsxRuntime.jsx)("div",{className:(0,_classnames["default"])("avatar-frame",sizeAvatarMap[size]),children:(0,_jsxRuntime.jsx)("div",_objectSpread(_objectSpread({className:(0,_classnames["default"])("avatar",sizeAvatarMap[size],{disabled:disabled},className),ref:ref,style:style},props),{},{children:avatarContent}))}),(0,_jsxRuntime.jsxs)("div",{className:"avatar-dot-wrapper",children:[(0,_jsxRuntime.jsx)("div",{className:(0,_classnames["default"])("avatar-dot-border",{"border-alternative":status.borderStyle==="alternative"})}),status.borderStyle==="inherit"&&(0,_jsxRuntime.jsx)("div",{className:(0,_classnames["default"])("avatar-dot-frame")}),status.type==="dot"&&(0,_jsxRuntime.jsx)(_Dot.Dot,{className:"avatar-dot",color:status.color,size:sizeAvatarToDot[size],pulse:status.pulse})]})]}))}return(0,_jsxRuntime.jsx)("div",_objectSpread(_objectSpread({className:(0,_classnames["default"])("avatar",sizeAvatarMap[size],{disabled:disabled},className),ref:ref},props),{},{children:avatarContent}))});Avatar.displayName="Avatar";var AvatarGroup=exports.AvatarGroup=_react["default"].forwardRef(function(_ref4,ref){var children=_ref4.children,className=_ref4.className,_ref4$max=_ref4.max,max=_ref4$max===void 0?5:_ref4$max,_ref4$direction=_ref4.direction,direction=_ref4$direction===void 0?"row":_ref4$direction,_ref4$spacing=_ref4.spacing,spacing=_ref4$spacing===void 0?"-0.5rem":_ref4$spacing,_ref4$size=_ref4.size,size=_ref4$size===void 0?"md":_ref4$size,_ref4$borderStyle=_ref4.borderStyle,borderStyle=_ref4$borderStyle===void 0?"default":_ref4$borderStyle,framePadding=_ref4.framePadding,renderOverflow=_ref4.renderOverflow,onOverflowClick=_ref4.onOverflowClick,style=_ref4.style,props=_objectWithoutProperties(_ref4,_excluded2);var childrenArray=_react["default"].Children.toArray(children);var totalAvatars=childrenArray.length;var visibleAvatars=max?childrenArray.slice(0,max):childrenArray;var hiddenAvatars=childrenArray.slice(max||0,totalAvatars);var overflowCount=Math.max(0,totalAvatars-(max||0));var groupStyle=_objectSpread({"--avatar-group-spacing":spacing},style);return(0,_jsxRuntime.jsxs)("div",_objectSpread(_objectSpread({className:(0,_classnames["default"])("avatar-group","direction-".concat(direction),className),style:groupStyle,ref:ref},props),{},{children:[visibleAvatars.map(function(child,index){if(_react["default"].isValidElement(child)){return _react["default"].cloneElement(child,{key:index,size:child.props.size||size,framePadding:framePadding,status:child.props.status||{borderStyle:borderStyle},wrapperProps:{className:(0,_classnames["default"])(child.props.className,"avatar-group-item")}})}return child}),overflowCount>0&&(renderOverflow?renderOverflow(overflowCount,hiddenAvatars):(0,_jsxRuntime.jsx)(AvatarTrigger,{size:size,status:{type:"border",pulse:false,borderStyle:borderStyle},className:"avatar-group-overflow",onClick:onOverflowClick,initials:"+".concat(overflowCount),framePadding:framePadding,wrapperProps:{className:"avatar-group-item"}}))]}))});AvatarGroup.displayName="AvatarGroup";var AvatarTrigger=exports.AvatarTrigger=_react["default"].forwardRef(function(_ref5,ref){var className=_ref5.className,_ref5$active=_ref5.active,active=_ref5$active===void 0?false:_ref5$active,props=_objectWithoutProperties(_ref5,_excluded3);return(0,_jsxRuntime.jsx)(Avatar,_objectSpread({tabIndex:0,ref:ref,className:(0,_classnames["default"])("avatar-trigger",{active:active},className)},props))});AvatarTrigger.displayName="AvatarTrigger";