chore(js-ts): comments & related-comps

src/components/DotDivider/index.tsx

@@ -0,0 +1,28 @@
+/*
+ *
+ * DotDivider
+ *
+ */
+
+import React from 'react'
+
+import { buildLog } from '@/utils'
+import { Wrapper } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:DotDivider:index')
+
+export type TProps = {
+  className?: string
+  radius?: number
+  space?: number
+}
+const DotDivider: React.FC<TProps> = ({
+  radius = 3,
+  space = 3,
+  className = 'dot-divider-class',
+}) => {
+  return <Wrapper radius={radius} space={space} className={className} />
+}
+
+export default React.memo(DotDivider)

src/components/DotDivider/styles/index.ts

@@ -1,8 +1,9 @@
 import styled from 'styled-components'
 import { theme } from '@/utils'
 
-type TDot = { radius: string; space: string }
-export const Wrapper = styled.div<TDot>`
+import type { TProps } from '../index'
+
+export const Wrapper = styled.div<TProps>`
   width: ${({ radius }) => `${radius}px`};
   height: ${({ radius }) => `${radius}px`};
   border-radius: 100%;

src/components/ImgFallback/Avatar.js → src/components/ImgFallback/Avatar.tsx

@@ -5,25 +5,27 @@
  */
 
 import React from 'react'
-import T from 'prop-types'
 
 import { buildLog } from '@/utils'
 
+import type { TAvatarProps as TProps } from './index'
 import { Wrapper, Name } from './styles/avatar'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:ImgFallback:Avatar')
 
