@soul-refiner/design-system 2.14.147 → 2.14.148
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.
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
display: flex;
|
|
14
14
|
word-break: break-word;
|
|
15
15
|
flex-direction: column;
|
|
16
|
-
${({$hasReplies:e})=>e?'\n position: relative;\n\n &::before {\n content: "";\n position: absolute;\n top: 32px;\n left:
|
|
16
|
+
${({$hasReplies:e})=>e?'\n position: relative;\n\n &::before {\n content: "";\n position: absolute;\n top: 32px;\n left: 0;\n height: calc(100% - 12px);\n border-left: 2px solid var(--color-grey-9);\n }':""}
|
|
17
17
|
`,T=S.default.div`
|
|
18
18
|
padding: 16px;
|
|
19
19
|
display: flex;
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
padding-top: 12px;
|
|
40
40
|
`,M=S.default.div`
|
|
41
41
|
position: relative;
|
|
42
|
-
${({$hasLine:e})=>e?'\n &::before {\n content: "";\n position: absolute;\n left:
|
|
42
|
+
${({$hasLine:e})=>e?'\n &::before {\n content: "";\n position: absolute;\n left: 0;\n height: 100%;\n border-left: 2px solid var(--color-grey-9);\n }':""}
|
|
43
43
|
`,A=S.default.span`
|
|
44
44
|
font-weight: 600;
|
|
45
45
|
font-size: 0.9em;
|
|
@@ -57,8 +57,8 @@
|
|
|
57
57
|
`,U=S.default.div`
|
|
58
58
|
position: absolute;
|
|
59
59
|
top: -12px;
|
|
60
|
-
left:
|
|
61
|
-
width:
|
|
60
|
+
left: 15px;
|
|
61
|
+
width: 16px;
|
|
62
62
|
height: 32px;
|
|
63
63
|
border-bottom-left-radius: 16px;
|
|
64
64
|
border: 2px solid var(--color-grey-9);
|
|
@@ -70,4 +70,4 @@
|
|
|
70
70
|
gap: 12px;
|
|
71
71
|
width: 90%;
|
|
72
72
|
padding: 8px 0;
|
|
73
|
-
`;exports.Comment=({avatarTooltipContent:t,avatarTooltipSx:n,content:r,createdDate:s,hasMoreReplies:d,id:p,onComment:$,onReact:b,latestReaction:w,onShowReplies:E,onEdit:S,isEditing:P,setIsEditing:A,dropdown:F,reactionModal:N,reactions:D,replies:H,userImageUri:O,userName:W,userReactions:V,visibilityIcon:X,customPlaceHolder:Y,userProfileUri:J,sx:K,moveButtonsToLeft:Q=!1,useNewVersion:Z=!1,onDelete:ee,visibility:te,shareDropdown:ne,belongsToLoggedUser:re=!1,disableRedirectionToUserProfile:oe=!1,replyAccountOptions:ie,selectedReplyAccount:se,onReplyAccountChange:ae,showAccountSelector:le=!1,accountSelectorSize:ce=32,activeReplyId:de,onReplyClick:pe,flatReplies:xe=!1,mentionMap:ue={},avatarInside:he=!1})=>{const[ge,fe]=k.default.useState(!1),[me,je]=k.default.useState({x:0,y:0}),[ye,ve]=k.default.useState("up"),[$e,be]=k.default.useState(!1),[we,Ee]=k.default.useState(!1),[ke,Se]=k.default.useState(""),[Ce,Pe]=k.default.useState(r),Re=k.default.useRef(null),[Ie,ze]=k.default.useState(!1),[Be,qe]=k.default.useState(!1),Te=window.innerWidth<=500,_e=de===p,Le=k.default.Children.toArray(H);k.default.useEffect(()=>{(P||Ie)&&Re.current&&Re.current.focus()},[P,Ie]);const Me=e=>{e.stopPropagation(),fe(e=>!e),je({y:e.clientY,x:e.clientX}),ve(e.clientY>400?"up":"down")},Ae=()=>{E&&E(),Ee(!0)},Ue=h.abbrTimeBeforeDate(s),Ge=D&&Object.entries(D).slice(0,5).sort((e,t)=>e[1]<t[1]?1:-1).map(([t,n])=>e.jsx(e.Fragment,{children:e.jsx(y.EmojiReaction,{size:16,emoji:t,isActive:V?.includes(t),onReact:()=>b(t),showSparkle:t===w,count:n,showCount:!0},p+t)})),Fe=!!Le?.length&&Le.length>0,Ne=Fe&&Le.map((t,n)=>{if(!k.default.isValidElement(t))return null;const r=t.props?.id,o=n!==Le.length-1||d;return xe?e.jsx(k.default.Fragment,{children:t},r):e.jsxs(M,{$hasLine:o,children:[t,e.jsx(U,{})]},r)});return e.jsxs(B,{$sx:K,id:"comment-"+p,$moveButtonsToLeft:Q,children:[!he&&(O&&"/images/default_avatar.png"!==O?e.jsx(o.Avatar,{as:oe?void 0:C.default,href:oe?void 0:J,image:O,size:32,tooltipContent:t,tooltipSx:n}):e.jsx(o.Avatar.Initials,{name:W||"U",size:32,sx:"font-size: 12px;"})),e.jsxs(i.Box,{$flex:1,$dir:"column",children:[e.jsxs(q,{$hasReplies:!xe&&(Fe||!!d),children:[P||Ie?e.jsx(g.ResponsiveTextArea,{inputStyles:"min-height: 104px;",wrapperStyles:"background:var(--color-grey-9); ",onChange:e=>{Pe(e.target.value)},value:Ce,ref:Re,onBlur:async()=>{Z&&(S&&await S(Ce,p),ze(!1))}}):e.jsxs(T,{onClick:()=>Z&&re?ze(!0):void 0,onMouseEnter:()=>qe(!0),onMouseLeave:()=>qe(!1),children:[e.jsxs(i.Box,{$dir:"row",$justify:"space-between",$align:"center",children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[he&&(O&&"/images/default_avatar.png"!==O?e.jsx(o.Avatar,{as:oe?void 0:C.default,href:oe?void 0:J,image:O,size:32,tooltipContent:t,tooltipSx:n}):e.jsx(o.Avatar.Initials,{name:W||"U",size:32,sx:"font-size: 12px;"})),e.jsx(a.P,{as:oe?void 0:J?C.default:"span",href:oe?void 0:J,$bold:!0,$color:"grey-2",sx:"text-decoration:none !important; color:var(--color-grey-2) !important;",$fontSize:14,$lineHeight:20,children:W}),Z&&te&&("PUBLIC_WITH_MEETING"===te?e.jsxs(e.Fragment,{children:[z.PUBLIC,e.jsx(a.P,{$fontSize:14,children:I.PUBLIC}),z.MEETING_MEMBERS,e.jsx(a.P,{$fontSize:14,children:I.MEETING_MEMBERS})]}):e.jsxs(e.Fragment,{children:[z[te],e.jsx(a.P,{$fontSize:14,children:I[te]})]}))]}),Z&&re?Te||Be?e.jsx(v.TrashSlash,{sx:"cursor: pointer;",onClick:e=>{e.stopPropagation(),e.preventDefault(),ee&&ee()}}):null:F]}),e.jsx(a.P,{sx:"white-space: pre-line;letter-spacing: -0.176px; word-break: break-word;",children:R(r,ue)})]}),e.jsxs(i.Box,{$align:"flex-start",$dir:"row",$display:"flex",$gap:16,sx:"margin: 8px 0px; position: relative;",children:[P?e.jsxs(i.Box,{$display:"flex",$align:"center",$justify:"space-between",$gap:6,sx:"margin-top: 8px; width: 100%;",children:[e.jsx(x.Emoticon,{color:"primary-blue-2",onClick:Me,size:24,sx:`cursor: pointer; flex-shrink: 0;\n ${!Q&&"margin-right: auto;"}\n `}),e.jsx(l.Button,{onClick:()=>{A&&A(!P),Pe(r)},sx:`background-color: transparent; border: none; box-shadow: none; color: var(--color-primary-blue-2);\n ${Q?"margin-left: 20px;":"margin-left: auto;"}\n &:hover, &:focus {\n border: none;\n outline: none;\n }\n `,size:"small",type:"outlined",children:"Cancel"}),e.jsx(l.Button,{onClick:()=>{S&&S(Ce,p),A&&A(!1)},size:"small",type:"primary",children:"Save"})]}):e.jsxs(e.Fragment,{children:[e.jsx(x.Emoticon,{color:"primary-blue-2",onClick:Me,size:24,sx:" cursor: pointer; flex-shrink: 0;"}),e.jsx(u.Comment,{color:"primary-blue-2",onClick:()=>{pe&&p?pe(de===p?"":p):be(e=>!e)},size:24,sx:"border-radius: 50%; cursor: pointer; flex-shrink: 0;"}),e.jsx(a.P,{$color:"grey-7",children:"•"}),e.jsx(a.P,{$color:"grey-4",$fontSize:12,$lineHeight:24,sx:"flex-shrink: 0;",children:Ue}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",marginLeft:"auto",width:"100%"},children:[e.jsxs(i.Box,{$display:"flex",$flow:"row wrap",$justify:"flex-end",$align:"flex-end",$gap:6,sx:` \n margin-left: auto;\n @media (max-width: 500px) {\n max-width: 100%;\n }\n ${Ge?.length?"margin-bottom: 12px;":""}\n `,children:[Ge,N]}),Z&&ne]})]}),ge&&e.jsx(c.Portal,{children:e.jsx(_,{$pickerOrientation:ye,$top:me.y,$left:me.x,children:e.jsx(j.CustomEmojiPicker,{open:ge,trigger:e.jsx(e.Fragment,{}),onSelect:({native:e})=>{b(e),fe(!1)},onClickOutside:()=>fe(!1)})})})]})]}),Fe&&we&&e.jsx(L,{children:Ne}),!we&&!d&&Fe&&e.jsx(L,{children:e.jsxs(M,{$hasLine:!1,children:[e.jsxs(l.Button,{onClick:Ae,size:"small",sx:"color: var(--color-grey-3);",type:"text",children:[Le.length," ",1===Le.length?"reply":"
|
|
73
|
+
`;exports.Comment=({avatarTooltipContent:t,avatarTooltipSx:n,content:r,createdDate:s,hasMoreReplies:d,id:p,onComment:$,onReact:b,latestReaction:w,onShowReplies:E,onEdit:S,isEditing:P,setIsEditing:A,dropdown:F,reactionModal:N,reactions:D,replies:H,userImageUri:O,userName:W,userReactions:V,visibilityIcon:X,customPlaceHolder:Y,userProfileUri:J,sx:K,moveButtonsToLeft:Q=!1,useNewVersion:Z=!1,onDelete:ee,visibility:te,shareDropdown:ne,belongsToLoggedUser:re=!1,disableRedirectionToUserProfile:oe=!1,replyAccountOptions:ie,selectedReplyAccount:se,onReplyAccountChange:ae,showAccountSelector:le=!1,accountSelectorSize:ce=32,activeReplyId:de,onReplyClick:pe,flatReplies:xe=!1,mentionMap:ue={},avatarInside:he=!1})=>{const[ge,fe]=k.default.useState(!1),[me,je]=k.default.useState({x:0,y:0}),[ye,ve]=k.default.useState("up"),[$e,be]=k.default.useState(!1),[we,Ee]=k.default.useState(!1),[ke,Se]=k.default.useState(""),[Ce,Pe]=k.default.useState(r),Re=k.default.useRef(null),[Ie,ze]=k.default.useState(!1),[Be,qe]=k.default.useState(!1),Te=window.innerWidth<=500,_e=de===p,Le=k.default.Children.toArray(H);k.default.useEffect(()=>{(P||Ie)&&Re.current&&Re.current.focus()},[P,Ie]);const Me=e=>{e.stopPropagation(),fe(e=>!e),je({y:e.clientY,x:e.clientX}),ve(e.clientY>400?"up":"down")},Ae=()=>{E&&E(),Ee(!0)},Ue=h.abbrTimeBeforeDate(s),Ge=D&&Object.entries(D).slice(0,5).sort((e,t)=>e[1]<t[1]?1:-1).map(([t,n])=>e.jsx(e.Fragment,{children:e.jsx(y.EmojiReaction,{size:16,emoji:t,isActive:V?.includes(t),onReact:()=>b(t),showSparkle:t===w,count:n,showCount:!0},p+t)})),Fe=!!Le?.length&&Le.length>0,Ne=Fe&&Le.map((t,n)=>{if(!k.default.isValidElement(t))return null;const r=t.props?.id,o=n!==Le.length-1||d;return xe?e.jsx(k.default.Fragment,{children:t},r):e.jsxs(M,{$hasLine:o,children:[t,e.jsx(U,{})]},r)});return e.jsxs(B,{$sx:K,id:"comment-"+p,$moveButtonsToLeft:Q,children:[!he&&(O&&"/images/default_avatar.png"!==O?e.jsx(o.Avatar,{as:oe?void 0:C.default,href:oe?void 0:J,image:O,size:32,tooltipContent:t,tooltipSx:n}):e.jsx(o.Avatar.Initials,{name:W||"U",size:32,sx:"font-size: 12px;"})),e.jsxs(i.Box,{$flex:1,$dir:"column",children:[e.jsxs(q,{$hasReplies:!xe&&(Fe||!!d),children:[P||Ie?e.jsx(g.ResponsiveTextArea,{inputStyles:"min-height: 104px;",wrapperStyles:"background:var(--color-grey-9); ",onChange:e=>{Pe(e.target.value)},value:Ce,ref:Re,onBlur:async()=>{Z&&(S&&await S(Ce,p),ze(!1))}}):e.jsxs(T,{onClick:()=>Z&&re?ze(!0):void 0,onMouseEnter:()=>qe(!0),onMouseLeave:()=>qe(!1),children:[e.jsxs(i.Box,{$dir:"row",$justify:"space-between",$align:"center",children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[he&&(O&&"/images/default_avatar.png"!==O?e.jsx(o.Avatar,{as:oe?void 0:C.default,href:oe?void 0:J,image:O,size:32,tooltipContent:t,tooltipSx:n}):e.jsx(o.Avatar.Initials,{name:W||"U",size:32,sx:"font-size: 12px;"})),e.jsx(a.P,{as:oe?void 0:J?C.default:"span",href:oe?void 0:J,$bold:!0,$color:"grey-2",sx:"text-decoration:none !important; color:var(--color-grey-2) !important;",$fontSize:14,$lineHeight:20,children:W}),Z&&te&&("PUBLIC_WITH_MEETING"===te?e.jsxs(e.Fragment,{children:[z.PUBLIC,e.jsx(a.P,{$fontSize:14,children:I.PUBLIC}),z.MEETING_MEMBERS,e.jsx(a.P,{$fontSize:14,children:I.MEETING_MEMBERS})]}):e.jsxs(e.Fragment,{children:[z[te],e.jsx(a.P,{$fontSize:14,children:I[te]})]}))]}),Z&&re?Te||Be?e.jsx(v.TrashSlash,{sx:"cursor: pointer;",onClick:e=>{e.stopPropagation(),e.preventDefault(),ee&&ee()}}):null:F]}),e.jsx(a.P,{sx:"white-space: pre-line;letter-spacing: -0.176px; word-break: break-word;",children:R(r,ue)})]}),e.jsxs(i.Box,{$align:"flex-start",$dir:"row",$display:"flex",$gap:16,sx:"margin: 8px 0px; position: relative;",children:[P?e.jsxs(i.Box,{$display:"flex",$align:"center",$justify:"space-between",$gap:6,sx:"margin-top: 8px; width: 100%;",children:[e.jsx(x.Emoticon,{color:"primary-blue-2",onClick:Me,size:24,sx:`cursor: pointer; flex-shrink: 0;\n ${!Q&&"margin-right: auto;"}\n `}),e.jsx(l.Button,{onClick:()=>{A&&A(!P),Pe(r)},sx:`background-color: transparent; border: none; box-shadow: none; color: var(--color-primary-blue-2);\n ${Q?"margin-left: 20px;":"margin-left: auto;"}\n &:hover, &:focus {\n border: none;\n outline: none;\n }\n `,size:"small",type:"outlined",children:"Cancel"}),e.jsx(l.Button,{onClick:()=>{S&&S(Ce,p),A&&A(!1)},size:"small",type:"primary",children:"Save"})]}):e.jsxs(e.Fragment,{children:[e.jsx(x.Emoticon,{color:"primary-blue-2",onClick:Me,size:24,sx:" cursor: pointer; flex-shrink: 0;"}),e.jsx(u.Comment,{color:"primary-blue-2",onClick:()=>{pe&&p?pe(de===p?"":p):be(e=>!e)},size:24,sx:"border-radius: 50%; cursor: pointer; flex-shrink: 0;"}),e.jsx(a.P,{$color:"grey-7",children:"•"}),e.jsx(a.P,{$color:"grey-4",$fontSize:12,$lineHeight:24,sx:"flex-shrink: 0;",children:Ue}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",marginLeft:"auto",width:"100%"},children:[e.jsxs(i.Box,{$display:"flex",$flow:"row wrap",$justify:"flex-end",$align:"flex-end",$gap:6,sx:` \n margin-left: auto;\n @media (max-width: 500px) {\n max-width: 100%;\n }\n ${Ge?.length?"margin-bottom: 12px;":""}\n `,children:[Ge,N]}),Z&&ne]})]}),ge&&e.jsx(c.Portal,{children:e.jsx(_,{$pickerOrientation:ye,$top:me.y,$left:me.x,children:e.jsx(j.CustomEmojiPicker,{open:ge,trigger:e.jsx(e.Fragment,{}),onSelect:({native:e})=>{b(e),fe(!1)},onClickOutside:()=>fe(!1)})})})]})]}),Fe&&we&&e.jsx(L,{children:Ne}),!we&&!d&&Fe&&e.jsx(L,{children:e.jsxs(M,{$hasLine:!1,children:[e.jsxs(l.Button,{onClick:Ae,size:"small",sx:"color: var(--color-grey-3); margin-left: 24px;",type:"text",children:[Le.length," ",1===Le.length?"reply":"replies"]}),e.jsx(U,{})]})}),d&&e.jsx(L,{children:e.jsxs(M,{$hasLine:!1,children:[e.jsxs(l.Button,{onClick:Ae,size:"small",sx:"color: var(--color-grey-3); margin-left: 24px;",type:"text",children:[Le.length," ",1===Le.length?"reply":"replies"]}),e.jsx(U,{})]})}),(_e||$e)&&e.jsxs(G,{children:[le&&ie&&ae?e.jsx(m.AccountSelector,{selectedOption:se??null,options:ie,onOptionChange:ae,size:ce,showChevron:ie.length>1}):O&&"/images/default_avatar.png"!==O?e.jsx(o.Avatar,{as:oe?void 0:C.default,href:oe?void 0:J,image:O,size:32,tooltipContent:t,tooltipSx:n}):e.jsx(o.Avatar.Initials,{name:W||"U",size:32,sx:"font-size: 12px;"}),e.jsx(g.ResponsiveTextArea,{bg:"var(--color-grey-10)",value:ke,onChange:e=>{Se(e.target.value)},placeholder:Y||"Write a reply",maxCharacters:1e3,minWidth:"100%",wrapperStyles:"margin: 16px 0; width: 100%;",actionComponent:e.jsxs(i.Box,{sx:"margin: auto 0 5px 0px;",$align:"center",$justify:"center",$gap:8,children:[X,e.jsx(l.Button,{disabled:!ke.length,icon:e.jsx(f.SendText,{}),onClick:e=>{e.stopPropagation(),e.preventDefault(),$(ke,p),Se("")},sx:"\n justify-content: center; \n background-color: var(--color-primary-blue-2);\n align-items: center; \n height: 40px;\n width: 40px;\n cursor: pointer;\n border: none;\n box-shadow: none;\n svg {\n fill: white;\n }\n &:disabled {\n svg {\n fill: var(--color-grey-7);\n }\n border: none !important;\n background-color: var(--color-grey-1);\n }\n ",type:"secondary"})]}),inputStyles:"font-size: 14px;"})]})]})]})};
|