@soul-refiner/design-system 2.14.7 → 2.14.9
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"),checkbox=require("../../input/checkbox/checkbox.js"),paragraph=require("../../atoms/typography/paragraph.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Dropdown=({checkbox:l,children:e,closeOnChange:a=!0,closeOnBlur:t=!0,defaultValue:
|
|
2
|
+
"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),checkbox=require("../../input/checkbox/checkbox.js"),radio=require("../../input/radio/radio.js"),paragraph=require("../../atoms/typography/paragraph.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Dropdown=({checkbox:l,radio:o,children:e,closeOnChange:a=!0,closeOnBlur:t=!0,defaultValue:r="",disabled:d=!1,hasArrow:n,maintainState:i=!0,isButtonTrigger:c=!1,multiple:u,offset:s=[0,16],onChange:p,open:f="right",options:x,sx:_,trigger:h,containerSx:g,additionalOptions:$,additionalOnChange:b,defaultAdditionalValue:v,useFullWidth:y=!1,...m})=>{const k=React__default.default.useId(),R=React__default.default.useRef(null);var C=React__default.default.useRef(null);const[w,E]=React__default.default.useState(!1),[S,O]=React__default.default.useState(()=>r||(u?[]:"")),[D,A]=React__default.default.useState(v||"");React__default.default.useEffect(()=>{d&&E(!1)},[d]);v=()=>{d||E(e=>!e)};const W=u?e=>{e.stopPropagation();const t=e.target.getAttribute("data-value")??"";Array.isArray(S)&&S.includes(t)?O(e=>e.filter(e=>e!==t)):O(e=>[t,...e]),a&&E(!1),p&&p(e)}:e=>{e.stopPropagation();var t=e.target.getAttribute("data-value")??"";S!==t?O(t):O(""),a&&E(!1),p&&p(e)},B=e=>{e.stopPropagation();e=e.target.getAttribute("data-value")??"";D!==e?A(e):A(""),b&&b(e)},q=e=>i&&(u?S.includes(e):e===S);let j=null;e&&(j=React__default.default.Children.map(e,e=>{if(React__default.default.isValidElement(e)){const{onClick:t,...a}=e.props;return e=a,React__default.default.createElement(Option,{key:e.value,checkbox:!!l,onClick:W,selected:q(e.value),radio:!!o,...e})}return null})),x&&(j=x.map((e,t)=>"string"==typeof e&&"break"===e?React__default.default.createElement(Spacer,{key:k+"-spacer-"+t}):React__default.default.createElement(Option,{key:e.value,checkbox:!!l,radio:!!o,onClick:W,selected:q(e.value),...e})));e=React__default.default.cloneElement(h,c||"Button"===h.type?.displayName||"Button"===h.type?.name?{isDropdownOpen:w,onClick:v}:{onClick:v});return React__default.default.createElement(Wrapper,{$sx:_,tabIndex:0,ref:R,onBlurCapture:e=>{t&&R?.current&&!R?.current?.contains(e.relatedTarget)&&E(!1)},...m},e,w&&React__default.default.createElement(Container,{$hasArrow:n,$offset:s,$openDirection:f,ref:C,$sx:g,$useFullWidth:y},React__default.default.createElement("div",{style:{display:"flex"}},React__default.default.createElement("div",{style:{display:"flex",flexDirection:"column",width:"100%"}},j),!!$?.length&&React__default.default.createElement("div",{style:{display:"flex",flexDirection:"column"}},$.map(e=>React__default.default.createElement(Option,{key:e.value,onClick:B,selected:D===e.value,label:e.label,value:e.value}))))))},Wrapper=styled.styled.div`
|
|
3
3
|
position: relative;
|
|
4
4
|
display: block;
|
|
5
5
|
outline: none;
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
}
|
|
39
39
|
`:""}
|
|
40
40
|
${({$offset:e})=>e?`transform: translate(${e[0]}px, ${e[1]}px);`:""}
|
|
41
|
-
`,Option=({checkbox:e,
|
|
41
|
+
`,Option=({checkbox:e,radio:t,disabled:a,icon:l,label:o,onClick:r,selected:d,sublabel:n,sx:i,value:c,color:u})=>React__default.default.createElement(OptionWrapper,{"data-value":c,onClick:a?void 0:r,$disabled:a,$hasCheckbox:!!e,$hasRadio:!!t,$hasSublabel:!!n,$selected:d,$sx:i},e?React__default.default.createElement(checkbox.Checkbox,{selected:d}):t?React__default.default.createElement(radio.Radio,{checked:d,value:""}):l,React__default.default.createElement(box.Box,{$dir:"column",$display:"flex"},o&&React__default.default.createElement(paragraph.P,{$color:u||"grey-4",$fontSize:14,$lineHeight:20,$mediumBold:!0,$textClampLines:1},o),n&&React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:16,$textClampLines:1},n))),OptionWrapper=(Option.displayName="Dropdown.Option",Dropdown.Option=Option,styled.styled.div`
|
|
42
42
|
position: relative;
|
|
43
43
|
z-index: 1;
|
|
44
44
|
padding: ${({$hasSublabel:e})=>e?10:12}px 16px;
|
|
@@ -51,9 +51,9 @@
|
|
|
51
51
|
pointer-events: none;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
${({$disabled:e,$selected:t,$hasCheckbox:a})=>e?`cursor: initial;
|
|
54
|
+
${({$disabled:e,$selected:t,$hasCheckbox:a,$hasRadio:l})=>e?`cursor: initial;
|
|
55
55
|
color: var(--color-grey-7);
|
|
56
|
-
background-color: var(--color-grey-10);`:a?`&:hover {
|
|
56
|
+
background-color: var(--color-grey-10);`:a||l?`&:hover {
|
|
57
57
|
background-color: var(--color-grey-10);
|
|
58
58
|
}`:t?`
|
|
59
59
|
background-color: var(--color-grey-9);
|
|
@@ -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"),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:
|
|
3
|
-
${!
|
|
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:L,userName:W,userReactions:z,visibilityIcon:N,customPlaceHolder:A,userProfileUri:x,sx:D,moveButtonsToLeft:y=!1,useNewVersion:R=!1,onDelete:b,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:z?.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:D,id:"comment-"+i,$moveButtonsToLeft:y},React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:x,image:L,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()=>{R&&(d&&await d(w,i),P(!1))}}):React__default.default.createElement(CommentBox,{onClick:()=>R?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:x?Link__default.default:"span",href:x,$bold:!0,$color:"grey-2",sx:"text-decoration:none !important; color:var(--color-grey-2) !important;",$fontSize:14,$lineHeight:20},W),R&&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])))),R?React__default.default.createElement(trash_slash.TrashSlash,{sx:"cursor: pointer;",onClick:e=>{e.stopPropagation(),e.preventDefault(),b&&b()}}):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
|
+
${!y&&"margin-right: auto;"}
|
|
4
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
|
-
${
|
|
5
|
+
${y?"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(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)})))),
|
|
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)})))),R&&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:A||"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},N,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,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),Image=require("next/image"),Link=require("next/link"),styled=require("styled-components"),ShowMoreText=require("react-show-more-text"),regex=require("../../../common/regex.js"),box=require("../../atoms/box/box.js"),highlighter=require("../../atoms/highlighter/highlighter.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),modal=require("../modal/modal.js"),time_ago=(require("../../atoms/typography/display.js"),require("../../atoms/typography/typography.js"),require("../../atoms/time_ago/time_ago.js")),avatar=require("../../iconography/avatar/avatar.js"),lock=require("../../../icons/security/lock.js"),chevron_left=require("../../../icons/arrow/chevron_left.js"),chevron_right=require("../../../icons/arrow/chevron_right.js"),video=require("../../media/video/video.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),Link__default=_interopDefaultCompat(Link),ShowMoreText__default=_interopDefaultCompat(ShowMoreText);const Post=({actions:e,author:t,authorActive:a,authorHref:l,authorImage:r,avatarTooltipContent:i,avatarTooltipSx:o,children:n,content:d,createdDate:u,dropdown:c,hasComments:s,id:f,images:p,isPaidUser:h,isPaywalled:
|
|
2
|
+
"use strict";var React=require("react"),Image=require("next/image"),Link=require("next/link"),styled=require("styled-components"),ShowMoreText=require("react-show-more-text"),regex=require("../../../common/regex.js"),box=require("../../atoms/box/box.js"),highlighter=require("../../atoms/highlighter/highlighter.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),modal=require("../modal/modal.js"),time_ago=(require("../../atoms/typography/display.js"),require("../../atoms/typography/typography.js"),require("../../atoms/time_ago/time_ago.js")),avatar=require("../../iconography/avatar/avatar.js"),lock=require("../../../icons/security/lock.js"),chevron_left=require("../../../icons/arrow/chevron_left.js"),chevron_right=require("../../../icons/arrow/chevron_right.js"),video=require("../../media/video/video.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),Link__default=_interopDefaultCompat(Link),ShowMoreText__default=_interopDefaultCompat(ShowMoreText);const Post=({actions:e,author:t,authorActive:a,authorHref:l,authorImage:r,avatarTooltipContent:i,avatarTooltipSx:o,children:n,content:d,createdDate:u,dropdown:c,hasComments:s,id:f,images:p,isPaidUser:h,isPaywalled:_=!1,link:m,video:g,onJoin:x,monthlyMembershipPrice:y})=>{const v=React__default.default.useId(),w=React__default.default.useRef(null),[R,b]=React__default.default.useState(!1),[E,$]=React__default.default.useState(-1),[k,C]=React__default.default.useState(-1),[j,q]=React__default.default.useState({x:"30vw",y:"30vh"});var P=!!g?.url&&!!g?.thumbnail,e=(React__default.default.useEffect(()=>{w.current&&$(w.current.offsetHeight?w.current.offsetHeight/24:-1)},[]),React__default.default.useEffect(()=>{const e=e=>{"ArrowLeft"===e.key?W():"ArrowRight"===e.key?S():"Escape"!==e.key&&"Enter"!==e.key||C(-1)};return"undefined"!=typeof document&&p?.length&&-1<k&&document.addEventListener("keydown",e),()=>{p?.length&&document.removeEventListener("keydown",e)}},[]),React__default.default.Children.toArray(e)),n=React__default.default.Children.toArray(n);const S=()=>{C(e=>p?.length&&e!==p.length-1?e+1:e)},W=()=>{C(e=>p?.length&&0!==e?e-1:e)};return React__default.default.createElement(Wrapper,{id:f},-1<k&&!!p?.[k]&&React__default.default.createElement(modal.Modal,{alwaysRender:!1,controlledOpen:!0,onChange:e=>!e&&C(-1)},React__default.default.createElement(modal.Modal.Content,{sx:`
|
|
3
3
|
position: relative;
|
|
4
|
-
height: ${
|
|
5
|
-
width: ${
|
|
4
|
+
height: ${j.y};
|
|
5
|
+
width: ${j.x};
|
|
6
6
|
margin: 0 auto;
|
|
7
|
-
`},React__default.default.createElement(NavArrow,{$side:"left",$visible:0!==
|
|
7
|
+
`},React__default.default.createElement(NavArrow,{$side:"left",$visible:0!==k,onClick:W},React__default.default.createElement(chevron_left.ChevronLeft,{color:"white",size:48})),React__default.default.createElement(Image__default.default,{alt:"",fill:!0,quality:100,onLoad:e=>{var{naturalHeight:e,naturalWidth:t}=e.target;let a=t+"px",l=e+"px";window?.innerHeight<e&&window?.innerWidth<t?(a=Math.floor(.95*window.innerHeight*t/e)+"px",l=Math.round(.95*window.innerWidth*e/t)+"px"):window?.innerHeight<e?(a=Math.floor(.95*window.innerHeight*t/e)+"px",l="95vh"):window?.innerWidth<t&&(a="95vw",l=Math.round(.95*window.innerWidth*e/t)+"px"),q({x:a,y:l})},draggable:!1,priority:!0,sizes:"100vw",src:p[k],style:{objectFit:"cover"}}),React__default.default.createElement(NavArrow,{$side:"right",$visible:k!==p.length-1,onClick:S},React__default.default.createElement(chevron_right.ChevronRight,{color:"white",size:48})))),React__default.default.createElement(Header,null,React__default.default.createElement(avatar.Avatar,{isPaidUser:h,as:l?Link__default.default:"button",href:l,image:r,size:64,status:a?"online":void 0,subtitle:React__default.default.createElement(paragraph.P,{as:"span",sx:"vertical-align: top;",$fontSize:14,$lineHeight:20},React__default.default.createElement(time_ago.TimeAgo,{date:new Date(u)})),title:React__default.default.createElement(heading.H,{as:l?Link__default.default:"span",href:l,sx:"text-decoration:none;",$bold:!0,$fontSize:18,$lineHeight:26},t),textPosition:"right",tooltipContent:i,tooltipSx:o,sx:l?"img { cursor: pointer; }":void 0}),c),!!d?.length&&React__default.default.createElement("div",{style:{padding:"16px 24px"}},_&&1<E?React__default.default.createElement(ShowMoreText__default.default,{lines:2,more:"Continue Reading",onClick:x,anchorClass:"see-more",expanded:!1,truncatedEndingComponent:"... "},React__default.default.createElement(paragraph.P,{$sx:"white-space: pre-line; word-break: break-word;",$textClampLines:2},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:d}))):React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(paragraph.P,{$sx:"white-space: pre-line; word-break: break-word;",innerRef:w,$textClampLines:R?void 0:5},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:_&&1===E?"This is a premium post. Join to the membership to unlock the full access.":d})),React__default.default.createElement(paragraph.P,{$color:"grey-5",sx:"cursor:pointer;",$mediumBold:!0,$fontSize:14,onClick:()=>b(e=>!e)},R?"See less":"See more")),_&&!p?.length&&React__default.default.createElement(JoinNow,{onClick:x},React__default.default.createElement(paragraph.P,{$fontSize:14,$mediumBold:!0},"Join now for $",y," per month"))),_&&!!p?.length&&!P&&React__default.default.createElement(BlurredContentWrapper,null,React__default.default.createElement(Image__default.default,{alt:"",width:650,height:427,priority:!0,quality:100,src:p[0],style:{objectFit:"fill",height:"100%",width:"100%",filter:"blur(60px)",position:"absolute",top:0,left:"50%",transform:"translateX(-50%)"}}),React__default.default.createElement(lock.Lock,{size:40,color:"white",sx:"z-index: 1"}),React__default.default.createElement("div",{style:{display:"flex",flexDirection:"column",zIndex:1}},React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:14,$bold:!0,$lineHeight:20},"Become a member"),React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:14,$bold:!0,$lineHeight:20},"to unlock this post")),React__default.default.createElement(JoinNow,{onClick:x,style:{zIndex:1,marginTop:0}},React__default.default.createElement(paragraph.P,{$fontSize:14,$mediumBold:!0},"Join now for $",y," per month"))),!!p?.length&&!P&&!_&&React__default.default.createElement(ImagesWrapper,{$numImages:p.length},p.slice(0,4).map((e,t)=>React__default.default.createElement(ImageWrapper,{key:""+v+e.slice(0,15)+t},React__default.default.createElement(Image__default.default,{alt:"",fill:!0,onClick:()=>C(t),quality:100,src:e,draggable:!1,style:{cursor:"pointer",objectFit:"cover"}}))),4<p.length&&React__default.default.createElement(heading.H,{as:"p",className:"more-than",sx:"pointer-events: none;",$color:"grey-10",$fontSize:28,$lineHeight:36,$semiBold:!0},"+",p.length-4)),!p?.length&&!P&&m&&!_&&React__default.default.createElement(Link__default.default,{href:m.url,target:"_blank"},React__default.default.createElement(ImageWrapper,null,React__default.default.createElement(Image__default.default,{alt:"",fill:!0,quality:100,src:m.imageUrl,draggable:!1,style:{cursor:"pointer",objectFit:"cover"}})),React__default.default.createElement(box.Box,{$dir:"column",$gap:8,sx:"padding: 8px 16px;"},React__default.default.createElement(paragraph.P,{$color:"grey-2",$semiBold:!0},m.title),React__default.default.createElement(paragraph.P,{$color:"grey-5"},m.description))),P&&React__default.default.createElement(VideoWrapper,null,React__default.default.createElement(video.Video,{src:g.url,thumbnail:g.thumbnail,subtitles:[],title:g?.title})),!!e.length&&React__default.default.createElement(ActionsWrapper,null,!_&&e),s&&!!n.length&&React__default.default.createElement(CommentWrapper,null,n))},Wrapper=styled.styled.div`
|
|
8
8
|
position: relative;
|
|
9
9
|
max-width: 700px;
|
|
10
10
|
width: 100%;
|
|
@@ -21,13 +21,18 @@
|
|
|
21
21
|
text-decoration: underline;
|
|
22
22
|
cursor: pointer;
|
|
23
23
|
}
|
|
24
|
-
`,Header=styled.styled.
|
|
24
|
+
`,Header=(styled.styled.button`
|
|
25
|
+
background: none;
|
|
26
|
+
border: none;
|
|
27
|
+
cursor: pointer;
|
|
28
|
+
color: var(--color-grey-5);
|
|
29
|
+
`,styled.styled.div`
|
|
25
30
|
padding: 16px 24px;
|
|
26
31
|
display: flex;
|
|
27
32
|
justify-content: space-between;
|
|
28
33
|
align-items: flex-start;
|
|
29
34
|
border-bottom: 1px solid var(--color-grey-9);
|
|
30
|
-
|
|
35
|
+
`),ImagesWrapper=styled.styled.div`
|
|
31
36
|
position: relative;
|
|
32
37
|
display: flex;
|
|
33
38
|
gap: 8px;
|
|
@@ -3,6 +3,7 @@ import { COLORS } from '../../../common/colors';
|
|
|
3
3
|
type NativeProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'className' | 'children' | 'onBlur' | 'onBlurCapture' | 'onClick' | 'onChange' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver'>;
|
|
4
4
|
export interface DropdownProps extends NativeProps, React.PropsWithChildren {
|
|
5
5
|
checkbox?: boolean;
|
|
6
|
+
radio?: boolean;
|
|
6
7
|
closeOnChange?: boolean;
|
|
7
8
|
closeOnBlur?: boolean;
|
|
8
9
|
defaultValue?: string | string[];
|
|
@@ -23,9 +24,9 @@ export interface DropdownProps extends NativeProps, React.PropsWithChildren {
|
|
|
23
24
|
isButtonTrigger?: boolean;
|
|
24
25
|
}
|
|
25
26
|
declare const Dropdown: {
|
|
26
|
-
({ checkbox, children, closeOnChange, closeOnBlur, defaultValue, disabled, hasArrow, maintainState, isButtonTrigger, multiple, offset, onChange, open: openDirection, options, sx, trigger, containerSx, additionalOptions, additionalOnChange, defaultAdditionalValue, useFullWidth, ...rest }: DropdownProps): React.JSX.Element;
|
|
27
|
+
({ checkbox, radio, children, closeOnChange, closeOnBlur, defaultValue, disabled, hasArrow, maintainState, isButtonTrigger, multiple, offset, onChange, open: openDirection, options, sx, trigger, containerSx, additionalOptions, additionalOnChange, defaultAdditionalValue, useFullWidth, ...rest }: DropdownProps): React.JSX.Element;
|
|
27
28
|
Option: {
|
|
28
|
-
({ checkbox, disabled, icon, label, onClick, selected, sublabel, sx, value, color, }: DropdownOptionProps): React.JSX.Element;
|
|
29
|
+
({ checkbox, radio, disabled, icon, label, onClick, selected, sublabel, sx, value, color, }: DropdownOptionProps): React.JSX.Element;
|
|
29
30
|
displayName: string;
|
|
30
31
|
};
|
|
31
32
|
Spacer: {
|
|
@@ -35,6 +36,7 @@ declare const Dropdown: {
|
|
|
35
36
|
};
|
|
36
37
|
export interface DropdownOptionProps {
|
|
37
38
|
checkbox?: boolean;
|
|
39
|
+
radio?: boolean;
|
|
38
40
|
color?: (typeof COLORS)[number];
|
|
39
41
|
disabled?: boolean;
|
|
40
42
|
icon?: React.ReactElement;
|