Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat/draft quote message #422

Open
wants to merge 8 commits into
base: develop
Choose a base branch
from
Open

Feat/draft quote message #422

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
414638b
add-quote-uiButton
umangutkarsh Jan 23, 2024
dbbe513
quote-context/hook/component
umangutkarsh Jan 23, 2024
7526c6d
use-quote-context
umangutkarsh Jan 23, 2024
4d7579f
modify-ui
umangutkarsh Jan 23, 2024
774f7e5
modify-funtionality/ui
umangutkarsh Jan 23, 2024
f377f21
minor-changes
umangutkarsh Jan 23, 2024
90ac667
add-quote-as-attachment
umangutkarsh Jan 23, 2024
58b4708
comment-unused-code
umangutkarsh Jan 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
182 changes: 169 additions & 13 deletions packages/react/src/components/Attachments/PinnedAttachment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,176 @@
import React from 'react';
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import Attachments from './Attachments';
import { css } from '@emotion/react';
import { Box } from '../Box';
import { Icon } from '../Icon';
import { ActionButton } from '../ActionButton';
import { format, isSameDay } from 'date-fns';
import RCContext from '../../context/RCInstance';

const PinnedAttachment = ({ attachment }) => (
<Box
style={{
borderInlineStart: '1px solid currentColor',
}}
>
<Box>{attachment?.author_name}</Box>
<Box>{attachment?.text}</Box>
</Box>
);
const quoteStyles = css`
display: flex;
flex-direction: column;
position: relative;
max-width: 95%;
margin: 5px auto 5px auto;
padding: 10px;
background-color: #f7f8fa;
border: 1px;
border-color: #d6d8db;
border-radius: 5px;

export default PinnedAttachment;
.rcx-attachment__details {
font-size: 14px;
color: #777;
display: flex;
border: 1px;
border-color: #d6d8db;
}

.rcx-attachment__author {
display: flex;
align-items: center;
margin-bottom: 8px;
max-width: 50%;
}

.rcx-attachment__author-avatar {
width: 24px;
height: 24px;
margin-right: 8px;
border-radius: 15%;
}

.rcx-attachment__author-name {
flex-grow: 1;
font-size: 16.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: max-content;
margin-right: 10px;
color: #93979e;
}

.rcx-attachment__time {
font-size: 12px;
color: #777;
margin-right: 10px;
}

.rcx-attachment__content {
width: 100%;
margin-bottom: 4px;
}

.rcx-message-body {
color: #333;
letter-spacing: 0rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.25rem;
flex-shrink: 1;
transition: opacity 0.3s linear;
word-break: break-word;
opacity: 1;
margin-top: 0.125rem;
margin-bottom: 0.125rem;
margin-block: 0.125rem;
max-width: max-content;
}

.rcx-action-button {
align-self: flex-end;

&:hover {
background-color: #e4e7ea !important;
}
}
`;

const PinnedAttachment = ({ attachment, onCancel }) => {

const { RCInstance } = useContext(RCContext);
// console.log(RCContext);
// console.log(RCInstance);
let host = RCInstance.getHost();

console.log(attachment);
umangutkarsh marked this conversation as resolved.
Show resolved Hide resolved
// console.log(host);

const formatTime = (timestamp) => {
console.log('Timestamp: ', timestamp);
const messageDate = new Date(timestamp);
const currentDate = new Date();

console.log(messageDate + '/' + currentDate);

if (isSameDay(messageDate, currentDate)) {
return format(messageDate, 'hh:mm a');
} else {
return format(messageDate, 'MMMM dd, yyyy');
}
};

return (
<Box css={quoteStyles}>
<Box className="rcx-attachment__details">
umangutkarsh marked this conversation as resolved.
Show resolved Hide resolved
<Box className="rcx-attachment__content">
<Box className="rcx-attachment__author">
{!!attachment.author_icon && (
<Box
className="rcx-attachment__author-avatar"
is="img"
src={`${host}${attachment.author_icon}`}
/>
)}
<Box className="rcx-attachment__author-name">
<b>{attachment.author_name}</b>
</Box>
{!!attachment.ts && (
<Box className="rcx-attachment__time">
{formatTime(attachment.ts)}
</Box>
)}
</Box>
<Box>
<Box className="rcx-message-body">{attachment.text}</Box>
</Box>
{!!attachment.attachments && (
<Box className="rcx-attachment__content">
<Attachments attachments={attachment.attachments} />
</Box>
)}
</Box>
{!!onCancel && (
<Box>
<ActionButton
ghost
className="rcx-action-button"
size="small"
onClick={onCancel}
>
<Icon name="cross" size="15px" />
</ActionButton>
</Box>
)}
</Box>
</Box>
);
};

