@selfcommunity/react-ui 0.7.47 → 0.7.48-alpha.1

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 (12) hide show
  1. package/lib/cjs/components/CreateGroupButton/CreateGroupButton.js +9 -2
  2. package/lib/cjs/components/GroupForm/GroupForm.d.ts +2 -0
  3. package/lib/cjs/components/GroupForm/GroupForm.js +38 -6
  4. package/lib/cjs/components/GroupHeader/GroupHeader.js +18 -2
  5. package/lib/cjs/components/GroupInfoWidget/GroupInfoWidget.js +27 -4
  6. package/lib/esm/components/CreateGroupButton/CreateGroupButton.js +11 -4
  7. package/lib/esm/components/GroupForm/GroupForm.d.ts +2 -0
  8. package/lib/esm/components/GroupForm/GroupForm.js +39 -7
  9. package/lib/esm/components/GroupHeader/GroupHeader.js +19 -3
  10. package/lib/esm/components/GroupInfoWidget/GroupInfoWidget.js +29 -6
  11. package/lib/umd/react-ui.js +1 -1
  12. package/package.json +7 -7
package/lib/cjs/components/CreateGroupButton/CreateGroupButton.js CHANGED
@@ -9,6 +9,7 @@ const react_intl_1 = require("react-intl");
9
9
  const react_core_1 = require("@selfcommunity/react-core");
10
10
  const classnames_1 = tslib_1.__importDefault(require("classnames"));
11
11
  const GroupForm_1 = tslib_1.__importDefault(require("../GroupForm"));
12
+ const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
12
13
  const PREFIX = 'SCCreateGroupButton';
