@soul-refiner/design-system 2.13.4 → 2.13.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,5 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),styled=require("styled-components"),Link=require("next/link"),Picker=require("@emoji-mart/react"),emojis=require("../../../emoji/emojis.json.js"),avatar=require("../../iconography/avatar/avatar.js"),box=require("../../atoms/box/box.js"),highlighter=require("../../atoms/highlighter/highlighter.js"),paragraph=require("../../atoms/typography/paragraph.js"),button=require("../../actions/button/button.js"),portal=require("../portal/portal.js"),regex=require("../../../common/regex.js"),styles=require("../../../common/styles.js"),emoticon_add=require("../../../icons/basic/emoticon_add.js"),comment=require("../../../icons/message/comment.js"),helpers=require("./helpers.js"),responsive_text_area=require("../../input/responsive-text_area/responsive_text_area.js"),send_text=require("../../../icons/email/send_text.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled),Link__default=_interopDefaultCompat(Link),Picker__default=_interopDefaultCompat(Picker);const MAX_REACTIONS_SHOWN=5,Comment=({avatarTooltipContent:e,avatarTooltipSx:t,content:a,createdDate:r,hasMoreReplies:l,id:o,onComment:n,onReact:i,onShowReplies:
|
|
2
|
+
"use strict";var React=require("react"),styled=require("styled-components"),Link=require("next/link"),Picker=require("@emoji-mart/react"),emojis=require("../../../emoji/emojis.json.js"),avatar=require("../../iconography/avatar/avatar.js"),box=require("../../atoms/box/box.js"),highlighter=require("../../atoms/highlighter/highlighter.js"),paragraph=require("../../atoms/typography/paragraph.js"),button=require("../../actions/button/button.js"),portal=require("../portal/portal.js"),regex=require("../../../common/regex.js"),styles=require("../../../common/styles.js"),emoticon_add=require("../../../icons/basic/emoticon_add.js"),comment=require("../../../icons/message/comment.js"),helpers=require("./helpers.js"),responsive_text_area=require("../../input/responsive-text_area/responsive_text_area.js"),send_text=require("../../../icons/email/send_text.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled),Link__default=_interopDefaultCompat(Link),Picker__default=_interopDefaultCompat(Picker);const MAX_REACTIONS_SHOWN=5,Comment=({avatarTooltipContent:e,avatarTooltipSx:t,content:a,createdDate:r,hasMoreReplies:l,id:o,onComment:n,onReact:i,onShowReplies:u,onEdit:d,isEditing:c,setIsEditing:s,dropdown:p,reactionModal:f,reactions:_,replies:m,userImageUri:x,userName:g,userReactions:R,visibilityIcon:h,customPlaceHolder:y,userProfileUri:b,sx:v,moveButtonsToLeft:$=!1})=>{const[E,k]=React__default.default.useState(!1),[C,T]=React__default.default.useState({x:0,y:0}),[I,A]=React__default.default.useState("up"),[D,O]=React__default.default.useState(!1),[w,H]=React__default.default.useState(!1),[j,S]=React__default.default.useState(""),[q,P]=React__default.default.useState(a),W=React__default.default.useRef(null),B=React__default.default.Children.toArray(m);React__default.default.useEffect(()=>{c&&W.current&&W.current.focus()},[c]);var m=e=>{e.stopPropagation(),k(e=>!e),T({y:e.clientY,x:e.clientX}),A(400<e.clientY?"up":"down")},L=()=>{u&&u(),H(!0)},r=helpers.abbrTimeBeforeDate(r),_=_&&Object.entries(_).slice(0,MAX_REACTIONS_SHOWN).sort((e,t)=>e[1]<t[1]?1:-1).map(e=>React__default.default.createElement(Reaction,{key:o+e[0],onClick:()=>i(e[0]),$align:"center",$dir:"row",$gap:5,$userSelected:R?.includes(e[0])},e[0],React__default.default.createElement(paragraph.P,{$bold:!0,$fontSize:10,$lineHeight:14},e[1]))),z=!!B?.length&&0<B.length,N=z&&B.map((e,t)=>{var a;return React__default.default.isValidElement(e)?(a=e.props?.id,t=t!==B.length-1||l,React__default.default.createElement(ReplyWrapper,{$hasLine:t,key:a},e,React__default.default.createElement(ReplyIndicator,null))):null});return React__default.default.createElement(Wrapper,{$sx:v,id:"comment-"+o,$moveButtonsToLeft:$},React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:b,image:x,size:32,tooltipContent:e,tooltipSx:t}),React__default.default.createElement(box.Box,{$flex:1,$dir:"column"},React__default.default.createElement(ContentWrapper,{$hasReplies:z||!!l},c?React__default.default.createElement(responsive_text_area.ResponsiveTextArea,{inputStyles:"min-height: 104px;",wrapperStyles:"background:var(--color-grey-9); ",onChange:e=>{P(e.target.value)},value:q,ref:W}):React__default.default.createElement(CommentBox,null,React__default.default.createElement(box.Box,{$dir:"row",$justify:"space-between",$align:"center"},React__default.default.createElement(paragraph.P,{as:b?Link__default.default:"span",href:b,$bold:!0,$color:"grey-2",sx:"text-decoration:none !important; color:var(--color-grey-2) !important;",$fontSize:14,$lineHeight:20},g),p),React__default.default.createElement(paragraph.P,{sx:"white-space: pre-line;letter-spacing: -0.176px; word-break: break-word;"},React__default.default.createElement(highlighter.Highlighter,{highlightRender:e=>React__default.default.createElement(paragraph.P,{as:"span",$color:"primary-blue-2"},React__default.default.createElement(Link__default.default,{href:e,target:"_blank"},e)),seperator:regex.URL_REGEX,text:a}))),React__default.default.createElement(box.Box,{$align:"flex-start",$dir:"row",$display:"flex",$gap:16,sx:"margin: 8px 0px; position: relative;"},c?React__default.default.createElement(box.Box,{$display:"flex",$align:"center",$justify:"space-between",$gap:6,sx:"margin-top: 8px; width: 100%;"},React__default.default.createElement(emoticon_add.Emoticon,{color:"primary-blue-2",onClick:m,size:24,sx:`cursor: pointer; flex-shrink: 0;
|
|
3
|
+
${!$&&"margin-right: auto;"}
|
|
4
|
+
`}),React__default.default.createElement(button.Button,{onClick:()=>{s&&s(!c),P(a)},sx:`background-color: transparent; border: none; box-shadow: none; color: var(--color-primary-blue-2);
|
|
5
|
+
${$?"margin-left: 20px;":"margin-left: auto;"}
|
|
6
|
+
&:hover, &:focus {
|
|
7
|
+
border: none;
|
|
8
|
+
outline: none;
|
|
9
|
+
}
|
|
10
|
+
`,size:"small",type:"outlined"},"Cancel"),React__default.default.createElement(button.Button,{onClick:()=>{d&&d(q,o),s&&s(!1)},size:"small",type:"primary"},"Save")):React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(emoticon_add.Emoticon,{color:"primary-blue-2",onClick:m,size:24,sx:" cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(comment.Comment,{color:"primary-blue-2",onClick:()=>O(e=>!e),size:24,sx:"border-radius: 50%; cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(paragraph.P,{$color:"grey-7"},"•"),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:24,sx:"flex-shrink: 0;"},r),React__default.default.createElement(box.Box,{$display:"flex",$flow:"row wrap",$gap:6,sx:"max-width: calc(100% - 190px); margin-left: auto;"},_,f)),E&&React__default.default.createElement(portal.Portal,null,React__default.default.createElement(PickerWrapper,{$pickerOrientation:I,$top:C.y,$left:C.x},React__default.default.createElement(Picker__default.default,{data:emojis.default,onEmojiSelect:({native:e})=>{i(e),k(!1)},onClickOutside:()=>k(!1),maxFrequentRows:1,navPosition:"none",previewPosition:"none",perLine:9,theme:"auto"}))))),z&&w&&React__default.default.createElement(RepliesWrapper,null,N),!w&&!l&&z&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:L,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show replies"),React__default.default.createElement(ReplyIndicator,null))),l&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:L,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show more replies"),React__default.default.createElement(ReplyIndicator,null))),D&&React__default.default.createElement(CommentWrapper,null,React__default.default.createElement(responsive_text_area.ResponsiveTextArea,{bg:"var(--color-grey-10)",value:j,onChange:e=>{S(e.target.value)},placeholder:y||"Write a reply",maxCharacters:1e3,wrapperStyles:"margin: 16px 0; width: 100%;",actionComponent:React__default.default.createElement(box.Box,{sx:"margin: auto 0 5px 0px;",$align:"center",$justify:"center",$gap:8},h,React__default.default.createElement(button.Button,{disabled:!j.length,icon:React__default.default.createElement(send_text.SendText,null),onClick:e=>{e.stopPropagation(),e.preventDefault(),n(j),S("")},sx:`
|
|
3
11
|
justify-content: center;
|
|
4
12
|
background-color: var(--color-primary-blue-2);
|
|
5
13
|
align-items: center;
|
|
@@ -24,9 +32,10 @@
|
|
|
24
32
|
flex-direction: row;
|
|
25
33
|
align-items: flex-start;
|
|
26
34
|
gap: 12px;
|
|
27
|
-
justify-content: space-between;
|
|
28
35
|
position: relative;
|
|
29
36
|
${({$sx:e})=>e||""}
|
|
37
|
+
|
|
38
|
+
${({$moveButtonsToLeft:e})=>e?"justify-content: flex-start;":"justify-content: space-between;"}
|
|
30
39
|
`,ContentWrapper=styled__default.default.div`
|
|
31
40
|
display: flex;
|
|
32
41
|
word-break: break-word;
|
|
@@ -24,5 +24,6 @@ export interface CommentProps {
|
|
|
24
24
|
userReactions?: string[];
|
|
25
25
|
userProfileUri: string;
|
|
26
26
|
sx?: string;
|
|
27
|
+
moveButtonsToLeft?: boolean;
|
|
27
28
|
}
|
|
28
|
-
export declare const Comment: ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, onEdit, isEditing, setIsEditing, dropdown, reactionModal, reactions, replies, userImageUri, userName, userReactions, visibilityIcon, customPlaceHolder, userProfileUri, sx, }: CommentProps) => React.JSX.Element;
|
|
29
|
+
export declare const Comment: ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, onEdit, isEditing, setIsEditing, dropdown, reactionModal, reactions, replies, userImageUri, userName, userReactions, visibilityIcon, customPlaceHolder, userProfileUri, sx, moveButtonsToLeft, }: CommentProps) => React.JSX.Element;
|