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

add top/position on connected component

parent 2faa3c17
No related branches found
No related tags found
1 merge request!161Connect ui
Hide whitespace changes
Inline Side-by-side
wax-prosemirror-components/src/components/comments/ConnectedComment.js
+ 18
− 8
View file @ fa6436b9
......@@ -5,6 +5,10 @@ import { DocumentHelpers } from 'wax-prosemirror-utilities';
import { WaxContext } from 'wax-prosemirror-core';
import CommentBox from '../../ui/comments/CommentBox';
const ConnectedCommentStyled = styled.div`
position: absolute;
`;
export default ({ key, comment, dataBox, top, commentId, commentData }) => {
const MemorizedComponent = memo(() => {
const {
......@@ -19,19 +23,25 @@ export default ({ key, comment, dataBox, top, commentId, commentData }) => {
} = useContext(WaxContext);
let active = false;
const styles = {
top: `${top}px`,
};
const commentPlugin = app.PmPlugins.get('commentPlugin');
const activeComment = commentPlugin.getState(activeView.state).comment;
if (activeComment && commentId === activeComment.attrs.id) active = true;
return (
<CommentBox
key={commentId}
active={active}
dataBox={commentId}
top={top}
commentId={commentId}
commentData={commentData}
/>
<ConnectedCommentStyled data-box={commentId} style={styles}>
<CommentBox
key={commentId}
active={active}
dataBox={commentId}
top={top}
commentId={commentId}
commentData={commentData}
/>
</ConnectedCommentStyled>
);
});
return <MemorizedComponent />;
......
wax-prosemirror-components/src/ui/comments/CommentBox.js
+ 1
− 16
View file @ fa6436b9
......@@ -25,7 +25,6 @@ const Wrapper = styled.div`
box-sizing: border-box;
display: flex;
flex-direction: column;
position: absolute;
/* padding: 8px 0; */
${props => !props.active && inactive}
......@@ -60,7 +59,6 @@ const CommentBox = props => {
onClickBox,
onClickPost,
onClickResolve,
top,
} = props;
// send signal to make this comment active
......@@ -71,19 +69,8 @@ const CommentBox = props => {
if (!active && (!commentData || commentData.length === 0)) return null;
const style = {
top: `${top}px`,
};
return (
<Wrapper
style={style}
active={active}
data-box={commentId}
className={className}
onClick={onClickWrapper}
top={top}
>
<Wrapper active={active} className={className} onClick={onClickWrapper}>
{active && commentData.length > 0 && (
<Head>
<Resolve onClick={() => onClickResolve(commentId)}>Resolve</Resolve>
......@@ -105,7 +92,6 @@ const CommentBox = props => {
CommentBox.propTypes = {
/** Whether this is the current active comment */
active: PropTypes.bool,
top: PropTypes.number,
/** List of objects containing data for comment items */
commentData: PropTypes.arrayOf(
PropTypes.shape({
......@@ -129,7 +115,6 @@ CommentBox.propTypes = {
};
CommentBox.defaultProps = {
top: 0,
active: false,
commentData: [],
};
......
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