Apr 26, 2021 · Apr 25, 2021 · Apr 25, 2021 · Apr 25, 2021 · Apr 25, 2021 · Apr 25, 2021
diff --git a/.gitignore b/.gitignore
 cypress/videos/
 .vscode/
 .DS_Store
 report.*
 .eslintcache
diff --git a/public/icons/static/article/report-solid.svg b/public/icons/static/article/report-solid.svg
diff --git a/public/icons/static/article/report.svg b/public/icons/static/article/report.svg
diff --git a/src/components/ArticleActionsPanel/index.js b/src/components/ArticleActionsPanel/index.js
 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')
  onSetRefined,
  onUnsetRefined,
  onEdit,
  onInform,
  onDelete,
  onCommunitySet,
 }) => {
        onCommunitySet={onCommunitySet}
      />

      <Informer>
        <Option onClick={onInform}>
          <OptionIcon src={`${ICON_CMD}/flag.svg`} />
          <OptionTitle>举报该内容</OptionTitle>
        </Option>
      </Informer>

      <DeleteOption
        passport="owner"
        ownerId={data.author?.id}
  }).isRequired,
  communityRaw: T.string.isRequired,
  thread: T.oneOf(values(THREAD)),
  onInform: T.func,
  onDelete: T.func,
  onEdit: T.func,
  onPin: T.func,

 ArticleActionsPanel.defaultProps = {
  thread: THREAD.POST,
  onInform: log,
  onDelete: log,
  onEdit: log,
  onPin: log,
diff --git a/src/components/Buttons/ArrowButton.tsx b/src/components/Buttons/ArrowButton.tsx
  direction?: 'left' | 'right'
  dimWhenIdle?: boolean
  disabled?: boolean
  arrowStyle?:string
  arrowStyle?:'default' | 'simple'
 }

 const ArrowButton: React.FC<TProps> = ({
diff --git a/src/components/Buttons/YesOrNoButtons.tsx b/src/components/Buttons/YesOrNoButtons.tsx
 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
diff --git a/src/components/Buttons/index.tsx b/src/components/Buttons/index.tsx
 export { default as DropdownButton } from './DropdownButton'
 export { default as NotifyButton } from './NotifyButton'
 export { default as FollowButton } from './FollowButton'
 export { default as YesOrNoButtons } from './YesOrNoButtons'
diff --git a/src/components/Buttons/styles/yes_or_no_buttons.ts b/src/components/Buttons/styles/yes_or_no_buttons.ts
 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;
 `
diff --git a/src/components/Checker/index.tsx b/src/components/Checker/index.tsx
 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

diff --git a/src/components/Checker/styles/index.ts b/src/components/Checker/styles/index.ts
 `
 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;
diff --git a/src/components/FormItem/styles/index.ts b/src/components/FormItem/styles/index.ts
    error === 'true' ? theme('baseColor.red') : ''};
  border-right-color: ${({ error }) =>
    error === 'true' ? theme('baseColor.red') : ''};
  border: 1px solid tomato;
 `

 export const FormItemWrapper = styled.div<TSpace>`
diff --git a/src/components/Input/Textarea.js b/src/components/Input/Textarea.js
diff --git a/src/components/Input/Textarea.tsx b/src/components/Input/Textarea.tsx
 /*
 *
 * 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)
diff --git a/src/components/Input/index.js → src/components/Input/index.tsx b/src/components/Input/index.js → src/components/Input/index.tsx
 */

 import React, { useCallback } from 'react'
 import T from 'prop-types'
 import { pickBy } from 'ramda'

 import { buildLog, nilOrEmpty } from '@/utils'
 /* 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])
      </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)
diff --git a/src/components/Input/styles/index.ts b/src/components/Input/styles/index.ts
 type IInput = {
  hasPrefix: boolean
  hasSuffix: boolean
  spellcheck: string
 }

 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
diff --git a/src/components/Input/styles/textarea.ts b/src/components/Input/styles/textarea.ts

 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;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,5 +12,4 @@ cypress//integration/examples
		cypress/videos/
		.vscode/
		.DS_Store
		report.*
		.eslintcache
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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')
Expand All		@@ -33,7 +31,6 @@ const ArticleActionsPanel = ({
		onSetRefined,
		onUnsetRefined,
		onEdit,
		onInform,
		onDelete,
		onCommunitySet,
		}) => {
Expand DownExpand Up		@@ -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}
Expand DownExpand Up		@@ -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,
Expand All		@@ -112,7 +101,6 @@ ArticleActionsPanel.propTypes = {

		ArticleActionsPanel.defaultProps = {
		thread: THREAD.POST,
		onInform: log,
		onDelete: log,
		onEdit: log,
		onPin: log,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -23,7 +23,7 @@ type TProps = {
		direction?: 'left' \| 'right'
		dimWhenIdle?: boolean
		disabled?: boolean
		arrowStyle?:string
		arrowStyle?:'default' \| 'simple'
		}

		const ArrowButton: React.FC<TProps> = ({
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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'
Original file line number	Diff line number	Diff line change
		@@ -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;
		`
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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;
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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>`
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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)