@soul-refiner/design-system 2.13.1 → 2.13.3
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,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");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:
|
|
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:g=!1,link:m,video:_,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({x:"30vw",y:"30vh"});var j=!!_?.url&&!!_?.thumbnail,e=(React__default.default.useEffect(()=>{w.current&&b(w.current.offsetHeight?w.current.offsetHeight/24:-1)},[]),React__default.default.useEffect(()=>{const e=e=>{"ArrowLeft"===e.key?W():"ArrowRight"===e.key?q():"Escape"!==e.key&&"Enter"!==e.key||$(-1)};return"undefined"!=typeof document&&p?.length&&-1<E&&document.addEventListener("keydown",e),()=>{p?.length&&document.removeEventListener("keydown",e)}},[]),React__default.default.Children.toArray(e)),n=React__default.default.Children.toArray(n);const q=()=>{$(e=>p?.length&&e!==p.length-1?e+1:e)},W=()=>{$(e=>p?.length&&0!==e?e-1:e)};return React__default.default.createElement(Wrapper,{id:f},-1<E&&!!p?.[E]&&React__default.default.createElement(modal.Modal,{alwaysRender:!1,controlledOpen:!0,onChange:e=>!e&&$(-1)},React__default.default.createElement(modal.Modal.Content,{sx:`
|
|
3
3
|
position: relative;
|
|
4
|
-
height: ${
|
|
5
|
-
width: ${
|
|
4
|
+
height: ${k.y};
|
|
5
|
+
width: ${k.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!==E,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"),C({x:a,y:l})},draggable:!1,priority:!0,sizes:"100vw",src:p[E],style:{objectFit:"cover"}}),React__default.default.createElement(NavArrow,{$side:"right",$visible:E!==p.length-1,onClick:q},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"}},g&&1<R?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(paragraph.P,{$sx:"white-space: pre-line; word-break: break-word;",innerRef:w},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:g&&1===R?"This is a premium post. Join to the membership to unlock the full access.":d})),g&&!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"))),g&&!!p?.length&&!j&&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&&!j&&!g&&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:()=>$(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&&!j&&m&&!g&&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))),j&&React__default.default.createElement(VideoWrapper,null,React__default.default.createElement(video.Video,{src:_.url,thumbnail:_.thumbnail,subtitles:[]})),!!e.length&&React__default.default.createElement(ActionsWrapper,null,!g&&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%;
|
|
@@ -78,6 +78,10 @@
|
|
|
78
78
|
height: 100%;
|
|
79
79
|
pointer-events: none;
|
|
80
80
|
}
|
|
81
|
+
`,VideoWrapper=styled.styled.div`
|
|
82
|
+
position: relative;
|
|
83
|
+
width: 100%;
|
|
84
|
+
height: 427px;
|
|
81
85
|
`,BlurredContentWrapper=styled.styled.div`
|
|
82
86
|
position: relative;
|
|
83
87
|
display: flex;
|
|
@@ -21,7 +21,11 @@ export interface PostProps extends React.PropsWithChildren {
|
|
|
21
21
|
imageUrl: string;
|
|
22
22
|
url: string;
|
|
23
23
|
};
|
|
24
|
+
video?: {
|
|
25
|
+
url: string;
|
|
26
|
+
thumbnail: string;
|
|
27
|
+
};
|
|
24
28
|
onJoin?: () => void;
|
|
25
29
|
monthlyMembershipPrice?: number;
|
|
26
30
|
}
|
|
27
|
-
export declare const Post: ({ actions, author, authorActive, authorHref, authorImage, avatarTooltipContent, avatarTooltipSx, children, content, createdDate, dropdown, hasComments, id, images, isPaidUser, isPaywalled, link, onJoin, monthlyMembershipPrice, }: PostProps) => React.JSX.Element;
|
|
31
|
+
export declare const Post: ({ actions, author, authorActive, authorHref, authorImage, avatarTooltipContent, avatarTooltipSx, children, content, createdDate, dropdown, hasComments, id, images, isPaidUser, isPaywalled, link, video, onJoin, monthlyMembershipPrice, }: PostProps) => React.JSX.Element;
|