13
14
  const classes = {
14
15
  root: `${PREFIX}-root`
@@ -38,6 +39,7 @@ const Root = (0, styles_1.styled)(material_1.Button, {
38
39
  * @param inProps
39
40
  */
40
41
  function CreateGroupButton(inProps) {
42
+ var _a;
41
43
  //PROPS
42
44
  const props = (0, system_1.useThemeProps)({
43
45
  props: inProps,
@@ -50,6 +52,11 @@ function CreateGroupButton(inProps) {
50
52
  const [open, setOpen] = react_1.default.useState(false);
51
53
  // CONST
52
54
  const authUserId = scUserContext.user ? scUserContext.user.id : null;
55
+ const preferences = (0, react_core_1.useSCPreferences)();
56
+ const onlyStaffEnabled = (0, react_1.useMemo)(() => preferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ONLY_STAFF_ENABLED].value, [preferences.preferences]);
57
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
58
+ // @ts-ignore
59
+ const canCreateGroup = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_group; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
53
60
  /**
54
61
  * Handle click on button
55
62
  */
@@ -59,8 +66,8 @@ function CreateGroupButton(inProps) {
59
66
  /**
60
67
  * If there's no authUserId, component is hidden.
61
68
  */
62
- if (!authUserId) {
63
- return null;
69
+ if ((!canCreateGroup && onlyStaffEnabled) || !authUserId) {
70
+ return react_1.default.createElement(HiddenPlaceholder_1.default, null);
64
71
  }
65
72
  /**
66
73
  * Renders root object
package/lib/cjs/components/GroupForm/GroupForm.d.ts CHANGED
@@ -60,6 +60,8 @@ export interface GroupFormProps extends BaseDialogProps {
60
60
  |content|.SCGroupForm-content|Styles applied to the element.|
61
61
  |privacySection|.SCGroupForm-privacy-section|Styles applied to the privacy section.|
62
62
  |privacySectionInfo|.SCGroupForm-privacy-section-info|Styles applied to the privacy info section.|
63
+ |visibilitySection|.SCGroupForm-visibility-section|Styles applied to the visibility section.|
64
+ |visibilitySectionInfo|.SCGroupForm-visibility-section-info|Styles applied to the visibility section info.|
63
65
  |inviteSection|.SCGroupForm-invite-section|Styles applied to the invite section.|
64
66
  |error|.SCGroupForm-error|Styles applied to the error elements.|
65
67
 
package/lib/cjs/components/GroupForm/GroupForm.js CHANGED
@@ -46,8 +46,8 @@ const classes = {
46
46
  content: `${constants_1.PREFIX}-content`,
47
47
  privacySection: `${constants_1.PREFIX}-privacy-section`,
48
48
  privacySectionInfo: `${constants_1.PREFIX}-privacy-section-info`,
49
- // visibilitySection: `${PREFIX}-visibility-section`,
50
- // visibilitySectionInfo: `${PREFIX}-visibility-section-info`,
49
+ visibilitySection: `${constants_1.PREFIX}-visibility-section`,
50
+ visibilitySectionInfo: `${constants_1.PREFIX}-visibility-section-info`,
51
51
  inviteSection: `${constants_1.PREFIX}-invite-section`,
52
52
  error: `${constants_1.PREFIX}-error`
53
53
  };
@@ -84,6 +84,8 @@ const Root = (0, styles_1.styled)(BaseDialog_1.default, {
84
84
  |content|.SCGroupForm-content|Styles applied to the element.|
85
85
  |privacySection|.SCGroupForm-privacy-section|Styles applied to the privacy section.|
86
86
  |privacySectionInfo|.SCGroupForm-privacy-section-info|Styles applied to the privacy info section.|
87
+ |visibilitySection|.SCGroupForm-visibility-section|Styles applied to the visibility section.|
88
+ |visibilitySectionInfo|.SCGroupForm-visibility-section-info|Styles applied to the visibility section info.|
87
89
  |inviteSection|.SCGroupForm-invite-section|Styles applied to the invite section.|
88
90
  |error|.SCGroupForm-error|Styles applied to the error elements.|
89
91
 
@@ -105,7 +107,7 @@ function GroupForm(inProps) {
105
107
  name: group ? group.name : '',
106
108
  description: group ? group.description : '',
107
109
  isPublic: group && group.privacy === types_1.SCGroupPrivacyType.PUBLIC,
108
- // isVisible: group ? group.visible : true,
110
+ isVisible: group ? group.visible : true,
109
111
  invitedUsers: null,
110
112
  isSubmitting: false
111
113
  };
@@ -116,6 +118,8 @@ function GroupForm(inProps) {
116
118
  const intl = (0, react_intl_1.useIntl)();
117
119
  // PREFERENCES
118
120
  const scPreferences = (0, react_core_1.useSCPreferences)();
121
+ const visibilityEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
122
+ const privateEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
119
123
  const _backgroundCover = Object.assign({}, (field.emotionalImageOriginal
120
124
  ? { background: `url('${field.emotionalImageOriginal}') center / cover` }
121
125
  : { background: `url('${scPreferences.preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
@@ -164,8 +168,12 @@ function GroupForm(inProps) {
164
168
  const formData = new FormData();
165
169
  formData.append('name', field.name);
166
170
  formData.append('description', field.description);
167
- formData.append('privacy', field.isPublic ? types_1.SCGroupPrivacyType.PUBLIC : types_1.SCGroupPrivacyType.PRIVATE);
168
- // formData.append('visible', field.isVisible);
171
+ if (privateEnabled) {
172
+ formData.append('privacy', field.isPublic ? types_1.SCGroupPrivacyType.PUBLIC : types_1.SCGroupPrivacyType.PRIVATE);
173
+ }
174
+ if (visibilityEnabled) {
175
+ formData.append('visible', field.isVisible);
176
+ }
169
177
  if (field.imageOriginalFile) {
170
178
  formData.append('image_original', field.imageOriginalFile);
171
179
  }
@@ -231,7 +239,7 @@ function GroupForm(inProps) {
231
239
  react_1.default.createElement(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
232
240
  endAdornment: (react_1.default.createElement(material_1.Typography, { variant: "body2" }, ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? Group_1.GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : Group_1.GROUP_DESCRIPTION_MAX_LENGTH))
233
241
  }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > Group_1.GROUP_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > Group_1.GROUP_DESCRIPTION_MAX_LENGTH ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.description.error.maxLength", defaultMessage: "ui.groupForm.description.error.maxLength" })) : null }),
234
- react_1.default.createElement(material_1.Box, { className: classes.privacySection },
242
+ privateEnabled && (react_1.default.createElement(material_1.Box, { className: classes.privacySection },
235
243
  react_1.default.createElement(material_1.Typography, { variant: "h4" },
236
244
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.title", defaultMessage: "ui.groupForm.privacy.title", values: {
237
245
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
@@ -259,6 +267,30 @@ function GroupForm(inProps) {
259
267
  // @ts-ignore
260
268
  b: (chunks) => react_1.default.createElement("strong", null, chunks)
261
269
  } }))))))),
270
+ visibilityEnabled && (react_1.default.createElement(material_1.Box, { className: classes.visibilitySection }, ((!field.isPublic && !group) || (group && !field.isPublic)) && (react_1.default.createElement(react_1.default.Fragment, null,
271
+ react_1.default.createElement(material_1.Typography, { variant: "h4" },
272
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.title", defaultMessage: "ui.groupForm.visibility.title", values: {
273
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
274
+ // @ts-ignore
275
+ b: (chunks) => react_1.default.createElement("strong", null, chunks)
276
+ } })),
277
+ react_1.default.createElement(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center" },
278
+ react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isVisible }) },
279
+ react_1.default.createElement(material_1.Icon, null, "visibility_off"),
280
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.hidden", defaultMessage: "ui.groupForm.visibility.hidden" })),
281
+ react_1.default.createElement(material_1.Switch, { className: classes.switch, checked: field.isVisible, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isVisible']: !field.isVisible }))) }),
282
+ react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isVisible }) },
283
+ react_1.default.createElement(material_1.Icon, null, "visibility"),
284
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" }))),
285
+ react_1.default.createElement(material_1.Typography, { variant: "body2", className: classes.visibilitySectionInfo }, !field.isVisible ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.hidden.info", defaultMessage: "ui.groupForm.visibility.hidden.info", values: {
286
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
287
+ // @ts-ignore
288
+ b: (chunks) => react_1.default.createElement("strong", null, chunks)
289
+ } })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.visible.info", defaultMessage: "ui.groupForm.visibility.visible.info", values: {
290
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
291
+ // @ts-ignore
292
+ b: (chunks) => react_1.default.createElement("strong", null, chunks)
293
+ } })))))))),
262
294
  !group && (react_1.default.createElement(react_1.default.Fragment, null,
263
295
  react_1.default.createElement(material_1.Divider, null),
264
296
  react_1.default.createElement(material_1.Box, { className: classes.inviteSection },
package/lib/cjs/components/GroupHeader/GroupHeader.js CHANGED
@@ -12,6 +12,7 @@ const system_1 = require("@mui/system");
12
12
  const constants_1 = require("./constants");
13
13
  const ChangeGroupCover_1 = tslib_1.__importDefault(require("../ChangeGroupCover"));
14
14
  const react_intl_1 = require("react-intl");
15
+ const Bullet_1 = tslib_1.__importDefault(require("../../shared/Bullet"));
15
16
  const ChangeGroupPicture_1 = tslib_1.__importDefault(require("../ChangeGroupPicture"));
16
17
  const GroupMembersButton_1 = tslib_1.__importDefault(require("../GroupMembersButton"));
17
18
  const EditGroupButton_1 = tslib_1.__importDefault(require("../EditGroupButton"));
@@ -27,8 +28,8 @@ const classes = {
27
28
  name: `${constants_1.PREFIX}-name`,
28
29
  changePicture: `${constants_1.PREFIX}-change-picture`,
29
30
  changeCover: `${constants_1.PREFIX}-change-cover`,
30
- // visibility: `${PREFIX}-visibility`,
31
- // visibilityItem: `${PREFIX}-visibility-item`,
31
+ visibility: `${constants_1.PREFIX}-visibility`,
32
+ visibilityItem: `${constants_1.PREFIX}-visibility-item`,
32
33
  members: `${constants_1.PREFIX}-members`,
33
34
  membersCounter: `${constants_1.PREFIX}-members-counter`
34
35
  };
@@ -77,6 +78,8 @@ function GroupHeader(inProps) {
77
78
  const { id = null, className = null, group, groupId = null, ChangePictureProps = {}, ChangeCoverProps = {}, GroupSubscribeButtonProps = {}, GroupMembersButtonProps = {} } = props, rest = tslib_1.__rest(props, ["id", "className", "group", "groupId", "ChangePictureProps", "ChangeCoverProps", "GroupSubscribeButtonProps", "GroupMembersButtonProps"]);
78
79
  // PREFERENCES
79
80
  const scPreferences = (0, react_core_1.useSCPreferences)();
81
+ const visibilityEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
82
+ const privateEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
80
83
  // CONTEXT
81
84
  const scUserContext = (0, react_core_1.useSCUser)();
82
85
  // HOOKS
@@ -155,6 +158,19 @@ function GroupHeader(inProps) {
155
158
  react_1.default.createElement(material_1.Box, { className: classes.info },
156
159
  isGroupAdmin && react_1.default.createElement(EditGroupButton_1.default, { group: scGroup, groupId: scGroup.id, onEditSuccess: (data) => setSCGroup(data) }),
157
160
  react_1.default.createElement(material_1.Typography, { variant: "h5", className: classes.name }, scGroup.name),
161
+ (privateEnabled || visibilityEnabled) && (react_1.default.createElement(material_1.Box, { className: classes.visibility },
162
+ privateEnabled && (react_1.default.createElement(react_1.default.Fragment, null, scGroup.privacy === types_1.SCGroupPrivacyType.PUBLIC ? (react_1.default.createElement(material_1.Typography, { className: classes.visibilityItem },
163
+ react_1.default.createElement(material_1.Icon, null, "public"),
164
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.public", defaultMessage: "ui.groupHeader.visibility.public" }))) : (react_1.default.createElement(material_1.Typography, { className: classes.visibilityItem },
165
+ react_1.default.createElement(material_1.Icon, null, "private"),
166
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.private", defaultMessage: "ui.groupHeader.visibility.private" }))))),
167
+ visibilityEnabled && (react_1.default.createElement(react_1.default.Fragment, null,
168
+ privateEnabled && react_1.default.createElement(Bullet_1.default, null),
169
+ scGroup.visible ? (react_1.default.createElement(material_1.Typography, { className: classes.visibilityItem },
170
+ react_1.default.createElement(material_1.Icon, null, "visibility"),
171
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.visible", defaultMessage: "ui.groupHeader.visibility.visible" }))) : (react_1.default.createElement(material_1.Typography, { className: classes.visibilityItem },
172
+ react_1.default.createElement(material_1.Icon, null, "visibility_off"),
173
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.hidden", defaultMessage: "ui.groupHeader.visibility.hidden" }))))))),
158
174
  react_1.default.createElement(react_1.default.Fragment, null, ((scGroup && scGroup.privacy === types_1.SCGroupPrivacyType.PUBLIC) ||
159
175
  scGroup.subscription_status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED ||
160
176
  isGroupAdmin) && (react_1.default.createElement(material_1.Box, { className: classes.members },
package/lib/cjs/components/GroupInfoWidget/GroupInfoWidget.js CHANGED
@@ -21,8 +21,8 @@ const classes = {
21
21
  description: `${constants_1.PREFIX}-description`,
22
22
  privacy: `${constants_1.PREFIX}-privacy`,
23
23
  privacyTitle: `${constants_1.PREFIX}-privacy-title`,
24
- // visibility: `${PREFIX}-visibility`,
25
- // visibilityTitle: `${PREFIX}-visibility-title`,
24
+ visibility: `${constants_1.PREFIX}-visibility`,
25
+ visibilityTitle: `${constants_1.PREFIX}-visibility-title`,
26
26
  admin: `${constants_1.PREFIX}-admin`,
27
27
  date: `${constants_1.PREFIX}-date`
28
28
  };
@@ -72,6 +72,10 @@ function GroupInfoWidget(inProps) {
72
72
  const intl = (0, react_intl_1.useIntl)();
73
73
  // REFS
74
74
  const updatesSubscription = (0, react_1.useRef)(null);
75
+ // PREFERENCES
76
+ const scPreferences = (0, react_core_1.useSCPreferences)();
77
+ const visibilityEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
78
+ const privateEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
75
79
  /**
76
80
  * Subscriber for pubsub callback
77
81
  */
@@ -105,7 +109,7 @@ function GroupInfoWidget(inProps) {
105
109
  react_1.default.createElement(material_1.Typography, { variant: "h4", className: classes.title },
106
110
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupInfoWidget.title", defaultMessage: "ui.groupInfoWidget.title" })),
107
111
  react_1.default.createElement(material_1.Typography, { variant: "body1", className: classes.description }, scGroup.description),
108
- react_1.default.createElement(material_1.Typography, { component: "div", className: classes.privacy }, scGroup.privacy === types_1.SCGroupPrivacyType.PUBLIC ? (react_1.default.createElement(react_1.default.Fragment, null,
112
+ privateEnabled && (react_1.default.createElement(material_1.Typography, { component: "div", className: classes.privacy }, scGroup.privacy === types_1.SCGroupPrivacyType.PUBLIC ? (react_1.default.createElement(react_1.default.Fragment, null,
109
113
  react_1.default.createElement(material_1.Typography, { className: classes.privacyTitle },
110
114
  react_1.default.createElement(material_1.Icon, null, "public"),
111
115
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupInfoWidget.privacy.public", defaultMessage: "ui.groupInfoWidget.privacy.public" })),
@@ -123,7 +127,26 @@ function GroupInfoWidget(inProps) {
123
127
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
124
128
  // @ts-ignore
125
129
  b: (chunks) => react_1.default.createElement("strong", null, chunks)
126
- } }))))),
130
+ } })))))),
131
+ visibilityEnabled && (react_1.default.createElement(react_1.default.Fragment, null, scGroup.privacy === types_1.SCGroupPrivacyType.PRIVATE && (react_1.default.createElement(material_1.Typography, { component: "div", className: classes.visibility }, scGroup.visible ? (react_1.default.createElement(react_1.default.Fragment, null,
132
+ react_1.default.createElement(material_1.Typography, { className: classes.visibilityTitle },
133
+ react_1.default.createElement(material_1.Icon, null, "visibility"),
134
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" })),
135
+ react_1.default.createElement(material_1.Typography, { variant: "body2" },
136
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.visible.info", defaultMessage: "ui.groupForm.visibility.visible.info", values: {
137
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
138
+ // @ts-ignore
139
+ b: (chunks) => react_1.default.createElement("strong", null, chunks)
140
+ } })))) : (react_1.default.createElement(react_1.default.Fragment, null,
141
+ react_1.default.createElement(material_1.Typography, { className: classes.visibilityTitle },
142
+ react_1.default.createElement(material_1.Icon, null, "visibility_off"),
143
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.hidden", defaultMessage: "ui.groupForm.visibility.hidden" })),
144
+ react_1.default.createElement(material_1.Typography, { variant: "body2" },
145
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.hidden.info", defaultMessage: "ui.groupForm.visibility.hidden.info", values: {
146
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
147
+ // @ts-ignore
148
+ b: (chunks) => react_1.default.createElement("strong", null, chunks)
149
+ } })))))))),
127
150
  react_1.default.createElement(material_1.Typography, { variant: "body2", className: classes.date },
128
151
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupInfoWidget.date", defaultMessage: "ui.groupInfoWidget.date", values: { date: intl.formatDate(scGroup.created_at, { day: 'numeric', year: 'numeric', month: 'long' }) } })),
129
152
  react_1.default.createElement(material_1.Typography, { component: "div", className: classes.admin },
package/lib/esm/components/CreateGroupButton/CreateGroupButton.js CHANGED
@@ -1,12 +1,13 @@
1
1
  import { __rest } from "tslib";
2
- import React, { useContext } from 'react';
2
+ import React, { useContext, useMemo } from 'react';
3
3
  import { useThemeProps } from '@mui/system';
4
4
  import { styled } from '@mui/material/styles';
5
5
  import { Button, Icon } from '@mui/material';
6
6
  import { FormattedMessage } from 'react-intl';
7
- import { SCUserContext } from '@selfcommunity/react-core';
7
+ import { SCPreferences, SCUserContext, useSCPreferences } from '@selfcommunity/react-core';
8
8
  import classNames from 'classnames';
9
9
  import GroupForm from '../GroupForm';
10
+ import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
10
11
  const PREFIX = 'SCCreateGroupButton';
11
12
  const classes = {
12
13
  root: `${PREFIX}-root`
@@ -36,6 +37,7 @@ const Root = styled(Button, {
36
37
  * @param inProps
37
38
  */
38
39
  export default function CreateGroupButton(inProps) {
40
+ var _a;
39
41
  //PROPS
40
42
  const props = useThemeProps({
41
43
  props: inProps,
@@ -48,6 +50,11 @@ export default function CreateGroupButton(inProps) {
48
50
  const [open, setOpen] = React.useState(false);
49
51
  // CONST
50
52
  const authUserId = scUserContext.user ? scUserContext.user.id : null;
53
+ const preferences = useSCPreferences();
54
+ const onlyStaffEnabled = useMemo(() => preferences.preferences[SCPreferences.CONFIGURATIONS_GROUPS_ONLY_STAFF_ENABLED].value, [preferences.preferences]);
55
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
56
+ // @ts-ignore
57
+ const canCreateGroup = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_group; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
51
58
  /**
52
59
  * Handle click on button
53
60
  */
@@ -57,8 +64,8 @@ export default function CreateGroupButton(inProps) {
57
64
  /**
58
65
  * If there's no authUserId, component is hidden.
59
66
  */
60
- if (!authUserId) {
61
- return null;
67
+ if ((!canCreateGroup && onlyStaffEnabled) || !authUserId) {
68
+ return React.createElement(HiddenPlaceholder, null);
62
69
  }
63
70
  /**
64
71
  * Renders root object
package/lib/esm/components/GroupForm/GroupForm.d.ts CHANGED
@@ -60,6 +60,8 @@ export interface GroupFormProps extends BaseDialogProps {
60
60
  |content|.SCGroupForm-content|Styles applied to the element.|
61
61
  |privacySection|.SCGroupForm-privacy-section|Styles applied to the privacy section.|
62
62
  |privacySectionInfo|.SCGroupForm-privacy-section-info|Styles applied to the privacy info section.|
63
+ |visibilitySection|.SCGroupForm-visibility-section|Styles applied to the visibility section.|
64
+ |visibilitySectionInfo|.SCGroupForm-visibility-section-info|Styles applied to the visibility section info.|
63
65
  |inviteSection|.SCGroupForm-invite-section|Styles applied to the invite section.|
64
66
  |error|.SCGroupForm-error|Styles applied to the error elements.|
65
67
 
package/lib/esm/components/GroupForm/GroupForm.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __rest } from "tslib";
2
- import React, { useState } from 'react';
2
+ import React, { useMemo, useState } from 'react';
3
3
  import { useThemeProps } from '@mui/system';
4
4
  import { styled } from '@mui/material/styles';
5
5
  import { Avatar, Box, Divider, FormGroup, Icon, Paper, Stack, Switch, TextField, Typography } from '@mui/material';
@@ -44,8 +44,8 @@ const classes = {
44
44
  content: `${PREFIX}-content`,
45
45
  privacySection: `${PREFIX}-privacy-section`,
46
46
  privacySectionInfo: `${PREFIX}-privacy-section-info`,
47
- // visibilitySection: `${PREFIX}-visibility-section`,
48
- // visibilitySectionInfo: `${PREFIX}-visibility-section-info`,
47
+ visibilitySection: `${PREFIX}-visibility-section`,
48
+ visibilitySectionInfo: `${PREFIX}-visibility-section-info`,
49
49
  inviteSection: `${PREFIX}-invite-section`,
50
50
  error: `${PREFIX}-error`
51
51
  };
@@ -82,6 +82,8 @@ const Root = styled(BaseDialog, {
82
82
  |content|.SCGroupForm-content|Styles applied to the element.|
83
83
  |privacySection|.SCGroupForm-privacy-section|Styles applied to the privacy section.|
84
84
  |privacySectionInfo|.SCGroupForm-privacy-section-info|Styles applied to the privacy info section.|
85
+ |visibilitySection|.SCGroupForm-visibility-section|Styles applied to the visibility section.|
86
+ |visibilitySectionInfo|.SCGroupForm-visibility-section-info|Styles applied to the visibility section info.|
85
87
  |inviteSection|.SCGroupForm-invite-section|Styles applied to the invite section.|
86
88
  |error|.SCGroupForm-error|Styles applied to the error elements.|
87
89
 
@@ -103,7 +105,7 @@ export default function GroupForm(inProps) {
103
105
  name: group ? group.name : '',
104
106
  description: group ? group.description : '',
105
107
  isPublic: group && group.privacy === SCGroupPrivacyType.PUBLIC,
106
- // isVisible: group ? group.visible : true,
108
+ isVisible: group ? group.visible : true,
107
109
  invitedUsers: null,
108
110
  isSubmitting: false
109
111
  };
@@ -114,6 +116,8 @@ export default function GroupForm(inProps) {
114
116
  const intl = useIntl();
115
117
  // PREFERENCES
116
118
  const scPreferences = useSCPreferences();
119
+ const visibilityEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_GROUPS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
120
+ const privateEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_GROUPS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
117
121
  const _backgroundCover = Object.assign({}, (field.emotionalImageOriginal
118
122
  ? { background: `url('${field.emotionalImageOriginal}') center / cover` }
119
123
  : { background: `url('${scPreferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
@@ -162,8 +166,12 @@ export default function GroupForm(inProps) {
162
166
  const formData = new FormData();
163
167
  formData.append('name', field.name);
164
168
  formData.append('description', field.description);
165
- formData.append('privacy', field.isPublic ? SCGroupPrivacyType.PUBLIC : SCGroupPrivacyType.PRIVATE);
166
- // formData.append('visible', field.isVisible);
169
+ if (privateEnabled) {
170
+ formData.append('privacy', field.isPublic ? SCGroupPrivacyType.PUBLIC : SCGroupPrivacyType.PRIVATE);
171
+ }
172
+ if (visibilityEnabled) {
173
+ formData.append('visible', field.isVisible);
174
+ }
167
175
  if (field.imageOriginalFile) {
168
176
  formData.append('image_original', field.imageOriginalFile);
169
177
  }
@@ -229,7 +237,7 @@ export default function GroupForm(inProps) {
229
237
  React.createElement(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
230
238
  endAdornment: (React.createElement(Typography, { variant: "body2" }, ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : GROUP_DESCRIPTION_MAX_LENGTH))
231
239
  }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > GROUP_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > GROUP_DESCRIPTION_MAX_LENGTH ? (React.createElement(FormattedMessage, { id: "ui.groupForm.description.error.maxLength", defaultMessage: "ui.groupForm.description.error.maxLength" })) : null }),
232
- React.createElement(Box, { className: classes.privacySection },
240
+ privateEnabled && (React.createElement(Box, { className: classes.privacySection },
233
241
  React.createElement(Typography, { variant: "h4" },
234
242
  React.createElement(FormattedMessage, { id: "ui.groupForm.privacy.title", defaultMessage: "ui.groupForm.privacy.title", values: {
235
243
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
@@ -257,6 +265,30 @@ export default function GroupForm(inProps) {
257
265
  // @ts-ignore
258
266
  b: (chunks) => React.createElement("strong", null, chunks)
259
267
  } }))))))),
268
+ visibilityEnabled && (React.createElement(Box, { className: classes.visibilitySection }, ((!field.isPublic && !group) || (group && !field.isPublic)) && (React.createElement(React.Fragment, null,
269
+ React.createElement(Typography, { variant: "h4" },
270
+ React.createElement(FormattedMessage, { id: "ui.groupForm.visibility.title", defaultMessage: "ui.groupForm.visibility.title", values: {
271
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
272
+ // @ts-ignore
273
+ b: (chunks) => React.createElement("strong", null, chunks)
274
+ } })),
275
+ React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
276
+ React.createElement(Typography, { className: classNames(classes.switchLabel, { [classes.active]: !field.isVisible }) },
277
+ React.createElement(Icon, null, "visibility_off"),
278
+ React.createElement(FormattedMessage, { id: "ui.groupForm.visibility.hidden", defaultMessage: "ui.groupForm.visibility.hidden" })),
279
+ React.createElement(Switch, { className: classes.switch, checked: field.isVisible, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isVisible']: !field.isVisible }))) }),
280
+ React.createElement(Typography, { className: classNames(classes.switchLabel, { [classes.active]: field.isVisible }) },
281
+ React.createElement(Icon, null, "visibility"),
282
+ React.createElement(FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" }))),
283
+ React.createElement(Typography, { variant: "body2", className: classes.visibilitySectionInfo }, !field.isVisible ? (React.createElement(FormattedMessage, { id: "ui.groupForm.visibility.hidden.info", defaultMessage: "ui.groupForm.visibility.hidden.info", values: {
284
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
285
+ // @ts-ignore
286
+ b: (chunks) => React.createElement("strong", null, chunks)
287
+ } })) : (React.createElement(FormattedMessage, { id: "ui.groupForm.visibility.visible.info", defaultMessage: "ui.groupForm.visibility.visible.info", values: {
288
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
289
+ // @ts-ignore
290
+ b: (chunks) => React.createElement("strong", null, chunks)
291
+ } })))))))),
260
292
  !group && (React.createElement(React.Fragment, null,
261
293
  React.createElement(Divider, null),
262
294
  React.createElement(Box, { className: classes.inviteSection },
package/lib/esm/components/GroupHeader/GroupHeader.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { __rest } from "tslib";
2
2
  import React, { useCallback, useEffect, useMemo, useRef } from 'react';
3
3
  import { styled } from '@mui/material/styles';
4
- import { Avatar, Box, Paper, Typography } from '@mui/material';
4
+ import { Avatar, Box, Icon, Paper, Typography } from '@mui/material';
5
5
  import { SCGroupPrivacyType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
6
6
  import { SCPreferences, useSCFetchGroup, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
7
7
  import GroupHeaderSkeleton from './Skeleton';
@@ -10,6 +10,7 @@ import { useThemeProps } from '@mui/system';
10
10
  import { PREFIX } from './constants';
11
11
  import ChangeGroupCover from '../ChangeGroupCover';
12
12
  import { FormattedMessage } from 'react-intl';
13
+ import Bullet from '../../shared/Bullet';
13
14
  import ChangeGroupPicture from '../ChangeGroupPicture';
14
15
  import GroupMembersButton from '../GroupMembersButton';
15
16
  import EditGroupButton from '../EditGroupButton';
@@ -25,8 +26,8 @@ const classes = {
25
26
  name: `${PREFIX}-name`,
26
27
  changePicture: `${PREFIX}-change-picture`,
27
28
  changeCover: `${PREFIX}-change-cover`,
28
- // visibility: `${PREFIX}-visibility`,
29
- // visibilityItem: `${PREFIX}-visibility-item`,
29
+ visibility: `${PREFIX}-visibility`,
30
+ visibilityItem: `${PREFIX}-visibility-item`,
30
31
  members: `${PREFIX}-members`,
31
32
  membersCounter: `${PREFIX}-members-counter`
32
33
  };
@@ -75,6 +76,8 @@ export default function GroupHeader(inProps) {
75
76
  const { id = null, className = null, group, groupId = null, ChangePictureProps = {}, ChangeCoverProps = {}, GroupSubscribeButtonProps = {}, GroupMembersButtonProps = {} } = props, rest = __rest(props, ["id", "className", "group", "groupId", "ChangePictureProps", "ChangeCoverProps", "GroupSubscribeButtonProps", "GroupMembersButtonProps"]);
76
77
  // PREFERENCES
77
78
  const scPreferences = useSCPreferences();
79
+ const visibilityEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_GROUPS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
80
+ const privateEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_GROUPS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
78
81
  // CONTEXT
79
82
  const scUserContext = useSCUser();
80
83
  // HOOKS
@@ -153,6 +156,19 @@ export default function GroupHeader(inProps) {
153
156
  React.createElement(Box, { className: classes.info },
154
157
  isGroupAdmin && React.createElement(EditGroupButton, { group: scGroup, groupId: scGroup.id, onEditSuccess: (data) => setSCGroup(data) }),
155
158
  React.createElement(Typography, { variant: "h5", className: classes.name }, scGroup.name),
159
+ (privateEnabled || visibilityEnabled) && (React.createElement(Box, { className: classes.visibility },
160
+ privateEnabled && (React.createElement(React.Fragment, null, scGroup.privacy === SCGroupPrivacyType.PUBLIC ? (React.createElement(Typography, { className: classes.visibilityItem },
161
+ React.createElement(Icon, null, "public"),
162
+ React.createElement(FormattedMessage, { id: "ui.groupHeader.visibility.public", defaultMessage: "ui.groupHeader.visibility.public" }))) : (React.createElement(Typography, { className: classes.visibilityItem },
163
+ React.createElement(Icon, null, "private"),
164
+ React.createElement(FormattedMessage, { id: "ui.groupHeader.visibility.private", defaultMessage: "ui.groupHeader.visibility.private" }))))),
165
+ visibilityEnabled && (React.createElement(React.Fragment, null,
166
+ privateEnabled && React.createElement(Bullet, null),
167
+ scGroup.visible ? (React.createElement(Typography, { className: classes.visibilityItem },
168
+ React.createElement(Icon, null, "visibility"),
169
+ React.createElement(FormattedMessage, { id: "ui.groupHeader.visibility.visible", defaultMessage: "ui.groupHeader.visibility.visible" }))) : (React.createElement(Typography, { className: classes.visibilityItem },
170
+ React.createElement(Icon, null, "visibility_off"),
171
+ React.createElement(FormattedMessage, { id: "ui.groupHeader.visibility.hidden", defaultMessage: "ui.groupHeader.visibility.hidden" }))))))),
156
172
  React.createElement(React.Fragment, null, ((scGroup && scGroup.privacy === SCGroupPrivacyType.PUBLIC) ||
157
173
  scGroup.subscription_status === SCGroupSubscriptionStatusType.SUBSCRIBED ||
158
174
  isGroupAdmin) && (React.createElement(Box, { className: classes.members },
package/lib/esm/components/GroupInfoWidget/GroupInfoWidget.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __rest } from "tslib";
2
- import React, { useCallback, useEffect, useRef } from 'react';
2
+ import React, { useCallback, useEffect, useMemo, useRef } from 'react';
3
3
  import { styled } from '@mui/material/styles';
4
4
  import { CardContent, Icon, Typography } from '@mui/material';
5
5
  import classNames from 'classnames';
@@ -9,7 +9,7 @@ import { PREFIX } from './constants';
9
9
  import { FormattedMessage, useIntl } from 'react-intl';
10
10
  import { SCGroupPrivacyType } from '@selfcommunity/types';
11
11
  import PubSub from 'pubsub-js';
12
- import { useSCFetchGroup } from '@selfcommunity/react-core';
12
+ import { SCPreferences, useSCFetchGroup, useSCPreferences } from '@selfcommunity/react-core';
13
13
  import GroupInfoWidgetSkeleton from './Skeleton';
14
14
  import { SCEventType, SCTopicType } from '../../constants/PubSub';
15
15
  import User from '../User';
@@ -19,8 +19,8 @@ const classes = {
19
19
  description: `${PREFIX}-description`,
20
20
  privacy: `${PREFIX}-privacy`,
21
21
  privacyTitle: `${PREFIX}-privacy-title`,
22
- // visibility: `${PREFIX}-visibility`,
23
- // visibilityTitle: `${PREFIX}-visibility-title`,
22
+ visibility: `${PREFIX}-visibility`,
23
+ visibilityTitle: `${PREFIX}-visibility-title`,
24
24
  admin: `${PREFIX}-admin`,
25
25
  date: `${PREFIX}-date`
26
26
  };
@@ -70,6 +70,10 @@ export default function GroupInfoWidget(inProps) {
70
70
  const intl = useIntl();
71
71
  // REFS
72
72
  const updatesSubscription = useRef(null);
73
+ // PREFERENCES
74
+ const scPreferences = useSCPreferences();
75
+ const visibilityEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_GROUPS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
76
+ const privateEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_GROUPS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
73
77
  /**
74
78
  * Subscriber for pubsub callback
75
79
  */
@@ -103,7 +107,7 @@ export default function GroupInfoWidget(inProps) {
103
107
  React.createElement(Typography, { variant: "h4", className: classes.title },
104
108
  React.createElement(FormattedMessage, { id: "ui.groupInfoWidget.title", defaultMessage: "ui.groupInfoWidget.title" })),
105
109
  React.createElement(Typography, { variant: "body1", className: classes.description }, scGroup.description),
106
- React.createElement(Typography, { component: "div", className: classes.privacy }, scGroup.privacy === SCGroupPrivacyType.PUBLIC ? (React.createElement(React.Fragment, null,
110
+ privateEnabled && (React.createElement(Typography, { component: "div", className: classes.privacy }, scGroup.privacy === SCGroupPrivacyType.PUBLIC ? (React.createElement(React.Fragment, null,
107
111
  React.createElement(Typography, { className: classes.privacyTitle },
108
112
  React.createElement(Icon, null, "public"),
109
113
  React.createElement(FormattedMessage, { id: "ui.groupInfoWidget.privacy.public", defaultMessage: "ui.groupInfoWidget.privacy.public" })),
@@ -121,7 +125,26 @@ export default function GroupInfoWidget(inProps) {
121
125
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
122
126
  // @ts-ignore
123
127
  b: (chunks) => React.createElement("strong", null, chunks)
124
- } }))))),
128
+ } })))))),
129
+ visibilityEnabled && (React.createElement(React.Fragment, null, scGroup.privacy === SCGroupPrivacyType.PRIVATE && (React.createElement(Typography, { component: "div", className: classes.visibility }, scGroup.visible ? (React.createElement(React.Fragment, null,
130
+ React.createElement(Typography, { className: classes.visibilityTitle },
131
+ React.createElement(Icon, null, "visibility"),
132
+ React.createElement(FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" })),
133
+ React.createElement(Typography, { variant: "body2" },
134
+ React.createElement(FormattedMessage, { id: "ui.groupForm.visibility.visible.info", defaultMessage: "ui.groupForm.visibility.visible.info", values: {
135
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
136
+ // @ts-ignore
137
+ b: (chunks) => React.createElement("strong", null, chunks)
138
+ } })))) : (React.createElement(React.Fragment, null,
139
+ React.createElement(Typography, { className: classes.visibilityTitle },
140
+ React.createElement(Icon, null, "visibility_off"),
141
+ React.createElement(FormattedMessage, { id: "ui.groupForm.visibility.hidden", defaultMessage: "ui.groupForm.visibility.hidden" })),
142
+ React.createElement(Typography, { variant: "body2" },
143
+ React.createElement(FormattedMessage, { id: "ui.groupForm.visibility.hidden.info", defaultMessage: "ui.groupForm.visibility.hidden.info", values: {
144
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
145
+ // @ts-ignore
146
+ b: (chunks) => React.createElement("strong", null, chunks)
147
+ } })))))))),
125
148
  React.createElement(Typography, { variant: "body2", className: classes.date },
126
149
  React.createElement(FormattedMessage, { id: "ui.groupInfoWidget.date", defaultMessage: "ui.groupInfoWidget.date", values: { date: intl.formatDate(scGroup.created_at, { day: 'numeric', year: 'numeric', month: 'long' }) } })),
127
150
  React.createElement(Typography, { component: "div", className: classes.admin },