-const Avatar = ({
-  testid,
-  className,
-  size,
-  user,
-  left,
-  right,
-  top,
-  bottom,
-  quote,
+const Avatar: React.FC<TProps> = ({
+  testid = 'avatar-fallback',
+  className = '',
+  size = 15,
+  user = {
+    nickname: '?',
+  },
+  left = 0,
+  right = 0,
+  top = 0,
+  bottom = 0,
+  quote = false,
 }) => {
   const name = user?.nickname
   const sliceCount = size > 32 ? 2 : 1
@@ -44,32 +46,4 @@ const Avatar = ({
   )
 }
 
-Avatar.propTypes = {
-  testid: T.string,
-  className: T.string,
-  user: T.shape({
-    nickname: T.string,
-  }),
-  size: T.number,
-  left: T.number,
-  right: T.number,
-  top: T.number,
-  bottom: T.number,
-  quote: T.bool,
-}
-
-Avatar.defaultProps = {
-  testid: 'avatar-fallback',
-  className: '',
-  size: 15,
-  user: {
-    nickname: '?',
-  },
-  left: 0,
-  right: 0,
-  top: 0,
-  bottom: 0,
-  quote: false,
-}
-
 export default React.memo(Avatar)

src/components/ImgFallback/Work.js → src/components/ImgFallback/Work.tsx

@@ -127,8 +127,12 @@ const rollTheDice = () => {
   }
 }
 
-const Work = () => {
-  return <Wrapper>{rollTheDice()}</Wrapper>
+type TProps = {
+  testid?: string
+}
+
+const Work: React.FC<TProps> = ({ testid = 'image-fallbak-work' }) => {
+  return <Wrapper testid={testid}>{rollTheDice()}</Wrapper>
 }
 
 export default React.memo(Work)

src/components/ImgFallback/index.tsx

@@ -0,0 +1,45 @@
+/*
+ *
+ * ImgFallback
+ *
+ */
+
+import React from 'react'
+
+import type { TUser } from '@/spec'
+import { buildLog } from '@/utils'
+
+import Work from './Work'
+import Avatar from './Avatar'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:ImgFallback:index')
+
+export type TAvatarProps = {
+  testid?: string
+  className?: string
+  user?: TUser
+  size?: number
+  left?: number
+  right?: number
+  top?: number
+  bottom?: number
+  quote?: boolean
+}
+
+type TProps = {
+  type?: 'avatar' | 'work'
+} & TAvatarProps
+
+const ImgFallback: React.FC<TProps> = ({ type = 'avatar', ...restProps }) => {
+  switch (type) {
+    case 'work': {
+      return <Work />
+    }
+
+    default:
+      return <Avatar {...restProps} />
+  }
+}
+
+export default React.memo(ImgFallback)

src/components/ImgFallback/styles/avatar.ts

@@ -1,17 +1,16 @@
 import styled from 'styled-components'
 
-import type { TTestable, TSpace } from '@/spec'
+import type { TTestable } from '@/spec'
 import { css, theme } from '@/utils'
+
+import type { TAvatarProps } from '../index'
 import { getFontSize } from './metric/avatar'
 
-type IWrapper = TSpace & {
-  size: string
-  quote: string
-}
+type TWrapper = TTestable & TAvatarProps
 
-export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+export const Wrapper = styled.div.attrs(({ testid }: TWrapper) => ({
   'data-test-id': testid,
-}))<TTestable & IWrapper>`
+}))<TWrapper>`
   ${css.flex('align-both')};
   color: ${theme('thread.articleTitle')};
   width: ${({ size }) => `${size}px`};

src/containers/unit/Comments/Comment/Actions.js → src/containers/unit/Comments/Comment/Actions.tsx

@@ -1,9 +1,16 @@
 import React from 'react'
 
+import type { TAccount, TComment } from '@/spec'
+
 import { Wrapper, ReplyAction } from '../styles/comment/actions'
 import { openUpdateEditor, openReplyEditor, onDelete } from '../logic'
 
-const Actions = ({ data, accountInfo }) => {
+type TProps = {
+  data: TComment
+  accountInfo: TAccount
+}
+
+const Actions: React.FC<TProps> = ({ data, accountInfo }) => {
   if (String(data.author.id) === accountInfo.id) {
     return (
       <Wrapper>

src/containers/unit/Comments/Comment/DeleteMask.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { Button } from '@/components/Buttons'
+
+import {
+  DeleteOverlay,
+  DeleteHintText,
+  DeleteBtnGroup,
+} from '../styles/comment/delete_mask'
+
+import { cancelDelete, deleteComment } from '../logic'
+
+type TProps = {
+  show: boolean
+}
+
+const DeleteMask: React.FC<TProps> = ({ show }) => {
+  return (
+    <DeleteOverlay show={show}>
+      <DeleteHintText>删除后该该评论将不可恢复</DeleteHintText>
+      <DeleteBtnGroup>
+        <Button size="small" type="red" ghost onClick={cancelDelete}>
+          取消
+        </Button>
+        &nbsp;&nbsp;
+        <Button size="small" type="red" onClick={deleteComment}>
+          确定删除
+        </Button>
+      </DeleteBtnGroup>
+    </DeleteOverlay>
+  )
+}
+
+export default React.memo(DeleteMask)

src/containers/unit/Comments/Comment/DesktopView.js → src/containers/unit/Comments/Comment/DesktopView.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { isEmpty } from 'ramda'
 
+import type { TAccount, TComment } from '@/spec'
 import { Global } from '@/utils'
 
 import MarkDownRender from '@/components/MarkDownRender'
@@ -25,7 +26,13 @@ const getSelection = () => {
   }
 }
 
-const Comment = ({ data, tobeDeleteId, accountInfo }) => {
+type TProps = {
+  data: TComment
+  accountInfo: TAccount
+  tobeDeleteId: string
+}
+
+const Comment: React.FC<TProps> = ({ data, tobeDeleteId, accountInfo }) => {
   return (
     <Wrapper>
       <DeleteMask show={data.id === tobeDeleteId} />

src/containers/unit/Comments/Comment/Footer.js → src/containers/unit/Comments/Comment/Footer.tsx

@@ -1,14 +1,20 @@
 import React from 'react'
 import TimeAgo from 'timeago-react'
 
+import type { TAccount, TComment } from '@/spec'
 import { SpaceGrow } from '@/components/Common'
 import DotDivider from '@/components/DotDivider'
 
 import Actions from './Actions'
 
 import { Wrapper, PublishDateWrapper } from '../styles/comment/footer'
 
-const Footer = ({ data, accountInfo }) => (
+type TProps = {
+  data: TComment
+  accountInfo: TAccount
+}
+
+const Footer: React.FC<TProps> = ({ data, accountInfo }) => (
   <Wrapper>
     <PublishDateWrapper>
       <TimeAgo datetime={data.insertedAt} locale="zh_CN" />