monday-ui-react-core
Version:
Official monday.com UI resources for application development in React.js
3 lines (2 loc) • 3.94 kB
JavaScript
import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as a,useRef as r,useMemo as i,useCallback as s}from"react";import l from"classnames";import n from"../Icon/Icon.js";import c from"../../hooks/useMergeRef.js";import m from"../Icon/Icons/components/CloseSmall.js";import{getCSSVar as d}from"../../services/themes.js";import{ElementAllowedColor as p,getElementColor as u}from"../../utils/colors-vars-map.js";import v from"../Avatar/Avatar.js";import f from"../IconButton/IconButton.js";import b from"../Text/Text.js";import{getTestId as y,ComponentDefaultTestId as h}from"../../tests/testIds.js";import{AvatarType as j}from"../Avatar/AvatarConstants.js";import{withStaticProps as g}from"../../types/withStaticProps.js";import T from"../../hooks/useHover/useHover.js";import k from"../../hooks/useSetFocus/index.js";import C from"../../hooks/useClickableProps/useClickableProps.js";import{backwardCompatibilityForProperties as N}from"../../helpers/backwardCompatibilityForProperties.js";import I from"./Chips.module.scss.js";var A=a((function(a,p){var g=a.className,S=a.avatarClassName,E=a.iconClassName,O=a.id,P=a.label,R=void 0===P?"":P,w=a.leftIcon,x=void 0===w?null:w,B=a.rightIcon,M=void 0===B?null:B,z=a.leftAvatar,F=void 0===z?null:z,H=a.rightAvatar,_=void 0===H?null:H,D=a.disabled,L=void 0!==D&&D,X=a.readOnly,G=void 0!==X&&X,Y=a.allowTextSelection,U=void 0!==Y&&Y,q=a.color,J=void 0===q?A.colors.PRIMARY:q,K=a.iconSize,Q=void 0===K?18:K,V=a.onDelete,W=void 0===V?function(e,o){}:V,Z=a.onMouseDown,$=a.onClick,ee=a.noAnimation,oe=void 0===ee||ee,te=a.ariaLabel,ae=a.disableClickableBehavior,re=void 0!==ae&&ae,ie=a.leftAvatarType,se=void 0===ie?j.IMG:ie,le=a.rightAvatarType,ne=void 0===le?j.IMG:le,ce=a.showBorder,me=void 0!==ce&&ce,de=a.leftRenderer,pe=a.rightRenderer,ue=a.closeButtonAriaLabel,ve=void 0===ue?"Remove":ue,fe=N([a["data-testid"],a.dataTestId],y(h.CHIP,O)),be=!(!$&&!Z||re),ye=!G&&!L,he=te||"string"==typeof R&&R||"",je=r(null),ge=r(null),Te=T(),ke=e(Te,2),Ce=ke[0],Ne=ke[1],Ie=k({ref:ge}).isFocused,Ae=c(p,ge,Ce),Se=l(I.chips,g,o(o(o(o({},I.disabled,L),I.noAnimation,oe),I.withUserSelect,U),I.border,me)),Ee=l(I.clickable,Se,o(o({},I.disabled,L),I.disableTextSelection,!U)),Oe=i((function(){return{backgroundColor:L?d("disabled-background-color"):be&&(Ne||Ie)?u(J,!0,!0):u(J,!0)}}),[L,be,Ne,Ie,J]),Pe=s((function(e){e.stopPropagation(),W&&W(O,e)}),[O,W]),Re=s((function(e){void 0!==$&&e.target!==je.current&&(e.preventDefault(),$(e))}),[$]),we=C({onClick:Re,onMouseDown:Z,disabled:L,id:O,"data-testid":fe,ariaLabel:he,ariaHidden:!1,ariaHasPopup:!1,ariaExpanded:!1},Ae),xe=be?Object.assign(Object.assign({},we),{ref:we.ref,className:Ee,style:Oe}):{className:Se,"aria-label":he,style:Oe,ref:Ae,onClick:Re,onMouseDown:Z,id:O,"data-testid":fe},Be=se===j.TEXT?{text:F}:{src:F},Me=se===j.TEXT?{text:_}:{src:_};return t.createElement("div",Object.assign({},xe),F?t.createElement(v,Object.assign({withoutBorder:!0,className:l(I.avatar,I.left,S),customSize:18,type:se,key:O},Be)):null,x?t.createElement(n,{className:l(I.icon,I.left,E),iconType:n.type.ICON_FONT,clickable:!1,icon:x,iconSize:Q,ignoreFocusStyle:!0}):null,de&&t.createElement("div",{className:l(I.customRenderer,I.left)},de),t.createElement(b,{type:b.types.TEXT2,className:I.label},R),M?t.createElement(n,{className:l(I.icon,I.right,E),iconType:n.type.ICON_FONT,clickable:!1,icon:M,iconSize:Q,ignoreFocusStyle:!0}):null,_?t.createElement(v,Object.assign({withoutBorder:!0,className:l(I.avatar,I.right,S),customSize:18,type:ne,key:O},Me)):null,pe&&t.createElement("div",{className:l(I.customRenderer,I.right)},pe),ye&&t.createElement(f,{size:f.sizes.XXS,color:f.colors.ON_PRIMARY_COLOR,className:l(I.icon,I.close),ariaLabel:ve,hideTooltip:!0,icon:m,onClick:Pe,"data-testid":"".concat(fe,"-close"),ref:je}))})),S=g(A,{colors:p,avatarTypes:j});export{S as default};
//# sourceMappingURL=Chips.js.map