PinnedAttachment.propTypes = {
attachment: PropTypes.object,
attachment: PropTypes.shape({
author_icon: PropTypes.string,
author_link: PropTypes.string,
author_name: PropTypes.string,
ts: PropTypes.number,
md: PropTypes.string,
text: PropTypes.string,
attachments: PropTypes.array,
collapsed: PropTypes.bool,
}),
};

export default PinnedAttachment;
176 changes: 176 additions & 0 deletions packages/react/src/components/Attachments/QuoteAttachment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
// import React, { useContext } from 'react';
// import PropTypes from 'prop-types';
// import Attachments from './Attachments';
// import { css } from '@emotion/react';
// import { Box } from '../Box';
// import { Icon } from '../Icon';
// import { ActionButton } from '../ActionButton';
// import { format, isSameDay } from 'date-fns';
// import RCContext from '../../context/RCInstance';

// const quoteStyles = css`
// display: flex;
// flex-direction: column;
// position: relative;
// max-width: 95%;
// margin: 5px auto 5px auto;
// padding: 10px;
// background-color: #f7f8fa;
// border: 1px;
// border-color: #d6d8db;
// border-radius: 5px;

// .rcx-attachment__details {
// font-size: 14px;
// color: #777;
// display: flex;
// border: 1px;
// border-color: #d6d8db;
// }

// .rcx-attachment__author {
// display: flex;
// align-items: center;
// margin-bottom: 8px;
// max-width: 50%;
// }

// .rcx-attachment__author-avatar {
// width: 24px;
// height: 24px;
// margin-right: 8px;
// border-radius: 15%;
// }

// .rcx-attachment__author-name {
// flex-grow: 1;
// font-size: 16.5px;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
// max-width: max-content;
// margin-right: 10px;
// color: #93979e;
// }

// .rcx-attachment__time {
// font-size: 12px;
// color: #777;
// margin-right: 10px;
// }

// .rcx-attachment__content {
// width: 100%;
// margin-bottom: 4px;
// }

// .rcx-message-body {
// color: #333;
// letter-spacing: 0rem;
// font-size: 0.875rem;
// font-weight: 400;
// line-height: 1.25rem;
// flex-shrink: 1;
// transition: opacity 0.3s linear;
// word-break: break-word;
// opacity: 1;
// margin-top: 0.125rem;
// margin-bottom: 0.125rem;
// margin-block: 0.125rem;
// max-width: max-content;
// }

// .rcx-action-button {
// align-self: flex-end;

// &:hover {
// background-color: #e4e7ea !important;
// }
// }
// `;

// const QuoteAttachment = ({ attachment, onCancel }) => {

// const { RCInstance } = useContext(RCContext);
// // console.log(RCContext);
// // console.log(RCInstance);
// let host = RCInstance.getHost();

// console.log(attachment);
// // console.log(host);

// const formatTime = (timestamp) => {
// console.log('Timestamp: ', timestamp);
// const messageDate = new Date(timestamp);
// const currentDate = new Date();

// console.log(messageDate + '/' + currentDate);

// if (isSameDay(messageDate, currentDate)) {
// return format(messageDate, 'hh:mm a');
// } else {
// return format(messageDate, 'MMMM dd, yyyy');
// }
// };

// return (
// <Box css={quoteStyles}>
// <Box className="rcx-attachment__details">
// <Box className="rcx-attachment__content">
// <Box className="rcx-attachment__author">
// {!!attachment.author_icon && (
// <Box
// className="rcx-attachment__author-avatar"
// is="img"
// src={`${host}${attachment.author_icon}`}
// />
// )}
// <Box className="rcx-attachment__author-name">
// <b>{attachment.author_name}</b>
// </Box>
// {!!attachment.ts && (
// <Box className="rcx-attachment__time">
// {formatTime(attachment.ts)}
// </Box>
// )}
// </Box>
// <Box>
// <Box className="rcx-message-body">{attachment.text}</Box>
// </Box>
// {!!attachment.attachments && (
// <Box className="rcx-attachment__content">
// <Attachments attachments={attachment.attachments} />
// </Box>
// )}
// </Box>
// {!!onCancel && (
// <Box>
// <ActionButton
// ghost
// className="rcx-action-button"
// size="small"
// onClick={onCancel}
// >
// <Icon name="cross" size="15px" />
// </ActionButton>
// </Box>
// )}
// </Box>
// </Box>
// );
// };

// QuoteAttachment.propTypes = {
// attachment: PropTypes.shape({
// author_icon: PropTypes.string,
// author_link: PropTypes.string,
// author_name: PropTypes.string,
// ts: PropTypes.number,
// md: PropTypes.string,
// text: PropTypes.string,
// attachments: PropTypes.array,
// collapsed: PropTypes.bool,
// }),
// };

// export default QuoteAttachment;
Loading