From 47cd66496b2b8aa79b14cfcb7393e3729ffc39cc Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 7 Sep 2020 18:00:49 +0700 Subject: [PATCH] message editing form works properly --- package.json | 1 + src/components/profile/Message/index.tsx | 5 ++-- src/components/profile/MessageForm/index.tsx | 26 ++++++++++++---- .../profile/MessageForm/styles.scss | 1 + .../profile/ProfileMessages/index.tsx | 2 ++ src/styles/inputs.scss | 30 +++++++++---------- yarn.lock | 5 ++++ 7 files changed, 47 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index 39c04b54..fb67aae3 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "@hot-loader/react-dom": "^16.10.2", "@typescript-eslint/eslint-plugin": "^1.13.0", "@typescript-eslint/parser": "^1.13.0", + "autosize": "^4.0.2", "axios": "^0.18.0", "babel-runtime": "^6.26.0", "body-scroll-lock": "^2.6.4", diff --git a/src/components/profile/Message/index.tsx b/src/components/profile/Message/index.tsx index c0b4eafd..b1415fa7 100644 --- a/src/components/profile/Message/index.tsx +++ b/src/components/profile/Message/index.tsx @@ -13,10 +13,11 @@ interface IProps { incoming: boolean; onEdit: (id: number) => void; onDelete: (id: number) => void; + onCancelEdit: () => void; isEditing: boolean; } -const Message: FC = ({ message, incoming, onEdit, onDelete, isEditing }) => { +const Message: FC = ({ message, incoming, onEdit, onDelete, isEditing, onCancelEdit }) => { const onEditClicked = useCallback(() => onEdit(message.id), [message.id]); const onDeleteClicked = useCallback(() => onDelete(message.id), [message.id]); @@ -24,7 +25,7 @@ const Message: FC = ({ message, incoming, onEdit, onDelete, isEditing })
{isEditing ? (
- +
) : (
diff --git a/src/components/profile/MessageForm/index.tsx b/src/components/profile/MessageForm/index.tsx index fe478750..86fb7556 100644 --- a/src/components/profile/MessageForm/index.tsx +++ b/src/components/profile/MessageForm/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, useState, useCallback, KeyboardEventHandler } from 'react'; +import React, { FC, useState, useCallback, KeyboardEventHandler, useMemo } from 'react'; import styles from './styles.scss'; import { Textarea } from '~/components/input/Textarea'; import { Filler } from '~/components/containers/Filler'; @@ -22,19 +22,27 @@ type IProps = ReturnType & typeof mapDispatchToProps & { id?: number; text?: string; + onCancel?: () => void; }; const MessageFormUnconnected: FC = ({ - id = 0, - text: initialText = '', profile: { is_sending_messages, is_loading_messages, messages_error }, authSendMessage, + + id = 0, + text: initialText = '', + onCancel, }) => { + const isEditing = useMemo(() => id > 0, [id]); const [text, setText] = useState(initialText); const onSuccess = useCallback(() => { setText(''); - }, [setText]); + + if (isEditing) { + onCancel(); + } + }, [setText, isEditing, onCancel]); const onSubmit = useCallback(() => { authSendMessage({ text, id }, onSuccess); @@ -61,7 +69,7 @@ const MessageFormUnconnected: FC = ({ value={text} handler={setText} minRows={1} - maxRows={4} + maxRows={isEditing ? 15 : 5} seamless onKeyDown={onKeyDown} disabled={is_sending_messages} @@ -73,6 +81,12 @@ const MessageFormUnconnected: FC = ({ {is_sending_messages && } + {isEditing && ( + + )} + diff --git a/src/components/profile/MessageForm/styles.scss b/src/components/profile/MessageForm/styles.scss index f74c984f..7f935dbf 100644 --- a/src/components/profile/MessageForm/styles.scss +++ b/src/components/profile/MessageForm/styles.scss @@ -20,6 +20,7 @@ justify-content: center; flex-direction: row; padding: 0 $gap / 2 $gap / 2 $gap / 2; + border-radius: 0 0 $radius $radius; :global(.loader-circle) { svg { diff --git a/src/containers/profile/ProfileMessages/index.tsx b/src/containers/profile/ProfileMessages/index.tsx index 2c895d80..5b55746c 100644 --- a/src/containers/profile/ProfileMessages/index.tsx +++ b/src/containers/profile/ProfileMessages/index.tsx @@ -23,6 +23,7 @@ const ProfileMessagesUnconnected: FC = ({ profile, user: { id }, authGet const [editingMessageId, setEditingMessageId] = useState(0); const onEditMessage = useCallback((id: number) => setEditingMessageId(id), [setEditingMessageId]); + const onCancelEdit = useCallback(() => setEditingMessageId(0), [setEditingMessageId]); const onDeleteMessage = useCallback((id: number) => console.log({ id }), []); useEffect(() => { @@ -57,6 +58,7 @@ const ProfileMessagesUnconnected: FC = ({ profile, user: { id }, authGet onEdit={onEditMessage} onDelete={onDeleteMessage} isEditing={editingMessageId === message.id} + onCancelEdit={onCancelEdit} /> ))} diff --git a/src/styles/inputs.scss b/src/styles/inputs.scss index 3fc643dd..477b7cb4 100644 --- a/src/styles/inputs.scss +++ b/src/styles/inputs.scss @@ -31,7 +31,7 @@ padding: 0; textarea { - padding: $gap; + padding: $gap / 2 $gap; } } } @@ -77,20 +77,20 @@ color: white; position: relative; - &::before { - content: ' '; - background: linear-gradient(270deg, $input_bg_color $gap, transparentize($input_bg_color, 1)); - position: absolute; - width: $gap * 2; - height: $input_height; - top: 1px; - right: 1px; - transform: translateX(0); - transition: transform 0.25s; - border-radius: 0 $input_radius $input_radius 0; - pointer-events: none; - touch-action: none; - } + //&::before { + // content: ' '; + // background: linear-gradient(270deg, $input_bg_color $gap, transparentize($input_bg_color, 1)); + // position: absolute; + // width: $gap * 2; + // height: $input_height; + // top: 1px; + // right: 1px; + // transform: translateX(0); + // transition: transform 0.25s; + // border-radius: 0 $input_radius $input_radius 0; + // pointer-events: none; + // touch-action: none; + //} } &.required { diff --git a/yarn.lock b/yarn.lock index 10333913..b6bf4884 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1368,6 +1368,11 @@ autoresponsive-react@^1.1.31: autoresponsive-core "^1.0.1" exenv "^1.2.0" +autosize@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/autosize/-/autosize-4.0.2.tgz#073cfd07c8bf45da4b9fd153437f5bafbba1e4c9" + integrity sha512-jnSyH2d+qdfPGpWlcuhGiHmqBJ6g3X+8T+iRwFrHPLVcdoGJE/x6Qicm6aDHfTsbgZKxyV8UU/YB2p4cjKDRRA== + awesome-typescript-loader@^5.2.1: version "5.2.1" resolved "https://registry.yarnpkg.com/awesome-typescript-loader/-/awesome-typescript-loader-5.2.1.tgz#a41daf7847515f4925cdbaa3075d61f289e913fc"