Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

refactor(thread): common articles card comp#1111

Merged
mydearxym merged 3 commits intodevfromcommon-thread-card
Jul 13, 2021
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,7 @@ import Upvote from '@/components/Upvote'
import DotDivider from '@/components/DotDivider'
import IconText from '@/components/IconText'

import { Wrapper, PublishWrapper, Bottom } from '../styles/desktop_view/footer'
import { Wrapper, PublishWrapper, Bottom } from './styles/footer'

const Footer: FC = () => {
return (
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,7 +4,7 @@ import type { TTag } from '@/spec'
import { cutRest } from '@/utils'
import InlineTags from '@/components/InlineTags'

import { Wrapper, Title } from '../styles/desktop_view/header'
import { Wrapper, Title } from './styles/header'

type TProps = {
title: string
Expand Down
48 changes: 48 additions & 0 deletionssrc/components/ArticleCard/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
import { FC, memo } from 'react'

import type { TJob } from '@/spec'
// import { THREAD } from '@/constant'

import { cutRest } from '@/utils'
import DigestSentence from '@/components/DigestSentence'
import { Br, SpaceGrow } from '@/components/Common'
import ArticleImgWindow from '@/components/ArticleImgWindow'

import Header from './Header'
import Footer from './Footer'

import { Wrapper } from './styles'
import { SIZE } from '@/constant'

type TProps = {
data: TJob
// thread?: TThread
}
const fakeDigest =
'网络监测数据显示，从 7 月 12 日开始古巴限制了社交媒体和消息应用，此举被认为旨在限制信息流动。古巴上周末爆发了罕见的大规模反政府抗议。受到干扰的通讯平台包括了 WhatsApp、Facebook、Instagram 和部分 Telegram 服务。VPN 服务可以绕过这一干扰。古巴的反政府抗议与经济困难，疫苗短缺等问题有关。'

const ArticleCard: FC<TProps> = ({ data }) => {
const { title, tags } = data

return (
<Wrapper>
<Header title={title} tags={tags} />
<Br top={15} />
<DigestSentence
top={5}
bottom={15}
size={SIZE.MEDIUM}
onPreview={() => console.log('send preview')}
>
{cutRest(fakeDigest, 150)}
</DigestSentence>
<Br top={4} />
<ArticleImgWindow />
<Br top={16} />
<SpaceGrow />
<Footer />
</Wrapper>
)
}

export default memo(ArticleCard)
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,6 +8,7 @@ export const Wrapper = styled.div`
export const PublishWrapper = styled.div`
${css.flex('align-center')};
margin-left: 3px;
margin-bottom: 3px;
font-size: 13px;
`
export const Bottom = styled.div`
Expand Down
10 changes: 10 additions & 0 deletionssrc/components/ArticleCard/tests/index.test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
// import React from 'react'
// import { shallow } from 'enzyme'

// import ArticleCard from '../index'

describe('TODO <ArticleCard />', () => {
it('Expect to have unit tests specified', () => {
expect(true).toEqual(true)
})
})
5 changes: 5 additions & 0 deletionssrc/components/DigestSentence/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,8 @@

import { FC, ReactNode, memo } from 'react'

import type { TSIZE_SM } from '@/spec'
import { SIZE } from '@/constant'
import { ICON } from '@/config'
import { buildLog } from '@/utils'

Expand All@@ -31,6 +33,7 @@ type TProps = {
bottom?: number
left?: number
right?: number
size?: TSIZE_SM
onPreview: () => void
}

Expand All@@ -42,6 +45,7 @@ const DigestSentence: FC<TProps> = ({
bottom = 0,
left = 0,
right = 0,
size = SIZE.SMALL,
}) => {
return (
<Wrapper
Expand All@@ -51,6 +55,7 @@ const DigestSentence: FC<TProps> = ({
bottom={bottom}
left={left}
right={right}
size={size}
>
{children}
<Space left={8} />
Expand Down
9 changes: 6 additions & 3 deletionssrc/components/DigestSentence/styles/index.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
import styled from 'styled-components'

import type { TTestable, TSpace } from '@/spec'
import type { TTestable, TSpace, TSIZE_SM } from '@/spec'
import Img from '@/Img'
import { css, theme } from '@/utils'

import { getFontSize } from './metric'

type TWrapper = TTestable & TSpace & { size: TSIZE_SM }
export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
'data-test-id': testid,
}))<TTestable & TSpace>`
}))<TWrapper>`
color: ${theme('thread.articleDigest')};
font-size:13px;
font-size:${({ size }) => getFontSize(size)};

padding-top: ${({ top }) => `${top}px`};
padding-bottom: ${({ bottom }) => `${bottom}px`};
Expand Down
15 changes: 15 additions & 0 deletionssrc/components/DigestSentence/styles/metric.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
import type { TSIZE_SM } from '@/spec'
import { SIZE } from '@/constant'

export const getFontSize = (size: TSIZE_SM): string => {
switch (size) {
case SIZE.MEDIUM: {
return '14px'
}

default:
return '13px'
}
}

export const holder = 1
41 changes: 0 additions & 41 deletionssrc/components/JobItem/DesktopView/index.tsx
View file
Open in desktop

This file was deleted.

6 changes: 2 additions & 4 deletionssrc/components/JobItem/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,8 +10,7 @@ import type { TJob, TID } from '@/spec'
import { buildLog } from '@/utils'
import { useAccount } from '@/hooks'

import ArticleItemPrefixLabel from '@/components/ArticleItemPrefixLabel'
import DesktopView from './DesktopView'
import ArticleCard from '@/components/ArticleCard'

import { Wrapper } from './styles'

Expand All@@ -28,8 +27,7 @@ const JobItem: FC<TProps> = ({ entry, activeId }) => {

return (
<Wrapper entry={entry} activeId={activeId} c11n={c11n}>
<ArticleItemPrefixLabel entry={entry} topOffset="9px" />
<DesktopView entry={entry} />
<ArticleCard data={entry} />
</Wrapper>
)
}
Expand Down
[8]ページ先頭
©2009-2025 Movatter.jp