@selfcommunity/react-ui 0.7.0-alpha.366 → 0.7.0-alpha.368

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.
Files changed (10) hide show
  1. package/lib/cjs/components/PrivateMessageSettingsIconButton/PrivateMessageSettingsIconButton.js +4 -4
  2. package/lib/cjs/components/PrivateMessageThreadItem/PrivateMessageThreadItem.js +1 -8
  3. package/lib/cjs/components/UserProfileHeader/Skeleton.d.ts +1 -0
  4. package/lib/cjs/components/UserProfileHeader/Skeleton.js +3 -1
  5. package/lib/esm/components/PrivateMessageSettingsIconButton/PrivateMessageSettingsIconButton.js +4 -4
  6. package/lib/esm/components/PrivateMessageThreadItem/PrivateMessageThreadItem.js +2 -9
  7. package/lib/esm/components/UserProfileHeader/Skeleton.d.ts +1 -0
  8. package/lib/esm/components/UserProfileHeader/Skeleton.js +3 -1
  9. package/lib/umd/react-ui.js +1 -1
  10. package/package.json +2 -2
package/lib/cjs/components/PrivateMessageSettingsIconButton/PrivateMessageSettingsIconButton.js CHANGED
@@ -104,10 +104,10 @@ function PrivateMessageSettingsIconButton(inProps) {
104
104
  const renderList = () => {
105
105
  if (isMobile) {
106
106
  return [
107
- react_1.default.createElement(material_1.ListItem, { className: classes.item, key: "profile", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, user) },
107
+ user && (react_1.default.createElement(material_1.ListItem, { className: classes.item, key: "profile", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, user) },
108
108
  react_1.default.createElement(material_1.ListItemIcon, null,
109
109
  react_1.default.createElement(Icon_1.default, { fontSize: "small" }, "people_alt")),
110
- react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" })),
110
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" }))),
111
111
  react_1.default.createElement(material_1.ListItem, { className: classes.item, key: "delete", onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick },
112
112
  react_1.default.createElement(material_1.ListItemIcon, null,
113
113
  react_1.default.createElement(Icon_1.default, { fontSize: "small" }, "delete")),
@@ -116,10 +116,10 @@ function PrivateMessageSettingsIconButton(inProps) {
116
116
  }
117
117
  else {
118
118
  return [
119
- react_1.default.createElement(material_1.MenuItem, { className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, user), key: "profile" },
119
+ user && (react_1.default.createElement(material_1.MenuItem, { className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, user), key: "profile" },
120
120
  react_1.default.createElement(material_1.ListItemIcon, null,
121
121
  react_1.default.createElement(Icon_1.default, { fontSize: "small" }, "people_alt")),
122
- react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" })),
122
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" }))),
123
123
  react_1.default.createElement(material_1.MenuItem, { className: classes.item, onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick, key: "delete" },
124
124
  react_1.default.createElement(material_1.ListItemIcon, null,
125
125
  react_1.default.createElement(Icon_1.default, { fontSize: "small" }, "delete")),
package/lib/cjs/components/PrivateMessageThreadItem/PrivateMessageThreadItem.js CHANGED
@@ -10,7 +10,6 @@ const types_1 = require("@selfcommunity/types");
10
10
  const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
11
11
  const classnames_1 = tslib_1.__importDefault(require("classnames"));
12
12
  const system_1 = require("@mui/system");
13
- const react_core_1 = require("@selfcommunity/react-core");
14
13
  const useMediaQuery_1 = tslib_1.__importDefault(require("@mui/material/useMediaQuery"));
15
14
  const PrivateMessageSettingsIconButton_1 = tslib_1.__importDefault(require("../PrivateMessageSettingsIconButton"));
16
15
  const sizeCoverter_1 = require("../../utils/sizeCoverter");
@@ -87,12 +86,6 @@ function PrivateMessageThreadItem(inProps) {
87
86
  const hasFile = message ? message.file : null;
88
87
  const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
89
88
  const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
90
- const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
91
- const authUserId = scUserContext.user ? scUserContext.user.id : null;
92
- const messageReceiver = (item, loggedUserId) => {
93
- var _a;
94
- return ((_a = item === null || item === void 0 ? void 0 : item.receiver) === null || _a === void 0 ? void 0 : _a.id) !== loggedUserId ? item === null || item === void 0 ? void 0 : item.receiver : item === null || item === void 0 ? void 0 : item.sender;
95
- };
96
89
  const getMouseEvents = (mouseEnter, mouseLeave) => ({
97
90
  onMouseEnter: mouseEnter,
98
91
  onMouseLeave: mouseLeave,
@@ -173,7 +166,7 @@ function PrivateMessageThreadItem(inProps) {
173
166
  */
174
167
  return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, getMouseEvents(mouseEvents.onMouseEnter, mouseEvents.onMouseLeave), rest, { secondaryAction: (isHovering || isMobile) &&
175
168
  showMenuIcon &&
176
- message.status !== types_1.SCPrivateMessageStatusType.HIDDEN && (react_1.default.createElement(PrivateMessageSettingsIconButton_1.default, { onMenuItemDeleteClick: handleMenuItemClick, user: messageReceiver(message, authUserId) })) }),
169
+ message.status !== types_1.SCPrivateMessageStatusType.HIDDEN && react_1.default.createElement(PrivateMessageSettingsIconButton_1.default, { onMenuItemDeleteClick: handleMenuItemClick }) }),
177
170
  react_1.default.createElement(react_1.default.Fragment, null,
178
171
  hasFile && message.status !== types_1.SCPrivateMessageStatusType.HIDDEN ? (renderMessageFile(message)) : (react_1.default.createElement(material_1.Box, { className: classes.text },
179
172
  react_1.default.createElement(material_1.Typography, { component: "span", dangerouslySetInnerHTML: { __html: message.message } }))),
package/lib/cjs/components/UserProfileHeader/Skeleton.d.ts CHANGED
@@ -17,6 +17,7 @@
17
17
  |---|---|---|
18
18
  |root|.SCUserProfileHeader-skeleton-root|Styles applied to the root element.|
19
19
  |avatar|.SCUserProfileHeader-avatar|Styles applied to the avatar element.|
20
+ |cover|.SCUserProfileHeader-cover|Styles applied to the cover element.|
20
21
  |actions|.SCUserProfileHeader-actions|Styles applied to the actions section.|
21
22
  |section|.SCUserProfileHeader-section|Styles applied to the info section.|
22
23
  |username|.SCUserProfileHeader-username|Styles applied to the username element.|
package/lib/cjs/components/UserProfileHeader/Skeleton.js CHANGED
@@ -8,6 +8,7 @@ const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
8
8
  const constants_1 = require("./constants");
9
9
  const classes = {
10
10
  root: `${constants_1.PREFIX}-skeleton-root`,
11
+ cover: `${constants_1.PREFIX}-cover`,
11
12
  avatar: `${constants_1.PREFIX}-avatar`,
12
13
  actions: `${constants_1.PREFIX}-actions`,
13
14
  section: `${constants_1.PREFIX}-section`,
@@ -36,6 +37,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
36
37
  |---|---|---|
37
38
  |root|.SCUserProfileHeader-skeleton-root|Styles applied to the root element.|
38
39
  |avatar|.SCUserProfileHeader-avatar|Styles applied to the avatar element.|
40
+ |cover|.SCUserProfileHeader-cover|Styles applied to the cover element.|
39
41
  |actions|.SCUserProfileHeader-actions|Styles applied to the actions section.|
40
42
  |section|.SCUserProfileHeader-section|Styles applied to the info section.|
41
43
  |username|.SCUserProfileHeader-username|Styles applied to the username element.|
@@ -44,7 +46,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
44
46
  function UserProfileHeaderSkeleton() {
45
47
  const theme = (0, material_1.useTheme)();
46
48
  return (react_1.default.createElement(Root, { className: classes.root },
47
- react_1.default.createElement(Skeleton_1.default, { sx: { height: 350 }, animation: "wave", variant: "rectangular" }),
49
+ react_1.default.createElement(Skeleton_1.default, { className: classes.cover, animation: "wave", variant: "rectangular" }),
48
50
  react_1.default.createElement(material_1.Box, { className: classes.avatar },
49
51
  react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeXLarge, height: theme.selfcommunity.user.avatar.sizeXLarge })),
50
52
  react_1.default.createElement(material_1.Box, { className: classes.section },
package/lib/esm/components/PrivateMessageSettingsIconButton/PrivateMessageSettingsIconButton.js CHANGED
@@ -102,10 +102,10 @@ export default function PrivateMessageSettingsIconButton(inProps) {
102
102
  const renderList = () => {
103
103
  if (isMobile) {
104
104
  return [
105
- React.createElement(ListItem, { className: classes.item, key: "profile", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, user) },
105
+ user && (React.createElement(ListItem, { className: classes.item, key: "profile", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, user) },
106
106
  React.createElement(ListItemIcon, null,
107
107
  React.createElement(Icon, { fontSize: "small" }, "people_alt")),
108
- React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" })),
108
+ React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" }))),
109
109
  React.createElement(ListItem, { className: classes.item, key: "delete", onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick },
110
110
  React.createElement(ListItemIcon, null,
111
111
  React.createElement(Icon, { fontSize: "small" }, "delete")),
@@ -114,10 +114,10 @@ export default function PrivateMessageSettingsIconButton(inProps) {
114
114
  }
115
115
  else {
116
116
  return [
117
- React.createElement(MenuItem, { className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, user), key: "profile" },
117
+ user && (React.createElement(MenuItem, { className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, user), key: "profile" },
118
118
  React.createElement(ListItemIcon, null,
119
119
  React.createElement(Icon, { fontSize: "small" }, "people_alt")),
120
- React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" })),
120
+ React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" }))),
121
121
  React.createElement(MenuItem, { className: classes.item, onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick, key: "delete" },
122
122
  React.createElement(ListItemIcon, null,
123
123
  React.createElement(Icon, { fontSize: "small" }, "delete")),
package/lib/esm/components/PrivateMessageThreadItem/PrivateMessageThreadItem.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __awaiter, __rest } from "tslib";
2
- import React, { useContext, useState } from 'react';
2
+ import React, { useState } from 'react';
3
3
  import { styled } from '@mui/material/styles';
4
4
  import { ListItem, Typography, IconButton, Box, useTheme, Button } from '@mui/material';
5
5
  import PrivateMessageThreadItemSkeleton from './Skeleton';
@@ -8,7 +8,6 @@ import { SCMessageFileType, SCPrivateMessageStatusType } from '@selfcommunity/ty
8
8
  import Icon from '@mui/material/Icon';
9
9
  import classNames from 'classnames';
10
10
  import { useThemeProps } from '@mui/system';
11
- import { SCUserContext } from '@selfcommunity/react-core';
12
11
  import useMediaQuery from '@mui/material/useMediaQuery';
13
12
  import PrivateMessageSettingsIconButton from '../PrivateMessageSettingsIconButton';
14
13
  import { bytesToSize } from '../../utils/sizeCoverter';
@@ -85,12 +84,6 @@ export default function PrivateMessageThreadItem(inProps) {
85
84
  const hasFile = message ? message.file : null;
86
85
  const [openDialog, setOpenDialog] = useState(false);
87
86
  const { enqueueSnackbar } = useSnackbar();
88
- const scUserContext = useContext(SCUserContext);
89
- const authUserId = scUserContext.user ? scUserContext.user.id : null;
90
- const messageReceiver = (item, loggedUserId) => {
91
- var _a;
92
- return ((_a = item === null || item === void 0 ? void 0 : item.receiver) === null || _a === void 0 ? void 0 : _a.id) !== loggedUserId ? item === null || item === void 0 ? void 0 : item.receiver : item === null || item === void 0 ? void 0 : item.sender;
93
- };
94
87
  const getMouseEvents = (mouseEnter, mouseLeave) => ({
95
88
  onMouseEnter: mouseEnter,
96
89
  onMouseLeave: mouseLeave,
@@ -171,7 +164,7 @@ export default function PrivateMessageThreadItem(inProps) {
171
164
  */
172
165
  return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, getMouseEvents(mouseEvents.onMouseEnter, mouseEvents.onMouseLeave), rest, { secondaryAction: (isHovering || isMobile) &&
173
166
  showMenuIcon &&
174
- message.status !== SCPrivateMessageStatusType.HIDDEN && (React.createElement(PrivateMessageSettingsIconButton, { onMenuItemDeleteClick: handleMenuItemClick, user: messageReceiver(message, authUserId) })) }),
167
+ message.status !== SCPrivateMessageStatusType.HIDDEN && React.createElement(PrivateMessageSettingsIconButton, { onMenuItemDeleteClick: handleMenuItemClick }) }),
175
168
  React.createElement(React.Fragment, null,
176
169
  hasFile && message.status !== SCPrivateMessageStatusType.HIDDEN ? (renderMessageFile(message)) : (React.createElement(Box, { className: classes.text },
177
170
  React.createElement(Typography, { component: "span", dangerouslySetInnerHTML: { __html: message.message } }))),
package/lib/esm/components/UserProfileHeader/Skeleton.d.ts CHANGED
@@ -17,6 +17,7 @@
17
17
  |---|---|---|
18
18
  |root|.SCUserProfileHeader-skeleton-root|Styles applied to the root element.|
19
19
  |avatar|.SCUserProfileHeader-avatar|Styles applied to the avatar element.|
20
+ |cover|.SCUserProfileHeader-cover|Styles applied to the cover element.|
20
21
  |actions|.SCUserProfileHeader-actions|Styles applied to the actions section.|
21
22
  |section|.SCUserProfileHeader-section|Styles applied to the info section.|
22
23
  |username|.SCUserProfileHeader-username|Styles applied to the username element.|
package/lib/esm/components/UserProfileHeader/Skeleton.js CHANGED
@@ -5,6 +5,7 @@ import Skeleton from '@mui/material/Skeleton';
5
5
  import { PREFIX } from './constants';
6
6
  const classes = {
7
7
  root: `${PREFIX}-skeleton-root`,
8
+ cover: `${PREFIX}-cover`,
8
9
  avatar: `${PREFIX}-avatar`,
9
10
  actions: `${PREFIX}-actions`,
10
11
  section: `${PREFIX}-section`,
@@ -33,6 +34,7 @@ const Root = styled(Box, {
33
34
  |---|---|---|
34
35
  |root|.SCUserProfileHeader-skeleton-root|Styles applied to the root element.|
35
36
  |avatar|.SCUserProfileHeader-avatar|Styles applied to the avatar element.|
37
+ |cover|.SCUserProfileHeader-cover|Styles applied to the cover element.|
36
38
  |actions|.SCUserProfileHeader-actions|Styles applied to the actions section.|
37
39
  |section|.SCUserProfileHeader-section|Styles applied to the info section.|
38
40
  |username|.SCUserProfileHeader-username|Styles applied to the username element.|
@@ -41,7 +43,7 @@ const Root = styled(Box, {
41
43
  function UserProfileHeaderSkeleton() {
42
44
  const theme = useTheme();
43
45
  return (React.createElement(Root, { className: classes.root },
44
- React.createElement(Skeleton, { sx: { height: 350 }, animation: "wave", variant: "rectangular" }),
46
+ React.createElement(Skeleton, { className: classes.cover, animation: "wave", variant: "rectangular" }),
45
47
  React.createElement(Box, { className: classes.avatar },
46
48
  React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeXLarge, height: theme.selfcommunity.user.avatar.sizeXLarge })),
47
49
  React.createElement(Box, { className: classes.section },