From e5ebde028a042736ed75832e221c4c9f759ae522 Mon Sep 17 00:00:00 2001 From: robin Date: Fri, 16 Dec 2022 15:09:42 +0800 Subject: [PATCH 1/3] refactor(ui): improved answering questions interaction --- ui/src/components/Editor/index.scss | 2 +- ui/src/components/TextArea/index.tsx | 9 ++- .../Detail/components/WriteAnswer/index.tsx | 69 ++++++++++++------- ui/src/pages/Questions/Detail/index.tsx | 7 ++ 4 files changed, 58 insertions(+), 29 deletions(-) diff --git a/ui/src/components/Editor/index.scss b/ui/src/components/Editor/index.scss index abbda7cb..ac29b42d 100644 --- a/ui/src/components/Editor/index.scss +++ b/ui/src/components/Editor/index.scss @@ -169,7 +169,7 @@ } } .content-wrap { - height: 270px; + height: 264px; } .CodeMirror { diff --git a/ui/src/components/TextArea/index.tsx b/ui/src/components/TextArea/index.tsx index 6dd0a4f7..0d53f8db 100644 --- a/ui/src/components/TextArea/index.tsx +++ b/ui/src/components/TextArea/index.tsx @@ -1,7 +1,9 @@ import { FC, useRef, useEffect, memo } from 'react'; import { FormControl, FormControlProps } from 'react-bootstrap'; -const TextArea: FC = ({ value, onChange, size }) => { +const TextArea: FC< + FormControlProps & { rows?: number; autoFocus?: boolean } +> = ({ value, onChange, size, rows = 1, autoFocus = true, ...rest }) => { const ref = useRef(null); const autoGrow = () => { @@ -21,13 +23,14 @@ const TextArea: FC = ({ value, onChange, size }) => { ); }; diff --git a/ui/src/pages/Questions/Detail/components/WriteAnswer/index.tsx b/ui/src/pages/Questions/Detail/components/WriteAnswer/index.tsx index 8d1ef1be..38e4a4ae 100644 --- a/ui/src/pages/Questions/Detail/components/WriteAnswer/index.tsx +++ b/ui/src/pages/Questions/Detail/components/WriteAnswer/index.tsx @@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'; import { marked } from 'marked'; import classNames from 'classnames'; -import { Editor, Modal } from '@/components'; +import { Editor, Modal, TextArea } from '@/components'; import { FormDataType } from '@/common/interface'; import { postAnswer } from '@/services'; @@ -81,10 +81,13 @@ const Index: FC = ({ visible = false, data, callback }) => { handleSubmit(); }; + const handleFocusForTextArea = () => { + setShowEditor(true); + }; return (
- {showEditor && ( + {(!data.answered || showEditor) && (
{t('title')}
@@ -93,28 +96,40 @@ const Index: FC = ({ visible = false, data, callback }) => { isInvalid={formData.content.isInvalid} className="d-none" /> - { - setFormData({ - content: { - value: val, - isInvalid: false, - errorMsg: '', - }, - }); - }} - onFocus={() => { - setForceType('answer'); - }} - onBlur={() => { - setForceType(''); - }} - /> + {!showEditor && !data.answered && ( +
+