react-easy-wall 3.5.15 → 3.5.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/comment/components/CommentContainer.js +2 -2
- package/dist/cjs/components/comment/components/CommentContainer.js.map +1 -1
- package/dist/cjs/components/comment/components/create-comment/CreateComment.js +2 -7
- package/dist/cjs/components/comment/components/create-comment/CreateComment.js.map +1 -1
- package/dist/esm/components/comment/components/CommentContainer.js +2 -2
- package/dist/esm/components/comment/components/CommentContainer.js.map +1 -1
- package/dist/esm/components/comment/components/create-comment/CreateComment.js +2 -7
- package/dist/esm/components/comment/components/create-comment/CreateComment.js.map +1 -1
- package/dist/esm/types/components/comment/components/CommentContainer.d.ts +1 -0
- package/dist/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -13,14 +13,14 @@ var Grid = require('../../../node_modules/@mui/material/esm/Grid/Grid.js');
|
|
|
13
13
|
var Box = require('../../../node_modules/@mui/material/esm/Box/Box.js');
|
|
14
14
|
var Divider = require('../../../node_modules/@mui/material/esm/Divider/Divider.js');
|
|
15
15
|
|
|
16
|
-
const CommentContainer = ({ comment, commentItemProps = {}, replyCommentItemProps = {}, replyCommentContainerProps = {}, }) => {
|
|
16
|
+
const CommentContainer = ({ comment, commentItemProps = {}, replyCommentItemProps = {}, replyCommentContainerProps = {}, mentionColor = theme.PRIMARY_COLOR, }) => {
|
|
17
17
|
const { commentId } = index.libExports.useStore(comment_store.replyCommentStore);
|
|
18
18
|
const onReply = (r) => {
|
|
19
19
|
if (comment.id === commentId) {
|
|
20
20
|
comment_actions.replyCommentStoreAction('', 0);
|
|
21
21
|
}
|
|
22
22
|
else {
|
|
23
|
-
comment_actions.replyCommentStoreAction(`<b style="color:${
|
|
23
|
+
comment_actions.replyCommentStoreAction(`<b style="color:${mentionColor}">@${r.user?.name}</b> `, comment.id);
|
|
24
24
|
}
|
|
25
25
|
};
|
|
26
26
|
const selectedComment = commentId === comment.id;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommentContainer.js","sources":["../../../../../src/components/comment/components/CommentContainer.tsx"],"sourcesContent":["'use client'
|
|
1
|
+
{"version":3,"file":"CommentContainer.js","sources":["../../../../../src/components/comment/components/CommentContainer.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Comment, ReplyComment } from '@/shared/types/generated';\nimport { Box, Divider, Grid } from '@mui/material';\nimport { ReplyComments } from './reply-comment/ReplyComments';\nimport { CommentItem } from './CommentItem';\nimport { useStore } from '@cobuildlab/react-simple-state';\nimport { replyCommentStore } from '../comment.store';\nimport {\n CreateReplyCommentContainer,\n CreateReplyCommentContainerProps,\n} from './reply-comment/CreateReplyCommentContainer';\nimport { replyCommentStoreAction } from '../comment.actions';\nimport { PRIMARY_COLOR } from '@/shared/mui/theme';\nimport { CommentItemExtraProps } from '@/components/comment/comment.types';\n\nexport type CommentContainerProps = {\n comment: Comment;\n commentItemProps?: CommentItemExtraProps;\n replyCommentItemProps?: CommentItemExtraProps;\n replyCommentContainerProps?: CreateReplyCommentContainerProps;\n mentionColor?: string;\n};\nexport const CommentContainer: React.FC<CommentContainerProps> = ({\n comment,\n commentItemProps = {},\n replyCommentItemProps = {},\n replyCommentContainerProps = {},\n mentionColor = PRIMARY_COLOR,\n}) => {\n const { commentId } = useStore(replyCommentStore);\n\n const onReply = (r: Comment | ReplyComment) => {\n if (comment.id === commentId) {\n replyCommentStoreAction('', 0);\n } else {\n replyCommentStoreAction(\n `<b style=\"color:${mentionColor}\">@${r.user?.name}</b> `,\n comment.id as number,\n );\n }\n };\n\n const selectedComment = commentId === comment.id;\n const haveReplyComments = comment.replies?.length;\n\n return (\n <Grid container>\n <Grid size={12} mb={2}>\n <CommentItem comment={comment} onReply={onReply} commentItemProps={commentItemProps} />\n </Grid>\n {selectedComment || haveReplyComments ? (\n <Grid size={12} mb={2}>\n <Grid container>\n <Grid size={1}>\n <Box display=\"flex\" height=\"100%\" justifyContent=\"center\">\n <Divider orientation=\"vertical\" flexItem />\n </Box>\n </Grid>\n <Grid size={11}>\n <Grid container spacing={2}>\n {haveReplyComments ? (\n <Grid size={12}>\n <ReplyComments\n replyComments={(comment.replies || []) as ReplyComment[]}\n onReply={onReply}\n replyCommentItemProps={replyCommentItemProps}\n />\n </Grid>\n ) : null}\n {selectedComment ? (\n <Grid size={12}>\n <CreateReplyCommentContainer {...replyCommentContainerProps} />\n </Grid>\n ) : null}\n </Grid>\n </Grid>\n </Grid>\n </Grid>\n ) : null}\n </Grid>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBO;;AASL;AACE;AACE;;;AAEA;;AAKJ;AAEA;AACA;AAEA;AAoCF;;"}
|
|
@@ -24,7 +24,6 @@ var ButtonDefault = require('../../../../shared/components/buttons/ButtonDefault
|
|
|
24
24
|
var Card = require('../../../../node_modules/@mui/material/esm/Card/Card.js');
|
|
25
25
|
var Box = require('../../../../node_modules/@mui/material/esm/Box/Box.js');
|
|
26
26
|
var Avatar = require('../../../../node_modules/@mui/material/esm/Avatar/Avatar.js');
|
|
27
|
-
var Typography = require('../../../../node_modules/@mui/material/esm/Typography/Typography.js');
|
|
28
27
|
|
|
29
28
|
const CreateComment = ({ createCommentAvatarProps = {}, createAvatarContainerProps = {}, createCommentNameTextProps = {}, createCommentButtonProps = {}, createCommentContentProps = {}, createButtonContainerProps = {}, createTextContainerProps = {}, createCommentContainerProps = {}, }) => {
|
|
30
29
|
const { user, subscription } = session_hooks.useSession();
|
|
@@ -46,7 +45,7 @@ const CreateComment = ({ createCommentAvatarProps = {}, createAvatarContainerPro
|
|
|
46
45
|
const canRegistered = onlyForRegistered && user;
|
|
47
46
|
const canSubscriber = onlyForSubscribers && subscription;
|
|
48
47
|
const canComment = canRegistered || canSubscriber;
|
|
49
|
-
return (jsxRuntime.jsx(Card.default, { elevation: 0, children: jsxRuntime.jsxs(Box.default, { sx: { display: { xs: 'block', md: 'flex' }, ...sxCreateCommentContainerProps }, children: [user ? (jsxRuntime.jsx(Box.default, { sx: { ...sxCreateAvatarContainerProps }, children: jsxRuntime.
|
|
48
|
+
return (jsxRuntime.jsx(Card.default, { elevation: 0, children: jsxRuntime.jsxs(Box.default, { sx: { display: { xs: 'block', md: 'flex' }, ...sxCreateCommentContainerProps }, children: [user ? (jsxRuntime.jsx(Box.default, { sx: { ...sxCreateAvatarContainerProps }, children: jsxRuntime.jsx(Box.default, { sx: {
|
|
50
49
|
xs: {
|
|
51
50
|
marginRight: 0,
|
|
52
51
|
marginBottom: 10,
|
|
@@ -57,11 +56,7 @@ const CreateComment = ({ createCommentAvatarProps = {}, createAvatarContainerPro
|
|
|
57
56
|
md: {
|
|
58
57
|
marginRight: 10,
|
|
59
58
|
},
|
|
60
|
-
}, children:
|
|
61
|
-
fontSize: 14,
|
|
62
|
-
fontWeight: 700,
|
|
63
|
-
...sxCreateCommentNameTextProps,
|
|
64
|
-
}, mb: 1, children: user?.name }) })] }) })) : null, jsxRuntime.jsx(Box.default, { component: 'div', sx: { width: '100%', ...sxCreateTextContainerProps }, children: jsxRuntime.jsx(ReactSimpleWysiwyg.ReactSimpleWysiwyg, { value: html, onChange: (value) => setHtml(value), ...createCommentContentProps }) }), jsxRuntime.jsx(Box.default, { sx: { ...sxCreateButtonContainerProps }, children: jsxRuntime.jsx(ButtonDefault.ButtonDefault, { onClick: () => {
|
|
59
|
+
}, children: jsxRuntime.jsx(Avatar.default, { sx: { width: 40, height: 40, marginRight: 1, ...sxCreateCommentAvatarProps }, src: user?.avatar }) }) })) : null, jsxRuntime.jsx(Box.default, { component: 'div', sx: { width: '100%', ...sxCreateTextContainerProps }, children: jsxRuntime.jsx(ReactSimpleWysiwyg.ReactSimpleWysiwyg, { value: html, onChange: (value) => setHtml(value), ...createCommentContentProps }) }), jsxRuntime.jsx(Box.default, { sx: { ...sxCreateButtonContainerProps }, children: jsxRuntime.jsx(ButtonDefault.ButtonDefault, { onClick: () => {
|
|
65
60
|
if (!canComment)
|
|
66
61
|
return comment_actions.openSubscriptionCommentsStoreAction(true);
|
|
67
62
|
callCreateComment({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreateComment.js","sources":["../../../../../../src/components/comment/components/create-comment/CreateComment.tsx"],"sourcesContent":["'use client';\nimport React, { useState } from 'react';\nimport {\n Avatar,\n AvatarProps,\n Box,\n BoxProps,\n ButtonProps,\n Card,\n Typography,\n TypographyProps,\n} from '@mui/material';\nimport { useComment } from '../../comment.hooks';\nimport {\n ReactSimpleWysiwyg,\n ReactSimpleWysiwygProps,\n} from '@/shared/components/react-editor/ReactSimpleWysiwyg';\nimport { useSession } from '@/components/session';\nimport { useCallAction } from '@cobuildlab/react-simple-state';\nimport { createComment, openSubscriptionCommentsStoreAction } from '../../comment.actions';\nimport { theme } from '@/shared/mui/theme';\nimport { ButtonDefault } from '@/shared/components/buttons/ButtonDefault';\n\nexport type CreateCommentProps = {\n createCommentAvatarProps?: AvatarProps;\n createCommentNameTextProps?: TypographyProps;\n createCommentContainerProps?: BoxProps;\n\n createAvatarContainerProps?: BoxProps;\n createButtonContainerProps?: BoxProps;\n createTextContainerProps?: BoxProps;\n\n createCommentButtonProps?: ButtonProps;\n createCommentContentProps?: Omit<ReactSimpleWysiwygProps, 'value' | 'onChange'>;\n};\n\nexport const CreateComment: React.FC<CreateCommentProps> = ({\n createCommentAvatarProps = {},\n createAvatarContainerProps = {},\n createCommentNameTextProps = {},\n createCommentButtonProps = {},\n createCommentContentProps = {},\n createButtonContainerProps = {},\n createTextContainerProps = {},\n createCommentContainerProps = {},\n}) => {\n const { user, subscription } = useSession();\n const [html, setHtml] = useState<string>('');\n const { callAction, postId, onlyForRegistered, onlyForSubscribers } = useComment();\n\n const { sx: sxCreateCommentAvatarProps } = createCommentAvatarProps;\n const { sx: sxCreateCommentNameTextProps } = createCommentNameTextProps;\n const { sx: sxCreateCommentButtonProps } = createCommentButtonProps;\n\n const { sx: sxCreateButtonContainerProps } = createButtonContainerProps;\n const { sx: sxCreateAvatarContainerProps } = createAvatarContainerProps;\n const { sx: sxCreateTextContainerProps } = createTextContainerProps;\n const { sx: sxCreateCommentContainerProps } = createCommentContainerProps;\n\n const [callCreateComment, loading] = useCallAction(createComment, {\n onCompleted: () => {\n setHtml('');\n callAction();\n },\n });\n\n const canRegistered = onlyForRegistered && user;\n const canSubscriber = onlyForSubscribers && subscription;\n\n const canComment = canRegistered || canSubscriber;\n\n return (\n <Card elevation={0}>\n <Box sx={{ display: { xs: 'block', md: 'flex' }, ...sxCreateCommentContainerProps }}>\n {user ? (\n <Box sx={{ ...sxCreateAvatarContainerProps }}>\n <Box\n sx={{\n xs: {\n marginRight: 0,\n marginBottom: 10,\n display: 'flex',\n alignItems: 'center',\n alignContent: 'center',\n },\n md: {\n marginRight: 10,\n },\n }}>\n <Avatar\n sx={{ width: 40, height: 40, marginRight: 1, ...sxCreateCommentAvatarProps }}\n src={user?.avatar as string}\n />\n
|
|
1
|
+
{"version":3,"file":"CreateComment.js","sources":["../../../../../../src/components/comment/components/create-comment/CreateComment.tsx"],"sourcesContent":["'use client';\nimport React, { useState } from 'react';\nimport {\n Avatar,\n AvatarProps,\n Box,\n BoxProps,\n ButtonProps,\n Card,\n Typography,\n TypographyProps,\n} from '@mui/material';\nimport { useComment } from '../../comment.hooks';\nimport {\n ReactSimpleWysiwyg,\n ReactSimpleWysiwygProps,\n} from '@/shared/components/react-editor/ReactSimpleWysiwyg';\nimport { useSession } from '@/components/session';\nimport { useCallAction } from '@cobuildlab/react-simple-state';\nimport { createComment, openSubscriptionCommentsStoreAction } from '../../comment.actions';\nimport { theme } from '@/shared/mui/theme';\nimport { ButtonDefault } from '@/shared/components/buttons/ButtonDefault';\n\nexport type CreateCommentProps = {\n createCommentAvatarProps?: AvatarProps;\n createCommentNameTextProps?: TypographyProps;\n createCommentContainerProps?: BoxProps;\n\n createAvatarContainerProps?: BoxProps;\n createButtonContainerProps?: BoxProps;\n createTextContainerProps?: BoxProps;\n\n createCommentButtonProps?: ButtonProps;\n createCommentContentProps?: Omit<ReactSimpleWysiwygProps, 'value' | 'onChange'>;\n};\n\nexport const CreateComment: React.FC<CreateCommentProps> = ({\n createCommentAvatarProps = {},\n createAvatarContainerProps = {},\n createCommentNameTextProps = {},\n createCommentButtonProps = {},\n createCommentContentProps = {},\n createButtonContainerProps = {},\n createTextContainerProps = {},\n createCommentContainerProps = {},\n}) => {\n const { user, subscription } = useSession();\n const [html, setHtml] = useState<string>('');\n const { callAction, postId, onlyForRegistered, onlyForSubscribers } = useComment();\n\n const { sx: sxCreateCommentAvatarProps } = createCommentAvatarProps;\n const { sx: sxCreateCommentNameTextProps } = createCommentNameTextProps;\n const { sx: sxCreateCommentButtonProps } = createCommentButtonProps;\n\n const { sx: sxCreateButtonContainerProps } = createButtonContainerProps;\n const { sx: sxCreateAvatarContainerProps } = createAvatarContainerProps;\n const { sx: sxCreateTextContainerProps } = createTextContainerProps;\n const { sx: sxCreateCommentContainerProps } = createCommentContainerProps;\n\n const [callCreateComment, loading] = useCallAction(createComment, {\n onCompleted: () => {\n setHtml('');\n callAction();\n },\n });\n\n const canRegistered = onlyForRegistered && user;\n const canSubscriber = onlyForSubscribers && subscription;\n\n const canComment = canRegistered || canSubscriber;\n\n return (\n <Card elevation={0}>\n <Box sx={{ display: { xs: 'block', md: 'flex' }, ...sxCreateCommentContainerProps }}>\n {user ? (\n <Box sx={{ ...sxCreateAvatarContainerProps }}>\n <Box\n sx={{\n xs: {\n marginRight: 0,\n marginBottom: 10,\n display: 'flex',\n alignItems: 'center',\n alignContent: 'center',\n },\n md: {\n marginRight: 10,\n },\n }}>\n <Avatar\n sx={{ width: 40, height: 40, marginRight: 1, ...sxCreateCommentAvatarProps }}\n src={user?.avatar as string}\n />\n\n </Box>\n </Box>\n ) : null}\n {\n <Box component={'div'} sx={{ width: '100%', ...sxCreateTextContainerProps }}>\n <ReactSimpleWysiwyg\n value={html}\n onChange={(value) => setHtml(value)}\n {...createCommentContentProps}\n />\n </Box>\n }\n {\n <Box sx={{ ...sxCreateButtonContainerProps }}>\n <ButtonDefault\n onClick={() => {\n if (!canComment) return openSubscriptionCommentsStoreAction(true);\n callCreateComment({\n data: {\n message: html,\n post_id: postId,\n },\n });\n }}\n color={!subscription ? 'primary' : 'inherit'}\n isLoading={loading}\n sx={{\n marginLeft: 10,\n height: 40,\n minWidth: 130,\n '&:disabled': {\n backgroundColor: '#8B8B8B !important',\n },\n ...sxCreateCommentButtonProps,\n }}>\n Comentar\n </ButtonDefault>\n </Box>\n }\n </Box>\n </Card>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCO;;;AAYL;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;;;;AAKI;;AAEH;AAED;AACA;AAEA;;AASc;AACE;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACD;;AAuBD;AAAiB;AACjB;AACE;AACE;AACA;AACD;AACF;AACH;AAIE;AACA;AACA;AACA;AACE;AACD;AACD;AACD;AAQf;;"}
|
|
@@ -11,14 +11,14 @@ import Grid from '../../../node_modules/@mui/material/esm/Grid/Grid.js';
|
|
|
11
11
|
import Box from '../../../node_modules/@mui/material/esm/Box/Box.js';
|
|
12
12
|
import Divider from '../../../node_modules/@mui/material/esm/Divider/Divider.js';
|
|
13
13
|
|
|
14
|
-
const CommentContainer = ({ comment, commentItemProps = {}, replyCommentItemProps = {}, replyCommentContainerProps = {}, }) => {
|
|
14
|
+
const CommentContainer = ({ comment, commentItemProps = {}, replyCommentItemProps = {}, replyCommentContainerProps = {}, mentionColor = PRIMARY_COLOR, }) => {
|
|
15
15
|
const { commentId } = libExports.useStore(replyCommentStore);
|
|
16
16
|
const onReply = (r) => {
|
|
17
17
|
if (comment.id === commentId) {
|
|
18
18
|
replyCommentStoreAction('', 0);
|
|
19
19
|
}
|
|
20
20
|
else {
|
|
21
|
-
replyCommentStoreAction(`<b style="color:${
|
|
21
|
+
replyCommentStoreAction(`<b style="color:${mentionColor}">@${r.user?.name}</b> `, comment.id);
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
24
|
const selectedComment = commentId === comment.id;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommentContainer.js","sources":["../../../../../src/components/comment/components/CommentContainer.tsx"],"sourcesContent":["'use client'
|
|
1
|
+
{"version":3,"file":"CommentContainer.js","sources":["../../../../../src/components/comment/components/CommentContainer.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Comment, ReplyComment } from '@/shared/types/generated';\nimport { Box, Divider, Grid } from '@mui/material';\nimport { ReplyComments } from './reply-comment/ReplyComments';\nimport { CommentItem } from './CommentItem';\nimport { useStore } from '@cobuildlab/react-simple-state';\nimport { replyCommentStore } from '../comment.store';\nimport {\n CreateReplyCommentContainer,\n CreateReplyCommentContainerProps,\n} from './reply-comment/CreateReplyCommentContainer';\nimport { replyCommentStoreAction } from '../comment.actions';\nimport { PRIMARY_COLOR } from '@/shared/mui/theme';\nimport { CommentItemExtraProps } from '@/components/comment/comment.types';\n\nexport type CommentContainerProps = {\n comment: Comment;\n commentItemProps?: CommentItemExtraProps;\n replyCommentItemProps?: CommentItemExtraProps;\n replyCommentContainerProps?: CreateReplyCommentContainerProps;\n mentionColor?: string;\n};\nexport const CommentContainer: React.FC<CommentContainerProps> = ({\n comment,\n commentItemProps = {},\n replyCommentItemProps = {},\n replyCommentContainerProps = {},\n mentionColor = PRIMARY_COLOR,\n}) => {\n const { commentId } = useStore(replyCommentStore);\n\n const onReply = (r: Comment | ReplyComment) => {\n if (comment.id === commentId) {\n replyCommentStoreAction('', 0);\n } else {\n replyCommentStoreAction(\n `<b style=\"color:${mentionColor}\">@${r.user?.name}</b> `,\n comment.id as number,\n );\n }\n };\n\n const selectedComment = commentId === comment.id;\n const haveReplyComments = comment.replies?.length;\n\n return (\n <Grid container>\n <Grid size={12} mb={2}>\n <CommentItem comment={comment} onReply={onReply} commentItemProps={commentItemProps} />\n </Grid>\n {selectedComment || haveReplyComments ? (\n <Grid size={12} mb={2}>\n <Grid container>\n <Grid size={1}>\n <Box display=\"flex\" height=\"100%\" justifyContent=\"center\">\n <Divider orientation=\"vertical\" flexItem />\n </Box>\n </Grid>\n <Grid size={11}>\n <Grid container spacing={2}>\n {haveReplyComments ? (\n <Grid size={12}>\n <ReplyComments\n replyComments={(comment.replies || []) as ReplyComment[]}\n onReply={onReply}\n replyCommentItemProps={replyCommentItemProps}\n />\n </Grid>\n ) : null}\n {selectedComment ? (\n <Grid size={12}>\n <CreateReplyCommentContainer {...replyCommentContainerProps} />\n </Grid>\n ) : null}\n </Grid>\n </Grid>\n </Grid>\n </Grid>\n ) : null}\n </Grid>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAwBO;;AASL;AACE;AACE;;;AAEA;;AAKJ;AAEA;AACA;AAEA;AAoCF;;"}
|
|
@@ -22,7 +22,6 @@ import { ButtonDefault } from '../../../../shared/components/buttons/ButtonDefau
|
|
|
22
22
|
import Card from '../../../../node_modules/@mui/material/esm/Card/Card.js';
|
|
23
23
|
import Box from '../../../../node_modules/@mui/material/esm/Box/Box.js';
|
|
24
24
|
import Avatar from '../../../../node_modules/@mui/material/esm/Avatar/Avatar.js';
|
|
25
|
-
import Typography from '../../../../node_modules/@mui/material/esm/Typography/Typography.js';
|
|
26
25
|
|
|
27
26
|
const CreateComment = ({ createCommentAvatarProps = {}, createAvatarContainerProps = {}, createCommentNameTextProps = {}, createCommentButtonProps = {}, createCommentContentProps = {}, createButtonContainerProps = {}, createTextContainerProps = {}, createCommentContainerProps = {}, }) => {
|
|
28
27
|
const { user, subscription } = useSession();
|
|
@@ -44,7 +43,7 @@ const CreateComment = ({ createCommentAvatarProps = {}, createAvatarContainerPro
|
|
|
44
43
|
const canRegistered = onlyForRegistered && user;
|
|
45
44
|
const canSubscriber = onlyForSubscribers && subscription;
|
|
46
45
|
const canComment = canRegistered || canSubscriber;
|
|
47
|
-
return (jsx(Card, { elevation: 0, children: jsxs(Box, { sx: { display: { xs: 'block', md: 'flex' }, ...sxCreateCommentContainerProps }, children: [user ? (jsx(Box, { sx: { ...sxCreateAvatarContainerProps }, children:
|
|
46
|
+
return (jsx(Card, { elevation: 0, children: jsxs(Box, { sx: { display: { xs: 'block', md: 'flex' }, ...sxCreateCommentContainerProps }, children: [user ? (jsx(Box, { sx: { ...sxCreateAvatarContainerProps }, children: jsx(Box, { sx: {
|
|
48
47
|
xs: {
|
|
49
48
|
marginRight: 0,
|
|
50
49
|
marginBottom: 10,
|
|
@@ -55,11 +54,7 @@ const CreateComment = ({ createCommentAvatarProps = {}, createAvatarContainerPro
|
|
|
55
54
|
md: {
|
|
56
55
|
marginRight: 10,
|
|
57
56
|
},
|
|
58
|
-
}, children:
|
|
59
|
-
fontSize: 14,
|
|
60
|
-
fontWeight: 700,
|
|
61
|
-
...sxCreateCommentNameTextProps,
|
|
62
|
-
}, mb: 1, children: user?.name }) })] }) })) : null, jsx(Box, { component: 'div', sx: { width: '100%', ...sxCreateTextContainerProps }, children: jsx(ReactSimpleWysiwyg, { value: html, onChange: (value) => setHtml(value), ...createCommentContentProps }) }), jsx(Box, { sx: { ...sxCreateButtonContainerProps }, children: jsx(ButtonDefault, { onClick: () => {
|
|
57
|
+
}, children: jsx(Avatar, { sx: { width: 40, height: 40, marginRight: 1, ...sxCreateCommentAvatarProps }, src: user?.avatar }) }) })) : null, jsx(Box, { component: 'div', sx: { width: '100%', ...sxCreateTextContainerProps }, children: jsx(ReactSimpleWysiwyg, { value: html, onChange: (value) => setHtml(value), ...createCommentContentProps }) }), jsx(Box, { sx: { ...sxCreateButtonContainerProps }, children: jsx(ButtonDefault, { onClick: () => {
|
|
63
58
|
if (!canComment)
|
|
64
59
|
return openSubscriptionCommentsStoreAction(true);
|
|
65
60
|
callCreateComment({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreateComment.js","sources":["../../../../../../src/components/comment/components/create-comment/CreateComment.tsx"],"sourcesContent":["'use client';\nimport React, { useState } from 'react';\nimport {\n Avatar,\n AvatarProps,\n Box,\n BoxProps,\n ButtonProps,\n Card,\n Typography,\n TypographyProps,\n} from '@mui/material';\nimport { useComment } from '../../comment.hooks';\nimport {\n ReactSimpleWysiwyg,\n ReactSimpleWysiwygProps,\n} from '@/shared/components/react-editor/ReactSimpleWysiwyg';\nimport { useSession } from '@/components/session';\nimport { useCallAction } from '@cobuildlab/react-simple-state';\nimport { createComment, openSubscriptionCommentsStoreAction } from '../../comment.actions';\nimport { theme } from '@/shared/mui/theme';\nimport { ButtonDefault } from '@/shared/components/buttons/ButtonDefault';\n\nexport type CreateCommentProps = {\n createCommentAvatarProps?: AvatarProps;\n createCommentNameTextProps?: TypographyProps;\n createCommentContainerProps?: BoxProps;\n\n createAvatarContainerProps?: BoxProps;\n createButtonContainerProps?: BoxProps;\n createTextContainerProps?: BoxProps;\n\n createCommentButtonProps?: ButtonProps;\n createCommentContentProps?: Omit<ReactSimpleWysiwygProps, 'value' | 'onChange'>;\n};\n\nexport const CreateComment: React.FC<CreateCommentProps> = ({\n createCommentAvatarProps = {},\n createAvatarContainerProps = {},\n createCommentNameTextProps = {},\n createCommentButtonProps = {},\n createCommentContentProps = {},\n createButtonContainerProps = {},\n createTextContainerProps = {},\n createCommentContainerProps = {},\n}) => {\n const { user, subscription } = useSession();\n const [html, setHtml] = useState<string>('');\n const { callAction, postId, onlyForRegistered, onlyForSubscribers } = useComment();\n\n const { sx: sxCreateCommentAvatarProps } = createCommentAvatarProps;\n const { sx: sxCreateCommentNameTextProps } = createCommentNameTextProps;\n const { sx: sxCreateCommentButtonProps } = createCommentButtonProps;\n\n const { sx: sxCreateButtonContainerProps } = createButtonContainerProps;\n const { sx: sxCreateAvatarContainerProps } = createAvatarContainerProps;\n const { sx: sxCreateTextContainerProps } = createTextContainerProps;\n const { sx: sxCreateCommentContainerProps } = createCommentContainerProps;\n\n const [callCreateComment, loading] = useCallAction(createComment, {\n onCompleted: () => {\n setHtml('');\n callAction();\n },\n });\n\n const canRegistered = onlyForRegistered && user;\n const canSubscriber = onlyForSubscribers && subscription;\n\n const canComment = canRegistered || canSubscriber;\n\n return (\n <Card elevation={0}>\n <Box sx={{ display: { xs: 'block', md: 'flex' }, ...sxCreateCommentContainerProps }}>\n {user ? (\n <Box sx={{ ...sxCreateAvatarContainerProps }}>\n <Box\n sx={{\n xs: {\n marginRight: 0,\n marginBottom: 10,\n display: 'flex',\n alignItems: 'center',\n alignContent: 'center',\n },\n md: {\n marginRight: 10,\n },\n }}>\n <Avatar\n sx={{ width: 40, height: 40, marginRight: 1, ...sxCreateCommentAvatarProps }}\n src={user?.avatar as string}\n />\n
|
|
1
|
+
{"version":3,"file":"CreateComment.js","sources":["../../../../../../src/components/comment/components/create-comment/CreateComment.tsx"],"sourcesContent":["'use client';\nimport React, { useState } from 'react';\nimport {\n Avatar,\n AvatarProps,\n Box,\n BoxProps,\n ButtonProps,\n Card,\n Typography,\n TypographyProps,\n} from '@mui/material';\nimport { useComment } from '../../comment.hooks';\nimport {\n ReactSimpleWysiwyg,\n ReactSimpleWysiwygProps,\n} from '@/shared/components/react-editor/ReactSimpleWysiwyg';\nimport { useSession } from '@/components/session';\nimport { useCallAction } from '@cobuildlab/react-simple-state';\nimport { createComment, openSubscriptionCommentsStoreAction } from '../../comment.actions';\nimport { theme } from '@/shared/mui/theme';\nimport { ButtonDefault } from '@/shared/components/buttons/ButtonDefault';\n\nexport type CreateCommentProps = {\n createCommentAvatarProps?: AvatarProps;\n createCommentNameTextProps?: TypographyProps;\n createCommentContainerProps?: BoxProps;\n\n createAvatarContainerProps?: BoxProps;\n createButtonContainerProps?: BoxProps;\n createTextContainerProps?: BoxProps;\n\n createCommentButtonProps?: ButtonProps;\n createCommentContentProps?: Omit<ReactSimpleWysiwygProps, 'value' | 'onChange'>;\n};\n\nexport const CreateComment: React.FC<CreateCommentProps> = ({\n createCommentAvatarProps = {},\n createAvatarContainerProps = {},\n createCommentNameTextProps = {},\n createCommentButtonProps = {},\n createCommentContentProps = {},\n createButtonContainerProps = {},\n createTextContainerProps = {},\n createCommentContainerProps = {},\n}) => {\n const { user, subscription } = useSession();\n const [html, setHtml] = useState<string>('');\n const { callAction, postId, onlyForRegistered, onlyForSubscribers } = useComment();\n\n const { sx: sxCreateCommentAvatarProps } = createCommentAvatarProps;\n const { sx: sxCreateCommentNameTextProps } = createCommentNameTextProps;\n const { sx: sxCreateCommentButtonProps } = createCommentButtonProps;\n\n const { sx: sxCreateButtonContainerProps } = createButtonContainerProps;\n const { sx: sxCreateAvatarContainerProps } = createAvatarContainerProps;\n const { sx: sxCreateTextContainerProps } = createTextContainerProps;\n const { sx: sxCreateCommentContainerProps } = createCommentContainerProps;\n\n const [callCreateComment, loading] = useCallAction(createComment, {\n onCompleted: () => {\n setHtml('');\n callAction();\n },\n });\n\n const canRegistered = onlyForRegistered && user;\n const canSubscriber = onlyForSubscribers && subscription;\n\n const canComment = canRegistered || canSubscriber;\n\n return (\n <Card elevation={0}>\n <Box sx={{ display: { xs: 'block', md: 'flex' }, ...sxCreateCommentContainerProps }}>\n {user ? (\n <Box sx={{ ...sxCreateAvatarContainerProps }}>\n <Box\n sx={{\n xs: {\n marginRight: 0,\n marginBottom: 10,\n display: 'flex',\n alignItems: 'center',\n alignContent: 'center',\n },\n md: {\n marginRight: 10,\n },\n }}>\n <Avatar\n sx={{ width: 40, height: 40, marginRight: 1, ...sxCreateCommentAvatarProps }}\n src={user?.avatar as string}\n />\n\n </Box>\n </Box>\n ) : null}\n {\n <Box component={'div'} sx={{ width: '100%', ...sxCreateTextContainerProps }}>\n <ReactSimpleWysiwyg\n value={html}\n onChange={(value) => setHtml(value)}\n {...createCommentContentProps}\n />\n </Box>\n }\n {\n <Box sx={{ ...sxCreateButtonContainerProps }}>\n <ButtonDefault\n onClick={() => {\n if (!canComment) return openSubscriptionCommentsStoreAction(true);\n callCreateComment({\n data: {\n message: html,\n post_id: postId,\n },\n });\n }}\n color={!subscription ? 'primary' : 'inherit'}\n isLoading={loading}\n sx={{\n marginLeft: 10,\n height: 40,\n minWidth: 130,\n '&:disabled': {\n backgroundColor: '#8B8B8B !important',\n },\n ...sxCreateCommentButtonProps,\n }}>\n Comentar\n </ButtonDefault>\n </Box>\n }\n </Box>\n </Card>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAoCO;;;AAYL;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;;;;AAKI;;AAEH;AAED;AACA;AAEA;;AASc;AACE;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACD;;AAuBD;AAAiB;AACjB;AACE;AACE;AACA;AACD;AACF;AACH;AAIE;AACA;AACA;AACA;AACE;AACD;AACD;AACD;AAQf;;"}
|
|
@@ -7,5 +7,6 @@ export type CommentContainerProps = {
|
|
|
7
7
|
commentItemProps?: CommentItemExtraProps;
|
|
8
8
|
replyCommentItemProps?: CommentItemExtraProps;
|
|
9
9
|
replyCommentContainerProps?: CreateReplyCommentContainerProps;
|
|
10
|
+
mentionColor?: string;
|
|
10
11
|
};
|
|
11
12
|
export declare const CommentContainer: React.FC<CommentContainerProps>;
|
package/dist/index.d.ts
CHANGED
|
@@ -207,6 +207,7 @@ type CommentContainerProps = {
|
|
|
207
207
|
commentItemProps?: CommentItemExtraProps;
|
|
208
208
|
replyCommentItemProps?: CommentItemExtraProps;
|
|
209
209
|
replyCommentContainerProps?: CreateReplyCommentContainerProps;
|
|
210
|
+
mentionColor?: string;
|
|
210
211
|
};
|
|
211
212
|
|
|
212
213
|
type CommentSubscriptionDialogProps = {
|