feat(share): add telegram & article header (#1120)

* feat(share): add telegram share

* refactor(share): add article title to header

Author: mydearxym

public/icons/static/social/telegram-share.png

@@ -1,10 +1,14 @@
 import { FC, memo } from 'react'
 
 import { ICON } from '@/config'
+import type { TArticle } from '@/spec'
 
 import { SHARE_TYPE } from './constant'
 import {
   Wrapper,
+  Header,
+  Hint,
+  Article,
   InnerWrapper,
   Media,
   Logo,
@@ -51,6 +55,13 @@ const medias = [
     small: true,
     type: SHARE_TYPE.EMAIL,
   },
+  {
+    id: '5',
+    title: 'Telegram',
+    logo: `${ICON}/social/telegram-share.png`,
+    bg: 'white',
+    type: SHARE_TYPE.TELEGRAM,
+  },
   {
     id: '6',
     title: '微博',
@@ -66,9 +77,18 @@ const medias = [
   },
 ]
 
-const Platforms: FC = () => {
+type TProps = {
+  article: TArticle
+}
+
+const Platforms: FC<TProps> = ({ article }) => {
   return (
     <Wrapper>
+      <Header>
+        <Hint>分享</Hint>
+        <Article>{article.title}</Article>
+        <Hint>到:</Hint>
+      </Header>
       <InnerWrapper>
         {medias.map((item) => (
           <Media key={item.id} onClick={() => toPlatform(item.type)}>

src/containers/tool/Share/Platforms.tsx

@@ -8,6 +8,7 @@ export const OUTSIDE_SHARE_TYPE = {
   TWITTER: 'twitter',
   EMAIL: 'email',
   WECHAT: 'wechat',
+  TELEGRAM: 'telegram',
   // QQ: 'qq',
   WEIBO: 'weibo',
   FACEBOOK: 'facebook',

src/containers/tool/Share/constant.ts

@@ -25,13 +25,13 @@ type TProps = {
 
 const ShareContainer: FC<TProps> = ({ share: store, testid }) => {
   useInit(store)
-  const { show, siteShareType, linksData } = store
+  const { show, siteShareType, linksData, viewingArticle } = store
 
   return (
     <Fragment>
       <Modal width="450px" show={show} showCloseBtn onClose={close}>
         <Wrapper testid={testid} type={siteShareType}>
-          <Platforms />
+          <Platforms article={viewingArticle} />
           <InfoPanel type={siteShareType} linksData={linksData} />
         </Wrapper>
       </Modal>

src/containers/tool/Share/index.tsx

@@ -52,6 +52,12 @@ export const toPlatform = (type: string): void => {
       // return openShareWindow('https://twitter.com/share', param)
     }
 
+    case SHARE_TYPE.TELEGRAM: {
+      const param = { url, text: title }
+
+      return openShareWindow('https://telegram.me/share/url', param)
+    }
+
     case SHARE_TYPE.EMAIL: {
       const param = { subject: title, body: `${url}\n\n${digest}` }
       return openShareWindow('mailto:', param)

src/containers/tool/Share/logic.ts

@@ -4,13 +4,30 @@ import { css, theme } from '@/utils'
 import Img from '@/Img'
 
 export const Wrapper = styled.div`
-  padding: 20px 20px;
+  padding-left: 20px;
+  padding-right: 20px;
   width: 100%;
   min-height: 220px;
   background: ${theme('modal.bg')};
   filter: drop-shadow(3px 3px 6px #002a34);
   transition: min-height 0.2s;
 `
+export const Header = styled.div`
+  ${css.flex('align-end')};
+  margin-top: 15px;
+  padding-left: 25px;
+  margin-bottom: 20px;
+`
+export const Hint = styled.div`
+  color: ${theme('thread.articleDigest')};
+  font-size: 13px;
+`
+export const Article = styled.div`
+  color: ${theme('thread.articleTitle')};
+  ${css.cutRest('180px')};
+  font-size: 14px;
+  margin-left: 5px;
+`
 export const InnerWrapper = styled.div`
   ${css.flex()};
   flex-wrap: wrap;

src/containers/tool/Share/styles/platform.ts

@@ -10,7 +10,7 @@ export const mediaBreakPoints = {
   tablet: 768,
   laptop: 992,
   laptopM: 1280,
-  laptopL: 1440,
+  laptopL: 1400,
   maxContent: 1520, // WIDTH.COMMUNITY.PAGE
   desktop: 1600,
   // currently used as forms of drawer content (slideout/modal)