@soul-refiner/design-system 2.14.5 → 2.14.7
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,4 +1,4 @@
|
|
|
1
|
-
"use strict";var React=require("react"),constants=require("./constants.js"),styled=require("styled-components");function _interopDefaultCompat(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled);const SPARKLE_COUNT=25,RING_COUNT=3,ReactionEmoji=({size:
|
|
1
|
+
"use strict";var React=require("react"),constants=require("./constants.js"),styled=require("styled-components");function _interopDefaultCompat(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled);const SPARKLE_COUNT=25,RING_COUNT=3,ReactionEmoji=({size:c=20,sparkleOnMount:e=!1,coordinates:t})=>{const[a,n]=React__default.default.useState([]),[o,r]=React__default.default.useState([]),[s,l]=React__default.default.useState(!1);var i;return React__default.default.useEffect(()=>{let t;return e&&(l(!0),n((()=>{var e=[];for(let t=0;t<SPARKLE_COUNT;t++){var a=5*Math.random()+6,n=c/2-a/2,o=c/2-a/2,r=constants.RAINBOW_COLORS[Math.floor(Math.random()*constants.RAINBOW_COLORS.length)],s=2*Math.random()*Math.PI,l=c*(.7+.8*Math.random()),i=Math.cos(s)*l,s=Math.sin(s)*l,l=720*Math.random()*(.5<Math.random()?1:-1),d=+Math.random()+.2,n={left:n+"px",top:o+"px",width:a+"px",height:a+"px",backgroundColor:r,animation:`sparkle-fly ${.7+.6*Math.random()}s cubic-bezier(0.1, 0.8, 0.2, 1) forwards`,animationDelay:.2*Math.random()+"s","--tx":i+"px","--ty":s+"px","--rotation":l+"deg","--scale":""+d};e.push(React__default.default.createElement("div",{key:"sparkle-"+t,className:"sparkle star",style:n}))}return e})()),r((()=>{var e=[];for(let t=0;t<RING_COUNT;t++){var a=constants.RAINBOW_COLORS[Math.floor(Math.random()*constants.RAINBOW_COLORS.length)],n=constants.RAINBOW_COLORS[Math.floor(Math.random()*constants.RAINBOW_COLORS.length)],o=constants.RAINBOW_COLORS[Math.floor(Math.random()*constants.RAINBOW_COLORS.length)],a={width:.7*c+"px",height:.7*c+"px",border:"10px solid transparent",borderImage:`linear-gradient(to right, ${a}, ${n}, ${o}) 1`,animation:`ring-expand ${.8+.2*t}s ease-out forwards`,animationDelay:.2*t+"s"};e.push(React__default.default.createElement("div",{key:"ring-"+t,className:"sparkle-ring",style:a}))}return e})()),t=setTimeout(()=>{n([]),r([]),l(!1)},1200)),()=>clearTimeout(t)},[e]),t?(i=t.x/(constants.SPRITE_COLUMNS-1)*100,t=t.y/(constants.SPRITE_COLUMNS-1)*100,React__default.default.createElement(ReactionContainer,{$width:c,$height:c},React__default.default.createElement("div",{className:"reaction-flash "+(s?"active":"")}),React__default.default.createElement("div",{style:{overflow:"hidden"}},React__default.default.createElement("div",{className:"reaction-emoji "+(s?"active":""),style:{width:c,height:c,backgroundImage:`url(${constants.SPRITE_URL})`,backgroundSize:`${constants.SPRITE_SIZE*constants.SPRITE_COLUMNS}% ${constants.SPRITE_SIZE*constants.SPRITE_COLUMNS}%`,backgroundPosition:i+`% ${t}%`}})),React__default.default.createElement("div",{className:"sparkle-container"},a,o))):null},ReactionContainer=styled__default.default.div`
|
|
2
2
|
width: ${({$width:t})=>t+"px"};
|
|
3
3
|
height: ${({$height:t})=>t+"px"};
|
|
4
4
|
position: relative;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),styled=require("styled-components"),Link=require("next/link"),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"),emojiPicker=(require("../../actions/dropdown/dropdown.js"),require("../../actions/rate/rate.js"),require("../../actions/switch/switch.js"),require("../../actions/toggle/toggle.js"),require("../../actions/upload/upload.js"),require("../../atoms/typography/display.js"),require("../../atoms/typography/heading.js"),require("../../atoms/typography/typography.js"),require("../../card/action/action.js"),require("../../card/audio/audio.js"),require("../../card/feature/feature.js"),require("../../card/person/person.js"),require("../../card/price/price.js"),require("../../card/regular/regular.js"),require("../../card/video/video.js"),require("../../card/written/written.js"),require("../../card/meeting/meeting.js"),require("../../editor/editor.js"),require("../../editor/simple_editor/simple_editor.js"),require("../../feedback/badge/badge.js"),require("../../feedback/banner/banner.js"),require("../../feedback/loader/loader.js"),require("../../feedback/notification/notification.js"),require("../../feedback/progress/progress.js"),require("../../feedback/toast/toast.js"),require("react-tooltip"),require("../../feedback/animated_toast/animated_toast.js"),require("../../feedback/emojiPicker/emoji-picker.js")),emojiReactions=require("../../feedback/emojiPicker/emoji-reactions.js")
|
|
3
|
-
${!
|
|
4
|
-
`}),React__default.default.createElement(button.Button,{onClick:()=>{p&&p(!c),
|
|
5
|
-
${
|
|
2
|
+
"use strict";var React=require("react"),styled=require("styled-components"),Link=require("next/link"),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"),emojiPicker=(require("../../actions/dropdown/dropdown.js"),require("../../actions/rate/rate.js"),require("../../actions/switch/switch.js"),require("../../actions/toggle/toggle.js"),require("../../actions/upload/upload.js"),require("../../atoms/typography/display.js"),require("../../atoms/typography/heading.js"),require("../../atoms/typography/typography.js"),require("../../card/action/action.js"),require("../../card/audio/audio.js"),require("../../card/feature/feature.js"),require("../../card/person/person.js"),require("../../card/price/price.js"),require("../../card/regular/regular.js"),require("../../card/video/video.js"),require("../../card/written/written.js"),require("../../card/meeting/meeting.js"),require("../../editor/editor.js"),require("../../editor/simple_editor/simple_editor.js"),require("../../feedback/badge/badge.js"),require("../../feedback/banner/banner.js"),require("../../feedback/loader/loader.js"),require("../../feedback/notification/notification.js"),require("../../feedback/progress/progress.js"),require("../../feedback/toast/toast.js"),require("react-tooltip"),require("../../feedback/animated_toast/animated_toast.js"),require("../../feedback/emojiPicker/emoji-picker.js")),emojiReactions=require("../../feedback/emojiPicker/emoji-reactions.js"),eye=(require("../../iconography/icon/icon.js"),require("../../input/checkbox/checkbox.js"),require("../../input/date/date.js"),require("../../input/filter/filter.js"),require("../../input/radio/radio.js"),require("../../input/search/search.js"),require("../../input/select/select.js"),require("../../input/text_area/text_area.js"),require("../../input/text_input/text_input.js"),require("../../input/calendar/calendar.js"),require("../../input/time/time.js"),require("@mui/x-date-pickers/LocalizationProvider"),require("@mui/x-date-pickers/AdapterDateFnsV3"),require("@mui/x-date-pickers/TimeField"),require("../../media/audio-player/audio-player.js"),require("../../media/audio-playlist/audio-playlist.js"),require("../../media/audio-preview/audio-preview.js"),require("react-player"),require("next/image"),require("../../media/video-player/video.js"),require("../../media/audio-playlist/playing_indicator.js"),require("../../navigation/breadcrumb/breadcrumb.js"),require("../../navigation/inner/inner.js"),require("../../navigation/tabs/tabs.js"),require("../accordion/accordion.js"),require("../carousel/card/card.js"),require("../discuss_post/discuss_post.js"),require("../drawer/drawer.js"),require("../message/message.js"),require("../modal/modal.js"),require("../post/post.js"),require("../calendar_date/calendar_date.js"),require("../../table/table/table.js"),require("../../custom/users_selection/users_selection.js"),require("../../custom/courses_selection/courses_selection.js"),require("../../../icons/basic/eye.js")),trash_slash=(require("../../../icons/basic/subtask.js"),require("../../../icons/basic/trash_slash.js")),lock=require("../../../icons/security/lock.js"),calendar_dates=(require("../../../common/colors.js"),require("../../../icons/time/calendar_dates.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);const MAX_REACTIONS_SHOWN=5,visibilityMapping={PRIVATE:"Private",MEETING_MEMBERS:"Meeting",PUBLIC:"Public",PUBLIC_WITH_MEETING:""},visibilityIcons={PRIVATE:React__default.default.createElement(lock.Lock,null),MEETING_MEMBERS:React__default.default.createElement(calendar_dates.CalendarDates,null),PUBLIC:React__default.default.createElement(eye.Eye,null),PUBLIC_WITH_MEETING:React__default.default.createElement(React__default.default.Fragment,null)},Comment=({avatarTooltipContent:e,avatarTooltipSx:t,content:a,createdDate:r,hasMoreReplies:l,id:i,onComment:o,onReact:n,latestReaction:u,onShowReplies:s,onEdit:d,isEditing:c,setIsEditing:p,dropdown:f,reactionModal:_,reactions:m,replies:g,userImageUri:x,userName:L,userReactions:W,visibilityIcon:z,customPlaceHolder:N,userProfileUri:y,sx:A,moveButtonsToLeft:R=!1,useNewVersion:b=!1,onDelete:D,visibility:h,shareDropdown:U})=>{const[j,E]=React__default.default.useState(!1),[q,H]=React__default.default.useState({x:0,y:0}),[F,G]=React__default.default.useState("up"),[O,V]=React__default.default.useState(!1),[v,X]=React__default.default.useState(!1),[k,$]=React__default.default.useState(""),[w,C]=React__default.default.useState(a),S=React__default.default.useRef(null),[I,P]=React__default.default.useState(!1),B=React__default.default.Children.toArray(g);React__default.default.useEffect(()=>{(c||I)&&S.current&&S.current.focus()},[c,I]);var g=e=>{e.stopPropagation(),E(e=>!e),H({y:e.clientY,x:e.clientX}),G(400<e.clientY?"up":"down")},T=()=>{s&&s(),X(!0)},r=helpers.abbrTimeBeforeDate(r),m=m&&Object.entries(m).slice(0,MAX_REACTIONS_SHOWN).sort((e,t)=>e[1]<t[1]?1:-1).map(([e,t])=>React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(emojiReactions.EmojiReaction,{key:i+e,emoji:e,isActive:W?.includes(e),onReact:()=>n(e),showSparkle:e===u,count:t,showCount:!0}))),M=!!B?.length&&0<B.length,Y=M&&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:A,id:"comment-"+i,$moveButtonsToLeft:R},React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:y,image:x,size:32,tooltipContent:e,tooltipSx:t}),React__default.default.createElement(box.Box,{$flex:1,$dir:"column"},React__default.default.createElement(ContentWrapper,{$hasReplies:M||!!l},c||I?React__default.default.createElement(responsive_text_area.ResponsiveTextArea,{inputStyles:"min-height: 104px;",wrapperStyles:"background:var(--color-grey-9); ",onChange:e=>{C(e.target.value)},value:w,ref:S,onBlur:async()=>{b&&(d&&await d(w,i),P(!1))}}):React__default.default.createElement(CommentBox,{onClick:()=>b?P(!0):void 0},React__default.default.createElement(box.Box,{$dir:"row",$justify:"space-between",$align:"center"},React__default.default.createElement("div",{style:{display:"flex",alignItems:"center",gap:8}},React__default.default.createElement(paragraph.P,{as:y?Link__default.default:"span",href:y,$bold:!0,$color:"grey-2",sx:"text-decoration:none !important; color:var(--color-grey-2) !important;",$fontSize:14,$lineHeight:20},L),b&&h&&("PUBLIC_WITH_MEETING"===h?React__default.default.createElement(React__default.default.Fragment,null,visibilityIcons.PUBLIC,React__default.default.createElement(paragraph.P,{$fontSize:14},visibilityMapping.PUBLIC),visibilityIcons.MEETING_MEMBERS,React__default.default.createElement(paragraph.P,{$fontSize:14},visibilityMapping.MEETING_MEMBERS)):React__default.default.createElement(React__default.default.Fragment,null,visibilityIcons[h],React__default.default.createElement(paragraph.P,{$fontSize:14},visibilityMapping[h])))),b?React__default.default.createElement(trash_slash.TrashSlash,{sx:"cursor: pointer;",onClick:D}):f),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:g,size:24,sx:`cursor: pointer; flex-shrink: 0;
|
|
3
|
+
${!R&&"margin-right: auto;"}
|
|
4
|
+
`}),React__default.default.createElement(button.Button,{onClick:()=>{p&&p(!c),C(a)},sx:`background-color: transparent; border: none; box-shadow: none; color: var(--color-primary-blue-2);
|
|
5
|
+
${R?"margin-left: 20px;":"margin-left: auto;"}
|
|
6
6
|
&:hover, &:focus {
|
|
7
7
|
border: none;
|
|
8
8
|
outline: none;
|
|
9
9
|
}
|
|
10
|
-
`,size:"small",type:"outlined"},"Cancel"),React__default.default.createElement(button.Button,{onClick:()=>{d&&d(
|
|
10
|
+
`,size:"small",type:"outlined"},"Cancel"),React__default.default.createElement(button.Button,{onClick:()=>{d&&d(w,i),p&&p(!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:g,size:24,sx:" cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(comment.Comment,{color:"primary-blue-2",onClick:()=>V(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;"},m,_)),j&&React__default.default.createElement(portal.Portal,null,React__default.default.createElement(PickerWrapper,{$pickerOrientation:F,$top:q.y,$left:q.x},React__default.default.createElement(emojiPicker.CustomEmojiPicker,{open:j,trigger:React__default.default.createElement(React__default.default.Fragment,null),onSelect:({native:e})=>{n(e),E(!1)},onClickOutside:()=>E(!1)})))),b&&U),M&&v&&React__default.default.createElement(RepliesWrapper,null,Y),!v&&!l&&M&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:T,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:T,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show more replies"),React__default.default.createElement(ReplyIndicator,null))),O&&React__default.default.createElement(CommentWrapper,null,React__default.default.createElement(responsive_text_area.ResponsiveTextArea,{bg:"var(--color-grey-10)",value:k,onChange:e=>{$(e.target.value)},placeholder:N||"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},z,React__default.default.createElement(button.Button,{disabled:!k.length,icon:React__default.default.createElement(send_text.SendText,null),onClick:e=>{e.stopPropagation(),e.preventDefault(),o(k),$("")},sx:`
|
|
11
11
|
justify-content: center;
|
|
12
12
|
background-color: var(--color-primary-blue-2);
|
|
13
13
|
align-items: center;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
type Visibility = 'PUBLIC' | 'PRIVATE' | 'MEETING_MEMBERS' | 'PUBLIC_WITH_MEETING';
|
|
2
3
|
export interface CommentProps {
|
|
3
4
|
avatarTooltipContent?: React.ReactElement;
|
|
4
5
|
avatarTooltipSx?: string;
|
|
@@ -27,5 +28,10 @@ export interface CommentProps {
|
|
|
27
28
|
userProfileUri: string;
|
|
28
29
|
sx?: string;
|
|
29
30
|
moveButtonsToLeft?: boolean;
|
|
31
|
+
useNewVersion?: boolean;
|
|
32
|
+
onDelete?: () => void;
|
|
33
|
+
visibility?: Visibility;
|
|
34
|
+
shareDropdown?: React.ReactElement;
|
|
30
35
|
}
|
|
31
|
-
export declare const Comment: ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, latestReaction, onShowReplies, onEdit, isEditing, setIsEditing, dropdown, reactionModal, reactions, replies, userImageUri, userName, userReactions, visibilityIcon, customPlaceHolder, userProfileUri, sx, moveButtonsToLeft, }: CommentProps) => React.JSX.Element;
|
|
36
|
+
export declare const Comment: ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, latestReaction, onShowReplies, onEdit, isEditing, setIsEditing, dropdown, reactionModal, reactions, replies, userImageUri, userName, userReactions, visibilityIcon, customPlaceHolder, userProfileUri, sx, moveButtonsToLeft, useNewVersion, onDelete, visibility, shareDropdown, }: CommentProps) => React.JSX.Element;
|
|
37
|
+
export {};
|