Skip to content
Snippets Groups Projects
Commit 2e718aa6 authored by chris's avatar chris
Browse files

set on blur

parent da063846
No related branches found
No related tags found
1 merge request!161Connect ui
...@@ -47,7 +47,7 @@ const ButtonGroup = styled.div` ...@@ -47,7 +47,7 @@ const ButtonGroup = styled.div`
const CommentReply = props => { const CommentReply = props => {
const { className, isNewComment, onClickPost } = props; const { className, isNewComment, onClickPost } = props;
const [value, setValue] = useState(''); const [commentValue, setCommentValue] = useState('');
const commentInput = useRef(null); const commentInput = useRef(null);
useEffect(() => { useEffect(() => {
...@@ -59,13 +59,26 @@ const CommentReply = props => { ...@@ -59,13 +59,26 @@ const CommentReply = props => {
const handleSubmit = e => { const handleSubmit = e => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
onClickPost(value); onClickPost(commentValue);
setValue(''); setCommentValue('');
}; };
const resetValue = e => { const resetValue = e => {
e.preventDefault(); e.preventDefault();
setValue(''); setCommentValue('');
};
const onBlur = () => {
const {
current: { value },
} = commentInput;
if (value !== '') {
// Save into local storage
}
if (isNewComment === 0 && value === '') {
// resolveComment();
}
}; };
return ( return (
...@@ -74,25 +87,26 @@ const CommentReply = props => { ...@@ -74,25 +87,26 @@ const CommentReply = props => {
<TextWrapper> <TextWrapper>
<ReplyTextArea <ReplyTextArea
ref={commentInput} ref={commentInput}
onBlur={onBlur}
placeholder={isNewComment ? 'Write comment...' : 'Reply...'} placeholder={isNewComment ? 'Write comment...' : 'Reply...'}
onChange={e => setValue(e.target.value)} onChange={e => setCommentValue(e.target.value)}
onKeyDown={e => { onKeyDown={e => {
if (e.keyCode === 13 && !e.shiftKey) { if (e.keyCode === 13 && !e.shiftKey) {
e.preventDefault(); e.preventDefault();
if (value) handleSubmit(e); if (commentValue) handleSubmit(e);
} }
}} }}
value={value} value={commentValue}
/> />
</TextWrapper> </TextWrapper>
<ActionWrapper> <ActionWrapper>
<ButtonGroup> <ButtonGroup>
<Button disabled={value.length === 0} primary type="submit"> <Button disabled={commentValue.length === 0} primary type="submit">
Post Post
</Button> </Button>
<Button disabled={value.length === 0} onClick={resetValue}> <Button disabled={commentValue.length === 0} onClick={resetValue}>
Cancel Cancel
</Button> </Button>
</ButtonGroup> </ButtonGroup>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment