@soul-refiner/design-system 2.6.9 → 2.6.11
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,13 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),Link=require("next/link"),styled=require("styled-components"),styles=require("../../../common/styles.js"),box=require("../../atoms/box/box.js"),hide=require("../../atoms/hide/hide.js"),time_ago=require("../../atoms/time_ago/time_ago.js"),paragraph=require("../../atoms/typography/paragraph.js"),avatar=require("../../iconography/avatar/avatar.js"),helpers=require("./helpers.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Link__default=_interopDefaultCompat(Link),styled__default=_interopDefaultCompat(styled);const MAX_REACTIONS_SHOWN=5,DiscussPost=({avatarSx:e,content:t,createdDate:a,editActions:r,editing:l,firstNewPost:o,handleContentChange:i,id:n,onReact:d,popupActions:u,popupSx:c,reactions:p,reactionModal:s,replyContent:f,replyUserHref:x,replyUserImageUri:_,replyUserName:g,sx:m,userHref:h,userImageUri:y,userName:$,userReactions:
|
|
2
|
+
"use strict";var React=require("react"),Link=require("next/link"),styled=require("styled-components"),styles=require("../../../common/styles.js"),box=require("../../atoms/box/box.js"),hide=require("../../atoms/hide/hide.js"),time_ago=require("../../atoms/time_ago/time_ago.js"),paragraph=require("../../atoms/typography/paragraph.js"),avatar=require("../../iconography/avatar/avatar.js"),helpers=require("./helpers.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Link__default=_interopDefaultCompat(Link),styled__default=_interopDefaultCompat(styled);const MAX_REACTIONS_SHOWN=5,DiscussPost=({avatarSx:e,content:t,createdDate:a,editActions:r,editing:l,firstNewPost:o,handleContentChange:i,id:n,onReact:d,popupActions:u,popupSx:c,reactions:p,reactionModal:s,replyContent:f,replyUserHref:x,replyUserImageUri:_,replyUserName:g,sx:m,userHref:h,userImageUri:y,userName:$,userReactions:b})=>{const R=React__default.default.useRef(null),[v,E]=React__default.default.useState(!1);React__default.default.useEffect(()=>{R.current&&(R.current.value=t)},[t]),React__default.default.useEffect(()=>{R?.current&&R.current.value!==t&&i&&i(R.current.value)},[v]);var w=React__default.default.useMemo(()=>helpers.isSameDay(new Date,new Date(a))?React__default.default.createElement(time_ago.TimeAgo,{date:a}):new Intl.DateTimeFormat("en-US",{minute:"numeric",hour:"numeric",day:"numeric",month:"long",year:"numeric"}).format(a),[a]),k=React__default.default.useMemo(()=>{if(p){let e=Object.entries(p);return(e=s?e.slice(0,MAX_REACTIONS_SHOWN):e).sort((e,t)=>e[1]<t[1]?1:-1).map(e=>React__default.default.createElement(Reaction,{key:n+e[0],onClick:()=>d(e[0]),$align:"center",$dir:"row",$gap:5,$userSelected:b?.includes(e[0])},e[0],React__default.default.createElement(paragraph.P,{$bold:!0,$fontSize:10,$lineHeight:14},e[1])))}},[p,b]);return React__default.default.createElement(Wrapper,{$editing:l,$firstNewPost:o,$sx:m,id:n},React__default.default.createElement(hide.HideButRender,{show:!l&&!!f},React__default.default.createElement(box.Box,{$align:"center",$gap:4,sx:"margin-left: 56px;"},React__default.default.createElement(ReplyMarker,null),React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:x,image:_,size:16,sx:"img { cursor: pointer;}"}),React__default.default.createElement(paragraph.P,{as:Link__default.default,href:x,$color:"primary-blue-2",$fontSize:12,$lineHeight:16,sx:"flex-shrink: 0; text-decoration: none;"},"@",g),React__default.default.createElement(paragraph.P,{$fontSize:12,$lineHeight:16,$textClampLines:1},f))),React__default.default.createElement(hide.HideButRender,{show:l},React__default.default.createElement(box.Box,{$gap:16,$align:"flex-start",className:"editing"},React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:h,image:y,size:40,sx:e}),React__default.default.createElement(box.Box,{$gap:10,sx:`
|
|
3
3
|
flex: 1;
|
|
4
4
|
background-color: var(--color-grey-10);
|
|
5
5
|
border-radius: 8px;
|
|
6
6
|
@media (max-width: 768px) {
|
|
7
7
|
flex-direction: column;
|
|
8
|
-
min-height: calc(${
|
|
8
|
+
min-height: calc(${R?.current?.style?.height||"360px"} + 24px);
|
|
9
9
|
}
|
|
10
|
-
`},React__default.default.createElement(TextAreaElement,{onChange:()=>E(e=>!e),ref:
|
|
10
|
+
`},React__default.default.createElement(TextAreaElement,{onChange:()=>E(e=>!e),onInput:e=>{e=e.target;e.style.height="48px",e.style.height=Math.max(e.scrollHeight,e.offsetHeight)+"px"},ref:R}),React__default.default.createElement(EditActionsWrapper,null,r)))),React__default.default.createElement(hide.HideButRender,{show:!l},React__default.default.createElement(box.Box,{$gap:16,$align:"flex-start"},React__default.default.createElement(PopupActionsWrapper,{$sx:c,className:"popup-actions"},u),React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:h,image:y,size:40,sx:"img { cursor: pointer; }; "+e}),React__default.default.createElement(box.Box,{$gap:4,$dir:"column",sx:"flex: 1;"},React__default.default.createElement(box.Box,{$align:"center",$gap:8,sx:`height: 20px;
|
|
11
11
|
@media screen and (max-width: 400px) {
|
|
12
12
|
flex-direction: column;
|
|
13
13
|
align-items: flex-start;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
height: ${v.y};
|
|
5
5
|
width: ${v.x};
|
|
6
6
|
margin: 0 auto;
|
|
7
|
-
`},React__default.default.createElement(NavArrow,{$side:"left",$visible:0!==x,onClick:R},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"),w({x:a,y:l})},priority:!0,sizes:"100vw",src:f[x],style:{objectFit:"cover"}}),React__default.default.createElement(NavArrow,{$side:"right",$visible:x!==f.length-1,onClick:b},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:i,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(s)})),title:React__default.default.createElement(heading.H,{as:"span",$bold:!0,$fontSize:18,$lineHeight:26},t),textPosition:"right",tooltipContent:r,tooltipSx:o,sx:l?"img { cursor: pointer; }":void 0}),c),!!d?.length&&React__default.default.createElement("div",{style:{padding:"16px 24px"}},React__default.default.createElement(paragraph.P,{$textClampLines:m?2:void 0},d)),!!f?.length&&React__default.default.createElement(ImagesWrapper,{$numImages:f.length,$isPaywalled:m},f.slice(0,4).map((e,t)=>React__default.default.createElement(ImageWrapper,{key:""+_+e.slice(0,15)+t},React__default.default.createElement(Image__default.default,{alt:"",fill:!0,onClick:()=>y(t),quality:100,src:e,style:{cursor:"pointer",objectFit:"cover"}}))),4<f.length&&React__default.default.createElement(heading.H,{as:"p",className:"more-than",$color:"grey-10",$fontSize:28,$lineHeight:36,$semiBold:!0},"+",f.length-4)),!!f?.length&&m&&React__default.default.createElement(PaywallWrapper,null,React__default.default.createElement(lock.Lock,{size:40,color:"grey-7"}),React__default.default.createElement(paragraph.P,{$fontSize:14,$bold:!0,$lineHeight:20,$color:"white"},"Become a member",React__default.default.createElement("br",null),"to unlock this post"),React__default.default.createElement(button.Button,{onClick:g,size:"small",sx:"width: 213px;",type:"outlined"},"Join now")),!!e.length&&React__default.default.createElement(ActionsWrapper,null,!m&&e),u&&!!n.length&&React__default.default.createElement(CommentWrapper,null,n))},Wrapper=styled.styled.div`
|
|
7
|
+
`},React__default.default.createElement(NavArrow,{$side:"left",$visible:0!==x,onClick:R},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"),w({x:a,y:l})},priority:!0,sizes:"100vw",src:f[x],style:{objectFit:"cover"}}),React__default.default.createElement(NavArrow,{$side:"right",$visible:x!==f.length-1,onClick:b},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:i,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(s)})),title:React__default.default.createElement(heading.H,{as:"span",$bold:!0,$fontSize:18,$lineHeight:26},t),textPosition:"right",tooltipContent:r,tooltipSx:o,sx:l?"img { cursor: pointer; }":void 0}),c),!!d?.length&&React__default.default.createElement("div",{style:{padding:"16px 24px"}},React__default.default.createElement(paragraph.P,{$textClampLines:m?2:void 0,$sx:"white-space: pre-line;"},d)),!!f?.length&&React__default.default.createElement(ImagesWrapper,{$numImages:f.length,$isPaywalled:m},f.slice(0,4).map((e,t)=>React__default.default.createElement(ImageWrapper,{key:""+_+e.slice(0,15)+t},React__default.default.createElement(Image__default.default,{alt:"",fill:!0,onClick:()=>y(t),quality:100,src:e,style:{cursor:"pointer",objectFit:"cover"}}))),4<f.length&&React__default.default.createElement(heading.H,{as:"p",className:"more-than",$color:"grey-10",$fontSize:28,$lineHeight:36,$semiBold:!0},"+",f.length-4)),!!f?.length&&m&&React__default.default.createElement(PaywallWrapper,null,React__default.default.createElement(lock.Lock,{size:40,color:"grey-7"}),React__default.default.createElement(paragraph.P,{$fontSize:14,$bold:!0,$lineHeight:20,$color:"white"},"Become a member",React__default.default.createElement("br",null),"to unlock this post"),React__default.default.createElement(button.Button,{onClick:g,size:"small",sx:"width: 213px;",type:"outlined"},"Join now")),!!e.length&&React__default.default.createElement(ActionsWrapper,null,!m&&e),u&&!!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%;
|