mirror of https://gitee.com/answerdev/answer.git
Merge branch 'feat/ui-0.7.0' of git.backyard.segmentfault.com:opensource/answer into feat/ui-0.7.0
This commit is contained in:
commit
96a7b47923
|
@ -552,7 +552,7 @@ ui:
|
|||
placeholder: Search
|
||||
footer:
|
||||
build_on: >-
|
||||
Built on <1> Answer </1>- the open-source software that power Q&A
|
||||
Built on <1> Answer </1>- the open-source software that powers Q&A
|
||||
communities.<br />Made with love © {{cc}}.
|
||||
upload_img:
|
||||
name: Change
|
||||
|
@ -732,6 +732,7 @@ ui:
|
|||
write_answer:
|
||||
title: Your Answer
|
||||
btn_name: Post your answer
|
||||
add_another_answer: Add another answer
|
||||
confirm_title: Continue to answer
|
||||
continue: Continue
|
||||
confirm_info: >-
|
||||
|
|
|
@ -505,7 +505,7 @@ ui:
|
|||
placeholder: 搜索
|
||||
footer:
|
||||
build_on: >-
|
||||
Built on <1> Answer </1>- the open-source software that power Q&A
|
||||
Built on <1> Answer </1>- the open-source software that powers Q&A
|
||||
communities<br />Made with love © 2022 Answer
|
||||
upload_img:
|
||||
name: 更改图片
|
||||
|
|
|
@ -50,6 +50,7 @@
|
|||
"@testing-library/jest-dom": "^4.2.4",
|
||||
"@testing-library/react": "^13.3.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"@types/color": "^3.0.3",
|
||||
"@types/jest": "^27.5.2",
|
||||
"@types/lodash": "^4.14.184",
|
||||
"@types/marked": "^4.0.6",
|
||||
|
|
1190
ui/pnpm-lock.yaml
1190
ui/pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
@ -19,6 +19,7 @@ const Editor = ({
|
|||
onBlur,
|
||||
editorPlaceholder,
|
||||
getEditorInstance,
|
||||
autoFocus,
|
||||
}) => {
|
||||
const elRef = useRef<HTMLDivElement>(null);
|
||||
const [editor, setEditor] = useState<CodeMirror.Editor | null>(null);
|
||||
|
@ -38,6 +39,9 @@ const Editor = ({
|
|||
lineWrapping: true,
|
||||
placeholder: editorPlaceholder,
|
||||
});
|
||||
if (autoFocus) {
|
||||
cm.focus();
|
||||
}
|
||||
cm.on('change', (e) => {
|
||||
const newValue = e.getValue();
|
||||
eventRef.current?.onChange?.(newValue);
|
||||
|
|
|
@ -169,7 +169,7 @@
|
|||
}
|
||||
}
|
||||
.content-wrap {
|
||||
height: 270px;
|
||||
height: 264px;
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
|
|
|
@ -49,10 +49,19 @@ interface Props extends EventRef {
|
|||
editorPlaceholder?;
|
||||
className?;
|
||||
value;
|
||||
autoFocus?: boolean;
|
||||
}
|
||||
|
||||
const MDEditor: ForwardRefRenderFunction<EditorRef, Props> = (
|
||||
{ editorPlaceholder = '', className = '', value, onChange, onFocus, onBlur },
|
||||
{
|
||||
editorPlaceholder = '',
|
||||
className = '',
|
||||
value,
|
||||
onChange,
|
||||
onFocus,
|
||||
onBlur,
|
||||
autoFocus = false,
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const [markdown, setMarkdown] = useState<string>(value || '');
|
||||
|
@ -146,6 +155,7 @@ const MDEditor: ForwardRefRenderFunction<EditorRef, Props> = (
|
|||
<div className="content-wrap">
|
||||
<Editor
|
||||
value={markdown}
|
||||
autoFocus={autoFocus}
|
||||
onChange={handleChange}
|
||||
onFocus={handleFocus}
|
||||
onBlur={handleBlur}
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
import { FC, useRef, useEffect, memo } from 'react';
|
||||
import { FormControl, FormControlProps } from 'react-bootstrap';
|
||||
|
||||
const TextArea: FC<FormControlProps> = ({ value, onChange, size }) => {
|
||||
const TextArea: FC<
|
||||
FormControlProps & { rows?: number; autoFocus?: boolean }
|
||||
> = ({ value, onChange, size, rows = 1, autoFocus = true, ...rest }) => {
|
||||
const ref = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
const autoGrow = () => {
|
||||
|
@ -21,13 +23,14 @@ const TextArea: FC<FormControlProps> = ({ value, onChange, size }) => {
|
|||
<FormControl
|
||||
as="textarea"
|
||||
className="resize-none font-monospace"
|
||||
rows={1}
|
||||
rows={rows}
|
||||
size={size}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
autoFocus
|
||||
autoFocus={autoFocus}
|
||||
ref={ref}
|
||||
onInput={autoGrow}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -10,15 +10,12 @@ const AnswerLinks = () => {
|
|||
<h6 className="mb-3">{t('answer_links')}</h6>
|
||||
<Row>
|
||||
<Col xs={6}>
|
||||
<a href="https://answer.dev" target="_blank" rel="noreferrer">
|
||||
<a href="https://answer.dev/docs" target="_blank" rel="noreferrer">
|
||||
{t('documents')}
|
||||
</a>
|
||||
</Col>
|
||||
<Col xs={6}>
|
||||
<a
|
||||
href="https://github.com/answerdev/answer/issues"
|
||||
target="_blank"
|
||||
rel="noreferrer">
|
||||
<a href="https://meta.answer.dev" target="_blank" rel="noreferrer">
|
||||
{t('feedback')}
|
||||
</a>
|
||||
</Col>
|
||||
|
|
|
@ -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<Props> = ({ visible = false, data, callback }) => {
|
|||
|
||||
handleSubmit();
|
||||
};
|
||||
const handleFocusForTextArea = () => {
|
||||
setShowEditor(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form noValidate className="mt-4">
|
||||
{showEditor && (
|
||||
{(!data.answered || showEditor) && (
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>
|
||||
<h5>{t('title')}</h5>
|
||||
|
@ -93,28 +96,41 @@ const Index: FC<Props> = ({ visible = false, data, callback }) => {
|
|||
isInvalid={formData.content.isInvalid}
|
||||
className="d-none"
|
||||
/>
|
||||
<Editor
|
||||
className={classNames(
|
||||
'form-control p-0',
|
||||
focusType === 'answer' && 'focus',
|
||||
)}
|
||||
value={formData.content.value}
|
||||
onChange={(val) => {
|
||||
setFormData({
|
||||
content: {
|
||||
value: val,
|
||||
isInvalid: false,
|
||||
errorMsg: '',
|
||||
},
|
||||
});
|
||||
}}
|
||||
onFocus={() => {
|
||||
setForceType('answer');
|
||||
}}
|
||||
onBlur={() => {
|
||||
setForceType('');
|
||||
}}
|
||||
/>
|
||||
{!showEditor && !data.answered && (
|
||||
<div className="d-flex">
|
||||
<TextArea
|
||||
className="w-100"
|
||||
rows={8}
|
||||
autoFocus={false}
|
||||
onFocus={handleFocusForTextArea}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{showEditor && (
|
||||
<Editor
|
||||
className={classNames(
|
||||
'form-control p-0',
|
||||
focusType === 'answer' && 'focus',
|
||||
)}
|
||||
value={formData.content.value}
|
||||
autoFocus
|
||||
onChange={(val) => {
|
||||
setFormData({
|
||||
content: {
|
||||
value: val,
|
||||
isInvalid: false,
|
||||
errorMsg: '',
|
||||
},
|
||||
});
|
||||
}}
|
||||
onFocus={() => {
|
||||
setForceType('answer');
|
||||
}}
|
||||
onBlur={() => {
|
||||
setForceType('');
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Form.Control.Feedback type="invalid">
|
||||
{formData.content.errorMsg}
|
||||
|
@ -122,7 +138,11 @@ const Index: FC<Props> = ({ visible = false, data, callback }) => {
|
|||
</Form.Group>
|
||||
)}
|
||||
|
||||
<Button onClick={clickBtn}>{t('btn_name')}</Button>
|
||||
{data.answered && !showEditor ? (
|
||||
<Button onClick={clickBtn}>{t('add_another_answer')}</Button>
|
||||
) : (
|
||||
<Button onClick={clickBtn}>{t('btn_name')}</Button>
|
||||
)}
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -128,6 +128,13 @@ const Index = () => {
|
|||
count: answers.count + 1,
|
||||
list: [...answers.list, obj],
|
||||
});
|
||||
|
||||
if (question) {
|
||||
setQuestion({
|
||||
...question,
|
||||
answered: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
Loading…
Reference in New Issue