@soul-refiner/design-system 2.13.3 → 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,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),checkmark_circle=require("../../../icons/basic/checkmark_circle.js"),alert_circle=require("../../../icons/notifications/alert_circle.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const TextArea=({bg:e="var(--color-blue-10)",disabled:r,helperText:t,icon:
|
|
2
|
+
"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),checkmark_circle=require("../../../icons/basic/checkmark_circle.js"),alert_circle=require("../../../icons/notifications/alert_circle.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const TextArea=({bg:e="var(--color-blue-10)",disabled:r,helperText:t,icon:a,label:l,maxCharacters:o,minHeight:n,minWidth:i,name:c,onChange:d,placeholder:s,resize:u=!1,successful:f,sx:p,value:x,warning:m})=>{const g=React__default.default.useRef(null);return React__default.default.useEffect(()=>{var e;g.current&&(g.current.style.height=n+"px",e=g.current.scrollHeight,g.current.style.height=e+"px")},[g.current,x]),React__default.default.createElement(Label,{$disabled:r,$sx:p},l,React__default.default.createElement(InputWrapper,{$bg:e,$minWidth:i,$successful:f,$warning:m},a,React__default.default.createElement(TextAreaElement,{disabled:r,name:c,onChange:d,placeholder:s,ref:g,value:"string"==typeof x?o?x.slice(0,o):x:"",$minHeight:n,$resize:u}),f&&React__default.default.createElement(checkmark_circle.CheckmarkCircle,{color:"green-3"}),m&&React__default.default.createElement(alert_circle.AlertCircle,{color:"red-4"})),React__default.default.createElement(box.Box,{$gap:16,$justify:"space-between"},t&&React__default.default.createElement(HelperText,null,t),o&&React__default.default.createElement(MaxCharactersText,null,x?.length??0," / ",o)))},Label=styled.styled.label`
|
|
3
3
|
width: 100%;
|
|
4
4
|
display: flex;
|
|
5
5
|
gap: 4px;
|
|
@@ -41,6 +41,10 @@
|
|
|
41
41
|
|
|
42
42
|
${({$successful:e})=>e?"border-color: var(--color-green-3) !important;":""}
|
|
43
43
|
${({$warning:e})=>e?"border-color: var(--color-red-4) !important;":""}
|
|
44
|
+
|
|
45
|
+
@media screen and (max-width: 500px) {
|
|
46
|
+
min-width: unset;
|
|
47
|
+
}
|
|
44
48
|
`,TextAreaElement=styled.styled.textarea`
|
|
45
49
|
min-width: ${({$minHeight:e})=>e?e-24+"px;":""};
|
|
46
50
|
padding: 0px;
|
|
@@ -59,6 +63,10 @@
|
|
|
59
63
|
}
|
|
60
64
|
|
|
61
65
|
${({$resize:e})=>e?"":"resize: none;"}
|
|
66
|
+
|
|
67
|
+
@media screen and (max-width: 500px) {
|
|
68
|
+
min-width: unset;
|
|
69
|
+
}
|
|
62
70
|
`,HelperText=styled.styled.p`
|
|
63
71
|
color: var(--color-grey-4);
|
|
64
72
|
font-family: var(--font-inter);
|
|
@@ -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;
|