@selfcommunity/react-ui 0.7.9-alpha.52 → 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 (10) hide show
  1. package/lib/cjs/components/Groups/Groups.d.ts +1 -1
  2. package/lib/cjs/components/Groups/Groups.js +5 -3
  3. package/lib/cjs/components/Groups/Skeleton.d.ts +1 -1
  4. package/lib/cjs/components/Groups/Skeleton.js +1 -1
  5. package/lib/esm/components/Groups/Groups.d.ts +1 -1
  6. package/lib/esm/components/Groups/Groups.js +7 -5
  7. package/lib/esm/components/Groups/Skeleton.d.ts +1 -1
  8. package/lib/esm/components/Groups/Skeleton.js +1 -1
  9. package/lib/umd/react-ui.js +1 -1
  10. package/package.json +3 -3
package/lib/cjs/components/Groups/Groups.d.ts CHANGED
@@ -7,7 +7,7 @@ export interface GroupsProps {
7
7
  className?: string;
8
8
  /**
9
9
  * Feed API Query Params
10
- * @default [{'limit': 10, 'offset': 0}]
10
+ * @default [{'limit': 20, 'offset': 0}]
11
11
  */
12
12
  endpointQueryParams?: Record<string, string | number>;
13
13
  /**
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 = {
@@ -67,12 +67,14 @@ function Groups(inProps) {
67
67
  props: inProps,
68
68
  name: constants_1.PREFIX
69
69
  });
70
- const { endpointQueryParams = { limit: Pagination_1.DEFAULT_PAGINATION_LIMIT, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: material_1.Box } }, showFilters = false, filters, general = true } = props, rest = tslib_1.__rest(props, ["endpointQueryParams", "className", "GroupComponentProps", "showFilters", "filters", "general"]);
70
+ const { endpointQueryParams = { limit: 20, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: material_1.Box } }, showFilters = false, filters, general = true } = props, rest = tslib_1.__rest(props, ["endpointQueryParams", "className", "GroupComponentProps", "showFilters", "filters", "general"]);
71
71
  // STATE
72
72
  const [groups, setGroups] = (0, react_1.useState)([]);
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.d.ts CHANGED
@@ -7,7 +7,7 @@ export interface GroupsProps {
7
7
  className?: string;
8
8
  /**
9
9
  * Feed API Query Params
10
- * @default [{'limit': 10, 'offset': 0}]
10
+ * @default [{'limit': 20, 'offset': 0}]
11
11
  */
12
12
  endpointQueryParams?: Record<string, string | number>;
13
13
  /**
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,8 +12,8 @@ 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';
16
- import { DEFAULT_PAGINATION_LIMIT, DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
15
+ import Group, { GroupSkeleton } from '../Group';
16
+ import { DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
17
17
  import InfiniteScroll from '../../shared/InfiniteScroll';
18
18
  const classes = {
19
19
  root: `${PREFIX}-root`,
@@ -65,12 +65,14 @@ export default function Groups(inProps) {
65
65
  props: inProps,
66
66
  name: PREFIX
67
67
  });
68
- const { endpointQueryParams = { limit: DEFAULT_PAGINATION_LIMIT, offset: DEFAULT_PAGINATION_OFFSET }, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: Box } }, showFilters = false, filters, general = true } = props, rest = __rest(props, ["endpointQueryParams", "className", "GroupComponentProps", "showFilters", "filters", "general"]);
68
+ const { endpointQueryParams = { limit: 20, offset: DEFAULT_PAGINATION_OFFSET }, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: Box } }, showFilters = false, filters, general = true } = props, rest = __rest(props, ["endpointQueryParams", "className", "GroupComponentProps", "showFilters", "filters", "general"]);
69
69
  // STATE
70
70
  const [groups, setGroups] = useState([]);
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))))))));