diff --git a/.gitignore b/.gitignore index 7feb5f152..01377a572 100755 --- a/.gitignore +++ b/.gitignore @@ -12,5 +12,4 @@ cypress//integration/examples 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 new file mode 100644 index 000000000..d4b35a49a --- /dev/null +++ b/public/icons/static/article/report-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/static/article/report.svg b/public/icons/static/article/report.svg new file mode 100644 index 000000000..5619a8598 --- /dev/null +++ b/public/icons/static/article/report.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/ArticleActionsPanel/index.js b/src/components/ArticleActionsPanel/index.js index 639a4cd7b..597c09309 100755 --- a/src/components/ArticleActionsPanel/index.js +++ b/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} /> - - - - = ({ diff --git a/src/components/Buttons/YesOrNoButtons.tsx b/src/components/Buttons/YesOrNoButtons.tsx new file mode 100644 index 000000000..20239f1bc --- /dev/null +++ b/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 = ({ + align = 'center', + cancelText = '取消', + confirmText = '确定', + onCancel = console.log, + onConfirm = console.log, +}) => { + return ( + + onCancel?.()}>{cancelText} + + + + ) +} + +export default YesOrNoButton diff --git a/src/components/Buttons/index.tsx b/src/components/Buttons/index.tsx index a9e14362a..911f53b88 100755 --- a/src/components/Buttons/index.tsx +++ b/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' diff --git a/src/components/Buttons/styles/yes_or_no_buttons.ts b/src/components/Buttons/styles/yes_or_no_buttons.ts new file mode 100644 index 000000000..0a30e4e54 --- /dev/null +++ b/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` + ${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 index 1554b79c6..b3c5350a6 100755 --- a/src/components/Checker/index.tsx +++ b/src/components/Checker/index.tsx @@ -17,11 +17,11 @@ 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 = ({ @@ -29,7 +29,7 @@ const Checker: React.FC = ({ 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 index 95d1f21be..46b3719f5 100755 --- a/src/components/Checker/styles/index.ts +++ b/src/components/Checker/styles/index.ts @@ -14,13 +14,12 @@ export const Wrapper = styled.div` ` export const IconWrapper = styled.div` 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 index 01b710844..129daa95b 100755 --- a/src/components/FormItem/styles/index.ts +++ b/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` diff --git a/src/components/Input/Textarea.js b/src/components/Input/Textarea.js deleted file mode 100644 index 1ada89659..000000000 --- a/src/components/Input/Textarea.js +++ /dev/null @@ -1,51 +0,0 @@ -/* - * - * Input - * - */ - -import React, { useCallback } from 'react' -import T from 'prop-types' -import { pickBy } from 'ramda' - -import { buildLog } from '@/utils' - -import { Wrapper } from './styles/textarea' - -/* eslint-disable-next-line */ -const log = buildLog('c:Input:index') - -const Textarea = ({ onChange, testid, ...restProps }) => { - const handleOnChange = useCallback((e) => onChange && onChange(e), [onChange]) - const validProps = pickBy((v) => v !== null, restProps) - - return ( - - ) -} - -Textarea.propTypes = { - placeholder: T.string, - value: T.oneOfType([T.string, T.instanceOf(null)]), - onChange: T.oneOfType([T.func, T.instanceOf(null)]), - disabled: T.bool, - autoFocus: T.bool, - testid: T.string, -} - -Textarea.defaultProps = { - placeholder: '', - value: null, - onChange: null, - disabled: false, - autoFocus: false, - testid: 'input', -} - -export default React.memo(Textarea) diff --git a/src/components/Input/Textarea.tsx b/src/components/Input/Textarea.tsx new file mode 100644 index 000000000..751fc0594 --- /dev/null +++ b/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 = ({ + onChange = null, + testid = 'textarea', + ...restProps +}) => { + const handleOnChange = useCallback((e) => onChange?.(e), [onChange]) + const validProps = pickBy((v) => v !== null, restProps) + + return ( + + ) +} + +export default React.memo(Textarea) diff --git a/src/components/Input/index.js b/src/components/Input/index.tsx similarity index 56% rename from src/components/Input/index.js rename to src/components/Input/index.tsx index 44161e2aa..eeb4c32af 100755 --- a/src/components/Input/index.js +++ b/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 = ({ + 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 = ({ ) : ( -