feat(notice-bar): extract common comp (#1064)

Author: mydearxym

public/icons/static/shape/warning.svg

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { ICON } from '@/config'
+import { LockIcon, NoticeIcon } from './styles/icon'
+
+type TProps = {
+  type?: 'lock' | 'notice' | 'bot'
+}
+
+const Icon: React.FC<TProps> = ({ type = 'notice' }) => {
+  switch (type) {
+    case 'lock': {
+      return <LockIcon src={`${ICON}/shape/lock.svg`} />
+    }
+    default: {
+      return <NoticeIcon src={`${ICON}/shape/warning.svg`} />
+    }
+  }
+}
+
+export default React.memo(Icon)

src/components/NoticeBar/Icon.tsx

@@ -0,0 +1,58 @@
+/*
+ *
+ * NoticeBar
+ *
+ */
+
+import React from 'react'
+
+import TimeAgo from 'timeago-react'
+
+import { buildLog } from '@/utils'
+import { ICON } from '@/config'
+
+import Icon from './Icon'
+
+import { Wrapper, Main, UserName, AuthorTag, Timestamp, Why } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:NoticeBar:index')
+
+type TProps = {
+  testid?: string
+  type?: 'lock' | 'notice' | 'bot'
+  user?: {
+    nickname: string
+  } | null
+  isArticleAuthor?: boolean
+  content: string
+  timestamp?: string | null
+}
+
+const NoticeBar: React.FC<TProps> = ({
+  testid = 'notice-bar',
+  type = 'notice',
+  user = null,
+  isArticleAuthor = false,
+  content,
+  timestamp = null,
+}) => {
+  return (
+    <Wrapper testid={testid}>
+      <Icon type={type} />
+      <Main>
+        {user && <UserName>{user.nickname}</UserName>}
+        {isArticleAuthor && <AuthorTag>(作者)</AuthorTag>}
+        {content}
+      </Main>
+      {timestamp && (
+        <Timestamp>
+          <TimeAgo datetime={timestamp} locale="zh_CN" />
+        </Timestamp>
+      )}
+      <Why src={`${ICON}/shape/question.svg`} />
+    </Wrapper>
+  )
+}
+
+export default React.memo(NoticeBar)

src/components/NoticeBar/index.tsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components'
+
+// import type { TTestable } from '@/spec'
+import Img from '@/Img'
+import { css, theme } from '@/utils'
+
+const Icon = styled(Img)`
+  fill: #a57a32; // ${theme('thread.articleTitle')};
+  ${css.size(15)};
+  margin-right: 12px;
+`
+export const LockIcon = styled(Icon)`
+  fill: #a57a32; // ${theme('thread.articleTitle')};
+`
+export const NoticeIcon = styled(Icon)`
+  fill: #a57a32; // ${theme('thread.articleTitle')};
+`

src/components/NoticeBar/styles/icon.ts

@@ -0,0 +1,47 @@
+import styled from 'styled-components'
+
+import type { TTestable } from '@/spec'
+
+import Img from '@/Img'
+import { css, theme } from '@/utils'
+
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TTestable>`
+  ${css.flex('align-center')};
+  color: ${theme('thread.articleTitle')};
+  padding-left: 12px;
+  padding-right: 15px;
+  width: 100%;
+  height: 40px;
+  background: #00333f;
+  border-radius: 8px;
+`
+export const Main = styled.div`
+  flex-grow: 1;
+  font-size: 14px;
+`
+export const UserName = styled.span`
+  color: ${theme('thread.articleTitle')};
+  margin-right: 5px;
+`
+export const AuthorTag = styled.span`
+  color: ${theme('thread.articleDigest')};
+  margin-left: 2px;
+  margin-right: 5px;
+`
+export const Timestamp = styled.div`
+  color: ${theme('thread.articleDigest')};
+  font-size: 12px;
+`
+export const Why = styled(Img)`
+  ${css.size(15)};
+  fill: ${theme('thread.articleDigest')};
+  margin-left: 10px;
+  margin-top: -1px;
+
+  &:hover {
+    fill: ${theme('thread.articleTitle')};
+    cursor: pointer;
+  }
+`

src/components/NoticeBar/styles/index.ts

@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import NoticeBar from '../index'
+
+describe('TODO <NoticeBar />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true)
+  })
+})

src/components/NoticeBar/tests/index.test.ts

@@ -7,7 +7,9 @@
 import React from 'react'
 
 import { pluggedIn, buildLog } from '@/utils'
+
 import Modal from '@/components/Modal'
+import NoticeBar from '@/components/NoticeBar'
 
 import CommentEditor from './CommentEditor'
 import List from './List'
@@ -75,6 +77,15 @@ const CommentsContainer: React.FC<TProps> = ({
         />
       )}
 
+      <br />
+      <NoticeBar
+        type="lock"
+        content="关闭了评论: 已解决"
+        timestamp={new Date().toLocaleDateString()}
+        user={{ nickname: 'mydearxym' }}
+        isArticleAuthor
+      />
+
       <List
         accountInfo={accountInfo}
         pagedComments={pagedCommentsData}