@selfcommunity/react-ui 0.7.0-alpha.364 → 0.7.0-alpha.365

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 (6) hide show
  1. package/lib/cjs/components/UserProfileHeader/Skeleton.d.ts +2 -0
  2. package/lib/cjs/components/UserProfileHeader/Skeleton.js +12 -2
  3. package/lib/esm/components/UserProfileHeader/Skeleton.d.ts +2 -0
  4. package/lib/esm/components/UserProfileHeader/Skeleton.js +13 -3
  5. package/lib/umd/react-ui.js +1 -1
  6. package/package.json +2 -2
package/lib/cjs/components/UserProfileHeader/Skeleton.d.ts CHANGED
@@ -17,6 +17,8 @@
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
+ |actions|.SCUserProfileHeader-actions|Styles applied to the actions section.|
21
+ |section|.SCUserProfileHeader-section|Styles applied to the info section.|
20
22
  |username|.SCUserProfileHeader-username|Styles applied to the username element.|
21
23
  *
22
24
  */
package/lib/cjs/components/UserProfileHeader/Skeleton.js CHANGED
@@ -9,6 +9,8 @@ const constants_1 = require("./constants");
9
9
  const classes = {
10
10
  root: `${constants_1.PREFIX}-skeleton-root`,
11
11
  avatar: `${constants_1.PREFIX}-avatar`,
12
+ actions: `${constants_1.PREFIX}-actions`,
13
+ section: `${constants_1.PREFIX}-section`,
12
14
  username: `${constants_1.PREFIX}-username`
13
15
  };
14
16
  const Root = (0, styles_1.styled)(material_1.Box, {
@@ -34,6 +36,8 @@ const Root = (0, styles_1.styled)(material_1.Box, {
34
36
  |---|---|---|
35
37
  |root|.SCUserProfileHeader-skeleton-root|Styles applied to the root element.|
36
38
  |avatar|.SCUserProfileHeader-avatar|Styles applied to the avatar element.|
39
+ |actions|.SCUserProfileHeader-actions|Styles applied to the actions section.|
40
+ |section|.SCUserProfileHeader-section|Styles applied to the info section.|
37
41
  |username|.SCUserProfileHeader-username|Styles applied to the username element.|
38
42
  *
39
43
  */
@@ -43,7 +47,13 @@ function UserProfileHeaderSkeleton() {
43
47
  react_1.default.createElement(Skeleton_1.default, { sx: { height: 350 }, animation: "wave", variant: "rectangular" }),
44
48
  react_1.default.createElement(material_1.Box, { className: classes.avatar },
45
49
  react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeXLarge, height: theme.selfcommunity.user.avatar.sizeXLarge })),
46
- react_1.default.createElement(material_1.Typography, { variant: "h5", className: classes.username },
47
- react_1.default.createElement(Skeleton_1.default, { animation: "wave", sx: { height: 20, width: 100, margin: '0 auto' } }))));
50
+ react_1.default.createElement(material_1.Box, { className: classes.section },
51
+ react_1.default.createElement(material_1.Typography, { variant: "h5", className: classes.username },
52
+ react_1.default.createElement(Skeleton_1.default, { animation: "wave", sx: { height: 30, width: 100, margin: '0 auto' } })),
53
+ react_1.default.createElement(material_1.Stack, { direction: "row", className: classes.actions },
54
+ react_1.default.createElement(material_1.Button, { variant: "contained", disabled: true },
55
+ react_1.default.createElement(Skeleton_1.default, { animation: "wave", sx: { height: 20, width: 60 } })),
56
+ react_1.default.createElement(material_1.IconButton, { disabled: true },
57
+ react_1.default.createElement(material_1.Icon, null, "more_vert"))))));
48
58
  }
49
59
  exports.default = UserProfileHeaderSkeleton;
package/lib/esm/components/UserProfileHeader/Skeleton.d.ts CHANGED
@@ -17,6 +17,8 @@
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
+ |actions|.SCUserProfileHeader-actions|Styles applied to the actions section.|
21
+ |section|.SCUserProfileHeader-section|Styles applied to the info section.|
20
22
  |username|.SCUserProfileHeader-username|Styles applied to the username element.|
21
23
  *
22
24
  */
package/lib/esm/components/UserProfileHeader/Skeleton.js CHANGED
@@ -1,11 +1,13 @@
1
1
  import React from 'react';
2
- import { Box, Typography, useTheme } from '@mui/material';
2
+ import { Box, Button, Icon, IconButton, Stack, Typography, useTheme } from '@mui/material';
3
3
  import { styled } from '@mui/material/styles';
4
4
  import Skeleton from '@mui/material/Skeleton';
5
5
  import { PREFIX } from './constants';
6
6
  const classes = {
7
7
  root: `${PREFIX}-skeleton-root`,
8
8
  avatar: `${PREFIX}-avatar`,
9
+ actions: `${PREFIX}-actions`,
10
+ section: `${PREFIX}-section`,
9
11
  username: `${PREFIX}-username`
10
12
  };
11
13
  const Root = styled(Box, {
@@ -31,6 +33,8 @@ const Root = styled(Box, {
31
33
  |---|---|---|
32
34
  |root|.SCUserProfileHeader-skeleton-root|Styles applied to the root element.|
33
35
  |avatar|.SCUserProfileHeader-avatar|Styles applied to the avatar element.|
36
+ |actions|.SCUserProfileHeader-actions|Styles applied to the actions section.|
37
+ |section|.SCUserProfileHeader-section|Styles applied to the info section.|
34
38
  |username|.SCUserProfileHeader-username|Styles applied to the username element.|
35
39
  *
36
40
  */
@@ -40,7 +44,13 @@ function UserProfileHeaderSkeleton() {
40
44
  React.createElement(Skeleton, { sx: { height: 350 }, animation: "wave", variant: "rectangular" }),
41
45
  React.createElement(Box, { className: classes.avatar },
42
46
  React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeXLarge, height: theme.selfcommunity.user.avatar.sizeXLarge })),
43
- React.createElement(Typography, { variant: "h5", className: classes.username },
44
- React.createElement(Skeleton, { animation: "wave", sx: { height: 20, width: 100, margin: '0 auto' } }))));
47
+ React.createElement(Box, { className: classes.section },
48
+ React.createElement(Typography, { variant: "h5", className: classes.username },
49
+ React.createElement(Skeleton, { animation: "wave", sx: { height: 30, width: 100, margin: '0 auto' } })),
50
+ React.createElement(Stack, { direction: "row", className: classes.actions },
51
+ React.createElement(Button, { variant: "contained", disabled: true },
52
+ React.createElement(Skeleton, { animation: "wave", sx: { height: 20, width: 60 } })),
53
+ React.createElement(IconButton, { disabled: true },
54
+ React.createElement(Icon, null, "more_vert"))))));
45
55
  }
46
56
  export default UserProfileHeaderSkeleton;