feat(abuse report): redesign

.gitignore

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

src/components/ArticleActionsPanel/index.js

@@ -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,

src/components/Buttons/ArrowButton.tsx

@@ -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/Buttons/YesOrNoButtons.tsx

@@ -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/index.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/styles/yes_or_no_buttons.ts

@@ -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/Checker/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/Checker/styles/index.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;

src/components/FormItem/styles/index.ts

@@ -26,6 +26,7 @@ export const TextAreaInput = styled(Input)<{ error: string }>`
     error === 'true' ? theme('baseColor.red') : ''};
   border-right-color: ${({ error }) =>
     error === 'true' ? theme('baseColor.red') : ''};
+  border: 1px solid tomato;
 `
 
 export const FormItemWrapper = styled.div<TSpace>`

src/components/Input/Textarea.tsx

@@ -0,0 +1,43 @@
+/*
+ *
+ * Input
+ *
+ */
+
+import React, { useCallback } from 'react'
+import { pickBy } from 'ramda'
+
+import { buildLog } from '@/utils'
+
+import { Wrapper } from './styles/textarea'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:Input:index')
+
+type TProps = {
+  testid?: string
+  placeholder?: string
+  value?: string | null
+  onChange?: (e) => void | null
+}
+
+const Textarea: React.FC<TProps> = ({
+  onChange = null,
+  testid = 'textarea',
+  ...restProps
+}) => {
+  const handleOnChange = useCallback((e) => onChange?.(e), [onChange])
+  const validProps = pickBy((v) => v !== null, restProps)
+
+  return (
+    <Wrapper
+      testid={testid}
+      onChange={handleOnChange}
+      minRows={1}
+      spellcheck="false"
+      {...validProps}
+    />
+  )
+}
+
+export default React.memo(Textarea)

src/components/Input/index.js → src/components/Input/index.tsx

@@ -5,7 +5,6 @@
  */
 
 import React, { useCallback } from 'react'
-import T from 'prop-types'
 import { pickBy } from 'ramda'
 
 import { buildLog, nilOrEmpty } from '@/utils'
@@ -22,14 +21,29 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('c:Input:index')
 
-const Input = ({
-  behavior,
-  onChange,
-  prefixIcon,
-  prefixActive,
-  suffixIcon,
-  suffixActive,
-  testid,
+type TProps = {
+  testid?: string
+  behavior?: 'default' | 'textarea'
+  placeholder?: string
+  value?: string | null
+  prefixIcon?: string | null
+  prefixActive?: boolean
+  suffixIcon?: string | null
+  suffixActive?: boolean
+  disabled?: boolean
+  autoFocus?: boolean
+
+  onChange?: (e) => void | null
+}
+
+const Input: React.FC<TProps> = ({
+  behavior = 'default',
+  onChange = null,
+  prefixIcon = null,
+  prefixActive = false,
+  suffixIcon = null,
+  suffixActive = false,
+  testid = 'input',
   ...restProps
 }) => {
   const handleOnChange = useCallback((e) => onChange && onChange(e), [onChange])
@@ -53,36 +67,8 @@ const Input = ({
       </SuffixWrapper>
     </Wrapper>
   ) : (
-    <Textarea testid={testid} onChange={onChange} minRows={1} {...restProps} />
+    <Textarea testid={testid} onChange={onChange} {...restProps} />
   )
 }
 
-Input.propTypes = {
-  behavior: T.oneOf(['default', 'textarea']),
-  placeholder: T.string,
-  value: T.oneOfType([T.string, T.instanceOf(null)]),
-  onChange: T.oneOfType([T.func, T.instanceOf(null)]),
-  prefixIcon: T.oneOfType([T.string, T.instanceOf(null)]),
-  prefixActive: T.bool,
-  suffixIcon: T.oneOfType([T.string, T.instanceOf(null)]),
-  suffixActive: T.bool,
-  disabled: T.bool,
-  autoFocus: T.bool,
-  testid: T.string,
-}
-
-Input.defaultProps = {
-  behavior: 'default',
-  placeholder: '',
-  value: null,
-  onChange: null,
-  prefixIcon: null,
-  prefixActive: false,
-  suffixIcon: null,
-  suffixActive: false,
-  disabled: false,
-  autoFocus: false,
-  testid: 'input',
-}
-
 export default React.memo(Input)

src/components/Input/styles/index.ts

@@ -7,6 +7,7 @@ import { css, theme } from '@/utils'
 type IInput = {
   hasPrefix: boolean
   hasSuffix: boolean
+  spellcheck: string
 }
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({

src/components/Input/styles/textarea.ts

@@ -6,13 +6,18 @@ import { theme } from '@/utils'
 
 import { baseInput } from './index'
 
+type TWrapper = TTestable | { spellcheck: string }
+
 export const Wrapper = styled(TextareaAutosize).attrs(
   ({ testid }: TTestable) => ({
     'data-test-id': testid,
   }),
-)<TTestable>`
+)<TWrapper>`
   ${baseInput};
-  background-color: #0b2631;
+  color: ${theme('form.text')};
+  min-height: 56px;
+  padding: 6px 10px;
+  background-color: #06303b;
   border: 1px solid;
   border-color: ${theme('editor.border')};
   resize: none;