@selfcommunity/react-ui 0.7.9-alpha.3 → 0.7.9-alpha.5
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.
- package/lib/cjs/components/Composer/Attributes/Attributes.d.ts +1 -1
- package/lib/cjs/components/Composer/Attributes/Attributes.js +7 -0
- package/lib/cjs/components/Composer/Composer.d.ts +2 -1
- package/lib/cjs/components/Composer/Composer.js +40 -11
- package/lib/cjs/components/Composer/Content/ContentDiscussion/ContentDiscussion.js +7 -3
- package/lib/cjs/components/Composer/Layer/AudienceLayer/AudienceLayer.d.ts +9 -2
- package/lib/cjs/components/Composer/Layer/AudienceLayer/AudienceLayer.js +35 -13
- package/lib/cjs/components/CreateGroupButton/CreateGroupButton.d.ts +2 -2
- package/lib/cjs/components/CreateGroupButton/CreateGroupButton.js +5 -6
- package/lib/cjs/components/CustomAdv/CustomAdv.d.ts +4 -0
- package/lib/cjs/components/{CreateGroup/CreateGroup.d.ts → EditGroupButton/EditGroupButton.d.ts} +11 -16
- package/lib/cjs/components/EditGroupButton/EditGroupButton.js +57 -0
- package/lib/cjs/components/EditGroupButton/index.d.ts +3 -0
- package/lib/cjs/components/EditGroupButton/index.js +5 -0
- package/lib/cjs/components/Group/Group.d.ts +4 -3
- package/lib/cjs/components/Group/Group.js +2 -2
- package/lib/cjs/components/Group/Skeleton.js +1 -1
- package/lib/cjs/components/GroupAutocomplete/GroupAutocomplete.d.ts +49 -0
- package/lib/cjs/components/GroupAutocomplete/GroupAutocomplete.js +101 -0
- package/lib/cjs/components/GroupAutocomplete/index.d.ts +3 -0
- package/lib/cjs/components/GroupAutocomplete/index.js +5 -0
- package/lib/cjs/components/GroupForm/GroupForm.d.ts +70 -0
- package/lib/cjs/components/GroupForm/GroupForm.js +239 -0
- package/lib/cjs/components/GroupForm/constants.d.ts +1 -0
- package/lib/cjs/components/{CreateGroup → GroupForm}/constants.js +1 -1
- package/lib/cjs/components/GroupForm/index.d.ts +3 -0
- package/lib/cjs/components/GroupForm/index.js +5 -0
- package/lib/cjs/components/GroupHeader/GroupHeader.js +4 -2
- package/lib/cjs/components/GroupInfoWidget/GroupInfoWidget.js +8 -8
- package/lib/cjs/components/GroupInviteButton/GroupInviteButton.js +5 -4
- package/lib/cjs/components/GroupMembersWidget/GroupMembersWidget.js +18 -16
- package/lib/cjs/components/GroupSubscribeButton/GroupSubscribeButton.js +11 -1
- package/lib/cjs/components/Groups/Groups.d.ts +1 -1
- package/lib/cjs/components/Groups/Groups.js +16 -19
- package/lib/cjs/components/Groups/Skeleton.d.ts +14 -2
- package/lib/cjs/components/Groups/Skeleton.js +12 -5
- package/lib/cjs/components/InlineComposerWidget/InlineComposerWidget.d.ts +2 -1
- package/lib/cjs/index.d.ts +4 -3
- package/lib/cjs/index.js +7 -5
- package/lib/esm/components/Composer/Attributes/Attributes.d.ts +1 -1
- package/lib/esm/components/Composer/Attributes/Attributes.js +7 -0
- package/lib/esm/components/Composer/Composer.d.ts +2 -1
- package/lib/esm/components/Composer/Composer.js +40 -11
- package/lib/esm/components/Composer/Content/ContentDiscussion/ContentDiscussion.js +7 -3
- package/lib/esm/components/Composer/Layer/AudienceLayer/AudienceLayer.d.ts +9 -2
- package/lib/esm/components/Composer/Layer/AudienceLayer/AudienceLayer.js +34 -13
- package/lib/esm/components/CreateGroupButton/CreateGroupButton.d.ts +2 -2
- package/lib/esm/components/CreateGroupButton/CreateGroupButton.js +5 -6
- package/lib/esm/components/CustomAdv/CustomAdv.d.ts +4 -0
- package/lib/esm/components/{CreateGroup/CreateGroup.d.ts → EditGroupButton/EditGroupButton.d.ts} +11 -16
- package/lib/esm/components/EditGroupButton/EditGroupButton.js +54 -0
- package/lib/esm/components/EditGroupButton/index.d.ts +3 -0
- package/lib/esm/components/EditGroupButton/index.js +2 -0
- package/lib/esm/components/Group/Group.d.ts +4 -3
- package/lib/esm/components/Group/Group.js +2 -2
- package/lib/esm/components/Group/Skeleton.js +1 -1
- package/lib/esm/components/GroupAutocomplete/GroupAutocomplete.d.ts +49 -0
- package/lib/esm/components/GroupAutocomplete/GroupAutocomplete.js +99 -0
- package/lib/esm/components/GroupAutocomplete/index.d.ts +3 -0
- package/lib/esm/components/GroupAutocomplete/index.js +2 -0
- package/lib/esm/components/GroupForm/GroupForm.d.ts +70 -0
- package/lib/esm/components/GroupForm/GroupForm.js +236 -0
- package/lib/esm/components/GroupForm/constants.d.ts +1 -0
- package/lib/esm/components/GroupForm/constants.js +1 -0
- package/lib/esm/components/GroupForm/index.d.ts +3 -0
- package/lib/esm/components/GroupForm/index.js +2 -0
- package/lib/esm/components/GroupHeader/GroupHeader.js +4 -2
- package/lib/esm/components/GroupInfoWidget/GroupInfoWidget.js +8 -8
- package/lib/esm/components/GroupInviteButton/GroupInviteButton.js +5 -4
- package/lib/esm/components/GroupMembersWidget/GroupMembersWidget.js +19 -17
- package/lib/esm/components/GroupSubscribeButton/GroupSubscribeButton.js +11 -1
- package/lib/esm/components/Groups/Groups.d.ts +1 -1
- package/lib/esm/components/Groups/Groups.js +17 -20
- package/lib/esm/components/Groups/Skeleton.d.ts +14 -2
- package/lib/esm/components/Groups/Skeleton.js +13 -5
- package/lib/esm/components/InlineComposerWidget/InlineComposerWidget.d.ts +2 -1
- package/lib/esm/index.d.ts +4 -3
- package/lib/esm/index.js +3 -2
- package/lib/umd/react-ui.js +1 -1
- package/package.json +6 -6
- package/lib/cjs/components/CreateGroup/CreateGroup.js +0 -187
- package/lib/cjs/components/CreateGroup/constants.d.ts +0 -1
- package/lib/cjs/components/CreateGroup/index.d.ts +0 -3
- package/lib/cjs/components/CreateGroup/index.js +0 -5
- package/lib/esm/components/CreateGroup/CreateGroup.js +0 -184
- package/lib/esm/components/CreateGroup/constants.d.ts +0 -1
- package/lib/esm/components/CreateGroup/constants.js +0 -1
- package/lib/esm/components/CreateGroup/index.d.ts +0 -3
- package/lib/esm/components/CreateGroup/index.js +0 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@selfcommunity/react-ui",
|
|
3
|
-
"version": "0.7.9-alpha.
|
|
3
|
+
"version": "0.7.9-alpha.5",
|
|
4
4
|
"description": "React UI Components to integrate a Community created with SelfCommunity Platform.",
|
|
5
5
|
"author": "SelfCommunity <https://www.selfcommunity.com>",
|
|
6
6
|
"homepage": "https://www.selfcommunity.com",
|
|
@@ -79,10 +79,10 @@
|
|
|
79
79
|
"dependencies": {
|
|
80
80
|
"@lexical/html": "^0.12.5",
|
|
81
81
|
"@lexical/react": "^0.12.5",
|
|
82
|
-
"@selfcommunity/api-services": "^0.4.9-alpha.
|
|
83
|
-
"@selfcommunity/react-core": "^0.4.9-alpha.
|
|
84
|
-
"@selfcommunity/react-i18n": "^0.5.9-alpha.
|
|
85
|
-
"@selfcommunity/types": "^0.5.9-alpha.
|
|
82
|
+
"@selfcommunity/api-services": "^0.4.9-alpha.3",
|
|
83
|
+
"@selfcommunity/react-core": "^0.4.9-alpha.4",
|
|
84
|
+
"@selfcommunity/react-i18n": "^0.5.9-alpha.3",
|
|
85
|
+
"@selfcommunity/types": "^0.5.9-alpha.3",
|
|
86
86
|
"@selfcommunity/utils": "^0.2.9-alpha.0",
|
|
87
87
|
"@types/classnames": "^2.3.1",
|
|
88
88
|
"@types/sortablejs": "1",
|
|
@@ -160,5 +160,5 @@
|
|
|
160
160
|
"bugs": {
|
|
161
161
|
"url": "https://github.com/selfcommunity/community-js/issues"
|
|
162
162
|
},
|
|
163
|
-
"gitHead": "
|
|
163
|
+
"gitHead": "39891841cb8e0626cfd7c1eeea709c8051ff4a66"
|
|
164
164
|
}
|
|
@@ -1,187 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const tslib_1 = require("tslib");
|
|
4
|
-
const react_1 = tslib_1.__importStar(require("react"));
|
|
5
|
-
const system_1 = require("@mui/system");
|
|
6
|
-
const styles_1 = require("@mui/material/styles");
|
|
7
|
-
const material_1 = require("@mui/material");
|
|
8
|
-
const react_intl_1 = require("react-intl");
|
|
9
|
-
const react_core_1 = require("@selfcommunity/react-core");
|
|
10
|
-
const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
11
|
-
const constants_1 = require("./constants");
|
|
12
|
-
const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
|
|
13
|
-
const lab_1 = require("@mui/lab");
|
|
14
|
-
const ChangeGroupPicture_1 = tslib_1.__importDefault(require("../ChangeGroupPicture"));
|
|
15
|
-
const ChangeGroupCover_1 = tslib_1.__importDefault(require("../ChangeGroupCover"));
|
|
16
|
-
const Group_1 = require("../../constants/Group");
|
|
17
|
-
const GroupInviteButton_1 = tslib_1.__importDefault(require("../GroupInviteButton"));
|
|
18
|
-
const types_1 = require("@selfcommunity/types");
|
|
19
|
-
const Errors_1 = require("../../constants/Errors");
|
|
20
|
-
const api_services_1 = require("@selfcommunity/api-services");
|
|
21
|
-
const utils_1 = require("@selfcommunity/utils");
|
|
22
|
-
const messages = (0, react_intl_1.defineMessages)({
|
|
23
|
-
name: {
|
|
24
|
-
id: 'ui.createGroup.name.placeholder',
|
|
25
|
-
defaultMessage: 'ui.createGroup.name.placeholder'
|
|
26
|
-
},
|
|
27
|
-
description: {
|
|
28
|
-
id: 'ui.createGroup.description.placeholder',
|
|
29
|
-
defaultMessage: 'ui.createGroup.description.placeholder'
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
const classes = {
|
|
33
|
-
root: `${constants_1.PREFIX}-root`,
|
|
34
|
-
active: `${constants_1.PREFIX}-active`,
|
|
35
|
-
title: `${constants_1.PREFIX}-title`,
|
|
36
|
-
header: `${constants_1.PREFIX}-header`,
|
|
37
|
-
cover: `${constants_1.PREFIX}-cover`,
|
|
38
|
-
avatar: `${constants_1.PREFIX}-avatar`,
|
|
39
|
-
form: `${constants_1.PREFIX}-form`,
|
|
40
|
-
switch: `${constants_1.PREFIX}-switch`,
|
|
41
|
-
switchLabel: `${constants_1.PREFIX}-switch-label`,
|
|
42
|
-
name: `${constants_1.PREFIX}-name`,
|
|
43
|
-
description: `${constants_1.PREFIX}-description`,
|
|
44
|
-
content: `${constants_1.PREFIX}-content`,
|
|
45
|
-
privacySection: `${constants_1.PREFIX}-privacy-section`,
|
|
46
|
-
privacySectionInfo: `${constants_1.PREFIX}-privacy-section-info`,
|
|
47
|
-
visibilitySection: `${constants_1.PREFIX}-visibility-section`,
|
|
48
|
-
visibilitySectionInfo: `${constants_1.PREFIX}-visibility-section-info`,
|
|
49
|
-
inviteSection: `${constants_1.PREFIX}-invite-section`
|
|
50
|
-
};
|
|
51
|
-
const Root = (0, styles_1.styled)(BaseDialog_1.default, {
|
|
52
|
-
name: constants_1.PREFIX,
|
|
53
|
-
slot: 'Root'
|
|
54
|
-
})(() => ({}));
|
|
55
|
-
/**
|
|
56
|
-
*> API documentation for the Community-JS Create Group Button component. Learn about the available props and the CSS API.
|
|
57
|
-
*
|
|
58
|
-
#### Import
|
|
59
|
-
```jsx
|
|
60
|
-
import {CreateGroupButton} from '@selfcommunity/react-ui';
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
#### Component Name
|
|
64
|
-
The name `SCCreateGroup` can be used when providing style overrides in the theme.
|
|
65
|
-
|
|
66
|
-
#### CSS
|
|
67
|
-
|
|
68
|
-
|Rule Name|Global class|Description|
|
|
69
|
-
|---|---|---|
|
|
70
|
-
|root|.SCCreateGroup-root|Styles applied to the root element.|
|
|
71
|
-
|
|
72
|
-
* @param inProps
|
|
73
|
-
*/
|
|
74
|
-
function CreateGroup(inProps) {
|
|
75
|
-
//PROPS
|
|
76
|
-
const props = (0, system_1.useThemeProps)({
|
|
77
|
-
props: inProps,
|
|
78
|
-
name: constants_1.PREFIX
|
|
79
|
-
});
|
|
80
|
-
const { className, open = true, onClose, group } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "group"]);
|
|
81
|
-
// TODO: fare initial state con tutti i fields per la gestione dell'edit
|
|
82
|
-
// STATE
|
|
83
|
-
const [avatar, setAvatar] = (0, react_1.useState)('');
|
|
84
|
-
const [cover, setCover] = (0, react_1.useState)('');
|
|
85
|
-
const [name, setName] = (0, react_1.useState)('');
|
|
86
|
-
const [invitedUsers, setInvitedUsers] = (0, react_1.useState)(null);
|
|
87
|
-
const [description, setDescription] = (0, react_1.useState)('');
|
|
88
|
-
const [isPublic, setIsPublic] = (0, react_1.useState)(true);
|
|
89
|
-
const [isVisible, setIsVisible] = (0, react_1.useState)(true);
|
|
90
|
-
const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
|
|
91
|
-
// INTL
|
|
92
|
-
const intl = (0, react_intl_1.useIntl)();
|
|
93
|
-
// CONTEXT
|
|
94
|
-
// PREFERENCES
|
|
95
|
-
const scPreferences = (0, react_core_1.useSCPreferences)();
|
|
96
|
-
const _backgroundCover = Object.assign({}, (cover
|
|
97
|
-
? { background: `url('${cover}') center / cover` }
|
|
98
|
-
: { background: `url('${scPreferences.preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
|
|
99
|
-
function handleChangeAvatar(avatar) {
|
|
100
|
-
const reader = new FileReader();
|
|
101
|
-
reader.onloadend = () => {
|
|
102
|
-
setAvatar(reader.result);
|
|
103
|
-
};
|
|
104
|
-
reader.readAsDataURL(avatar);
|
|
105
|
-
}
|
|
106
|
-
function handleChangeCover(cover) {
|
|
107
|
-
const reader = new FileReader();
|
|
108
|
-
reader.onloadend = () => {
|
|
109
|
-
setCover(reader.result);
|
|
110
|
-
};
|
|
111
|
-
reader.readAsDataURL(cover);
|
|
112
|
-
}
|
|
113
|
-
const handleSubmit = () => {
|
|
114
|
-
setIsSubmitting(true);
|
|
115
|
-
const formData = new FormData();
|
|
116
|
-
formData.append('name', name);
|
|
117
|
-
formData.append('description', description);
|
|
118
|
-
formData.append('privacy', isPublic ? types_1.SCGroupPrivacyType.PUBLIC : types_1.SCGroupPrivacyType.PRIVATE);
|
|
119
|
-
formData.append('image_original', avatar);
|
|
120
|
-
formData.append('emotional_image_original', cover);
|
|
121
|
-
formData.append('visible', isVisible);
|
|
122
|
-
for (const key in invitedUsers) {
|
|
123
|
-
formData.append(key, invitedUsers[key]);
|
|
124
|
-
}
|
|
125
|
-
api_services_1.GroupService.createGroup(formData, { headers: { 'Content-Type': 'multipart/form-data' } })
|
|
126
|
-
.then((data) => {
|
|
127
|
-
console.log(data);
|
|
128
|
-
setIsSubmitting(false);
|
|
129
|
-
})
|
|
130
|
-
.catch((error) => {
|
|
131
|
-
setIsSubmitting(false);
|
|
132
|
-
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
|
|
133
|
-
});
|
|
134
|
-
};
|
|
135
|
-
const handleInviteSection = (data) => {
|
|
136
|
-
setInvitedUsers(data);
|
|
137
|
-
};
|
|
138
|
-
/**
|
|
139
|
-
* Renders root object
|
|
140
|
-
*/
|
|
141
|
-
return (react_1.default.createElement(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.title.edit", defaultMessage: "ui.createGroup.title.edit" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.title", defaultMessage: "ui.createGroup.title" })), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className), actions: react_1.default.createElement(lab_1.LoadingButton, { loading: isSubmitting, disabled: !name, variant: "contained", onClick: handleSubmit, color: "secondary" }, group ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.button.edit", defaultMessage: "ui.createGroup.button.edit" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.button.create", defaultMessage: "ui.createGroup.button.create" }))) }, rest),
|
|
142
|
-
react_1.default.createElement(react_1.default.Fragment, null,
|
|
143
|
-
react_1.default.createElement(react_1.default.Fragment, null,
|
|
144
|
-
react_1.default.createElement(material_1.Paper, { style: _backgroundCover, classes: { root: classes.cover } },
|
|
145
|
-
react_1.default.createElement(material_1.Box, { className: classes.avatar },
|
|
146
|
-
react_1.default.createElement(material_1.Avatar, null, avatar ? react_1.default.createElement("img", { src: avatar, alt: "avatar" }) : react_1.default.createElement(material_1.Icon, null, "icon_image"))),
|
|
147
|
-
react_1.default.createElement(react_1.default.Fragment, null,
|
|
148
|
-
react_1.default.createElement(ChangeGroupPicture_1.default, { isCreationMode: true, onChange: handleChangeAvatar }),
|
|
149
|
-
react_1.default.createElement(ChangeGroupCover_1.default, { isCreationMode: true, onChange: handleChangeCover }))),
|
|
150
|
-
react_1.default.createElement(material_1.Typography, { className: classes.header, align: "center" },
|
|
151
|
-
react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.header", defaultMessage: "ui.createGroup.header" }))),
|
|
152
|
-
react_1.default.createElement(material_1.FormGroup, { className: classes.form },
|
|
153
|
-
react_1.default.createElement(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: name, onChange: (event) => setName(event.target.value), InputProps: {
|
|
154
|
-
endAdornment: react_1.default.createElement(material_1.Typography, { variant: "body2" }, Group_1.GROUP_TITLE_MAX_LENGTH - name.length)
|
|
155
|
-
} }),
|
|
156
|
-
react_1.default.createElement(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: description, onChange: (event) => setDescription(event.target.value), InputProps: {
|
|
157
|
-
endAdornment: react_1.default.createElement(material_1.Typography, { variant: "body2" }, Group_1.GROUP_DESCRIPTION_MAX_LENGTH - description.length)
|
|
158
|
-
} }),
|
|
159
|
-
react_1.default.createElement(material_1.Box, { className: classes.privacySection },
|
|
160
|
-
react_1.default.createElement(material_1.Typography, { variant: "h4" },
|
|
161
|
-
react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.privacy.title", defaultMessage: "ui.createGroup.privacy.title", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks) } })),
|
|
162
|
-
react_1.default.createElement(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center" },
|
|
163
|
-
react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !isPublic }) },
|
|
164
|
-
react_1.default.createElement(material_1.Icon, null, "private"),
|
|
165
|
-
react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.privacy.private", defaultMessage: "ui.createGroup.privacy.private" })),
|
|
166
|
-
react_1.default.createElement(material_1.Switch, { className: classes.switch, checked: isPublic, onClick: () => setIsPublic(!isPublic) }),
|
|
167
|
-
react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: isPublic }) },
|
|
168
|
-
react_1.default.createElement(material_1.Icon, null, "public"),
|
|
169
|
-
react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.privacy.public", defaultMessage: "ui.createGroup.privacy.public" }))),
|
|
170
|
-
react_1.default.createElement(material_1.Typography, { variant: "body2", className: classes.privacySectionInfo }, isPublic ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.privacy.public.info", defaultMessage: "ui.createGroup.privacy.public.info", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks) } })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.privacy.private.info", defaultMessage: "ui.createGroup.private.public.info", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks) } })))),
|
|
171
|
-
react_1.default.createElement(material_1.Box, { className: classes.visibilitySection }, !isPublic && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
172
|
-
react_1.default.createElement(material_1.Typography, { variant: "h4" },
|
|
173
|
-
react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.visibility.title", defaultMessage: "ui.createGroup.visibility.title", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks) } })),
|
|
174
|
-
react_1.default.createElement(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center" },
|
|
175
|
-
react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !isVisible }) },
|
|
176
|
-
react_1.default.createElement(material_1.Icon, null, "visibility_off"),
|
|
177
|
-
react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.visibility.hidden", defaultMessage: "ui.createGroup.visibility.hidden" })),
|
|
178
|
-
react_1.default.createElement(material_1.Switch, { className: classes.switch, checked: isVisible, onClick: () => setIsVisible(!isVisible) }),
|
|
179
|
-
react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: isVisible }) },
|
|
180
|
-
react_1.default.createElement(material_1.Icon, null, "visibility"),
|
|
181
|
-
react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.visibility.visible", defaultMessage: "ui.createGroup.visibility.visible" }))),
|
|
182
|
-
react_1.default.createElement(material_1.Typography, { variant: "body2", className: classes.visibilitySectionInfo }, !isVisible ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.visibility.hidden.info", defaultMessage: "ui.createGroup.visibility.hidden.info", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks) } })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.createGroup.visibility.visible.info", defaultMessage: "ui.createGroup.visibility.visible.info", values: { b: (chunks) => react_1.default.createElement("strong", null, chunks) } }))))))),
|
|
183
|
-
react_1.default.createElement(material_1.Divider, null),
|
|
184
|
-
react_1.default.createElement(material_1.Box, { className: classes.inviteSection },
|
|
185
|
-
react_1.default.createElement(GroupInviteButton_1.default, { handleInvitations: handleInviteSection })))));
|
|
186
|
-
}
|
|
187
|
-
exports.default = CreateGroup;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const PREFIX = "SCCreateGroup";
|
|
@@ -1,184 +0,0 @@
|
|
|
1
|
-
import { __rest } from "tslib";
|
|
2
|
-
import React, { useState } from 'react';
|
|
3
|
-
import { useThemeProps } from '@mui/system';
|
|
4
|
-
import { styled } from '@mui/material/styles';
|
|
5
|
-
import { Avatar, Box, Divider, FormGroup, Icon, Paper, Stack, Switch, TextField, Typography } from '@mui/material';
|
|
6
|
-
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
|
7
|
-
import { SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
|
|
8
|
-
import classNames from 'classnames';
|
|
9
|
-
import { PREFIX } from './constants';
|
|
10
|
-
import BaseDialog from '../../shared/BaseDialog';
|
|
11
|
-
import { LoadingButton } from '@mui/lab';
|
|
12
|
-
import ChangeGroupPicture from '../ChangeGroupPicture';
|
|
13
|
-
import ChangeGroupCover from '../ChangeGroupCover';
|
|
14
|
-
import { GROUP_DESCRIPTION_MAX_LENGTH, GROUP_TITLE_MAX_LENGTH } from '../../constants/Group';
|
|
15
|
-
import GroupInviteButton from '../GroupInviteButton';
|
|
16
|
-
import { SCGroupPrivacyType } from '@selfcommunity/types';
|
|
17
|
-
import { SCOPE_SC_UI } from '../../constants/Errors';
|
|
18
|
-
import { GroupService } from '@selfcommunity/api-services';
|
|
19
|
-
import { Logger } from '@selfcommunity/utils';
|
|
20
|
-
const messages = defineMessages({
|
|
21
|
-
name: {
|
|
22
|
-
id: 'ui.createGroup.name.placeholder',
|
|
23
|
-
defaultMessage: 'ui.createGroup.name.placeholder'
|
|
24
|
-
},
|
|
25
|
-
description: {
|
|
26
|
-
id: 'ui.createGroup.description.placeholder',
|
|
27
|
-
defaultMessage: 'ui.createGroup.description.placeholder'
|
|
28
|
-
}
|
|
29
|
-
});
|
|
30
|
-
const classes = {
|
|
31
|
-
root: `${PREFIX}-root`,
|
|
32
|
-
active: `${PREFIX}-active`,
|
|
33
|
-
title: `${PREFIX}-title`,
|
|
34
|
-
header: `${PREFIX}-header`,
|
|
35
|
-
cover: `${PREFIX}-cover`,
|
|
36
|
-
avatar: `${PREFIX}-avatar`,
|
|
37
|
-
form: `${PREFIX}-form`,
|
|
38
|
-
switch: `${PREFIX}-switch`,
|
|
39
|
-
switchLabel: `${PREFIX}-switch-label`,
|
|
40
|
-
name: `${PREFIX}-name`,
|
|
41
|
-
description: `${PREFIX}-description`,
|
|
42
|
-
content: `${PREFIX}-content`,
|
|
43
|
-
privacySection: `${PREFIX}-privacy-section`,
|
|
44
|
-
privacySectionInfo: `${PREFIX}-privacy-section-info`,
|
|
45
|
-
visibilitySection: `${PREFIX}-visibility-section`,
|
|
46
|
-
visibilitySectionInfo: `${PREFIX}-visibility-section-info`,
|
|
47
|
-
inviteSection: `${PREFIX}-invite-section`
|
|
48
|
-
};
|
|
49
|
-
const Root = styled(BaseDialog, {
|
|
50
|
-
name: PREFIX,
|
|
51
|
-
slot: 'Root'
|
|
52
|
-
})(() => ({}));
|
|
53
|
-
/**
|
|
54
|
-
*> API documentation for the Community-JS Create Group Button component. Learn about the available props and the CSS API.
|
|
55
|
-
*
|
|
56
|
-
#### Import
|
|
57
|
-
```jsx
|
|
58
|
-
import {CreateGroupButton} from '@selfcommunity/react-ui';
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
#### Component Name
|
|
62
|
-
The name `SCCreateGroup` can be used when providing style overrides in the theme.
|
|
63
|
-
|
|
64
|
-
#### CSS
|
|
65
|
-
|
|
66
|
-
|Rule Name|Global class|Description|
|
|
67
|
-
|---|---|---|
|
|
68
|
-
|root|.SCCreateGroup-root|Styles applied to the root element.|
|
|
69
|
-
|
|
70
|
-
* @param inProps
|
|
71
|
-
*/
|
|
72
|
-
export default function CreateGroup(inProps) {
|
|
73
|
-
//PROPS
|
|
74
|
-
const props = useThemeProps({
|
|
75
|
-
props: inProps,
|
|
76
|
-
name: PREFIX
|
|
77
|
-
});
|
|
78
|
-
const { className, open = true, onClose, group } = props, rest = __rest(props, ["className", "open", "onClose", "group"]);
|
|
79
|
-
// TODO: fare initial state con tutti i fields per la gestione dell'edit
|
|
80
|
-
// STATE
|
|
81
|
-
const [avatar, setAvatar] = useState('');
|
|
82
|
-
const [cover, setCover] = useState('');
|
|
83
|
-
const [name, setName] = useState('');
|
|
84
|
-
const [invitedUsers, setInvitedUsers] = useState(null);
|
|
85
|
-
const [description, setDescription] = useState('');
|
|
86
|
-
const [isPublic, setIsPublic] = useState(true);
|
|
87
|
-
const [isVisible, setIsVisible] = useState(true);
|
|
88
|
-
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
89
|
-
// INTL
|
|
90
|
-
const intl = useIntl();
|
|
91
|
-
// CONTEXT
|
|
92
|
-
// PREFERENCES
|
|
93
|
-
const scPreferences = useSCPreferences();
|
|
94
|
-
const _backgroundCover = Object.assign({}, (cover
|
|
95
|
-
? { background: `url('${cover}') center / cover` }
|
|
96
|
-
: { background: `url('${scPreferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
|
|
97
|
-
function handleChangeAvatar(avatar) {
|
|
98
|
-
const reader = new FileReader();
|
|
99
|
-
reader.onloadend = () => {
|
|
100
|
-
setAvatar(reader.result);
|
|
101
|
-
};
|
|
102
|
-
reader.readAsDataURL(avatar);
|
|
103
|
-
}
|
|
104
|
-
function handleChangeCover(cover) {
|
|
105
|
-
const reader = new FileReader();
|
|
106
|
-
reader.onloadend = () => {
|
|
107
|
-
setCover(reader.result);
|
|
108
|
-
};
|
|
109
|
-
reader.readAsDataURL(cover);
|
|
110
|
-
}
|
|
111
|
-
const handleSubmit = () => {
|
|
112
|
-
setIsSubmitting(true);
|
|
113
|
-
const formData = new FormData();
|
|
114
|
-
formData.append('name', name);
|
|
115
|
-
formData.append('description', description);
|
|
116
|
-
formData.append('privacy', isPublic ? SCGroupPrivacyType.PUBLIC : SCGroupPrivacyType.PRIVATE);
|
|
117
|
-
formData.append('image_original', avatar);
|
|
118
|
-
formData.append('emotional_image_original', cover);
|
|
119
|
-
formData.append('visible', isVisible);
|
|
120
|
-
for (const key in invitedUsers) {
|
|
121
|
-
formData.append(key, invitedUsers[key]);
|
|
122
|
-
}
|
|
123
|
-
GroupService.createGroup(formData, { headers: { 'Content-Type': 'multipart/form-data' } })
|
|
124
|
-
.then((data) => {
|
|
125
|
-
console.log(data);
|
|
126
|
-
setIsSubmitting(false);
|
|
127
|
-
})
|
|
128
|
-
.catch((error) => {
|
|
129
|
-
setIsSubmitting(false);
|
|
130
|
-
Logger.error(SCOPE_SC_UI, error);
|
|
131
|
-
});
|
|
132
|
-
};
|
|
133
|
-
const handleInviteSection = (data) => {
|
|
134
|
-
setInvitedUsers(data);
|
|
135
|
-
};
|
|
136
|
-
/**
|
|
137
|
-
* Renders root object
|
|
138
|
-
*/
|
|
139
|
-
return (React.createElement(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? (React.createElement(FormattedMessage, { id: "ui.createGroup.title.edit", defaultMessage: "ui.createGroup.title.edit" })) : (React.createElement(FormattedMessage, { id: "ui.createGroup.title", defaultMessage: "ui.createGroup.title" })), open: open, onClose: onClose, className: classNames(classes.root, className), actions: React.createElement(LoadingButton, { loading: isSubmitting, disabled: !name, variant: "contained", onClick: handleSubmit, color: "secondary" }, group ? (React.createElement(FormattedMessage, { id: "ui.createGroup.button.edit", defaultMessage: "ui.createGroup.button.edit" })) : (React.createElement(FormattedMessage, { id: "ui.createGroup.button.create", defaultMessage: "ui.createGroup.button.create" }))) }, rest),
|
|
140
|
-
React.createElement(React.Fragment, null,
|
|
141
|
-
React.createElement(React.Fragment, null,
|
|
142
|
-
React.createElement(Paper, { style: _backgroundCover, classes: { root: classes.cover } },
|
|
143
|
-
React.createElement(Box, { className: classes.avatar },
|
|
144
|
-
React.createElement(Avatar, null, avatar ? React.createElement("img", { src: avatar, alt: "avatar" }) : React.createElement(Icon, null, "icon_image"))),
|
|
145
|
-
React.createElement(React.Fragment, null,
|
|
146
|
-
React.createElement(ChangeGroupPicture, { isCreationMode: true, onChange: handleChangeAvatar }),
|
|
147
|
-
React.createElement(ChangeGroupCover, { isCreationMode: true, onChange: handleChangeCover }))),
|
|
148
|
-
React.createElement(Typography, { className: classes.header, align: "center" },
|
|
149
|
-
React.createElement(FormattedMessage, { id: "ui.createGroup.header", defaultMessage: "ui.createGroup.header" }))),
|
|
150
|
-
React.createElement(FormGroup, { className: classes.form },
|
|
151
|
-
React.createElement(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: name, onChange: (event) => setName(event.target.value), InputProps: {
|
|
152
|
-
endAdornment: React.createElement(Typography, { variant: "body2" }, GROUP_TITLE_MAX_LENGTH - name.length)
|
|
153
|
-
} }),
|
|
154
|
-
React.createElement(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: description, onChange: (event) => setDescription(event.target.value), InputProps: {
|
|
155
|
-
endAdornment: React.createElement(Typography, { variant: "body2" }, GROUP_DESCRIPTION_MAX_LENGTH - description.length)
|
|
156
|
-
} }),
|
|
157
|
-
React.createElement(Box, { className: classes.privacySection },
|
|
158
|
-
React.createElement(Typography, { variant: "h4" },
|
|
159
|
-
React.createElement(FormattedMessage, { id: "ui.createGroup.privacy.title", defaultMessage: "ui.createGroup.privacy.title", values: { b: (chunks) => React.createElement("strong", null, chunks) } })),
|
|
160
|
-
React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
|
|
161
|
-
React.createElement(Typography, { className: classNames(classes.switchLabel, { [classes.active]: !isPublic }) },
|
|
162
|
-
React.createElement(Icon, null, "private"),
|
|
163
|
-
React.createElement(FormattedMessage, { id: "ui.createGroup.privacy.private", defaultMessage: "ui.createGroup.privacy.private" })),
|
|
164
|
-
React.createElement(Switch, { className: classes.switch, checked: isPublic, onClick: () => setIsPublic(!isPublic) }),
|
|
165
|
-
React.createElement(Typography, { className: classNames(classes.switchLabel, { [classes.active]: isPublic }) },
|
|
166
|
-
React.createElement(Icon, null, "public"),
|
|
167
|
-
React.createElement(FormattedMessage, { id: "ui.createGroup.privacy.public", defaultMessage: "ui.createGroup.privacy.public" }))),
|
|
168
|
-
React.createElement(Typography, { variant: "body2", className: classes.privacySectionInfo }, isPublic ? (React.createElement(FormattedMessage, { id: "ui.createGroup.privacy.public.info", defaultMessage: "ui.createGroup.privacy.public.info", values: { b: (chunks) => React.createElement("strong", null, chunks) } })) : (React.createElement(FormattedMessage, { id: "ui.createGroup.privacy.private.info", defaultMessage: "ui.createGroup.private.public.info", values: { b: (chunks) => React.createElement("strong", null, chunks) } })))),
|
|
169
|
-
React.createElement(Box, { className: classes.visibilitySection }, !isPublic && (React.createElement(React.Fragment, null,
|
|
170
|
-
React.createElement(Typography, { variant: "h4" },
|
|
171
|
-
React.createElement(FormattedMessage, { id: "ui.createGroup.visibility.title", defaultMessage: "ui.createGroup.visibility.title", values: { b: (chunks) => React.createElement("strong", null, chunks) } })),
|
|
172
|
-
React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
|
|
173
|
-
React.createElement(Typography, { className: classNames(classes.switchLabel, { [classes.active]: !isVisible }) },
|
|
174
|
-
React.createElement(Icon, null, "visibility_off"),
|
|
175
|
-
React.createElement(FormattedMessage, { id: "ui.createGroup.visibility.hidden", defaultMessage: "ui.createGroup.visibility.hidden" })),
|
|
176
|
-
React.createElement(Switch, { className: classes.switch, checked: isVisible, onClick: () => setIsVisible(!isVisible) }),
|
|
177
|
-
React.createElement(Typography, { className: classNames(classes.switchLabel, { [classes.active]: isVisible }) },
|
|
178
|
-
React.createElement(Icon, null, "visibility"),
|
|
179
|
-
React.createElement(FormattedMessage, { id: "ui.createGroup.visibility.visible", defaultMessage: "ui.createGroup.visibility.visible" }))),
|
|
180
|
-
React.createElement(Typography, { variant: "body2", className: classes.visibilitySectionInfo }, !isVisible ? (React.createElement(FormattedMessage, { id: "ui.createGroup.visibility.hidden.info", defaultMessage: "ui.createGroup.visibility.hidden.info", values: { b: (chunks) => React.createElement("strong", null, chunks) } })) : (React.createElement(FormattedMessage, { id: "ui.createGroup.visibility.visible.info", defaultMessage: "ui.createGroup.visibility.visible.info", values: { b: (chunks) => React.createElement("strong", null, chunks) } }))))))),
|
|
181
|
-
React.createElement(Divider, null),
|
|
182
|
-
React.createElement(Box, { className: classes.inviteSection },
|
|
183
|
-
React.createElement(GroupInviteButton, { handleInvitations: handleInviteSection })))));
|
|
184
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const PREFIX = "SCCreateGroup";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export const PREFIX = 'SCCreateGroup';
|