From 1dbc753a28cf28c637988853edf93e0ce63698fe Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sat, 3 Apr 2021 23:10:59 +0800 Subject: [PATCH 1/2] refactor(job-card): add images && footer adjust --- src/components/Cards/JobCard.tsx | 77 +++++++++++-------- src/components/Cards/styles/job_card.ts | 53 ++++++++++--- .../thread/JobsThread/fakeFiltersItems.ts | 4 +- .../thread/JobsThread/fakeJobItems.ts | 5 ++ utils/index.ts | 2 + utils/mock.ts | 18 +++++ 6 files changed, 116 insertions(+), 43 deletions(-) create mode 100644 utils/mock.ts diff --git a/src/components/Cards/JobCard.tsx b/src/components/Cards/JobCard.tsx index 74934598c..fcfe8c70a 100644 --- a/src/components/Cards/JobCard.tsx +++ b/src/components/Cards/JobCard.tsx @@ -6,9 +6,9 @@ import React from 'react' import TimeAgo from 'timeago-react' import { ICON } from '@/config' -import { buildLog } from '@/utils' +import { buildLog, uid } from '@/utils' -import { Space } from '@/components/Common' +import { Space, SpaceGrow } from '@/components/Common' import IconText from '@/components/IconText' import Tooltip from '@/components/Tooltip' @@ -19,17 +19,21 @@ import { Header, TeamScale, Title, + ShareIcon, Info, Sallery, Body, Footer, - Publisher, - Avatar, PublisherInfo, AuthorName, PublishExtra, + PublishTime, + TechstackWrapper, + TechTitle, TechKeywords, Keyword, + ImagesWrapper, + PreviewImage, } from './styles/job_card' /* eslint-disable-next-line */ @@ -46,12 +50,15 @@ type TProps = { title: string avatar: string } + images?: string[] } } const JobCard: React.FC = ({ - item: { title, body, author, insertedAt, commentsCount }, + item: { title, body, author, insertedAt, commentsCount, images }, }) => { + console.log('images-: ', images) + const fakeCommunity = { id: '1', title: 'react', @@ -67,39 +74,49 @@ const JobCard: React.FC = ({
{title} - 10~15 人 +
成都 前端 15k-30k + + 10~15 人 {body} + {images && ( + + {images.map((imageSrc) => ( + + ))} + + )}
- - - - {author.title} - - - - - - - {commentsCount} - - - - - - } - placement="top" - > - React - - TS - + + 技术栈 + + } + placement="top" + > + React + + TS + + + + + {author.title} + + + + + + + {commentsCount} + + +
) diff --git a/src/components/Cards/styles/job_card.ts b/src/components/Cards/styles/job_card.ts index afdbfe547..f7277431a 100644 --- a/src/components/Cards/styles/job_card.ts +++ b/src/components/Cards/styles/job_card.ts @@ -7,12 +7,12 @@ import { css, theme } from '@/utils' export const Wrapper = styled.div` background: #08303e; - padding: 15px 20px; + padding: 24px 22px; width: auto; height: auto; min-width: 400px; margin-bottom: 30px; - border-radius: 4px; + border-radius: 10px; ` export const Header = styled.div` ${css.flex('align-baseline', 'justify-between')}; @@ -21,6 +21,18 @@ export const Title = styled.div` color: ${theme('thread.articleTitle')}; font-size: 16px; ` +export const ShareIcon = styled(Img)` + fill: ${theme('thread.articleDigest')}; + ${css.size(13)}; + margin-right: 4px; + opacity: 0; + + ${Wrapper}:hover & { + opacity: 1; + } + + transition: opacity 0.3s; +` export const TeamScale = styled.div` color: ${theme('thread.articleDigest')}; font-size: 12px; @@ -41,26 +53,32 @@ export const Body = styled.div` ` export const Footer = styled.div` width: 100%; - ${css.flex('align-center', 'justify-between')}; + ${css.flex('align-end', 'justify-between')}; margin-top: 20px; ` -export const Publisher = styled.div` - ${css.flex('align-center')}; -` -export const Avatar = styled(Img)` - ${css.circle(22)}; -` export const PublisherInfo = styled.div` - ${css.flexColumn()}; - margin-left: 14px; + ${css.flexColumn('align-end')}; ` export const AuthorName = styled.div` font-size: 14px; color: ${theme('thread.articleTitle')}; + margin-bottom: 3px; ` export const PublishExtra = styled.div` ${css.flex('align-center')}; ` +export const PublishTime = styled.div` + font-size: 11px; + color: ${theme('thread.articleDigest')}; +` +export const TechstackWrapper = styled.div` + ${css.flexColumn()}; +` +export const TechTitle = styled.div` + font-size: 11px; + color: ${theme('thread.articleDigest')}; + margin-bottom: 2px; +` export const TechKeywords = styled.div` ${css.flex('align-center')}; ` @@ -74,3 +92,16 @@ export const Keyword = styled.a` cursor: pointer; } ` +export const ImagesWrapper = styled.div` + ${css.flex('align-center')}; + width: 80%; + margin-top: 24px; + margin-bottom: 6px; +` +export const PreviewImage = styled(Img)` + width: auto; + height: 60px; + object-fit: cover; + border-radius: 8px; + margin-right: 12px; +` diff --git a/src/containers/thread/JobsThread/fakeFiltersItems.ts b/src/containers/thread/JobsThread/fakeFiltersItems.ts index 1f55e1332..4bf163303 100644 --- a/src/containers/thread/JobsThread/fakeFiltersItems.ts +++ b/src/containers/thread/JobsThread/fakeFiltersItems.ts @@ -63,7 +63,7 @@ const filtersItems = [ }, { id: '102', - title: '薪资待遇', + title: '月薪', icon: `${ICON_CMD}/navi/money-yuan.svg`, options: [ @@ -96,7 +96,7 @@ const filtersItems = [ { // 非 IT，设计类的网站 id: '103', - title: '规模', + title: '团队规模', icon: `${ICON_CMD}/navi/chair.svg`, options: [ { diff --git a/src/containers/thread/JobsThread/fakeJobItems.ts b/src/containers/thread/JobsThread/fakeJobItems.ts index fe542cc26..85766abcf 100644 --- a/src/containers/thread/JobsThread/fakeJobItems.ts +++ b/src/containers/thread/JobsThread/fakeJobItems.ts @@ -1,3 +1,5 @@ +import { mockImages } from '@/utils' + const fakeItems = [ { id: '1', @@ -10,6 +12,7 @@ const fakeItems = [ }, body: '美团校招内推启动啦！！！校园招聘已启动～2021届应届生&&2022届实习, 美团校招内推启动啦！！！内推的优势： 免简历筛选，直通笔试，更大概率被发起面试， 极大增加通过概率 !… ', + images: mockImages(2), }, { id: '2', @@ -34,6 +37,7 @@ const fakeItems = [ }, body: '岗位多样，开发，美术，市场，运营，产品，设计，财务，法律等。不卡学历！各类岗位面试难度一般，对学历无歧视，内推保证直通笔试面试，拿个保底offer吧各位', + images: mockImages(3), }, { id: '4', @@ -45,6 +49,7 @@ const fakeItems = [ avatar: 'https://avatars.githubusercontent.com/u/809410?s=64&v=4', }, body: '美团校招内推启动啦！！！校园招聘已启动～2021届应届生&&2022届实习', + images: mockImages(1), }, { id: '5', diff --git a/utils/index.ts b/utils/index.ts index 6074f7071..94fb903a3 100755 --- a/utils/index.ts +++ b/utils/index.ts @@ -143,3 +143,5 @@ export { Trans } from './i18n' export { default as GA } from './analytics' export { isMobile } from './device' + +export { mockImage, mockImages } from './mock' diff --git a/utils/mock.ts b/utils/mock.ts new file mode 100644 index 000000000..28f0fbd9d --- /dev/null +++ b/utils/mock.ts @@ -0,0 +1,18 @@ +import { getRandomInt } from './helper' + +const images = [ + 'https://rmt.dogedoge.com/fetch/~/source/unsplash/photo-1557555187-23d685287bc3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80', + 'https://rmt.dogedoge.com/fetch/~/source/unsplash/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80', + 'https://rmt.dogedoge.com/fetch/~/source/unsplash/photo-1617419086540-518c5b847b88?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80', + 'https://rmt.dogedoge.com/fetch/~/source/unsplash/photo-1617365564200-c6b079284290?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80', + 'https://rmt.dogedoge.com/fetch/~/source/unsplash/photo-1617391765934-f7ac7aa648bc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=642&q=80', + 'https://rmt.dogedoge.com/fetch/~/source/unsplash/photo-1611095973362-88e8e2557e58?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80', +] + +export const mockImage = (): string => { + return images[getRandomInt(0, 4)] +} + +export const mockImages = (num: number): string[] => { + return images.slice(0, Math.min(num, images.length - 1)) +} From c30081e88a6308f1804bf5b78d279bfb110300ed Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sat, 3 Apr 2021 23:24:39 +0800 Subject: [PATCH 2/2] refactor(IconText): convert to ts --- src/components/Cards/JobCard.tsx | 4 +-- src/components/Cards/styles/job_card.ts | 2 +- .../IconText/{index.js => index.tsx} | 34 +++++++++---------- src/components/IconText/styles/index.ts | 8 ++--- src/components/IconText/styles/metric.ts | 13 +++++-- 5 files changed, 32 insertions(+), 29 deletions(-) rename src/components/IconText/{index.js => index.tsx} (53%) diff --git a/src/components/Cards/JobCard.tsx b/src/components/Cards/JobCard.tsx index fcfe8c70a..d4624aeae 100644 --- a/src/components/Cards/JobCard.tsx +++ b/src/components/Cards/JobCard.tsx @@ -57,8 +57,6 @@ type TProps = { const JobCard: React.FC = ({ item: { title, body, author, insertedAt, commentsCount, images }, }) => { - console.log('images-: ', images) - const fakeCommunity = { id: '1', title: 'react', @@ -112,7 +110,7 @@ const JobCard: React.FC = ({ - + {commentsCount} diff --git a/src/components/Cards/styles/job_card.ts b/src/components/Cards/styles/job_card.ts index f7277431a..dbb3a2ceb 100644 --- a/src/components/Cards/styles/job_card.ts +++ b/src/components/Cards/styles/job_card.ts @@ -61,7 +61,7 @@ export const PublisherInfo = styled.div` ` export const AuthorName = styled.div` font-size: 14px; - color: ${theme('thread.articleTitle')}; + color: ${theme('thread.articleDigest')}; margin-bottom: 3px; ` export const PublishExtra = styled.div` diff --git a/src/components/IconText/index.js b/src/components/IconText/index.tsx similarity index 53% rename from src/components/IconText/index.js rename to src/components/IconText/index.tsx index dae91707e..3951e9321 100755 --- a/src/components/IconText/index.js +++ b/src/components/IconText/index.tsx @@ -5,9 +5,8 @@ */ import React from 'react' -import T from 'prop-types' -import { values } from 'ramda' +import type { TSIZE } from '@/spec' import { buildLog, nilOrEmpty } from '@/utils' import { SIZE } from '@/constant' @@ -16,7 +15,21 @@ import { Wrapper, Icon, Text } from './styles' /* eslint-disable-next-line */ const log = buildLog('c:IconText:index') -const IconText = ({ iconSrc, round, children, size, margin }) => ( +type TProps = { + iconSrc: string + round?: boolean + children: React.ReactNode + size?: TSIZE + margin?: string +} + +const IconText: React.FC = ({ + iconSrc, + round = false, + children, + size = SIZE.SMALL, + margin, +}) => ( {!nilOrEmpty(iconSrc) && ( @@ -25,19 +38,4 @@ const IconText = ({ iconSrc, round, children, size, margin }) => ( ) -IconText.propTypes = { - iconSrc: T.string, - round: T.bool, - children: T.oneOfType([T.node, T.string]).isRequired, - size: T.oneOf(values(SIZE)), - margin: T.oneOfType([T.string, T.instanceOf(null)]), -} - -IconText.defaultProps = { - iconSrc: '', - round: false, - size: SIZE.SMALL, - margin: null, -} - export default React.memo(IconText) diff --git a/src/components/IconText/styles/index.ts b/src/components/IconText/styles/index.ts index c136b6411..c437d2764 100755 --- a/src/components/IconText/styles/index.ts +++ b/src/components/IconText/styles/index.ts @@ -1,15 +1,15 @@ import styled from 'styled-components' -import type { TTestable } from '@/spec' +import type { TTestable, TSIZE } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' import { getIconSize, getTextSize, getMargin } from './metric' type TIcon = { - size: string + size: TSIZE margin: string - round: string + round: boolean } export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ @@ -25,7 +25,7 @@ export const Icon = styled(Img)` display: block; border-radius: ${({ round }) => (round ? '100%' : '0')}; ` -export const Text = styled.div<{ size: string }>` +export const Text = styled.div<{ size: TSIZE }>` ${css.flex('align-center')}; color: ${theme('thread.articleDigest')}; font-size: ${({ size }) => getTextSize(size)}; diff --git a/src/components/IconText/styles/metric.ts b/src/components/IconText/styles/metric.ts index a8d360634..9532b3383 100644 --- a/src/components/IconText/styles/metric.ts +++ b/src/components/IconText/styles/metric.ts @@ -1,8 +1,12 @@ +import type { TSIZE } from '@/spec' import { SIZE } from '@/constant' -export const getIconSize = (size: string): string => { +export const getIconSize = (size: TSIZE): string => { switch (size) { case SIZE.LARGE: { + return '14px' + } + case SIZE.MEDIUM: { return '13px' } case SIZE.TINY: { @@ -17,7 +21,7 @@ export const getIconSize = (size: string): string => { } } -export const getTextSize = (size: string): string => { +export const getTextSize = (size: TSIZE): string => { switch (size) { case SIZE.LARGE: { return '15px' @@ -31,11 +35,14 @@ export const getTextSize = (size: string): string => { } } -export const getMargin = (size: string): string => { +export const getMargin = (size: TSIZE): string => { switch (size) { case SIZE.LARGE: { return '8px' } + case SIZE.MEDIUM: { + return '5px' + } case SIZE.TINY: { return '2px' }