@selfcommunity/react-ui 0.7.9-alpha.53 → 0.7.9-alpha.54

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 (8) hide show
  1. package/lib/cjs/components/Groups/Groups.js +4 -2
  2. package/lib/cjs/components/Groups/Skeleton.d.ts +1 -1
  3. package/lib/cjs/components/Groups/Skeleton.js +1 -1
  4. package/lib/esm/components/Groups/Groups.js +5 -3
  5. package/lib/esm/components/Groups/Skeleton.d.ts +1 -1
  6. package/lib/esm/components/Groups/Skeleton.js +1 -1
  7. package/lib/umd/react-ui.js +1 -1
  8. package/package.json +2 -2
package/lib/cjs/components/Groups/Groups.js CHANGED
@@ -14,7 +14,7 @@ const Errors_1 = require("../../constants/Errors");
14
14
  const system_1 = require("@mui/system");
15
15
  const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
16
16
  const constants_1 = require("./constants");
17
- const Group_1 = tslib_1.__importDefault(require("../Group"));
17
+ const Group_1 = tslib_1.__importStar(require("../Group"));
18
18
  const Pagination_1 = require("../../constants/Pagination");
19
19
  const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
20
20
  const classes = {
@@ -73,6 +73,8 @@ function Groups(inProps) {
73
73
  const [loading, setLoading] = (0, react_1.useState)(true);
74
74
  const [next, setNext] = (0, react_1.useState)(null);
75
75
  const [search, setSearch] = (0, react_1.useState)('');
76
+ const theme = (0, material_1.useTheme)();
77
+ const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
76
78
  // CONTEXT
77
79
  const scUserContext = (0, react_core_1.useSCUser)();
78
80
  const scPreferencesContext = (0, react_core_1.useSCPreferences)();
@@ -167,7 +169,7 @@ function Groups(inProps) {
167
169
  react_1.default.createElement(material_1.Typography, { variant: "h4" },
168
170
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" })),
169
171
  react_1.default.createElement(material_1.Typography, { variant: "body1" },
170
- react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" })))) : (react_1.default.createElement(InfiniteScroll_1.default, { dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: react_1.default.createElement(Skeleton_1.default, { groupsNumber: 2 }), endMessage: react_1.default.createElement(material_1.Typography, { component: "div", className: classes.endMessage },
172
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" })))) : (react_1.default.createElement(InfiniteScroll_1.default, { dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? react_1.default.createElement(Group_1.GroupSkeleton, null) : react_1.default.createElement(Skeleton_1.default, { groupsNumber: 2 }), endMessage: react_1.default.createElement(material_1.Typography, { component: "div", className: classes.endMessage },
171
173
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.endMessage", defaultMessage: "ui.groups.endMessage", values: {
172
174
  button: (chunk) => (react_1.default.createElement(material_1.Button, { color: "secondary", variant: "text", onClick: handleScrollUp }, chunk))
173
175
  } })) },
package/lib/cjs/components/Groups/Skeleton.d.ts CHANGED
@@ -10,7 +10,7 @@ export interface GroupsSkeletonProps {
10
10
  */
11
11
  GroupSkeletonProps?: any;
12
12
  /**
13
- * @default 10
13
+ * @default 20
14
14
  */
15
15
  groupsNumber?: number;
16
16
  }
package/lib/cjs/components/Groups/Skeleton.js CHANGED
@@ -37,7 +37,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
37
37
  *
38
38
  */
39
39
  function GroupsSkeleton(inProps) {
40
- const { className, GroupSkeletonProps = {}, groupsNumber = 10 } = inProps, rest = tslib_1.__rest(inProps, ["className", "GroupSkeletonProps", "groupsNumber"]);
40
+ const { className, GroupSkeletonProps = {}, groupsNumber = 20 } = inProps, rest = tslib_1.__rest(inProps, ["className", "GroupSkeletonProps", "groupsNumber"]);
41
41
  return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest),
42
42
  react_1.default.createElement(material_1.Grid, { container: true, spacing: { xs: 3 }, className: classes.groups }, [...Array(groupsNumber)].map((category, index) => (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, sm: 8, md: 6, key: index },
43
43
  react_1.default.createElement(Group_1.GroupSkeleton, Object.assign({ elevation: 0, variant: 'outlined' }, GroupSkeletonProps))))))));
package/lib/esm/components/Groups/Groups.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { __rest } from "tslib";
2
2
  import React, { useEffect, useMemo, useState } from 'react';
3
3
  import { styled } from '@mui/material/styles';
4
- import { Box, Button, Grid, TextField, Typography } from '@mui/material';
4
+ import { Box, Button, Grid, TextField, Typography, useMediaQuery, useTheme } from '@mui/material';
5
5
  import { Endpoints, GroupService, http } from '@selfcommunity/api-services';
6
6
  import { Logger, sortByAttr } from '@selfcommunity/utils';
7
7
  import { SCPreferences, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
@@ -12,7 +12,7 @@ import { SCOPE_SC_UI } from '../../constants/Errors';
12
12
  import { useThemeProps } from '@mui/system';
13
13
  import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
14
14
  import { PREFIX } from './constants';
15
- import Group from '../Group';
15
+ import Group, { GroupSkeleton } from '../Group';
16
16
  import { DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
17
17
  import InfiniteScroll from '../../shared/InfiniteScroll';
18
18
  const classes = {
@@ -71,6 +71,8 @@ export default function Groups(inProps) {
71
71
  const [loading, setLoading] = useState(true);
72
72
  const [next, setNext] = useState(null);
73
73
  const [search, setSearch] = useState('');
74
+ const theme = useTheme();
75
+ const isMobile = useMediaQuery(theme.breakpoints.down('md'));
74
76
  // CONTEXT
75
77
  const scUserContext = useSCUser();
76
78
  const scPreferencesContext = useSCPreferences();
@@ -165,7 +167,7 @@ export default function Groups(inProps) {
165
167
  React.createElement(Typography, { variant: "h4" },
166
168
  React.createElement(FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" })),
167
169
  React.createElement(Typography, { variant: "body1" },
168
- React.createElement(FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" })))) : (React.createElement(InfiniteScroll, { dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: React.createElement(Skeleton, { groupsNumber: 2 }), endMessage: React.createElement(Typography, { component: "div", className: classes.endMessage },
170
+ React.createElement(FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" })))) : (React.createElement(InfiniteScroll, { dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? React.createElement(GroupSkeleton, null) : React.createElement(Skeleton, { groupsNumber: 2 }), endMessage: React.createElement(Typography, { component: "div", className: classes.endMessage },
169
171
  React.createElement(FormattedMessage, { id: "ui.groups.endMessage", defaultMessage: "ui.groups.endMessage", values: {
170
172
  button: (chunk) => (React.createElement(Button, { color: "secondary", variant: "text", onClick: handleScrollUp }, chunk))
171
173
  } })) },
package/lib/esm/components/Groups/Skeleton.d.ts CHANGED
@@ -10,7 +10,7 @@ export interface GroupsSkeletonProps {
10
10
  */
11
11
  GroupSkeletonProps?: any;
12
12
  /**
13
- * @default 10
13
+ * @default 20
14
14
  */
15
15
  groupsNumber?: number;
16
16
  }
package/lib/esm/components/Groups/Skeleton.js CHANGED
@@ -35,7 +35,7 @@ const Root = styled(Box, {
35
35
  *
36
36
  */
37
37
  export default function GroupsSkeleton(inProps) {
38
- const { className, GroupSkeletonProps = {}, groupsNumber = 10 } = inProps, rest = __rest(inProps, ["className", "GroupSkeletonProps", "groupsNumber"]);
38
+ const { className, GroupSkeletonProps = {}, groupsNumber = 20 } = inProps, rest = __rest(inProps, ["className", "GroupSkeletonProps", "groupsNumber"]);
39
39
  return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest),
40
40
  React.createElement(Grid, { container: true, spacing: { xs: 3 }, className: classes.groups }, [...Array(groupsNumber)].map((category, index) => (React.createElement(Grid, { item: true, xs: 12, sm: 8, md: 6, key: index },
41
41
  React.createElement(GroupSkeleton, Object.assign({ elevation: 0, variant: 'outlined' }, GroupSkeletonProps))))))));