feat(abuse report): redesign (#1069)

* chore(abuse-report): basic setup && fix generator typo

* chore(abuse-report): wip

* chore(abuse-report): wip

* chore(abuse-report): wip

* chore(abuse-report): wip

* chore(abuse-report): wip

* chore(abuse-report): wip

* chore(abuse-report): wip

* chore(abuse-report): wip

* chore(abuse-report): wip

* chore(abuse-report): wip

* chore(abuse-report): wip

* chore(abuse-report): wip

* refactor(reporter): update docs

* chore(abuse-report): wip

* chore(abuse-report): wip

* chore(abuse-report): wip

* chore(abuse-report): remove old informer system

* chore(abuse-report): ignore error

* chore(abuse-report): build error

* chore(abuse-report): build error

Author: mydearxym

.gitignore

@@ -12,5 +12,4 @@ cypress//integration/examples
 cypress/videos/
 .vscode/
 .DS_Store
-report.*
 .eslintcache

public/icons/static/article/report-solid.svg

@@ -8,18 +8,16 @@ import React from 'react'
 import T from 'prop-types'
 import { values } from 'ramda'
 
-import { ICON_CMD } from '@/config'
 import { THREAD } from '@/constant'
 import { buildLog } from '@/utils'
 
-import Informer from '@/containers/tool/Informer'
 import PinOption from './PinOption'
 import RefineOption from './RefineOption'
 import EditOption from './EditOption'
 import CommunitySetterOption from './CommunitySetterOption'
 import DeleteOption from './DeleteOption'
 
-import { Wrapper, Option, OptionIcon, OptionTitle } from './styles'
+import { Wrapper } from './styles'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:ArticleActionsPanel:index')
@@ -33,7 +31,6 @@ const ArticleActionsPanel = ({
   onSetRefined,
   onUnsetRefined,
   onEdit,
-  onInform,
   onDelete,
   onCommunitySet,
 }) => {
@@ -66,13 +63,6 @@ const ArticleActionsPanel = ({
         onCommunitySet={onCommunitySet}
       />
 
-      <Informer>
-        <Option onClick={onInform}>
-          <OptionIcon src={`${ICON_CMD}/flag.svg`} />
-          <OptionTitle>举报该内容</OptionTitle>
-        </Option>
-      </Informer>
-
       <DeleteOption
         passport="owner"
         ownerId={data.author?.id}
@@ -100,7 +90,6 @@ ArticleActionsPanel.propTypes = {
   }).isRequired,
   communityRaw: T.string.isRequired,
   thread: T.oneOf(values(THREAD)),
-  onInform: T.func,
   onDelete: T.func,
   onEdit: T.func,
   onPin: T.func,
@@ -112,7 +101,6 @@ ArticleActionsPanel.propTypes = {
 
 ArticleActionsPanel.defaultProps = {
   thread: THREAD.POST,
-  onInform: log,
   onDelete: log,
   onEdit: log,
   onPin: log,

public/icons/static/article/report.svg

@@ -23,7 +23,7 @@ type TProps = {
   direction?: 'left' | 'right'
   dimWhenIdle?: boolean
   disabled?: boolean
-  arrowStyle?: string
+  arrowStyle?: 'default' | 'simple'
 }
 
 const ArrowButton: React.FC<TProps> = ({

src/components/ArticleActionsPanel/index.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { Space } from '@/components/Common'
+import Button from './Button'
+
+import { Wrapper, CancelBtn } from './styles/yes_or_no_buttons'
+
+type TProps = {
+  align?: 'center' | 'right'
+  cancelText?: string
+  confirmText?: string
+  onCancel?: () => void
+  onConfirm?: () => void
+}
+
+const YesOrNoButton: React.FC<TProps> = ({
+  align = 'center',
+  cancelText = '取消',
+  confirmText = '确定',
+  onCancel = console.log,
+  onConfirm = console.log,
+}) => {
+  return (
+    <Wrapper align={align}>
+      <CancelBtn onClick={() => onCancel?.()}>{cancelText}</CancelBtn>
+      <Space left={5} right={10} />
+      <Button size="small" type="primary" onClick={() => onConfirm?.()}>
+        {confirmText}
+      </Button>
+    </Wrapper>
+  )
+}
+
+export default YesOrNoButton

src/components/Buttons/ArrowButton.tsx

@@ -6,3 +6,4 @@ export { default as OrButton } from './OrButton'
 export { default as DropdownButton } from './DropdownButton'
 export { default as NotifyButton } from './NotifyButton'
 export { default as FollowButton } from './FollowButton'
+export { default as YesOrNoButtons } from './YesOrNoButtons'

src/components/Buttons/YesOrNoButtons.tsx

@@ -0,0 +1,15 @@
+import styled from 'styled-components'
+
+import { css, theme } from '@/utils'
+
+type TWrapper = { align: 'center' | 'right' }
+export const Wrapper = styled.div<TWrapper>`
+  ${css.flex('align-center')};
+  width: 100%;
+  justify-content: ${({ align }) =>
+    align === 'center' ? 'center' : 'flex-end'};
+`
+export const CancelBtn = styled.div`
+  color: ${theme('button.primary')};
+  font-size: 14px;
+`

src/components/Buttons/index.tsx

@@ -17,19 +17,19 @@ import { Wrapper, IconWrapper, Icon, ChildWrapper } from './styles'
 const log = buildLog('c:Checker:index')
 
 type TProps = {
-  children: React.ReactNode
+  children?: React.ReactNode | null
   checked?: boolean
-  hiddenMode: boolean
+  hiddenMode?: boolean
   size?: TSIZE_SM
-  onChange: (checked: boolean) => void
+  onChange?: (checked: boolean) => void
 }
 
 const Checker: React.FC<TProps> = ({
   checked = false,
   onChange = log,
   hiddenMode = false,
   size = SIZE.MEDIUM,
-  children,
+  children = null,
 }) => {
   const show = checked || !hiddenMode
 

src/components/Buttons/styles/yes_or_no_buttons.ts

@@ -14,13 +14,12 @@ export const Wrapper = styled.div<TActive>`
 `
 export const IconWrapper = styled.div<TItem>`
   position: relative;
-  background: ${({ checked }) => (checked ? '#114759' : '#00262F')};
+  background: ${({ checked }) => (checked ? '#0d3d4e' : '#012f3a')};
   width: ${({ size }) => getIconSize(size)};
   height: ${({ size }) => getIconSize(size)};
   ${css.flex('align-both')};
   border: 1px solid;
-  border-color: ${({ checked }) => (checked ? 'transparent' : '#114759')};
-
+  border-color: ${({ checked }) => (checked ? '#246b8c' : '#1c5975')};
   border-radius: ${({ size }) => getBorderRadius(size)};
 
   transition: all 0.2s;