added msg edit component [#40]

This commit is contained in:
unknown 2021-08-20 19:12:07 +05:30
parent a4b762e1b1
commit fe3d2e0af4
2 changed files with 46 additions and 4 deletions

View file

@ -1,4 +1,4 @@
import React from 'react'; import React, { useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './Message.scss'; import './Message.scss';
@ -13,7 +13,9 @@ import { getUsername } from '../../../util/matrixUtil';
import Text from '../../atoms/text/Text'; import Text from '../../atoms/text/Text';
import RawIcon from '../../atoms/system-icons/RawIcon'; import RawIcon from '../../atoms/system-icons/RawIcon';
import Button from '../../atoms/button/Button';
import Tooltip from '../../atoms/tooltip/Tooltip'; import Tooltip from '../../atoms/tooltip/Tooltip';
import Input from '../../atoms/input/Input';
import ReplyArrowIC from '../../../../public/res/ic/outlined/reply-arrow.svg'; import ReplyArrowIC from '../../../../public/res/ic/outlined/reply-arrow.svg';
@ -124,6 +126,30 @@ MessageContent.propTypes = {
isEdited: PropTypes.bool, isEdited: PropTypes.bool,
}; };
function MessageEdit({ content, onSave, onCancel }) {
const editInputRef = useRef(null);
return (
<form className="message__edit" onSubmit={(e) => { e.preventDefault(); onSave(editInputRef.current.value); }}>
<Input
forwardRef={editInputRef}
value={content}
placeholder="Edit message"
required
resizable
/>
<div className="message__edit-btns">
<Button type="submit" variant="primary">Save</Button>
<Button onClick={onCancel}>Cancel</Button>
</div>
</form>
);
}
MessageEdit.propTypes = {
content: PropTypes.string.isRequired,
onSave: PropTypes.func.isRequired,
onCancel: PropTypes.func.isRequired,
};
function MessageReactionGroup({ children }) { function MessageReactionGroup({ children }) {
return ( return (
<div className="message__reactions text text-b3 noselect"> <div className="message__reactions text text-b3 noselect">
@ -192,7 +218,7 @@ MessageOptions.propTypes = {
}; };
function Message({ function Message({
avatar, header, reply, content, reactions, options, avatar, header, reply, content, editContent, reactions, options,
}) { }) {
const msgClass = header === null ? ' message--content-only' : ' message--full'; const msgClass = header === null ? ' message--content-only' : ' message--full';
return ( return (
@ -203,7 +229,8 @@ function Message({
<div className="message__main-container"> <div className="message__main-container">
{header !== null && header} {header !== null && header}
{reply !== null && reply} {reply !== null && reply}
{content} {content !== null && content}
{editContent !== null && editContent}
{reactions !== null && reactions} {reactions !== null && reactions}
{options !== null && options} {options !== null && options}
</div> </div>
@ -214,6 +241,8 @@ Message.defaultProps = {
avatar: null, avatar: null,
header: null, header: null,
reply: null, reply: null,
content: null,
editContent: null,
reactions: null, reactions: null,
options: null, options: null,
}; };
@ -221,7 +250,8 @@ Message.propTypes = {
avatar: PropTypes.node, avatar: PropTypes.node,
header: PropTypes.node, header: PropTypes.node,
reply: PropTypes.node, reply: PropTypes.node,
content: PropTypes.node.isRequired, content: PropTypes.node,
editContent: PropTypes.node,
reactions: PropTypes.node, reactions: PropTypes.node,
options: PropTypes.node, options: PropTypes.node,
}; };
@ -231,6 +261,7 @@ export {
MessageHeader, MessageHeader,
MessageReply, MessageReply,
MessageContent, MessageContent,
MessageEdit,
MessageReactionGroup, MessageReactionGroup,
MessageReaction, MessageReaction,
MessageOptions, MessageOptions,

View file

@ -94,6 +94,7 @@
.message__reply, .message__reply,
.message__content, .message__content,
.message__edit,
.message__reactions { .message__reactions {
max-width: 640px; max-width: 640px;
min-width: 0; min-width: 0;
@ -164,6 +165,15 @@
color: var(--tc-surface-low); color: var(--tc-surface-low);
} }
} }
.message__edit {
padding: var(--sp-extra-tight) 0;
&-btns button {
margin: var(--sp-tight) var(--sp-tight) 0 0;
[dir=rtl] & {
margin: 0 0 var(--sp-tight) var(--sp-tight);
}
}
}
.message__reactions { .message__reactions {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -238,6 +248,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
right: 60px; right: 60px;
z-index: 999;
transform: translateY(-50%); transform: translateY(-50%);
border-radius: var(--bo-radius); border-radius: var(--bo-radius);